/* Botanical image layers. Portraits and editable page content stay separate. */
:root {
  --sb-floral-light: url("images/floral-light-v2-1920.webp");
  --sb-floral-cta: url("images/floral-cta-v2-1920.webp");
}

.sb-main .sb-hero {
  background-color: var(--sb-rose-100);
  background-image: var(--sb-floral-light);
  background-size: cover;
  background-position: center;
}
.sb-main .sb-hero::before {
  inset: 0;
  width: auto;
  height: auto;
  z-index: 0;
  border-radius: 0;
  transform: none;
  background: linear-gradient(90deg, rgb(253 246 244 / 48%), rgb(253 246 244 / 82%) 19%, rgb(253 246 244 / 68%) 42%, rgb(253 246 244 / 8%) 66%, transparent 82%);
  pointer-events: none;
}
.sb-main .sb-hero::after,
.sb-main .sb-hero-cutout::before,
.sb-main .sb-hero-cutout::after {
  content: none;
}
.sb-main .sb-hero > .sb-container { position: relative; z-index: 1; }
.sb-main .sb-hero-grid { grid-template-columns: 1.03fr 1fr; }
.sb-main .sb-hero-copy { z-index: 3; }
.sb-main .sb-hero-cutout {
  position: relative;
  z-index: 2;
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-width: 500px;
  height: 515px;
  margin-inline: auto;
}
.sb-main .sb-hero-cutout img {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: contain;
  object-position: center bottom;
}
.sb-main .sb-hero-home > .sb-container { position: static; }
.sb-main .sb-hero-home .sb-hero-grid { min-height: 575px; }
.sb-main .sb-hero-home .sb-hero-floral-portrait {
  position: absolute;
  inset: auto max(0px, calc((100% - 1280px) / 2)) 0 auto;
  width: min(50%, 600px);
  max-width: none;
  height: 550px;
  margin: 0;
}
.sb-main .sb-service-hero .sb-hero-photo {
  position: relative;
  z-index: 2;
  width: 100%;
  align-self: center;
}
.sb-main .sb-service-hero .sb-hero-photo img { display: block; width: 100%; height: auto; }

/* The portrait meets the bottom of the watercolor field, as in the reference. */
.sb-main .sb-about {
  --sb-about-space: 64px;
  padding-block: var(--sb-about-space);
  overflow: hidden;
  background-color: var(--sb-rose-100);
  background-image: linear-gradient(90deg, transparent, rgb(253 246 244 / 25%) 42%, rgb(253 246 244 / 87%) 62%, rgb(253 246 244 / 72%)), var(--sb-floral-light);
  background-size: cover;
  background-position: center;
}
.sb-main .sb-about::after,
.sb-main .sb-about-cutout::before,
.sb-main .sb-about-cutout::after { content: none; }
.sb-main .sb-about .sb-split { align-items: center; }
.sb-main .sb-about .sb-about-cutout {
  position: relative;
  z-index: 1;
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: calc(100% + 50px);
  max-width: none;
  height: 565px;
  margin: 0 0 calc(-1 * var(--sb-about-space)) -50px;
}
.sb-main .sb-about-cutout img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 0;
}
.sb-main .sb-about .sb-split > :not(.sb-about-cutout) { position: relative; z-index: 2; }
.sb-main .sb-how .sb-about-cutout {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 560px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: 24px;
  background-color: var(--sb-rose-100);
  background-image: var(--sb-floral-light);
  background-size: auto 100%;
  background-position: 70% center;
}

/* Pale washes around the cards retain the quiet area behind their copy. */
.sb-main .sb-offers {
  background-image: linear-gradient(rgb(253 246 244 / 77%), rgb(253 246 244 / 86%)), var(--sb-floral-light);
  background-size: cover;
  background-position: center;
}
.sb-main .sb-offers::before,
.sb-main .sb-offers::after { content: none; }
.sb-main .sb-card { border-radius: 0; }
.sb-main .sb-card-body {
  background-image: linear-gradient(135deg, rgb(253 246 244 / 89%), rgb(247 233 230 / 94%)), var(--sb-floral-light);
  background-size: auto 600px;
  background-position: 42% 48%;
}

.sb-main .sb-cta {
  background-color: var(--sb-plum-800);
  background-image: linear-gradient(rgb(109 58 69 / 42%), rgb(109 58 69 / 45%)), var(--sb-floral-cta);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.sb-main .sb-cta::before,
.sb-main .sb-cta::after { content: none; }
.sb-main .sb-cta .sb-container { position: relative; z-index: 1; }

/* A trace of the same paper and watercolor ties the framing into the page. */
.sb-header {
  background-color: var(--sb-rose-50);
  background-image: linear-gradient(rgb(253 246 244 / 93%), rgb(253 246 244 / 93%)), var(--sb-floral-light);
  background-size: cover;
  background-position: center 42%;
}
.sb-footer {
  background-color: var(--sb-rose-100);
  background-image: linear-gradient(90deg, rgb(253 246 244 / 72%), rgb(253 246 244 / 89%) 26%, rgb(253 246 244 / 89%) 76%, rgb(253 246 244 / 64%)), var(--sb-floral-light);
  background-size: cover;
  background-position: center bottom;
}
.sb-footer::before { content: none; }

@media (min-width: 681px) {
  .sb-main .sb-about-cutout img {
    object-fit: cover;
    object-position: center top;
  }
}
@media (max-width: 1200px) {
  :root {
    --sb-floral-light: url("images/floral-light-v2-1280.webp");
    --sb-floral-cta: url("images/floral-cta-v2-1280.webp");
  }
  .sb-main .sb-hero-home .sb-hero-floral-portrait { height: 520px; }
  .sb-main .sb-about .sb-about-cutout { width: calc(100% + 24px); margin-left: -24px; }
}
@media (max-width: 900px) {
  .sb-main .sb-hero-home .sb-hero-grid { min-height: 520px; }
  .sb-main .sb-hero-home .sb-hero-floral-portrait { width: 50%; height: 485px; }
  .sb-main .sb-hero-cutout { height: 480px; }
  .sb-main .sb-about { --sb-about-space: 58px; }
  .sb-main .sb-about .sb-about-cutout { height: 515px; }
  .sb-main .sb-how .sb-about-cutout { height: 480px; }
}
@media (max-width: 680px) {
  :root {
    --sb-floral-light: url("images/floral-light-v2-768.webp");
    --sb-floral-cta: url("images/floral-cta-v2-768.webp");
  }
  .sb-main .sb-hero {
    background-size: auto 100%;
    background-position: 64% bottom;
  }
  .sb-main .sb-hero::before {
    background: linear-gradient(180deg, rgb(253 246 244 / 89%), rgb(253 246 244 / 86%) 38%, rgb(253 246 244 / 38%) 58%, transparent 75%);
  }
  .sb-main .sb-hero::after,
  .sb-main .sb-about::before {
    content: "";
    position: absolute;
    inset: auto auto 0 0;
    z-index: 0;
    width: 145px;
    height: 350px;
    background-image: var(--sb-floral-light);
    background-size: auto 100%;
    background-position: left bottom;
    background-repeat: no-repeat;
    opacity: .56;
    mask-image: linear-gradient(to bottom, transparent, #000 25%);
    pointer-events: none;
  }
  .sb-main .sb-hero-grid,
  .sb-main .sb-hero-home .sb-hero-grid { min-height: 0; }
  .sb-main .sb-hero-copy { padding-block: 44px 24px; }
  .sb-main .sb-hero-cutout,
  .sb-main .sb-hero-home .sb-hero-floral-portrait {
    position: relative;
    inset: auto;
    align-self: center;
    width: 100%;
    max-width: 390px;
    height: clamp(340px, 94vw, 390px);
    margin: 0 auto;
  }
  .sb-main .sb-hero-cutout img {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center bottom;
  }
  .sb-main .sb-service-hero .sb-hero-photo { margin-block: 0 32px; }
  .sb-main .sb-about {
    --sb-about-space: 50px;
    background-image: linear-gradient(180deg, rgb(253 246 244 / 90%), rgb(253 246 244 / 89%) 49%, rgb(253 246 244 / 16%) 76%, transparent), var(--sb-floral-light);
    background-size: auto 100%;
    background-position: 34% bottom;
  }
  .sb-main .sb-about .sb-split { gap: 28px; }
  .sb-main .sb-about .sb-about-cutout {
    align-self: center;
    width: 100%;
    max-width: 430px;
    height: clamp(370px, 105vw, 430px);
    margin: 0 auto calc(-1 * var(--sb-about-space));
  }
  .sb-main .sb-about-cutout img { aspect-ratio: auto; object-position: center bottom; }
  .sb-main .sb-how .sb-about-cutout { width: 100%; max-width: 430px; height: clamp(370px, 105vw, 430px); margin-inline: auto; }
  .sb-main .sb-cta { background-position: 35% center; }
  .sb-footer { background-position: 65% bottom; }
}