/* =========================================================
   CLASSIC ESTATE HEADER  (chosen from prototype H2, 2026-07-11)
   Thin navy info strip (phone · email | WhatsApp · EN · AED)
   over a solid white main bar (lockup · nav · gold CTA).
   Loaded AFTER site.css so it overrides the base header rules
   without editing the shared file.
   ========================================================= */

.hdr{
  top:0; left:0; right:0;
  width:100%; max-width:none;
  margin:0; border-radius:0; overflow:visible;
  background:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border:none; box-shadow:none;
}

/* ---------- navy info strip ---------- */
.util{
  background:var(--ink) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border-bottom:none;
}
.util-in{ max-width:1440px; padding:.14rem clamp(18px,3vw,44px); }
.util-l{ gap:1.5rem; }
.util-r{ gap:1.1rem; }
.util-chip{ font-size:11px; letter-spacing:.1em; padding:.08rem .4rem; }
.util-link{ font-size:12px; letter-spacing:.03em; }
.util-link svg{ color:var(--champagne); }
/* navy strip needs light text (base .util-link/.util-chip are ink-toned) */
.hdr .util-link{ color:rgba(255,255,255,.78); }
.hdr .util-link:hover{ color:#fff; }
.hdr .util-chip{ color:rgba(255,255,255,.62); }
.hdr .util-chip:hover{ color:#fff; }

/* ---------- solid white main bar ---------- */
.mnav{
  background:#fff !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 30px -18px rgba(12,26,46,.28);
  transition:box-shadow var(--dur-base) var(--ease);
}
.hdr.scrolled .mnav{ background:#fff !important; box-shadow:0 16px 40px -20px rgba(12,26,46,.45); }
.hdr.scrolled .util{ background:var(--ink) !important; }
.mnav-in{ max-width:1440px; padding:.8rem clamp(18px,3vw,44px); gap:1.4rem; }

/* lockup — full brand, always SILVER OAK PROPERTIES */
.lockup img{ height:38px; }
.lockup .wm{ font-size:22px; letter-spacing:.12em; }

/* nav — slimmer so 7 items + CTA fit on one line */
.ng{ gap:1.05rem; }
.ng a{ font-size:12.5px; letter-spacing:.04em; padding:.3rem 0; }
.ng a[aria-current]{ color:var(--gold-deep); }
.ng a[aria-current]::after{ transform:scaleX(1); transform-origin:left; }

/* gold CTA */
.hdr-cta{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  background:var(--gold-deep); /* solid dark gold — no gradient (user 2026-07-15) */
  border-radius:var(--r-pill); padding:10px 20px;
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  white-space:nowrap; box-shadow:0 10px 24px -12px rgba(160,124,60,.55);
  color:#fff;
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.hdr-cta:hover{ transform:translateY(-1px); box-shadow:0 14px 30px -12px rgba(160,124,60,.7); }

/* ---------- responsive ---------- */
/* the classic bar needs more room than the old capsule: collapse a little earlier */
@media (max-width:1210px){
  .ng.r{ display:none; }
  .hb{ display:inline-flex; }
}
@media (max-width:640px){
  .hdr-cta{ display:none; }
  /* Owner 2026-07-30: the mark and wordmark read too small on a phone. The gold CTA
     is already hidden here, so the bar holds only lockup + hamburger and has room.
     Budget at 360px: 36 (mark) + 10 (gap) + ~212 ("SILVER OAK PROPERTIES" at 15.5px
     with .07em tracking) + 44 (hamburger) + 36 (padding) = ~338px. Fits with margin. */
  .lockup img{ height:36px; }
  .lockup .wm{ font-size:15.5px; letter-spacing:.07em; }
}
/* Below ~360px the wordmark is the first thing that would wrap, so step it down
   rather than let it break onto two lines next to the mark. */
@media (max-width:359px){
  .lockup img{ height:32px; }
  .lockup .wm{ font-size:13px; letter-spacing:.05em; }
}
/* keep the strip's email from crowding small screens */
@media (max-width:760px){
  .util-l .util-mail{ display:none; }
}

/* respect reduced-motion / no-js: header still visible */
.no-js .hdr{ opacity:1; }

/* ---------- Properties mega menu (hover/focus; desktop nav only) ---------- */
.nmega{ position:relative; display:inline-flex; align-items:center; } /* must layout identically to sibling .ng a items - verified: link tops equal */
.nmega::after{ content:""; position:absolute; left:-30px; right:-30px; top:100%; height:22px; } /* hover bridge across the bar's bottom padding */
.nmega-panel{
  position:absolute; left:-28px; top:calc(100% + 21px);
  width:640px; max-width:calc(100vw - 48px);
  background:#fff; border:1px solid var(--line); border-top:2px solid var(--gold);
  border-radius:0 0 12px 12px; box-shadow:0 34px 64px -30px rgba(12,26,46,.4);
  display:grid; grid-template-columns:repeat(3,1fr); gap:0 30px; padding:22px 28px 24px;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nmega:hover .nmega-panel, .nmega:focus-within .nmega-panel{ opacity:1; visibility:visible; transform:translateY(0); }
/* compact single-column variant (About menu) - same component, sized for 3 links */
.nmega-panel.sm{ width:232px; grid-template-columns:1fr; padding:16px 22px 18px; }
.nm-h{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:9px; }
.ng .nmega-panel a{ display:block; font-size:13.5px; text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink); padding:6px 0; }
.ng .nmega-panel a::after{ display:none; }
.ng .nmega-panel a:hover{ color:var(--gold-deep); }
@media (max-width:1210px){ .nmega-panel, .nmega::after{ display:none; } }

/* ---------- Header currency selector (indicative conversion; AED is canonical) ---------- */
.curr{ position:relative; display:inline-flex; }
.curr-b{ display:inline-flex; align-items:center; gap:.35rem; background:none; border:none; cursor:pointer; font:inherit; }
.curr-b svg{ width:11px; height:11px; opacity:.55; transition:transform var(--dur-fast) var(--ease); }
.curr-b[aria-expanded="true"] svg{ transform:rotate(180deg); }
.curr .cs{ display:inline-flex; width:15px; justify-content:center; font-weight:600; }
.curr-l{ position:absolute; right:0; top:calc(100% + 9px); z-index:130; min-width:122px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 20px 48px -18px rgba(12,26,46,.4); padding:6px; margin:0; list-style:none; }
.curr-l li{ display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:7px; font-size:12.5px; font-weight:500; color:var(--ink); cursor:pointer; transition:background var(--dur-fast); }
.curr-l li:hover{ background:var(--paper2); }
.curr-l li[aria-selected="true"]{ color:var(--gold-deep); font-weight:600; }
.curr-l li.na{ opacity:.4; cursor:default; }