.cases-page {
  background: var(--white);
}

.cases-shell {
  width: min(1192px, calc(100% - 48px));
  margin-inline: auto;
}

.cases-page .nav-parent.is-active,
.cases-page .nav-submenu a.is-active {
  color: var(--green-strong);
}

.cases-hero {
  position: relative;
  min-height: min(300px, 18.75vw);
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
}

.cases-hero__bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 31, 54, 0.9) 0%, rgba(7, 31, 54, 0.77) 46%, rgba(7, 31, 54, 0.86) 100%),
    url("assets/hero/cases-hero-20260622b.jpg");
  background-position: center, center, center, 48% 72%;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  background-size: min(106px, 6.625vw) min(96px, 6vw), min(106px, 6.625vw) min(96px, 6vw), auto, max(4358px, 270vw) auto;
}

.cases-hero__inner {
  position: relative;
  z-index: 1;
  min-height: min(300px, 18.75vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: min(34px, 2.125vw);
}

.cases-hero .eyebrow {
  color: var(--green);
  text-transform: none;
}

.cases-hero h1 {
  max-width: min(700px, 43.75vw);
  margin: min(24px, 1.5vw) 0 min(9px, 0.5625vw);
  color: var(--green);
  font-family: "Montserrat", "Inter", sans-serif;
  font-size: clamp(36px, 2.55vw, 48px);
  font-weight: 800;
  line-height: 1.06;
}

.cases-hero__copy {
  max-width: min(720px, 45vw);
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(14px, 0.9375vw, 18px);
  line-height: 1.4;
}

.cases-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: min(26px, 1.625vw);
  margin-top: min(28px, 1.75vw);
}

.cases-hero__stat {
  min-height: min(42px, 2.625vw);
  display: flex;
  align-items: center;
  gap: min(12px, 0.75vw);
  color: var(--white);
  font-size: clamp(12px, 0.875vw, 16px);
  font-weight: 700;
  line-height: 1.2;
}

.cases-hero__stat span:first-child {
  width: min(34px, 2.125vw);
  height: min(34px, 2.125vw);
  min-width: 30px;
  min-height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(4px);
}

.cases-hero__stat svg {
  width: min(18px, 1.125vw);
  height: min(18px, 1.125vw);
  min-width: 16px;
  min-height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cases-gallery {
  padding: min(68px, 4.25vw) 0 min(42px, 2.625vw);
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: min(16px, 1vw);
}

.case-card {
  position: relative;
  min-height: 218px;
  aspect-ratio: 1.47;
  overflow: hidden;
  border-radius: var(--radius);
  background: #0b273b;
  color: var(--white);
  isolation: isolate;
}

.case-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease;
}

.case-card::after {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 52%;
  content: "";
  background: linear-gradient(180deg, rgba(3, 12, 22, 0), rgba(3, 12, 22, 0.84));
  pointer-events: none;
}

.case-card:hover img {
  transform: scale(1.035);
}

.case-card__content {
  position: absolute;
  z-index: 2;
  left: min(18px, 1.125vw);
  right: min(18px, 1.125vw);
  bottom: min(16px, 1vw);
}

.case-card h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 700;
  line-height: 1.2;
}

.case-card__year::before {
  content: " \2022  ";
}

.case-card p {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: min(6px, 0.375vw) 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(11px, 0.75vw, 14px);
  line-height: 1.25;
}

.case-card p svg {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cases-cta {
  padding: min(28px, 1.75vw) 0 min(72px, 4.5vw);
}

.cases-cta__panel {
  min-height: min(228px, 14.25vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: min(40px, 2.5vw) min(54px, 3.375vw);
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(6, 25, 45, 0.93), rgba(6, 25, 45, 0.93)),
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    #061f33;
  background-size: auto, min(110px, 6.875vw) min(86px, 5.375vw), min(110px, 6.875vw) min(86px, 5.375vw), auto;
  color: var(--white);
  text-align: center;
}

.cases-cta h2 {
  max-width: min(690px, 43.125vw);
  margin: 0;
  color: var(--white);
  font-size: clamp(32px, 2.55vw, 48px);
  font-weight: 800;
  line-height: 1.06;
}

.cases-cta p {
  max-width: min(680px, 42.5vw);
  margin: min(12px, 0.75vw) 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: clamp(13px, 0.875vw, 16px);
  line-height: 1.45;
}

.cases-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: min(14px, 0.875vw);
  margin-top: min(28px, 1.75vw);
}

.cases-cta__actions .button,
.cases-cta__actions .whatsapp-pill {
  height: min(42px, 2.625vw);
  min-height: 40px;
  padding-inline: min(20px, 1.25vw);
  font-size: clamp(12px, 0.8125vw, 15px);
}

@media (min-width: 1920px) {
  .cases-shell {
    width: min(75vw, 1920px);
  }

  .cases-gallery {
    padding-top: min(4.25vw, 88px);
  }

  .cases-cta__panel {
    min-height: min(14.25vw, 300px);
    padding: min(2.5vw, 56px) min(3.375vw, 72px);
  }
}

@media (min-width: 768px) {
  .cases-hero__bg {
    background-image: url("assets/hero/cases-hero-clean-20260622b.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}

@media (max-width: 1279.98px) {
  .cases-hero,
  .cases-hero__inner {
    min-height: 290px;
  }

  .cases-hero h1,
  .cases-hero__copy {
    max-width: 680px;
  }

  .case-grid {
    gap: 14px;
  }
}

@media (max-width: 991.98px) {
  .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cases-cta h2,
  .cases-cta p {
    max-width: 620px;
  }
}

@media (max-width: 767.98px) {
  .cases-shell {
    width: min(100% - 40px, 560px);
  }

  .cases-hero,
  .cases-hero__inner {
    min-height: 330px;
  }

  .cases-hero__inner {
    padding-block: 30px;
  }

  .cases-hero h1 {
    max-width: 340px;
    margin-top: 18px;
    font-size: 36px;
  }

  .cases-hero__copy {
    max-width: 340px;
    font-size: 13px;
  }

  .cases-hero__stats {
    gap: 10px 14px;
    margin-top: 22px;
  }

  .cases-hero__stat {
    min-height: 36px;
    gap: 8px;
    font-size: 11px;
  }

  .cases-hero__stat span:first-child {
    width: 30px;
    height: 30px;
  }

  .cases-gallery {
    padding: 48px 0 22px;
  }

  .case-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .case-card {
    min-height: 224px;
    aspect-ratio: 1.45;
  }

  .case-card__content {
    left: 16px;
    right: 16px;
    bottom: 15px;
  }

  .case-card h2 {
    font-size: 15px;
  }

  .cases-cta {
    padding: 22px 0 48px;
  }

  .cases-cta__panel {
    min-height: 254px;
    padding: 28px 20px;
  }

  .cases-cta h2 {
    max-width: 330px;
    font-size: 28px;
  }

  .cases-cta p {
    max-width: 310px;
    font-size: 12px;
  }

  .cases-cta__actions {
    gap: 10px;
    margin-top: 22px;
  }

  .cases-cta__actions .button,
  .cases-cta__actions .whatsapp-pill {
    min-width: 150px;
  }
}

@media (max-width: 389.98px) {
  .cases-hero h1 {
    font-size: 32px;
  }

  .case-card {
    min-height: 210px;
  }
}