/* 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,.08);
  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); }
}
/* ---------- Vars you can tweak ---------- */
:root{
  --mobile-title:#9c5423;
  --mobile-sub:#6C7A74;
  --mobile-divider:rgba(0,0,0,.08);
  --mobile-arrow:#90A39B;
}

/* ========================================
   DESKTOP/TABLET: 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 hsla(0, 0%, 100%, .5);
}
.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:rgba(0,0,0,.45);
  transition:background .25s ease, transform .2s ease;
  padding:clamp(18px, 2.2vw, 32px) clamp(16px, 2vw, 24px);
  /* “centered indent” */
  padding-left:clamp(40px, 6vw, 80px);
}
/* vertical dividers on desktop */
@media (min-width:768px){
  .hero-panels-desktop .col-md-4:not(:last-child) .panel{
    border-right:1px solid hsla(0, 0%, 100%, .5);
  }
}
/* text styles (were missing) */
.hero-panels-desktop .eyebrow{
  display:block;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  opacity:.85; margin-bottom:.35rem; font-weight:600;
}
.hero-panels-desktop .panel-title{
  font-family:'Libertinus Serif Display', system-ui;
  font-weight:600; line-height:1.15; margin:0;
  font-size:clamp(1.25rem, 2vw + .5rem, 1.75rem);
  color:#f5eee9; /* desktop title color */
}
/* hover */
.hero-panels-desktop .panel:hover{
  background: #a9875ca3;;
  transform:translateY(-1px);
}

/* reserve space so caption doesn't collide */
.header{ position:relative; overflow:hidden; min-height:100vh; }
.header .caption{ padding-bottom:clamp(140px, 22vh, 240px); }

/* ========================================
   MOBILE: stacked list (below </header>)
   ======================================== */
.hero-panels-mobile{ display:none; } /* hidden by default; enabled at <768px */

@media (max-width:767.98px){
  .hero-panels-mobile{ display:block; background:#fff; }

  .hero-panels-mobile .panel.media-link{
    display:flex; align-items:center; gap:12px;
    padding:14px 8px 14px 0; background:#fff; color:inherit;
    text-decoration:none; -webkit-tap-highlight-color:transparent;
  }
  .hero-panels-mobile .thumb{
    flex:0 0 70px; width:70px; aspect-ratio:3/2;
    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:'Libertinus Serif Display', system-ui; font-weight:600;
    font-size:1.125rem; line-height:1.1; color:var(--mobile-title);
    margin-bottom: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);
  }
  .hero-panels-mobile .arrow{
    flex:0 0 auto; color:var(--mobile-arrow);
    display:flex; align-items:center; justify-content:center;
    padding-left:6px; transition:transform .18s ease;
  }
  .hero-panels-mobile .panel.media-link:hover .arrow,
  .hero-panels-mobile .panel.media-link:active .arrow{
    transform:translateX(3px);
  }
}

/* ========================================
   Visibility guards (critical)
   ======================================== */
@media (max-width:767.98px){
  .hero-panels-desktop{ display:none !important; visibility:hidden !important; }
  .gradient-edge-bottom{ display:none; } /* prevents overlap over mobile section */
  .header{ overflow:visible; }
}
@media (min-width:768px){
  .hero-panels-desktop{ display:flex !important; }
  .hero-panels-mobile{ display:none !important; }
}
/* mobile arrow sizing + color for the new SVG */
.hero-panels-mobile .arrow { color: var(--mobile-arrow); }
.hero-panels-mobile .arrow .intro2-arrow{
  width: 28px; 
  height: 14px; 
  display: block;
}
.hero-panels-mobile .arrow .intro2-arrow path{
  fill: #a98279;          /* make the paths take on .arrow color */
}