/* /consultation/ — hero + booking embed.
 *
 * The page reuses the exported Elementor header and footer, but its own two
 * sections are hand-written. Every class here is prefixed `bb-consult-` and
 * appears nowhere else, so none of the Elementor, GeneratePress or Swiper
 * sheets can reach into it and none of these rules can leak back out.
 */

.bb-consult-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 640px;
  /* Slide up under the fixed header so the photo runs behind the transparent
     nav — the nav links are white and would be invisible against the page's
     white background otherwise. js/static-site-consultation.js measures the
     header and overrides the fallback; 80px is the desktop measurement. */
  margin-top: calc(-1 * var(--bb-consult-header-h, 80px));
  padding: calc(var(--bb-consult-header-h, 80px) + 90px) 20px 120px;
  overflow: hidden;
  isolation: isolate;
}

/* Photo and scrim are separate layers so the scrim strength can be tuned
   without touching the image, and so the image can be swapped in one place. */
.bb-consult-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #1a1a1a url("/images/hero-bb-3.jpg") center center / cover no-repeat;
}

.bb-consult-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Slightly heavier on the left, where the headline and body copy sit. */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.66) 55%, rgba(0, 0, 0, 0.6) 100%);
}

.bb-consult-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: 60px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.bb-consult-hero__title {
  color: #fff;
  /* Teko / uppercase / size come from the theme's h1 rule. Spacing below the
     heading is set on the paragraph instead: every page on this site carries
     an inline `h1,h2,h3,h4,h5{line-height:1em!important;margin-bottom:-10px
     !important}` rule, so a margin here would never win without !important. */
}

.bb-consult-hero__text {
  margin: 34px 0 0; /* 34 less the -10px the sitewide heading rule adds */
  max-width: 34em;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7;
}

.bb-consult-hero__figure {
  margin: 0;
}

.bb-consult-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}

.bb-consult-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: block;
  color: #fff;
  text-decoration: none;
  animation: bb-consult-nudge 2.2s ease-in-out infinite;
}

.bb-consult-hero__scroll:hover,
.bb-consult-hero__scroll:focus {
  color: #fff;
  opacity: 0.75;
}

@keyframes bb-consult-nudge {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 10px); }
}

@media (prefers-reduced-motion: reduce) {
  .bb-consult-hero__scroll {
    animation: none;
  }
}

.bb-consult-booking {
  background: #fff;
  padding: 70px 20px 90px;
}

.bb-consult-booking__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* GoHighLevel's form_embed.js sets the real height once it loads. The floor
   keeps the calendar from rendering as a sliver of an iframe before that, or
   at all if the script is blocked. */
.bb-consult-booking iframe {
  display: block;
  width: 100%;
  min-height: 600px;
  border: 0;
}

@media (max-width: 1024px) {
  .bb-consult-hero {
    min-height: 0;
    padding: 70px 20px 100px;
  }

  .bb-consult-hero__inner {
    gap: 40px;
  }

  .bb-consult-hero__text {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .bb-consult-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .bb-consult-hero__figure {
    order: -1; /* photo first on a phone, so the page opens on a face */
  }

  .bb-consult-hero__text {
    max-width: none;
  }

  .bb-consult-booking {
    padding: 45px 16px 60px;
  }
}