/* ── header ─────────────────────────────────────────────── */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:50;
  /* the bar crosses light sand bands as well as the dark hero, so it carries its
     own ground rather than a thin wash — at .5 the brand line went muddy over sand.
     Derived from --night so every palette gets its own header, not the ocean one. */
  background:color-mix(in srgb,var(--night) 88%,transparent);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.head-inner{display:flex;align-items:center;gap:var(--gap);min-height:76px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand-mark{display:flex;gap:3px;align-items:flex-end;height:26px}
.brand-mark i{display:block;width:4px;border-radius:2px;background:var(--brass)}
.brand-mark i:nth-child(1){height:12px;opacity:.5}
.brand-mark i:nth-child(2){height:26px}
.brand-mark i:nth-child(3){height:18px;opacity:.75}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-family:var(--display);font-size:1.02rem;font-weight:600;letter-spacing:-.02em}
.brand-text em{font-style:normal;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-45)}

.nav{display:flex;gap:1.7rem;margin-inline-start:auto;font-size:var(--step--1)}
.nav a{text-decoration:none;color:var(--text-70);transition:color .2s}
.nav a:hover{color:var(--text)}
.head-cta{display:flex;align-items:center;gap:1rem;flex:none;margin-inline-start:auto}
.tel{text-decoration:none;font-weight:600;font-size:var(--step--1);white-space:nowrap}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── mobile menu ────────────────────────────────────────── */
.burger{
  display:none;width:46px;height:46px;flex:none;
  align-items:center;justify-content:center;
  background:var(--glass);border:1px solid var(--line-2);border-radius:14px;
  color:var(--text);cursor:pointer;backdrop-filter:blur(10px);
  transition:border-color .2s,background .2s;
}
.burger:hover{border-color:var(--brass)}
.burger-box{display:block;width:20px;height:14px;position:relative}
.burger-box i{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .28s cubic-bezier(.4,.01,.2,1),opacity .18s;
}
.burger-box i:nth-child(1){top:0}
.burger-box i:nth-child(2){top:6px}
.burger-box i:nth-child(3){top:12px}
.burger[aria-expanded="true"] .burger-box i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-box i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger-box i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:45;
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  padding:calc(76px + 2.2rem) 1.25rem calc(2rem + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--night) 94%,transparent);
  backdrop-filter:blur(24px) saturate(140%);
  overflow-y:auto;overscroll-behavior:contain;
}
.menu[hidden]{display:none}
.menu.is-open{animation:menu-in .32s cubic-bezier(.2,.7,.3,1) both}
@keyframes menu-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

.menu-nav{display:flex;flex-direction:column}
.menu-nav a{
  display:flex;align-items:baseline;gap:1rem;
  padding:1.05rem 0;text-decoration:none;color:var(--text);
  font-family:var(--display);font-size:clamp(1.5rem,1.15rem + 1.7vw,2rem);
  font-weight:500;letter-spacing:-.03em;line-height:1.1;
  border-bottom:1px solid var(--line);
  transition:color .2s,padding-left .2s;
}
.menu-nav a:first-child{border-top:1px solid var(--line)}
.menu-nav a span{
  flex:none;font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.22em;color:var(--brass);
}
.menu-nav a:hover,.menu-nav a:focus-visible{color:var(--brass);padding-left:.4rem}

.menu-foot{display:flex;flex-direction:column;gap:1rem;align-items:stretch}
.menu-foot .btn{width:100%}
.menu-tel{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem;border:1px solid var(--line-2);border-radius:100px;
  text-decoration:none;font-weight:600;color:var(--text);
}
.menu-tel svg{width:17px;height:17px;color:var(--brass)}
.menu-foot p{margin:.2rem 0 0;text-align:center;font-size:var(--step--1);color:var(--text-45)}

.menu:focus{outline:none}
body.menu-open{overflow:hidden}
/* the sticky call bar sits above the panel and would cut its footer in half;
   the panel carries its own phone button, so the bar stands down while it is open */
body.menu-open .sticky-call,

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.82rem 1.5rem;border-radius:100px;
  font:600 var(--step--1)/1 var(--sans);text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:transform .2s,background .2s,border-color .2s,box-shadow .2s;
}
.btn svg{width:16px;height:16px}
.btn-lg{padding:1.05rem 2rem;font-size:var(--step-0)}
/* The solid button is the only place the accent is used as a GROUND rather than as ink, so the
   text on it is the one color that cannot be derived from the palette by rule: a light accent
   needs dark text, a dark one needs light. --on-accent is that answer, and its glow is mixed
   from the accent itself so a palette never has to restate this rule. */
.btn-solid{background:var(--brass);color:var(--on-accent);
  box-shadow:0 10px 30px -12px color-mix(in srgb,var(--brass) 55%,transparent)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 16px 38px -14px color-mix(in srgb,var(--brass) 70%,transparent)}
.btn-glass{background:var(--glass);border-color:var(--line-2);color:var(--text);backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}