.site-header { position: relative; z-index: 50; min-width: 0; }
.site-header__promenade { position: relative; overflow: visible; background: var(--color-lagoon-blue); color: var(--color-deep-navy); }
.site-header__promenade::after { position: absolute; right: 0; bottom: -18px; left: 0; height: 28px; border-radius: 0 0 50% 50%; background: var(--color-lagoon-blue); content: ""; z-index: -1; }
.site-header__inner { position: relative; display: flex; min-height: 82px; align-items: center; gap: var(--space-4); padding-block: var(--space-3); }
.site-header__brand { display: inline-flex; min-width: 0; flex: 0 1 285px; align-items: center; gap: var(--space-3); color: var(--color-deep-navy); text-decoration: none; }
.site-header__brand:hover { color: var(--color-deep-navy); }
.site-header__logo { width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain; }
.site-header__brand-text { display: grid; min-width: 0; line-height: 1.1; }
.site-header__brand-title, .site-header__brand-subtitle { overflow: hidden; font-family: var(--font-heading); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.site-header__brand-title { font-size: 0.88rem; }
.site-header__brand-subtitle { margin-top: 2px; font-size: 0.72rem; letter-spacing: 0.06em; }
.site-header__nav { min-width: 0; flex: 1 1 auto; }
.site-header__nav-list { display: flex; min-width: 0; align-items: center; justify-content: center; gap: clamp(0.5rem, 1.2vw, 1rem); margin: 0; padding: 0; list-style: none; }
.site-header__nav-list li, .site-header__nav-list li + li { margin: 0; padding: 0; }
.site-header__nav-list a { display: inline-flex; min-height: 44px; align-items: center; color: var(--color-deep-navy); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.02em; line-height: 1; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.site-header__nav-list a:hover { text-decoration: underline; text-decoration-thickness: 0.12em; }
.site-header__mobile-links { display: none; }
.site-header__cta { flex: 0 0 auto; min-height: 44px; padding-inline: 1rem; font-size: 0.75rem; }
.site-header__toggle { display: none; width: 48px; height: 48px; flex: 0 0 48px; align-items: center; justify-content: center; border: 1px solid var(--color-deep-navy-soft); border-radius: 50%; background: var(--color-foam); color: var(--color-deep-navy); }
.site-header__toggle-line { display: block; width: 21px; height: 2px; margin: 2px auto; border-radius: 2px; background: currentColor; transition: transform var(--transition-base), opacity var(--transition-base); }
.site-header__bubble { position: absolute; display: block; border: 2px solid rgb(232 251 247 / 72%); border-radius: 50%; pointer-events: none; }
.site-header__bubble--one { top: 14px; left: 3%; width: 12px; height: 12px; }
.site-header__bubble--two { right: 4%; bottom: 15px; width: 19px; height: 19px; }
@media (max-width: 1080px) { .site-header__inner { min-height: 74px; gap: var(--space-3); } .site-header__brand { flex-basis: 245px; } .site-header__brand-title { font-size: 0.77rem; } .site-header__nav-list { gap: 0.55rem; } .site-header__nav-list a { font-size: 0.75rem; } .site-header__cta { padding-inline: 0.8rem; } }
@media (max-width: 900px) { .site-header__inner { justify-content: space-between; } .site-header__brand { flex: 1 1 auto; } .site-header__toggle { display: inline-block; } .site-header__cta { display: none; } .site-header__nav { position: absolute; top: calc(100% + 10px); right: 0; left: 0; display: grid; max-height: min(70vh, 38rem); overflow: auto; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-foam); box-shadow: var(--shadow-sm); opacity: 0; padding: var(--space-2); pointer-events: none; transform: translateY(-10px); transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base); visibility: hidden; } .site-header__nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; } .site-header__nav-list { display: none; } .site-header__mobile-links { display: grid; } .site-header__mobile-links a { display: flex; min-height: 44px; align-items: center; border-bottom: 1px solid var(--color-border); color: var(--color-deep-navy); padding: var(--space-3); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 800; letter-spacing: 0.04em; line-height: 1.2; text-decoration: none; text-transform: uppercase; } .site-header__mobile-links a:last-child { border-bottom: 0; } .site-header__toggle[aria-expanded="true"] .site-header__toggle-line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .site-header__toggle[aria-expanded="true"] .site-header__toggle-line:nth-child(2) { opacity: 0; } .site-header__toggle[aria-expanded="true"] .site-header__toggle-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } }
@media (max-width: 390px) { .site-header__inner { min-height: 66px; } .site-header__logo { width: 36px; height: 36px; flex-basis: 36px; } .site-header__brand { gap: var(--space-2); } .site-header__brand-title { display: none; } .site-header__brand-subtitle { margin: 0; font-size: 0.69rem; } .site-header__toggle { width: 44px; height: 44px; flex-basis: 44px; } }
@media (prefers-reduced-motion: no-preference) { .site-header__bubble--one { animation: site-header-float 5s ease-in-out infinite; } .site-header__bubble--two { animation: site-header-float 6s ease-in-out -2s infinite; } }
@keyframes site-header-float { 50% { transform: translateY(-5px); } }