/* ============================================================
   nav.css — the site navigation, shared by every page
   ------------------------------------------------------------
   One structure, size and behaviour everywhere, modelled on the
   resource pages. Each page keeps its own palette by setting the
   --nav-* and --mob-* colours in its own <style> (see the
   "NAV THEME" block on each page). The defaults below are the
   light cream theme; :where() keeps them at zero specificity so a
   page's :root values always win, whatever the load order.
   ============================================================ */
:where(:root){
  --nav-pad-x:5rem;
  --nav-pad-x-md:2.5rem;
  --nav-pad-x-sm:1.25rem;
  --nav-ease:cubic-bezier(.16,1,.3,1);

  --nav-top-bg:transparent;
  --nav-top-blur:none;
  --nav-stuck-bg:rgba(242,236,224,.92);
  --nav-stuck-border:rgba(9,9,12,.08);
  --nav-stuck-shadow:none;

  --nav-logo:#09090c;
  --nav-mark:#85601e;
  --nav-link:rgba(9,9,12,.66);
  --nav-link-hover:#09090c;
  --nav-line:#c8a46a;
  --nav-current:#85601e;

  --nav-btn-border:rgba(9,9,12,.18);
  --nav-btn-text:#09090c;
  --nav-btn-fill:#09090c;
  --nav-btn-fill-text:#f2ece0;

  --nav-panel-bg:#f2ece0;
  --nav-panel-border:rgba(9,9,12,.1);
  --nav-panel-text:rgba(9,9,12,.68);
  --nav-panel-hover:#09090c;
  --nav-panel-hover-bg:rgba(9,9,12,.04);
  --nav-panel-divider:rgba(9,9,12,.08);
  --nav-panel-shadow:0 24px 60px rgba(9,9,12,.1),0 4px 12px rgba(9,9,12,.06);

  --nav-hbg-line:#09090c;
  --nav-hbg-bg:transparent;
  --nav-hbg-border:transparent;

  --mob-bg:#111318;
  --mob-text:#f2ece0;
  --mob-accent:#c8a46a;
  --mob-muted:rgba(242,236,224,.66);
  --mob-border:rgba(200,164,106,.2);
  --mob-border2:rgba(200,164,106,.45);
}

/* ── Bar ─────────────────────────────────────────────────── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:800;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:2rem var(--nav-pad-x);
  background:var(--nav-top-bg);
  -webkit-backdrop-filter:var(--nav-top-blur);backdrop-filter:var(--nav-top-blur);
  border-bottom:1px solid transparent;
  transition:padding .45s var(--nav-ease),background .4s,border-color .4s,box-shadow .4s;
}
#nav.stk,#nav.sl,#nav.sd{
  padding-top:1rem;padding-bottom:1rem;
  background:var(--nav-stuck-bg);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-bottom-color:var(--nav-stuck-border);
  box-shadow:var(--nav-stuck-shadow);
}

#nav .nav-logo{
  font-family:var(--ff,'Cormorant Garamond',Georgia,serif);
  font-size:.95rem;font-weight:300;letter-spacing:.06em;line-height:1.3;
  color:var(--nav-logo);text-decoration:none;transition:color .3s;flex-shrink:0;
}
#nav .nav-logo b{color:var(--nav-mark);font-weight:400;font-style:italic}

/* ── Links ───────────────────────────────────────────────── */
#nav .nav-links{display:flex;align-items:center;gap:3rem;list-style:none;margin:0;padding:0}
#nav .nav-links a,
#nav .nav-drop-trigger{
  font-family:var(--fb,'DM Sans',system-ui,sans-serif);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  color:var(--nav-link);text-decoration:none;position:relative;transition:color .25s;
}
#nav .nav-links a::after,
#nav .nav-drop-trigger::after{
  content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;
  background:var(--nav-line);transition:width .38s var(--nav-ease);
}
#nav .nav-links a:hover,
#nav .nav-links a.active,
#nav .nav-drop.open .nav-drop-trigger,
#nav .nav-drop-trigger.active{color:var(--nav-link-hover)}
#nav .nav-links a:hover::after,
#nav .nav-links a.active::after{width:100%}
#nav .nav-drop.open .nav-drop-trigger::after,
#nav .nav-drop-trigger.active::after{width:calc(100% - 1.1rem)}

/* ── Resources menu ──────────────────────────────────────── */
#nav .nav-drop{position:relative}
#nav .nav-drop-trigger{
  display:inline-flex;align-items:center;gap:.45rem;
  background:none;border:0;padding:0;cursor:pointer;
}
#nav .nav-drop-trigger svg{flex-shrink:0;opacity:.5;transition:transform .3s var(--nav-ease),opacity .3s}
#nav .nav-drop.open .nav-drop-trigger svg{transform:rotate(180deg);opacity:1}

#nav .nav-drop-panel{
  position:absolute;top:calc(100% + 14px);left:50%;
  min-width:220px;padding:.6rem 0;
  background:var(--nav-panel-bg);border:1px solid var(--nav-panel-border);
  box-shadow:var(--nav-panel-shadow);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(-6px);
  transition:opacity .25s var(--nav-ease),transform .25s var(--nav-ease),visibility 0s linear .25s;
}
#nav .nav-drop.open .nav-drop-panel{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity .25s var(--nav-ease),transform .25s var(--nav-ease),visibility 0s;
}
/* notch, and an invisible bridge so the pointer can travel from the trigger to the panel */
#nav .nav-drop-panel::before{
  content:'';position:absolute;top:-5px;left:50%;width:9px;height:9px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--nav-panel-bg);
  border-left:1px solid var(--nav-panel-border);border-top:1px solid var(--nav-panel-border);
}
#nav .nav-drop-panel::after{content:'';position:absolute;top:-20px;left:0;right:0;height:20px}

#nav .nav-drop-item{
  display:flex;align-items:center;gap:.75rem;padding:.72rem 1.4rem;
  font-family:var(--fb,'DM Sans',system-ui,sans-serif);
  font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  color:var(--nav-panel-text);text-decoration:none;white-space:nowrap;
  transition:color .2s,background .2s;
}
#nav .nav-drop-item:hover,
#nav .nav-drop-item:focus-visible{color:var(--nav-panel-hover);background:var(--nav-panel-hover-bg)}
#nav .nav-drop-item.current{color:var(--nav-current)}
#nav .nav-drop-item svg{width:14px;height:14px;flex-shrink:0;opacity:.5;transition:opacity .2s}
#nav .nav-drop-item:hover svg,
#nav .nav-drop-item.current svg{opacity:1}
#nav .nav-drop-divider{height:1px;margin:.4rem 0;background:var(--nav-panel-divider)}

/* ── Book a Consultation ─────────────────────────────────── */
#nav .nav-btn{
  display:inline-flex;align-items:center;flex-shrink:0;
  padding:.6rem 1.5rem;border:1px solid var(--nav-btn-border);border-radius:9999px;
  font-family:var(--fb,'DM Sans',system-ui,sans-serif);
  font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--nav-btn-text);text-decoration:none;white-space:nowrap;
  position:relative;overflow:hidden;transition:color .3s,border-color .3s;
}
#nav .nav-btn::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:var(--nav-btn-fill);
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--nav-ease);
}
#nav .nav-btn:hover::before,
#nav .nav-btn:focus-visible::before{transform:scaleX(1)}
#nav .nav-btn:hover,
#nav .nav-btn:focus-visible{color:var(--nav-btn-fill-text);border-color:var(--nav-btn-fill)}
#nav .nav-btn span{position:relative;z-index:1}

/* ── Client Login (Osaic's secure site) + the consultation button ── */
#nav .nav-right{display:flex;align-items:center;gap:1.9rem;flex-shrink:0}
#nav .nav-login{
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  font-family:var(--fb,'DM Sans',system-ui,sans-serif);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  color:var(--nav-link);text-decoration:none;transition:color .25s;
}
#nav .nav-login:hover,#nav .nav-login:focus-visible{color:var(--nav-link-hover)}
#nav .nav-login svg{width:12px;height:12px;flex-shrink:0;opacity:.8}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Menu button (phones) ────────────────────────────────── */
#nav .hbg{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-width:44px;min-height:44px;padding:10px;margin:-8px -8px -8px 0;
  background:var(--nav-hbg-bg);border:1px solid var(--nav-hbg-border);border-radius:6px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;
}
#nav .hbg i{display:block;width:22px;height:1px;border-radius:2px;background:var(--nav-hbg-line)}

/* ── Phone menu ──────────────────────────────────────────── */
#mob{
  position:fixed;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1rem,3.2vh,2.4rem);padding:4.5rem 1.5rem 2.5rem;overflow-y:auto;
  background:var(--mob-bg);
  clip-path:polygon(0 0,100% 0,100% 0,0 0);
}
#mob.open{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
#mob .mob-a{
  font-family:var(--ff,'Cormorant Garamond',Georgia,serif);
  font-size:clamp(2.2rem,8vw,4.6rem);font-weight:300;line-height:1.1;letter-spacing:-.02em;
  color:var(--mob-text);text-decoration:none;padding:.15rem 1.5rem;transition:color .2s;
}
#mob .mob-a:hover,
#mob .mob-a.active{color:var(--mob-accent)}
#mob-x{
  position:absolute;top:1.25rem;right:1.25rem;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:.5rem;cursor:pointer;
  font-family:var(--ff,'Cormorant Garamond',Georgia,serif);font-size:1.8rem;line-height:1;
  color:var(--mob-muted);transition:color .2s;
}
#mob-x:hover{color:var(--mob-text)}
#mob .mob-resources{display:flex;flex-direction:column;align-items:center;width:100%;max-width:30rem}
#mob .mob-res-label{
  font-family:var(--fb,'DM Sans',system-ui,sans-serif);
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--mob-accent);margin-bottom:1rem;
}
#mob .mob-res-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
#mob .mob-res-link{
  font-family:var(--fb,'DM Sans',system-ui,sans-serif);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--mob-muted);text-decoration:none;
  padding:.6rem 1rem;border:1px solid var(--mob-border);transition:color .2s,border-color .2s;
}
#mob .mob-res-link:hover,
#mob .mob-res-link.current{color:var(--mob-accent);border-color:var(--mob-border2)}

#mob .mob-login{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:.2rem;padding:.65rem 1.1rem;
  font-family:var(--fb,'DM Sans',system-ui,sans-serif);
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--mob-muted);text-decoration:none;border:1px solid var(--mob-border);transition:color .2s,border-color .2s;
}
#mob .mob-login:hover{color:var(--mob-accent);border-color:var(--mob-border2)}
#mob .mob-login svg{width:13px;height:13px;flex-shrink:0}

/* ── Responsive ──────────────────────────────────────────── */
/* Wider screens: the menu links sit on the page's centre line. Where the
   buttons on the right leave too little room for that, the links stop
   4.5rem short of them. Narrower screens keep the links evenly spaced. */
@media(min-width:1280px){
  #nav{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);column-gap:4.5rem}
  #nav .nav-logo{justify-self:start}
  #nav .nav-right{justify-self:end}
}
@media(max-width:1100px){
  #nav{padding-left:var(--nav-pad-x-md);padding-right:var(--nav-pad-x-md)}
  #nav .nav-links{gap:2.2rem}
}
@media(max-width:960px){
  #nav .nav-links,#nav .nav-right{display:none}
  #nav .hbg{display:flex}
}
@media(max-width:480px){
  #nav{padding-left:var(--nav-pad-x-sm);padding-right:var(--nav-pad-x-sm)}
}
/* short phones (iPhone SE): keep the whole menu on one screen */
@media(max-height:640px){
  #mob{padding-top:3.5rem;padding-bottom:1.25rem;gap:.85rem}
}
@media(prefers-reduced-motion:reduce){
  #nav,#nav .nav-drop-panel,#nav .nav-btn::before{transition:none}
}