@charset "utf-8";
/* CSS Document */

/* -------------------- Base -------------------- */
html, body { margin:0; overflow-x: clip; background:#0A0F1A; } /* dark bg ensures no white peeks through */



:root{
  --lip-blue: var(--brand-blue, #0B3B91);
  --lip-dark: var(--brand-dark, #0A0F1A);
  --lip-light: var(--brand-light, #fff);
  --nav-h: 72px;                 /* adjust if header height changes */
}

/* ================= NAVBAR (fixed, overlay hero) ================= */
.lip-header{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1100;
  background: transparent;       /* transparent over hero top */
  transition: background-color .25s ease, box-shadow .25s ease;
  /* link color variables (default over hero) */
  --nav-link: #ffffff;
  --nav-hover-bg: rgba(255,255,255,.12);
  --nav-active-bg: rgba(255,255,255,.16);
}
.lip-header .navbar{ margin:0; border:0; background: transparent; }

/* Dark glass once scrolled (your current behavior) */
.lip-header.scrolled{
  background-color: rgba(10,15,26,.85);
  backdrop-filter: saturate(140%) blur(6px);
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
  --nav-link:#E9EEF8;
  --nav-hover-bg: rgba(255,255,255,.10);
  --nav-active-bg: rgba(255,255,255,.14);
}

/* Pull hero up under header (1px overlap kills white seam) */
.has-hero .hero-wrap{
  margin-top: calc(-1px - var(--nav-h));
  padding-top: var(--nav-h);
}

/* ================= NAV LINKS ================= */
#lip-nav .nav-link{
  position: relative;
  color: var(--nav-link);
  padding: .45rem .7rem;
  border-radius: .5rem;
  transition: color .15s ease, background-color .2s ease, opacity .2s;
  opacity: .95;
}
#lip-nav .nav-link:hover{
  background: var(--nav-hover-bg);
  opacity: 1;
}
#lip-nav .nav-link::after{
  content:"";
  position:absolute; left:.6rem; right:.6rem; bottom:.35rem; height:2px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease; opacity:.7;
}
#lip-nav .nav-link:hover::after,
#lip-nav .nav-link.active::after{ transform: scaleX(1); }

/* Active state (subtle pill + underline) */
#lip-nav .nav-link.active{
  font-weight: 600;
  /*background: var(--nav-active-bg);*/
}

/* ================= DROPDOWN ================= */
@media (min-width: 992px){
  .navbar .dropdown:hover .dropdown-menu{ display:block; margin-top:0; }
  .navbar .dropdown-toggle::after{ margin-left:.35rem; }
}
.dropdown-menu{ min-width:14rem; }
.dropdown-item.active,
.dropdown-item:active{ background-color: var(--lip-blue); color:#fff; }

/* ================= BUTTON BRANDING ================= */
.btn-primary{
  --bs-btn-bg: var(--lip-blue);
  --bs-btn-border-color: var(--lip-blue);
  --bs-btn-hover-bg: #0a3380;
  --bs-btn-hover-border-color: #0a3380;
}

/* ========== MOBILE NAV: left brand, panel below header ========== */
@media (max-width: 991.98px){

  /* Make the fixed header solid while menu is open */
  body.nav-open .lip-header{
    background: rgba(10,15,26,.96);
    backdrop-filter: blur(6px) saturate(140%);
    box-shadow: 0 1px 0 rgba(255,255,255,.08);
  }

  /* Full-height panel that starts BELOW the header */
  .lip-header .navbar-collapse{
    position: fixed;
    top: var(--nav-h);                 /* <- below navbar */
    left: 0; right: 0;
    height: calc(100vh - var(--nav-h));
    background: rgba(10,15,26,.96);
    backdrop-filter: blur(6px) saturate(140%);
    padding: 1rem 1.25rem 2.25rem;
    overflow-y: auto;
    z-index: 1200;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }

  /* Brand: left-aligned and compact; hide logo to avoid wrap */
  .lip-header .navbar-brand img{ display: none !important; }
  .lip-header .navbar-brand{
    display: flex; align-items: center;
    gap: .5rem;
    font-size: 1.05rem;
    font-weight: 700;
    padding: .5rem .75rem;
    margin: 0;
    white-space: normal;
    line-height: 1.2;
  }

  /* Keep hamburger in the header (not inside the panel) */
  .lip-header .navbar-toggler{
    position: absolute;
    top: .35rem; right: .5rem;
    z-index: 1300;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: .5rem;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(4px);
  }

  /* Link spacing + underline tone */
  #lip-nav{ margin-top: .25rem; }
  #lip-nav .nav-link{
    font-size: 1.05rem;
    padding: .75rem 0;
    border-radius: .4rem;
  }
  #lip-nav .nav-link::after{ opacity: .5; bottom: .3rem; }

  /* Dropdown: readable items on dark panel */
  .navbar .dropdown-menu{
    position: static; display: block; float: none;
    background: transparent; border: 0; box-shadow: none;
    padding-left: 1rem; margin-top: .25rem;
  }
  .dropdown-item{ color: #E9EEF8 !important; opacity: .98; }
  .dropdown-item:hover{ color: #fff !important; opacity: 1; }
}

/* Prevent page scroll when menu is open (you already have this) */
body.nav-open{ overflow: hidden; }

/* -------------------- Hero -------------------- */
    .hero-wrap.has-solid-bg{
      /* solid background replaces gradients/overlay/video */
      --hero-bg: <?= $bg ?>;
      background: var(--hero-bg);
      position: relative;
      display: block;
      padding-top: calc(var(--nav-h) + clamp(1.5rem, 3.5vh, 2.25rem));
      padding-bottom: clamp(1rem, 3vh, 1.75rem);
      min-height: 65vh;
    }
    .hero-content{ position: relative; z-index: 1; }
    .hero-sub{ letter-spacing:.12em; color:#a9c3ff; }

    /* Media pane */
    .hero-media{
      background: rgba(255,255,255,.06);
      border-radius: 1.25rem;
      overflow: hidden;
    }
    .hero-media-inner{
      /* keep a nice frame; adjust ratio as needed */
      aspect-ratio: 16 / 9;
      width: 100%;
      position: relative;
    }
    .hero-media-el{
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Header over solid bg */
    .lip-header .navbar{ background: transparent; }
    .lip-header.scrolled .navbar{ background-color: rgba(10,15,26,.9); }

    /* Mobile/tablet */
    @media (max-width: 991.98px){
      .hero-wrap.has-solid-bg{
        min-height: unset;
		padding-top: 155px!important;
      }
      .hero-media-inner{ aspect-ratio: 3 / 2; }
    }

    /* Reduced motion: no change needed since videos are local to the pane */
    @media (prefers-reduced-motion: reduce){
      .hero-media-el[type="video"], .hero-media video{ display:none; }
    }

    /* Keep same visual hero height even with fixed nav */
    .has-hero .hero-wrap.has-solid-bg{
      margin-top: calc(-1px - var(--nav-h));
      padding-top: calc(var(--nav-h) + clamp(1.5rem, 3.5vh, 2.25rem));
      min-height: calc(65vh + var(--nav-h));
    }

/* Vertically center all hero content */
.hero-wrap.has-solid-bg{
  display: block;            /* section itself stays block */
}

.hero-inner{
  display: flex;
  align-items: center;       /* vertical centering */
  min-height: 65vh;          /* target height */
}

/* Keep same visual height with fixed nav offset */
.has-hero .hero-wrap.has-solid-bg{
  margin-top: calc(-1px - var(--nav-h));
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 3.5vh, 2.25rem));
  /* min-height already handled by .hero-inner */
}



/* Mobile/tablet: let content breathe but remain centered */
@media (max-width: 991.98px){
  .hero-inner{
    min-height: 65vh;
  }
  .hero-media-inner{ aspect-ratio: 3 / 2; }
}

/* -------------------- Dual Scrolling Gallery Bar -------------------- */
.scroll-gallery-wrap{
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,0));
  overflow: hidden;
}

/* Full-bleed strip */
.scroll-gallery-wrap.fullbleed{
  width: 100vw;                  /* fallback */
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: 100vw;
  overflow: hidden;
}
@supports (width: 100svw){
  .scroll-gallery-wrap.fullbleed{
    width: 100svw;
    max-width: 100svw;
  }
}




/* Rows */
.scroll-row{
  --gap: 1rem;
  display: grid;
  grid-auto-flow: column;
  white-space: nowrap;
  overflow: hidden;
  padding-block: .25rem;
}
.scroll-row{ margin-top: .5rem; }

.scroll-track{
  display: inline-flex;
  gap: var(--gap);
  will-change: transform;
}
.scroll-row--a .scroll-track{ animation: scrollX-left 40s linear infinite; }
.scroll-row--b .scroll-track{ animation: scrollX-right 38s linear infinite; }

/* Cards */
.scroll-card{
  display: inline-block;
  min-width: clamp(220px, 26vw, 360px);
  aspect-ratio: 16/9;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0a0f1a;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.scroll-card img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.scroll-card:hover img{ transform: scale(1.05); }

/* Edge fades (match your hero/nav background color) */
.edge-fade{
  position: absolute; top: 0; bottom: 0; width: clamp(40px, 6vw, 120px);
  z-index: 2; pointer-events: none;
}
.edge-fade--left{ left: 0; background: linear-gradient(90deg, rgba(10,15,26,1) 0%, rgba(10,15,26,0) 100%); }
.edge-fade--right{ right: 0; background: linear-gradient(270deg, rgba(10,15,26,1) 0%, rgba(10,15,26,0) 100%); }

/* Animations */
@keyframes scrollX-left{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes scrollX-right{ from{transform:translateX(-50%)} to{transform:translateX(0)} }

/* Pause on hover (desktop) */
@media (hover: hover){
  .scroll-row:hover .scroll-track{ animation-play-state: paused; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .scroll-row .scroll-track{ animation: none; }
}

/* Dark theme blending with hero */
.scroll-gallery-wrap .edge-fade--left,
.scroll-gallery-wrap .edge-fade--right{
  background: linear-gradient(90deg, rgba(10,15,26,1) 0%, rgba(10,15,26,0) 100%);
}
.scroll-gallery-wrap .edge-fade--right{
  background: linear-gradient(270deg, rgba(10,15,26,1) 0%, rgba(10,15,26,0) 100%);
}
/* Single-row variant (inner pages): smaller cards, slower motion, tighter padding */
.scroll-gallery-wrap.is-single{ padding-block: .5rem; }
.scroll-gallery-wrap.is-single .scroll-card{
  min-width: clamp(180px, 22vw, 300px);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.scroll-gallery-wrap.is-single .scroll-row--a .scroll-track{ animation-duration: 60s; }


.section-pad{ padding: clamp(2.5rem, 6vw, 4rem) 0; }

/* Benefits bar */
.benefits-bar{ background: var(--lip-blue); color:#fff; overflow:hidden; margin-top: .5rem; }
.benefits-track{ display:flex; gap:2.5rem; white-space:nowrap; animation: marquee 28s linear infinite; }
.benefit-item{ opacity:.95; font-weight:600; letter-spacing:.04em; }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Promo bars */
.promo-bar{ padding: 1.1rem 0; background: linear-gradient(135deg, var(--lip-blue), #0a0f1a); }

/* Helpers */
.object-fit-cover{ object-fit:cover; }

/* Full-bleed wrapper (same pattern as gallery) */
.benefits-bar.fullbleed{
  width: 100vw;             /* fallback */
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: 100vw;
  background: var(--lip-blue);
  color: #fff;
  overflow: hidden;
  padding-block: .6rem;
}
@supports (width: 100svw){
  .benefits-bar.fullbleed{
    width: 100svw;
    max-width: 100svw;
  }
}

/* Track starts flush-left, no container padding */
.benefits-track{
  display: inline-flex;
  gap: 2rem;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 28s linear infinite;
  padding-left: 0;               /* ensure flush-left start */
}

/* Items */
.benefit-item{
  display: inline-block;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: .95;
}

/* Remove any default margins that create a left gap */
.benefit-item:first-child{ margin-left: 0; }

/* Smooth loop */
@keyframes marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }  /* duplicate array makes this seamless */
}
.benefits-bar.fullbleed::before,
.benefits-bar.fullbleed::after{
  content:"";
  position:absolute;
  top:0; bottom:0; width:clamp(24px,6vw,100px);
  pointer-events:none;
}
.benefits-bar.fullbleed::before{
  left:0; background: linear-gradient(90deg, rgba(11,59,145,1), rgba(11,59,145,0));
}
.benefits-bar.fullbleed::after{
  right:0; background: linear-gradient(270deg, rgba(11,59,145,1), rgba(11,59,145,0));
}

/* Inverted text for dark sections */
.section-dark { color: #E9EFFB; }                 /* base text */
.section-dark .h-title { color: #FFFFFF; }
.section-dark .lead { color: #D5E0F8; opacity: .98; }
.section-dark p { max-width: 65ch; line-height: 1.6; }
.section-dark a { color: #AEC6FF; }
.section-dark a:hover { color: #D7E5FF; }

/* Optional subtle divider before the promo bar */
.section-dark + .promo-bar { box-shadow: 0 -6px 18px rgba(0,0,0,.25) inset; }

.section-dark .fw-medium {color: #0A0F1A;}
.section-dark .text-muted {color: #CBD6ED!important;}

.no-ch-limit { max-width: none!important; }