header.scrolled, header.menu-open{background:rgba(255,255,255,.85);border-color:rgba(231,228,221,.7);backdrop-filter:blur(12px)}
header.scrolled nav>a,header.menu-open nav>a{color:var(--foreground)}
header.scrolled nav>a span,header.menu-open nav>a span{color:var(--muted-foreground)}
header.scrolled nav ul a,header.menu-open nav ul a{color:var(--muted-foreground)}
header.scrolled nav ul a:hover,header.menu-open nav ul a:hover{color:var(--foreground)}
header.scrolled button span,header.menu-open button span{background:var(--foreground)}
header.menu-open>div{max-height:240px;opacity:1}
header.menu-open button span:first-child{transform:translateY(3px) rotate(45deg)}
header.menu-open button span:last-child{transform:translateY(-3px) rotate(-45deg)}
.reveal.is-visible{opacity:1;transform:none}
:focus-visible{outline:1px solid var(--gold);outline-offset:5px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none}.animate-in-fade{animation:none;opacity:1}}

/* Bespoke siren-skin hero: a single crisp material layer. */
#top > div[aria-hidden="true"]:nth-child(1){
  background-image:url('/siren-scales-obsidian.webp')!important;
  background-size:cover!important;
  background-position:center!important;
  opacity:.82;
  filter:none;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
#top > div[aria-hidden="true"]:nth-child(2){display:none}
#top > div[aria-hidden="true"]:nth-child(3){
  background:linear-gradient(180deg,rgba(0,0,0,.32),transparent 24%,transparent 66%,rgba(0,0,0,.56)),radial-gradient(ellipse at 50% 48%,rgba(0,0,0,.1) 18%,transparent 72%)!important;
}
#top > div[aria-hidden="true"]:nth-child(4){opacity:.04}
#top img{filter:drop-shadow(0 4px 24px rgba(174,138,46,.15))}
@media(max-width:767px){
  #top > div[aria-hidden="true"]:nth-child(1){background-position:43% center!important;opacity:.78}
}

/* Match the footer to the bespoke hero material, without blur. */
footer > div[aria-hidden="true"]:nth-child(1){
  background-image:url('/siren-scales-obsidian.webp')!important;
  background-size:cover!important;
  background-position:center!important;
  opacity:.82;
  filter:none;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
footer > div[aria-hidden="true"]:nth-child(2){display:none}
footer > div[aria-hidden="true"]:nth-child(3){
  background:linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,.25) 35%,rgba(0,0,0,.56))!important;
}
@media(max-width:767px){
  footer > div[aria-hidden="true"]:nth-child(1){background-position:43% center!important;opacity:.78}
}

/* Lift the heavier right-side shadow around the wordmark. */
#top > div[aria-hidden="true"]:nth-child(1)::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:inherit;
  background-size:inherit;
  background-position:inherit;
  filter:brightness(2.65);
  -webkit-mask-image:radial-gradient(ellipse 30% 52% at 65% 39%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.6) 35%,transparent 80%);
  mask-image:radial-gradient(ellipse 30% 52% at 65% 39%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.6) 35%,transparent 80%);
}

/* Quiet the opposing highlight for a softer, balanced frame. */
#top > div[aria-hidden="true"]:nth-child(1)::before{
 content:"";position:absolute;inset:0;z-index:1;
 background:radial-gradient(ellipse 28% 46% at 29% 37%,rgba(0,0,0,.19),transparent 80%);
}

.holding-signature{filter:drop-shadow(0 1px 1px rgba(0,0,0,.9)) drop-shadow(0 0 3px rgba(174,138,46,.18))}
