:root{
  --brand: #2b6cb0;        /* primary (accessible blue) */
  --brand-900:#1e4e85;
  --accent:#0ea5e9;         /* light accent for links/badges */
  --ink:#0f172a;            /* headings */
  --muted:#475569;          /* body */
  --bg:#ffffff;
  --bg-soft:#f8fafc;
  --card:#ffffff;
  --border:#e2e8f0;
  --radius:16px;
  --nav-height: 88px;
}

html,body{font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--muted); line-height:1.6;}
.whyus h1, .whyus h2, .whyus h3, .whyus h4{color:var(--ink); font-weight:600; letter-spacing:-0.02em;}
a{color:var(--brand); text-decoration:none;}
a:hover{opacity:.9;}

/* Reserve space for sticky Mobirise nav and ensure it stays above content */
body{ padding-top: var(--nav-height); }
.mbr-navbar__section{ z-index: 1200; }

/* Improve anchor link scrolling so headers aren't hidden under the nav */
[id]{ scroll-margin-top: calc(var(--nav-height) + 12px); }

/* Tune nav height for smaller screens */
@media (max-width: 991.98px){
  :root{ --nav-height: 64px; }
}

.utilbar{background:var(--brand); color:#fff; padding:.5rem 0;}
.utilbar a{color:#fff;}
.utilbar .btn{margin-left:.5rem;}
.btn{border-radius:999px; padding:.6rem 1.1rem; border:1px solid transparent; font-weight:600;}
.btn-primary{background:var(--brand); border-color:var(--brand);}
.btn-primary:hover{background:var(--brand-900); border-color:var(--brand-900);}
.btn-link{padding:.6rem 0; color:var(--brand); border:none; background:transparent;}

.hero-block{padding:5rem 0 3rem;background:var(--bg-soft);}
.hero-block h1{font-size: clamp(2rem,4vw,3.2rem);}
.hero-block .lead{font-size:1.125rem; margin:1rem 0 1.5rem;}
.hero-ctas{display:flex; gap:.75rem; align-items:center; margin-bottom:1rem;}
.trust-badge a{display:inline-block; padding:.4rem .8rem; border:1px dashed var(--border); border-radius:999px; color:var(--ink); background:#fff;}

.section-title{margin-bottom:1.25rem;}
.whyus{padding:3rem 0;}
.whyus-card{border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; background:var(--card); height:100%;}
.whyus-card h3{font-size:1.25rem; margin-bottom:.5rem;}
.whyus-card .card-link{display:inline-block; margin-top:.5rem;}

.schedule-band{padding:1.75rem 0; background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}

.site-footer{background:var(--bg-soft); padding:2.5rem 0;}
.footer-grid{display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));}
.hours, .links{list-style:none; padding:0; margin:0;}
.legal{margin-top:1rem; border-top:1px solid var(--border); padding-top:1rem; color:#64748b;}

@media (max-width: 576px){
  .hero-block{padding:3rem 0 2rem;}
}

.whyus-card { overflow: hidden; }
.whyus-card img.card-img-top {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.card-body { padding: 1rem; }

.carousel-header { color: #ffffff; }

/* Updated hero section */
.hero-split{padding:3.5rem 0;background:var(--bg-soft);}
.frame-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow: 0 6px 24px rgba(2,6,23,.06);
  overflow:hidden;
}
.video-frame{padding:0;}         /* video edge-to-edge inside card */
.text-frame{padding:1.25rem 1.25rem 1.5rem;}

.hero-title{font-size:clamp(1.9rem,3.2vw,2.6rem); line-height:1.1; margin-bottom:.6rem;}
.checklist{list-style:none; padding-left:0;}
.checklist li{position:relative; padding-left:1.5rem; margin:.25rem 0;}
.checklist li::before{content:"✓"; position:absolute; left:0; top:0; line-height:1;}

/* YouTube placeholder (click-to-play) */
.yt-ph{
  position:relative;
  aspect-ratio:16/9;
  background:#000 center/cover no-repeat;
  /* Replace the ID in the URL via inline style in JS; default fallback: */
  background-image:url("https://img.youtube.com/vi/lgb-jfJgOgs/hqdefault.jpg");
}
.yt-ph::after{
  /* subtle frame inside */
  content:"";
  position:absolute; inset:0;
  border:1px solid rgba(226,232,240,.7);
  border-radius:20px; pointer-events:none; margin:8px;
}
.yt-play{
  position:absolute; inset:auto 0 0 0; margin:auto; bottom:12px;
  transform:translateY(-12px);
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%;
  border:none; background:var(--brand); color:#fff; font-size:1.35rem;
  box-shadow: 0 10px 25px rgba(2,6,23,.18);
  cursor:pointer;
}
.yt-play:focus{outline:3px solid var(--accent); outline-offset:3px;}

@media (max-width: 991.98px){
  .text-frame{padding:1rem;}
}
/* Self-hosted hero video inside the framed card */
.video-shell{ position:relative; aspect-ratio:16/9; background:#000; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }

@media (max-width: 991.98px) {
  .hero-split .col-lg-6:first-child {
    margin-bottom: 2.5rem !important; /* Use !important to override any conflicting Bootstrap styles */
  }
  
  .hero-split .text-frame {
    margin-top: 1rem;
  }
}

/* Add this to the bottom of your CSS file */
@media (max-width: 767.98px) {
  /* Add space between stacked cards on mobile */
  .whyus .card.whyus-card {
    margin-bottom: 2rem;
  }
  
  /* Remove bottom margin from the last card to prevent extra space */
  .whyus .col-md-4:last-child .card.whyus-card {
    margin-bottom: 0;
  }
}

#contact {
  color: #fff
}

#contact .mbr-article {
  color: #fff
}