/* ── SECTION 1: CSS Custom Properties (variables) ────────── */
:root{
  --hex: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  --hex-sm: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  --navy:#0F1B3C;
  --gold:#C9A84C;
  --gold-light:#E2C47A;
  --gold-dark:#7D6723;
  --red:#C0392B;
  --mid:#1A2D5A;
  --bg:#F8F6F0;
  --white:#fff;
  --green:#1D9E75;
}

/* ── SECTION 2: Global reset ─────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Barlow',sans-serif;font-size:16px;line-height:1.7;color:#222;background:#fff;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{position:relative}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ── SECTION 3: Topbar ───────────────────────────────────── */
.topbar{
  background:var(--navy);
  padding:8px 0;
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;
  color:rgba(255,255,255,.65);
}
.tb-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
}
.tb-inner .tb-left{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.tb-inner .tb-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.tb-inner a{
  color:rgba(255,255,255,.65);
  text-decoration:none;
  transition:.15s;
}
.tb-inner a:hover{color:var(--gold)}
/* ── Topbar social icons — hexagonal ─────────────── */
.tb-social{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.tb-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.7);
  transition:background .2s ease,color .2s ease;
  text-decoration:none;
  flex-shrink:0;
}
.tb-social a:hover{
  background:var(--gold);
  color:var(--navy);
}
.tb-social a svg{
  width:13px !important;
  height:13px !important;
  fill:currentColor;
  display:block;
}
.tb-social a[title="Community"]{
  background:rgba(255,255,255,.12) !important;
  padding:0 !important;
}
.tb-social a[title="Community"]:hover{
  background:var(--gold) !important;
}
.tb-social a[title="Community"] img{
  width:16px !important;
  height:16px !important;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
@media(max-width:600px){
  .tb-inner{
    flex-direction:column;
    text-align:center;
    gap:6px;
    flex-wrap:wrap;
  }
  .tb-inner .tb-left,
  .tb-inner .tb-right{
    justify-content:center;
    white-space:normal;
  }
}

/* ── SECTION 4: Header and Navigation ───────────────────── */
header{
  background:#fff;
  border-bottom:2px solid var(--gold);
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 1px 12px rgba(0,0,0,.04);
}
.hdr,.header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:78px;
}
.logo a{
  display:flex;
  align-items:center;
  text-decoration:none;
}
.logo img{
  height:58px;   /* slightly taller for badge logo */
  width:auto;
  object-fit:contain;
  transition:transform .2s ease;
}
.logo img:hover{
  transform:scale(1.05);
}
nav{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
nav a{
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;
  font-weight:600;
  color:var(--navy);
  padding:8px 14px;
  border-radius:4px;
  letter-spacing:.5px;
  transition:.15s;
}
nav a:hover,nav a.active{color:var(--gold-dark)}
.btn-enroll{
  background:var(--gold);
  color:var(--navy) !important;
  padding:10px 22px !important;
  border-radius:4px;
  font-weight:700 !important;
}
.btn-enroll:hover{background:#b89040 !important}
@media(max-width:768px){
  .hdr,.header-inner{
    flex-wrap:wrap;
    height:auto;
    padding:10px 16px;
    gap:8px;
  }
  nav{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:2px;
    padding:6px 0 4px;
    border-top:1px solid rgba(201,168,76,.2);
  }
  nav a{font-size:11.5px;padding:5px 7px;letter-spacing:0}
  .btn-enroll{padding:6px 14px !important;font-size:12px !important}
    .site-logo img,.logo img{height:50px}
}
@media(max-width:480px){
  nav a{font-size:11px;padding:4px 5px}
  .btn-enroll{padding:5px 10px !important;font-size:11px !important}
  .logo img{height:44px}
}

/* ── SECTION 5: Breadcrumb ──────────────────────────────── */
.breadcrumb{
  background:var(--bg);
  border-bottom:1px solid #e8e4dc;
  padding:14px 0;
}
.breadcrumb-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;
  color:#888;
}
.breadcrumb-inner a{
  color:var(--navy);
  text-decoration:none;
  font-weight:600;
}
.breadcrumb-inner a:hover{color:var(--gold-dark)}
.breadcrumb-inner span{margin:0 6px;color:#ccc}

/* ── SECTION 6: Common section utilities ─────────────────── */
.section{padding:84px 0}
.section-bg{background:var(--bg)}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section-label{
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold-dark);
  margin-bottom:12px;
}
.section-title{
  font-family:'Playfair Display',serif;
  font-size:42px;
  font-weight:800;
  color:var(--navy);
  line-height:1.15;
  margin-bottom:16px;
  letter-spacing:-.5px;
}
.section-title em{color:var(--gold-dark);font-style:italic}
.section-sub{
  font-size:16px;
  color:#555;
  line-height:1.85;
  max-width:680px;
  margin-bottom:0;
}

/* ── SCROLL REVEAL ANIMATIONS ── */
.reveal-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.section-header-center{text-align:center;margin-bottom:48px}
.section-header-center .section-sub{
  margin-left:auto;
  margin-right:auto;
}
@media(max-width:900px){
  .section-title{font-size:30px}
}

/* ── SECTION 7: Buttons ──────────────────────────────────── */
.btn-primary{
  background:var(--gold);
  color:var(--navy);
  font-family:'Barlow Condensed',sans-serif;
  font-size:16px;
  font-weight:800;
  padding:16px 32px;
  border-radius:6px;
  letter-spacing:.5px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  transition:.2s;
  border:2px solid var(--gold);
}
.btn-primary:hover{
  background:#b89040;
  border-color:#b89040;
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(201,168,76,.4);
}
.btn-secondary{
  background:rgba(15,27,60,.4);
  color:#fff;
  border:2px solid rgba(255,255,255,.8);
  backdrop-filter:blur(4px);
  font-family:'Barlow Condensed',sans-serif;
  font-size:16px;
  font-weight:700;
  padding:16px 32px;
  border-radius:6px;
  letter-spacing:.5px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  transition:.2s;
}
.btn-secondary:hover{
  border-color:#fff;
  background:rgba(15,27,60,.7);
}
.btn-wa-small{
  background:var(--green);
  color:#fff !important;
  border-color:var(--gold-dark) !important;
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;
  font-weight:700;
  padding:10px 16px;
  border-radius:6px;
  flex:1;
  text-align:center;
  letter-spacing:.5px;
  transition:.2s;
}
.btn-wa-small:hover{
  background:var(--gold-dark) !important;
  color:#fff !important;
}
.btn-map{
  background:var(--navy);
  color:#fff;
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;
  font-weight:700;
  padding:10px 16px;
  border-radius:6px;
  flex:1;
  text-align:center;
  letter-spacing:.5px;
  transition:.2s;
}
.btn-map:hover{background:var(--mid)}

/* ── SECTION 8: Footer ──────────────────────────────────── */
footer{background:#080e1f;padding:60px 0 24px}
.footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
  gap:32px;
}
.footer-logo img{height:54px;width:auto;margin-bottom:16px}
.footer-desc{
  font-size:14px;
  color:rgba(255,255,255,.7);
  line-height:1.75;
  margin-bottom:18px;
}
.f-col-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
}
.f-links{list-style:none}
.f-links li{margin-bottom:7px}
.f-links a{
  font-size:14px;
  color:rgba(255,255,255,.7);
  transition:.15s;
}
.f-links a:hover{color:var(--gold)}
.f-contact{
  font-size:14px;
  color:rgba(255,255,255,.7);
  line-height:2.1;
}
.f-contact a{color:var(--gold)}
/* ── Footer social icons — hexagonal ─────────────── */
.footer-social{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.footer-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.7);
  transition:background .25s ease,color .25s ease,transform .25s ease;
  text-decoration:none;
  flex-shrink:0;
}
.footer-social a:hover{
  background:var(--gold);
  color:var(--navy);
  transform:translateY(-2px);
}
.footer-social a svg{
  width:16px !important;
  height:16px !important;
  fill:currentColor;
  display:block;
}
.footer-social a[title="Community"]{
  background:rgba(255,255,255,.08) !important;
  padding:0 !important;
}
.footer-social a[title="Community"]:hover{
  background:var(--gold) !important;
}
.footer-social a[title="Community"] img{
  width:20px !important;
  height:20px !important;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
.footer-bottom{
  max-width:1200px;
  margin:36px auto 0;
  padding:18px 24px 0;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:rgba(255,255,255,.55);
  flex-wrap:wrap;
  gap:8px;
}
.footer-credit-link{
  color:inherit;
  text-decoration:none;
  transition:color .15s ease;
}
.footer-credit-link:hover,
.footer-credit-link:focus-visible{
  color:var(--gold);
  text-decoration:underline;
  text-underline-offset:3px;
}
@media(max-width:900px){
  .footer-inner{
    grid-template-columns:1fr;
    gap:28px;
  }
}

/* ── SECTION 9: WhatsApp float button ───────────────────── */
.wa-float{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:998;
  background:#25D366;
  color:#fff;
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.15),
    0 6px 20px rgba(37,211,102,.45);
  transition:transform .2s, box-shadow .2s;
  text-decoration:none;
}
.wa-float svg{
  width:30px;
  height:30px;
  fill:#fff;
  display:block;
}
.wa-float:hover{
  transform:scale(1.08);
  box-shadow:
    0 0 0 5px rgba(255,255,255,.22),
    0 8px 26px rgba(37,211,102,.55);
}
.wa-float:focus-visible{
  outline:3px solid #fff;
  outline-offset:2px;
}

/* ── SECTION 10: Honeycomb hover effect ─────────────────── */
@media (hover: hover) and (pointer: fine) {

  .hc-hover, .hc-hover-light {
    position: relative;
  }
  .hc-hover > *:not(.hero-bg):not(.hero-overlay):not(.hero-logo-glow):not(.hero-inner):not(.scroll-indicator), .hc-hover-light > * {
    position: relative;
    z-index: 1;
  }

  /* Pattern layer — ::before */
  .hc-hover::before, .hc-hover-light::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='24'%3E%3Cpolygon points='35,12 28,0 14,0 7,12 14,24 28,24' fill='none' stroke='%23C9A84C' stroke-width='0.6'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 42px 24px;
    -webkit-mask-image: radial-gradient(circle 0px at var(--mx, 50%) var(--my, 50%), black 40%, transparent 100%);
    mask-image: radial-gradient(circle 0px at var(--mx, 50%) var(--my, 50%), black 40%, transparent 100%);
    opacity: 0;
    transition: opacity .4s ease;
  }

  /* Glow layer — ::after */
  .hc-hover::after, .hc-hover-light::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
      circle 140px at var(--mx, 50%) var(--my, 50%),
      rgba(201,168,76,.22) 0%,
      rgba(180,100,30,.12) 40%,
      transparent 70%
    );
    opacity: 0;
    transition: opacity .3s ease;
  }

  /* Light sections: navy hex */
  .hc-hover-light::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='24'%3E%3Cpolygon points='35,12 28,0 14,0 7,12 14,24 28,24' fill='none' stroke='%230F1B3C' stroke-width='0.5'/%3E%3C/svg%3E");
  }
  .hc-hover-light::after {
    background: radial-gradient(circle 140px at var(--mx, 50%) var(--my, 50%), rgba(15,27,60,.08) 0%, transparent 70%);
  }

  /* Active state — JS adds .hc-active on mousemove */
  .hc-hover.hc-active::before, .hc-hover-light.hc-active::before {
    opacity: 1;
    -webkit-mask-image: radial-gradient(circle 140px at var(--mx, 50%) var(--my, 50%), black 40%, transparent 100%);
    mask-image: radial-gradient(circle 140px at var(--mx, 50%) var(--my, 50%), black 40%, transparent 100%);
  }
  .hc-hover.hc-active::after, .hc-hover-light.hc-active::after {
    opacity: 1;
  }
}


/* ── Testimonial avatars — hexagonal ─────────────── */
.hex-avatar-wrap{
  width:62px;
  height:62px;
  background:var(--gold);
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.test-avatar{
  width:50px;
  height:50px;
  border-radius:0 !important;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--navy);
  color:var(--gold);
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;
  font-weight:800;
}
.test-avatar img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  border-radius:0 !important;
  display:block;
}

/* ── SECTION 11: Cookie Consent Banner ──────────────────── */
#consent-bar{position:fixed;bottom:0;left:0;right:0;z-index:999;
  background:var(--navy);border-top:2px solid var(--gold);
  padding:14px 20px;display:flex;align-items:center;
  justify-content:center;gap:18px;flex-wrap:wrap;
  box-shadow:0 -4px 18px rgba(0,0,0,.3)}
#consent-bar .cb-text{font-size:13.5px;color:rgba(255,255,255,.85);
  line-height:1.6;max-width:640px}
#consent-bar .cb-text a{color:var(--gold);text-decoration:underline}
.cb-btns{display:flex;gap:10px;flex-shrink:0}
.cb-btn{font-family:'Barlow Condensed',sans-serif;font-size:14px;
  font-weight:700;padding:9px 20px;border-radius:5px;cursor:pointer;
  letter-spacing:.5px;border:2px solid var(--gold);transition:.15s}
.cb-accept{background:var(--gold);color:var(--navy)}
.cb-accept:hover{background:#b89040}
.cb-decline{background:transparent;color:rgba(255,255,255,.8)}
.cb-decline:hover{color:#fff;border-color:#fff}
@media(max-width:600px){#consent-bar{flex-direction:column;
  text-align:center;padding:14px 16px 16px}}
/* Push WhatsApp float above consent bar when banner is visible */
body:has(#consent-bar) .wa-float{bottom:110px}