/* ===== Layout & layering (no HubL selectors) ===== */
.dnd-section,
.dnd-column { position: relative; min-height: 100vh; }

.bg-overlay {
  position: relative;              /* positioning context for children */
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  z-index: 0;
}
@supports (height: 100dvh) {
  .bg-overlay { min-height: 100dvh; }
}

.bg-overlay__video,
.bg-overlay__overlay {
  position: absolute;
  inset: 0;
}
.bg-overlay__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.bg-overlay__overlay { z-index: 1; pointer-events: none; }

/* ===== Hero text & arrow ===== */
.hero-content,
.scroll-indicator {
  position: absolute;
  z-index: 2;
}

.hero-content{
  left: 2.5rem;                    /* 40px */
  bottom: 2.5rem;                  /* 40px */
  width: min(33.333%, 45rem);      /* 720px */
  max-width: 90vw;
  color: #fff;
  box-sizing: border-box;
  padding-left: 1.5rem;            /* 24px */
}

/* H1 */
.hero-content h1,
.hero-content .hero-h1{
  margin: 0 0 0.75rem;             /* 12px */
  font-family: "Bahnschrift","Helvetica",sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;          /* em scales with text */
  line-height: 1;
  font-size: clamp(2.25rem, 7vw, 4.75rem); /* 36px → 100px */
}

/* H2 pill */
.hero-content h2,
.hero-content .hero-h2{
  display: inline-block;
  margin: 1.25rem 0 2.5rem;        /* 20px 0 40px */
  padding: 0.375rem 1.25rem;       /* 6px 20px */
  font-family: "Bahnschrift","Helvetica",sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.125em;         /* ≈2px at 16px base */
  font-size: clamp(1.125rem, 2.4vw, 1.625rem); /* 18px → 26px */
  color: #773847;
  background: #F7F6F5;
  line-height: 1.2;
}

/* Body (if used) */
.hero-content p{
  margin: 0 0 0.875rem;            /* 14px */
  font-family: "darwin pro", sans-serif;
  font-weight: 100;
  font-size: clamp(1rem, 1.9vw, 1.125rem); /* 16px → 18px */
  line-height: 1.5;
  letter-spacing: 0.03125em;       /* ~0.5px */
  color: #fff;
}

.hero-content a{ 
  color:#e9f5e5; 
  text-decoration: underline; 
}

.hero-content a:hover{ 
  text-decoration-thickness: 0.125rem; 
}

/* Scroll indicator — uses global .arrow; size via font-size + em */
.scroll-indicator{
  left: 50%;
  bottom: 1.25rem;                 /* 20px */
  transform: translateX(-50%);
  pointer-events: none;
}
.scroll-indicator .arrow{
  font-size: 1.75rem;              /* ~28px icon via 1em */
  color: #fff; opacity: .9;
  display: inline-flex; align-items: center; justify-content: center;
  animation: scroll-breathe 2s ease-in-out infinite;
}
.scroll-indicator .arrow svg { width: 1em; height: 1em; }
@keyframes scroll-breathe{
  0%,100%{ transform: translateY(0); opacity: .9; }
  50%    { transform: translateY(0.375rem); opacity: .65; } /* 6px */
}

/* ===== Video swap (no HubL in selectors) =====
   Default: show desktop video, hide mobile video.
   On small screens, JS adds .show-mobile-video when a mobile source exists. */
.bg-overlay .bg-overlay__video--desktop { display: block; }
.bg-overlay .bg-overlay__video--mobile  { display: none; }
@media (max-width: 48em){ /* ~768px */
  .bg-overlay.show-mobile-video .bg-overlay__video--desktop { display: none; }
  .bg-overlay.show-mobile-video .bg-overlay__video--mobile  { display: block; }
}

/* ===== Tablet & mobile adjustments ===== */
@media (max-width: 62em){          /* ~992px */
  .hero-content { width: min(50%, 35rem); } /* 560px */
}
@media (max-width: 48em){          /* ~768px */
  .bg-overlay{
    --hero-mobile-offset: max(6rem, calc(3.5rem + env(safe-area-inset-bottom, 0)));
  }
  .hero-content{
    left: 0; 
    right: 0;
    bottom: var(--hero-mobile-offset);
    width: auto; 
    max-width: none;
    padding: 0 1.25rem;            /* 20px gutters */
  }
  .hero-content h1,
  .hero-content .hero-h1{
    font-size: clamp(1.75rem, 8.5vw, 2.75rem); /* 28px → 44px */
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
  }
  .hero-content h2,
  .hero-content .hero-h2{
    margin: 0.75rem 0 1.75rem;     /* 12px 0 28px */
    padding: 0.375rem 0.875rem;    /* 6px 14px */
    font-size: clamp(0.875rem, 3.6vw, 1.125rem); /* 14px → 18px */
  }
  .scroll-indicator{ 
    bottom: calc(var(--hero-mobile-offset) - 2.5rem); } /* 40px above text */
}

/* Parallax safety */
@media (max-width: 64em){          /* ~1024px */
  .bg-overlay { background-attachment: scroll !important; }
}