/* Floating glass pill header — colours sampled from the reference video */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500&display=swap');
:root{
  --hd-blue:#18649F;      /* nav text on light, CTA fill */
  --hd-deep:#005392;      /* deep-blue section / CTA on blue */
  --hd-glass-blue:#2B7CD9;/* header glass over blue sections */
  --hd-font:'Jost','Century Gothic',var(--font-body);
  --hd-ease:.4s cubic-bezier(.4,0,.2,1);
}
html{scroll-padding-top:6.5rem}
.site-header{position:fixed;top:14px;left:0;right:0;z-index:100;background:none;border:0;pointer-events:none}
.site-header .nav{
  pointer-events:auto;width:min(1180px,calc(100% - 2rem));max-width:none;margin:0 auto;
  padding:.5rem .55rem .5rem 1.6rem;border-radius:999px;gap:1.2rem;
  border:1px solid transparent;backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  transition:background var(--hd-ease),border-color var(--hd-ease),box-shadow var(--hd-ease);
}
.site-header .brand,.site-header .brand-sub,.site-header .nav-links a,.site-header .nav-cta{transition:color var(--hd-ease),background var(--hd-ease),border-color var(--hd-ease)}
.site-header .brand-name{font-family:var(--hd-font);font-size:1.15rem;font-weight:500;white-space:nowrap}
.site-header .brand-sub{display:none}
.site-header .brand{flex:none;flex-direction:row;align-items:center;gap:.75rem}
.site-header .brand-logo{flex:none;display:block;height:42px;width:auto;padding:3px 6px;background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.site-header .nav-links{align-items:center;gap:.2rem;margin-left:auto}
.site-header .nav-links>li>a{
  display:flex;align-items:center;font-family:var(--hd-font);font-size:.86rem;font-weight:400;
  letter-spacing:.03em;text-transform:uppercase;padding:.55rem .85rem;border:0;border-radius:999px;white-space:nowrap
}
.site-header .nav-links>li>a:hover,.site-header .nav-links a[aria-current="page"]{border:0;background:rgba(255,255,255,.18)}
.caret{display:inline-block;font-size:0;width:6px;height:6px;margin:0 0 3px .5rem;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.site-header .nav-cta{
  position:relative;margin-left:.9rem;font-family:var(--hd-font);text-transform:uppercase;letter-spacing:.03em;
  font-size:.86rem;padding:.7rem 1.4rem;border-radius:999px;background:var(--hd-blue);color:#fff;border:1px solid transparent;
  box-shadow:0 2px 8px rgba(0,60,110,.25)
}
.site-header .nav-cta::before{content:"";position:absolute;left:-.9rem;top:50%;height:22px;width:1px;background:currentColor;opacity:.3;transform:translateY(-50%)}
.site-header .nav-cta:hover{background:var(--hd-deep);border-color:transparent}

/* dropdown */
.site-header .nav-links .sub{top:calc(100% + 14px);left:50%;transform:translate(-50%,8px);border:0;border-radius:18px;padding:.6rem;min-width:290px;
  background:rgba(255,255,255,.97);box-shadow:0 18px 40px rgba(0,50,100,.18)}
.site-header .nav-links .has-sub:hover .sub,.site-header .nav-links .has-sub:focus-within .sub{transform:translate(-50%,0)}
.site-header .nav-links .has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px}
.site-header .nav-links .sub a{font-family:var(--hd-font);text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--hd-blue);border-radius:12px;padding:.6rem .9rem;background:none}
.site-header .nav-links .sub a:hover{background:#E5F0FD;color:var(--hd-deep)}

/* STATE 1 — over photo sections: translucent glass, white text */
.site-header[data-theme="photo"] .nav{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);box-shadow:0 6px 24px rgba(0,0,0,.12)}
.site-header[data-theme="photo"] .brand,.site-header[data-theme="photo"] .nav-links>li>a{color:#fff}
/* STATE 2 — over light sections: white pill, blue text */
.site-header[data-theme="light"] .nav{background:rgba(255,255,255,.94);border-color:rgba(24,100,159,.1);box-shadow:0 8px 28px rgba(24,100,159,.14)}
.site-header[data-theme="light"] .brand,.site-header[data-theme="light"] .nav-links>li>a{color:var(--hd-blue)}
.site-header[data-theme="light"] .nav-links>li>a:hover,.site-header[data-theme="light"] .nav-links a[aria-current="page"]{background:#E5F0FD}
/* STATE 3 — over blue sections: blue glass, white text */
.site-header[data-theme="blue"] .nav{background:rgba(43,124,217,.92);border-color:rgba(255,255,255,.35);box-shadow:0 8px 28px rgba(0,60,120,.3)}
.site-header[data-theme="blue"] .brand,.site-header[data-theme="blue"] .nav-links>li>a{color:#fff}
.site-header[data-theme="blue"] .nav-cta{background:var(--hd-deep);border-color:rgba(255,255,255,.4)}

/* clear the floating header */
.hero{padding-top:calc(clamp(3rem,7vw,4.5rem) + 4.5rem)}
.page-header{padding-top:calc(clamp(3.4rem,7vw,5rem) + 4.5rem)}

/* toggle + mobile */
.site-header[data-theme="light"] .nav-cta::before{background:var(--hd-blue)}
.site-header[data-theme="photo"] .nav-cta::before,.site-header[data-theme="blue"] .nav-cta::before{background:#fff}
.site-header[data-theme="light"] .nav-toggle span,.site-header[data-theme="light"] .nav-toggle span::before,.site-header[data-theme="light"] .nav-toggle span::after{background:var(--hd-blue)}
@media(max-width:1099px){
  .site-header .nav-links,.site-header .nav-cta{display:none}
  .site-header .nav-toggle{display:flex;margin-left:auto}
  /* open: the pill grows into a solid card */
  .site-header.is-open .nav{flex-wrap:wrap;border-radius:28px;background:#fff;border-color:rgba(24,100,159,.1);box-shadow:0 18px 40px rgba(0,50,100,.2);max-height:calc(100vh - 28px);overflow-y:auto}
  .site-header.is-open .brand{color:var(--hd-blue)}
  .site-header.is-open .nav-toggle span::before,.site-header.is-open .nav-toggle span::after{background:var(--hd-blue)}
  .site-header.is-open .nav>nav{order:3;width:100%}
  .site-header.is-open .nav-toggle{order:1}
  .site-header.is-open .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;position:static;width:100%;margin:.4rem 0 0;padding:0;background:none;box-shadow:none;border:0}
  .site-header.is-open .nav-links>li>a{color:var(--hd-blue);width:100%;border-radius:14px;padding:.8rem 1rem;justify-content:space-between}
  .site-header.is-open .nav-links>li>a:hover{background:#E5F0FD}
  .site-header.is-open .nav-links .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:none;min-width:0;padding:0 0 0 .8rem}
  .site-header.is-open .has-sub::after{display:none}
  .site-header.is-open .nav-cta{display:flex;justify-content:center;order:4;width:100%;margin:.5rem 0 .3rem}
  .site-header.is-open .nav-cta::before{display:none}
}