/* Nayak Custom Styles */
:root {
  --font-body: 'Newsreader', serif;
  --font-headline: 'Newsreader', serif;
  --font-label: 'Newsreader', serif;
}

body,
p,
.p,
.about-text {
  font-family: var(--font-body) !important;
}

h1,
h2,
h3,
.h1,
.h2,
.h3,
.h2_form,
.h3_team,
.h2_slide,
.h2_services {
  font-family: var(--font-headline) !important;
}

.h1.is-hero {
  font-size: clamp(2.5rem, 4.8vw, 6.5rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.03em !important;
}

.button-text,
.footer_link-text,
.nav_link-block,
.label,
.nav_link {
  font-family: var(--font-label) !important;
}

/* --- Team Card Name Overlay Style (Global) --- */
.team-card_person-desc {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: absolute !important;
  bottom: 2.5rem !important;
  left: 5% !important;
  width: 90% !important;
  padding: 0 !important;
  z-index: 10 !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
}

.h3_team {
  color: #ffffff !important;
  font-size: 1.5rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin: 0 !important;
  line-height: 1.1 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

.team-card_job-title {
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: var(--font-label) !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-top: 0.1rem !important;
  line-height: 1 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}

.team-card_wrapper {
  position: relative !important;
  overflow: hidden !important;
}

/* --- Hero Layout Fixes --- */
.hero_bottom-right {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 50vh !important;
}

.hero_bottom-cta-wrap {
  margin-top: -2.5rem !important;
}



html.is-preloading,
body.is-preloading {
  overflow: hidden;
}

/* --- REDESIGN: Hero & Header --- */

/* Centered Header Redesign (Robust) */
body .nav_contain {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1.2rem 5% !important;
  position: relative !important;
  width: 100% !important;
  min-height: 5rem !important;
  background: transparent !important;
}

body .nav_logo-wrapper {
  flex: 1 !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  z-index: 10 !important;

}

body .logo-img {
  height: 6rem !important;
  /* Slightly smaller for better balance */
  width: auto !important;
  transform: translateY(0.1rem) !important;
  /* Precision alignment with menu midline */
  transition: transform 0.3s ease !important;
  margin-left: 0 !important;
  /* Ensure no cut-off */
}

body .nav_links-list {
  display: flex !important;
  flex: 1 !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 3.5rem !important;
  margin: 0 !important;
  z-index: 100 !important;
  white-space: nowrap !important;
}

body .nav_link-block {
  display: flex !important;
  align-items: center !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
  line-height: 1 !important;
}

body .nav_link-block:hover {
  color: #fff !important;
}

body .nav_button-wrapper {
  flex: 1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  z-index: 10 !important;
}

body .nav_contact-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 100px !important;
  padding: 0.6rem 2.5rem !important;
  color: #fff !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.05) !important;
  transition: all 0.4s ease !important;
}

body .nav_contact-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px) !important;
}

/* Hero Section Proportions Redesign */
.hero_wrapper_new {
  padding-top: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 85vh !important;
}

.hero_top-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: 8vw !important;
  padding: 0 5% 0 !important;
  margin-top: -2vh !important;
}

/* Centered hero variant (no image) */
.hero_top-row.hero_top-row--centered {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 2.5rem !important;
  padding: 0 5% 0 !important;
  width: 100% !important;
  flex-grow: 1 !important;
  margin-top: 0 !important;
}

.hero_top-row--centered .h1.is-hero-redesign {
  font-size: clamp(2.4rem, 4.2vw, 5.2rem) !important;
  text-align: center !important;
  max-width: 100% !important;
}

/* Hero CTA Buttons */
.hero_cta-buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

.hero_btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  padding: 0.8rem 1.8rem !important;
  border-radius: 100px !important;
  font-family: var(--font-label) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.hero_btn--primary {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #fff !important;
  box-shadow: 0 0 30px rgba(255,255,255,0.12) !important;
}

.hero_btn--primary:hover {
  background: rgba(255,255,255,0.88) !important;
  box-shadow: 0 0 50px rgba(255,255,255,0.22) !important;
  transform: translateY(-2px) !important;
}

.hero_btn--secondary {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.hero_btn--secondary:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.35) !important;
  transform: translateY(-2px) !important;
}

@media screen and (max-width: 767px) {
  .hero_top-row--centered .h1.is-hero-redesign {
    font-size: clamp(2.2rem, 8vw, 3.5rem) !important;
  }
  .hero_cta-buttons {
    gap: 0.75rem !important;
  }
  .hero_btn {
    font-size: 0.85rem !important;
    padding: 0.7rem 1.4rem !important;
  }
}

.hero_tablet-mockup {
  justify-self: start !important;
  width: 100% !important;
  max-width: 45vw !important;
}

.hero_tablet-mockup img {
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.hero_headline-side {
  justify-self: start !important;
  margin-top: -2vh !important;
}

.h1.is-hero-redesign {
  font-family: var(--font-headline) !important;
  font-size: 4vw !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
  color: #fff !important;
  font-weight: 400 !important;
}

/* Bottom Information Grid (1:1 with reference) */
.hero_bottom-row {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr 1fr !important;
  gap: 6vw !important;
  padding: 0 5% 4vh !important;
  margin-top: 5vh !important;
  align-items: start !important;
}

.hero_bottom-column {
  display: flex !important;
  flex-direction: column !important;
}

.hero_bottom-column .p.white {
  color: #fff !important;
  font-size: 1rem !important;
  margin-bottom: 1.2rem !important;
  font-weight: 500 !important;
}

.hero_bottom-column .p {
  color: rgba(255, 255, 255, 0.45) !important;
  line-height: 1.5 !important;
  font-size: 1.15rem !important;
  max-width: 22vw !important;
}

.hero_bottom-column .p.is-gradient {
  margin-top: auto !important;
  padding-top: 5vh !important;
  opacity: 0.6 !important;
}

.hero_cta-link-wrap {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 0.8rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  text-decoration: none !important;
  margin-top: auto !important;
  width: 100% !important;
  transition: border-color 0.3s ease !important;
}

.hero_cta-link-wrap:hover {
  border-bottom-color: #fff !important;
}

.hero_cta-link-wrap span {
  color: #fff !important;
  font-size: 1rem !important;
  letter-spacing: -0.01em !important;
  opacity: 0.8 !important;
}

.hero_cta-arrow {
  color: #fff !important;
  font-size: 1.2rem !important;
  opacity: 0.8 !important;
}

@media screen and (max-width: 991px) {
  body .logo-img {
    height: 5.8rem !important;
    padding-top: 0.5rem !important;
    padding-left: 1.5rem !important;
    transform: none !important;
  }

  .hero_top-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    /* Reset gap */
    padding-top: 10vh !important;
  }

  .hero_headline-side {
    order: 1 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .hero_tablet-mockup {
    order: 2 !important;
    width: 100% !important;
    max-width: none !important;
    transform: scale(1.15) !important;
    /* Aggressively enlarge image */
    justify-self: center !important;
    margin-top: -4vh !important;
    /* Adjusted pull for larger image size */
  }

  .h1.is-hero-redesign {
    font-size: 8vw !important;
    text-align: left !important;
    margin-bottom: 0 !important;
    line-height: 1.1 !important;
    /* Tighter line height to reduce bottom space */
  }

  .hero_top-row--centered .h1.is-hero-redesign {
    text-align: center !important;
    font-size: clamp(2rem, 8vw, 3.5rem) !important;
  }

  .hero_bottom-row {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
    padding: 4vh 5% !important;
  }

  .hero_bottom-column .p {
    max-width: none !important;
    font-size: 1rem !important;
  }
}

@media screen and (max-width: 991px) {
  .hero_top-row {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 4rem !important;
  }

  .hero_bottom-row {
    grid-template-columns: 1fr !important;
    gap: 4rem !important;
    padding-top: 4rem !important;
  }

  body .nav_links-list {
    display: none !important;
  }

  body .nav_logo-wrapper {
    position: absolute !important;
    left: 5vw !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* FOUC Prevention */
html.is-preloading .section_hero,
html.is-preloading .about-text {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* --- About Section Desktop Restoration --- */
body .section_about,
body .section_about>.padding-global,
body .section_about .pin-height {
  height: 300vh !important;
  /* Propagation of height for sticky behavior */
  position: relative !important;
  background-color: #000 !important;
}

body .container-global.is-about {
  position: sticky !important;
  /* Stick during scroll-reveal */
  top: 0 !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 4.5vw !important;
  overflow: hidden !important;
  z-index: 5 !important;
}

body .about-text {
  font-family: var(--font-body) !important;
  font-size: 2.6rem !important;
  /* Optimized for density */
  font-weight: 500 !important;
  line-height: 1.4 !important;
  /* Improved reading vertical rhythm */
  letter-spacing: -0.01em !important;
  color: #fff !important;
  max-width: 80% !important;
  text-align: left !important;
}

.about-point {
  margin-bottom: 2.2rem !important;
  /* Tightened gap */
  opacity: 1;
  /* GSAP will handle alpha */
  position: relative;
  display: block !important;
}

.about-point::before {
  content: "■";
  font-size: 0.8rem;
  margin-right: 1.5rem;
  opacity: 0.4;
  display: inline-block;
  vertical-align: middle;
}

/* Ensure words have breathing room */
body .about-text .word {
  display: inline-block !important;
}

@media screen and (min-width: 992px) {
  body .about-text .word {
    margin-right: 0 !important;
    /* Fix for desktop spacing */
  }
}

[data-anim],
[data-anim-line],
[data-anim="lines"] {
  will-change: transform, opacity, filter;
}

/* Desktop default (>=1920px) */
html {
  font-size: 0.83vw;
}

/* ≤1920px */
@media (max-width:1920px) {
  html {
    font-size: 0.83vw;
  }
}

/* ≤1440px */
@media (max-width:1440px) {
  html {
    font-size: 0.93vw;
  }
}

/* ≤767px */
@media (max-width:767px) {
  html {
    font-size: 16px;
  }
}

/* Make text look crisper and more legible in all browsers */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
  outline: 0.125rem solid #4d65ff;
  outline-offset: 0.125rem;
}

/* Set color style to inherit */
.inherit-color * {
  color: inherit;
}

/* Get rid of top margin on first element in any rich text element */
.w-richtext> :not(div):first-child,
.w-richtext>div:first-child> :first-child {
  margin-top: 0 !important;
}

/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child,
.w-richtext ol li:last-child,
.w-richtext ul li:last-child {
  margin-bottom: 0 !important;
}

/* Make sure containers never lose their center alignment */
.container-medium,
.container-small,
.container-large {
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Apply "..." after 3 lines of text */
.text-style-3lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Apply "..." after 2 lines of text */
.text-style-2lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* These classes are never overwritten */
.hide,
.is-hidden {
  display: none !important;
}


@media screen and (min-width: 992px) {
  .team_cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 8rem !important;
    /* Reduced gap between rows */
    margin-top: 45rem !important;
    z-index: 2 !important;
    position: relative !important;
    width: 100% !important;
  }

  .team-card_wrapper,
  .team-card_wrapper.is-2,
  .team-card_wrapper.is-3,
  .team-card_wrapper.is-4 {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    width: 26vw !important;
    /* Balanced Nayak size - Slightly larger */
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .team-card_person-wrapper {
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    /* Elegant vertical portrait ratio */
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent),
      linear-gradient(to right, transparent, black 5%, black 95%, transparent) !important;
    mask-composite: intersect !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent),
      linear-gradient(to right, transparent, black 5%, black 95%, transparent) !important;
    -webkit-mask-composite: source-in !important;
    border-radius: 0 !important;
    /* Edge to edge bleed feel */
  }

  .team-cards_row {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 2.5vw !important;
    /* Closer cards in row */
    margin-bottom: 2rem !important;
    width: 100% !important;
  }

  .team-cards_column:empty {
    display: none !important;
  }

  .team-cards_column {
    display: flex !important;
    justify-content: center !important;
    width: auto !important;
  }


  /* Ensure background titles stay behind the cards */
  .team_sticky {
    z-index: 1 !important;
  }

  /* Production-grade title size to prevent overlap */
  .team_sticky .h2,
  .team_sticky h2 {
    font-size: 8.5vw !important;
    /* Matches production scaling */
    line-height: 0.85 !important;
    letter-spacing: -0.04em !important;
  }

  /* Balanced stagger for depth without excessive spread */
  .team-card_wrapper:not(.is-2):not(.is-3):not(.is-4) {
    margin-top: 4rem !important;
  }

  .team-card_wrapper.is-2 {
    margin-top: 0rem !important;
  }

  .team-card_wrapper.is-3 {
    margin-top: 4rem !important;
  }

  .team-card_wrapper.is-4 {
    margin-top: 0 !important;
  }

  /* --- Desktop Footer Overhaul (Nayak Parity) --- */
  .section_footer {
    padding-bottom: 1rem !important;
  }

  .footer_top-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 4fr !important;
    /* Contact | (Nav + Studio) */
    gap: 8vw !important;
    margin-bottom: 1rem !important;
    /* Reduced from 12rem */
    align-items: start !important;
    width: 100% !important;
  }

  /* Break the nested column into two horizontal pieces using a grid */
  .footer_top-column:nth-child(2) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0 4vw !important;
    /* horizontal gap */
    align-items: start !important;
  }

  /* Force headers to the top row of the inner grid */
  .footer_top-column:nth-child(2) .footer_link-title:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .footer_top-column:nth-child(2) .footer_link-title.margin-top-2rem {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0 !important;
  }

  /* Force content to the second row of the inner grid */
  .footer_top-column:nth-child(2) .footer_link-list-2col {
    grid-column: 1;
    grid-row: 2;
  }

  .footer_top-column:nth-child(2) .footer_link-list:last-child {
    grid-column: 2;
    grid-row: 2;
  }

  .footer_bottom-wrapper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    width: 100% !important;
    gap: 2rem !important;
  }

  .footer_logo-text-wrapper {
    flex: 0 0 auto !important;
  }

  .footer_logo-img {
    height: 8vw !important;
    /* Scaled for footer impact */
    width: auto !important;
    object-fit: contain !important;
    margin-left: -1rem !important;
    margin-bottom: -2.5vw !important;
  }

  .footer_bottom-left-side {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    gap: 5vw !important;
  }

  .footer_bottom-img-wrapper {
    display: none !important;
    /* Removed as requested */
  }

  .footer_bottom-img {
    border-radius: 8px !important;
  }

  .footer_bottom-terms-wrapper {
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 2rem !important;
    margin-bottom: 2rem !important;
  }

  .footer_bottom-terms-wrapper .p.white {
    font-size: 0.9rem !important;
    opacity: 0.5 !important;
    white-space: nowrap !important;
  }

  /* --- Header Desktop Fix --- */
  body .nav_links-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 3rem !important;
    visibility: visible !important;
    margin-top: -0.1rem !important;
    /* Align with logo top */
    margin-right: auto !important;
    /* Push contact button to far right */
    margin-left: 15vw !important;
    /* Shift menu left towards logo */
  }

  body .nav_link-block {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    margin: 0 !important;
  }

  body .logo-text {
    font-size: 4.5vw !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: -0.04em !important;
  }

  body .nav_button-wrapper {
    margin-top: -1.0rem !important;
    /* Visually align button with menu */
  }

  .nav_contain {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 3rem 5rem 3rem !important;
    /* Increased top/left/right air */
  }

  /* Legacy logo offsets removed to prevent cut-off */

  /* Align core philosophy text with logo's "N" */
  .hero_top-info {
    padding-left: 2.5rem !important;
    padding-right: 5rem !important;
  }

  /* --- Hero Image Scaling --- */
  .hero_bottom-case-wrap {
    width: 195% !important;
    /* Make image 15% larger */
    margin-left: -1.5% !important;
    /* Center the enlarged image */
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  }

  .her-case-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

.w-form-done,
.w-form-fail {
  display: none;
}

@media screen and (min-width: 992px) {
  .hide-desktop {
    display: none !important;
  }
}

@media screen and (max-width: 991px) {

  .hide,
  .hide-tablet {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .hide-mobile-landscape {
    display: none !important;
  }
}

@media screen and (max-width: 479px) {
  .hide-mobile {
    display: none !important;
  }
}

.margin-0 {
  margin: 0rem !important;
}

.padding-0 {
  padding: 0rem !important;
}

.spacing-clean {
  padding: 0rem !important;
  margin: 0rem !important;
}

.margin-top {
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.padding-top {
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.margin-right {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.padding-right {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.margin-bottom {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.padding-bottom {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

.margin-left {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
}

.padding-left {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
}

.margin-horizontal {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.padding-horizontal {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

.margin-vertical {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.padding-vertical {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

.section_about .word {
  display: inline-block;
  transform: translate(100vw, 0);
}

/* Works: stack details */
.works-left .works_wrapper {
  position: relative;
  height: 100%;
}

.works-left .work-detail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Works titles */
.works-titles .h2_works {
  color: rgba(255, 255, 255, 0.35);
  transition: color .2s linear;
}

.works-titles .h2_works.is-active {
  color: #fff;
}

@media (max-width: 991px) {
  .works-titles .h2_works {
    cursor: pointer;
  }

  .works-titles .work_h2-case-wrapper.mobile {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.45s ease, opacity 0.3s ease;
  }

  .works-titles .work_h2-case-wrapper.mobile>.work-detail {
    overflow: hidden;
    min-height: 0;
  }

  .works-titles .work_h2-wrapper.is-open .work_h2-case-wrapper.mobile {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .works-titles .work_h2-wrapper.is-open .work-detail {
    display: block !important;
    opacity: 1 !important;
  }

  .works-titles .work_h2-wrapper .h2_works {
    transition: color .25s linear;
  }

  .works-titles .work_h2-wrapper.is-open .h2_works {
    color: #fff;
  }

  .nav_mobile-wrap {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    display: none;
    /* JS will set to flex */
    flex-direction: column !important;
    background-color: #000 !important;
    pointer-events: none;
  }

  .nav_mobile-wrap.is-open {
    display: flex !important;
    pointer-events: auto !important;
  }

  .nav_mobile-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 2rem !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .nav_mobile-bg-holder {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
  }

  .nav_mobile-li {
    list-style: none !important;
    margin-bottom: 2rem !important;
  }

  .nav_mobile-link {
    font-size: 2.5rem !important;
    font-weight: 500 !important;
    color: #fff !important;
    text-decoration: none !important;
  }

  .nav_mobile-cta {
    margin-top: auto !important;
    padding: 2rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}


@media (min-width: 992px) {
  .works-titles {
    padding-top: 50vh;
    padding-bottom: 50vh;
  }

  .works-titles .work_h2-wrapper {
    margin-bottom: 100vh;
  }

  .works-titles .h2_works {
    line-height: 1.05 !important;
  }
}

/* Year digits */
.works-year {
  display: inline-flex;
  gap: 0.02em;
}

.works-year__digit {
  display: inline-block;
}

/* Form split stability */
.form_step .word {
  display: inline-block;
}

.form_step .char {
  display: inline-block;
}

.section_long-title .letter {
  display: inline-block;
}

/* Preloader lock */
html.is-preloading,
body.is-preloading {
  overflow: hidden;
}

.form_step-ratio-item:has(input[type="radio"]:checked) {
  background: #777777;
}

.form_step-ratio-item:has(input[type="radio"]:checked) .w-form-label {
  color: #ffffff;
}

/* Consent Pro banner */
.consent_components {
  position: relative;
  z-index: 9999 !important;
}



[fs-cc-gpc="false"] [fs-cc-element="gpc-honored"] {
  display: none;
}

/* Split Text Stability */
[class*="gsap_split_letter"],
[class*="gsap_split_word"] {
  display: inline-block !important;
  white-space: nowrap !important;
  vertical-align: baseline;
  margin: 0 !important;
  padding: 0 !important;
}

.gsap_split_line {
  display: block !important;
}

.hero_line_outer {
  overflow: hidden !important;
  display: block !important;
}

.button-main {
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.4s ease !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 38px !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  padding: 0 1.5rem !important;
  width: auto !important;
  min-width: 140px !important;
}

.button-main .button-text {
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.4s ease !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: 0 10px !important;
}

.button-main:hover .button-text {
  transform: translateY(-100%) !important;
}

.button-main:hover {
  transform: scale(1.05) !important;
}

/* Consent Pro banner */
.consent_components {
  position: relative;
  z-index: 9999 !important;
}

[fs-cc-element="banner"],
[fs-cc-element="preferences"] {
  opacity: 0;
  display: none;
  transition: opacity 300ms ease, transform 300ms ease, display 300ms allow-discrete;
}

/* Force show the preference icon */
[fs-cc-element="fixed-preferences"] {
  opacity: 1 !important;
  display: block !important;
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  z-index: 99999 !important;
}

[fs-cc-element="banner"][fs-cc-active],
[fs-cc-element="preferences"][fs-cc-active] {
  opacity: 1;
  display: block;
}

/* Font Face — Keep */
@font-face {
  font-family: var(--font-headline);
  src: url('https://cdn.prod.website-files.com/66387c0fa39192a87e403b2a/66387f75d54b235e278891ec_GeneralSans-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root {
  --font-main: "Newsreader", serif;
  --color-white: #ffffff;
  --color-dim: rgba(255, 255, 255, 0.35);
}

body {
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.h1,
.h2,
.h3,
.p {
  font-family: var(--font-main);
}



/* Preloader Final State - Let JS control display */
.preloader {
  opacity: 1;
  visibility: visible;
}

.preloader-percent {
  font-variant-numeric: tabular-nums !important;
}

/* Logo Text Styles */
.logo-img {
  height: 7.2rem;
  width: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 991px) {
  .logo-img {
    height: 5.8rem;
    /* Scaled down for mobile */
  }
}


.logo-text {
  font-family: var(--font-main);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 991px) {
  .logo-text {
    font-size: 1.8rem;
  }
}

.preloader-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background: #000;
  display: block;
  z-index: 1;
}

.preloader-logo {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}

.preloader_ui-wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;
}

@media screen and (max-width: 991px) {
  .preloader-video {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    background: #000;
  }
}

@media screen and (max-width: 991px) {

  /* --- Global Viewport Lock --- */
  * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  html,
  body {
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Reset all fixed-width containers from polish.css */
  body .page-wrapper,
  body .main-wrapper,
  body .container-global,
  body .section_hero,
  body .section_about,
  body .section_services,
  body .section_works,
  body .section_team,
  body .section_footer,
  body .about-text {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    height: auto !important;
    inset: auto !important;
    overflow: visible !important;
  }

  body .section_hero,
  body .padding-global.is-hero,
  body .hero_wrapper,
  body .hero_top,
  body .nav_wrapper,
  body .nav_contain {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body .nav_contain {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    /* Absolute center logo */
    align-items: center !important;
    min-height: 5rem !important;
    padding: 1.5rem 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  body .nav_logo-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: none !important;
    /* Reset desktop flex:1 */
    margin: 0 auto !important;
    z-index: 10 !important;
    width: auto !important;
  }

  body .logo-img {
    height: 5.5rem !important;
    width: auto !important;
    transform: none !important;
    padding-left: 0 !important;
    /* Reset visual centering nudge */
    padding-top: 1.2rem !important;
    /* Top spacing nudge */
  }

  /* Remove legacy nayak logo icon from mobile header */
  body .nav_logo-wrapper::before {
    display: none !important;
  }

  body .logo-text {
    font-size: 2.4rem !important;
    /* Slightly smaller for centered balance */
    letter-spacing: -0.04em !important;
    font-weight: 500 !important;
    text-transform: none !important;
    text-align: center !important;
    color: #fff !important;
  }

  body .nav_button-wrapper {
    display: none !important;
    /* Remove menu bar as requested */
  }

  body .nav_links-list,
  body .nav_link-block {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
  }

  body .nav_button-wrapper .button-main {
    display: none !important;
    /* Remove contact button from mobile */
  }

  body .button-text {
    font-size: 13px !important;
    line-height: 1 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
    color: #000 !important;
  }

  body .nav_button-burger {
    display: none !important;
  }

  body .nav_button-burger img {
    width: 100% !important;
    height: 100% !important;
    filter: brightness(0) invert(1) !important;
    /* Force to crisp white */
    display: block !important;
  }

  /* --- About Section Mobile Fix --- */
  body .section_about,
  body .section_about>.padding-global,
  body .section_about .pin-height {
    height: 180vh !important;
    position: relative !important;
    background-color: #000 !important;
  }

  body .section_about {
    padding: 4rem 0 !important;
  }

  body .container-global.is-about {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Centered horizontally */
    padding: 0 8vw !important;
    /* More horizontal breathing room */
    overflow: hidden !important;
    z-index: 5 !important;
  }

  body .about-text {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    /* Centered text */
    font-size: clamp(1.05rem, 4vw, 1.25rem) !important;
    /* Reduced to ensure all points fit */
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
  }

  body .about-point {
    position: relative !important;
    padding-left: 1.5rem !important;
    margin-bottom: 0.8rem !important;
    /* Further tightened to save vertical space */
  }

  body .about-point::before {
    position: absolute !important;
    left: 0 !important;
    top: 0.15em !important;
    /* Align with first line of text */
    margin-right: 0 !important;
    opacity: 0.4 !important;
  }

  body .about-text .word {
    text-align: center !important;
    display: inline-block !important;
    white-space: normal !important;
  }

  /* --- Services Section Mobile Fix --- */
  body .section_services {
    padding: 0 !important;
    /* Remove section padding so slides can span full width */
    background-color: #000 !important;
  }

  body .section_services .service_slide {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 0 !important;
    /* Stack seamlessly without gaps */
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }

  body .section_services .content-wrapper {
    height: auto !important;
    display: block !important;
    position: relative !important;
    transform: none !important;
  }

  body .section_services .slider-pic_wrapper {
    width: 100% !important;
    height: auto !important;
    margin-top: 3rem !important;
    display: block !important;
  }

  body .section_services .slider-pic_wrapper img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  body .section_services .slide-content {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 2rem 5vw !important;
    /* Inner padding keeps text safe, lets background touch screen edge */
    background-color: #fff !important;
    /* Theme 1: White */
    border: none !important;
    color: #000 !important;
  }

  /* Theme 2: Medium Grey (Card 2) */
  body .section_services .slide-content.is-black {
    background-color: #8a8a8a !important;
    color: #000 !important;
  }

  /* Theme 3: Dark Grey (Card 3) */
  body .section_services .slide-content.is-grey {
    background-color: #222 !important;
    color: #fff !important;
  }

  body .section_services .slide-content.is-grey .p,
  body .section_services .slide-content.is-grey .p.black,
  body .section_services .slide-content.is-grey .p.black._60 {
    color: #fff !important;
    opacity: 1 !important;
  }

  body .section_services .slide-top {
    padding: 3rem 0 2rem !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.8) !important;
  }

  body .section_services .slide-content.is-grey .slide-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  }

  body .section_services .h2_slide {
    font-size: 14vw !important;
    line-height: 0.9 !important;
    letter-spacing: -0.05em !important;
    color: inherit !important;
    width: 85% !important;
    margin: 0 !important;
    position: relative !important;
    word-break: break-word !important;
  }

  body .section_services .slide-number {
    font-size: 2.5rem !important;
    line-height: 0.9 !important;
    color: inherit !important;
    opacity: 0.4 !important;
    /* Dimmed index number */
    margin: 0 !important;
  }

  /* --- Works Title Mobile Fix --- */
  body .h2_works {
    font-size: 9vw !important;
    line-height: 1 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  body .section_services .slide-bottom {
    padding: 2rem 0 4rem !important;
    display: block !important;
    width: 100% !important;
    background-color: transparent !important;
    /* Remove the white box from polish.css */
  }

  body .section_services .slide-lable-wrapper .p.black,
  body .section_services .slide-lable-wrapper .p.white {
    font-family: var(--font-label) !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border: 1px solid rgba(128, 128, 128, 0.4) !important;
    border-radius: 100px !important;
    display: inline-block !important;
    margin-bottom: 2rem !important;
    line-height: 1 !important;
  }

  body .section_services .slider-info_wrapper .p.black._60 {
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: inherit !important;
    opacity: 0.7 !important;
    /* Dimmed body text */
    margin-bottom: 1rem !important;
    display: block !important;
  }

  /* --- Footer Mobile Fix (2-Column Parity) --- */
  body .section_footer {
    width: 100% !important;
    padding: 1rem 20px 1rem !important;
    /* Reduced significantly for tighter mobile layout */
    display: block !important;
  }

  body .footer_top-wrapper {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3rem !important;
    align-items: start !important;
  }

  body .footer_top-column {
    width: 100% !important;
    margin-bottom: 0 !important;
    display: block !important;
    text-align: left !important;
  }

  body .footer_link-wrap {
    width: 100% !important;
    display: block !important;
    margin-bottom: 1rem !important;
    text-align: left !important;
  }

  body .footer_link-text {
    font-size: 16px !important;
    position: relative !important;
    display: inline-block !important;
    left: 0 !important;
    top: 0 !important;
    text-align: left !important;
    opacity: 0.8 !important;
  }

  body .footer_bottom-wrapper {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    margin-top: 2rem !important;
    /* Reduced from 6rem */
    grid-template-columns: none !important;
    padding: 0 !important;
  }

  body .footer_bottom-left-side {
    width: 100% !important;
    display: block !important;
    margin: 0 0 0 0 !important;
    /* Reduced from 4rem */
    grid-column: auto !important;
    text-align: left !important;
    position: relative !important;
    left: 0 !important;
    inset: auto !important;
  }

  body .footer_bottom-terms-wrapper {
    width: 100% !important;
    display: block !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .footer_bottom-terms-wrapper .footer_link-list {
    display: block !important;
    width: 100% !important;
    margin-bottom: 2rem !important;
    text-align: left !important;
  }

  body .footer_bottom-terms-wrapper .footer_link-list a {
    display: block !important;
    margin-bottom: 0.8rem !important;
    text-align: left !important;
    width: 100% !important;
    font-size: 14px !important;
    opacity: 0.6 !important;
  }

  body .footer_bottom-img-wrapper {
    display: none !important;
  }

  body .footer_logo-text-wrapper {
    width: 100% !important;
    display: block !important;
    margin-top: 1rem !important;
    /* Reduced from 4rem */
    text-align: left !important;
  }

  body .footer_logo-img {
    height: 4.5rem !important;
    width: auto !important;
    margin-bottom: 2rem !important;
    margin-left: 20px !important;
    /* Match container padding */
    display: block !important;
    object-fit: contain !important;
  }

  /* Deleted conflicting legacy mobile rules to allow new table rebuild to function */


  /* --- TESTIMONIALS SECTION (UNLEASHED) --- */
  .section_testimonials {
    background-color: #000 !important;
    padding: 10rem 0 !important;
    width: 100% !important;
    color: #fff !important;
  }

}

/* Form inner wrappers — no nested glassmorphism, rely on .sintra-card */
.form_wrapper,
.form_steps,
.form_step {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.form_content-inner,
.form_block {
  background-color: transparent !important;
  background: transparent !important;
}

.h2_form,
.form_step-title,
.w-form-label,
.form_step-counter,
.form_step-input,
.form_step-back div,
.p.black {
  color: #ffffff !important;
}

/* form_step-input base styling handled by the boxed style block below */

/* Step 2: grow with content so submit stays in the card */
.form_step.is-2 {
  height: auto !important;
  min-height: 50rem;
  max-height: none !important;
  overflow: visible !important;
  grid-row-gap: 2rem !important;
  grid-column-gap: 2rem !important;
}

.form_step.is-2 .form_step-top {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.form_step.is-2 > div:last-child {
  flex-shrink: 0;
  width: 100%;
  margin-top: auto;
  padding-top: 0.5rem;
}

.form_step.is-2 .w-form-formrecaptcha.captcha {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
}

.form_step.is-2 .form_step-button-wrap.is-final {
  position: relative;
  z-index: 3;
  margin-top: 1rem;
  padding-top: 0.25rem;
}

.form_step.is-2 .button-submit.is-black {
  width: 100%;
  justify-content: center;
}

.form_wrapper,
.form_steps {
  overflow: visible !important;
}

/* Demo call scheduler (step 2) */
.form_demo-slot {
  width: 100%;
  margin-top: 1.25rem;
}

.form_demo-slot__divider {
  height: 1px;
  margin-bottom: 1.25rem;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.22) 20%,
    rgba(255, 255, 255, 0.22) 80%,
    rgba(255, 255, 255, 0)
  );
}

.form_demo-slot__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.form_demo-slot__icon-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

.form_demo-slot__icon {
  display: block;
}

.form_demo-slot__title {
  margin-bottom: 0.35rem !important;
  line-height: 1.2 !important;
}

.form_demo-slot__hint {
  margin: 0;
  font-family: var(--font-label) !important;
  font-size: 0.8rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55) !important;
}

.form_demo-slot__pickers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.form_demo-slot__picker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  cursor: pointer;
}

.form_demo-slot__picker-label {
  font-family: var(--font-label) !important;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5) !important;
}

.form_demo-slot__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem;
  line-height: 1.2;
  color-scheme: dark;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.form_demo-slot__input:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.08);
}

.form_demo-slot__input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.form_demo-slot__input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.65;
  cursor: pointer;
}

.form_demo-slot.is-invalid .form_demo-slot__input {
  border-color: rgba(255, 100, 100, 0.75);
  box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.12);
}

.form_demo-slot.is-invalid .form_demo-slot__time-select {
  border-bottom-color: rgba(255, 100, 100, 0.85);
  color: rgba(255, 180, 180, 0.95) !important;
}

.form_demo-slot.is-invalid .form_demo-slot__icon-wrap {
  border-color: rgba(255, 100, 100, 0.4);
}

/* Time: simple dropdown (date pill style unchanged) */
.form_demo-slot__time-select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 2rem 0.75rem 0;
  margin: 0;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.55)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.15rem center;
  color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem;
  line-height: 1.3;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.form_demo-slot__time-select:hover {
  border-bottom-color: rgba(255, 255, 255, 0.35);
}

.form_demo-slot__time-select:focus {
  outline: none;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.form_demo-slot__time-select option {
  background-color: #1a1a1a;
  color: #ffffff;
}

.form_demo-slot__time-select option:disabled {
  color: rgba(255, 255, 255, 0.35);
}

@media screen and (max-width: 767px) {
  .form_step.is-2 {
    min-height: auto;
    padding-bottom: 1.5rem !important;
  }
}

@media screen and (max-width: 479px) {
  .form_demo-slot__pickers {
    grid-template-columns: 1fr;
  }

  .form_demo-slot__head {
    flex-direction: column;
    gap: 0.75rem;
  }
}

.button-add.is-black,
.button-submit.is-black {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 100px !important;
}

.button-line.is-black {
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0)) !important;
  height: 1px !important;
}

/* radio items: handled by the sintra-redesign block below */

.form_step-counter-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.65rem 0.9rem !important;
  box-sizing: border-box !important;
}

.form_step-counter {
  text-align: center !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.form_step-counter .char,
.form_step-counter .word {
  display: inline-block;
  vertical-align: middle;
}

/* Form CTA buttons — solid white, high contrast */
.form_sintra-right .button-add.is-black,
.form_sintra-right .button-submit.is-black {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  min-height: 3.25rem !important;
  padding: 0.9rem 2rem !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  border: none !important;
  border-radius: 100px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

.form_sintra-right .button-add.is-black:hover,
.form_sintra-right .button-submit.is-black:hover {
  background-color: rgba(255,255,255,0.92) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(255,255,255,0.15) !important;
}

.form_sintra-right .button-add.is-black .p,
.form_sintra-right .button-submit.is-black .p {
  color: #000000 !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-align: center !important;
  width: 100%;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
}

.form_sintra-right .button-add.is-black .p strong,
.form_sintra-right .button-submit.is-black .p strong {
  color: #000000 !important;
}

.form_sintra-right .button-line.is-black {
  display: none !important;
}

.form_demo-slot__input {
  display: block;
  line-height: 1.35 !important;
  min-height: 2.85rem;
}

.form_demo-slot__time-select {
  display: block;
  line-height: 1.35 !important;
  min-height: 2.85rem;
}

.form_step-title {
  text-align: left;
}

.section_team [data-anim="lines"] .word {
  display: inline-block;
  margin-right: 0.28em;
}

.section_team [data-anim="lines"] .gsap_split_line .word:last-child {
  margin-right: 0;
}

/* Case study + works CTA pills — center label in box */
.slide-bottom .button-add,
.works-detail_bottom .button-add,
.work-detail .button-add {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.slide-bottom .button-add .p,
.works-detail_bottom .button-add .p,
.work-detail .button-add .p {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100%;
  margin: 0 !important;
}

.slide-lable-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.slide-lable-wrapper .p {
  text-align: center !important;
  width: 100%;
}

/* Works tag rows */
.work-detail_list-item {
  align-items: center !important;
}

/* Solid White Theme for Service Slides */
.slide-content:not(.is-black):not(.is-grey),
.slide-bottom:not(.is-black):not(.is-grey) {
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
}

.slide-content:not(.is-black):not(.is-grey) .h2_slide,
.slide-content:not(.is-black):not(.is-grey) .p,
.slide-content:not(.is-black):not(.is-grey) .p.black,
.slide-content:not(.is-black):not(.is-grey) .p.black._60,
.slide-content:not(.is-black):not(.is-grey) .slide-number,
.slide-content:not(.is-black):not(.is-grey) .slide-lable-wrapper .p {
  color: #000000 !important;
}

/* Custom 4-Column Grid for Sales & Pipeline Slide */
.slide-bottom.is-grid {
  display: grid !important;
  grid-template-columns: 1fr 2.5fr 2.5fr 3.5fr !important;
  gap: 2rem !important;
  align-items: start !important;
  justify-content: stretch !important;
  padding: 6rem 5% !important;
  text-align: left !important;
}

.slide-bottom.is-grid .slide-grid-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.slide-bottom.is-grid .p {
  text-align: left !important;
  font-size: 1.1rem !important;
  /* Slightly smaller body font */
}

.slide-bottom.is-grid .slide_pic {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  /* Soft edge blending mask */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent),
    linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent),
    linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.slide-bottom.is-grid .slide-grid-col:hover .slide_pic {
  transform: scale(1.02) !important;
}



@media screen and (min-width: 992px) {

  /* Global font sizes for desktop */
  .h2_slide {
    font-size: 8rem !important;
  }

  .slide-bottom.is-grid .p {
    font-size: 1.2rem !important;
  }
}

#apply, #form-cta {
  position: relative !important;
}

#apply::before, #form-cta::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 20vh !important;
  background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.8) 20%, transparent 100%) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* Gradient Top Border for Section Divider */
#apply, #form-cta {
  border-top: 1px solid transparent !important;
  border-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0)) 1 !important;
}

/* Section Divider Gradient (Form to Footer) */
#apply::after, #form-cta::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 20vh !important;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.8) 20%, transparent 100%) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

#apply, #form-cta {
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0)) 1 !important;
}

/* --- Cookie Banner --- */
.cookie-banner {
  position: fixed;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  max-width: none !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  /* Edge to edge */
  padding: 1.2rem 5% !important;
  z-index: 9999 !important;
  display: none;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.cookie-content {
  display: flex;
  flex-direction: row !important;
  /* Horizontal layout on desktop */
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.cookie-buttons {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.cookie-link {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.cookie-link:hover {
  color: #fff;
  border-bottom-color: #fff;
}

.button-add.is-cookie {
  padding: 0.6rem 2rem !important;
  min-width: 120px;
  background-color: #ffffff !important;
  /* Solid white button */
  border: 1px solid #ffffff !important;
}

.button-add.is-cookie .p {
  color: #000000 !important;
  /* Black text on white button */
  font-weight: 600 !important;
}

.button-add.is-cookie:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

@media screen and (max-width: 767px) {
  .cookie-content {
    flex-direction: column !important;
    align-items: flex-start;
    gap: 1rem;
  }

  .cookie-buttons {
    width: 100%;
    justify-content: space-between;
  }
}

/* Explicit Black Theme for Dark Slides */
.slide-content.is-black,
.slide-bottom.is-black {
  background-color: #000000 !important;
  background: #000000 !important;
}

.slide-content.is-black .h2_slide,
.slide-bottom.is-black .p,
.slide-bottom.is-black .p.white,
.slide-bottom.is-black .p.white._60,
.slide-bottom.is-black .slide-number,
.slide-bottom.is-black .slide-lable-wrapper .p {
  color: #ffffff !important;
}

.slide-bottom.is-black .button-add.is-black .p {
  color: #ffffff !important;
}

.slide-bottom.is-black .button-line.is-black {
  background-color: #ffffff !important;
}

/* Explicit Grey Theme for Dark Slides */
.slide-content.is-grey,
.slide-bottom.is-grey {
  background-color: #3f3f3f !important;
  background: #3f3f3f !important;
}

.slide-content.is-grey .h2_slide,
.slide-bottom.is-grey .p,
.slide-bottom.is-grey .p.white,
.slide-bottom.is-grey .p.white._60,
.slide-bottom.is-grey .slide-number,
.slide-bottom.is-grey .slide-lable-wrapper .p {
  color: #ffffff !important;
}

.slide-bottom.is-grey .button-add.is-black .p {
  color: #ffffff !important;
}

.slide-bottom.is-grey .button-line.is-black {
  background-color: #ffffff !important;
}

/* Remove divider lines for dark/grey slides */
.slide-content.is-black,
.slide-bottom.is-black,
.slide-content.is-grey,
.slide-bottom.is-grey {
  border-top: none !important;
}

/* Slide Image Styling */
.slide-image-wrapper {
  width: 100%;
  max-width: 850px;
  margin: 2rem 0 3rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.slide-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 4px;
  /* Subtle rounding for a premium feel */
}

/* Adjust for mobile */
@media (max-width: 767px) {
  .slide-image-wrapper {
    margin: 1.5rem 0 2rem;
  }
}

/* Slide Grid Layout for Desktop */
.slide-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
}

@media (min-width: 992px) {
  .slide-layout-grid {
    grid-template-columns: 1.2fr 1fr;
    /* Text wider than image */
    gap: 4rem;
    align-items: center;
  }

  .slide-text-column {
    text-align: left;
  }

  .slide-text-column .slider-info_wrapper {
    text-align: left !important;
    /* Override center alignment */
  }

  .slide-image-wrapper {
    margin: 0 !important;
    /* Reset margin on desktop */
  }
}

/* FINAL MOBILE OVERRIDES FOR SERVICE SLIDES */
@media screen and (max-width: 991px) {
  .slide-top {
    height: auto !important;
    padding: 3rem 5% 1rem !important;
  }

  .slide-bottom,
  .slide-bottom.is-grid {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    padding: 0.75rem 5% 4rem !important;
    justify-content: flex-start !important;
    gap: 1rem !important;
  }

  .slide-bottom.is-grid .slide-grid-col:first-child {
    display: none !important;
  }

  /* Force much smaller headings with extreme specificity */
  body .section_services .h2_slide,
  body .section_services .slide-content .h2_slide {
    font-size: 2.3rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  .slide-bottom.is-grid .p {
    font-size: 1.0rem !important;
    line-height: 1.4 !important;

  }

  .slide-bottom.is-grid .slide_pic {
    margin-top: 3.5rem !important;
  }
}

/* FINAL TEAM SECTION MOBILE OVERRIDES */
@media screen and (max-width: 991px) {
  body .team_cards {
    display: block !important;
    padding: 6rem 0 !important;
  }

  body .team-cards_row,
  body .team-cards_row.is-2,
  body .team-cards_column,
  body .team-cards_column.is-1,
  body .team-cards_column.is-2 {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }

  body .team-cards_column:empty {
    display: none !important;
  }

  body .team-card_wrapper,
  body .team-card_wrapper.is-2,
  body .team-card_wrapper.is-3,
  body .team-card_wrapper.is-4 {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto 4rem !important;
    position: relative !important;
    display: block !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    border-radius: 0 !important;
  }

  body .team-card_person-wrapper {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent) !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent) !important;
  }

  body .team-card_person-desc {
    padding: 2rem 5% !important;
  }
}

/* ==========================================================================
   CENTERED CTA SECTION — Premium Agency Closer
   ========================================================================== */

/* Section container — full viewport, flex center */
#apply.section_form {
  min-height: 100vh !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
}

@media screen and (max-width: 767px) {
  #apply.section_form {
    min-height: auto !important;
    overflow: visible !important;
  }
  #apply .form_bg-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
  }
}

/* Background image — pinned behind everything */
#apply .form_bg-wrap {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

#apply .form_bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Dark gradient overlay on top of photo */
#apply .form_bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    160deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.70) 60%,
    rgba(0, 0, 0, 0.78) 100%
  ) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  z-index: 1 !important;
}

/* Centering wrapper — sits on top of background, fills section, centers card */
.cta_centered-wrap {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

/* Glassmorphism card */
.cta_centered-card {
  background: rgba(8, 8, 8, 0.50);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 32px;
  padding: 4.5rem 4rem;
  max-width: 720px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.cta_centered-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Eyebrow pill */
.cta_eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  padding: 0.4rem 1rem;
  font-family: var(--font-body) !important;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 2rem;
}

.cta_eyebrow-dot {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}

@keyframes ctaPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

/* Main headline */
.cta_headline {
  font-family: var(--font-headline) !important;
  font-size: clamp(2.8rem, 6vw, 4.5rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
  margin: 0 0 1.5rem 0 !important;
}

.cta_headline-em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
}

/* Sub-copy */
.cta_subtext {
  font-family: var(--font-body) !important;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 2.5rem 0 !important;
}

/* Trust badges row */
.cta_badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 2.5rem;
}

.cta_badge {
  font-family: var(--font-body) !important;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
}

.cta_badge-divider {
  color: rgba(255, 255, 255, 0.2);
  font-size: 1.1rem;
}

/* Primary CTA Button */
.cta_book-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #ffffff;
  color: #0a0a0a;
  font-family: var(--font-body) !important;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 1rem 2.25rem;
  border-radius: 100px;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, gap 0.25s ease;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  margin-bottom: 2.75rem;
}

.cta_book-btn:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.45);
  gap: 0.9rem;
}

.cta_book-btn svg {
  transition: transform 0.25s ease;
}

.cta_book-btn:hover svg {
  transform: translate(2px, -2px);
}

/* Star rating strip */
.cta_rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.cta_stars {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}

.cta_rating-text {
  font-family: var(--font-body) !important;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Responsive */
@media screen and (max-width: 767px) {
  #apply.section_form {
    min-height: auto !important;
    padding: 4rem 1.25rem !important;
    overflow: visible !important;
  }
  .cta_centered-wrap {
    position: relative !important;
    inset: auto !important;
    padding: 0 !important;
    height: auto !important;
    width: 100% !important;
  }
  .cta_centered-card {
    padding: 2rem 1.5rem !important;
    border-radius: 20px !important;
    max-width: 100% !important;
  }
  .cta_eyebrow {
    margin-bottom: 1rem !important;
    font-size: 0.72rem !important;
  }
  .cta_headline {
    font-size: clamp(1.7rem, 7vw, 2.2rem) !important;
    margin-bottom: 1rem !important;
  }
  .cta_subtext {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin-bottom: 1.5rem !important;
  }
  .cta_badges {
    margin-bottom: 1.25rem !important;
    gap: 0.3rem 0.6rem !important;
    font-size: 0.75rem !important;
  }
  .cta_badge {
    font-size: 0.75rem !important;
  }
  .cta_book-btn {
    padding: 0.85rem 1.75rem !important;
    font-size: 0.92rem !important;
    margin-bottom: 1.25rem !important;
  }
  .cta_rating {
    gap: 0.4rem !important;
  }
  .cta_rating-text {
    font-size: 0.72rem !important;
  }
  .cta_br { display: none; }
}

@media screen and (max-width: 479px) {
  .cta_centered-card {
    padding: 1.75rem 1.25rem !important;
    border-radius: 18px !important;
  }
  .cta_headline {
    font-size: clamp(1.5rem, 7.5vw, 1.9rem) !important;
    margin-bottom: 0.75rem !important;
  }
  .cta_badges {
    margin-bottom: 1rem !important;
  }
  .cta_book-btn {
    width: 100% !important;
    justify-content: center !important;
    margin-bottom: 1rem !important;
  }
}

@media screen and (max-width: 991px) {
  .form_sintra-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
    padding: 4rem 1.5rem;
  }
}

/* Left Column: Sintra-style Copy */
.form_sintra-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Trustpilot Rating Row */
.form_rating-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.form_stars {
  color: #10b981; /* Premium green */
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  line-height: 1;
}

.form_rating-text {
  font-family: var(--font-body) !important;
  font-size: 0.9rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.75);
}

.form_rating-text strong {
  color: #ffffff;
  font-weight: 600;
}

.rating-divider {
  margin: 0 0.4rem;
  color: rgba(255, 255, 255, 0.2);
}

.trustpilot-brand {
  color: #10b981;
  font-weight: 600;
}

/* Sintra-style Title — isolation creates stacking context for mix-blend-mode logo */
.h2_sintra-title {
  font-family: var(--font-headline) !important;
  font-size: clamp(2.65rem, 5vw, 4.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  margin: 0 0 2.25rem 0 !important;
  letter-spacing: -0.03em !important;
  text-align: left;
  isolation: isolate;
}

/* Bullets List */
.form_bullets-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
  width: 100%;
}

.form_bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.form_bullet-check-wrap {
  flex-shrink: 0;
  margin-top: 0.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form_bullet-text {
  font-family: var(--font-body) !important;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65) !important;
  text-align: left;
}

.form_bullet-text strong {
  color: #ffffff;
  font-weight: 600;
}

/* Under-text row */
.form_notes-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  font-family: var(--font-body) !important;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
}

.form_note-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Right Column: Premium Glassmorphic Card Container */
.sintra-card {
  background: rgba(10, 10, 10, 0.55) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  padding: 3rem 2.5rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.sintra-card:hover {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 255, 255, 0.03) !important;
}

@media screen and (max-width: 479px) {
  .sintra-card {
    padding: 2.25rem 1.5rem !important;
  }
}

/* Inline Logo Styling — mix-blend-mode: screen makes the black bg transparent */
.form_logo-inline {
  height: 2.1rem;
  display: inline-block;
  vertical-align: middle;
  margin-top: -0.4rem;
  margin-left: 0.2rem;
  margin-right: 0.15rem;
  mix-blend-mode: screen;
  opacity: 0.95;
}

@media screen and (max-width: 479px) {
  .form_logo-inline {
    height: 1.65rem;
    margin-top: -0.25rem;
  }
}

/* Text & Input Field Clarity Fixes (Unified Boxed Style) */
.form_step-inputs-wrap {
  display: flex !important;
  flex-direction: column !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  gap: 0.25rem !important;
}

.form_step-input {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.95rem 1.2rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
  margin-bottom: 1.25rem !important;
  background-image: none !important;
}

.form_step-input:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background-color: rgba(255, 255, 255, 0.07) !important;
}

.form_step-input:focus {
  outline: none !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06) !important;
}

/* Schedule Slot Inputs Design Consistency */
.form_demo-slot__input,
.form_demo-slot__time-select {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.95rem 1.2rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  height: auto !important;
  line-height: 1.2 !important;
  color-scheme: dark !important;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form_demo-slot__input:hover,
.form_demo-slot__time-select:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background-color: rgba(255, 255, 255, 0.07) !important;
}

.form_demo-slot__input:focus,
.form_demo-slot__time-select:focus {
  outline: none !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06) !important;
}

/* Radio Bullet Selections Change Colors and Styles */
.form_step-bullets-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  width: 100% !important;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
}

.form_step-ratio-item {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0.85rem 1.25rem !important;
  min-height: 3.25rem !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  text-align: left !important;
}

.form_step-ratio-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-1px);
}

.form_step-ratio-item:active {
  transform: translateY(0);
}

/* Radio active states (both via CSS :has and JS class toggle) */
.form_step-ratio-item:has(input[type="radio"]:checked),
.form_step-ratio-item.is-checked {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.1) !important;
}

.form_step-ratio-item:has(input[type="radio"]:checked) .w-form-label,
.form_step-ratio-item.is-checked .w-form-label {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.form_step-ratio-item .w-form-label {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 0.95rem !important;
  font-family: var(--font-body) !important;
  transition: color 0.2s ease;
  text-align: left !important;
  margin: 0 !important;
  width: 100%;
}

/* Step progress bar */
.form_step-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.form_step-progress-dot {
  width: 28px;
  height: 3px;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.18);
  transition: background-color 0.3s ease, width 0.3s ease;
}

.form_step-progress-dot.is-active {
  background-color: #ffffff;
  width: 40px;
}

/* Placeholder colors for all text inputs */
.form_step-input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

.form_demo-slot__input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* h2_form inside the card */
.h2_form {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  margin: 0 0 0.25rem 0 !important;
}

/* Step counter badge */
.form_step-counter-wrapper {
  margin-bottom: 0.5rem;
}

.form_step-counter {
  font-family: var(--font-label) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Back button styling */
.form_step-back {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.form_step-back [data-prev="true"] {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: rgba(255, 255, 255, 0.5) !important;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s ease;
}

.form_step-back [data-prev="true"]:hover {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Step title label */
.form_step-title {
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-bottom: 0.75rem !important;
}

/* Sintra card: slightly stronger glow on hover */
.sintra-card {
  background: rgba(12, 12, 12, 0.7) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 24px !important;
  padding: 2.75rem 2.5rem !important;
  box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.35s ease, box-shadow 0.35s ease !important;
}

.sintra-card:hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 0 60px rgba(255, 255, 255, 0.04), 0 25px 60px -10px rgba(0, 0, 0, 0.65) !important;
}

/* ==========================================================================
   CASE STUDY HERO REDESIGN (AWWARDS-LEVEL DESIGN CONCEPT) - LIGHT THEME
   ========================================================================== */

body .section_services .service_slide.case-study-hero {
    height: 100vh !important;
    position: relative !important;
    background-color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body .section_services .case-study-hero .content-wrapper {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: #121212 !important;
    background-color: #ffffff !important;
    padding: 0 !important;
    transform: none !important;
}

body .section_services .case-study-hero .slide-content {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    width: 100% !important;
    inset: auto !important;
}

body .section_services .case-study-hero .slide-top {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
}

body .section_services .case-study-hero .h2_slide,
body .section_services .case-study-hero .slide-content:not(.is-black):not(.is-grey) .h2_slide {
    font-family: 'Newsreader', serif !important;
    font-size: 5.5vw !important;
    color: #121212 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    width: 100% !important;
}

body .section_services .case-study-hero .sub-label {
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: rgba(0, 0, 0, 0.55) !important;
    margin-top: 0.5rem !important;
}

body .section_services .case-study-hero .metrics-strip {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
    margin: 3rem 0 !important;
    width: 100% !important;
}

body .section_services .case-study-hero .metrics-box {
    padding: 2rem !important;
    border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    background-color: transparent !important;
}

body .section_services .case-study-hero .metrics-box:last-child {
    border-right: none !important;
}

body .section_services .case-study-hero .metric-value {
    font-family: 'Newsreader', serif !important;
    font-size: 5.5rem !important;
    line-height: 1 !important;
    color: #121212 !important;
    font-weight: 400 !important;
    margin-bottom: 0.5rem !important;
}

body .section_services .case-study-hero .metric-label {
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: rgba(0, 0, 0, 0.55) !important;
}

body .section_services .case-study-hero .story-grid {
    display: grid !important;
    grid-template-columns: 1fr 2fr 1fr !important;
    gap: 4rem !important;
    width: 100% !important;
}

body .section_services .case-study-hero .story-col {
    display: flex !important;
    flex-direction: column !important;
}

body .section_services .case-study-hero .story-col .label {
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: rgba(0, 0, 0, 0.5) !important;
    margin-bottom: 1rem !important;
}

body .section_services .case-study-hero .story-text {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    color: rgba(0, 0, 0, 0.8) !important;
}

@media (max-width: 991px) {
    body .section_services .case-study-hero .metrics-strip {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    body .section_services .case-study-hero .metrics-box {
        border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
        padding: 1.5rem !important;
    }
    body .section_services .case-study-hero .metrics-box:nth-child(2) {
        border-right: none !important;
    }
    body .section_services .case-study-hero .metrics-box:nth-child(3),
    body .section_services .case-study-hero .metrics-box:nth-child(4) {
        border-bottom: none !important;
    }
    body .section_services .case-study-hero .metric-value {
        font-size: 4rem !important;
    }
    body .section_services .case-study-hero .story-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}

/* ==========================================================================
   EDITORIAL CASE STUDY - TALL COLUMNS LAYOUT
   ========================================================================== */

body .section_services .case-study-hero .content-wrapper {
    padding: 0 !important;
    height: 100vh !important;
    width: 100vw !important;
    max-width: 100% !important;
}

body .section_services .case-study-hero .slide-content {
    height: 100% !important;
    width: 100% !important;
}

/* ============================================================
   BENTO CASE STUDY GRID
   ============================================================ */
.case-study-hero .content-wrapper {
    display: flex !important;
    align-items: stretch !important;
    height: 100% !important;
    padding: 0 !important;
}

.case-study-hero {
    background-color: #f6f6f8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;
    width: 100% !important;
    overflow: hidden !important;
}

.case-study-hero .content-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;
    width: 100% !important;
    padding: 0 !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
}

body .section_services .case-study-hero .bento-case-study.metrics-strip {
    display: grid !important;
    grid-template-columns: 1.35fr 1fr 1fr !important;
    grid-template-rows: 210px 210px 360px !important;
    gap: 18px !important;
    width: 94% !important;
    max-width: 1260px !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    background-color: transparent !important;
}

/* Generic cell base */
.bento-cell {
    border-radius: 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    background-color: #f5f5f7 !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015) !important;
    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 !important;
}

/* ---- Cell 1: Title card (top-left, spans 2 rows) ---- */
.bento-title {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
    background: linear-gradient(135deg, #181818 0%, #0a0a0a 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 2.6rem 2.2rem !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.bento-title:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.16) !important;
}

.bento-eyebrow {
    font-size: 1.05rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    color: rgba(255,255,255,0.45) !important;
    margin-bottom: 0.8rem !important;
}

body .section_services .case-study-hero .bento-title .bento-h2 {
    font-family: 'Newsreader', serif !important;
    font-size: clamp(2.4rem, 3.5vw, 3.0rem) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    margin: 0 0 1.2rem 0 !important;
    letter-spacing: -0.01em !important;
    width: auto !important;
}

body .section_services .case-study-hero .bento-title .bento-tag {
    display: inline-block !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: rgba(255,255,255,0.75) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 100px !important;
    padding: 0.22rem 0.7rem !important;
    width: fit-content !important;
    margin-top: 0.2rem !important;
}

/* ---- Metric tiles (2x2 grid in Col 2 & 3, Row 1 & 2) ---- */
.bento-metric-1 { grid-column: 2 / 3 !important; grid-row: 1 / 2 !important; }
.bento-metric-2 { grid-column: 3 / 4 !important; grid-row: 1 / 2 !important; }
.bento-metric-3 { grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; }
.bento-metric-4 { grid-column: 3 / 4 !important; grid-row: 2 / 3 !important; }

body .section_services .case-study-hero .bento-metric {
    background-color: #f5f5f7 !important;
    border: none !important;
    padding: 1.6rem 1.6rem !important;
    text-align: left !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    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 !important;
}

body .section_services .case-study-hero .bento-metric:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
    background-color: #ffffff !important;
    border: none !important;
}

.metric-content-wrapper {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    width: 100% !important;
    pointer-events: none !important;
}

.metric-bg-container {
    position: absolute !important;
    bottom: -5px !important;
    right: -5px !important;
    width: 144px !important;
    height: 96px !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 0.65 !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform: translate(0, 0) scale(1) !important;
}

.bento-metric:hover .metric-bg-container {
    opacity: 1 !important;
    transform: translate(-5px, -5px) scale(1.08) !important;
}

.metric-bg-svg {
    width: 100% !important;
    height: 100% !important;
}

/* Metric 1 Animation */
.path-wave-active {
    transition: stroke-dashoffset 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.bento-metric-1:hover .path-wave-active {
    stroke-dashoffset: 0 !important;
}

/* Metric 2 Animation */
.circle-pulse {
    transition: transform 0.4s ease, opacity 0.4s ease !important;
    transform-origin: 95px 40px !important;
}
.bento-metric-2:hover .circle-pulse {
    animation: pulseRipple 1.2s cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
}
@keyframes pulseRipple {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(2.5); opacity: 0.5; }
    100% { transform: scale(4); opacity: 0; }
}

/* Metric 3 Animation */
.bar-grow {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.bg-bar-1 { transform-origin: 55px 70px !important; }
.bg-bar-2 { transform-origin: 71px 70px !important; }
.bg-bar-3 { transform-origin: 87px 70px !important; }
.bg-bar-4 { transform-origin: 103px 70px !important; }

.bento-metric-3:hover .bar-grow {
    transform: scaleY(1.15) !important;
}
.bento-metric-3:hover .bg-bar-1 { transition-delay: 0.05s !important; }
.bento-metric-3:hover .bg-bar-2 { transition-delay: 0.1s !important; }
.bento-metric-3:hover .bg-bar-3 { transition-delay: 0.15s !important; }
.bento-metric-3:hover .bg-bar-4 { transition-delay: 0.2s !important; }

/* Metric 4 Animation */
.path-roi-active {
    transition: stroke-dashoffset 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.bento-metric-4:hover .path-roi-active {
    stroke-dashoffset: 0 !important;
}

body .section_services .case-study-hero .bento-num {
    font-family: 'Newsreader', serif !important;
    font-size: clamp(2.2rem, 3.2vw, 2.8rem) !important;
    line-height: 1 !important;
    color: #121212 !important;
    font-weight: 400 !important;
    letter-spacing: -0.03em !important;
    margin: 0 !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bento-metric:hover .bento-num {
    transform: scale(1.02) !important;
}

.bento-metric-label {
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: rgba(18,18,18,0.45) !important;
    font-weight: 500 !important;
}

/* ---- Cell 6: Metadata (bottom-left, row 3) ---- */
.bento-meta {
    grid-column: 1 / 2 !important;
    grid-row: 3 / 4 !important;
    background-color: #f5f5f7 !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 2.2rem 2rem !important;
}

.bento-meta:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    background-color: #ffffff !important;
    border: none !important;
}

.bento-meta-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

.bento-meta-key {
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    color: rgba(18,18,18,0.38) !important;
    margin: 0 !important;
    font-weight: 600 !important;
}

.bento-meta-val {
    font-size: 1.15rem !important;
    line-height: 1.45 !important;
    color: rgba(18,18,18,0.72) !important;
    margin: 0 !important;
}

.bento-meta-divider {
    height: 1px !important;
    background-color: rgba(0,0,0,0.06) !important;
    width: 100% !important;
    margin: 0.2rem 0 !important;
}

/* ---- Cell 7: Showcase (bottom-right, spans 2 cols, row 3) ---- */
.bento-showcase {
    grid-column: 2 / 4 !important;
    grid-row: 3 / 4 !important;
    background-color: #f5f5f7 !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01) !important;
    position: relative !important;
}

.bento-showcase:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    background-color: #ffffff !important;
    border: none !important;
}

/* Showcase dynamic transitions */
.bento-showcase .showcase-graphic {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    opacity: 0 !important;
    transform: scale(0.95) !important;
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 2.2rem 2.6rem !important;
    gap: 2rem !important;
}

.showcase-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: left !important;
    flex: 1 !important;
    max-width: 60% !important;
}

.showcase-eyebrow {
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    color: rgba(18, 18, 18, 0.4) !important;
    margin-bottom: 0.4rem !important;
    font-weight: 600 !important;
}

.showcase-title {
    font-family: 'Newsreader', serif !important;
    font-size: 1.45rem !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: #121212 !important;
    margin: 0 0 0.4rem 0 !important;
    line-height: 1.1 !important;
}

.showcase-val {
    font-family: 'Newsreader', serif !important;
    font-size: 2rem !important;
    font-weight: 500 !important;
    color: #121212 !important;
    margin-bottom: 0.6rem !important;
}

.showcase-desc {
    font-size: 1.1rem !important;
    line-height: 1.45 !important;
    color: rgba(18, 18, 18, 0.65) !important;
    margin: 0 !important;
}

.showcase-svg-wrapper {
    width: 180px !important;
    height: 180px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.showcase-svg-wrapper svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 180px !important;
    max-height: 180px !important;
}

/* Show Outreach Volume by default */
.bento-showcase .showcase-graphic[data-metric="0"] {
    opacity: 0.95 !important;
    transform: scale(1) !important;
}

/* Hover-sensitive states using modern :has() */
.bento-case-study:has(.bento-metric-1:hover) .bento-showcase .showcase-graphic { opacity: 0 !important; transform: scale(0.95) !important; }
.bento-case-study:has(.bento-metric-1:hover) .bento-showcase .showcase-graphic[data-metric="0"] { opacity: 0.95 !important; transform: scale(1) !important; }

.bento-case-study:has(.bento-metric-2:hover) .bento-showcase .showcase-graphic { opacity: 0 !important; transform: scale(0.95) !important; }
.bento-case-study:has(.bento-metric-2:hover) .bento-showcase .showcase-graphic[data-metric="1"] { opacity: 0.95 !important; transform: scale(1) !important; }

.bento-case-study:has(.bento-metric-3:hover) .bento-showcase .showcase-graphic { opacity: 0 !important; transform: scale(0.95) !important; }
.bento-case-study:has(.bento-metric-3:hover) .bento-showcase .showcase-graphic[data-metric="2"] { opacity: 0.95 !important; transform: scale(1) !important; }

.bento-case-study:has(.bento-metric-4:hover) .bento-showcase .showcase-graphic { opacity: 0 !important; transform: scale(0.95) !important; }
.bento-case-study:has(.bento-metric-4:hover) .bento-showcase .showcase-graphic[data-metric="3"] { opacity: 0.95 !important; transform: scale(1) !important; }

/* ============================================================
   SVG ANIMATION (shared with .metrics-strip)
   ============================================================ */
@keyframes drawPath {
    to { stroke-dashoffset: 0; }
}

body .section_services .metrics-strip.animate .gauge-ring-1 {
    animation: drawPath 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    stroke-dashoffset: 55 !important;
}
body .section_services .metrics-strip.animate .gauge-ring-2 {
    animation: drawPath 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
    stroke-dashoffset: 80 !important;
}
body .section_services .metrics-strip.animate .pie-segment-1 {
    animation: drawPath 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    stroke-dashoffset: 75 !important;
}
body .section_services .metrics-strip.animate .pie-segment-2 {
    animation: drawPath 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
    stroke-dashoffset: 160 !important;
}
body .section_services .metrics-strip.animate .pie-segment-3 {
    animation: drawPath 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
    stroke-dashoffset: 200 !important;
}
body .section_services .metrics-strip.animate .chrono-fill {
    animation: drawPath 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    stroke-dashoffset: 35 !important;
}
body .section_services .metrics-strip.animate .clover-ring-1 {
    animation: drawPath 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    stroke-dashoffset: 25 !important;
}
body .section_services .metrics-strip.animate .clover-ring-2 {
    animation: drawPath 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
    stroke-dashoffset: 45 !important;
}
body .section_services .metrics-strip.animate .clover-ring-3 {
    animation: drawPath 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
    stroke-dashoffset: 65 !important;
}

/* Initial hidden states */
body .section_services .metrics-strip:not(.animate) .gauge-ring-1  { stroke-dashoffset: 238.8; }
body .section_services .metrics-strip:not(.animate) .gauge-ring-2  { stroke-dashoffset: 175.9; }
body .section_services .metrics-strip:not(.animate) .pie-segment-1,
body .section_services .metrics-strip:not(.animate) .pie-segment-2,
body .section_services .metrics-strip:not(.animate) .pie-segment-3 { stroke-dashoffset: 226.2; }
body .section_services .metrics-strip:not(.animate) .chrono-fill   { stroke-dashoffset: 138.2; }
body .section_services .metrics-strip:not(.animate) .clover-ring-1,
body .section_services .metrics-strip:not(.animate) .clover-ring-2,
body .section_services .metrics-strip:not(.animate) .clover-ring-3 { stroke-dashoffset: 125.7; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
.section_services-top {
    overflow: hidden !important;
}


/* ============================================================
   BENTO THEME MODIFIERS (Dark and Grey Variants)
   ============================================================ */

/* --- Dark Theme (.is-dark) --- */
body .section_services .case-study-hero.is-dark .content-wrapper {
    background-color: #000000 !important;
}

body .section_services .case-study-hero.is-dark .bento-title {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f7 100%) !important;
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.02) !important;
}

body .section_services .case-study-hero.is-dark .bento-title .bento-h2 {
    color: #121212 !important;
}

body .section_services .case-study-hero.is-dark .bento-title .bento-eyebrow {
    color: rgba(18, 18, 18, 0.45) !important;
}

body .section_services .case-study-hero.is-dark .bento-title .bento-tag {
    color: rgba(18, 18, 18, 0.75) !important;
    border-color: rgba(18, 18, 18, 0.2) !important;
}

body .section_services .case-study-hero.is-dark .bento-cell {
    background-color: #1c1c1e !important;
}

body .section_services .case-study-hero.is-dark .bento-metric {
    background-color: #1c1c1e !important;
}

body .section_services .case-study-hero.is-dark .bento-meta {
    background-color: #1c1c1e !important;
}

body .section_services .case-study-hero.is-dark .bento-showcase {
    background-color: #1c1c1e !important;
}

body .section_services .case-study-hero.is-dark .bento-metric:hover {
    background-color: #2c2c2e !important;
}

body .section_services .case-study-hero.is-dark .bento-meta:hover {
    background-color: #2c2c2e !important;
}

body .section_services .case-study-hero.is-dark .bento-showcase:hover {
    background-color: #2c2c2e !important;
}

body .section_services .case-study-hero.is-dark .bento-num {
    color: #ffffff !important;
}

body .section_services .case-study-hero.is-dark .bento-metric-label {
    color: rgba(255, 255, 255, 0.5) !important;
}

body .section_services .case-study-hero.is-dark .bento-meta-key {
    color: rgba(255, 255, 255, 0.4) !important;
}

body .section_services .case-study-hero.is-dark .bento-meta-val {
    color: rgba(255, 255, 255, 0.8) !important;
}

body .section_services .case-study-hero.is-dark .bento-meta-divider {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

body .section_services .case-study-hero.is-dark .showcase-eyebrow {
    color: rgba(255, 255, 255, 0.45) !important;
}

body .section_services .case-study-hero.is-dark .showcase-title {
    color: #ffffff !important;
}

body .section_services .case-study-hero.is-dark .showcase-val {
    color: #ffffff !important;
}

body .section_services .case-study-hero.is-dark .showcase-desc {
    color: rgba(255, 255, 255, 0.7) !important;
}

body .section_services .case-study-hero.is-dark .metric-bg-container {
    opacity: 0.85 !important;
}

body .section_services .case-study-hero.is-dark .path-wave-active,
body .section_services .case-study-hero.is-dark .path-roi-active,
body .section_services .case-study-hero.is-dark .circle-pulse,
body .section_services .case-study-hero.is-dark .bar-grow,
body .section_services .case-study-hero.is-dark .gauge-ring-1,
body .section_services .case-study-hero.is-dark .gauge-ring-2,
body .section_services .case-study-hero.is-dark .pie-segment-1,
body .section_services .case-study-hero.is-dark .pie-segment-2,
body .section_services .case-study-hero.is-dark .pie-segment-3,
body .section_services .case-study-hero.is-dark .chrono-fill,
body .section_services .case-study-hero.is-dark .clover-ring-1,
body .section_services .case-study-hero.is-dark .clover-ring-2,
body .section_services .case-study-hero.is-dark .clover-ring-3 {
    stroke: #ffffff !important;
}

body .section_services .case-study-hero.is-dark .circle-pulse,
body .section_services .case-study-hero.is-dark .bar-grow {
    fill: #ffffff !important;
}

body .section_services .case-study-hero.is-dark .metric-bg-svg path:not([class*="-active"]),
body .section_services .case-study-hero.is-dark .metric-bg-svg circle:not(.circle-pulse),
body .section_services .case-study-hero.is-dark .metric-bg-svg rect:not(.bar-grow),
body .section_services .case-study-hero.is-dark .metric-bg-svg line {
    stroke: rgba(255, 255, 255, 0.12) !important;
}

body .section_services .case-study-hero.is-dark .showcase-svg-wrapper svg circle:not([class*="-ring"]):not([class*="-fill"]):not([class*="-segment"]) {
    stroke: rgba(255, 255, 255, 0.1) !important;
}

/* --- Grey Theme (.is-grey) --- */
body .section_services .case-study-hero.is-grey .content-wrapper {
    background-color: #f5f5f7 !important;
}

body .section_services .case-study-hero.is-grey .bento-cell {
    background-color: #ffffff !important;
}

body .section_services .case-study-hero.is-grey .bento-metric {
    background-color: #ffffff !important;
}

body .section_services .case-study-hero.is-grey .bento-meta {
    background-color: #ffffff !important;
}

body .section_services .case-study-hero.is-grey .bento-showcase {
    background-color: #ffffff !important;
}

body .section_services .case-study-hero.is-grey .bento-metric:hover {
    background-color: #e8e8ec !important;
}

body .section_services .case-study-hero.is-grey .bento-meta:hover {
    background-color: #e8e8ec !important;
}

body .section_services .case-study-hero.is-grey .bento-showcase:hover {
    background-color: #e8e8ec !important;
}

/* ============================================================
   BENTO HORIZONTAL CAROUSEL — 3D CARDS SWEEP APPROACH
   Section is 400vh tall. Sticky panel locks in viewport.
   Slides are absolutely stacked and animated in 3D by GSAP.
   ============================================================ */
body .section_services {
    position: relative !important;
    width: 100% !important;
    height: 400vh !important;
    overflow: visible !important;
    background-color: #ffffff !important;
    padding: 0 !important;
}

body .services-sticky-panel {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    width: 100% !important;
    overflow: hidden !important;
    perspective: 1500px !important; /* Enable 3D depth */
}

body .services-slides-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    transform-style: preserve-3d !important;
}

body .section_services .service_slide.case-study-hero {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    will-change: transform, opacity !important;
    transform-style: preserve-3d !important;
    box-shadow: -15px 0 40px rgba(0, 0, 0, 0.3) !important;
}

body .section_services .case-study-hero .content-wrapper {
    width: 100% !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    background-color: #ffffff !important;
    padding: 0 !important;
}

/* --- Visual Storyboard Timeline CSS (Vertical left-accent borders - Monochrome & Large Readable Text) --- */
.storyboard-timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.2rem !important;
    padding: 0.2rem 0 !important;
    position: relative !important;
    width: 100% !important;
}

.storyboard-step {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
    padding-left: 1rem !important;
    border-left: 2px solid rgba(18, 18, 18, 0.15) !important;
    position: relative !important;
    transition: border-left-color 0.2s ease, border-left-width 0.2s ease, padding-left 0.2s ease !important;
}

body .section_services .case-study-hero.is-dark .storyboard-step {
    border-left-color: rgba(255, 255, 255, 0.25) !important;
}

.storyboard-step:hover {
    border-left-color: #121212 !important;
    border-left-width: 3px !important;
    padding-left: 0.95rem !important;
}

body .section_services .case-study-hero.is-dark .storyboard-step:hover {
    border-left-color: #ffffff !important;
}

.storyboard-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
}

.storyboard-label {
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.2 !important;
    margin-bottom: 0.05rem !important;
    color: rgba(18, 18, 18, 0.4) !important;
}

body .section_services .case-study-hero.is-dark .storyboard-label {
    color: rgba(255, 255, 255, 0.45) !important;
}

.storyboard-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #121212 !important;
    margin: 0 !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.25 !important;
    letter-spacing: -0.015em !important;
}

body .section_services .case-study-hero.is-dark .storyboard-title {
    color: #ffffff !important;
}

.storyboard-desc {
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    color: rgba(18, 18, 18, 0.65) !important;
    margin: 0 !important;
    font-family: 'Inter', sans-serif !important;
}

body .section_services .case-study-hero.is-dark .storyboard-desc {
    color: rgba(255, 255, 255, 0.7) !important;
}

.bento-meta {
    overflow-y: auto !important;
}

.bento-showcase .showcase-graphic {
    padding: 1.5rem 1.8rem !important;
    gap: 1.2rem !important;
}

/* Center and bold bento metrics cards, remove graphic */
body .section_services .case-study-hero .bento-metric {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

body .section_services .case-study-hero .metric-content-wrapper {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.75rem !important;
}

body .section_services .case-study-hero .bento-num {
    font-weight: 700 !important;
}

body .section_services .case-study-hero .bento-metric-label {
    font-weight: 700 !important;
    color: rgba(18, 18, 18, 0.75) !important;
}

body .section_services .case-study-hero.is-dark .bento-metric-label {
    color: rgba(255, 255, 255, 0.75) !important;
}

body .section_services .case-study-hero .metric-bg-container {
    display: none !important;
}

/* ============================================================
   MOBILE — Card Flip Transition
   ============================================================ */
@media (max-width: 991px) {
    body .section_services .service_slide.case-study-hero {
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }
    body .services-slides-wrapper {
        perspective: 1200px !important;
    }
}

/* ============================================================
   RESPONSIVE MEDIA QUERIES (Moved to bottom for override stability)
   ============================================================ */
@media (max-width: 1199px) {
    body .section_services .case-study-hero .bento-case-study.metrics-strip {
        gap: 14px !important;
        padding: 20px !important;
        width: 94% !important;
        max-width: 1120px !important;
        grid-template-rows: 180px 180px 310px !important;
    }
    body .section_services .case-study-hero .bento-title .bento-h2 { font-size: 2.2rem !important; }
}

@media (max-width: 991px) {
    body .section_services .case-study-hero .bento-case-study.metrics-strip {
        grid-template-columns: 1.35fr 1fr 1fr !important;
        grid-template-rows: 160px 160px 280px !important;
        gap: 12px !important;
        padding: 1.25rem !important;
        width: 96% !important;
        max-width: 720px !important;
    }
    .bento-title {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 3 !important;
        padding: 1.5rem 1.25rem !important;
    }
    body .section_services .case-study-hero .bento-title .bento-h2 {
        font-size: 1.55rem !important;
    }
    .bento-metric-1 { grid-column: 2 / 3 !important; grid-row: 1 / 2 !important; }
    .bento-metric-2 { grid-column: 3 / 4 !important; grid-row: 1 / 2 !important; }
    .bento-metric-3 { grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; }
    .bento-metric-4 { grid-column: 3 / 4 !important; grid-row: 2 / 3 !important; }
    
    body .section_services .case-study-hero .bento-metric {
        padding: 1.25rem !important;
    }
    body .section_services .case-study-hero .bento-num {
        font-size: 2.2rem !important;
    }
    .bento-metric-label {
        font-size: 0.8rem !important;
    }
    .metric-bg-container {
        width: 90px !important;
        height: 60px !important;
    }
    .bento-meta {
        grid-column: 1 / 2 !important;
        grid-row: 3 / 4 !important;
        padding: 1.5rem 1.25rem !important;
    }
    .bento-meta-key {
        font-size: 0.7rem !important;
    }
    .bento-meta-val {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    .bento-showcase {
        grid-column: 2 / 4 !important;
        grid-row: 3 / 4 !important;
    }
    .bento-showcase .showcase-graphic {
        padding: 1.25rem !important;
        gap: 1rem !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .bento-showcase .showcase-graphic .showcase-text {
        max-width: 100% !important;
        text-align: center !important;
        align-items: center !important;
    }
    .showcase-text {
        max-width: 65% !important;
    }
    .showcase-title {
        font-size: 1.2rem !important;
    }
    .showcase-val {
        font-size: 1.6rem !important;
    }
    .showcase-desc {
        font-size: 0.8rem !important;
    }
    .showcase-svg-wrapper {
        width: 100px !important;
        height: 100px !important;
    }
    .showcase-svg-wrapper svg {
        max-width: 100px !important;
        max-height: 100px !important;
    }
    body .section_services .case-study-hero .storyboard-timeline {
        gap: 0.8rem !important;
    }
    body .section_services .case-study-hero .storyboard-step {
        padding-left: 0.8rem !important;
        gap: 0.2rem !important;
    }
    body .section_services .case-study-hero .storyboard-label {
        font-size: 0.6rem !important;
    }
    body .section_services .case-study-hero .storyboard-title {
        font-size: 0.8rem !important;
    }
    body .section_services .case-study-hero .storyboard-desc {
        font-size: 0.72rem !important;
    }
}

@media (max-width: 767px) {
    body .section_services .case-study-hero .bento-case-study.metrics-strip {
        max-width: 540px !important;
        grid-template-columns: 1.2fr 1fr 1fr !important;
        grid-template-rows: 120px 120px 270px !important;
        gap: 10px !important;
        padding: 0.75rem !important;
    }
    .bento-title {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 3 !important;
        padding: 1.2rem 1rem !important;
    }
    body .section_services .case-study-hero .bento-title .bento-h2 {
        font-size: 1.35rem !important;
    }
    body .section_services .case-study-hero .bento-num {
        font-size: 1.85rem !important;
    }
    .bento-metric-label {
        font-size: 0.72rem !important;
    }
    .bento-metric-1 { grid-column: 2 / 3 !important; grid-row: 1 / 2 !important; }
    .bento-metric-2 { grid-column: 3 / 4 !important; grid-row: 1 / 2 !important; }
    .bento-metric-3 { grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; }
    .bento-metric-4 { grid-column: 3 / 4 !important; grid-row: 2 / 3 !important; }
    
    .bento-showcase {
        grid-column: 2 / 4 !important;
        grid-row: 3 / 4 !important;
    }
    .bento-showcase .showcase-graphic {
        padding: 1rem 0.8rem !important;
        gap: 0.75rem !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .bento-showcase .showcase-graphic .showcase-text {
        max-width: 100% !important;
        text-align: center !important;
        align-items: center !important;
    }
    .bento-meta {
        grid-column: 1 / 2 !important;
        grid-row: 3 / 4 !important;
        padding: 1.2rem 1rem !important;
        overflow-y: auto !important;
    }
    .showcase-text {
        max-width: 100% !important;
    }
    .showcase-title {
        font-size: 1.05rem !important;
    }
    .showcase-val {
        font-size: 1.35rem !important;
    }
    .showcase-desc {
        display: none !important;
    }
    .showcase-svg-wrapper {
        width: 70px !important;
        height: 70px !important;
    }
    .showcase-svg-wrapper svg {
        max-width: 70px !important;
        max-height: 70px !important;
    }
    body .section_services .case-study-hero .storyboard-timeline {
        gap: 0.6rem !important;
    }
    body .section_services .case-study-hero .storyboard-step {
        padding-left: 0.6rem !important;
        gap: 0.15rem !important;
    }
    body .section_services .case-study-hero .storyboard-label {
        font-size: 0.55rem !important;
    }
    body .section_services .case-study-hero .storyboard-title {
        font-size: 0.75rem !important;
    }
    body .section_services .case-study-hero .storyboard-desc {
        font-size: 0.68rem !important;
    }
}

@media (max-width: 575px) {
    body .section_services .case-study-hero .bento-case-study.metrics-strip {
        grid-template-columns: 1.2fr 1fr 1fr !important;
        grid-template-rows: 90px 90px 240px !important;
        gap: 8px !important;
        padding: 0.6rem !important;
        width: 98% !important;
        max-width: 100% !important;
    }
    .bento-title {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 3 !important;
        padding: 0.85rem 0.75rem !important;
    }
    body .section_services .case-study-hero .bento-title .bento-h2 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }
    .bento-eyebrow {
        font-size: 0.62rem !important;
        margin-bottom: 0.35rem !important;
    }
    body .section_services .case-study-hero .bento-title .bento-tag {
        font-size: 0.6rem !important;
        padding: 0.2rem 0.5rem !important;
    }
    .bento-metric-1 { grid-column: 2 / 3 !important; grid-row: 1 / 2 !important; }
    .bento-metric-2 { grid-column: 3 / 4 !important; grid-row: 1 / 2 !important; }
    .bento-metric-3 { grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; }
    .bento-metric-4 { grid-column: 3 / 4 !important; grid-row: 2 / 3 !important; }

    body .section_services .case-study-hero .bento-metric {
        padding: 0.85rem 0.7rem !important;
    }
    body .section_services .case-study-hero .bento-num {
        font-size: 1.45rem !important;
    }
    .bento-metric-label {
        font-size: 0.6rem !important;
        letter-spacing: 0.07em !important;
    }
    .metric-bg-container {
        width: 55px !important;
        height: 38px !important;
        bottom: -2px !important;
        right: -2px !important;
    }
    .bento-meta {
        grid-column: 1 / 2 !important;
        grid-row: 3 / 4 !important;
        padding: 0.85rem 0.75rem !important;
        overflow-y: auto !important;
    }
    .bento-meta-key {
        font-size: 0.62rem !important;
    }
    .bento-meta-val {
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
    }
    .bento-meta-divider {
        margin: 0.2rem 0 !important;
    }
    .bento-showcase {
        grid-column: 2 / 4 !important;
        grid-row: 3 / 4 !important;
    }
    .bento-showcase .showcase-graphic {
        padding: 0.85rem 0.75rem !important;
        gap: 0.55rem !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .showcase-text {
        max-width: 100% !important;
        text-align: center !important;
        align-items: center !important;
    }
    .showcase-eyebrow {
        font-size: 0.6rem !important;
        margin-bottom: 0.15rem !important;
    }
    .showcase-title {
        font-size: 0.78rem !important;
        margin-bottom: 0.1rem !important;
    }
    .showcase-val {
        font-size: 1.05rem !important;
        margin-bottom: 0.1rem !important;
    }
    .showcase-desc {
        display: none !important;
    }
    .showcase-svg-wrapper {
        width: 60px !important;
        height: 60px !important;
        flex-shrink: 0 !important;
    }
    .showcase-svg-wrapper svg {
        max-width: 60px !important;
        max-height: 60px !important;
    }
    body .section_services .case-study-hero .storyboard-timeline {
        gap: 0.4rem !important;
    }
    body .section_services .case-study-hero .storyboard-step {
        padding-left: 0.5rem !important;
        gap: 0.08rem !important;
    }
    body .section_services .case-study-hero .storyboard-label {
        font-size: 0.5rem !important;
    }
    body .section_services .case-study-hero .storyboard-title {
        font-size: 0.68rem !important;
        font-weight: 700 !important;
    }
    body .section_services .case-study-hero .storyboard-desc {
        font-size: 0.6rem !important;
        line-height: 1.3 !important;
    }
}