/* =======================================================
   EAGLE LAKES — DARK THEME (mirrors Playita / Driftwater dark)
   Loaded AFTER styles.css. Palette: forest #0D311F, orange #F67A0E.
   ======================================================= */
:root{
  --bg:        #071912;   /* near-black green — main surface */
  --bg-alt:    #0D311F;   /* brand forest green — alt sections */
  --bg-deep:   #04100A;   /* blackest green — dark sections */
  --bg-deep-2: #0D311F;
  --ink:       #F3EFE6;
  --ink-soft:  rgba(243,239,230,.76);
  --ink-muted: rgba(243,239,230,.52);
  --line:      rgba(255,255,255,.13);
  --line-dark: rgba(255,255,255,.13);
  --accent:    #F67A0E;
  --accent-2:  #FF9A45;
  --accent-ink:#F67A0E;
  --white:     #FFFFFF;
  --s-card:  0 18px 46px -22px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.4);
  --s-hover: 0 30px 64px -22px rgba(0,0,0,.8), 0 3px 12px rgba(0,0,0,.5);
  --s-btn:   0 10px 26px -10px rgba(246,122,14,.6);
}
body{ background:var(--bg)!important; color:var(--ink)!important; }
p{ color:var(--ink-soft); }
.section{ background:var(--bg); }
.section--alt{ background:var(--bg-alt)!important; }
.section--dark{ background:var(--bg-deep)!important; }
.eyebrow .num{ color:var(--ink); }
a:hover{ color:var(--accent); }

/* Utility bar */
.utility-bar{ background:#04100A; border-bottom:1px solid var(--line); font-family:"IBM Plex Mono",monospace; }
.utility-bar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:34px; padding:5px 0; }
.ub-note{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2); line-height:1.3; }
.ub-phone{ font-size:11px; letter-spacing:.14em; color:var(--ink-soft); white-space:nowrap; }
.ub-phone:hover{ color:var(--accent); }
@media(max-width:720px){ .ub-note{ font-size:9.5px; } .utility-bar .wrap{ gap:10px; } }

/* Header dark */
.site-header{ background:transparent; }
body:not(.home) .site-header{ background:rgba(7,25,18,.92)!important; border-bottom:1px solid var(--line); backdrop-filter:saturate(140%) blur(10px); }
.site-header.is-scrolled{ background:rgba(7,25,18,.96)!important; border-bottom:1px solid var(--line); backdrop-filter:saturate(140%) blur(10px); box-shadow:0 10px 30px -18px rgba(0,0,0,.8); }
/* Client logo art sits on a light box — present it as a clean rounded badge on dark */
.brand img{ height:56px; width:auto; display:block; border-radius:8px; background:#f2f0ea; padding:5px 9px; box-shadow:0 6px 18px -8px rgba(0,0,0,.6); }
.footer-brand img{ height:62px; width:auto; margin-bottom:16px; border-radius:8px; background:#f2f0ea; padding:6px 10px; }
@media(max-width:600px){ .brand img{ height:46px; } }
.nav-main a{ color:#fff; }
.nav-dropdown > button{ color:#fff; }
.nav-cta .phone{ color:#fff; }
.site-header .nav-dropdown-menu{ background:#0D311F!important; border:1px solid var(--line); box-shadow:var(--s-card); }
.site-header .nav-dropdown-menu a{ color:#fff!important; }
.site-header .nav-dropdown-menu a:hover{ background:rgba(255,255,255,.06)!important; color:var(--accent)!important; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ background:#fff; }

/* Hero overlay */
.hero::after{ background:linear-gradient(180deg, rgba(4,16,10,.35) 0%, rgba(4,16,10,.55) 55%, rgba(4,16,10,.88) 100%)!important; }
.hero__sub{ color:rgba(255,255,255,.9); }

/* Cards on dark */
.mag-card{ background:#0D311F; border:1px solid var(--line); }
.mag-card__body .num{ color:var(--accent-2); }
.price-card{ background:#0D311F!important; border:1px solid var(--line); color:var(--ink); }
.price-card small{ color:var(--ink-muted); }
.feature{ border-color:var(--line)!important; }

/* Pricing rows */
.pricing-rows{ list-style:none; margin:12px 0 18px; padding:0; }
.pricing-rows li{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 14px; padding:14px 0; border-bottom:1px solid var(--line); }
.pricing-rows li:last-child{ border-bottom:none; }
.pkg-name{ flex:1 1 60%; font-family:"Archivo",sans-serif; font-weight:600; font-size:.95rem; color:#fff; }
.pkg-price{ font-family:"Archivo",sans-serif; font-weight:800; font-size:1.35rem; color:var(--accent); }
.pkg-note{ flex-basis:100%; font-size:.8rem; color:var(--ink-muted); font-family:"IBM Plex Mono",monospace; letter-spacing:.03em; }
.price-fine{ font-size:.8rem; color:var(--ink-muted); margin:0 0 18px; }
.detail-grid{ display:grid; grid-template-columns:1.4fr .9fr; gap:56px; align-items:start; }
@media(max-width:900px){ .detail-grid{ grid-template-columns:1fr; gap:34px; } }

/* Brands We Trust */
.section--brands{ background:var(--bg-deep)!important; padding:70px 0; }
.brands-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:46px 64px; margin-top:30px; }
.brand-logo img{ height:44px; width:auto; max-width:190px; object-fit:contain; filter:brightness(0) invert(1); opacity:.62; transition:opacity var(--t),transform var(--t); }
.brand-logo:hover img{ opacity:1; transform:translateY(-2px); }
@media(max-width:600px){ .brands-row{ gap:34px 40px; } .brand-logo img{ height:34px; } }

/* Guides grid */
.guides-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.guide-card{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--t),box-shadow var(--t); }
.guide-card:hover{ transform:translateY(-4px); box-shadow:var(--s-hover); }
.guide-photo{ aspect-ratio:4/5; background-size:cover; background-position:center top; }
.guide-body{ padding:24px 24px 28px; }
.guide-role{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.guide-body h3{ margin:0 0 12px; font-size:1.3rem; color:#fff; }
.guide-nick{ display:block; font-family:"Spectral",serif; font-style:italic; font-weight:300; font-size:1rem; color:var(--ink-muted); letter-spacing:0; }
.guide-body p{ font-size:.94rem; margin:0; }
@media(max-width:900px){ .guides-grid{ grid-template-columns:repeat(2,1fr); gap:22px; } }
@media(max-width:600px){ .guides-grid{ grid-template-columns:1fr; } }

/* Testimonials masonry */
.quotes-masonry{ columns:3; column-gap:28px; }
.quotes-masonry .quote{ break-inside:avoid; margin:0 0 28px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; }
.section--dark .quotes-masonry .quote{ background:rgba(255,255,255,.03); }
.quotes-masonry blockquote{ margin:0 0 14px; font-family:"Spectral",serif; font-style:italic; font-size:1.02rem; line-height:1.55; color:var(--ink); }
.quotes-masonry cite{ font-family:"IBM Plex Mono",monospace; font-style:normal; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
@media(max-width:900px){ .quotes-masonry{ columns:2; } }
@media(max-width:620px){ .quotes-masonry{ columns:1; } }

/* Areas */
.areas-grid{ display:flex; flex-wrap:wrap; gap:14px; }
.area-chip{ padding:12px 22px; border:1px solid var(--line); border-radius:var(--r-pill); font-family:"Archivo",sans-serif; font-weight:600; font-size:.95rem; color:#fff; }
.areas-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.area-card{ background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; }
.area-card h3{ color:var(--accent); margin-bottom:8px; }
.area-card p{ margin:0; font-size:.95rem; }
@media(max-width:900px){ .areas-cards{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .areas-cards{ grid-template-columns:1fr; } }

/* FAQ / policy / contact */
.faq-item summary{ color:#fff; }
.policy-box{ background:rgba(255,255,255,.03); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--r-md); padding:26px 30px; }
.policy-box p{ color:rgba(255,255,255,.82); }
.policy-box p:last-child{ margin-bottom:0; }
.contact-list{ list-style:none; margin:20px 0; padding:0; }
.contact-list li{ padding:12px 0; border-bottom:1px solid var(--line); }
.contact-list li strong{ display:block; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:3px; }
.contact-list li a{ color:#fff; }
.map-note{ margin:6px 0 18px; padding:14px 18px; background:rgba(246,122,14,.1); border:1px solid rgba(246,122,14,.3); border-radius:var(--r-md); font-size:.85rem; color:var(--accent-2); }
.cta-inline{ margin-top:6px; }
.contact-form-shell{ background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; }
.contact-form-shell h3{ color:#fff; }
.form-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
@media(max-width:900px){ .form-wrap{ grid-template-columns:1fr; gap:34px; } }

/* Gallery masonry */
.gallery-masonry{ columns:4; column-gap:14px; }
.gallery-masonry .tile{ width:100%; margin:0 0 14px; border-radius:var(--r-md); break-inside:avoid; }
@media(max-width:1000px){ .gallery-masonry{ columns:3; } }
@media(max-width:700px){ .gallery-masonry{ columns:2; } }

/* CTA + footer */
.cta-banner{ background:var(--bg-alt); }
.cta-banner h2{ color:#fff; }
.footer-note{ font-size:.78rem; color:var(--accent-2); margin-top:8px; }
.thankyou{ min-height:60vh; display:flex; align-items:center; }
.intro-statement h2 em{ color:var(--accent); font-style:italic; }

/* =======================================================
   ANIMATED MOBILE MENU (full-screen overlay, staggered)
   ======================================================= */
@media(max-width:1024px){
  .nav-main{
    position:fixed; inset:0; z-index:120;
    background:linear-gradient(160deg,#0D311F 0%,#04100A 100%);
    display:flex!important; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:4px; padding:110px 40px 44px; overflow-y:auto;
    transform:translateX(100%); opacity:0; visibility:hidden;
    transition:transform .5s cubic-bezier(.7,0,.2,1), opacity .4s ease, visibility .5s;
  }
  .is-open .nav-main{ transform:translateX(0); opacity:1; visibility:visible; }
  .nav-main > a, .nav-main .nav-dropdown{
    width:100%; opacity:0; transform:translateY(18px);
    transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .is-open .nav-main > a, .is-open .nav-main .nav-dropdown{ opacity:1; transform:translateY(0); }
  .is-open .nav-main > *:nth-child(1){ transition-delay:.10s; }
  .is-open .nav-main > *:nth-child(2){ transition-delay:.16s; }
  .is-open .nav-main > *:nth-child(3){ transition-delay:.22s; }
  .is-open .nav-main > *:nth-child(4){ transition-delay:.28s; }
  .is-open .nav-main > *:nth-child(5){ transition-delay:.34s; }
  .is-open .nav-main > *:nth-child(6){ transition-delay:.40s; }
  .is-open .nav-main > *:nth-child(7){ transition-delay:.46s; }
  .is-open .nav-main > *:nth-child(8){ transition-delay:.52s; }
  .nav-main > a{ font-family:"Archivo",sans-serif; font-size:1.55rem; font-weight:700; color:#fff!important; padding:8px 0; letter-spacing:-.01em; }
  .nav-main a::after{ display:none; }
  .nav-dropdown{ display:block; }
  .nav-dropdown > button{ font-family:"Archivo",sans-serif; font-size:1.55rem; font-weight:700; color:#fff!important; padding:8px 0; background:none; border:none; width:100%; text-align:left; }
  .site-header .nav-dropdown-menu{ position:static!important; background:transparent!important; border:none!important; box-shadow:none!important; display:none; padding:2px 0 10px 16px!important; transform:none!important; opacity:1!important; visibility:visible!important; }
  .nav-dropdown.open .nav-dropdown-menu{ display:block!important; }
  .site-header .nav-dropdown-menu a{ font-size:1.02rem!important; font-weight:500; padding:7px 0!important; color:var(--accent-2)!important; }
  .nav-toggle{ position:relative; z-index:130; }
  .is-open .nav-toggle span{ background:transparent!important; }
  .is-open .nav-toggle span::before, .is-open .nav-toggle span::after{ background:#fff!important; }
  body.menu-open{ overflow:hidden; }
}

/* Keep MB booking button orange even after widget mounts */
.btn.btn--primary, button.btn.btn--primary.mb_widget{ background:var(--accent)!important; color:#0b1f14!important; border-color:var(--accent)!important; }
.btn.btn--primary:hover, button.btn.btn--primary.mb_widget:hover{ background:var(--accent-2)!important; color:#0b1f14!important; }
.btn--ghost{ color:#fff; border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn--ghost-light{ color:#fff; border-color:rgba(255,255,255,.4); }
.btn--ghost-light:hover{ background:#fff; color:#0b1f14; }