/* ═══════════════════════════════════════════
   SHARED CASE STUDY PAGE STYLES
   ═══════════════════════════════════════════ */

/* ── Hero ── */
.cs-hero {
  overflow:hidden;
  position: relative;
  z-index: 0;
  padding: 180px 102px 100px;
  background: radial-gradient(ellipse 130% 90% at -11% 54%, #9eff66 0%, #f8d2cc 59%);
}
.cs-hero .ellipse-11 { top: 0; right: 0; }
.cs-hero .ellipse-12 { top: 80px;   right: 0; }

.cs-hero-text {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 1071px;
  margin: 0 auto 60px;
}
.cs-title {
  font-family: 'Onest', sans-serif;
  font-size: 96px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 5.76px;
  color: #141414;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.cs-cats {
  font-family: 'Onest', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.62;
  letter-spacing: 0.72px;
  color: #c07167;
  margin-bottom: 20px;
}
.cs-desc {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.62;
  color: #141414;
}

.cs-brand-wrap {
  position: relative;
  z-index: 10;
  border-radius: 24px;
  overflow: hidden;
  width: 100%;
  box-shadow: 6px 6px 20px rgba(0,0,0,0.18);
}
.cs-brand-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Social Media section ── */
.cs-social-section {
  overflow:hidden;
  position: relative;
  z-index: 0;
  padding: 100px 102px;
  background: radial-gradient(ellipse 130% 90% at 111% 54%, #9eff66 0%, #f8d2cc 59%);
}
.cs-social-section .ellipse-16 { top: 0; right: 0; }

.cs-section-title {
  font-family: 'Onest', sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.19;
  letter-spacing: 1.44px;
  color: #141414;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 48px;
}

.cs-social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cs-social-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 6px 6px 13px rgba(0,0,0,0.35);
}

/* ── Web Design section ── */
.cs-web-section {
  overflow:hidden;
  position: relative;
  z-index: 0;
  padding: 100px 102px;
  background: radial-gradient(ellipse 130% 90% at -11% 54%, #9eff66 0%, #f8d2cc 59%);
}
.cs-web-section .ellipse-13 { bottom: 100px; left: 0; }
.cs-web-section .ellipse-15 { top: 200px; right: 0; }

.cs-webpage-wrap {
  position: relative;
  z-index: 10;
  border-radius: 24px;
  overflow: hidden;
  width: 100%;
  box-shadow: 6px 6px 20px rgba(0,0,0,0.18);
}
.cs-webpage-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── CTA buttons ── */
.cs-cta-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 80px 102px;
  background: radial-gradient(ellipse 130% 90% at 111% 54%, #9eff66 0%, #f8d2cc 59%);
  flex-wrap: wrap;
}
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 40px;
  border-radius: 30px;
  background: #c07167;
  font-family: 'Onest', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}
.btn-cta:hover { background: #ad5d54; }

/* ── Marketplace Visuals section ── */
.cs-market-section {
  overflow:hidden;
  position: relative;
  z-index: 0;
  padding: 100px 102px;
  background: radial-gradient(ellipse 130% 90% at -11% 54%, #9eff66 0%, #f8d2cc 59%);
}
.cs-market-section .ellipse-11 { top: 0; right: 0; }

.cs-market-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.cs-market-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  box-shadow: 6px 6px 13px rgba(0,0,0,0.25);
}

/* ── Hero variants ── */
.cs-hero--no-img {
  padding-bottom: 80px;
}
.cs-hero--no-img .cs-hero-text {
  margin-bottom: 0;
}
.cs-title--long {
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: 2px;
}

/* ── YES NATURAL section ── */
.cs-yn-section {
  overflow:hidden;
  position: relative;
  z-index: 0;
  padding: 100px 102px;
  background: radial-gradient(ellipse 130% 90% at -11% 54%, #9eff66 0%, #f8d2cc 59%);
}
.cs-yn-section .ellipse-16 { top: 0; right: 0; }

.cs-yn-logo-wrap {
  position: relative;
  z-index: 10;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  margin-bottom: 24px;
  box-shadow: 6px 6px 20px rgba(0,0,0,0.12);
}
.cs-yn-logo-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.cs-yn-variants {
  position: relative;
  z-index: 10;
  background: #fff;
  border-radius: 43px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
  box-shadow: 6px 6px 20px rgba(0,0,0,0.10);
}
.cs-yn-variants-wide {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  display: block;
  object-fit: contain;
}
.cs-yn-variants-dark {
  flex: 0 0 auto;
  width: 31%;
  height: auto;
  display: block;
  object-fit: contain;
}

.cs-yn-packaging-wrap {
  position: relative;
  z-index: 10;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  box-shadow: 6px 6px 20px rgba(0,0,0,0.18);
}
.cs-yn-packaging-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Campaign section (SMCV) ── */
.cs-campaign-section {
  overflow:hidden;
  position: relative;
  z-index: 0;
  padding: 100px 102px;
  background: radial-gradient(ellipse 130% 90% at 111% 54%, #9eff66 0%, #f8d2cc 59%);
}
.cs-campaign-section .ellipse-16 { top: 0; right: 0; }

.cs-campaign-full {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 4px 4px 13px rgba(0,0,0,0.25);
  margin-bottom: 24px;
  position: relative;
  z-index: 10;
}
.cs-campaign-full img {
  width: 100%;
  height: auto;
  display: block;
}

.cs-campaign-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
.cs-campaign-2x2-img {
  width: 100%;
  aspect-ratio: 586 / 390;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 4px 4px 13px rgba(0,0,0,0.25);
}

/* ── Characters Design section ── */
.cs-chars-section {
  overflow:hidden;
  position: relative;
  z-index: 0;
  padding: 100px 102px;
  background: radial-gradient(ellipse 130% 90% at 111% 54%, #9eff66 0%, #f8d2cc 59%);
}
.cs-chars-section .ellipse-16 { top: 0; right: 0; }

.cs-chars-wrap {
  position: relative;
  z-index: 10;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  box-shadow: 6px 6px 13px rgba(0,0,0,0.25);
}
.cs-chars-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Deck sections (Packaging / POSM / Launch Event) ── */
.cs-deck-section {
  overflow:hidden;
  position: relative;
  z-index: 0;
  padding: 100px 102px;
  background: radial-gradient(ellipse 130% 90% at -11% 54%, #9eff66 0%, #f8d2cc 59%);
}
.cs-deck-section--alt {
  background: radial-gradient(ellipse 130% 90% at 111% 54%, #9eff66 0%, #f8d2cc 59%);
}
.cs-deck-section .ellipse-11 { top: 0; right: 0; }
.cs-deck-section .ellipse-16 { top: 0; right: 0; }
.cs-deck-section .ellipse-13 { bottom: 100px; left: 0; }

.cs-deck-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.cs-deck-img {
  width: 100%;
  aspect-ratio: 602 / 339;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.25);
}

/* ── Publications section ── */
.cs-pub-section {
  overflow:hidden;
  position: relative;
  z-index: 0;
  padding: 100px 102px;
  background: radial-gradient(ellipse 130% 90% at -11% 54%, #9eff66 0%, #f8d2cc 59%);
}
.cs-pub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.cs-pub-img {
  width: 100%;
  aspect-ratio: 606 / 370;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 6px 6px 13px rgba(0,0,0,0.35);
}

/* ── Poster Design section ── */
.cs-poster-section {
  overflow:hidden;
  position: relative;
  z-index: 0;
  padding: 100px 102px;
  background: radial-gradient(ellipse 130% 90% at 111% 54%, #9eff66 0%, #f8d2cc 59%);
}
.cs-poster-section .ellipse-16 { top: 0; right: 0; }

.cs-poster-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
.cs-poster-img {
  width: 100%;
  aspect-ratio: 397 / 298;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 6px 6px 13px rgba(0,0,0,0.35);
}
.cs-poster-large {
  position: relative;
  z-index: 10;
  border-radius: 24px;
  overflow: hidden;
  width: 100%;
  box-shadow: 6px 6px 20px rgba(0,0,0,0.18);
}
.cs-poster-large img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Social Media 4-col variant (reuses cs-market-grid) ── */
.cs-social-section--4col {
  background: radial-gradient(ellipse 130% 90% at -11% 54%, #9eff66 0%, #f8d2cc 59%);
}
.cs-social-section--4col .ellipse-13 { bottom: 100px; left: 0; }
.cs-social-section--4col .ellipse-15 { top: 200px; right: 0; }

/* ── Square 2-col grid ── */
.cs-sq2-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.cs-sq2-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 6px 6px 13px rgba(0,0,0,0.35);
}

/* ── Portrait 2-col grid ── */
.cs-portrait-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.cs-portrait-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 6px 6px 13px rgba(0,0,0,0.35);
}

/* ── Asymmetric 2-col (narrow + wide) ── */
.cs-asym-grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 24px;
  margin-bottom: 24px;
}
.cs-asym-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 6px 6px 13px rgba(0,0,0,0.35);
}

/* ── 3-col landscape grid ── */
.cs-3col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
.cs-3col-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 6px 6px 13px rgba(0,0,0,0.35);
}

/* ═══════════════════════════════════════════
   RESPONSIVE — ≤ 900px
   ═══════════════════════════════════════════ */
@media(max-width: 900px) {
  .cs-hero {
  overflow:hidden; padding: 100px 20px 56px; }
  .cs-hero .ellipse-11 { width: 200px; height: 200px; top: 40px; right: 0; opacity: 0.55; }
  .cs-hero .ellipse-12 { display: none; }

  .cs-title { font-size: clamp(48px, 12vw, 80px); letter-spacing: 2px; }
  .cs-cats  { font-size: 16px; }
  .cs-desc  { font-size: 16px; }
  .cs-hero-text { margin-bottom: 36px; }

  .cs-social-section {
  overflow:hidden; padding: 56px 20px; }
  .cs-social-section .ellipse-16 { display: none; }
  .cs-section-title { font-size: clamp(28px, 8vw, 40px); margin-bottom: 32px; }
  .cs-social-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cs-social-img { border-radius: 10px; }

  .cs-web-section {
  overflow:hidden; padding: 56px 20px; }
  .cs-web-section .ellipse-13,
  .cs-web-section .ellipse-15 { display: none; }

  .cs-market-section {
  overflow:hidden; padding: 56px 20px; }
  .cs-market-section .ellipse-11 { display: none; }
  .cs-market-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cs-market-img { border-radius: 10px; }

  .cs-cta-section { padding: 48px 20px; gap: 16px; }
  .btn-cta { font-size: 18px; height: 52px; padding: 0 28px; }

  /* YES NATURAL section */
  .cs-yn-section {
  overflow:hidden; padding: 56px 20px; }
  .cs-yn-section .ellipse-16 { display: none; }
  .cs-yn-logo-wrap { border-radius: 12px; margin-bottom: 12px; }
  .cs-yn-variants { border-radius: 16px; padding: 16px; gap: 12px; margin-bottom: 12px; flex-direction: column; }
  .cs-yn-variants-wide { width: 100%; }
  .cs-yn-variants-dark { width: 60%; align-self: center; }
  .cs-yn-packaging-wrap { border-radius: 12px; }

  /* SMCV campaign section */
  .cs-campaign-section {
  overflow:hidden; padding: 56px 20px; }
  .cs-campaign-section .ellipse-16 { display: none; }
  .cs-campaign-full { border-radius: 10px; margin-bottom: 12px; }
  .cs-campaign-2x2 { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
  .cs-campaign-2x2-img { border-radius: 10px; aspect-ratio: 3 / 2; }

  /* HapiFam variants */
  .cs-chars-section {
  overflow:hidden; padding: 56px 20px; }
  .cs-chars-section .ellipse-16 { display: none; }
  .cs-chars-wrap { border-radius: 12px; }

  .cs-deck-section {
  overflow:hidden; padding: 56px 20px; }
  .cs-deck-section .ellipse-11,
  .cs-deck-section .ellipse-16,
  .cs-deck-section .ellipse-13 { display: none; }
  .cs-deck-grid { gap: 12px; }
  .cs-deck-img { border-radius: 10px; }

  /* First City variants */
  .cs-hero--no-img { padding-bottom: 56px; }
  .cs-title--long { font-size: clamp(28px, 7vw, 40px); }

  .cs-pub-section {
  overflow:hidden; padding: 56px 20px; }
  .cs-pub-grid { gap: 12px; }
  .cs-pub-img { border-radius: 10px; }

  .cs-poster-section {
  overflow:hidden; padding: 56px 20px; }
  .cs-poster-section .ellipse-16 { display: none; }
  .cs-poster-row { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
  .cs-poster-img { border-radius: 10px; aspect-ratio: 4 / 3; }
  .cs-poster-large { border-radius: 12px; }

  .cs-social-section--4col { padding: 56px 20px; }
  .cs-social-section--4col .ellipse-13,
  .cs-social-section--4col .ellipse-15 { display: none; }

  .cs-sq2-grid { gap: 12px; }
  .cs-sq2-img { border-radius: 10px; }
  .cs-portrait-grid { grid-template-columns: 1fr; gap: 12px; }
  .cs-portrait-img { border-radius: 10px; aspect-ratio: 3 / 2; }
  .cs-asym-grid { grid-template-columns: 1fr; gap: 12px; }
  .cs-3col-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cs-3col-img { border-radius: 10px; }
}