/* A transparent masthead becomes a compact, frosted navigation capsule. */
.site-header .header-contact-copy { display: flex; align-items: center; gap: 13px; white-space: nowrap; }
.site-header .header-phone { font-variant-numeric: tabular-nums; font-size: 14px; letter-spacing: .3px; font-weight: 600; }
.site-header .header-contact-label { font-size: 11px; }
.site-header .header-contact { gap: 15px; }
.landing-page .site-header {
  position: fixed; z-index: 1030; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: none; height: 96px; padding: 0 5%; margin: 0;
  color: #f6f8ee; background: transparent; border: 1px solid transparent;
  transition: width .45s cubic-bezier(.22,.68,0,1), max-width .45s, top .45s,
    height .45s, padding .45s, border-radius .45s, background-color .35s,
    border-color .35s, box-shadow .35s, color .3s;
}
.landing-page .site-header .brand-name,
.landing-page .site-header .brand-name>span { color: inherit; }
.landing-page .site-header .brand small { color: inherit; opacity: .65; }
.landing-page .site-header .desktop-nav { gap: clamp(18px, 2vw, 32px); }
.landing-page .site-header .desktop-nav a { color: inherit; opacity: .8; white-space: nowrap; }
.landing-page .site-header .desktop-nav a:hover { opacity: 1; }
.landing-page .site-header .header-contact {
  display: inline-flex; border-radius: 999px; min-height: 46px; padding: 12px 19px;
  color: #f6f8ee; background: #ffffff0f; border: 1px solid #ffffff45;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.landing-page .site-header .header-contact:hover { background: #ffffff23; border-color: #ffffff80; }
.landing-page .site-header .menu-toggle { color: inherit; border-color: #ffffff45; flex-shrink: 0; }
.landing-page .site-header.is-floating {
  top: 16px; width: calc(100% - 80px); max-width: 1280px; height: 72px; padding: 0 24px;
  border-radius: 999px; color: #18312f; background: rgba(241, 245, 236, .76);
  border-color: rgba(255, 255, 255, .74);
  backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%);
  box-shadow: 0 12px 40px #061b291c, 0 2px 8px #061b290a, inset 0 1px 0 #ffffffc4;
}
.landing-page .site-header.is-floating .header-contact {
  color: #f6f8ee; background: #17372e; border-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.landing-page .site-header.is-floating .header-contact:hover { background: #2b4b3d; }
.landing-page .site-header.is-floating .menu-toggle { border-color: #17372e30; }
.landing-page .showcase-hero { height: 100svh; padding-top: 130px; }
.landing-page [id] { scroll-margin-top: 84px; }
.landing-page .collection-index { top: 112px; }
.landing-page .site-header a:focus-visible,
.landing-page .site-header button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .landing-page .site-header.is-floating { background: #edf1e9; }
}
@media (max-width: 1150px) {
  .landing-page .site-header { padding-inline: 3%; gap: 18px; }
  .landing-page .site-header.is-floating { width: calc(100% - 40px); padding-inline: 20px; }
  .landing-page .site-header .desktop-nav { gap: 18px; }
  .site-header .header-contact { gap: 10px; }
}
@media (min-width: 851px) and (max-width: 1050px) {
  .site-header .header-contact-copy { gap: 8px; }
  .site-header .header-contact>.icon { display: none; }
  .landing-page .site-header .desktop-nav { gap: 14px; font-size: 11px; }
  .landing-page .site-header .brand { gap: 8px; }
  .landing-page .site-header .brand-name { font-size: 23px; }
  .landing-page .site-header .brand-name>span { font-size: 10px; }
}
@media (max-width: 850px) {
  .landing-page .site-header { height: 84px; gap: 14px; padding-inline: 5%; }
  .landing-page .site-header.is-floating { height: 68px; width: calc(100% - 32px); padding-inline: 18px; }
  .landing-page .site-header .menu-toggle { margin-left: 0; }
  .landing-page .showcase-hero { padding-top: 112px; height: auto; }
}
@media (max-width: 600px) {
  .landing-page .site-header { padding-inline: 16px; gap: 10px; height: 80px; }
  .landing-page .site-header.is-floating { top: 10px; width: calc(100% - 20px); height: 64px; padding-inline: 12px; }
  .landing-page .site-header .brand { gap: 7px; flex-shrink: 0; }
  .landing-page .site-header .brand-logo { width: 28px; height: 28px; }
  .landing-page .site-header .brand-name { font-size: 19px; letter-spacing: 1px; }
  .landing-page .site-header .brand-name>span { display: block; margin: 2px 0 0; font-size: 9px; letter-spacing: 2px; }
  .landing-page .site-header .brand small { display: none; }
  .landing-page .site-header .header-contact { padding: 7px 13px; min-height: 42px; margin-left: auto; }
  .site-header .header-contact-copy { flex-direction: column; gap: 1px; line-height: 1.4; }
  .site-header .header-phone { font-size: 12px; letter-spacing: .2px; }
  .site-header .header-contact-label { font-size: 9px; letter-spacing: 1px; }
  .landing-page .site-header .header-contact>.icon { display: none; }
  .landing-page .site-header .menu-toggle { width: 34px; height: 34px; }
  .landing-page .site-header .menu-toggle .icon { width: 20px; height: 20px; }
  .landing-page .showcase-hero { padding-top: 108px; min-height: 864px; height: 100svh; max-height: 1040px; }
  .landing-page [id] { scroll-margin-top: 66px; }
  .landing-page .collection-index { top: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-page .site-header { transition: none; }
}
.motion-suspended .site-header { transition: none; }