/* ═══════════════════════════════════════════════════════════════
   DIRIGO — the header.
   A floating glass capsule rather than links loose on the page: it gives
   the nav an edge to sit against on both paper and full-bleed dark blocks,
   and something to contract into once the reader starts scrolling.
   ═══════════════════════════════════════════════════════════════ */

.site-header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:50;
  padding-block:1.15rem;
  transition:padding-block .55s var(--ease);
}
.site-header.is-docked{padding-block:.5rem}

.header-shell{
  width:var(--shell);margin-inline:auto;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:1.5rem;padding:.42rem .42rem .42rem 1.5rem;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  backdrop-filter:blur(20px) saturate(1.5);
  transition:background .45s var(--ease),border-color .45s var(--ease),
             box-shadow .45s var(--ease);
}
.is-docked .header-shell{
  background:rgba(255,255,255,.88);
  box-shadow:0 14px 38px -26px rgba(0,0,0,.55);
}

/* ── lockup ──────────────────────────────────────────────────── */
.wordmark{position:relative;display:block;line-height:0;padding-inline-end:.4rem}
.wordmark img{
  width:clamp(108px,9.5vw,142px);height:auto;
  transition:opacity .35s var(--ease);
}
.wordmark .mark-light{position:absolute;inset-block-start:0;inset-inline-start:0;opacity:0}

/* ── links, with a pill that slides between them ─────────────────
   The pill is one element moved by JS, so travel between items is a single
   continuous motion instead of two independent fades. */
.hnav{position:relative;justify-self:center;display:flex;gap:.1rem}
.hnav a{
  position:relative;z-index:2;padding:.6rem 1.05rem;border-radius:999px;
  font-size:.92rem;letter-spacing:.01em;color:var(--ink-soft);
  transition:color .35s var(--ease);white-space:nowrap;
}
.hnav a:hover,.hnav a.is-active{color:var(--ink)}
.hnav-pill{
  position:absolute;z-index:1;inset-block:0;left:0;width:0;
  border-radius:999px;background:rgba(0,0,0,.065);
  opacity:0;pointer-events:none;
  transition:transform .5s var(--ease),width .5s var(--ease),opacity .35s var(--ease);
}
.hnav-pill.on{opacity:1}

/* ── call to action ──────────────────────────────────────────── */
.header-cta{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.72rem 1.5rem;border-radius:999px;
  font-size:.9rem;font-weight:500;letter-spacing:.02em;
  background:#e7e6e3;color:var(--ink);border:1px solid rgba(0,0,0,.06);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
  will-change:transform;
}
.header-cta svg{transition:transform .45s var(--ease)}
.header-cta:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.header-cta:hover svg{transform:translateX(-4px)}

/* ── burger ──────────────────────────────────────────────────── */
.menu-btn{
  display:none;width:44px;height:44px;border-radius:999px;
  border:1px solid var(--line);background:transparent;cursor:pointer;
  place-items:center;gap:5px;padding:0;
}
.menu-btn i{
  display:block;width:17px;height:1.5px;background:var(--ink);
  transition:transform .45s var(--ease),opacity .3s var(--ease);
}
.menu-open .menu-btn i:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-open .menu-btn i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ── header over a dark section ──────────────────────────────── */
.site-header.is-invert .header-shell{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);
}
.site-header.is-invert.is-docked .header-shell{background:rgba(20,20,20,.66)}
.site-header.is-invert .hnav a{color:rgba(255,255,255,.68)}
.site-header.is-invert .hnav a:hover,
.site-header.is-invert .hnav a.is-active{color:#fff}
.site-header.is-invert .hnav-pill{background:rgba(255,255,255,.14)}
.site-header.is-invert .header-cta{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.24)}
.site-header.is-invert .header-cta:hover{background:#fff;border-color:#fff;color:var(--ink)}
.site-header.is-invert .menu-btn{border-color:rgba(255,255,255,.28)}
.site-header.is-invert .menu-btn i{background:#fff}
.site-header.is-invert .wordmark .mark-dark{opacity:0}
.site-header.is-invert .wordmark .mark-light{opacity:1}

/* ── full-screen menu ────────────────────────────────────────────
   Wiped open with clip-path rather than faded, so the panel arrives with a
   direction instead of just appearing. */
.menu-overlay{
  position:fixed;inset:0;z-index:46;background:var(--paper);
  display:grid;align-content:center;gap:0;
  padding:7rem 7vw 3rem;
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .8s var(--ease),visibility 0s linear .8s;
}
.menu-open .menu-overlay{
  clip-path:inset(0 0 0 0);visibility:visible;
  transition:clip-path .8s var(--ease),visibility 0s;
}
.menu-list{display:grid;list-style:none;margin:0;padding:0}
.menu-list li{border-block-end:1px solid var(--line)}
.menu-list li:first-child{border-block-start:1px solid var(--line)}
.menu-list a{
  display:flex;align-items:baseline;gap:1rem;padding:1.15rem 0;
  font-weight:800;font-size:clamp(1.7rem,8vw,2.6rem);letter-spacing:-.03em;
  opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;
}
.menu-list a em{
  font-style:normal;font-size:.72rem;font-weight:400;letter-spacing:.24em;
  color:var(--cyan);
}
.menu-open .menu-list a{opacity:1;transform:none}
.menu-open .menu-list li:nth-child(1) a{transition-delay:.22s}
.menu-open .menu-list li:nth-child(2) a{transition-delay:.29s}
.menu-open .menu-list li:nth-child(3) a{transition-delay:.36s}
.menu-open .menu-list li:nth-child(4) a{transition-delay:.43s}
.menu-open .menu-list li:nth-child(5) a{transition-delay:.5s}
.menu-foot{
  margin-top:2.6rem;display:grid;gap:.9rem;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease) .6s,transform .5s var(--ease) .6s;
}
.menu-open .menu-foot{opacity:1;transform:none}
.menu-foot a{font-size:1.02rem;color:var(--ink-soft);width:max-content}
.menu-foot a:hover{color:var(--cyan)}
body.menu-open{overflow:hidden}

@media(max-width:900px){
  .hnav,.header-cta{display:none}
  .menu-btn{display:grid}
  .header-shell{padding:.4rem .4rem .4rem 1.1rem}
}
@media(min-width:901px){
  .menu-overlay{display:none}
}

@media(prefers-reduced-motion:reduce){
  .menu-overlay{transition:none}
  .menu-list a,.menu-foot{transition:none;opacity:1;transform:none}
  .hnav-pill{transition:opacity .2s}
}

/* right-hand cluster: CTA plus the burger that replaces it on small screens */
.header-end{display:flex;align-items:center;gap:.5rem;justify-self:end}

/* ── social in the header ─────────────────────────────────────
   Smaller than the footer set, and folded away before the capsule gets
   crowded — the overlay menu carries them on small screens. */
.social-head{gap:.35rem;margin-inline-end:.35rem}
.social-head a{width:34px;height:34px}
.social-head svg{width:15px;height:15px}
.site-header.is-invert .social a{border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.72)}
.site-header.is-invert .social a:hover{border-color:#fff;color:#fff}
@media(max-width:1150px){.social-head{display:none}}

/* The menu panel is always light, so the header drops any inversion it
   was carrying for the section underneath — otherwise the close control
   is white on white and the menu cannot be dismissed. */
body.menu-open .site-header .header-shell{background:transparent;border-color:transparent;box-shadow:none}
body.menu-open .site-header .menu-btn{border-color:var(--line)}
body.menu-open .site-header .menu-btn i{background:var(--ink)}
body.menu-open .site-header .wordmark .mark-dark{opacity:1}
body.menu-open .site-header .wordmark .mark-light{opacity:0}
body.menu-open .site-header .hnav a{color:var(--ink-soft)}