/* ============================================================
   HEADER — sticky bar, logo, nav, theme toggle, mobile drawer
   ============================================================ */

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-header);
  height: var(--header-h);
  display:flex; align-items:center;
  transition: transform .55s var(--e-out), background-color .45s var(--e-out),
              border-color .45s var(--e-out), backdrop-filter .45s var(--e-out), height .45s var(--e-out);
  border-bottom:1px solid transparent;
}
.site-header.is-solid{
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom-color: var(--glass-line);
}
/* the header never hides — it is pinned for the whole scroll */
.site-header.is-open{
  /* above the drawer, so the logo and the close button stay reachable */
  z-index: calc(var(--z-menu) + 1);
  transform:none; background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none; border-color:transparent;
}
.site-header.is-open .logo__name{ color: var(--text-invert); }
.site-header.is-open .logo__sub{ color: color-mix(in srgb, var(--text-invert) 60%, transparent); }
.site-header.is-open .logo__mark{ color: var(--accent); }
.site-header.is-open .theme-btn{
  border-color: color-mix(in srgb, var(--text-invert) 28%, transparent);
  background: color-mix(in srgb, var(--text-invert) 10%, transparent);
  color: var(--text-invert);
}
.site-header.is-open .hd__cta{ display:none; }

.hd{
  width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
}
@media (max-width:520px){ .hd{ gap:.6rem; } }

/* ---------------- Logo ---------------- */
.logo{ display:flex; align-items:center; gap:.75rem; min-width:0; }
.logo__txt{ min-width:0; }
.logo__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* narrow phones: the mark and name only, so the menu button always fits */
@media (max-width:430px){
  .logo__sub{ display:none; }
  .logo__mark{ width:31px; height:31px; }
  .logo__name{ font-size:.98rem; }
  .logo{ gap:.55rem; }
}
.logo__mark{ width:38px; height:38px; color:var(--accent); flex:none; }
.logo__mark svg{ width:100%; height:100%; }
.logo__mark svg [data-spin]{ transform-origin:50% 50%; transition: transform .9s var(--e-out); }
.logo:hover .logo__mark svg [data-spin]{ transform: rotate(90deg); }
.logo__txt{ display:grid; line-height:1; }
.logo__name{
  font-family:var(--f-display); font-weight:400; letter-spacing:.02em;
  font-size: clamp(1.02rem, 1.4vw, 1.28rem); color:var(--text);
}
.logo__sub{
  font-size:8.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--text-mut); margin-top:.35em;
}

/* ---- over a full-bleed dark hero, before the bar turns solid ---- */
body[data-hero] .site-header:not(.is-solid):not(.is-open) .logo__name,
body[data-hero] .site-header:not(.is-solid):not(.is-open) .nav__link{ color:#fff; }
body[data-hero] .site-header:not(.is-solid):not(.is-open) .logo__sub{ color:rgba(255,255,255,.66); }
body[data-hero] .site-header:not(.is-solid):not(.is-open) .logo__mark{ color:var(--th-gold); }
body[data-hero] .site-header:not(.is-solid):not(.is-open) .nav__link{ color:rgba(255,255,255,.82); }
body[data-hero] .site-header:not(.is-solid):not(.is-open) .nav__link.is-active{ color:#fff; }
body[data-hero] .site-header:not(.is-solid):not(.is-open) .theme-btn,
body[data-hero] .site-header:not(.is-solid):not(.is-open) .burger{
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.10);
  color:#fff;
}
body[data-hero] .site-header:not(.is-solid):not(.is-open) .burger i{ background:#fff; }
body[data-hero] .site-header:not(.is-solid):not(.is-open) .hd__cta{
  --btn-bg:#fff; --btn-fg:#1A0616;
}

/* ---------------- Desktop nav ---------------- */
.nav{ display:flex; align-items:center; gap: clamp(.25rem,1.4vw,1.35rem); }
@media (max-width:1080px){ .nav{ display:none; } }

.nav__link{
  position:relative; display:inline-block;
  padding:0 .35rem; height:1.6em; line-height:1.6em;
  font-size:var(--t-xs); font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-soft);
  transition: color .35s var(--e-out);
  overflow:hidden; vertical-align:middle;
}
.nav__link span{
  display:block; height:1.6em; line-height:1.6em;
  transition: transform .5s var(--e-out);
}
.nav__link span[data-ghost]{
  position:absolute; left:.35rem; right:.35rem; top:0;
  color:var(--accent); transform:translateY(100%);
}
.nav__link:hover span[data-real]{ transform:translateY(-100%); }
.nav__link:hover span[data-ghost]{ transform:translateY(0); }
.nav__link::after{
  content:""; position:absolute; left:.35rem; right:.35rem; bottom:0; height:2px;
  border-radius:2px;
  background-image: var(--grad-hot); transform:scaleX(0); transform-origin:0 50%;
  transition: transform .5s var(--e-out);
}
.nav__link.is-active{ color:var(--text); }
.nav__link.is-active::after{ transform:scaleX(1); }

/* ---------------- Right cluster ---------------- */
.hd__right{ display:flex; align-items:center; gap:.7rem; flex:none; }

.theme-btn{
  width:42px; height:42px; border-radius:50%; flex:none;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  display:grid; place-items:center; cursor:pointer; position:relative; overflow:hidden;
  transition: border-color .4s var(--e-out), background-color .4s var(--e-out), transform .4s var(--e-out);
}
.theme-btn:hover{ border-color:transparent; color:#fff; transform:rotate(18deg);
  background-image: var(--grad-hot); box-shadow: var(--shadow-glow); }
.theme-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.3; position:absolute;
  transition: transform .55s var(--e-spring), opacity .35s var(--e-out); }
.theme-btn .ico-sun{ transform: translateY(0) rotate(0); opacity:1; }
.theme-btn .ico-moon{ transform: translateY(120%) rotate(-70deg); opacity:0; }
:root[data-theme="dark"] .theme-btn .ico-sun{ transform: translateY(-120%) rotate(70deg); opacity:0; }
:root[data-theme="dark"] .theme-btn .ico-moon{ transform:none; opacity:1; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .ico-sun{ transform: translateY(-120%) rotate(70deg); opacity:0; }
  :root:not([data-theme="light"]) .theme-btn .ico-moon{ transform:none; opacity:1; }
}

.hd__cta{ display:inline-flex; }
@media (max-width:640px){ .hd__cta{ display:none; } }

/* ---------------- Burger ---------------- */
.burger{
  display:none; width:44px; height:44px; border-radius:50%; flex:none;
  border:1px solid var(--line); background:var(--surface); cursor:pointer;
  position:relative; z-index:calc(var(--z-menu) + 2);
  transition: border-color .4s var(--e-out), background-color .4s var(--e-out);
}
@media (max-width:1080px){ .burger{ display:grid; place-items:center; } }
.burger:hover{ border-color:transparent; background-image: var(--grad-hot); }
.burger:hover i{ background:#fff; }
.burger i{
  display:block; width:17px; height:1.4px; background:var(--text); border-radius:2px;
  position:absolute; left:50%; margin-left:-8.5px;
  transition: transform .5s var(--e-out), opacity .3s var(--e-out), background-color .4s;
}
.burger i:nth-child(1){ top:16px; }
.burger i:nth-child(2){ top:21.3px; }
.burger i:nth-child(3){ top:26.6px; }
.site-header.is-open .burger i{ background: var(--text-invert); }
.site-header.is-open .burger{ border-color: rgba(255,255,255,.28); background:transparent; }
.site-header.is-open .burger i:nth-child(1){ transform: translateY(5.3px) rotate(45deg); }
.site-header.is-open .burger i:nth-child(2){ opacity:0; transform:scaleX(.2); }
.site-header.is-open .burger i:nth-child(3){ transform: translateY(-5.3px) rotate(-45deg); }

/* ---------------- Mobile drawer ---------------- */
.drawer{
  position:fixed; inset:0; z-index:var(--z-menu);
  background: var(--bg-invert); color: var(--text-invert);
  clip-path: circle(0% at calc(100% - 44px) 44px);
  transition: clip-path .85s var(--e-in-out);
  overflow-y:auto; display:flex; flex-direction:column;
  visibility:hidden;
}
.drawer.is-open{ clip-path: circle(150% at calc(100% - 44px) 44px); visibility:visible; }

.drawer__in{
  width:var(--wrap); margin-inline:auto;
  padding-top: calc(var(--header-h) + 2.4rem); padding-bottom: 3rem;
  display:grid; gap: clamp(2rem,5vw,3.4rem);
  flex:1; align-content:start;
}
.drawer__nav{ display:grid; gap:.2rem; }
.drawer__link{
  position:relative; display:flex; align-items:baseline; gap:1.1rem;
  padding: clamp(.5rem,1.4vw,.85rem) 0;
  font-family:var(--f-display); font-weight:300;
  font-size: clamp(2rem, 7.5vw, 3.6rem); line-height:1.08; letter-spacing:-.02em;
  color: var(--text-invert);
  opacity:0; transform: translateY(38px);
  transition: color .35s var(--e-out), opacity .6s var(--e-out), transform .7s var(--e-out);
  transition-delay: calc(var(--di,0) * 65ms);
}
.drawer.is-open .drawer__link{ opacity:1; transform:none; }
.drawer__link i{
  font-family:var(--f-mono); font-style:normal;
  font-size:.72rem; letter-spacing:.1em; opacity:.4;
}
.drawer__link:hover{ color: var(--accent); }

.drawer__foot{
  border-top:1px solid rgba(255,255,255,.14);
  padding-top: clamp(1.4rem,3vw,2.2rem);
  display:grid; gap:1.1rem;
  opacity:0; transform:translateY(24px);
  transition: opacity .6s var(--e-out) .45s, transform .7s var(--e-out) .45s;
}
:root[data-theme="dark"] .drawer__foot{ border-top-color: rgba(20,16,14,.16); }
.drawer.is-open .drawer__foot{ opacity:1; transform:none; }
.drawer__foot a{ color: var(--text-invert); }
.drawer__foot a:hover{ color: var(--accent); }
.drawer__row{ display:flex; flex-wrap:wrap; gap:1rem 1.6rem; align-items:center; }

.drawer__social{ display:flex; gap:.6rem; }
.drawer__social a{
  width:46px; height:46px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--text-invert) 26%, transparent);
  display:grid; place-items:center; color: var(--text-invert);
  transition: background-image .35s, border-color .35s, color .35s, transform .4s var(--e-out);
}
.drawer__social a:hover{
  background-image: var(--grad-hot); border-color:transparent; color:#fff;
  transform: translateY(-3px);
}
.drawer__social svg{ width:17px; height:17px; fill:currentColor; }

.drawer__cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: 1.05em 2em; border-radius: var(--r-pill);
  background-image: var(--grad-hot); color:#fff;
  font-size:var(--t-sm); font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  box-shadow: var(--shadow-glow);
  transition: transform .4s var(--e-out);
}
.drawer__cta:hover{ transform: translateY(-2px); color:#fff; }
.drawer__phone{
  font-size: var(--t-md); letter-spacing:.1em;
  color: var(--text-invert);
}
.drawer__row .meta{ color: color-mix(in srgb, var(--text-invert) 62%, transparent); }
.drawer__mail{
  font-family:var(--f-display); font-size: clamp(1.05rem,3.4vw,1.6rem);
  font-weight:300; word-break:break-word;
}