.proof-band {
  background: linear-gradient(180deg, #fff 0%, var(--soft) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 36px 0;
}
.proof-band-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
}
.proof-title {
  font-size: 16px;
  font-weight: 700;
  max-width: 320px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}
.proof-items {
  display: flex;
  gap: 16px;
  align-items: center;
}
.proof-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  padding: 12px 24px;
  border-radius: 100px;
  border: 1px solid var(--line);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.proof-item:hover {
  transform: translateY(-3px);
  border-color: var(--indigo);
  box-shadow: 0 12px 28px rgba(79, 70, 229, 0.06);
}
.proof-item strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--indigo);
  line-height: 1;
}
.proof-item span {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

/* About Grid Layout & Stats Section */
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 64px;
  align-items: center;
}
.about-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.stats-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.stat-card {
  background: #fff;
  padding: 22px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid #eef0fd;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.015);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat-card:hover {
  transform: translateY(-4px);
  border-color: #d1cfff;
  box-shadow: 0 20px 40px rgba(79, 70, 229, 0.06);
}
.stat-num-wrapper {
  display: flex;
  align-items: baseline;
  font-size: 38px;
  font-weight: 800;
  color: var(--indigo);
  line-height: 1;
}
.stat-card strong {
  color: var(--indigo);
  margin-left: 2px;
}
.stat-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

/* Services Header Alignment & Card Redesign */
.services-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 46px;
  gap: 30px;
}
.services-header h2 {
  margin-bottom: 0;
}
.card-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
}
.card.violet .card-icon-wrapper, .card.black .card-icon-wrapper {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.card.lavender .card-icon-wrapper {
  background: rgba(79, 70, 229, 0.08);
  color: var(--indigo);
}
.card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}
.card:hover {
  transform: translateY(-8px) scale(1.01);
}
.card.violet:hover {
  background: var(--indigo-dark);
  box-shadow: 0 24px 48px rgba(79, 70, 229, 0.15);
}
.card.black:hover {
  background: #1a1a24;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
}
.card.lavender:hover {
  background: #e4e1ff;
  box-shadow: 0 24px 48px rgba(79, 70, 229, 0.08);
}

.testimonial-section {
  padding-top: 112px;
  padding-bottom: 112px;
}
.testimonial-section .lead {
  margin-top: 20px;
}
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 52px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.quote {
  background: #fff;
  border: 1px solid #eef0fd;
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  box-shadow: 0 16px 40px rgba(79, 70, 229, 0.015);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.quote::before {
  content: '“';
  position: absolute;
  top: -15px;
  right: 24px;
  font-size: 110px;
  line-height: 1;
  color: var(--soft-2);
  font-family: Georgia, serif;
  pointer-events: none;
  opacity: 0.6;
}
.quote:hover {
  transform: translateY(-6px);
  border-color: #d1cfff;
  box-shadow: 0 24px 48px rgba(79, 70, 229, 0.06);
}
.quote p {
  font-size: 1.15rem;
  line-height: 1.6;
  color: #2b2b36;
  margin: 0;
  z-index: 1;
}
.quote footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  font-size: 13.5px;
  z-index: 1;
}
.quote footer strong {
  font-weight: 700;
  color: var(--ink);
}
.quote footer span {
  color: var(--muted);
  font-weight: 500;
}

/* Contact Card & Modern Floating Label Form Styles */
.contact-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.01);
  transition: box-shadow 0.3s ease;
}
.contact-card:hover {
  box-shadow: 0 32px 72px rgba(79, 70, 229, 0.06);
}
.input-group {
  position: relative;
  display: flex;
  flex-direction: column;
}
.input-group input {
  height: 58px;
  width: 100%;
  padding: 22px 16px 6px;
  border: 1.5px solid #d1d1f7;
  border-radius: 12px;
  background: #fafaff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  outline: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.input-group textarea {
  width: 100%;
  padding: 24px 16px 8px;
  border: 1.5px solid #d1d1f7;
  border-radius: 12px;
  background: #fafaff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  outline: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 140px;
  resize: vertical;
}
.input-group label {
  position: absolute;
  left: 16px;
  font-size: 15px;
  font-weight: 600;
  color: #7b7b93;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: left top;
}
.input-group label span {
  font-weight: 400;
  color: var(--muted);
}

/* Default label centering for inputs */
.input-group:not(.field-message) label {
  top: 50%;
  transform: translateY(-50%);
}
/* Default label top alignment for textarea */
.input-group.field-message label {
  top: 20px;
}
/* Float active/focused label for inputs */
.input-group:not(.field-message) input:focus ~ label,
.input-group:not(.field-message) input:not(:placeholder-shown) ~ label {
  transform: translateY(-20px) scale(0.8);
  color: var(--indigo);
  font-weight: 700;
}
/* Float active/focused label for textarea */
.input-group.field-message textarea:focus ~ label,
.input-group.field-message textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-10px) scale(0.8);
  color: var(--indigo);
  font-weight: 700;
}

.input-group input:focus, .input-group textarea:focus {
  background: #fff;
  border-color: var(--indigo);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

.contact-card .field-name,
.contact-card .field-message,
.contact-card .form-submit,
.contact-card .note,
.contact-card .form-status {
  grid-column: 1 / -1;
}
.contact-card .form-submit {
  justify-self: start;
  width: auto;
  min-width: 180px;
  font-size: 15px;
  background: var(--indigo);
  color: #fff;
  border: 1px solid var(--indigo);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.contact-card .form-submit:active {
  transform: translateY(0);
}
.contact-card .note {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.4;
}
.contact-card .form-status {
  padding: 16px;
  border-radius: 12px;
  background: #eef2ff;
  color: var(--indigo-dark);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #d8b4fe;
}

/* Center CTA cards globally */
.cta {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 64px 48px !important;
  gap: 24px !important;
}
.cta h2 {
  margin: 0 auto !important;
  max-width: 800px !important;
}
.cta .lead {
  margin: 16px auto 0 !important;
  max-width: 680px !important;
}

/* Navigation Links Interactive Underline (excluding CTA button) */
.nav a:not(.button) {
  position: relative;
  padding-bottom: 4px;
}
.nav a:not(.button)::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--indigo);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nav a:not(.button):hover::after, .nav a:not(.button).active::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Card Hover Lifts */
.card, .case, .principle {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover, .case:hover, .principle:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(79, 70, 229, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* Button Micro-interactions (Icon Translation) */
.button span {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.button:hover span {
  transform: translateX(4px);
}

/* Button Hover State Color Schemes & Elevations */
.button.white:hover {
  background-color: #fff;
  border-color: #000;
  color: #000;
}
.button.indigo:hover {
  background-color: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}
.button.dark:hover {
  background-color: #2a2a35;
  border-color: #2a2a35;
  color: #fff;
}

/* Scroll Entrance Animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
/* About Page stats grid layout */
.about-stats-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 64px;
  align-items: center;
}
.about-stats-grid .stats-container {
  grid-template-columns: 1fr 1fr;
}

/* About Page Client Profiles */
.clients-section {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 56px;
}
.clients-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.client-type-card {
  background: #fff;
  border: 1px solid #eef0fd;
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.015);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.client-type-card:hover {
  transform: translateY(-6px);
  border-color: #d1cfff;
  box-shadow: 0 20px 40px rgba(79, 70, 229, 0.05);
}
.client-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(79, 70, 229, 0.08);
  color: var(--indigo);
  margin-bottom: 24px;
  transition: transform 0.3s ease;
}
.client-type-card:hover .client-icon {
  transform: scale(1.1) rotate(3deg);
}
.client-type-card h3 {
  margin-bottom: 12px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}
.client-type-card p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
}

.about-hero{padding:96px 0 72px;background:var(--soft)}.about-story{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}.about-story p{font-size:1.12rem;color:#393942}.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}.principle{padding:28px;border-radius:var(--radius-lg);background:var(--soft)}.principle p{color:var(--muted)}@media(max-width:800px){.about-grid{grid-template-columns:1fr;gap:40px}.stats-container{grid-template-columns:repeat(3,1fr);gap:16px}.proof-band-inner {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }
  .proof-items {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .proof-item {
    padding: 10px 18px;
  }
  .quote-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .testimonial-section{padding-top:80px;padding-bottom:80px}.contact-card,.about-story{grid-template-columns:1fr;padding:32px 24px;gap:20px}.principle-grid{grid-template-columns:1fr}.about-stats-grid{grid-template-columns:1fr;gap:40px}.clients-grid{grid-template-columns:1fr;gap:20px}}@media(max-width:480px){.proof-band{padding:22px 0}.proof-item{min-height:auto}.quote-grid{gap:18px;margin-top:32px}.quote{min-height:0;padding:25px}.stats-container{grid-template-columns:1fr}.about-stats-grid .stats-container{grid-template-columns:1fr}}

/* Case Study Card Hover CTA */
.case-cta-label {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--indigo);
  margin-top: auto;
  padding-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.case:hover .case-cta-label {
  transform: translateX(4px);
}

/* Sticky Header & Top Hover Navigation & Back to Top Button styles */
.header-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
  background: #fff;
}
.header-wrap.header-scrolled {
  position: fixed;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transform: translateY(-100%);
}
.header-wrap.header-scrolled.header-visible {
  transform: translateY(0);
}

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--indigo);
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8) translateY(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 99;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}
.back-to-top:hover {
  background: var(--indigo);
  color: #fff;
  border-color: var(--indigo);
  box-shadow: 0 12px 28px rgba(79, 70, 229, 0.16);
  transform: translateY(-2px);
}
.back-to-top:active {
  transform: translateY(0);
}

/* Hero Variant 1: Centered Content with Full-Width Background Image */
.hero-variant-1 {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 120px 0;
  background: var(--soft);
}
.hero-variant-1 .hero-bg-img {
  position: absolute;
  inset: 0;
  background-image: url('assets/hero-art.avif');
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.hero-variant-1 .hero-overlay-center {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.75) 100%);
  z-index: 2;
}
.hero-variant-1 .hero-content-center {
  position: relative;
  z-index: 3;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-variant-1 .hero-content-center h1 {
  margin: 0 auto;
  text-align: center;
}
.hero-variant-1 .hero-content-center .lead {
  margin: 24px auto 0;
  max-width: 680px;
  text-align: center;
}
.hero-variant-1 .hero-content-center .actions {
  justify-content: center;
  margin-top: 32px;
}

/* Hero Variant 2: Left Content with Left-to-Right Fade Gradient and Full-Width Background Image */
.hero-variant-2 {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 120px 0;
  background: var(--soft);
}
.hero-variant-2 .hero-bg-img {
  position: absolute;
  inset: 0;
  background-image: url('assets/hero-art.avif');
  background-size: cover;
  background-position: right center;
  z-index: 1;
}
.hero-variant-2 .hero-overlay-left {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 50%, rgba(255, 255, 255, 0) 100%);
  z-index: 2;
}
.hero-variant-2 .hero-grid {
  position: relative;
  z-index: 3;
  width: 100%;
}
.hero-variant-2 .hero-content-left {
  max-width: 620px;
}

@media (max-width: 800px) {
  .hero-variant-1, .hero-variant-2 {
    min-height: auto;
    padding: 80px 0;
  }
  .hero-variant-2 .hero-overlay-left {
    background: rgba(255, 255, 255, 0.92);
  }
  .hero-variant-2 .hero-content-left {
    max-width: 100%;
  }
}

/* Mouse Interactive Micro-Interactions */

/* Original Hero Wrap & Glow */
.clay-art-wrap {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  overflow: visible;
}
.clay-art-glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.12) 0%, rgba(236, 235, 255, 0) 70%);
  z-index: -1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  left: var(--glow-x, 50%);
  top: var(--glow-y, 50%);
}
.clay-art-wrap:hover .clay-art-glow {
  opacity: 1;
}
.clay-art img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Variant 1 Interactive Spotlight */
.hero-variant-1 .hero-bg-img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-variant-1 .hero-overlay-center {
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.75) 100%);
  transition: background 0.1s ease-out;
}

/* Variant 2 Interactive Gradient Shift */
.hero-variant-2 .hero-bg-img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-variant-2 .hero-overlay-left {
  background: linear-gradient(var(--gradient-angle, 90deg), rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) var(--gradient-percent, 50%), rgba(255, 255, 255, 0) 100%);
  transition: background 0.1s ease-out;
}

/* Case Study Image Thumbnails */
.case-img-wrap {
  width: 100%;
  height: 240px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  position: relative;
}
.case-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.case:hover .case-img-wrap img {
  transform: scale(1.08);
}
.case > div {
  display: flex;
  flex-direction: column;
}
.case p.label {
  margin-top: 0;
}

/* Testimonial Marquee Autoscroll */
.testimonial-marquee-container {
  overflow: hidden;
  white-space: nowrap;
  padding: 40px 0;
  margin-top: 52px;
  width: 100%;
  position: relative;
}
.testimonial-marquee-container::before,
.testimonial-marquee-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.testimonial-marquee-container::before {
  left: 0;
  background: linear-gradient(to right, var(--paper), transparent);
}
.testimonial-marquee-container::after {
  right: 0;
  background: linear-gradient(to left, var(--paper), transparent);
}
.testimonial-marquee {
  display: inline-flex;
  gap: 24px;
  animation: scroll-marquee 40s linear infinite;
}
.testimonial-marquee:hover {
  animation-play-state: paused;
}
@keyframes scroll-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 12px)); }
}

/* Modern Testimonial Cards */
.quote-modern {
  display: inline-flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  width: 380px;
  white-space: normal;
  position: relative;
  min-height: 220px;
  flex-shrink: 0;
  gap: 16px;
  text-align: left;
}
.quote-modern:hover {
  transform: translateY(-6px);
  border-color: #d1cfff;
  box-shadow: 0 24px 48px rgba(79, 70, 229, 0.06);
}
.quote-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.quote-author-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  background: #e2e8f0;
  flex-shrink: 0;
}
.quote-author-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.quote-author-info strong {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.quote-author-info span {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}
.quote-modern p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #334155;
  margin: 0;
}
.quote-stars {
  color: #eab308;
  font-size: 18px;
  letter-spacing: 2px;
}

/* Reverse Marquee Animation */
.testimonial-marquee.reverse {
  animation: scroll-marquee-reverse 40s linear infinite;
}
@keyframes scroll-marquee-reverse {
  0% { transform: translateX(calc(-50% - 12px)); }
  100% { transform: translateX(0); }
}

/* Case Study Detail Image Placeholder */
.case-detail-img-wrap {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 40px;
  margin-bottom: 40px;
}
.case-detail-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* Mouse-Interactive Frosted Background Gradient below cards */
.testimonial-section, #services, #work, .service-detail, .similar-cases-section {
  position: relative;
}
.testimonial-section::before, #services::before, #work::before, .similar-cases-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 500px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(191, 219, 254, 0.15) 0%, rgba(254, 215, 170, 0.12) 50%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.testimonial-section:hover::before, #services:hover::before, #work:hover::before, .similar-cases-section::before {
  opacity: 1;
}
/* Ensure wraps and cards stay above the background gradient */
.testimonial-section .wrap, #services .wrap, #work .wrap, .similar-cases-section .wrap {
  position: relative;
  z-index: 1;
}