:root{
  --topbar-h:42px;
  --nav-h:78px;
  --header-h:calc(var(--topbar-h) + var(--nav-h));
}

/* ---------- shell ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0;
  width:100%; padding:0;
  background:transparent; border:0; border-radius:0;
  z-index:200;
  transition:box-shadow .4s var(--ease-soft);
}
.site-header.is-scrolled{ padding:0; box-shadow:0 16px 36px -22px rgba(18,24,31,.32); }

/* ---------- TOP BAR ---------- */
.topbar{
  height:var(--topbar-h);
  overflow:hidden;
  background:linear-gradient(160deg, var(--navy-deep) 0%, #0B2340 60%, var(--navy-deep) 100%);
  color:rgba(255,255,255,.82);
  transition:height .4s var(--ease-soft);
}
.site-header.is-scrolled .topbar{ height:0; }

.topbar-inner{
  height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.topbar-contact{ display:flex; align-items:center; gap:24px; min-width:0; }
.topbar-link{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:600; line-height:1;
  color:rgba(255,255,255,.82);
  white-space:nowrap; min-width:0;
  transition:color .3s;
}
.topbar-label{ overflow:hidden; text-overflow:ellipsis; }
.topbar-ico{
  width:26px; height:26px; flex-shrink:0;
  border-radius:50%;
  background:rgba(255,255,255,.09);
  color:var(--magenta-soft);
  display:flex; align-items:center; justify-content:center;
  transition:background .35s var(--ease-soft), color .35s, transform .45s var(--ease);
}
.topbar-link:hover{ color:var(--white); }
.topbar-link:hover .topbar-ico{
  background:linear-gradient(120deg, var(--magenta), var(--magenta-soft));
  color:var(--white);
  transform:rotate(-8deg) scale(1.08);
}
.topbar-social{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.topbar-social a{
  width:28px; height:28px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.8);
  display:flex; align-items:center; justify-content:center;
  transition:background .35s var(--ease-soft), border-color .35s, color .35s, transform .45s var(--ease);
}
.topbar-social a:hover{
  background:linear-gradient(120deg, var(--magenta), var(--magenta-soft));
  border-color:transparent; color:var(--white);
  transform:translateY(-3px);
}

/* ---------- NAVBAR ---------- */
.navbar{
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.navbar-inner{
  height:var(--nav-h);
  display:grid;
  grid-template-columns:auto 1fr auto;     /* logo | menu (centred in the free space) | buttons */
  align-items:center;
  gap:24px;
}
.navbar .brand, .mobile-nav-top .brand{ display:flex; align-items:center; flex-shrink:0; min-width:max-content; }
.brand-logo{ width:170px; max-width:none; height:auto; display:block; flex-shrink:0; }

.nav-links{ display:flex; align-items:center; justify-content:center; gap:2px; min-width:0; }
.nav-link{
  position:relative;
  padding:12px 14px;
  font-size:14.5px; font-weight:700; line-height:1;
  color:var(--ink-soft);
  white-space:nowrap;
  transition:color .3s;
}
.nav-link::after{
  content:'';
  position:absolute; left:14px; right:14px; bottom:4px;
  height:2px; border-radius:2px;
  background:linear-gradient(120deg, var(--magenta), var(--magenta-soft));
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav-link:hover{ color:var(--navy-deep); }
.nav-link:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-link.is-active{ color:var(--magenta); }
.nav-link.is-active::after{ transform:scaleX(1); }

/* ---------- buttons (same height, vertically centred) ---------- */
.navbar-actions{ display:flex; align-items:center; gap:8px; justify-self:end; }
.navbar-actions .magnetic{ display:inline-flex; align-items:center; }
.navbar-actions .btn{
  height:38px;
  padding:0 16px;
  justify-content:center;
  gap:7px;
  font-size:13px;
}
.navbar-actions .btn svg{ width:14px; height:14px; flex-shrink:0; }
.navbar-actions .btn-primary .label-short{ display:none; }

/* Talk to an Advisor (outlined, magenta) */
.btn-advisor{
  color:var(--magenta);
  border-color:rgba(138,31,92,.4);
  background:var(--white);
}
.btn-advisor:hover{ color:var(--white); border-color:var(--navy-deep); }
.btn-advisor .adv-short{ display:none; }

/* burger */
.nav-burger{
  display:none;
  width:40px; height:40px; flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--white);
  color:var(--navy-deep);
  align-items:center; justify-content:center;
  transition:background .3s, color .3s, border-color .3s;
}
.nav-burger:hover{ background:var(--navy-deep); color:var(--white); border-color:var(--navy-deep); }
.nav-burger svg{ width:16px; height:16px; }

/* ---------- responsive ---------- */

/* medium desktops: compact labels so everything fits on one line */
@media(max-width:1279px){
  .navbar-inner{ gap:16px; }
  .brand-logo{ width:150px; }
  .nav-link{ padding:12px 11px; font-size:14px; }
  .nav-link::after{ left:11px; right:11px; }
  .btn-advisor .adv-long{ display:none; }
  .btn-advisor .adv-short{ display:inline; }
  .navbar-actions .btn{ padding:0 14px; }
}

/* tablets & phones: burger menu */
@media(max-width:1100px){
  :root{ --nav-h:68px; }
  .nav-links{ display:none; }
  .nav-adv-wrap{ display:none; }              /* advisor button moves into the drawer */
  .nav-burger{ display:inline-flex; }
  .navbar-inner{ grid-template-columns:1fr auto; gap:12px; }
  .brand-logo{ width:150px; }
}

/* phones: no buttons in the header bar — just logo + burger */
@media(max-width:768px){
  .navbar-actions .magnetic{ display:none; }
}

@media(max-width:600px){
  .topbar-contact{ gap:14px; }
  .topbar-link{ font-size:12px; gap:8px; }
  .topbar-link:first-child .topbar-label{ display:none; }   /* email → icon only */
}

@media(max-width:420px){
  :root{ --topbar-h:40px; --nav-h:62px; }
  .brand-logo{ width:128px; }
  .navbar-actions{ gap:6px; }
  .navbar-actions .btn{ height:36px; padding:0 13px; font-size:12.5px; gap:6px; }
  .navbar-actions .btn-primary .label-long{ display:none; }
  .navbar-actions .btn-primary .label-short{ display:inline; }
  .nav-burger{ width:38px; height:38px; }
  .topbar-social{ gap:6px; }
  .topbar-social a{ width:26px; height:26px; }
}
@media(max-width:340px){
  .brand-logo{ width:116px; }
  .navbar-actions .btn svg{ display:none; }
  .navbar-actions .btn{ padding:0 11px; }
}

/* ---------- mobile drawer ---------- */
.mobile-nav{
  position:fixed; inset:0;
  height:100vh; height:100dvh;
  z-index:300;
  display:flex; flex-direction:column;
  padding:18px var(--gutter) 28px;
  background:var(--paper);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateY(-100%);
  transition:transform .55s var(--ease);
}
.mobile-nav.is-open{ transform:translateY(0); }
@media(min-width:1101px){ .mobile-nav{ display:none; } }
@media(max-width:1100px){ .mobile-nav{ display:flex; } }

.mobile-nav-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-shrink:0; }
.mobile-nav .mobile-nav-top .brand{ border:0; padding:0; display:flex; font-size:inherit; }
.mobile-nav-top .brand-logo{ width:140px; }

.mobile-links{ display:flex; flex-direction:column; gap:0; flex-shrink:0; }
.mobile-nav .mobile-links a{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--f-display);
  font-size:clamp(1.35rem, 5.6vw, 1.9rem);
  font-weight:600;
  color:var(--navy-deep);
  transition:color .3s, padding-left .4s var(--ease);
}
.mobile-nav .mobile-links a svg{ color:var(--ink-faint); transition:color .3s, transform .4s var(--ease); }
.mobile-nav .mobile-links a:hover{ color:var(--magenta); padding-left:6px; }
.mobile-nav .mobile-links a:hover svg{ color:var(--magenta); transform:translate(3px,-3px); }
.mobile-nav .mobile-links a.is-active{ color:var(--magenta); }

.mobile-nav .mobile-advisor{
  margin-top:24px; flex-shrink:0;
  height:44px; padding:0 20px;
  border:0;
  font-family:var(--f-body); font-size:14px;
  color:var(--white);
  justify-content:center;
}
.mobile-nav .mobile-advisor:hover{ color:var(--white); }
.mobile-nav-foot{ margin-top:auto; padding-top:26px; display:flex; flex-direction:column; gap:18px; flex-shrink:0; }
.mobile-nav .mobile-contact{ display:flex; flex-direction:column; gap:12px; }
.mobile-nav .mobile-contact a{
  display:flex; align-items:center; justify-content:flex-start; gap:12px;
  padding:0; border:0;
  font-family:var(--f-body); font-size:15px; font-weight:600; color:var(--ink-soft);
  word-break:break-all;
}
.mobile-nav .mobile-contact .topbar-ico{ background:var(--paper-alt); color:var(--magenta); }
.mobile-nav .mobile-social{ display:flex; gap:10px; }
.mobile-nav .mobile-social a{
  width:42px; height:42px; padding:0;
  border:1px solid var(--line); border-radius:50%;
  color:var(--navy-deep);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, color .3s, border-color .3s;
}
.mobile-nav .mobile-social a:hover{
  background:linear-gradient(120deg, var(--magenta), var(--magenta-soft));
  color:var(--white); border-color:transparent;
}

/* ---------- page offsets: content starts below the full header ---------- */
.hero{ padding-top:calc(var(--header-h) + 60px); }
.page-hero{ padding-top:calc(var(--header-h) + 70px); }
.clients-toolbar-wrap{ top:var(--nav-h); }
.clients-section{ scroll-margin-top:calc(var(--nav-h) + 80px); }
@media(max-width:600px){
  .hero{ padding-top:calc(var(--header-h) + 36px); }
  .page-hero{ padding-top:calc(var(--header-h) + 44px); }
}