/* ============================================================
   Case Hexon — estilos completos
   Background cinza claro + cards alternados preto/branco
   Tokens (--fs-*, --fw-*) de design-system.css
   Tudo prefixado html.ds .case-page pra ganhar do Webflow
   ============================================================ */

html.ds .case-page {
  background: #ededed !important;
  color: #0a0a0a !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 300 !important;
  min-height: 100vh;
  --hx-yellow: #f5c842;
  --hx-black: #0a0a0a;
  --hx-gray-bg: #ededed;
  --hx-radius: 28px;
  --hx-card-pad-y: 96px;
  --hx-card-pad-x: 88px;
}

html.ds .case-page * { box-sizing: border-box; }
html.ds .case-page img { display: block; max-width: 100%; height: auto; }
html.ds .case-page video { display: block; width: 100%; height: 100%; object-fit: cover; }
html.ds .case-page figure { margin: 0; }
html.ds .case-page p { margin: 0; }
html.ds .case-page a { color: inherit; text-decoration: none; }

html.ds .case-page .skip-link {
  position: absolute;
  top: -100px; left: 0;
  background: #fff; color: #000;
  padding: 8px 16px; z-index: 1000;
}
html.ds .case-page .skip-link:focus { top: 0; }

/* ============================================================
   Seções — wrapper geral
   ============================================================ */
html.ds .case-page .hx-section {
  padding: 8px 32px;
  width: 100%;
  max-width: 98%;
  margin: 0 auto;
}
html.ds .case-page .hx-section:first-of-type { padding-top: 0; }

/* ============================================================
   Card — base de todos os cards arredondados
   ============================================================ */
html.ds .case-page .hx-card {
  border-radius: var(--hx-radius);
  overflow: hidden;
  position: relative;
  width: 100%;
}
html.ds .case-page .hx-card-white { background: #fff; color: var(--hx-black); }
html.ds .case-page .hx-card-black { background: var(--hx-black); color: #fff; }

/* ============================================================
   01. HERO — vídeo cobre viewport
   ============================================================ */
html.ds .case-page .hx-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  background: #000;
  overflow: hidden;
}
html.ds .case-page .hx-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
html.ds .case-page .hx-back {
  position: absolute;
  top: 32px; left: 40px;
  color: rgba(255,255,255,0.85) !important;
  font-size: var(--fs-body-sm) !important;
  letter-spacing: 0.05em;
  z-index: 5;
  background: rgba(0,0,0,0.3);
  padding: 10px 18px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
html.ds .case-page .hx-back:hover { color: #fff !important; }

/* ============================================================
   Pill / tag
   ============================================================ */
html.ds .case-page .hx-pill {
  display: inline-block;
  font-size: var(--fs-body-xs) !important;
  font-weight: var(--fw-regular) !important;
  padding: 9px 12px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  line-height: 1.3;
}
html.ds .case-page .hx-pill-dark {
  background: #fff;
  color: var(--hx-black) !important;
  border: 1px solid #000;
}
html.ds .case-page .hx-pill-light {
  background: transparent;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.3);
}

/* ============================================================
   02-04. INTRO — 3 cards: header (pergunta), conteúdo (texto+serviços), crédito
   ============================================================ */

/* Card 1: badge no topo, pergunta ancorada no rodapé (mesma estrutura do card "PU MC CF" da home) */
html.ds .case-page .hx-intro-header {
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 600px;
}

/* Mesmo padrão do título "Uma marca humana..." (.section-pilares-heading) da home */
html.ds .case-page .hx-question {
  font-family: var(--font-primary) !important;
  font-size: 64px !important;
  font-weight: var(--fw-light) !important;
  line-height: 1.15 !important;
  color: var(--hx-black) !important;
  margin: 0 !important;
  max-width: 1100px;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* Card 2: texto (card próprio) + 4 cards de serviço em 2 colunas */
html.ds .case-page .hx-intro-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  align-items: stretch;
}

/* Card de texto (lado esquerdo) — agora é um card próprio */
html.ds .case-page .hx-intro-text {
  padding: 48px 56px;
}
html.ds .case-page .hx-intro-text p {
  font-size: var(--fs-body-lg) !important;
  font-weight: var(--fw-light) !important;
  line-height: 1.55 !important;
  color: rgba(0,0,0,0.78) !important;
  margin-bottom: 22px !important;
  max-width: none;
}
html.ds .case-page .hx-intro-text p:last-child { margin-bottom: 0 !important; }

/* Coluna de serviços — agrupa 4 cards individuais */
html.ds .case-page .hx-services {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Cada tag de serviço é um card próprio, com hover sutil */
html.ds .case-page .hx-services li {
  font-size: var(--fs-body-lg) !important;
  font-weight: var(--fw-regular) !important;
  color: var(--hx-black) !important;
  padding: 30px 36px;
  display: flex;
  align-items: center;
  letter-spacing: 0.01em;
}

/* Card 3: crédito LOMIDIA — card branco fininho, conteúdo centrado */
html.ds .case-page .hx-credit {
  padding: 32px 32px;
  text-align: center;
  font-size: var(--fs-body-md) !important;
  color: rgba(0,0,0,0.7) !important;
  margin: 0;
  border: none;
  border-radius: var(--hx-radius);
  background: #fff;
}
html.ds .case-page .hx-credit .hx-lomidia-link {
  display: inline-block;
  margin-left: 14px;
  vertical-align: middle;
  line-height: 0;
  transition: opacity 0.2s ease;
}
html.ds .case-page .hx-credit .hx-lomidia-link:hover { opacity: 0.7; }
html.ds .case-page .hx-credit .hx-lomidia {
  display: block;
  height: 24px;
  width: auto;
}

/* ============================================================
   05. NAMING CARROSSEL — 5 slides com tipos diferentes de conteúdo
   ============================================================ */
html.ds .case-page .hx-naming {
  padding: 56px 72px;
  min-height: 880px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  outline: none;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}
html.ds .case-page .hx-naming.is-dragging .hx-naming-slide {
  transition: none !important;
}
html.ds .case-page .hx-naming-stage {
  flex: 1;
  position: relative;
  margin: 24px 0 0;
  width: 100%;
  min-height: 480px;
}
html.ds .case-page .hx-naming-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}
html.ds .case-page .hx-naming.is-dragging .hx-naming-slide {
  transition: none;
}
html.ds .case-page .hx-naming-quote {
  font-size: clamp(28px, 3vw, 44px) !important;
  font-weight: 400 !important;
  color: #fff !important;
  text-align: center;
  line-height: 1.25;
  max-width: 820px;
  margin: 0;
}
html.ds .case-page .hx-naming-label {
  font-size: clamp(15px, 1.05vw, 18px) !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.55) !important;
  margin: 0 0 24px;
  line-height: 1.3;
}
html.ds .case-page .hx-naming-headline {
  font-size: clamp(56px, 7vw, 104px) !important;
  font-weight: 400 !important;
  color: #fff !important;
  line-height: 1 !important;
  letter-spacing: -0.02em;
  margin: 0;
}
html.ds .case-page .hx-naming-body {
  font-size: clamp(16px, 1.15vw, 19px) !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.85) !important;
  line-height: 1.55;
  max-width: 640px;
  margin: 28px auto 0;
}
html.ds .case-page .hx-naming-symbol {
  display: block;
  margin: 32px auto 0;
  width: clamp(48px, 5vw, 72px);
  height: auto;
  opacity: 0.85;
}
html.ds .case-page .hx-naming-prev,
html.ds .case-page .hx-naming-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 12px;
  transition: opacity 0.25s ease;
  z-index: 2;
  opacity: 0.4;
  line-height: 0;
}
html.ds .case-page .hx-naming-prev { left: 24px; }
html.ds .case-page .hx-naming-next { right: 24px; }
html.ds .case-page .hx-naming-prev:hover,
html.ds .case-page .hx-naming-next:hover { opacity: 1; }
html.ds .case-page .hx-naming-arrow {
  width: 36px;
  height: auto;
  display: block;
}
html.ds .case-page .hx-naming-arrow--prev {
  transform: scaleX(-1);
}
/* Esconder seta nos extremos */
html.ds .case-page .hx-naming.is-first .hx-naming-prev,
html.ds .case-page .hx-naming.is-last .hx-naming-next {
  opacity: 0;
  pointer-events: none;
}
html.ds .case-page .hx-naming-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 32px;
  align-self: center;
}
html.ds .case-page .hx-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
html.ds .case-page .hx-dot:hover { background: rgba(255,255,255,0.5); }
html.ds .case-page .hx-dot.is-active {
  background: rgba(255,255,255,0.9);
  transform: scale(1.15);
}

/* ============================================================
   06, 08, 10, 15, 22. STATEMENTS (cards brancos com texto central)
   ============================================================ */
html.ds .case-page .hx-statement {
  padding: 56px 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 880px;
}
html.ds .case-page .hx-statement p {
  font-size: clamp(28px, 3vw, 44px) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: var(--hx-black) !important;
  text-align: center;
  max-width: 900px;
}

/* ============================================================
   07, 09, 11. CARDS DE VÍDEO (preto fullbleed)
   ============================================================ */
html.ds .case-page .hx-video-card {
  aspect-ratio: 16 / 9;
  background: var(--hx-black);
}
html.ds .case-page .hx-video-card video {
  width: 100%; height: 100%; object-fit: cover;
}

/* ============================================================
   12. MANROPE FAMILY GRID
   ============================================================ */
html.ds .case-page .hx-manrope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
html.ds .case-page .hx-manrope-left {
  aspect-ratio: 1 / 1;
}
html.ds .case-page .hx-manrope-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 56px;
  aspect-ratio: 1 / 1;
}
html.ds .case-page .hx-manrope-sample {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
html.ds .case-page .hx-manrope-glyphs {
  font-family: 'Manrope', 'Space Grotesk', sans-serif !important;
  font-size: clamp(20px, 2vw, 32px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  color: var(--hx-black) !important;
  margin: 0 !important;
}
html.ds .case-page .hx-manrope-aa {
  font-family: 'Manrope', 'Space Grotesk', sans-serif !important;
  font-size: clamp(120px, 16vw, 240px) !important;
  font-weight: 500 !important;
  line-height: 0.85 !important;
  color: var(--hx-black) !important;
  margin: 0 !important;
}
html.ds .case-page .hx-manrope-name {
  font-family: 'Manrope', 'Space Grotesk', sans-serif !important;
  font-size: clamp(32px, 3.5vw, 56px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--hx-black) !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 32px;
}

/* ============================================================
   13. PALETA / IMAGENS FULLBLEED EM CARDS
   ============================================================ */
html.ds .case-page .hx-image-card {
  background: #fff;
}
html.ds .case-page .hx-image-card img {
  width: 100%; height: auto; display: block;
}
html.ds .case-page .hx-image-bleed { padding: 0; }

/* ============================================================
   16. MOSAIC (grid 2x2 com alturas variadas)
   ============================================================ */
html.ds .case-page .hx-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}
html.ds .case-page .hx-mosaic figure { overflow: hidden; border-radius: var(--hx-radius); }
html.ds .case-page .hx-mosaic-tall {
  grid-row: span 2;
  background: var(--hx-yellow);
  aspect-ratio: 1 / 2;
}
html.ds .case-page .hx-mosaic-tall img { width: 100%; height: 100%; object-fit: cover; }
html.ds .case-page .hx-mosaic-icons {
  aspect-ratio: 16 / 10;
  padding: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
html.ds .case-page .hx-mosaic-icons img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  filter: invert(0);
}
html.ds .case-page .hx-mosaic-alvo {
  aspect-ratio: 16 / 10;
}
html.ds .case-page .hx-mosaic-alvo img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   17-32. PAIRS — 2 imagens lado a lado
   ============================================================ */
html.ds .case-page .hx-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
html.ds .case-page .hx-pair > figure {
  overflow: hidden;
  border-radius: var(--hx-radius);
  margin: 0;
}
html.ds .case-page .hx-pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mosaic 2x2 — gradient tall esquerda (span 2 rows) + icones top-right
   ocupando linha toda + 2 fotos lado a lado bottom-right */
html.ds .case-page .hx-mosaic-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  aspect-ratio: 2 / 1;
  width: 100%;
}
html.ds .case-page .hx-mosaic-2x2 > figure {
  overflow: hidden;
  border-radius: var(--hx-radius);
  margin: 0;
}
html.ds .case-page .hx-mosaic-2x2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Gradient tall — col 1-2, rows 1-2 */
html.ds .case-page .hx-mosaic-2x2-tall {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
/* Ícones — col 3-4, row 1 */
html.ds .case-page .hx-mosaic-2x2-icons {
  grid-column: 3 / span 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: #0e0e0e;
}
html.ds .case-page .hx-mosaic-2x2-icons img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
}
/* Foto 1 — col 3, row 2 */
html.ds .case-page .hx-mosaic-2x2-photo:nth-of-type(3) {
  grid-column: 3;
  grid-row: 2;
}
/* Foto 2 — col 4, row 2 */
html.ds .case-page .hx-mosaic-2x2-photo:nth-of-type(4) {
  grid-column: 4;
  grid-row: 2;
}
@media (max-width: 767px) {
  html.ds .case-page .hx-mosaic-2x2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 8px;
    aspect-ratio: auto;
    max-height: none;
  }
  html.ds .case-page .hx-mosaic-2x2-tall,
  html.ds .case-page .hx-mosaic-2x2-icons,
  html.ds .case-page .hx-mosaic-2x2-photo:nth-of-type(3),
  html.ds .case-page .hx-mosaic-2x2-photo:nth-of-type(4) {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
  html.ds .case-page .hx-mosaic-2x2-icons { padding: 40px; }
}

/* Pair Square — par 1:1 pra fotos quadradas */
html.ds .case-page .hx-pair--square > * {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--hx-radius);
}
html.ds .case-page .hx-pair--square img,
html.ds .case-page .hx-pair--square video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  html.ds .case-page .hx-pair--square > * { aspect-ratio: 1 / 1; }
}

/* Pair Tall — par vertical (aspect 4:5) pra acompanhar mídia vertical */
html.ds .case-page .hx-pair--tall {
  align-items: stretch;
}
html.ds .case-page .hx-pair--tall > * {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--hx-radius);
}
html.ds .case-page .hx-pair--tall img,
html.ds .case-page .hx-pair--tall video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  html.ds .case-page .hx-pair--tall > * { aspect-ratio: 3 / 4; }
}

/* Frame — imagem com margem grande mostrando o fundo do card (light branco) */
html.ds .case-page .hx-frame-light {
  background: #f5f5f5;
  padding: 280px 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
html.ds .case-page .hx-frame-light > img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.08);
}
@media (max-width: 767px) {
  html.ds .case-page .hx-frame-light { padding: 80px 64px; }
}

/* Frame — imagem com margem grande mostrando o fundo amarelo Hexon */
html.ds .case-page .hx-frame-yellow {
  background: var(--hx-yellow);
  padding: 200px 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
html.ds .case-page .hx-frame-yellow > img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.12);
}
@media (max-width: 767px) {
  html.ds .case-page .hx-frame-yellow { padding: 64px 48px; }
}

/* Trio — 3 cards lado a lado (papelaria, telas internas) */
html.ds .case-page .hx-trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
html.ds .case-page .hx-trio > figure { overflow: hidden; border-radius: var(--hx-radius); }
html.ds .case-page .hx-trio img { width: 100%; height: auto; display: block; }
@media (max-width: 767px) {
  html.ds .case-page .hx-trio { grid-template-columns: 1fr; gap: 8px; }
}

/* ============================================================
   33. X FINAL — quadrado preto com X amarelo
   ============================================================ */
html.ds .case-page .hx-x-frame {
  background: #ededed;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
}
html.ds .case-page .hx-x-final {
  aspect-ratio: 1 / 1;
  width: 280px;
  max-width: 280px;
  background: var(--hx-black);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
}
@media (max-width: 767px) {
  html.ds .case-page .hx-x-frame { min-height: 70vh; padding: 60px 16px; }
  html.ds .case-page .hx-x-final { width: 200px; }
}
html.ds .case-page .hx-x-final .hx-x-logo {
  width: 55%;
  aspect-ratio: 1 / 1;
  background-color: var(--hx-yellow);
  -webkit-mask: url('/images/cases/hexon/hexon-icon-white.png') center / contain no-repeat;
          mask: url('/images/cases/hexon/hexon-icon-white.png') center / contain no-repeat;
}

/* ============================================================
   34. OUTROS CASES
   ============================================================ */
html.ds .case-page .hx-section-cases {
  padding: 64px 16px 96px;
}
html.ds .case-page .hx-cases-title {
  font-size: clamp(28px, 3vw, 48px) !important;
  font-weight: 400 !important;
  text-align: center;
  margin: 0 0 40px !important;
  color: var(--hx-black) !important;
}
html.ds .case-page .hx-cases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
html.ds .case-page .hx-case-card {
  background: #fff;
  border-radius: var(--hx-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s;
}
html.ds .case-page .hx-case-card:hover { transform: translateY(-4px); }
html.ds .case-page .hx-case-thumb {
  aspect-ratio: 4 / 3;
  background: #ccc;
}
html.ds .case-page .hx-case-gestione .hx-case-thumb { background: #2d3530; }
html.ds .case-page .hx-case-jandira .hx-case-thumb { background: #fff; border: 1px solid #eee; }
html.ds .case-page .hx-case-soon .hx-case-thumb { background: var(--hx-black); }
html.ds .case-page .hx-case-cta {
  display: block;
  padding: 16px 22px;
  background: #ff5a1f;
  color: #fff !important;
  font-size: var(--fs-body-sm) !important;
  font-weight: var(--fw-regular) !important;
  text-align: left;
}

/* ============================================================
   35. FOOTER
   ============================================================ */
html.ds .case-page .hx-footer {
  padding: 48px 32px 32px;
  background: var(--hx-gray-bg);
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 48px;
}
html.ds .case-page .hx-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}
html.ds .case-page .hx-footer-links a {
  padding: 12px 24px;
  background: var(--hx-black);
  color: #fff !important;
  border-radius: 999px;
  font-size: var(--fs-body-sm) !important;
  font-weight: var(--fw-regular) !important;
}
html.ds .case-page .hx-footer-base {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-body-xs) !important;
  color: rgba(0,0,0,0.5) !important;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* ============================================================
   MOBILE — max-width 767px
   ============================================================ */
@media (max-width: 767px) {
  html.ds .case-page {
    --hx-radius: 20px;
    --hx-card-pad-y: 48px;
    --hx-card-pad-x: 24px;
  }

  html.ds .case-page .hx-section { padding: 4px 8px; }

  html.ds .case-page .hx-hero { min-height: 100vh; }
  html.ds .case-page .hx-back { top: 16px; left: 16px; font-size: 12px !important; }

  html.ds .case-page .hx-intro-header {
    padding: 28px 24px 48px;
  }
  html.ds .case-page .hx-question {
    font-size: 26px !important;
    margin: 32px 0 0 !important;
    line-height: 1.25 !important;
  }
  html.ds .case-page .hx-intro-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  html.ds .case-page .hx-intro-text { padding: 28px 24px; }
  html.ds .case-page .hx-intro-text p {
    font-size: 15px !important;
  }
  html.ds .case-page .hx-services { gap: 8px; }
  html.ds .case-page .hx-services li { padding: 20px 24px; font-size: 15px !important; }
  html.ds .case-page .hx-credit { padding: 20px 24px; font-size: 13px !important; }

  html.ds .case-page .hx-naming {
    padding: 32px 16px 24px;
    min-height: 420px;
  }
  html.ds .case-page .hx-naming-stage {
    margin: 16px 0 0;
    min-height: 280px;
  }
  html.ds .case-page .hx-naming-slide {
    padding: 0 16px;
  }
  html.ds .case-page .hx-naming-quote { font-size: 22px !important; line-height: 1.3; }
  html.ds .case-page .hx-naming-label { font-size: 13px !important; margin-bottom: 16px; }
  html.ds .case-page .hx-naming-headline { font-size: 36px !important; }
  html.ds .case-page .hx-naming-body { font-size: 14px !important; margin-top: 20px; }
  html.ds .case-page .hx-naming-prev,
  html.ds .case-page .hx-naming-next { display: none !important; }
  html.ds .case-page .hx-naming-symbol { width: 44px; margin-top: 24px; }
  html.ds .case-page .hx-naming-dots { margin-top: 24px; }

  html.ds .case-page .hx-statement {
    padding: 64px 24px;
    min-height: 200px;
  }
  html.ds .case-page .hx-statement p { font-size: 18px !important; }

  html.ds .case-page .hx-video-card { aspect-ratio: 16 / 10; }

  html.ds .case-page .hx-manrope-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  html.ds .case-page .hx-manrope-left,
  html.ds .case-page .hx-manrope-right {
    aspect-ratio: 4 / 3;
  }
  html.ds .case-page .hx-manrope-right { padding: 24px 28px; }
  html.ds .case-page .hx-manrope-aa { font-size: 100px !important; }
  html.ds .case-page .hx-manrope-name { font-size: 28px !important; margin-top: 16px; }

  html.ds .case-page .hx-mosaic { grid-template-columns: 1fr; gap: 8px; }
  html.ds .case-page .hx-mosaic-tall { aspect-ratio: 4 / 3; grid-row: auto; }
  html.ds .case-page .hx-mosaic-icons { padding: 32px; aspect-ratio: 4 / 3; }
  html.ds .case-page .hx-mosaic-alvo { aspect-ratio: 4 / 3; }

  html.ds .case-page .hx-pair {
    grid-template-columns: 1fr;
    gap: 8px;
  }


  html.ds .case-page .hx-section-cases { padding: 48px 8px 64px; }
  html.ds .case-page .hx-cases-title { font-size: 24px !important; margin-bottom: 24px !important; }
  html.ds .case-page .hx-cases-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  html.ds .case-page .hx-footer { padding: 32px 16px 24px; margin-top: 32px; }
  html.ds .case-page .hx-footer-base {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }
}