/* Option 04: Canvas composition with Destination navigation.
   Scoped to hybrid so options 01–03 and portal assets remain unchanged. */
body[data-style=hybrid] .site-header{background:var(--navy);color:white;border:0}
body[data-style=hybrid] .brand img{filter:brightness(0) invert(1)}
body[data-style=hybrid] .header-cta{color:var(--navy)}
body[data-style=hybrid] .site-header{display:grid;grid-template-columns:1fr auto 1fr}
body[data-style=hybrid] .brand{grid-column:2;grid-row:1;margin:0}
body[data-style=hybrid] .desktop-nav{display:none}
body[data-style=hybrid] .header-actions{display:contents}
body[data-style=hybrid] .header-actions .login,body[data-style=hybrid] .search-trigger{display:none}
body[data-style=hybrid] .header-cta{grid-column:3;grid-row:1;justify-self:end;display:inline-flex}
body[data-style=hybrid] .menu-trigger{grid-column:1;grid-row:1;justify-self:start;display:flex;align-items:center;justify-content:start;gap:8px;width:auto}
body[data-style=hybrid] .menu-trigger span{display:none}
body[data-style=hybrid] .menu-trigger:before{content:'☰';font-size:23px;line-height:1}
body[data-style=hybrid] .menu-trigger:after{content:'Explore';font-size:14px}
body[data-style=hybrid] .menu-trigger[aria-expanded=true]:before{content:'×';font-size:28px}
body[data-style=hybrid] .menu-trigger[aria-expanded=true]:after{content:'Close'}
body[data-style=hybrid] #mobile-nav:not([hidden]){position:fixed;top:var(--header);bottom:0;display:flex;flex-direction:column;justify-content:center;padding:40px 8vw 40px 54%;background:var(--navy);color:white;box-shadow:none;overflow:auto}
body[data-style=hybrid] #mobile-nav:before{content:'';position:absolute;left:var(--gutter);top:40px;bottom:40px;width:40%;background:url('../images/panorama.webp') center/cover}
body[data-style=hybrid] #mobile-nav a{font-size:clamp(24px,2.6vw,44px);letter-spacing:-.035em;font-weight:400;border-color:#ffffff33;padding:13px 0}
body[data-style=hybrid].menu-open{overflow:hidden}
@media(max-width:760px){body[data-style=hybrid] .header-cta{display:none}body[data-style=hybrid] .brand{grid-column:3;justify-self:end}body[data-style=hybrid] .menu-trigger{flex-direction:row}body[data-style=hybrid] #mobile-nav:not([hidden]){padding:20px 28px;justify-content:start}body[data-style=hybrid] #mobile-nav:before{display:none}body[data-style=hybrid] #mobile-nav a{font-size:25px;padding:17px 0}}
body[data-style=hybrid] #mobile-nav:not([hidden]){animation:hybrid-menu-in .35s ease-out both}
@keyframes hybrid-menu-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){body[data-style=hybrid] #mobile-nav:not([hidden]){animation:none}}
body[data-style=hybrid].paused #mobile-nav:not([hidden]){animation:none}