/* ===== Shared AquaStay header + footer (used on villa pages) =====
   Values are kept IDENTICAL to the homepage (assets/css/home.css) so the
   header/footer render exactly the same across the whole site. Every rule
   is scoped under .site-header / .site-footer so it never affects the villa
   pages' own Bootstrap-based content. */
:root{--teal:#0d4b4e;--teal-deep:#082a2c;--gold:#c8a253;--gold-lt:#e6cd94;--cream:#f6f0e6;--ink:#17302f;--font-display:"Fraunces",Georgia,"Times New Roman",serif;--font-body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}

/* ---- Header (matches home.css .site-header block) ---- */
.site-header{position:-webkit-sticky;position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;
  padding:14px 6vw;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 4px 24px rgba(13,75,78,.06);font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* neutralise the villa pages' global img{border-radius:8px} on brand logos + icons */
.site-header img,.site-footer img{border-radius:0}
.site-header .brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.site-header .brand img{width:42px;height:42px;object-fit:contain}
.site-header .brand span{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:.5px;color:var(--teal)}
.site-header .nav-links{display:flex;align-items:center;gap:32px}
.site-header .nav-links>a:not(.btn-call){font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none}
.site-header .nav-links>a:not(.btn-call):hover{color:var(--gold)}
.site-header .btn-call{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-weight:700;
  min-height:44px;padding:0 22px;font-size:14.5px;background:var(--teal);color:#fff;text-decoration:none;
  transition:background .2s,transform .2s,box-shadow .2s}
.site-header .btn-call:hover{background:#0a3c3f}
.site-header .btn-ico{width:18px;height:18px;flex:none}
.site-header .nav-toggle,.site-header .nav-burger{display:none}

/* ---- Footer (matches home.css .site-footer block) ---- */
.site-footer{background:var(--teal-deep);color:rgba(255,255,255,.75);padding:60px 6vw 28px;font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.site-footer .footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px}
.site-footer .footer-grid>div>p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.6);max-width:290px;margin:14px 0 0}
.site-footer .brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.site-footer .brand img{width:40px;height:40px;object-fit:contain}
.site-footer .brand span{font-family:var(--font-display);font-weight:700;color:#fff;font-size:24px}
.site-footer h3{font-family:var(--font-body);font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-lt);margin:0 0 14px}
.site-footer .footer-grid a,.site-footer .footer-grid>div>span{display:flex;align-items:center;gap:9px;
  color:rgba(255,255,255,.75);font-size:15px;margin-bottom:10px;text-decoration:none}
.site-footer .footer-grid a:hover{color:var(--gold)}
.site-footer .footer-grid .ico{width:17px;height:17px;flex:none}
.site-footer .footer-bar{max-width:1200px;margin:40px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  text-align:center;font-size:13.5px;color:rgba(255,255,255,.5)}
.site-footer .footer-bar a{color:rgba(255,255,255,.72);text-decoration:underline}
.site-footer .footer-bar a:hover{color:var(--gold)}

/* ---- Mobile (matches home.css @media 820px) ---- */
@media (max-width:820px){
  .site-header{flex-wrap:wrap;position:relative}
  .site-header .nav-burger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
  .site-header .nav-burger span{width:24px;height:2px;background:var(--ink);border-radius:2px}
  .site-header .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:14px;background:#fff;padding:18px 6vw 24px;box-shadow:0 12px 30px rgba(0,0,0,.12)}
  .site-header .nav-links>a{padding:6px 0}
  .site-header .btn-call{justify-content:center}
  .site-header .nav-toggle:checked ~ .nav-links{display:flex}
  .site-footer .footer-grid{grid-template-columns:1fr;gap:28px}
}

/* ---- Villa-page layout fix ----
   The villa CSS puts margin:25px 50px on <body>, which would inset the
   full-width header/footer. Zero it and move the inset onto the content
   wrapper so the header/footer sit flush to the viewport edges. */
body{margin:0 !important;font-family:var(--font-body)}
.main-div{margin:25px 50px}
@media (max-width:768px){ .main-div{margin:10px 14px} }