/* Approved two-yacht screen, using the site's existing fonts and booking actions. */
#hero {
    --hero-top-space: 112px;
    --hero-intro-space: 122px;
    --hero-wave-height: 30px;
    --hero-wave-gap: 30px;
    display: block;
    min-height: 0;
}
#hero [hidden] { display: none !important; }
#hero .hero-format-intro {
    position: absolute;
    inset: var(--hero-top-space) 0 auto;
    margin: 0 auto;
}
#hero .hero-slider {
    display: grid;
    grid-template-rows: auto;
    min-height: 100svh;
}
#hero .hero-slide {
    grid-area: 1 / 1;
    display: flex;
    padding-top: calc(var(--hero-top-space) + var(--hero-intro-space));
    padding-bottom: calc(var(--hero-wave-height) + var(--hero-wave-gap));
    background-position: 57% center;
}
#hero #hero-self.active {
    background-image: var(--self-hero-desktop);
}
@media (max-width: 700px) {
    #hero #hero-self.active {
        background-image: var(--self-hero-mobile);
    }
}
#hero .hero-container {
    grid-area: auto;
    justify-content: flex-start;
    gap: 28px;
}
#hero .hero-bg-overlay {
    background: linear-gradient(90deg, rgba(8,20,36,.93) 0%, rgba(8,20,36,.86) 37%, rgba(8,20,36,.2) 85%), linear-gradient(180deg, rgba(8,20,36,.6), transparent 30%, rgba(8,20,36,.4));
}
#hero .hero-content { max-width: 760px; }
#hero .hero-title { margin-bottom: 18px; }
#hero .hero-subtitle {
    max-width: 470px;
    margin-bottom: 18px;
    font-weight: 400;
    color: #dce2e9;
}
#hero .hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 15px;
    color: #d8dee5;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.25;
}
#hero .hero-facts > span { display: flex; align-items: center; gap: 7px; }
#hero .hero-facts svg { width: 20px; height: 20px; color: var(--color-gold); stroke-width: 1.8; flex-shrink: 0; }
#hero .hero-starting-price { margin: 0 0 20px; color: #e2c39c; font-size: 1.5rem; font-weight: 700; line-height: 1; }
#hero .hero-starting-price > span { font-size: .8125rem; font-weight: 500; line-height: 1.6; color: #d0d7df; }
#hero .hero-yachts {
    display: flex;
    gap: 20px;
    max-width: max-content;
    margin: 0 0 18px -14px;
}
#hero .hero-yacht {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 14px 13px;
    border: 0;
    background: transparent;
    color: #dce2e9;
    font: 600 18px/1.3 var(--font-sans);
    text-align: center;
    cursor: pointer;
}
#hero .hero-yacht::after {
    content: '';
    position: absolute;
    inset: auto 14px 2px;
    height: 2px;
    background: currentColor;
    opacity: 0;
}
#hero .hero-yacht[aria-pressed="true"] { color: var(--color-gold); }
#hero .hero-yacht[aria-pressed="true"]::after { opacity: 1; }
#hero .hero-yacht:hover { color: var(--color-gold-hover); }
#hero .hero-yacht:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; border-radius: 3px; }
#hero .hero-buttons { gap: 12px 22px; margin: 0; }
#hero .hero-buttons > .btn { min-height: 52px; padding: 14px 23px; }
#hero .hero-details-link {
    min-height: 44px;
    padding: 9px 0;
    border: 0;
    border-bottom: 1px solid #ffffff65;
    border-radius: 0;
    background: transparent;
    color: var(--color-text-white);
}
#hero .hero-details-link:hover { color: var(--color-gold-hover); border-color: var(--color-gold-hover); }
#hero .hero-photo-caption { position: absolute; right: 76px; bottom: 30px; display: flex; flex-direction: column; text-align: right; text-shadow: 0 1px 8px #000; pointer-events: none; }
#hero .hero-photo-caption > span { font: italic 500 28px/1.3 var(--font-serif); color: #f2e4d1; }
#hero .hero-photo-caption small { font-size: 11px; color: #dce2e8; letter-spacing: .4px; }
#hero #hero-captain[data-yacht="Formula260BR"] { background-image: url('/images/formula/hero-20261104.webp') !important; }
#hero .hero-yacht-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 1024px) {
    #mainHeader .nav-menu:not(.active) .dropdown-menu { visibility: hidden !important; }
}
@media (max-height: 960px) and (min-width: 769px) {
    #hero .hero-title { font-size: clamp(40px, 5.5vh, 56px); }
    #hero .hero-subtitle { font-size: 16px; line-height: 1.6; }
}
@media (max-width: 768px) {
    #hero { --hero-top-space: 96px; --hero-intro-space: 120px; --hero-wave-height: 24px; --hero-wave-gap: 24px; }
    #hero .hero-slider { min-height: 0; }
    #hero .hero-format-intro, #hero .hero-container { padding-inline: 24px; }
    #hero .hero-container { text-align: left; align-items: stretch; }
    #hero .hero-format-title { font-size: 24px; line-height: 1.3; }
    #hero .hero-title { font-size: 33.75px; line-height: 1.1; }
    #hero .hero-subtitle { margin-left: 0; font-size: 15px; line-height: 1.7; }
    #hero .hero-facts { gap: 9px 13px; }
    #hero .hero-facts svg { width: 18px; height: 18px; }
    #hero .hero-yachts { gap: 14px; }
    #hero .hero-yacht { font-size: 16px; }
    #hero .hero-photo-caption { display: none; }
    #hero #hero-captain[data-yacht="Formula260BR"] { background-image: url('/images/formula/hero-20261104-960.webp') !important; }
    #hero .hero-bg-overlay { background: linear-gradient(100deg,#081424ed 0%,#081424c9 55%,#08142489 100%); }
}
@media (max-width: 640px) {
    #hero .hero-buttons { flex-direction: column; align-items: stretch; gap: 5px; }
    #hero .hero-buttons > .hero-details-link { align-self: center; min-height: 44px; padding: 8px; border: 0; text-decoration: underline; text-underline-offset: 5px; }
    #hero .hero-video-link { display: flex; width: max-content; margin: 0 auto; }
}
@media (max-width: 480px) {
    #hero .hero-title { font-size: 25.5px; line-height: 1.3; }
    #hero .hero-subtitle { font-size: 14.25px; }
    #hero .hero-facts { font-size: 13px; gap: 9px 11px; }
}
@media (max-width: 375px) {
    #hero { --hero-intro-space: 140px; }
}