.cs-item{display:grid;grid-template-columns:1fr 1fr}.cs-item__media{grid-area:1/1}.cs-item__body{grid-area:1/2;padding-left:32px}.cs-item--flip .cs-item__media{grid-area:1/2}.cs-item--flip .cs-item__body{grid-area:1/1;padding:0 32px 0 0}.cs-item__media{align-self:start;aspect-ratio:var(--cs-ratio,16/9);background:#ddd6cb;border-radius:8px;overflow:hidden}.cs-item__img{display:block;height:100%;object-fit:cover;width:100%}.cs-item__body{justify-content:space-between}.cs-item__body,.cs-item__head{display:flex;flex-direction:column}.cs-item__head{align-items:flex-start;gap:16px}.cs-item__title{font-family:DM Sans,system-ui,-apple-system,Segoe UI,sans-serif;font-size:51px;font-weight:500;letter-spacing:-.02em;line-height:56px}@media (width<=991.98px){.cs-item__title{font-size:39px;font-weight:600;letter-spacing:-.01em;line-height:44px}}.cs-item__title{color:#2c221a;margin:0}.cs-item__stats{align-items:flex-end;display:flex;gap:24px;justify-content:space-between;margin-top:32px}.cs-item__cta{display:flex;flex:50%;justify-content:flex-end}@media (width<=991.98px){.cs-list{gap:96px;margin-top:48px}.cs-item{grid-template-columns:1fr}.cs-item--flip .cs-item__media,.cs-item__media{grid-area:1/1}.cs-item--flip .cs-item__body,.cs-item__body{grid-area:2/1;margin-top:24px;padding:0}.cs-item__stats{align-items:flex-start;flex-direction:column;margin-top:24px}.cs-item__cta,.cs-stat{flex:none}.cs-item__cta{justify-content:flex-start}.sec-head .h2,.sec-head h2{margin-top:20px}.cs-cta{margin-bottom:32px;margin-top:48px}}


/* ==========================================================================
   Next Article Card Component (.next-case)
   ========================================================================== */
.next-case {
  background: #ede8e0;
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  max-width: 800px;
  margin: 48px auto 0;
  padding: 32px 36px;
  display: flex;
  box-sizing: border-box;
}
.next-case__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
}
.next-case__kicker {
  font-family: DM Sans, system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  color: #2c221a;
  margin: 0;
}
.next-case__title {
  font-family: DM Sans, system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.01em;
  color: #2c221a;
  margin: 0;
}
.next-case__btn {
  align-self: flex-start;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  margin-top: 6px;
  background-color: #f9cc00;
  color: #17100a;
  border: 1.5px solid #f9cc00;
  text-decoration: none;
}
.next-case__btn:hover {
  background-color: #e5bb00;
  border-color: #e5bb00;
  color: #17100a;
}
.next-case__img,
picture.next-case__img {
  flex: none;
  width: 220px;
  height: 175px;
  border-radius: 10px;
  overflow: hidden;
  display: block;
}
.next-case__img img,
picture.next-case__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

@media (max-width: 767.98px) {
  .next-case {
    flex-direction: column-reverse;
    align-items: stretch;
    padding: 24px 20px;
    gap: 20px;
  }
  .next-case__img,
  picture.next-case__img {
    width: 100%;
    height: 200px;
  }
}


/* ==========================================================================
   2K & 4K Proportional Scaling (Maintains 1080p visual proportions on 2K/4K)
   ========================================================================== */

/* --- 2K / QHD Displays (2560px - 3399px) --- */
@media (min-width: 2560px) {
  :root {
    --nav-h: 84px;
  }
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1720px;
  }
  .site-nav {
    padding: 12px 48px;
  }
  .site-nav .nav-link {
    font-size: 19px;
  }
  .site-nav .btn {
    font-size: 18px;
    padding: 13px 28px;
    border-radius: 12px;
  }
  .site-nav .logo__mark {
    transform: scale(1.25);
    transform-origin: left center;
  }
  .hero__content {
    padding-left: max(48px, calc(50% - 860px));
    padding-right: max(48px, calc(50% - 860px));
    padding-bottom: 100px;
  }
  .hero__title {
    font-size: 92px;
    line-height: 100px;
  }
  .hero__lead {
    font-size: 32px;
    line-height: 42px;
  }
  .hero__tags {
    font-size: 19px;
    gap: 16px;
  }
  .hero .cta-row .btn {
    font-size: 18px;
    padding: 14px 28px;
    border-radius: 12px;
  }
  .hero__card {
    right: max(48px, calc(50% - 860px));
    bottom: 100px;
    width: 540px;
    padding: 8px 24px 8px 8px;
    border-radius: 24px;
  }
  .hero__card-media {
    width: 250px;
    height: 250px;
    border-radius: 18px;
  }
  .hero__card-stat-value {
    font-size: 38px;
    line-height: 46px;
  }
  .hero__card-stat-label {
    font-size: 16.5px;
    line-height: 22px;
    max-width: 210px;
  }
  .hero__card-cta {
    font-size: 17px;
    line-height: 22px;
    margin-top: 36px;
  }
  .hero__card-dots {
    left: 282px;
    bottom: 24px;
    gap: 10px;
  }
  .hero__card-dot-track {
    width: 8px;
    height: 8px;
  }
  .hero__card-dot.is-active .hero__card-dot-track {
    width: 38px;
  }
  
  /* Sections Scaling */
  .section {
    padding: 120px 0;
  }
  .sec-head h2, h2.word-reveal {
    font-size: 64px;
    line-height: 72px;
  }
  .sec-head__lead--large {
    font-size: 22px;
    line-height: 32px;
  }
  .cs-item__title {
    font-size: 58px;
    line-height: 66px;
  }
  .cs-stat__value {
    font-size: 30px;
    line-height: 38px;
  }
  .cs-stat__label {
    font-size: 18px;
    line-height: 26px;
  }
  .dna-card__title {
    font-size: 24px;
    line-height: 32px;
  }
  .dna-card__body {
    font-size: 17px;
    line-height: 26px;
  }
  .blog-card__title {
    font-size: 22px;
    line-height: 30px;
  }
  .blog-card__excerpt {
    font-size: 17px;
    line-height: 26px;
  }
  .next-case {
    max-width: 1000px;
    padding: 40px 48px;
    border-radius: 20px;
  }
  .next-case__title {
    font-size: 32px;
    line-height: 40px;
  }
  .next-case__img, picture.next-case__img {
    width: 275px;
    height: 220px;
  }
}

/* --- 4K / UHD Displays (3400px+) --- */
@media (min-width: 3400px) {
  :root {
    --nav-h: 110px;
  }
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 2360px;
  }
  .site-nav {
    padding: 16px 64px;
  }
  .site-nav .nav-link {
    font-size: 25px;
  }
  .site-nav .btn {
    font-size: 24px;
    padding: 18px 38px;
    border-radius: 16px;
  }
  .site-nav .logo__mark {
    transform: scale(1.65);
    transform-origin: left center;
  }
  .hero__content {
    padding-left: max(64px, calc(50% - 1180px));
    padding-right: max(64px, calc(50% - 1180px));
    padding-bottom: 140px;
  }
  .hero__title {
    font-size: 124px;
    line-height: 134px;
  }
  .hero__lead {
    font-size: 42px;
    line-height: 56px;
    margin-top: 36px;
  }
  .hero__tags {
    font-size: 26px;
    gap: 22px;
    margin-top: 36px;
  }
  .hero .cta-row {
    margin-top: 48px;
    gap: 24px;
  }
  .hero .cta-row .btn {
    font-size: 24px;
    padding: 20px 38px;
    border-radius: 16px;
  }
  .hero__card {
    right: max(64px, calc(50% - 1180px));
    bottom: 140px;
    width: 720px;
    padding: 12px 32px 12px 12px;
    border-radius: 30px;
  }
  .hero__card-media {
    width: 330px;
    height: 330px;
    border-radius: 24px;
  }
  .hero__card-stat-value {
    font-size: 50px;
    line-height: 60px;
  }
  .hero__card-stat-label {
    font-size: 22px;
    line-height: 30px;
    max-width: 280px;
  }
  .hero__card-cta {
    font-size: 22px;
    line-height: 30px;
    margin-top: 48px;
  }
  .hero__card-dots {
    left: 374px;
    bottom: 32px;
    gap: 14px;
  }
  .hero__card-dot-track {
    width: 11px;
    height: 11px;
  }
  .hero__card-dot.is-active .hero__card-dot-track {
    width: 50px;
  }
  
  /* Sections Scaling */
  .section {
    padding: 160px 0;
  }
  .sec-head h2, h2.word-reveal {
    font-size: 86px;
    line-height: 96px;
  }
  .sec-head__lead--large {
    font-size: 30px;
    line-height: 44px;
  }
  .cs-item__title {
    font-size: 78px;
    line-height: 88px;
  }
  .cs-stat__value {
    font-size: 40px;
    line-height: 50px;
  }
  .cs-stat__label {
    font-size: 24px;
    line-height: 34px;
  }
  .dna-bento {
    gap: 32px;
  }
  .dna-card {
    padding: 36px 30px;
    border-radius: 24px;
    min-height: 380px;
  }
  .dna-card__icon {
    width: 64px;
    height: 64px;
  }
  .dna-card__title {
    font-size: 32px;
    line-height: 42px;
  }
  .dna-card__body {
    font-size: 22px;
    line-height: 34px;
  }
  .blog-card__title {
    font-size: 28px;
    line-height: 38px;
  }
  .blog-card__excerpt {
    font-size: 22px;
    line-height: 34px;
  }
  .next-case {
    max-width: 1350px;
    padding: 56px 64px;
    border-radius: 28px;
  }
  .next-case__title {
    font-size: 44px;
    line-height: 54px;
  }
  .next-case__kicker {
    font-size: 20px;
    line-height: 26px;
  }
  .next-case__btn {
    font-size: 22px;
    padding: 18px 36px;
    border-radius: 14px;
  }
  .next-case__img, picture.next-case__img {
    width: 370px;
    height: 295px;
  }
}