/* Video background */
.video-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

/* Dark overlay to replace data-overlay-dark */
.video-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.20);
  z-index:1;
}

/* Ensure caption sits above video + overlay */
.header .caption{
  position:relative;
  z-index:2;
}

/* Optional: keep hero full-height like your slider */
.header{
  position:relative;
  overflow:hidden;
  min-height:100vh;
}

/* CTA look to match your existing style */
.hero-cta{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.6);
  padding:.65rem 1.25rem;
  letter-spacing:.5px;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.hero-cta:hover{ 
  transform:translateY(-1px);
  background:rgba(255,255,255,.08);
  border-color:#fff;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #heroVideo{ animation:none }
  #heroVideo[autoplay]{ -webkit-animation:none; }
  #heroVideo{ display:none; }            /* show poster only */
  .video-overlay{ background:rgba(0,0,0,.45); }
}
/* =========================================================
   HERO PANELS VARIABLES
   ========================================================= */
:root{
  --mobile-title:#9c5423;
  --mobile-sub:#6C7A74;
  --mobile-divider:rgba(0,0,0,.08);
  --mobile-arrow:#90A39B;

  --desk-border:hsla(0,0%,100%,.5);
  --desk-bg:rgba(0,0,0,.45);
  --desk-hover:#a9875ca3;
}

/* =========================================================
   DESKTOP/TABLET (>=768): OVERLAY TRIPTYCH INSIDE HEADER
   ========================================================= */
.hero-panels-desktop{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;                        /* above video/overlay */
  display:flex;
  width:100%;
  border-top:1px solid var(--desk-border);
}

/* Bootstrap row/cols friendly */
.hero-panels-desktop .row{ flex:1; margin:0; width:100%; }
.hero-panels-desktop .col-12{ padding:0; }

.hero-panels-desktop .panel{
  display:block;
  width:100%;
  height:100%;
  text-decoration:none;
  color:#fff;

  background:var(--desk-bg);
  transition:background .25s ease, transform .2s ease;

  padding:clamp(18px, 2.2vw, 32px) clamp(16px, 2vw, 24px);
  padding-left:clamp(40px, 6vw, 80px);
}

/* vertical dividers */
@media (min-width:768px){
  .hero-panels-desktop .col-md-4:not(:last-child) .panel{
    border-right:1px solid var(--desk-border);
  }
}

/* text styles */
.hero-panels-desktop .eyebrow{
  display:block;
  margin:0 0 .35rem;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.85;
  font-weight:600;
}

.hero-panels-desktop .panel-title{
  margin:0;
  font-family: 'Montserrat', sans-serif;
  font-weight:600;
  line-height:1.15;
  font-size:clamp(1.25rem, 2vw + .5rem, 1.75rem);
  color:#f5eee9;
}

/* hover */
.hero-panels-desktop .panel:hover{
  background:var(--desk-hover);
  transform:translateY(-1px);
}

/* reserve space so caption doesn't collide with overlay panels */
@media (min-width:768px){
  .header .caption{
    padding-bottom:clamp(140px, 22vh, 240px);
  }
}

/* =========================================================
   HERO PANELS (your markup) - SHOW ALL SIZES
   Mobile: stacked list
   Desktop: 3-up grid
   ========================================================= */

.hero-panels-mobile{
  display:block !important;
  background:#fff;
  padding: 18px 0;
}

.hero-panels-mobile > .container-fluid{
  width:100%;
  max-width: 2800px;
  margin: 0 auto;
  padding-left: 22px;
  padding-right: 22px;
}

.hero-panels-mobile .hero-panels-list{
  display:block;
  border-top:1px solid var(--mobile-divider);
}

/* row item */
.hero-panels-mobile .panel.media-link{
  display:flex;
  align-items:center;
  gap:12px;

  padding:14px 14px;
  background:#fff;
  color:inherit;

  text-decoration:none;
  -webkit-tap-highlight-color:transparent;

  border-bottom:1px solid var(--mobile-divider);
}

.hero-panels-mobile .thumb{
  flex:0 0 70px;
  width:70px;
  height:46px;
  border-radius:1px;
  overflow:hidden;
  background:#eee;
}
.hero-panels-mobile .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero-panels-mobile .text{ flex:1; min-width:0; }

.hero-panels-mobile .title{
  display:block;
  font-family: 'Montserrat', sans-serif;
  font-weight:600;
  font-size:1.125rem;
  line-height:1.1;
  color:var(--mobile-title);

  margin:0 0 2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hero-panels-mobile .sub{
  display:block;
  font-size:.92rem;
  line-height:1.25;
  color:var(--mobile-sub);

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Desktop/tablet layout */
@media (min-width:768px){
  .hero-panels-mobile{
    padding: 44px 0;
    background:#f7f3f1;
  }

  .hero-panels-mobile .hero-panels-list{
    border-top:0;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .hero-panels-mobile .panel.media-link{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0;
    border:1px solid rgba(0,0,0,.10);
    border-radius:2px;
    overflow:hidden;
    background:#fff;
  }

  .hero-panels-mobile .thumb{
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    flex:0 0 auto;
    border-radius:0;
  }

  .hero-panels-mobile .text{
    padding: 18px 18px 20px;
  }

  .hero-panels-mobile .title{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    font-size: clamp(20px, 1.6vw, 26px);
  }

  .hero-panels-mobile .sub{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    font-size: 16px;
  }
}