/* Furniture Corp. content fit only. The layout and animation system come directly
   from the approved ClinicSoftware.ai homepage template. */
.navbar_brand {
  width: min(300px, 31vw) !important;
}

.navbar_logo {
  width: 100% !important;
  height: auto !important;
  max-height: 48px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.cs-hero-media {
  object-fit: cover !important;
  object-position: center 52% !important;
}

/* Let the approved hero artwork sit directly on the page background. */
.cs-service-hero .cs-hero-frame.cs-media-graphic {
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.cs-service-hero .cs-hero-frame.cs-media-graphic .cs-hero-media {
  border-radius: 0 !important;
}

.cs-hero-card-border {
  position: absolute;
  width: 45.5%;
  height: 45.1%;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  pointer-events: none;
}

.cs-hero-card-border.is-top-left { left: 3.3%; top: 3.5%; }
.cs-hero-card-border.is-top-right { left: 50.8%; top: 3.5%; }
.cs-hero-card-border.is-bottom-left { left: 3.3%; top: 51.4%; }
.cs-hero-card-border.is-bottom-right { left: 50.8%; top: 51.4%; }

@media (min-width: 992px) {
  .cs-service-hero .cs-hero-frame.cs-media-graphic {
    transform: scale(1.06);
    transform-origin: center;
  }
}

.cs-specialty-screenshots .client-logo {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 4px 18px rgba(115, 86, 186, 0.12) !important;
  border: 1px solid rgba(115, 86, 186, 0.08) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.cs-specialty-screenshots .client-logo-img {
  object-fit: cover !important;
  object-position: center !important;
}

/* Floating furniture sofas: 100% transparent PNGs with no card box, no border, no background */
.cs-specialty-screenshots .client-logo.is-furniture,
.cs-specialty-screenshots .client-logo:has(.client-logo-img[src*="assets/1.png"]),
.cs-specialty-screenshots .client-logo:has(.client-logo-img[src*="assets/2.png"]),
.cs-specialty-screenshots .client-logo:has(.client-logo-img[src*="assets/3.png"]),
.cs-specialty-screenshots .client-logo:has(.client-logo-img[src*="assets/4.png"]),
.cs-specialty-screenshots .client-logo:has(.client-logo-img[src*="assets/5.png"]),
.cs-specialty-screenshots .client-logo:has(.client-logo-img[src*="assets/6.png"]),
.cs-specialty-screenshots .client-logo:has(.client-logo-img[src*="assets/7.png"]),
.cs-specialty-screenshots .client-logo:has(.client-logo-img[src*="assets/8.png"]) {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.cs-specialty-screenshots .client-logo.is-furniture .client-logo-img,
.cs-specialty-screenshots .client-logo-img[src*="assets/1.png"],
.cs-specialty-screenshots .client-logo-img[src*="assets/2.png"],
.cs-specialty-screenshots .client-logo-img[src*="assets/3.png"],
.cs-specialty-screenshots .client-logo-img[src*="assets/4.png"],
.cs-specialty-screenshots .client-logo-img[src*="assets/5.png"],
.cs-specialty-screenshots .client-logo-img[src*="assets/6.png"],
.cs-specialty-screenshots .client-logo-img[src*="assets/7.png"],
.cs-specialty-screenshots .client-logo-img[src*="assets/8.png"] {
  object-fit: contain !important;
  object-position: center !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 10px 18px rgba(35, 20, 60, 0.12)) !important;
  transform: scale(1.06);
}

.home-product-image {
  object-fit: cover !important;
  object-position: center !important;
}

/* The template applies contain to this showcase class; fill the framed box. */
.home-product-image.cs-nexus-showcase {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.cs-pure-logo-img {
  max-width: 142px !important;
  max-height: 62px !important;
  object-fit: contain !important;
  filter: grayscale(1);
}

.cta-img {
  object-fit: cover !important;
  object-position: center !important;
}

.cs-simple-footer img {
  width: min(330px, 42vw) !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 767px) {
  .navbar_brand {
    width: min(225px, 66vw) !important;
  }

  .navbar_logo {
    max-height: 40px !important;
  }

  .cs-simple-footer img {
    width: min(290px, 82vw) !important;
  }
}

/* --- Client review enhancements (spacing & showcase framing) --- */
/* 1. Eliminate excessive vertical whitespace around the left-side text in the sticky showcase */
.home-products-content {
  grid-row-gap: 5rem !important;
}

.home-product-description.is-first {
  margin-top: 1.5rem !important;
}

.home-product-description.is-last {
  margin-bottom: 3.5rem !important;
}

.products-section {
  grid-row-gap: 3.5rem !important;
}

.home-product-description {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

/* 2. Hero copy vertical rhythm & balance */
.cs-service-hero {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

.cs-hero-copy {
  padding: 8px 0 !important;
}

.cs-hero-title {
  margin-bottom: 18px !important;
}

.cs-hero-intro {
  margin-bottom: 24px !important;
}

/* 3. Ensure realistic website mockups show header and top navigation clearly */
.home-product-image.cs-nexus-showcase {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 3/2 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}

.product-image-wrap {
  width: 100% !important;
  aspect-ratio: 3/2 !important;
  overflow: hidden !important;
}

/* 4. Hero Feature Highlights */

.cs-hero-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 24px 0;
}

.cs-hero-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.96rem;
  font-weight: 550;
  color: #30136b;
}

.cs-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(115, 86, 186, 0.14);
  color: #7356ba;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* Webflow focuses hash targets after smooth scrolling; keep the section unboxed. */
.home-product-description[tabindex]:focus,
.home-product-description[tabindex]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}