*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary:  #011a3f;
  --secondary:#22aa83;
  --purple:   #B3ABD2;
  --pink:     #BE698A;
  --blue:     #0f9ed5;
  --orange:   #FEA220;
  --white:    #ffffff;
  --text:     rgba(255,255,255,0.95);
  --muted:    rgba(255,255,255,0.50);
  --border:   rgba(255,255,255,0.1);
}

html {
  font-size: clamp(14px, 2vw, 18px);
  scroll-behavior: auto;
}

body {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  background: var(--primary);
  color: var(--text);
  overflow-x: hidden;
  overflow-x: clip;
}

h1 {
  font-weight: 700;
  font-size: clamp(2.8rem, 4vw, 5rem);
  line-height: 1;
  color: var(--white);
  margin-bottom: 2.25rem;
  text-transform: uppercase;
}

h2 {
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 2.25rem;
  text-transform: uppercase;
}

h3 {
  font-weight: 600;
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 2.25rem;
  text-transform: uppercase;
}

.content {
  margin: 0 auto;
  max-width: 1600px;
}

#progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--secondary);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 1000;
}

nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 202;
  padding: 20px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.4s, backdrop-filter 0.4s;
}

nav.scrolled {
  background: rgba(1,26,63,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}

.nav-links a {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--white);
  text-decoration: none;
  transition: color 0.2s;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav-links a:hover { color: var(--secondary); }

.hero-philosophy-block {
  position: relative;
  height: 100vh;
  height: 100svh;
}

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: sticky;
  top: 0;
  z-index: 10;
  overflow: hidden;
  background: linear-gradient(45deg, #011a3f 33%, #036148 100%);
}

.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 56px 80px 64px;
  position: relative;
  z-index: 1;
}

.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(44px);
}

.accent-word { color: var(--secondary); }

.hero-sub {
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  font-weight: 300;
  line-height: 1.8;
  color: var(--text);
  max-width: 850px;
  margin-bottom: 52px;
  opacity: 0;
  transform: translateY(20px);
}

.hero-ctas {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
}

.btn-primary {
  display: inline-block;
  background: var(--secondary);
  color: var(--primary);
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0.04em;
  padding: 16px 36px;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  border: 2px solid transparent;
  margin-right: 20px;
}
.btn-primary:hover {
  background: #ffffff;
  border: 2px solid var(--secondary);
  color: var(--secondary);
  transform: translateY(-3px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 2px solid rgba(255,255,255,0.1);
  padding-bottom: 3px;
  transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { border-color: var(--secondary); color: var(--secondary); }

.btn-ghost-arrow {
  width: 18px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.25s ease;
}
.btn-ghost-arrow::after {
  content: '';
  position: absolute;
  right: 0; top: -3px;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.btn-ghost:hover .btn-ghost-arrow { width: 26px; }

.hero-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(34,170,131,0.28) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0;
  animation: fadeUp 1.2s ease 1s forwards;
}

.scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  animation: fadeUp 0.8s ease 2.2s forwards;
}
.scroll-hint span {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.scroll-line {
  width: 48px;
  height: 1px;
  background: var(--secondary);
  transform-origin: left;
  animation: scaleX 0.8s ease 2.5s both;
}
@keyframes scaleX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fadeUp { to { opacity: 1; } }

.reveal {
  opacity: 0;
  transform: translateY(52px);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

.section-philosophy {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-top: -100vh;
  margin-top: -100svh;
  min-height: 100vh;
  min-height: 100svh;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.philosophy-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  width: 100%;
  padding: 0 64px;
  text-align: center;
}

.philosophy-quote {
  font-size: clamp(1.625rem, 3.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--primary);
  margin-bottom: 40px;
  position: relative;
  text-transform: uppercase;
}

.philosophy-quote::before {
  content: '\201C';
  display: block;
  font-size: clamp(3.75rem, 8vw, 6.25rem);
  font-weight: 800;
  color: var(--primary);
  opacity: 0.15;
  line-height: 1;
  font-family: Georgia, serif;
  margin-bottom: -0.15em;
}

.philosophy-body {
  font-weight: 400;
  line-height: 1.9;
  color: var(--primary);
  max-width: 1200px;
  margin: 0 auto;
}

.section-pillars {
  padding: 80px 64px;
  position: relative;
  background: var(--primary);
  z-index: 12;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 64px;
}

.pillar-inner {
  background: rgba(255,255,255,0.2);
  border: 1px solid var(--border);
  border-top: none;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background 0.3s;
  cursor: default;
  transform-origin: bottom center;
}
.pillar:hover .pillar-inner {
  background: rgba(255,255,255,0.06);
}

.pillar-cap {
  height: 5px;
  width: 100%;
}
.pillar:nth-child(1) .pillar-cap { background: var(--secondary); }
.pillar:nth-child(2) .pillar-cap { background: var(--blue); }
.pillar:nth-child(3) .pillar-cap { background: var(--purple); }

.pillar-content {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pillar-number {
  font-size: clamp(3rem, 4vw, 5rem);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.pillar h3 {
  margin-bottom: 32px;
}

.pillar p {
  margin-top: auto;
  line-height: 1.6;
  padding-top: 32px;
  border-top: 2px solid var(--border);
}

#featured-work {
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  z-index: 13;
}

.case-studies-sticky {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.case-studies-head {
  padding: 0 64px;
  margin-bottom: 52px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
/* The global h2 carries a 2.25rem bottom margin that does nothing useful here
   (it sits in a flex row) and just inflates the stage height. */
.case-studies-head h2 {
  margin-bottom: 0;
}

.cards-scroll-hint {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cards-scroll-hint::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--muted);
}

.cards-track-wrapper {
  padding-left: 64px;
  overflow: visible;
}

.cards-track {
  display: flex;
  gap: 20px;
  will-change: transform;
}

.case-card {
  flex: 0 0 400px;
  /* No fixed height: the card grows to fit its text. min-height sets a visual
     floor and align-items:stretch on .cards-track keeps every card equal to
     the tallest, so nothing in .case-card-foot is ever clipped. */
  height: auto;
  min-height: 480px;
  background: rgba(255,255,255,0.15);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: border-color 0.35s, transform 0.35s cubic-bezier(0.34,1.2,0.64,1);
}
.case-card:hover {
  border-color: rgba(34,170,131,0.35);
  transform: translateY(-10px);
}

.case-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  transition: height 0.3s;
}
.case-card:nth-child(1)::before { background: var(--secondary); }
.case-card:nth-child(2)::before { background: var(--blue); }
.case-card:nth-child(3)::before { background: var(--purple); }
.case-card:nth-child(4)::before { background: var(--pink); }
.case-card:nth-child(5)::before { background: var(--orange); }
.case-card:nth-child(6)::before { background: #ffffff; }

.case-card:hover::before { height: 3px; }

.case-card-index {
  position: absolute;
  top: 28px; left: 28px;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.case-card-tag {
  position: absolute;
  top: 28px; right: 28px;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.case-card:nth-child(1) .case-card-tag { color: var(--secondary); }
.case-card:nth-child(2) .case-card-tag { color: var(--blue); }
.case-card:nth-child(3) .case-card-tag { color: var(--purple); }
.case-card:nth-child(4) .case-card-tag { color: var(--pink); }
.case-card:nth-child(5) .case-card-tag { color: var(--orange); }
.case-card:nth-child(6) .case-card-tag { color: #ffffff; }

.case-card-ghost {
  position: absolute;
  top: 35%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 5rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: rgba(255,255,255,0.04);
  white-space: nowrap;
  pointer-events: none;
  text-transform: uppercase;
}

.case-card-anim {
  /* Grows to fill leftover space (pushing the text to the bottom) and can
     shrink when a long heading/paragraph needs the room. It no longer takes
     a fixed slice that starved the text block. */
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 200px;
}

.case-card-anim dotlottie-wc {
  position: absolute;
  inset: 35px 0 0 0;
  width: 100%;
  height: 100%;
  display: block;
}

.case-card-foot {
  /* Sized to its own content (was flex:auto, which only got leftover space and
     clipped long text). Now the heading + paragraph always render in full. */
  flex: 0 0 auto;
  padding: 32px;
  background: linear-gradient(to top, rgba(1,26,63,0.97) 60%, transparent);
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Tighter heading spacing inside cards: the global h3 margin-bottom (2.25rem)
   is oversized for a constrained card and inflated the height it needed. */
.case-card-foot h3 {
  margin-bottom: 1.25rem;
}

/* Pin each card's "Learn more" link to the bottom, with breathing room above */
.case-card-foot .btn-ghost {
  margin-top: auto;
  align-self: flex-start;
  padding-top: 20px;
}

.case-card-cat {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.case-card p {
  margin-top: -10px;
  line-height: 1.6;
}

.section-cta {
  min-height: 90vh;
  min-height: 90svh;
  padding: 80px 64px;
  text-align: center;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 20;
  overflow: hidden;
}

.section-cta h2 {
  color: var(--primary);
}

.section-cta h2 em {
  font-style: normal;
  color: var(--secondary);
}

.cta-wrap {
  position: relative;
  z-index: 1;
}

.cta-wave-bg .st0 { stroke: #c0c9d5; fill: none; stroke-miterlimit: 10; stroke-width: 2px; }
.cta-wave-bg .st1 { stroke: #a0d4c2; fill: none; stroke-miterlimit: 10; stroke-width: 2px; }
.cta-wave-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.cta-wave-bg svg {
  width: 100%;
  height: 100%;
  opacity: 0.35;
}

@keyframes waveA {
  0%   { transform: translateY(0px)    translateZ(0); }
  50%  { transform: translateY(-18px)  translateZ(0); }
  100% { transform: translateY(0px)    translateZ(0); }
}
@keyframes waveB {
  0%   { transform: translateY(0px)    translateZ(0); }
  50%  { transform: translateY(14px)   translateZ(0); }
  100% { transform: translateY(0px)    translateZ(0); }
}
@keyframes waveC {
  0%   { transform: translateY(-8px)   translateZ(0); }
  50%  { transform: translateY(10px)   translateZ(0); }
  100% { transform: translateY(-8px)   translateZ(0); }
}

.cta-wave-bg .wave-gray-a {
  animation: waveA 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
}
.cta-wave-bg .wave-gray-b {
  animation: waveB 6.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: -3.5s;
  will-change: transform;
}
.cta-wave-bg .wave-gray-c {
  animation: waveC 4.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: -6s;
  will-change: transform;
}

.cta-wave-bg .wave-teal-a {
  animation: waveB 7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: -1.5s;
  will-change: transform;
}
.cta-wave-bg .wave-teal-b {
  animation: waveA 5.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: -4s;
  will-change: transform;
}
.cta-wave-bg .wave-teal-c {
  animation: waveC 7.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: -7s;
  will-change: transform;
}

footer {
  padding: 32px 64px;
  background: #ffffff;
  border-top: 2px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

footer span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
}

#back-to-top {
  position: fixed;
  bottom: 36px;
  right: 36px;
  z-index: 200;
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--primary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease,
              border-color 0.25s, background 0.25s;
  pointer-events: none;
}
#back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#back-to-top:hover {
  border-color: var(--secondary);
  background: rgba(1,26,63,0.97);
  transform: translateY(-5px);
}
#back-to-top svg {
  width: 38px;
  height: 38px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .dot-grid { opacity: 0.4; }
  .hero-word, .hero-sub, .hero-ctas { opacity: 1; transform: none; }
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  position: relative;
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
  transform-origin: center;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(1, 26, 63, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.nav-drawer.open { opacity: 1; pointer-events: auto; }
.nav-drawer a {
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--white);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-drawer a:hover,
.nav-drawer a:focus { color: var(--secondary); outline: none; }

@media (max-width: 599px) {
  nav { padding: 16px 24px; }
}
@media (max-width: 767px) {
  footer {
    padding: 24px;
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

@media (max-width: 599px) {
  h1 { font-size: clamp(1.625rem, 9vw, 2.625rem); margin-bottom: 1.5rem; }
  h2 { font-size: clamp(1.75rem, 7vw, 2.5rem); margin-bottom: 1.5rem; }
  h3 { font-size: clamp(1.125rem, 5vw, 1.5rem); margin-bottom: 1.25rem; }
  .btn-primary,
  .btn-ghost {
    padding: 14px 24px;
    min-height: 48px;
  }
  .btn-primary {
    margin-right: 0;
    text-align: center;
    display: block;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  .nav-burger { display: flex; }
  .nav-drawer { display: flex; }
  .nav-links { display: none !important; }

  .hero-philosophy-block { height: auto; }
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
  }
  .hero-right { display: none; }
  .hero-left {
    padding: 100px 24px;
    max-width: 95%;
    justify-content: flex-end;
  }
  .scroll-hint { left: 24px; bottom: 24px; }

  .section-philosophy {
    position: relative;
    top: auto;
    margin-top: 0;
    z-index: auto;
    min-height: auto;
  }
  .philosophy-inner { padding: 64px 24px; }

  .section-pillars { padding: 80px 32px; min-height: unset; }
  .pillars-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
  .pillar-inner { min-height: unset; }

  #featured-work { min-height: unset; }
  .case-studies-sticky { height: auto; overflow: visible; }
  .case-studies-head {
    padding: 48px 24px 32px;
    margin-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .cards-scroll-hint { font-size: 0.625rem; }
  .cards-track-wrapper {
    padding: 0 24px 48px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .cards-track-wrapper::-webkit-scrollbar { display: none; }
  .cards-track { will-change: auto; gap: 16px; padding-right: 24px; }
  .case-card {
    flex: 0 0 min(320px, 80vw);
    height: auto;
    min-height: 400px;
    max-height: none;
    scroll-snap-align: start;
  }
  .case-card:hover { transform: none; }
  .case-card:hover::before { height: 5px; }
  .case-card-anim { min-height: 180px; }

  .section-cta { padding: 80px 24px; min-height: 60vh; min-height: 60svh; }
  .cta-wave-bg svg { will-change: auto; }
  .wave-gray-b, .wave-teal-b, .wave-teal-c { display: none; }
}

@media (min-width: 600px) and (max-width: 1024px) {
  nav { padding: 16px 32px; }
  .nav-links { gap: 24px; }
  .scroll-hint { left: 40px; }
  .philosophy-inner { padding: 80px 40px; }
  .case-studies-head { padding: 64px 40px 32px; flex-direction: row; align-items: flex-end; }
  .cards-track-wrapper { padding: 0 40px 64px; }
  .cards-track { padding-right: 40px; }
  .case-card { flex: 0 0 340px; min-height: 420px; }
  .section-cta { padding: 80px 40px; }
  footer { padding: 24px 40px; }
}

html.mac-static .hero-philosophy-block { height: auto; }
html.mac-static .hero {
  position: relative;
  top: auto;
}
html.mac-static .section-philosophy {
  position: relative;
  top: auto;
  margin-top: 0;
  z-index: auto;
}

@media (min-width: 1025px) {
  html.mac-static .section-philosophy { min-height: 60vh; }
  html.mac-static .section-pillars {
    min-height: 60vh;
    padding-top: 56px;
    padding-bottom: 56px;
  }
  html.mac-static .pillar-inner { min-height: 38vh; }
}

/* ===========================================================================
   Short desktop viewports: the section is pinned at height:100vh with content
   vertically centered and overflow:hidden, so when the window is short the
   tallest card + header can exceed 100vh and the bottom (the text) gets
   clipped. These tiers reclaim header space and let the animation area shrink
   so the text block in .case-card-foot is always fully visible.
   Scoped to min-width:1025px because the pinned/clipped layout is desktop-only
   (tablet/mobile use native horizontal scroll with height:auto).
   =========================================================================== */
@media (min-width: 1025px) and (max-height: 860px) {
  .case-studies-head { margin-bottom: 28px; }
  .case-card { min-height: 0; }
  .case-card-anim { min-height: 140px; }
}

@media (min-width: 1025px) and (max-height: 740px) {
  .case-studies-head { margin-bottom: 18px; }
  .case-card-anim { min-height: 96px; }
  .case-card-foot { padding: 24px 28px; }
  .case-card-foot h3 { margin-bottom: 0.85rem; }
}

@media (min-width: 1025px) and (max-height: 640px) {
  .case-studies-head { margin-bottom: 12px; }
  .case-card-anim { min-height: 56px; }
  .case-card-foot { padding: 20px 24px; }
}