/* Google Blog hero geometry and motion in DeepSire's dark brand palette.
   Reference: blog.google hero chunk 6791, pr20261029-2131. */
#vessels {
    overflow: clip;
    padding-bottom: 96px;
}

#vessels > .container {
    max-width: 1440px;
    padding-inline: 16px;
}

#vessels .section-header { margin-bottom: 40px; text-align: center; }
#vessels .section-header .section-title { margin: 0 auto; }
#vessels [hidden] { display: none !important; }

#vessels .vessels-deck {
    --vc-motion: cubic-bezier(0.79, 0.04, 0.54, 0.96);
    --vc-duration: 1.33s;
    --vc-text-duration: 1s;
    --vc-radius: 24px;
    --vc-height: 560px;
    --vc-open-width: 1296px;
    --vc-text-width: 426.667px;
    --vc-compact-width: 306px;
    --vc-image-width: 861.333px;
    --vc-image-height: 574.222px;
    --vc-copy-height: 560px;
    position: relative;
    min-width: 0;
    font-family: 'Google Sans', 'Inter', system-ui, sans-serif;
    isolation: isolate;
}

#vessels .vessels-track { display: grid; gap: 24px; }
#vessels .vessels-card {
    --vc-background: linear-gradient(145deg, #202638 0%, #121822 100%);
    --vc-ink: var(--site-ink, #f5f1f0);
    --vc-ink-hover: #e7c4d9;
    --vc-body: #c8c1ce;
    --vc-muted: #b9afc3;
    --vc-accent: var(--primary, #d4a5a5);
    --vc-line: rgba(200, 198, 218, 0.16);
    --vc-line-hover: rgba(212, 165, 165, 0.44);
    position: relative;
    min-width: 0;
    color: var(--vc-ink);
}
#vessels .vessels-card[data-series="touch"] {
    --vc-background: linear-gradient(145deg, #292237 0%, #171521 100%);
    --vc-ink-hover: #d5c6ff;
    --vc-accent: #b8a5ef;
    --vc-line-hover: rgba(184, 165, 239, 0.44);
}
#vessels .vessels-card[data-series="pleasure"] {
    --vc-background: linear-gradient(145deg, #30232e 0%, #1b151e 100%);
    --vc-ink-hover: #f0c2d7;
    --vc-accent: #d8a6bf;
    --vc-line-hover: rgba(216, 166, 191, 0.44);
}
#vessels .vessels-card[data-series="scent"] {
    --vc-background: linear-gradient(145deg, #2d272d 0%, #1a171d 100%);
    --vc-ink-hover: #ead0ca;
    --vc-accent: #d5b4ad;
    --vc-line-hover: rgba(213, 180, 173, 0.44);
}

#vessels .vessels-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 8px;
    min-width: 0;
}
#vessels .vessels-copy {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    padding: 24px;
    border-radius: var(--vc-radius);
    background-image: var(--vc-background);
    background-color: rgba(255, 255, 255, 0);
    background-blend-mode: normal;
    box-shadow: inset 0 0 0 1px var(--vc-line);
    overflow: hidden;
    transition: box-shadow 300ms ease;
}
#vessels .vessels-copy-content {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
#vessels .vessels-eyebrow {
    margin: 0;
    color: var(--vc-accent);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
#vessels .vessels-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-size: 36px;
    font-weight: 400;
    line-height: 44px;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-wrap: wrap;
    overflow-wrap: anywhere;
}
#vessels .vessels-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    margin: 0;
    color: var(--vc-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-overflow: ellipsis;
    text-wrap: wrap;
}
#vessels .vessels-features {
    display: grid;
    flex: 0 0 auto;
    gap: 4px;
    margin: 0;
    padding: 0;
    color: var(--vc-muted);
    list-style: none;
    font-size: 14px;
    line-height: 20px;
}
#vessels .vessels-features i { display: none; }
#vessels .vessels-link {
    position: static;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    align-self: flex-start;
    justify-content: center;
    gap: 16px;
    max-width: 100%;
    min-height: 48px;
    padding: 11px 24px;
    border: 1px solid currentColor;
    border-radius: var(--vc-pill-radius, 999px);
    background: rgba(212, 165, 165, 0.035);
    color: var(--vc-accent);
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
    transition: background-color 200ms ease, border-radius 200ms var(--site-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
#vessels .vessels-link svg { width: 20px; height: 20px; flex: 0 0 auto; }
#vessels .vessels-trigger { display: none; }
#vessels .vessels-media {
    position: relative;
    min-width: 0;
    min-height: 0;
    border-radius: var(--vc-radius);
    overflow: hidden;
    background: var(--site-panel, #101621);
}
#vessels .vessels-media-clip { width: 100%; height: 100%; overflow: hidden; border-radius: var(--vc-radius); }
#vessels .vessels-media picture,
#vessels .vessels-media img { display: block; width: 100%; height: 100%; }
#vessels .vessels-media img {
    max-width: none;
    object-fit: cover;
    object-position: 50% 60%;
    transition: transform 500ms cubic-bezier(0.27, 1.06, 0.18, 1);
}
#vessels .vessels-deck:not(.is-ready) .vessels-name,
#vessels .vessels-deck:not(.is-ready) .vessels-description {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Fixed slide frames travel as one rail; the same text block changes width. */
#vessels .vessels-deck.is-ready .vessels-viewport {
    position: relative;
    height: var(--vc-height);
    touch-action: pan-y pinch-zoom;
}
#vessels .vessels-deck.is-ready .vessels-track {
    position: relative;
    display: block;
    height: 100%;
    transition: transform 500ms ease-out;
}
#vessels .vessels-deck.is-ready .vessels-card {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--vc-open-width);
    height: var(--vc-height);
    pointer-events: none;
    transition: transform var(--vc-duration) var(--vc-motion);
}
#vessels .vessels-deck.is-ready .vessels-panel {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#vessels .vessels-deck.is-ready .vessels-card.is-active .vessels-panel { pointer-events: auto; }
#vessels .vessels-deck.is-ready .vessels-copy {
    position: static;
    flex: 0 0 auto;
    height: var(--vc-height);
    transition: width var(--vc-duration) var(--vc-motion), box-shadow 300ms ease;
}
#vessels .vessels-deck[data-layout="desktop"] .vessels-name {
    font-size: 28px;
    line-height: 36px;
    transition: font-size var(--vc-duration) var(--vc-motion), line-height var(--vc-duration) var(--vc-motion);
}
#vessels .vessels-deck[data-layout="desktop"] .vessels-card.is-active .vessels-name,
#vessels .vessels-deck.is-measuring .vessels-name { font-size: 36px; line-height: 44px; }
#vessels .vessels-deck.is-measuring .vessels-copy { width: var(--vc-text-width) !important; }
#vessels .vessels-deck[data-layout="desktop"] .vessels-detail {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--vc-text-duration) var(--vc-motion), visibility var(--vc-text-duration) step-end;
}
#vessels .vessels-deck[data-layout="desktop"] .vessels-card.is-active .vessels-detail {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--vc-text-duration) var(--vc-motion), visibility var(--vc-text-duration) step-start;
}
#vessels .vessels-deck[data-layout="desktop"] .vessels-link {
    transition: opacity var(--vc-text-duration) var(--vc-motion), visibility var(--vc-text-duration) step-end, background-color 200ms ease, border-radius 200ms var(--site-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
#vessels .vessels-deck[data-layout="desktop"] .vessels-card.is-active .vessels-link {
    transition: opacity var(--vc-text-duration) var(--vc-motion), visibility var(--vc-text-duration) step-start, background-color 200ms ease, border-radius 200ms var(--site-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
#vessels .vessels-deck.is-ready .vessels-trigger {
    position: absolute;
    z-index: 2;
    top: 0;
    inset-inline-start: 0;
    display: block;
    width: var(--vc-compact-width);
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--vc-radius);
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
}
#vessels .vessels-deck.is-ready .vessels-media {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--vc-image-width);
    height: var(--vc-height);
    overflow: visible;
    background: transparent;
    pointer-events: none;
    transition: transform var(--vc-duration) var(--vc-motion);
}
#vessels .vessels-deck[data-layout="desktop"] .vessels-media-clip {
    clip-path: inset(0 50% 0 50% round 24px);
    transition: clip-path var(--vc-duration) var(--vc-motion);
}
#vessels .vessels-deck[data-layout="desktop"] .vessels-card.is-active .vessels-media-clip {
    clip-path: inset(0 0% 0 0% round 24px);
}
#vessels .vessels-deck[data-layout="mobile"] { --vc-duration: 500ms; --vc-motion: ease-out; }
#vessels .vessels-deck[data-layout="mobile"] .vessels-copy {
    margin-top: calc(var(--vc-image-height) + 12px);
    height: var(--vc-copy-height);
}
#vessels .vessels-deck[data-layout="mobile"] .vessels-media { height: var(--vc-image-height); }
#vessels .vessels-deck.is-dragging .vessels-track { transition: none; }
#vessels .vessels-deck.is-ready .vessels-link::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: var(--vc-radius);
}
#vessels .vessels-copy:focus-within { box-shadow: inset 0 0 0 1px var(--vc-line-hover); }
#vessels .vessels-copy:focus-within .vessels-name { color: var(--vc-ink-hover); }
#vessels .vessels-deck[dir="rtl"] .vessels-link svg,
#vessels .vessels-deck[dir="rtl"] .vessels-arrow svg { transform: rotate(180deg); }

#vessels .vessels-controls { display: flex; align-items: center; gap: 24px; width: 100%; margin-top: 24px; }
#vessels .vessels-arrows { display: flex; flex: 0 0 auto; gap: 2px; }
#vessels .vessels-arrow {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: #181b28;
    color: var(--primary, #d4a5a5);
    box-shadow: inset 0 0 0 1px rgba(200, 198, 218, 0.14);
    cursor: pointer;
    transition: background-color 200ms ease;
}
#vessels .vessels-arrow[data-vessels-previous] { border-radius: 48px 8px 8px 48px; }
#vessels .vessels-arrow[data-vessels-next] { border-radius: 8px 48px 48px 8px; }
#vessels .vessels-deck[dir="rtl"] .vessels-arrow[data-vessels-previous] { border-radius: 8px 48px 48px 8px; }
#vessels .vessels-deck[dir="rtl"] .vessels-arrow[data-vessels-next] { border-radius: 48px 8px 8px 48px; }
#vessels .vessels-arrow svg { width: 24px; height: 24px; }
#vessels .vessels-arrow:disabled { color: #676273; cursor: default; }
#vessels .vessels-progress { flex: 1 1 auto; min-width: 0; height: 2px; overflow: hidden; border-radius: 8px; background: #302d3e; }
#vessels .vessels-progress-indicator { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--primary, #d4a5a5), var(--secondary, #9093ff)); transform: scaleX(0); transform-origin: left; transition: transform 300ms ease-out; }
#vessels .vessels-deck[dir="rtl"] .vessels-progress-indicator { transform-origin: right; }
#vessels .vessels-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#vessels .vessels-trigger:focus-visible,
#vessels .vessels-arrow:focus-visible,
#vessels .vessels-link:focus-visible,
#vessels .vessels-name:focus-visible { outline: 2px solid var(--primary, #d4a5a5); outline-offset: -3px; }
#vessels .vessels-deck.is-instant *,
#vessels .vessels-deck.is-instant *::before,
#vessels .vessels-deck.is-instant *::after { transition: none !important; }

@media (hover: hover) and (pointer: fine) {
    #vessels .vessels-card:hover .vessels-copy { box-shadow: inset 0 0 0 1px var(--vc-line-hover); }
    #vessels .vessels-link.is-button-hovered { border-radius: 8px; background-color: rgba(212, 165, 165, 0.12); }
    #vessels .vessels-arrow:not(:disabled):hover { background-color: #29263b; }
    #vessels .vessels-card:hover .vessels-name { color: var(--vc-ink-hover); }
    #vessels .vessels-card.is-active:hover .vessels-media img { transform: scale(1.03); }
}
@media (min-width: 481px) {
    #vessels > .container { padding-inline: 48px; }
    #vessels .vessels-deck[data-layout="mobile"] .vessels-name { font-size: 32px; line-height: 40px; }
}
@media (min-width: 1025px) {
    #vessels > .container { padding-inline: 72px; }
    #vessels .vessels-controls { width: calc((100% - 48px) / 3); }
}
@media (max-width: 1024px) {
    #vessels .vessels-deck:not(.is-ready) .vessels-panel { display: flex; flex-direction: column-reverse; gap: 12px; }
    #vessels .vessels-deck:not(.is-ready) .vessels-media { aspect-ratio: 3 / 2; }
}
@media (max-width: 480px) {
    #vessels { padding-bottom: 72px; }
    #vessels .vessels-name { font-size: 24px; line-height: 32px; }
    #vessels .section-header { margin-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    #vessels .vessels-deck.is-ready .vessels-card,
    #vessels .vessels-deck.is-ready .vessels-copy,
    #vessels .vessels-deck.is-ready .vessels-media,
    #vessels .vessels-deck.is-ready .vessels-media-clip,
    #vessels .vessels-deck.is-ready .vessels-name,
    #vessels .vessels-deck.is-ready .vessels-track,
    #vessels .vessels-deck.is-ready .vessels-detail { transition: none; }
    #vessels .vessels-link,
    #vessels .vessels-deck[data-layout="desktop"] .vessels-link,
    #vessels .vessels-deck[data-layout="desktop"] .vessels-card.is-active .vessels-link { transition: none; }
    #vessels .vessels-media img { transform: none !important; transition: none; }
}