@import url('site.css');
:root{
  --jb-green: #0F3F2E;
  --jb-green-2: #164A3A;
  --jb-cream: #F6F5F2;
  --jb-text: #1E1E1E;
}

html{ scroll-behavior:smooth; }
body{
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--jb-text);
}

/* Mobile bottom bar (quick actions) */
.mobile-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(15,63,46,.10);
  backdrop-filter: blur(10px);
}

.btn-primary{
  --bs-btn-bg: var(--jb-green);
  --bs-btn-border-color: var(--jb-green);
  --bs-btn-hover-bg: var(--jb-green-2);
  --bs-btn-hover-border-color: var(--jb-green-2);
  --bs-btn-active-bg: var(--jb-green-2);
  --bs-btn-active-border-color: var(--jb-green-2);
}

.navbar-wrap{ position: sticky; top: 0; z-index: 1020; }

.logo-mark{ width: 34px; height: 34px; object-fit: contain; }
.logo-mark-sm{ width: 28px; height: 28px; object-fit: contain; }

/* Logo matte fix (prevents dark halo around transparent PNG) */
.logo-badge{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.logo-badge-sm{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero{
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  background: url('/images/hero-1.jpg') center/cover no-repeat;
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(110deg, rgba(15,63,46,.92), rgba(15,63,46,.55) 55%, rgba(15,63,46,.35));
}
.hero-content{ position: relative; padding: 4.5rem 0; }
.text-white-75{ color: rgba(255,255,255,.78); }
.border-white-10{ border-color: rgba(255,255,255,.10)!important; }

.badge-soft{
  display:inline-flex;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.14);
  font-size: .9rem;
}

.hero-card{
  border-radius: 18px;
  padding: 1.25rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}

.hero-logo{
  width: 56px; height: 56px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.link-soft{
  color: rgba(255,255,255,.86);
  text-decoration: none;
}
.link-soft:hover{ color: #fff; text-decoration: underline; }

.section{ padding: 4.5rem 0; }
.section-alt{ background: var(--jb-cream); }
.section-head{ margin-bottom: 1.25rem; }

.card-soft{
  border: 1px solid rgba(15,63,46,.10);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(15,63,46,.06);
}

.icon-dot{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(15,63,46,.08);
  font-size: 1.25rem;
}

.list-check{
  padding-left: 0;
  list-style: none;
}
.list-check li{
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .65rem;
}
.list-check li::before{
  content: "✓";
  position:absolute; left: 0;
  color: var(--jb-green);
  font-weight: 700;
}

.gallery-img{
  width: 100%;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.photo-frame{
  border-radius: 22px;
  padding: .65rem;
  background: rgba(255,255,255,.6);
}

.label{
  display:inline-block;
  font-size: .85rem;
  color: rgba(30,30,30,.65);
  margin-bottom: .15rem;
}

.map-placeholder{
  height: 100%;
  min-height: 320px;
  border-radius: 18px;
  border: 1px dashed rgba(15,63,46,.25);
  background: linear-gradient(180deg, rgba(15,63,46,.04), rgba(15,63,46,.02));
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 1rem;
}

@media (max-width: 991px){
  .hero{ min-height: 78vh; }
  body{ padding-bottom: 92px; }
  .hero-content{ padding: 3.25rem 0; }
}

@media (max-width: 575px){
  .hero h1{ font-size: 2.2rem; }
  .hero .lead{ font-size: 1.05rem; }
  .section{ padding: 3.25rem 0; }
}

@media (max-width: 767px){
  body{ padding-bottom: 78px; } /* keep content above the mobile CTA */
  .hero-content{ padding: 3.25rem 0; }
  .section{ padding: 3.25rem 0; }
}

@media (max-width: 575px){
  .display-5{ font-size: 2.15rem; }
  .hero{ min-height: 72vh; }
}



/* Hero title tweak (avoid heavy black look) */
.hero-title{
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 34px rgba(0,0,0,.40);
}

/* Contact + map: keep equal height and avoid covering footer */
.map-embed{
  height: 100%;
  min-height: 520px;
}
.map-embed iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 992px){
  .map-embed{ min-height: 360px; }
}

#contact{ padding-bottom: 4rem; }


  .offcanvas-body .nav-link{ padding: .8rem 0; font-size: 1.15rem; }
  .offcanvas-body .btn{ width: 100%; }
  .hero-actions{ gap: .75rem; }
  .hero-actions .btn{ width: 100%; }
  .hero-content{ padding-left: 1rem; padding-right: 1rem; }
}


/* Mobile spacing improvements */
@media (max-width: 575px){
  .offcanvas-body{ padding: 1.25rem; }
  .offcanvas-body .nav-link{ padding: .8rem 0; font-size: 1.15rem; }

  /* Make hero buttons stack nicely */
  .hero .d-flex.flex-wrap.gap-2{ width: 100%; }
  .hero .d-flex.flex-wrap.gap-2 .btn{
    flex: 1 1 100%;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Add some horizontal breathing room */
  .container{ padding-left: 1rem; padding-right: 1rem; }
}