/* Young Corporation — homepage/header.css
   Extracted from style.css. Depends on global/global.css tokens. */

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 245, 241, .85);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .85rem;
}
.brand { display: flex; align-items: baseline; gap: .5rem; font-family: var(--font-display); font-weight: 600; }
.brand__logo { height: 44px; width: auto; display: block; }
.brand__mark { font-size: 1.35rem; color: var(--navy); letter-spacing: -.02em; }
.brand__mark b { color: var(--sky); }
.brand__sub { font-family: var(--font-body); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.nav__links { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav__links a { font-size: .95rem; font-weight: 500; color: var(--ink); position: relative; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--sky); transition: width .25s var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { width: 100%; }
.nav__cta { display: flex; align-items: center; gap: 1rem; }
.nav__phone { font-weight: 600; }
.nav__toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: .4rem;
  flex-direction: column; gap: 5px;
}
.nav__toggle span { width: 26px; height: 2px; background: var(--navy); transition: .3s; }

@media (max-width: 860px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--offwhite); border-bottom: 1px solid var(--line);
    padding: .5rem 1.25rem 1.25rem;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .25s, transform .25s;
  }
  .nav__links.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links li { width: 100%; border-top: 1px solid var(--line); }
  .nav__links a { display: block; padding: .9rem 0; }
  .nav__phone-text { display: none; }
}