/* chrome — M2: near-invisible on the hero, glass on scroll, docking wordmark */
#loader{position:fixed;inset:0;z-index:1000;background:var(--ivory);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.4rem;transition:opacity 1s var(--ease),visibility 1s}
#loader.done{opacity:0;visibility:hidden}
#loader img{width:60px;height:auto}
#loader .tide{width:130px;height:1px;background:var(--travertine);position:relative;overflow:hidden}
#loader .tide span{position:absolute;inset:0;background:var(--lagoon);transform:translateX(-100%);animation:tide 1.5s var(--ease) infinite}
#loader .count{font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;color:var(--driftwood)}
@keyframes tide{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* back to top — quiet, appears after the first scroll */
#to-top{position:fixed;right:1.6rem;bottom:1.6rem;z-index:800;width:46px;height:46px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(11,62,74,.2);
  background:var(--ivory);color:var(--deep);cursor:pointer;box-shadow:0 14px 34px -18px rgba(14,78,92,.45);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s,background .3s var(--ease),color .3s var(--ease)}
#to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
#to-top:hover{background:var(--deep);color:var(--ivory)}
#to-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* scroll progress — the waterline, working */
#progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:950;pointer-events:none}
#progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--shallow),var(--lagoon));
  transform-origin:left;transform:scaleX(0)}

header.site{position:fixed;top:0;left:0;right:0;z-index:900;color:var(--ivory);
  transition:background .6s var(--ease),color .6s,box-shadow .6s,backdrop-filter .6s}
header.site .inner{max-width:var(--w-max);margin:0 auto;padding:1.05rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:2rem}
header.site .logo{display:flex;align-items:center;gap:.8rem}
header.site .logo img{width:32px;height:auto;filter:brightness(0) invert(1);transition:filter .6s,width .6s var(--ease)}
header.site .logo .wm{font-family:var(--serif);font-size:1rem;letter-spacing:.38em;text-transform:uppercase;line-height:1.1;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
header.site .logo .wm small{display:block;font-family:var(--mono);font-size:.52rem;letter-spacing:.22em;opacity:.7;margin-top:.2rem}
/* on the hero, the wordmark lives IN the hero; the nav copy waits invisible */
header.site.on-hero .js-nav-wm{opacity:0;transform:translateY(6px);pointer-events:none}
header.site.on-hero.scrolled .js-nav-wm,
header.site:not(.on-hero) .js-nav-wm{opacity:1;transform:none;pointer-events:auto}
header.site nav{display:flex;gap:2rem;align-items:center}
header.site nav a{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.8;
  transition:opacity .35s;position:relative}
header.site nav a:hover,header.site nav a[aria-current]{opacity:1}
header.site nav a[data-sec][aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;opacity:.6}
header.site .nav-reserve{border:1px solid currentColor;border-radius:999px;padding:.55rem 1.35rem;opacity:1;
  transition:background .5s var(--ease),opacity .35s}
header.site .nav-reserve:hover{background:rgba(250,247,240,.14)}
header.site.scrolled{background:rgba(250,247,240,.72);backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);color:var(--charcoal);
  box-shadow:inset 0 -1px 0 rgba(44,40,35,.08)}
header.site.scrolled .logo img{filter:none}
header.site.scrolled .nav-reserve:hover{background:var(--deep);color:var(--ivory);border-color:var(--deep)}
header.site.solid{background:var(--ivory);color:var(--charcoal);box-shadow:inset 0 -1px 0 rgba(44,40,35,.08)}
header.site.solid .logo img{filter:none}
#menu-toggle{display:none;background:none;border:none;color:inherit;font:inherit;cursor:pointer;
  letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;font-weight:600}
@media(max-width:940px){
  header.site nav{position:fixed;inset:0;background:var(--abyss);color:var(--ivory);
    flex-direction:column;justify-content:center;gap:2rem;transform:translateY(-101%);transition:transform .7s var(--ease)}
  header.site nav.open{transform:translateY(0)}
  header.site nav a{font-size:1.05rem}
  #menu-toggle{display:block;position:relative;z-index:2}
}

footer.site{background:var(--ivory);padding:var(--sec-tight) 0 2.2rem;border-top:1px solid var(--travertine)}
footer.site .grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.4rem;padding-bottom:2.6rem}
footer.site h4{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--driftwood);font-weight:600;margin-bottom:1rem}
footer.site a,footer.site p{font-size:.9rem;color:var(--charcoal-soft)}
footer.site a{transition:color .35s}
footer.site a:hover{color:var(--deep)}
footer.site ul{display:grid;gap:.5rem}
footer.site .bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  padding-top:1.8rem;border-top:1px solid var(--travertine);font-family:var(--mono);font-size:.66rem;color:var(--driftwood)}
@media(max-width:820px){footer.site .grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer.site .grid{grid-template-columns:1fr}}