/* =========================
   HOME ONLY
   ========================= */

/* Prevent seam line under sticky header:
   pull first band up by 1px so gradients “kiss” the header */
.page-home .band-hero {
  margin-top: -1px;
}

/* Homepage hero wave motif (behind hero content) */
.page-home .band-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  top: 0;
  bottom: 0;
  opacity: .18;
  pointer-events: none;
  z-index: 0;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='600' viewBox='0 0 1400 600'%3E%3Cpath d='M0 380 C 210 330 420 430 630 380 C 840 330 1050 430 1400 380' fill='none' stroke='%230f5b7a' stroke-opacity='0.22' stroke-width='2'/%3E%3Cpath d='M0 440 C 210 390 420 490 630 440 C 840 390 1050 490 1400 440' fill='none' stroke='%230f5b7a' stroke-opacity='0.16' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 65%;
  background-size: 1400px auto;
}

/* Ensure homepage hero cards sit above wave */
.page-home .band-hero .hero-split,
.page-home .band-hero .hero-copy-card,
.page-home .band-hero .hero-aside {
  position: relative;
  z-index: 3;
}

/* Hero split layout (your home markup uses .hero-split) */
.page-home .hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

@media (min-width: 860px) {
  .page-home .hero-split {
    grid-template-columns: 1.2fr .9fr;
    gap: 22px;
  }
}

/* Safety: prevent overflow weirdness */
.page-home .hero-copy-card,
.page-home .hero-aside {
  min-width: 0;
}

/* Badge + reassure (home only) */
.page-home .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border);
  font-weight: 800;
  color: rgba(11, 18, 32, .70);
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}

.page-home .hero-reassure {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(191, 232, 234, .22);
  border: 1px solid rgba(15, 91, 122, .12);
}

/* If any legacy .hero background exists, kill it on home */
.page-home .hero {
  background: transparent !important;
}

/* Home page split image panels */
.split-media {
  min-height: 280px;
  border-radius: 28px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

/* Overlay — reduce significantly so PNGs don’t look washed out */
.split-media::before {
  content: "";
  position: absolute;
  inset: 0;

  /* was 0.15 -> 0.30 (too strong) */
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.00),
      rgba(255, 255, 255, 0.08));
  z-index: 1;
}

/* Assign images by section */
.band:not(.band-mist) .split-media {
  background-image: url("/assets/img/home/why-sunny-cleans.png");
}

.band-mist .split-media {
  background-image: url("/assets/img/home/how-it-works.png");
}

/* Responsive tuning */
@media (min-width: 960px) {
  .split-media {
    min-height: 360px;
  }
}

@media (max-width: 720px) {
  .split-media {
    min-height: 200px;
    margin-top: 16px;
  }
}

/* =========================
   Home audiences (final v2)
   ========================= */

/* Layout */
.page-home .home-audiences-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

/* Free-text look (no card styling) */
.page-home .home-audiences-grid > .audience{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
}

.page-home .home-audiences-grid > .audience > *:first-child{ margin-top: 0; }
.page-home .home-audiences-grid > .audience > *:last-child{ margin-bottom: 0; }

/* Desktop: 2 columns + subtle divider + tighter spacing */
@media (min-width: 860px){
  .page-home .home-audiences-grid{
    grid-template-columns: 1fr 1fr;
    gap: 0; /* we control spacing with padding + divider */
    position: relative;

    /* Divider line drawn as a background so it never “disappears” */
    background-image: linear-gradient(
      to right,
      transparent calc(50% - 0.5px),
      rgba(11,18,32,.10) calc(50% - 0.5px),
      rgba(11,18,32,.10) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  /* Tighter internal gutter */
  .page-home .home-audiences-grid > .audience{
    padding: 0 18px;
  }

  /* Keep outer edges flush */
  .page-home .home-audiences-grid > .audience:first-child{ padding-left: 0; }
  .page-home .home-audiences-grid > .audience:nth-child(2){ padding-right: 0; }
}

/* Mobile: stack + horizontal divider */
@media (max-width: 859px){
  .page-home .home-audiences-grid > .audience:nth-child(2){
    border-top: 1px solid rgba(11,18,32,.10);
    padding-top: 16px;
    margin-top: 16px;
  }
}