/* ============================================================
   INSAR V3 — LAYOUT CHROME
   Header · Mobile drawer · Footer · Floating actions
   ============================================================ */

/* ---------- HEADER -----------------------------------------
   Transparent over the hero, then transitions smoothly into a
   dark semi-transparent luxury bar on scroll. Kept short.
   ----------------------------------------------------------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  height:var(--header-h);
  display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition:height .6s var(--ease),background .6s var(--ease),
             border-color .6s var(--ease),backdrop-filter .6s var(--ease);
}
/* Scrim so nav stays legible over bright photography */
.header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,7,.80) 0%,rgba(8,8,7,.30) 60%,transparent 100%);
  transition:opacity .6s var(--ease);
}
.header.scrolled{
  height:var(--header-h-sm);
  background:rgba(8,8,7,.90);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--gold-hair);
}
.header.scrolled::before{ opacity:0; }
.header.scrolled .logo__mark{ width:38px; height:38px; }
.header.scrolled .logo__name{ font-size:1.16rem; }

.header__inner{
  width:100%; max-width:var(--container); margin-inline:auto;
  padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}

.nav{ display:flex; align-items:center; gap:2.1rem; }
.nav a{
  font-size:.67rem; font-weight:500; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ivory-70); position:relative; padding-block:.55rem;
  transition:color .4s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0);
  transition:transform .45s var(--ease);
}
.nav a:hover{ color:var(--ivory-2); }
.nav a:hover::after{ transform:scaleX(1); }
.nav a.active{ color:var(--gold-2); }
.nav a.active::after{ transform:scaleX(1); }

.header__act{ display:flex; align-items:center; gap:1.15rem; }

.burger{
  width:40px; height:40px; padding:0; background:none; border:0; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:6px;
}
.burger span{
  display:block; height:1px; width:26px; background:var(--ivory);
  transition:width .45s var(--ease),background .45s var(--ease);
}
.burger span:nth-child(2){ width:17px; }
.burger:hover span{ background:var(--gold-2); width:26px; }

/* ---------- MOBILE DRAWER ---------------------------------- */
.drawer{
  position:fixed; inset:0; z-index:120;
  background:var(--black);
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--gut) 3rem;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),visibility .55s;
  overflow-y:auto;
}
.drawer.open{ opacity:1; visibility:visible; transform:none; }
.drawer__top{
  position:absolute; top:0; left:0; right:0; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--gut);
}
.drawer__close{
  width:44px; height:44px; margin-right:-10px;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer; color:var(--ivory);
  font-size:1.85rem; line-height:1; transition:color .4s var(--ease);
}
.drawer__close:hover{ color:var(--gold-2); }
.drawer nav{ display:flex; flex-direction:column; }
.drawer nav a{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.6rem,6.5vw,2.3rem);
  color:var(--ivory-2);
  padding-block:.55rem;
  border-bottom:1px solid var(--ivory-07);
  display:flex; align-items:baseline; gap:1rem;
  transition:color .4s var(--ease),padding-left .4s var(--ease);
}
.drawer nav a .n{
  font-family:var(--sans); font-size:.58rem; font-weight:500;
  letter-spacing:.2em; color:var(--gold);
}
.drawer nav a:hover{ color:var(--gold-2); padding-left:.5rem; }
.drawer__foot{ margin-top:2.4rem; display:flex; flex-direction:column; gap:1.3rem; }
.drawer__meta{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ivory-32); line-height:2;
}
.drawer__meta a{
  display:inline-block; padding-block:.7rem; color:var(--gold-2);
  border-bottom:1px solid var(--gold-dim);
}

/* ---------- FOOTER ----------------------------------------- */
.footer{
  background:var(--black-2);
  border-top:1px solid var(--gold-hair);
  padding-block:clamp(56px,7vw,92px) 0;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.25fr;
  gap:clamp(2rem,4vw,3.6rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.footer__blurb{
  color:var(--ivory-50); font-size:.9rem; margin-top:1.5rem; max-width:34ch;
}
.footer h4{ color:var(--gold-2); margin-bottom:1.4rem; }
.footer ul{ list-style:none; display:flex; flex-direction:column; }
.footer ul a{
  display:block; padding-block:.62rem;
  font-size:.86rem; color:var(--ivory-50);
  transition:color .35s var(--ease);
}
.footer ul a:hover{ color:var(--gold-2); }

.contact-line{
  display:flex; align-items:flex-start; gap:.75rem;
  min-height:40px; padding-block:.35rem;
  font-size:.86rem; color:var(--ivory-50); margin-bottom:.35rem;
  transition:color .35s var(--ease);
}
.contact-line svg{ width:15px; height:15px; flex:none; margin-top:.35rem; color:var(--gold); }
a.contact-line:hover{ color:var(--gold-2); }
.contact-line b{ display:block; font-weight:500; color:var(--ivory-70); }
.contact-line span small{
  display:block; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ivory-32); margin-top:.15rem;
}

.socials{ display:flex; gap:.6rem; margin-top:1.5rem; }
.socials a{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--ivory-12); color:var(--ivory-50);
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.socials a svg{ width:16px; height:16px; }
.socials a:hover{ border-color:var(--gold); color:var(--gold-2); }

.vm-badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.7rem; }
.vm-badge{
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-2); border:1px solid var(--gold-dim);
  padding:.5rem .8rem;
}

.footer__bottom{
  border-top:1px solid var(--ivory-07);
  padding-block:1.7rem;
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; flex-wrap:wrap;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ivory-32);
}

/* ---------- FLOATING WHATSAPP ------------------------------ */
.wa{
  position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px);
  z-index:80;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--gold); color:var(--black);
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  transition:transform .45s var(--ease),background .45s var(--ease);
}
.wa svg{ width:26px; height:26px; }
.wa:hover{ transform:translateY(-3px); background:var(--gold-3); }

/* Sticky mobile enquiry bar */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:85;
  display:none;
  padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(8,8,7,.94);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--gold-hair);
  gap:.6rem;
  transform:translateY(110%);
  transition:transform .5s var(--ease);
}
.sticky-cta.show{ transform:none; }
.sticky-cta .btn{ flex:1; padding:.9rem 1rem; }