/*
Theme Name: Sun Life Marinas
Version: 1.0.0
Description: Custom luxury marina theme for Sun Life Marinas - "Yacht Club Sexy" aesthetic
Author: Kamber Digital
Author URI: https://kamberdigital.com
Text Domain: sunlife-marinas
*/

/* ==========================================================================
   FONT FALLBACKS - Size-adjusted to match Google Fonts metrics (eliminates FOUT)
   ========================================================================== */
@font-face {
    font-family: 'Montserrat Fallback';
    src: local('-apple-system'), local('BlinkMacSystemFont'), local('Segoe UI');
    size-adjust: 112%;
    ascent-override: 92%;
    descent-override: 25%;
}

@font-face {
    font-family: 'Playfair Fallback';
    src: local('Georgia'), local('Times New Roman');
    size-adjust: 105%;
    ascent-override: 95%;
    descent-override: 22%;
}

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================================================== */
:root {
    /* Brand Colors */
    --yacht-navy: #0A192F;
    --yacht-navy-dark: #051021;
    --yacht-gold: #D4AF37;
    --yacht-gold-light: #E5C565;
    --yacht-gray: #F8F9FA;
    --yacht-white: #FFFFFF;
    --warm-white: #FAF9F7;

    /* Typography - Fallback fonts have size-adjust to match Google Fonts metrics */
    --font-serif: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
    --font-sans: 'Montserrat', 'Montserrat Fallback', -apple-system, sans-serif;
    /* Aliases for legacy/template usage */
    --font-display: var(--font-serif);
    --font-primary: var(--font-sans);

    /* Spacing
       Discrete steps that snap to the design token spacing scale (4rem = 64,
       6rem = 96). Previously a fluid clamp(4rem, 8vw, 8rem) which resolved to
       ~115px at 1440 viewport, off-rung from both 96 and 120. */
    --section-padding: 4rem;
    --container-max: 1280px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.4s ease;
    --transition-slow: 0.7s ease;
}

/* Bump section vertical padding at desktop where there's room for it. Mobile
   stays at 4rem (64px, on rung), desktop steps up to 6rem (96px, on rung). */
@media (min-width: 1024px) {
    :root {
        --section-padding: 6rem;
    }
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    color: var(--yacht-navy);
    background-color: var(--yacht-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.2;
}

a {
    color: var(--yacht-gold);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--yacht-gold-light);
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

/* Skip Link - Hidden by default, visible on focus */
.slm-skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--yacht-gold);
    color: var(--yacht-navy);
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 0.5rem 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    z-index: 10000;
    transition: top 0.2s ease;
    text-decoration: none;
}

.slm-skip-link:focus {
    top: 0;
    outline: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Focus Indicators - Visible focus rings for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--yacht-gold);
    outline-offset: 2px;
}

/* Remove default outline when not using keyboard */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced focus for buttons */
.slm-btn:focus-visible {
    outline: 2px solid var(--yacht-gold);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.3);
}

/* Focus style for nav links */
.slm-nav__link:focus-visible,
.slm-mobile-menu__link:focus-visible {
    outline: 2px solid var(--yacht-gold);
    outline-offset: 4px;
}

/* Focus style for cards and interactive elements */
.slm-gateway-card:focus-visible,
.slm-benefit-card:focus-visible {
    outline: 3px solid var(--yacht-gold);
    outline-offset: 4px;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   SCROLLBAR STYLING
   ========================================================================== */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--yacht-navy-dark);
}
::-webkit-scrollbar-thumb {
    background: var(--yacht-gold);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--yacht-gold-light);
}

/* ==========================================================================
   HERO SECTIONS
   ========================================================================== */
.slm-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height - fixes iOS address bar */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.slm-hero-inner {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.slm-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--yacht-navy) 0%, rgba(10, 25, 47, 0.5) 40%, rgba(10, 25, 47, 0.6) 100%);
    z-index: 1;
}

.slm-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    padding: 2rem;
}

/* Hide hero content children initially - GSAP will animate them in */
.slm-hero__content > * {
    opacity: 0;
    transform: translateY(30px);
}

.slm-hero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.slm-hero__poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.slm-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.slm-hero__buttons .slm-btn {
    min-width: 200px;
    text-align: center;
}

/* Hero Promo Badge - Full width button below hero buttons */
.slm-hero__promo-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, var(--yacht-gold) 0%, var(--yacht-gold-light) 100%);
    color: var(--yacht-navy);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 30px rgba(212, 175, 55, 0.25);
    text-decoration: none;
    opacity: 0;
    transform: translateY(10px);
    animation: hero-badge-pulse 2.5s ease-in-out infinite;
}

.slm-hero__promo-badge:hover {
    color: var(--yacht-navy);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3), 0 0 40px rgba(212, 175, 55, 0.35);
    transform: translateY(0) scale(1.01);
}

.slm-hero__promo-badge svg {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 0.3s ease;
}

.slm-hero__promo-badge:hover svg {
    transform: translateY(3px);
}

@keyframes hero-badge-pulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 30px rgba(212, 175, 55, 0.25);
    }
    50% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 50px rgba(212, 175, 55, 0.4);
    }
}

/* Badge visible state (set by JS) */
.slm-hero__promo-badge.slm-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .slm-hero__promo-badge {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .slm-hero__promo-badge:hover {
        transform: scale(1.01);
    }
}

/* ==========================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */
.slm-eyebrow {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--yacht-gold);
}

/* WCAG AA contrast fix: gold #D4AF37 on white = 2.10:1 (fails 4.5:1).
   Use a darker gold (~4.6:1) when the eyebrow lands on a light section. */
.slm-bg-white .slm-eyebrow,
.slm-bg-gray .slm-eyebrow,
.slm-section--light .slm-eyebrow {
    color: #8A6F1A;
}

.slm-eyebrow br {
    display: none;
}

@media (max-width: 640px) {
    .slm-eyebrow br {
        display: block;
    }
    .slm-eyebrow__sep {
        display: none;
    }
}

.slm-headline {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 6vw, 5rem);
    color: var(--yacht-white);
    line-height: 1.1;
}

.slm-headline--gold {
    color: var(--yacht-gold);
    font-style: italic;
}

.slm-subhead {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    color: rgba(255, 255, 255, 0.8);
}

.slm-section-title {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--yacht-navy);
    margin-bottom: 1.5rem;
}

.slm-divider {
    width: 6rem;
    height: 2px;
    background: var(--yacht-gold);
    margin: 1.5rem auto;
}

/* ==========================================================================
   BUTTON STYLES
   ========================================================================== */
.slm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-medium);
}

.slm-btn--primary {
    background: var(--yacht-gold);
    color: var(--yacht-navy);
    border-color: var(--yacht-gold);
}
.slm-btn--primary:hover {
    background: var(--yacht-white);
    color: var(--yacht-navy);
    border-color: var(--yacht-navy);
}

.slm-btn--outline {
    background: transparent;
    color: var(--yacht-white);
    border-color: var(--yacht-white);
}
.slm-btn--outline:hover {
    background: var(--yacht-white);
    color: var(--yacht-navy);
}

.slm-btn--outline-dark {
    background: transparent;
    color: var(--yacht-navy);
    border-color: var(--yacht-navy);
}
.slm-btn--outline-dark:hover {
    background: var(--yacht-navy);
    color: var(--yacht-white);
}

/* ==========================================================================
   MOBILE TOUCH TARGET COMPLIANCE (WCAG 2.5.5 - 44x44px minimum)
   ========================================================================== */
@media (max-width: 768px) {
    /* Buttons - ensure min 44px height */
    .slm-btn,
    .slm-hero__cta,
    button[type="submit"],
    .slm-tabs__btn {
        min-height: 44px;
    }

    /* Form inputs - ensure min 48px height for easier tapping */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    input[type="number"],
    select,
    textarea {
        min-height: 48px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Mobile menu links - adequate touch targets */
    .slm-mobile-menu__link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Footer links - adequate spacing for touch */
    .slm-footer__links a,
    .slm-footer__contact a {
        display: inline-block;
        padding: 0.5rem 0;
        min-height: 44px;
        line-height: 2;
    }
}

/* ==========================================================================
   CARD COMPONENTS
   ========================================================================== */
.slm-card {
    background: var(--yacht-white);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}
.slm-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.slm-card__image {
    position: relative;
    height: 240px;
    overflow: hidden;
}
.slm-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.slm-card:hover .slm-card__image img {
    transform: scale(1.1);
}

.slm-card__content {
    padding: 2rem;
}

.slm-card__title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--yacht-navy);
    margin-bottom: 0.75rem;
}

.slm-card__desc {
    color: #6b7280;
    font-weight: 300;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   SECTION BACKGROUNDS
   ========================================================================== */
.slm-bg-white { background-color: var(--yacht-white); }
.slm-bg-gray { background-color: var(--yacht-gray); }
.slm-bg-navy { background-color: var(--yacht-navy); color: var(--yacht-white); }
.slm-bg-navy-dark { background-color: var(--yacht-navy-dark); color: var(--yacht-white); }

/* ==========================================================================
   FORM STYLING
   ========================================================================== */
.slm-form input,
.slm-form select,
.slm-form textarea {
    width: 100%;
    padding: 1rem;
    background: var(--yacht-gray);
    border: 1px solid #e5e7eb;
    font-family: var(--font-sans);
    transition: border-color var(--transition-fast);
}
.slm-form input:focus,
.slm-form select:focus,
.slm-form textarea:focus {
    outline: none;
    border-color: var(--yacht-navy);
}

.slm-form label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b7280; /* WCAG AA: 4.6:1 on white */
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   STICKY SIDEBAR
   ========================================================================== */
.slm-sticky-sidebar {
    position: sticky;
    top: 10rem; /* Below sticky tabs (6.5rem) + tab height (~3rem) + 0.5rem margin */
    align-self: start;
    background: var(--yacht-white);
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-top: 4px solid var(--yacht-gold);
    border-radius: 0.5rem;
    text-align: center;
}
.slm-sticky-sidebar__title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--yacht-navy);
    margin: 0 0 0.5rem;
}
.slm-sticky-sidebar__subtitle {
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
    color: #6b7280;
    line-height: 1.5;
}

/* Sticky sidebar with inline form */
.slm-sticky-sidebar--form {
    text-align: left;
}

.slm-sticky-sidebar--form .slm-sticky-sidebar__title {
    text-align: center;
    margin-bottom: 1.5rem;
}

.slm-sticky-sidebar--form .gform_wrapper.gform-theme {
    margin: 0;
}

.slm-sticky-sidebar--form .gform_wrapper.gform-theme .gform_fields {
    gap: 1rem;
}

.slm-sticky-sidebar--form .gform_wrapper.gform-theme .gfield_label {
    font-size: 0.7rem;
    margin-bottom: 0.25rem;
}

.slm-sticky-sidebar--form .gform_wrapper.gform-theme input:not([type="checkbox"]):not([type="submit"]),
.slm-sticky-sidebar--form .gform_wrapper.gform-theme select {
    padding: 0.625rem 0.875rem;
    font-size: 0.85rem !important;
}

.slm-sticky-sidebar--form .gform_wrapper.gform-theme textarea {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem !important;
    min-height: 48px !important;
    height: 48px !important;
    resize: vertical;
}

/* Checkbox layout in sidebar - stack vertically */
.slm-sticky-sidebar--form .gform_wrapper.gform-theme .gfield_checkbox {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.slm-sticky-sidebar--form .gform_wrapper.gform-theme .gchoice {
    margin: 0;
    gap: 0.5rem;
}

.slm-sticky-sidebar--form .gform_wrapper.gform-theme .gchoice input[type="checkbox"] {
    margin-right: 0.5rem;
}

/* Progress bar compact spacing */
.slm-sticky-sidebar--form .gform_wrapper.gform-theme .gf_progressbar_wrapper {
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem !important;
}

.slm-sticky-sidebar--form .gform_wrapper.gform-theme .gf_progressbar_title {
    margin-bottom: 0.5rem !important;
}

/* Full-width page navigation buttons */
.slm-sticky-sidebar--form .gform_wrapper.gform-theme .gform_next_button {
    flex: 1;
}

/* Hide previous button - simple 2-page form, refresh to restart */
.slm-sticky-sidebar--form .gform_wrapper.gform-theme .gform_previous_button {
    display: none !important;
}

/* Input suffix for unit display (ft) on Boat Length/Beam fields */
#field_7_9 .ginput_container,
#field_7_10 .ginput_container {
    position: relative;
}

#field_7_9 .ginput_container::after,
#field_7_10 .ginput_container::after {
    content: "ft";
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 0.8rem;
    pointer-events: none;
}

#field_7_9 input,
#field_7_10 input {
    padding-right: 2rem !important;
}

/* Sidebar form scroll margin for anchor links */
.slm-sticky-sidebar--form {
    scroll-margin-top: 8rem;
}

/* On mobile, sidebar appears below content (not sticky) */
@media (max-width: 1023px) {
    .slm-sticky-sidebar--form {
        position: relative;
        top: auto;
        margin-top: 2rem;
    }
}

/* Prevent iOS Safari zoom on input focus (requires 16px minimum) */
@media (max-width: 767px) {
    .gform_wrapper.gform-theme input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
    .gform_wrapper.gform-theme select,
    .gform_wrapper.gform-theme textarea,
    .slm-booking-form__field input,
    .slm-booking-form__field select,
    .slm-contact-form input,
    .slm-contact-form select,
    .slm-contact-form textarea,
    .slm-form__field input,
    .slm-form__field select,
    .slm-form__field textarea {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   QUOTE MODAL
   ========================================================================== */
.slm-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.slm-modal.is-open {
    opacity: 1;
    visibility: visible;
}
.slm-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 25, 47, 0.85);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.slm-modal__content {
    position: relative;
    background: var(--yacht-white);
    padding: 2.5rem;
    max-width: 960px;
    width: 94%;
    max-height: 90vh;
    overflow-y: auto;
    border-top: 4px solid var(--yacht-gold);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}
.slm-modal.is-open .slm-modal__content {
    transform: translateY(0);
}
.slm-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: #6b7280; /* WCAG AA: 4.6:1 on white */
    cursor: pointer;
    transition: color 0.2s ease;
}
.slm-modal__close:hover {
    color: var(--yacht-navy);
}
.slm-modal__title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    color: var(--yacht-navy);
    margin: 0 0 0.5rem;
}
.slm-modal__subtitle {
    font-size: 1rem;
    color: #6b7280;
    margin: 0 0 2rem;
}
.slm-modal .slm-form__field {
    margin-bottom: 0.75rem;
}
.slm-modal .slm-form__row {
    gap: 0.75rem;
}
.slm-modal .slm-form label {
    font-size: 0.7rem;
    margin-bottom: 0.25rem;
}
.slm-modal .slm-form input {
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
}
.slm-modal .slm-form__checkboxes--grid {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 0.25rem 1.5rem;
}
.slm-modal .slm-checkbox span {
    font-size: 0.75rem;
}
.slm-modal .slm-btn {
    padding: 0.75rem 1.5rem;
    margin-top: 0.5rem;
}

/* ==========================================================================
   QUOTE/BLOCKQUOTE
   ========================================================================== */
.slm-quote {
    background: var(--yacht-white);
    padding: 1.5rem;
    border-left: 4px solid var(--yacht-gold);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.slm-quote p {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--yacht-navy);
    font-size: 1.125rem;
    margin: 0;
}

/* ==========================================================================
   ANIMATIONS (GSAP Enhancement Classes)
   ========================================================================== */
.slm-fade-up {
    opacity: 0;
    transform: translateY(30px);
}
.slm-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slm-stagger > * {
    opacity: 0;
    transform: translateY(20px);
}

/* ==========================================================================
   RESPONSIVE UTILITIES
   ========================================================================== */
@media (max-width: 768px) {
    .slm-hero {
        min-height: 100vh;
        min-height: 100dvh; /* Dynamic viewport - fixes iOS/Android address bar */
    }
    .slm-headline {
        font-size: 2.75rem;
    }

    /* Mobile header clearance - reduced padding for breathing room */
    .slm-hero__content {
        padding: 3rem 1.25rem 1.5rem;
    }
}

/* ==========================================================================
   NOISE TEXTURE OVERLAY
   ========================================================================== */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    /* Inline SVG noise texture - no external dependency */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* ==========================================================================
   COMPASS CLUB DARK THEME
   ========================================================================== */
.slm-compass-club {
    background-color: var(--yacht-navy-dark);
    color: var(--yacht-white);
}

.slm-compass-club .slm-section-title {
    color: var(--yacht-white);
}

.slm-membership-card {
    aspect-ratio: 1.586 / 1;
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.slm-perk-card {
    background: rgba(255, 255, 255, 0.03);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3rem;
    transition: all var(--transition-medium);
}
.slm-perk-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-5px);
}

/* ==========================================================================
   NAVIGATION OVERRIDES
   ========================================================================== */
.slm-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding-top: 1rem;
    transition: background var(--transition-medium), padding var(--transition-medium);
}

.slm-nav.scrolled {
    background: rgba(10, 25, 47, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.slm-nav--transparent {
    background: transparent;
    transition: background 0.3s ease;
}

/* Solid background when nav is hovered (desktop) */
@media (min-width: 1110px) {
    .slm-nav--transparent:hover {
        background: rgba(10, 25, 47, 0.95);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
}

.slm-nav--solid {
    background: rgba(10, 25, 47, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Dark header by default for pages without hero images */
body.slm-dark-header .slm-nav {
    background: rgba(10, 25, 47, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.slm-nav__link {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--yacht-white);
    transition: color var(--transition-fast);
    white-space: nowrap;
}
.slm-nav__link:hover {
    color: var(--yacht-gold);
}

/* Mega Menu Nav Item */
.slm-nav__item {
    position: static;
}

.slm-nav__item--has-mega {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.slm-nav__item--has-mega > .slm-nav__link {
    height: 100%;
    display: flex;
    align-items: center;
}

.slm-nav__item--has-mega > .slm-nav__link::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: 6px;
    margin-bottom: 2px;
    transition: transform 0.2s ease;
}

.slm-nav__item--has-mega:hover > .slm-nav__link::after {
    transform: rotate(-135deg);
}

/* Mega Menu Panel - Compact Dropdown */
.slm-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 320px;
    background: var(--yacht-navy);
    border-radius: 0 0 12px 12px;
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 999;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(201, 162, 39, 0.3);
}

.slm-nav__item--has-mega:hover .slm-mega,
.slm-nav__item--has-mega:focus-within .slm-mega,
.slm-mega.is-open {
    opacity: 1;
    visibility: visible;
}

/* Focus visible styles for keyboard navigation */
.slm-nav__link:focus-visible {
    outline: 2px solid var(--yacht-gold);
    outline-offset: 2px;
}

.slm-mega__link:focus-visible {
    outline: 2px solid var(--yacht-gold);
    outline-offset: 2px;
    border-radius: 8px;
}

.slm-mega__heading {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--yacht-gold);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(201, 162, 39, 0.3);
}

.slm-mega__links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.slm-mega__link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.slm-mega__link:hover {
    background: rgba(201, 162, 39, 0.1);
}

.slm-mega__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 162, 39, 0.1);
    border-radius: 8px;
    color: var(--yacht-gold);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.slm-mega__icon svg {
    width: 20px;
    height: 20px;
}

.slm-mega__link:hover .slm-mega__icon {
    background: rgba(201, 162, 39, 0.2);
    transform: scale(1.05);
}

.slm-mega__text {
    flex: 1;
}

.slm-mega__link-title {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--yacht-white);
    margin-bottom: 0.2rem;
    transition: color 0.2s ease;
}

.slm-mega__link:hover .slm-mega__link-title {
    color: var(--yacht-gold);
}

.slm-mega__link-desc {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

/* CTA Button */
.slm-mega__cta {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.slm-mega__cta-btn {
    display: block;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: var(--yacht-gold);
    color: var(--yacht-navy);
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.slm-mega__cta-btn:hover {
    background: #d4af37;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(201, 162, 39, 0.3);
}

/* Wide layout with featured Compass Club */
.slm-mega--featured {
    min-width: 560px;
    padding: 0;
    overflow: hidden;
}

.slm-mega__layout {
    display: grid;
    grid-template-columns: 200px 1fr;
}

/* Featured Compass Club card - LEFT side */
.slm-mega__featured {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.15) 0%, rgba(201, 162, 39, 0.05) 100%);
    border-right: 1px solid rgba(201, 162, 39, 0.2);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.slm-mega__featured::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slm-mega__featured:hover::before {
    opacity: 1;
}

.slm-mega__featured-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    color: var(--yacht-gold);
    transition: transform 0.3s ease;
}

.slm-mega__featured:hover .slm-mega__featured-icon {
    transform: rotate(15deg) scale(1.1);
}

.slm-mega__featured-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--yacht-gold);
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: rgba(201, 162, 39, 0.15);
    border-radius: 20px;
}

.slm-mega__featured-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--yacht-white);
    margin-bottom: 0.75rem;
}

.slm-mega__featured-desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.slm-mega__featured-cta {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--yacht-gold);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.2s ease;
}

.slm-mega__featured:hover .slm-mega__featured-cta {
    gap: 0.75rem;
}

/* Right side content in featured layout */
.slm-mega__main {
    padding: 1.5rem;
}

/* ==========================================================================
   NAVIGATION COMPLETE STYLES
   ========================================================================== */
.slm-nav__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.slm-nav__logo-img {
    height: 3.5rem;
    width: auto;
    transition: all var(--transition-medium);
}

@media (min-width: 768px) {
    .slm-nav__logo-img { height: 5rem; }
}

.slm-nav__links {
    display: none;
    align-items: center;
    gap: 1.5rem;
    height: 100%;
    flex-wrap: nowrap;
}
.slm-nav__links > * {
    flex-shrink: 0;
}

@media (min-width: 1110px) {
    .slm-nav__links { display: flex; }
}

.slm-nav__toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

@media (min-width: 1110px) {
    .slm-nav__toggle { display: none; }
}

.slm-nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--yacht-white);
    transition: all var(--transition-fast);
}

.slm-nav__toggle.active {
    z-index: 1001;
}
.slm-nav__toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.slm-nav__toggle.active span:nth-child(2) {
    opacity: 0;
}
.slm-nav__toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu */
.slm-mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--yacht-navy);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding-top: calc(5rem + 5vh);
    padding-bottom: calc(2rem + 5vh);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.5s ease;
}

.slm-mobile-menu.open {
    transform: translateX(0);
}

.slm-mobile-menu__link {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--yacht-white);
    transition: color var(--transition-fast);
}

.slm-mobile-menu__link:hover {
    color: var(--yacht-gold);
}

/* ==========================================================================
   CONTAINER
   ========================================================================== */
.slm-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.slm-section {
    padding: var(--section-padding) 0;
}

.slm-section--tight-top {
    padding-top: 2rem;
}

/* ==========================================================================
   HERO INNER (Subpages)
   ========================================================================== */
.slm-hero-inner {
    position: relative;
    height: 50vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: -5.5rem;
    padding-top: 5.5rem;
    background: var(--yacht-navy);
}

/* Hero H1/headline must stay white on the navy background. Without this rule
   they inherit body color (yacht-navy = #0A192F), which paints navy on navy
   and renders the heading invisible. */
.slm-hero-inner h1,
.slm-hero-inner .slm-headline,
.slm-hero-inner .slm-eyebrow {
    color: var(--yacht-white);
}
.slm-hero-inner .slm-headline--gold,
.slm-hero-inner .slm-eyebrow {
    color: var(--yacht-gold);
}

/* Mobile: Increase top padding to clear taller mobile header */
@media (max-width: 768px) {
    .slm-hero-inner {
        padding-top: 7rem;
    }
}

.slm-hero-inner__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Inner page hero text visibility */
.slm-hero-inner .slm-subhead {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Full-height inner hero modifier */
.slm-hero-inner--full {
    height: calc(100vh + 5.5rem);
    height: calc(100dvh + 5.5rem); /* Dynamic viewport height - fixes iOS address bar */
    min-height: 700px;
}

/* ==========================================================================
   DEFAULT TEMPLATE PAGE (index.php fallback, no hero)
   --------------------------------------------------------------------------
   Pages with no page-{slug}.php template (e.g. the restaurant "Menu" child
   page) render through index.php with a bare .slm-page wrapper and no hero.
   With nothing to offset the position:fixed nav, the transparent nav painted
   straight over the light content -- the page H1 collided with the logo and
   the intro copy sat under the nav.

   Rendered nav height is 124px (measured): .slm-nav__container height 6rem
   (96px) + the effective .slm-nav padding-top 1.75rem (28px) from the later
   override (the base rule's 1rem is superseded). The 5rem logo sits inside
   the 96px bar, so it is not additive. If either of those two rules changes,
   re-measure and update the padding-top below.

   .slm-page exists only in index.php, so this is scoped exactly to the
   default-template case and touches no hero page. Two parts, mirroring the
   hero-less treatment the utility pages already get via .slm-dark-header:
     1. Solid navy nav so its white logo/links stay legible over light copy.
     2. Top space that clears the 124px fixed nav, plus a min-height so a
        short page does not collapse the footer up under the header.
   ========================================================================== */
body:has(.slm-page) .slm-nav {
    background: rgba(10, 25, 47, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.slm-page {
    padding-top: 9rem; /* 144px: clears the 124px nav (see above) + ~20px breathing room */
    padding-bottom: 4rem;
    min-height: 60vh;
}

/* ==========================================================================
   DOCK WITH US HERO (Full-viewport immersive)
   ========================================================================== */
.slm-hero-dock {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height - fixes iOS address bar */
    display: flex;
    align-items: center;
    overflow: hidden;
}

.slm-hero-dock__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: slowZoom 20s ease-in-out infinite alternate;
}

@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

.slm-hero-dock__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(10, 25, 47, 0.5) 0%,
        rgba(10, 25, 47, 0.7) 50%,
        rgba(10, 25, 47, 0.85) 100%
    );
    z-index: 1;
}

.slm-hero-dock__grid {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .slm-hero-dock__grid {
        grid-template-columns: 7fr 5fr;
        gap: 3rem;
    }
}

/* Mobile: Tighter spacing to fit hero in viewport */
@media (max-width: 768px) {
    .slm-hero-dock {
        min-height: auto; /* Let content determine height */
        flex-direction: column;
        justify-content: flex-start;
        padding-bottom: 2rem;
    }
    .slm-hero-dock__grid {
        padding-top: 5.75rem;
        gap: 2.25rem;
        flex: 0 0 auto;
    }

    /* Scroll indicator flows after grid on mobile */
    .slm-hero-dock .slm-scroll-indicator {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: 2rem;
    }

    /* Hide hero subtitle on mobile - saves space */
    .slm-hero-dock__subtitle {
        display: none;
    }

    /* Reduce card top padding on mobile */
    .slm-hero-dock__card {
        padding-top: 1.25rem;
    }

    /* Boat Rentals: Extend hero to give card room below */
    .slm-hero-rentals {
        min-height: calc(100vh + 8rem);
        min-height: calc(100dvh + 8rem); /* Dynamic viewport - fixes iOS/Android address bar */
        padding-bottom: 4rem;
    }

    /* Boat Rentals: Compact card layout on mobile */
    .slm-hero-rentals .slm-hero-dock__card {
        padding: 1.25rem 1.5rem;
    }

    .slm-hero-rentals .slm-hero-dock__card h2 {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }

    .slm-hero-rentals .slm-hero-dock__card p {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    /* Boat Rentals: Tighter form spacing on mobile */
    .slm-hero-rentals .slm-hero-booking-form {
        margin-top: 0.75rem;
        gap: 0.5rem;
    }

    .slm-hero-rentals .slm-hero-booking-form__field input,
    .slm-hero-rentals .slm-hero-booking-form__field select {
        padding: 0.5rem 0.65rem;
        font-size: 16px; /* Prevents iOS zoom */
    }

    /* Keep Duration/Guests side by side on mobile */
    .slm-hero-rentals .slm-hero-booking-form__row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Left column: Text */
.slm-hero-dock__text {
    animation: fadeSlideUp 1s ease-out 0.2s both;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slm-eyebrow {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--yacht-gold);
    margin-bottom: 1rem;
}

.slm-hero-dock__title {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: var(--yacht-white);
    line-height: 1.1;
    margin: 0 0 1.5rem;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.slm-hero-dock__subtitle {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    max-width: 500px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

/* Solo variant: the dock hero with no side card (Amenities). The base
   grid is already a single column; only the >=1024px rule splits it
   7fr/5fr for the card, so the solo override just keeps that one
   column. Cap the text block so the title/subtitle hold the same
   proportions as the carded Dock/Rentals heroes. */
@media (min-width: 1024px) {
    .slm-hero-dock--solo .slm-hero-dock__grid {
        grid-template-columns: 1fr;
    }
}
.slm-hero-dock--solo .slm-hero-dock__text {
    max-width: 56rem;
}
.slm-hero-dock--solo .slm-hero-dock__subtitle {
    max-width: 640px;
}

/* Right column: Teaser Card - matches .slm-sticky-sidebar styling */
.slm-hero-dock__card {
    background: var(--yacht-white);
    padding: 2rem;
    border-top: 4px solid var(--yacht-gold);
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    text-align: center;
    animation: cardSlideUp 1s ease-out 0.5s both;
}

@keyframes cardSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slm-hero-dock__card h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--yacht-navy);
    margin: 0 0 0.5rem;
}

.slm-hero-dock__card p {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

/* Hero card with inline form */
.slm-hero-dock__card--form {
    text-align: left;
    max-width: 420px;
}

.slm-hero-dock__card--form h3 {
    text-align: center;
    margin-bottom: 1.5rem;
}

.slm-hero-dock__card--form .gform_wrapper.gform-theme {
    margin: 0;
}

.slm-hero-dock__card--form .gform_wrapper.gform-theme .gform_fields {
    gap: 0.875rem;
}

.slm-hero-dock__card--form .gform_wrapper.gform-theme .gfield_label {
    font-size: 0.7rem;
    margin-bottom: 0.25rem;
}

.slm-hero-dock__card--form .gform_wrapper.gform-theme input:not([type="checkbox"]):not([type="submit"]),
.slm-hero-dock__card--form .gform_wrapper.gform-theme select {
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
}

/* Checkbox layout in hero card - horizontal on larger screens */
.slm-hero-dock__card--form .gform_wrapper.gform-theme .gfield_checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.slm-hero-dock__card--form .gform_wrapper.gform-theme .gchoice {
    margin: 0;
}

/* Scroll Indicator */
.slm-scroll-indicator {
    position: absolute;
    bottom: calc(2rem + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--yacht-white);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    animation: fadeIn 1s ease-out 1s both;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 0.8; }
}

.slm-scroll-indicator:hover {
    opacity: 1;
}

.slm-scroll-indicator span {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.slm-scroll-indicator svg {
    width: 24px;
    height: 24px;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* Mobile: Scroll indicator positioning handled per-section (see .slm-hero-dock) */

/* ==========================================================================
   INTRO SECTION (Home)
   ========================================================================== */
.slm-intro {
    margin-top: -3rem;
    padding-top: 4rem;
    padding-bottom: 3rem;
    border-radius: 3rem 3rem 0 0;
    position: relative;
    z-index: 10;
}

@media (min-width: 768px) {
    .slm-intro {
        margin-top: 0;
        border-radius: 0;
    }
}

/* Compact services section for desktop viewport fit */
#services {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

#services .slm-intro__header {
    margin-bottom: 1.5rem;
}

#services .slm-eyebrow {
    margin-bottom: 0;
}

#services .slm-section-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

#services .slm-intro__text-wrapper {
    margin-top: 0.5rem;
}

#services .slm-gateway-card {
    height: 300px;
}

/* Wet Slips card - align image bottom center */
#services .slm-gateway-card:nth-child(2) .slm-gateway-card__media img {
    object-position: center bottom;
}

.slm-intro__content {
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
}

.slm-intro__text {
    font-weight: 300;
    font-size: 1.125rem;
    line-height: 1.75;
    color: #6b7280;
}

.slm-intro__text strong {
    font-weight: 500;
    color: var(--yacht-navy);
}

/* ==========================================================================
   ABOUT SECTION (Home - After Hero)
   ========================================================================== */
.slm-about {
    padding: 48px 0;
    background: var(--yacht-gray);
    position: relative;
    overflow: hidden;
}

.slm-about::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(212, 175, 55, 0.03) 100%);
    pointer-events: none;
}

.slm-about__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    position: relative;
}

@media (max-width: 1024px) {
    .slm-about__container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 640px) {
    .slm-about {
        padding: 40px 0;
    }
    .slm-about__container {
        padding: 0 24px;
    }
}

/* About Gallery */
.slm-about__gallery {
    position: relative;
}

.slm-about__image-main,
.slm-about__image-main > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 25px 50px -12px rgba(10, 25, 47, 0.25);
}

.slm-about__image-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.slm-about__image-secondary,
.slm-about__image-secondary > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 10px 30px -5px rgba(10, 25, 47, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.slm-about__image-secondary:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(10, 25, 47, 0.2);
}

.slm-about__gallery::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 120px;
    height: 120px;
    border: 3px solid var(--yacht-gold);
    border-radius: 8px;
    z-index: -1;
    opacity: 0.6;
}

@media (max-width: 1024px) {
    .slm-about__gallery::after {
        display: none;
    }
}

/* Laptop+ screens: shorter images for more breathing room */
@media (min-width: 1024px) {
    .slm-about__image-main,
    .slm-about__image-main > img {
        aspect-ratio: 16/9;
    }
    .slm-about__image-secondary,
    .slm-about__image-secondary > img {
        aspect-ratio: 16/9;
    }
}

/* About Content */
.slm-about__content {
    padding-right: 20px;
}

@media (max-width: 1024px) {
    .slm-about__content {
        padding-right: 0;
        order: -1;
    }
}

.slm-about__label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--yacht-gold);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.slm-about__label::before {
    content: '';
    width: 40px;
    height: 2px;
    background: var(--yacht-gold);
}

.slm-about__title {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--yacht-navy);
    margin-bottom: 16px;
}

.slm-about__description {
    font-size: 1rem;
    line-height: 1.7;
    color: #64748b;
    margin-bottom: 24px;
    max-width: 500px;
}

.slm-about__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--yacht-navy);
    color: white;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 4px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.slm-about__cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
    transition: left 0.5s ease;
}

.slm-about__cta:hover {
    background: #051021;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(10, 25, 47, 0.4);
}

.slm-about__cta:hover::before {
    left: 100%;
}

.slm-about__cta svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.slm-about__cta:hover svg {
    transform: translateX(4px);
}

/* About Stats */
.slm-about__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(10, 25, 47, 0.1);
}

@media (max-width: 640px) {
    .slm-about__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

.slm-about__stat {
    text-align: left;
}

@media (max-width: 640px) {
    .slm-about__stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .slm-about__stat:last-child {
        grid-column: 1 / -1;
        justify-self: center;
        padding-top: 12px;
        border-top: 1px solid rgba(10, 25, 47, 0.08);
    }
    .slm-about__stat-label {
        margin-top: 4px;
    }
}

.slm-about__stat-number {
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--yacht-navy);
    line-height: 1;
    display: flex;
    align-items: baseline;
}

@media (max-width: 640px) {
    .slm-about__stat-number {
        justify-content: center;
    }
}

.slm-about__stat-plus {
    font-size: 0.6em;
    color: var(--yacht-navy);
    margin-left: 2px;
}

.slm-about__stat-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   CARDS GRID
   ========================================================================== */
.slm-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .slm-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   TEAM SECTION
   ========================================================================== */
.slm-team {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .slm-team {
        grid-template-columns: 1fr 1fr;
    }
}

.slm-team__image {
    position: relative;
}

.slm-team__image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: center top;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    filter: grayscale(100%);
    transition: filter var(--transition-slow);
}

.slm-team__image:hover img {
    filter: grayscale(0%);
}

.slm-team__accent {
    position: absolute;
    width: 6rem;
    height: 6rem;
    z-index: -1;
}

.slm-team__accent--top {
    top: -1rem;
    left: -1rem;
    background: rgba(212, 175, 55, 0.2);
}

.slm-team__accent--bottom {
    bottom: -1rem;
    right: -1rem;
    background: rgba(10, 25, 47, 0.1);
}

.slm-team__text {
    color: #6b7280;
    font-weight: 300;
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   SOCIAL SECTION
   ========================================================================== */
.slm-social__content {
    text-align: center;
}

.slm-social__text {
    color: #d1d5db;
    max-width: 36rem;
    margin: 0 auto 3rem;
    font-weight: 300;
}

.slm-social__links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    align-items: center;
}

.slm-social__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--yacht-gold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.slm-social__link:hover {
    color: var(--yacht-white);
}

.slm-social__divider {
    color: #4b5563;
}

/* Instagram Feed Carousel */
.slm-social__feed-wrapper {
    position: relative;
    margin-top: 3rem;
}

.slm-social__feed {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding: 0.5rem 0;
}

.slm-social__feed::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.slm-social__feed-item {
    flex: 0 0 calc(50% - 0.5rem);
    aspect-ratio: 4 / 5;
    display: block;
    overflow: hidden;
    border-radius: 4px;
}

@media (min-width: 768px) {
    .slm-social__feed-item {
        flex: 0 0 calc(25% - 0.75rem);
    }
}

.slm-social__feed-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.slm-social__feed-item:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Feed Navigation Arrows */
.slm-social__feed-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(26, 38, 52, 0.8);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    z-index: 2;
}

.slm-social__feed-arrow:hover {
    background: var(--yacht-gold);
    color: var(--yacht-navy);
}

.slm-social__feed-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.slm-social__feed-arrow--prev {
    left: -1rem;
}

.slm-social__feed-arrow--next {
    right: -1rem;
}

@media (max-width: 767px) {
    .slm-social__feed {
        flex-wrap: wrap;
        overflow-x: visible;
        justify-content: space-between;
    }

    .slm-social__feed-item:nth-child(n+7) {
        display: none;
    }

    .slm-social__feed-arrow {
        display: none;
    }
}

/* See More Button (mobile only) */
.slm-social__see-more {
    display: none;
}

@media (max-width: 767px) {
    .slm-social__see-more {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1.5rem;
        padding: 0.75rem 1.5rem;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 4px;
        color: var(--yacht-white);
        font-size: 0.875rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .slm-social__see-more:hover {
        background: var(--yacht-gold);
        border-color: var(--yacht-gold);
        color: var(--yacht-navy);
    }

    .slm-social__see-more svg {
        width: 16px;
        height: 16px;
    }
}

/* ==========================================================================
   REVIEWS SECTION (GatherUp Widget)
   ========================================================================== */
.slm-reviews {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.slm-reviews__header {
    text-align: center;
    margin-bottom: 3rem;
}

.slm-reviews__header .slm-eyebrow {
    color: var(--yacht-gold);
    margin-bottom: 0.25rem;
}

.slm-reviews__header .slm-section-title {
    margin-top: 0;
}

.slm-reviews__widget {
    max-width: 1100px;
    margin: 0 auto;
}

/* GatherUp Widget Container */
.slm-reviews__widget .revwid-container {
    font-family: var(--font-sans) !important;
}

/* Header Section with Rating */
.slm-reviews__widget .revwid-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem;
    background: var(--yacht-navy);
    border-radius: 12px;
    margin-bottom: 2rem;
}

/* Overall Rating Display */
.slm-reviews__widget .revwid-overall-rating {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.slm-reviews__widget .revwid-overall-rating-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.slm-reviews__widget .revwid-overall-rating-score {
    font-family: var(--font-display) !important;
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    color: var(--yacht-gold) !important;
    line-height: 1;
}

.slm-reviews__widget .revwid-overall-rating-out-of-label {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem !important;
    color: var(--yacht-white) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.slm-reviews__widget .revwid-overall-rating-stars {
    display: flex;
    gap: 0.25rem;
}

.slm-reviews__widget .revwid-overall-rating-sum {
    font-size: 0.9rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Star Icons */
.slm-reviews__widget .revwid-icon-star,
.slm-reviews__widget .revwid-icon-star-half {
    color: var(--yacht-gold) !important;
}

.slm-reviews__widget .revwid-icon-star::before {
    color: var(--yacht-gold) !important;
}

/* CTA Buttons */
.slm-reviews__widget .revwid-ctas {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.slm-reviews__widget .revwid-button {
    padding: 0.75rem 1.5rem !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all var(--transition-fast) !important;
    text-decoration: none !important;
}

.slm-reviews__widget .revwid-is-leave-feedback-button {
    background: var(--yacht-gold) !important;
    color: var(--yacht-navy) !important;
    border: none !important;
}

.slm-reviews__widget .revwid-is-leave-feedback-button:hover {
    background: #d4a853 !important;
    transform: translateY(-2px);
}

.slm-reviews__widget .revwid-is-filter-button {
    background: transparent !important;
    color: var(--yacht-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.slm-reviews__widget .revwid-is-filter-button:hover {
    border-color: var(--yacht-white) !important;
}

/* Hide Filter Dropdown - not needed */
.slm-reviews__widget .revwid-filter-container {
    display: none !important;
}

/* Reviews Container */
.slm-reviews__widget .revwid-reviews-wrapper {
    position: relative;
    margin-bottom: 2rem;
}

.slm-reviews__widget .revwid-reviews {
    display: grid !important;
    gap: 1.5rem !important;
}

@media (min-width: 768px) {
    .slm-reviews__widget .revwid-reviews {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .slm-reviews__widget .revwid-reviews {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Individual Review Card */
.slm-reviews__widget .revwid-review {
    background: #f8f9fa !important;
    border-radius: 12px !important;
    overflow: hidden;
    transition: all var(--transition-medium) !important;
    height: auto !important;
    width: auto !important;
    flex: none !important;
}

.slm-reviews__widget .revwid-review:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important;
}

.slm-reviews__widget .revwid-box {
    padding: 1.5rem !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Review Header */
.slm-reviews__widget .revwid-review-header {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.slm-reviews__widget .revwid-review-stars {
    display: flex !important;
    gap: 0.125rem !important;
}

.slm-reviews__widget .revwid-review-stars .revwid-icon-star {
    font-size: 1rem !important;
    color: var(--yacht-gold) !important;
}

.slm-reviews__widget .revwid-review-rating-text {
    font-size: 0.75rem !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

.slm-reviews__widget .revwid-review-source-logo {
    margin-left: auto !important;
}

.slm-reviews__widget .revwid-review-source-logo img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
}

/* Review Content */
.slm-reviews__widget .revwid-review-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.slm-reviews__widget .revwid-review-author {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    color: var(--yacht-navy) !important;
    font-size: 1rem !important;
    display: block !important;
    margin-bottom: 0.25rem !important;
}

.slm-reviews__widget .revwid-review-date {
    font-size: 0.8rem !important;
    color: #9ca3af !important;
    display: block !important;
    margin-bottom: 0.75rem !important;
}

.slm-reviews__widget .revwid-review-text {
    font-family: var(--font-sans) !important;
    color: #374151 !important;
    line-height: 1.7 !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
}

.slm-reviews__widget .revwid-review-intro-text,
.slm-reviews__widget .revwid-review-full-text {
    flex: 1;
}

/* Read More Link */
.slm-reviews__widget .revwid-review-read-more-link a {
    color: var(--yacht-gold) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
}

.slm-reviews__widget .revwid-review-read-more-link a:hover {
    text-decoration: underline !important;
}

/* Hide carousel arrows - using bottom pagination instead */
.slm-reviews__widget .revwid-reviews-wrapper > .revwid-pagination-arrow {
    display: none !important;
}

/* Bottom Pagination */
.slm-reviews__widget .revwid-pagination {
    display: flex !important;
    justify-content: center !important;
    margin-top: 2rem !important;
}

.slm-reviews__widget .revwid-pagination-list {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.slm-reviews__widget .revwid-pagination-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    color: var(--yacht-navy) !important;
    text-decoration: none !important;
    transition: all var(--transition-fast) !important;
}

.slm-reviews__widget .revwid-pagination-link:hover {
    background: #f3f4f6 !important;
}

.slm-reviews__widget .revwid-pagination-link.revwid-is-active {
    background: var(--yacht-navy) !important;
    color: var(--yacht-white) !important;
}

.slm-reviews__widget .revwid-pagination-ellipsis {
    color: #9ca3af !important;
}

/* Powered By Footer */
.slm-reviews__widget .revwid-powered-by-text {
    font-size: 0.75rem !important;
    color: #9ca3af !important;
    text-align: center !important;
    margin-top: 1.5rem !important;
}

.slm-reviews__widget .revwid-powered-by-text a {
    color: var(--yacht-gold) !important;
    text-decoration: none !important;
}

/* Hide scrollable area styling - we're using grid */
.slm-reviews__widget .revwid-reviews-scrollable-area {
    overflow: visible !important;
}

/* ==========================================================================
   DOCK WITH US LAYOUTS
   ========================================================================== */
.slm-tabs {
    position: sticky;
    top: 6.5rem; /* Header height (5.5rem + 1rem padding) - no gap */
    z-index: 40;
    background: rgba(248, 249, 250, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    margin-top: -2rem;
    padding: 0.5rem 0;
    margin-bottom: 3rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: center;
    gap: 2rem;
    overflow-x: auto;
    grid-column: 1 / -1; /* Span full width of grid layout */
}

.slm-tabs__btn {
    background: none;
    border: none;
    padding: 0.5rem 0;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #6b7280; /* WCAG AA: 4.6:1 on light gray */
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.slm-tabs__btn:hover,
.slm-tabs__btn.active {
    color: var(--yacht-navy);
}

.slm-tabs__btn.active {
    border-color: var(--yacht-gold);
}

/* Tabs Mobile UX - 2x2 grid layout */
@media (max-width: 768px) {
    .slm-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        overflow-x: visible;
        top: 5.5rem; /* Adjust for mobile header height */
        margin-bottom: 0.5rem; /* Tight spacing to content */
    }
    .slm-tabs__btn {
        text-align: center;
        font-size: 0.7rem;
        padding: 0.5rem 0.25rem;
        white-space: normal; /* Allow text wrap if needed */
        line-height: 1.3;
    }
}

/* Tabs gradient fade indicators wrapper */
.slm-tabs-wrapper {
    position: relative;
}

@media (max-width: 768px) {
    /* Hide gradient indicators - not needed with 2x2 grid */
    .slm-tabs-wrapper::before,
    .slm-tabs-wrapper::after {
        display: none;
    }
}

.slm-dock-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (max-width: 768px) {
    .slm-dock-layout {
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .slm-dock-layout {
        grid-template-columns: 7fr 5fr;
    }
}

.slm-dock-content {
    display: flex;
    flex-direction: column;
    gap: 6rem;
}

@media (max-width: 768px) {
    .slm-dock-content {
        gap: 2.5rem;
    }
}

.slm-dock-section {
    scroll-margin-top: 12rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.slm-dock-section:first-child {
    border-top: none;
    padding-top: 0;
}

.slm-dock-section__text {
    color: #6b7280;
    font-weight: 300;
    font-size: 1.125rem;
    line-height: 1.75;
    margin-bottom: 2rem;
}

.slm-dock-section__image,
.slm-dock-section__image > img {
    width: 100%;
    max-width: 100%;
    height: 20rem;
    object-fit: cover;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.2);
}

/* Mobile-only CTA button (hidden on desktop) */
.slm-mobile-cta {
    display: none;
}

/* Dock sections mobile - tighter spacing */
@media (max-width: 768px) {
    .slm-dock-section {
        padding-top: 1.5rem;
    }
    .slm-dock-section__text {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    .slm-dock-section__image,
    .slm-dock-section__image > img {
        height: 14rem;
    }
    .slm-mobile-cta {
        display: inline-flex;
        margin-top: 1rem;
        width: 100%;
        justify-content: center;
    }
}

/* Features Grid */
.slm-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .slm-features {
        grid-template-columns: 1fr 1fr;
    }
}

.slm-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--yacht-white);
    border: 1px solid #f3f4f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.slm-feature__icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--yacht-gold);
    flex-shrink: 0;
    margin-top: 1.3rem; /* Align icon with h4 text */
}

.slm-feature h3,
.slm-feature h4 {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    color: var(--yacht-navy);
    margin-bottom: 0.25rem;
}

.slm-feature p {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 300;
}

/* ==========================================================================
   BOAT RENTALS
   ========================================================================== */
.slm-rentals-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .slm-rentals-layout {
        grid-template-columns: 2fr 1fr;
    }
}

.slm-rentals-content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.slm-rentals__text {
    color: #6b7280;
    font-weight: 300;
    font-size: 1.125rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

/* Boat Card */
.slm-boat-card {
    background: var(--yacht-white);
    border: 1px solid #f3f4f6;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.slm-boat-card__image {
    position: relative;
    height: 16rem;
}

@media (min-width: 768px) {
    .slm-boat-card__image { height: 20rem; }
}

.slm-boat-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slm-boat-card__badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--yacht-gold);
    color: var(--yacht-navy);
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.slm-boat-card__content {
    padding: 2rem;
}

.slm-boat-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.slm-boat-card__title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--yacht-navy);
}

.slm-boat-card__price-label {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.slm-boat-card__price-value {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--yacht-navy);
}

.slm-boat-card__price-value span {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: #6b7280; /* WCAG AA: 4.6:1 on white */
}

.slm-boat-card__specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1.5rem 0;
    border-top: 1px solid #f3f4f6;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .slm-boat-card__specs {
        grid-template-columns: repeat(4, 1fr);
    }
}

.slm-boat-card__spec {
    text-align: center;
}

.slm-boat-card__spec-icon {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.slm-boat-card__spec span:last-child {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 500;
}

.slm-boat-card__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.slm-boat-card__actions .slm-btn {
    flex: 1;
    min-width: 140px;
}

/* Policies */
.slm-policies {
    background: #f9fafb;
    padding: 2rem;
    border-left: 4px solid var(--yacht-gold);
}

.slm-policies__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--yacht-navy);
    margin-bottom: 1rem;
}

.slm-policies__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.slm-policies__list li {
    display: flex;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.slm-policies__bullet {
    color: var(--yacht-gold);
}

/* Booking Sidebar */
.slm-booking-sidebar {
    position: sticky;
    top: 10rem; /* Below sticky tabs (6.5rem) + tab height (~3rem) + 0.5rem margin */
    align-self: start;
    height: fit-content;
    background: var(--yacht-navy);
    padding: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.slm-booking-sidebar__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--yacht-white);
    margin-bottom: 1.5rem;
}

.slm-booking-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.slm-booking-form__field label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--yacht-gold);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.slm-booking-form__field input,
.slm-booking-form__field select {
    width: 100%;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--yacht-white);
    font-family: var(--font-sans);
}

.slm-booking-form__field select option {
    color: var(--yacht-navy);
}

.slm-booking-form__field input:focus,
.slm-booking-form__field select:focus {
    outline: none;
    border-color: var(--yacht-gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2);
}

/* Date input webkit styling */
.slm-booking-form__field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* Flatpickr Theme - Light/Contrast */
.flatpickr-calendar {
    background: var(--warm-white);
    border: 1px solid rgba(26, 38, 52, 0.15);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
    font-family: var(--font-primary);
}

.flatpickr-months .flatpickr-month {
    background: var(--yacht-navy);
    color: var(--yacht-white);
    border-radius: 0.5rem 0.5rem 0 0;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--yacht-white);
    font-weight: 500;
    background: transparent;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
    color: var(--yacht-navy);
    background: var(--warm-white);
}

.flatpickr-current-month input.cur-year {
    color: var(--yacht-white);
    font-weight: 500;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--yacht-white);
    fill: var(--yacht-white);
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    color: var(--yacht-gold);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--yacht-gold);
}

.flatpickr-weekdays {
    background: var(--warm-white);
    border-bottom: 1px solid rgba(26, 38, 52, 0.1);
}

span.flatpickr-weekday {
    color: var(--yacht-navy);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.flatpickr-days {
    background: var(--warm-white);
}

.flatpickr-day {
    color: var(--yacht-navy);
    border-radius: 0.25rem;
    font-weight: 500;
}

.flatpickr-day:hover {
    background: rgba(201, 162, 39, 0.15);
    border-color: transparent;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--yacht-gold);
    border-color: var(--yacht-gold);
    color: var(--yacht-navy);
    font-weight: 600;
}

.flatpickr-day.today {
    border-color: var(--yacht-gold);
    background: rgba(201, 162, 39, 0.1);
}

.flatpickr-day.today:hover {
    background: rgba(201, 162, 39, 0.2);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: rgba(26, 38, 52, 0.3);
    background: transparent;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgba(26, 38, 52, 0.35);
}

/* Flatpickr altInput - inherits from form field styles */
.slm-booking-form__field .flatpickr-input[type="hidden"] + input {
    width: 100%;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--yacht-white);
    border-radius: 0;
    font-family: var(--font-primary);
    cursor: pointer;
}

.slm-booking-form__field .flatpickr-input[type="hidden"] + input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.slm-booking-form__field .flatpickr-input[type="hidden"] + input:focus {
    outline: none;
    border-color: var(--yacht-gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2);
}

/* ==========================================================================
   AMENITIES
   ========================================================================== */
.slm-amenities {
    display: flex;
    flex-direction: column;
    gap: 6rem;
}

.slm-amenity {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
    scroll-margin-top: calc(50vh - 8.9rem); /* Align hero bottom with header bottom */
}

@media (min-width: 1024px) {
    .slm-amenity {
        flex-direction: row;
    }
    .slm-amenity--reverse {
        flex-direction: row-reverse;
    }
}

/* Mobile: Reorder so title appears above image */
@media (max-width: 768px) {
    .slm-amenity {
        gap: 0.75rem; /* Tight gap for mobile */
    }

    .slm-amenity__content {
        display: contents; /* Children become direct flex items */
    }

    .slm-amenity .slm-section-title {
        order: -2; /* Title first */
        margin: 0; /* Gap handles spacing */
    }

    .slm-amenity__image {
        order: -1; /* Image second */
    }

    /* Divider, text, details stay in DOM order (after image) */
    .slm-amenities .slm-amenity .slm-divider {
        margin: 0.5rem 0 !important; /* Override base rule */
    }

    .slm-amenity__text {
        margin: 0; /* Gap handles spacing */
    }

    .slm-amenity__details {
        margin-top: 0; /* Gap handles spacing */
    }
}

.slm-amenity__image {
    flex: 1;
    position: relative;
    height: 16rem;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {
    .slm-amenity__image { height: 24rem; }
}

.slm-amenity__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.slm-amenity:hover .slm-amenity__image img {
    transform: scale(1.1);
}

.slm-amenity__image::after {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
}

.slm-amenity__content {
    flex: 1;
}

.slm-amenity__text {
    color: #6b7280;
    font-weight: 300;
    font-size: 1.125rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

.slm-amenity__details {
    background: var(--warm-white);
    border-left: 3px solid var(--yacht-gold);
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}

.slm-amenity__details p {
    margin: 0.5rem 0;
    font-size: 0.9375rem;
    color: #4b5563;
}

.slm-amenity__details p:first-child {
    margin-top: 0;
}

.slm-amenity__details p:last-child {
    margin-bottom: 0;
}

/* Event Space (inside restaurant amenity) */
.slm-amenity__event-space {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.slm-amenity__event-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--yacht-navy);
}

.slm-amenity__event-title svg {
    color: var(--yacht-gold);
}

.slm-amenity__event-space p {
    margin: 0.5rem 0;
    font-size: 0.9375rem;
    color: #4b5563;
}

/* Travel Lift Styles */
.slm-travel-lift__capacity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(201, 162, 39, 0.1);
    border-radius: 0.5rem;
}

.slm-travel-lift__capacity svg {
    color: var(--yacht-gold);
}

.slm-travel-lift__capacity-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--yacht-navy);
}

.slm-travel-lift__capacity-label {
    font-size: 0.875rem;
    color: #6b7280;
}

.slm-travel-lift__claim {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    font-style: italic;
    color: var(--yacht-navy);
}

.slm-travel-lift__forklifts {
    margin-top: 1rem;
    font-size: 0.9375rem;
    color: #4b5563;
}

/* ==========================================================================
   SISTER PROPERTY (RV Resort)
   ========================================================================== */
.slm-sister-property {
    padding: 5rem 0;
}

.slm-sister-property__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 768px) {
    .slm-sister-property__grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

.slm-sister-property__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
}

.slm-sister-property__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.slm-sister-property:hover .slm-sister-property__image img {
    transform: scale(1.05);
}

.slm-sister-property__image::after {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
}

.slm-sister-property__content .slm-eyebrow {
    margin-bottom: 0.75rem;
}

.slm-sister-property__content .slm-section-title {
    color: var(--yacht-white);
    margin-bottom: 0.5rem;
}

.slm-sister-property__tagline {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--yacht-gold);
    margin-bottom: 1.5rem;
}

.slm-sister-property__text {
    color: #d1d5db;
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.75;
    margin-bottom: 2rem;
}

.slm-sister-property__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.slm-sister-property__feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
}

.slm-sister-property__feature svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--yacht-gold);
    flex-shrink: 0;
}

/* Map Section */
.slm-map-section__content {
    text-align: center;
    margin-bottom: 3rem;
}

.slm-map-section__text {
    color: #6b7280;
    max-width: 42rem;
    margin: 0 auto;
    font-weight: 300;
}

.slm-map-section__map {
    filter: grayscale(50%);
    transition: filter var(--transition-medium);
}

.slm-map-section__map:hover {
    filter: grayscale(0%);
}

.slm-map-section__map iframe {
    display: block;
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.slm-contact-hero {
    padding: 8rem 0 4rem;
    text-align: center;
}

/* Contact Hero Mobile */
@media (max-width: 768px) {
    .slm-contact-hero {
        padding: 6rem 0 3rem;
    }
}

@media (max-width: 480px) {
    .slm-contact-hero .slm-hero__buttons {
        flex-direction: column;
        width: 100%;
        padding: 0 1rem;
    }

    .slm-contact-hero .slm-hero__buttons .slm-btn {
        width: 100%;
        max-width: 300px;
    }
}

/* Form anchor scroll offset */
#contact-form {
    scroll-margin-top: 6rem;
}

.slm-contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .slm-contact-layout {
        grid-template-columns: 1fr 1fr;
        gap: 6rem;
    }
}

.slm-contact-info {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.slm-contact-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.slm-contact-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.slm-contact-card__icon {
    padding: 0.75rem;
    background: var(--yacht-white);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.slm-contact-card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--yacht-gold);
}

.slm-contact-card h3 {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    color: var(--yacht-navy);
    margin-bottom: 0.25rem;
}

.slm-contact-card p {
    color: #6b7280;
    font-weight: 300;
}

.slm-contact-card a {
    color: #6b7280;
}

.slm-contact-card a:hover {
    color: var(--yacht-gold);
}

/* Hours */
.slm-hours__card {
    background: var(--yacht-white);
    padding: 2rem;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--yacht-gold);
}

.slm-hours__row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.slm-hours__row:last-child {
    margin-bottom: 0;
}

.slm-hours__row svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--yacht-navy);
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.slm-hours__row h4 {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    color: var(--yacht-navy);
    margin-bottom: 0.25rem;
}

.slm-hours__row p {
    color: #6b7280;
    font-weight: 300;
}

/* Contact Form */
.slm-contact-form-wrapper {
    background: var(--yacht-white);
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

@media (min-width: 1024px) {
    .slm-contact-form-wrapper { padding: 3rem; }
}

.slm-contact-form .slm-form__field input,
.slm-contact-form .slm-form__field select,
.slm-contact-form .slm-form__field textarea {
    border: none;
    border-bottom: 2px solid #e5e7eb;
    background: #f9fafb;
    padding: 1rem;
}

.slm-contact-form .slm-form__field input:focus,
.slm-contact-form .slm-form__field select:focus,
.slm-contact-form .slm-form__field textarea:focus {
    border-bottom-color: var(--yacht-gold);
}

/* ==========================================================================
   FORM UTILITIES
   ========================================================================== */
.slm-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.slm-form__row--thirds {
    grid-template-columns: repeat(3, 1fr);
}

.slm-form__field {
    margin-bottom: 1rem;
}

.slm-form__label--gold {
    color: var(--yacht-gold) !important;
    font-weight: 700 !important;
}

.slm-form__checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.slm-checkbox {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.slm-checkbox input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--yacht-navy);
}

.slm-checkbox span {
    font-size: 0.875rem;
    color: #6b7280;
    transition: color var(--transition-fast);
}

.slm-checkbox:hover span {
    color: var(--yacht-navy);
}

/* ==========================================================================
   BUTTON VARIANTS
   ========================================================================== */
.slm-btn--sm {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
}

.slm-btn--lg {
    padding: 1.25rem 2.5rem;
    font-size: 1rem;
}

.slm-btn--full {
    width: 100%;
}

.slm-btn--gold {
    background: var(--yacht-gold);
    color: var(--yacht-navy);
    border-color: var(--yacht-gold);
}

.slm-btn--gold:hover {
    background: var(--yacht-white);
    color: var(--yacht-navy);
}

/* ==========================================================================
   FLOATING COMPASS
   ========================================================================== */
.slm-compass-float {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1000;
    text-decoration: none;
    width: 98px;
    height: 98px;
    overflow: visible;
}

.slm-compass-float__inner {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 93px;
    height: 93px;
    background: var(--yacht-navy);
    clip-path: ellipse(100% 100% at 100% 100%);
    transition: all 0.3s ease;
}

.slm-compass-float__logo {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 137px;
    height: 137px;
    max-width: none;
    object-fit: contain;
    transform: translate(50%, 50%) rotate(45deg);
    transform-origin: center;
    transition: transform 0.3s ease;
    z-index: 2;
}

.slm-compass-float:hover .slm-compass-float__logo {
    transform: translate(50%, 50%) rotate(90deg) scale(1.15);
}

.slm-compass-float__curved-text {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 105px;
    height: 105px;
    pointer-events: none;
    z-index: 3;
}

.slm-compass-float__curved-text text {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    fill: var(--yacht-gold);
}

@media (max-width: 768px) {
    .slm-compass-float {
        width: 74px;
        height: 74px;
    }

    .slm-compass-float__inner {
        width: 70px;
        height: 70px;
    }

    .slm-compass-float__logo {
        width: 104px;
        height: 104px;
    }

    .slm-compass-float__curved-text {
        width: 95px;
        height: 95px;
        bottom: -10px;
        right: -10px;
    }

    .slm-compass-float__curved-text text {
        font-size: 14px;
    }
}

/* ==========================================================================
   COMPASS CLUB PAGE
   ========================================================================== */
.slm-headline--gold {
    color: var(--yacht-gold);
}

.slm-gold-text {
    color: var(--yacht-gold);
}

.slm-overline {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.slm-bg-dark {
    background: #0a0f14;
}

.slm-divider--gold {
    background: var(--yacht-gold);
    opacity: 0.5;
}

/* Compass Hero Logo */
.slm-compass-hero-icon {
    margin-bottom: 2rem;
}

.slm-compass-hero-icon--light {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.slm-compass-hero-logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

/* Compass Intro Section */
.slm-compass-intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}

@media (min-width: 992px) {
    .slm-compass-intro {
        grid-template-columns: 1fr 1fr;
    }
}

.slm-compass-intro__text {
    color: #9ca3af;
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.slm-compass-intro__text strong {
    color: white;
    font-weight: 500;
}

/* Membership Card */
.slm-membership-card {
    aspect-ratio: 1.586 / 1;
    max-width: 400px;
    margin: 0 auto;
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transition: transform 0.5s ease;
}

.slm-membership-card:hover {
    transform: rotate(2deg) scale(1.02);
}

.slm-membership-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.1) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.slm-membership-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.slm-membership-card__logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    opacity: 0.8;
}

.slm-membership-card__label {
    font-family: var(--font-serif);
    font-size: 0.65rem;
    color: rgba(201, 162, 39, 0.6);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.slm-membership-card__footer {
    position: relative;
    z-index: 1;
}

.slm-membership-card__title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: white;
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
}

.slm-membership-card__access {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.slm-membership-card__line {
    width: 2rem;
    height: 1px;
    background: rgba(201, 162, 39, 0.5);
}

.slm-membership-card__text {
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    color: rgba(201, 162, 39, 0.7);
    letter-spacing: 0.15em;
}

/* Benefits Grid */
.slm-benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .slm-benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Benefit Card */
.slm-benefit-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.5s ease;
}

.slm-benefit-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(201, 162, 39, 0.3);
}

.slm-benefit-card__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--yacht-gold);
    transition: border-color 0.5s ease;
}

.slm-benefit-card:hover .slm-benefit-card__icon {
    border-color: rgba(201, 162, 39, 0.5);
}

.slm-benefit-card__partner {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.slm-benefit-card__title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--yacht-gold);
    margin-bottom: 1.5rem;
    transition: color 0.3s ease;
}

.slm-benefit-card:hover .slm-benefit-card__title {
    color: white;
}

.slm-benefit-card__desc {
    color: #9ca3af;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.slm-benefit-card__access {
    display: inline-block;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--yacht-gold);
    font-size: 1.1rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(201, 162, 39, 0.3);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.slm-footer {
    background: var(--yacht-navy);
    color: var(--yacht-white);
}

.slm-footer__top {
    padding: 4rem 0;
}

.slm-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

/* Tablet: 2-up so columns have breathing room. Previously the 5-up rule
   triggered at 768 and crushed each column to ~120px, forcing one-word-per-
   line wrapping in Hours and Quick Links. */
@media (min-width: 768px) and (max-width: 1023px) {
    .slm-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .slm-footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1.2fr 1fr;
        gap: 2rem;
    }
}

.slm-footer__logo {
    height: 6rem;
    width: auto;
    margin-bottom: 1rem;
}

.slm-footer__tagline {
    color: #9ca3af;
    font-weight: 300;
}

.slm-footer__heading {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--yacht-gold);
    margin-bottom: 1rem;
}

.slm-footer__links a,
.slm-footer__contact p,
.slm-footer__contact a,
.slm-footer__hours p {
    display: block;
    color: #9ca3af;
    font-weight: 300;
    margin-bottom: 0.5rem;
    transition: color var(--transition-fast);
}

.slm-footer__hours p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.slm-footer__hours p:last-child {
    margin-bottom: 0;
}

.slm-footer__hours strong {
    color: var(--yacht-gold);
}

.slm-footer__hours-note {
    font-size: 0.8125rem;
    font-style: italic;
    color: #6b7280;
    margin-top: 0.5rem;
}

.slm-footer__links a:hover,
.slm-footer__contact a:hover {
    color: var(--yacht-gold);
}

.slm-footer__social-links {
    display: flex;
    gap: 1rem;
}

.slm-footer__social-links a {
    color: #9ca3af;
    transition: color var(--transition-fast);
}

.slm-footer__social-links a:hover {
    color: var(--yacht-gold);
}

.slm-footer__bottom {
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.slm-footer__bottom p {
    color: #a8b2bd; /* WCAG AA: 5.0:1 on navy */
    font-size: 0.875rem;
}

.slm-footer__recaptcha {
    margin-top: 0.5rem;
    font-size: 0.75rem !important;
    color: #a8b2bd !important; /* WCAG AA: 5.0:1 on navy */
}

.slm-footer__recaptcha a {
    color: #a8b2bd; /* WCAG AA: 5.0:1 on navy */
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.slm-footer__recaptcha a:hover {
    color: var(--yacht-gold);
}

/* Footer Mobile Polish - compact layout */
@media (max-width: 767px) {
    /* Reduce overall padding */
    .slm-footer__top {
        padding: 2rem 0;
    }
    .slm-footer__grid {
        gap: 1.5rem;
    }
    .slm-footer__grid > * {
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .slm-footer__grid > *:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }
    .slm-footer__brand {
        text-align: center;
    }
    .slm-footer__logo {
        margin-left: auto;
        margin-right: auto;
    }
    .slm-footer__social-links {
        justify-content: center;
    }

    /* Quick Links - 2 columns */
    .slm-footer__links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.25rem 1rem;
    }
    .slm-footer__links .slm-footer__heading {
        grid-column: 1 / -1;
    }
    .slm-footer__links a {
        margin-bottom: 0.25rem;
    }

    /* Hours - 2 columns */
    .slm-footer__hours {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1rem;
    }
    .slm-footer__hours .slm-footer__heading {
        grid-column: 1 / -1;
    }
    .slm-footer__hours p {
        margin-bottom: 0;
        line-height: 1.4;
    }

    /* Contact - tighter spacing */
    .slm-footer__contact p {
        margin-bottom: 0.25rem;
        line-height: 1.3;
    }

    /* Headings - less bottom margin */
    .slm-footer__heading {
        margin-bottom: 0.5rem;
    }
}

/* ==========================================================================
   GATEWAY GRID (New Home Page Section)
   ========================================================================== */

/* Background Decoration - Noise/Grain Texture */
.slm-nautical-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.slm-nautical-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.15;
}

/* Header Adjustments */
.slm-intro__header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 2;
}

.slm-intro__text-wrapper {
    max-width: 700px;
    margin: 1.5rem auto 0;
}

.slm-text-gold {
    color: var(--yacht-gold);
    font-style: italic;
}

/* Grid Layout */
.slm-gateway-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    position: relative;
    z-index: 2;
}

@media (min-width: 768px) {
    .slm-gateway-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 1.25rem;
    }

    /* Top 3 cards each span 2 columns */
    .slm-gateway-grid > :nth-child(1),
    .slm-gateway-grid > :nth-child(2),
    .slm-gateway-grid > :nth-child(3) {
        grid-column: span 2;
    }

    /* Bottom 2 cards centered (span 2 cols each, offset by 1) */
    .slm-gateway-grid > :nth-child(4) {
        grid-column: 2 / 4;
    }

    .slm-gateway-grid > :nth-child(5) {
        grid-column: 4 / 6;
    }
}

/* Image Card Component */
.slm-gateway-card {
    display: block;
    position: relative;
    height: 500px; /* Taller format for elegance */
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    background: var(--yacht-navy);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.slm-gateway-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

/* Media/Image */
.slm-gateway-card__media {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.slm-gateway-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.slm-gateway-card:hover .slm-gateway-card__media img {
    transform: scale(1.1);
}

/* Gradient Overlay - stronger for text readability */
.slm-gateway-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(5, 16, 33, 0.95) 0%,
        rgba(5, 16, 33, 0.7) 35%,
        rgba(5, 16, 33, 0.2) 70%,
        rgba(5, 16, 33, 0.05) 100%
    );
    z-index: 2;
    transition: opacity var(--transition-medium);
}

.slm-gateway-card:hover::after {
    opacity: 0.95;
}

/* Content */
.slm-gateway-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.25rem 1.5rem;
    z-index: 3;
    color: var(--yacht-white);
    transform: translateY(0);
    transition: transform var(--transition-medium);
}

.slm-gateway-card__subtitle {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--yacht-gold);
    margin-bottom: 0.05rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--transition-medium);
}

.slm-gateway-card:hover .slm-gateway-card__subtitle {
    opacity: 1;
    transform: translateY(0);
}

.slm-gateway-card__title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 0.25rem;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.slm-gateway-card__desc {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.5rem;
    line-height: 1.4;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* CTA Arrow */
.slm-gateway-card__cta {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--yacht-gold);
    transition: color var(--transition-fast);
}

.slm-gateway-card:hover .slm-gateway-card__cta {
    color: var(--yacht-white);
}

/* ==========================================================================
   BOAT RENTALS PAGE - IMMERSIVE LAYOUT
   ========================================================================== */

/* Hero booking form scroll margin for anchor links */
#hero-booking-form,
.slm-hero-booking-form {
    scroll-margin-top: 8rem; /* Nav (5.5rem) + breathing room */
}

/* Hero Booking Form (inside hero card) */
.slm-hero-booking-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.slm-hero-booking-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 600px) {
    .slm-hero-booking-form__row {
        grid-template-columns: 1fr;
    }
}

.slm-hero-booking-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.slm-hero-booking-form__field label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b7280;
    font-weight: 600;
}

.slm-hero-booking-form__field input,
.slm-hero-booking-form__field select {
    padding: 0.6rem 0.75rem;
    border: 1px solid #e5e7eb;
    background: var(--yacht-gray);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--yacht-navy);
    transition: border-color var(--transition-fast);
}

.slm-hero-booking-form__field input:focus,
.slm-hero-booking-form__field select:focus {
    outline: none;
    border-color: var(--yacht-gold);
}

/* Featured Boat Card (larger format for rentals) */
.slm-boat-card--featured {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--yacht-white);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

@media (min-width: 768px) {
    .slm-boat-card--featured {
        grid-template-columns: 1fr 1fr;
    }
}

.slm-boat-card--featured .slm-boat-card__image {
    height: 280px;
}

@media (min-width: 768px) {
    .slm-boat-card--featured .slm-boat-card__image {
        height: 100%;
        min-height: 400px;
    }
}

.slm-boat-card--featured .slm-boat-card__content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

/* Boat Card Type Label */
.slm-boat-card__type {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--yacht-gold);
    margin-bottom: 0.25rem;
}

/* Boat Card Description */
.slm-boat-card__desc {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Boat Card Specs with SVG icons */
.slm-boat-card__spec svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--yacht-gold);
    flex-shrink: 0;
}

.slm-boat-card__spec {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

/* Badge Variants */
.slm-boat-card__badge--value {
    background: #22c55e;
}

.slm-boat-card__badge--premium {
    background: linear-gradient(135deg, var(--yacht-gold) 0%, #b8941f 100%);
}

.slm-boat-card__badge--sport {
    background: #3b82f6;
}

/* Rentals Content Area */
.slm-rentals-content {
    gap: 4rem;
}

.slm-rentals-content .slm-dock-section {
    border-top: none;
    padding-top: 0;
}

/* What's Included Section */
.slm-rentals-included {
    padding-top: 3rem;
    border-top: 1px solid #e5e7eb;
    margin-top: 2rem;
}

.slm-rentals-included .slm-section-title {
    margin-bottom: 2rem;
}

/* 4-Column Features Grid */
.slm-features--4col {
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .slm-features--4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .slm-features--4col {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Vertical card style for 4-column layout */
.slm-features--4col .slm-feature {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0.75rem;
    background: var(--yacht-gray);
    border: none;
    border-radius: 8px;
}

.slm-features--4col .slm-feature__icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.25rem;
}

.slm-features--4col .slm-feature h3,
.slm-features--4col .slm-feature h4 {
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.slm-features--4col .slm-feature p {
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Booking Sidebar Note */
.slm-booking-sidebar__note {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

.slm-booking-sidebar__note a {
    color: var(--yacht-gold);
    font-weight: 600;
}

.slm-booking-sidebar__note a:hover {
    color: var(--yacht-white);
}

/* Rentals Policies styling update */
.slm-rentals-content .slm-policies {
    margin-top: 2rem;
}

/* ==========================================================================
   FAQ PAGE
   ========================================================================== */
.slm-faq {
    max-width: 50rem;
    margin: 0 auto;
}

.slm-faq__category {
    margin-bottom: 3rem;
}

.slm-faq__category-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--yacht-navy);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--yacht-gold);
}

.slm-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.slm-faq__item {
    background: var(--warm-white);
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.slm-faq__item:hover {
    border-color: var(--yacht-gold);
}

.slm-faq__item[open] {
    border-color: var(--yacht-gold);
}

.slm-faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--yacht-navy);
    font-size: 1.0625rem;
    list-style: none;
}

.slm-faq__question::-webkit-details-marker {
    display: none;
}

.slm-faq__icon {
    flex-shrink: 0;
    color: var(--yacht-gold);
    transition: transform 0.2s ease;
}

.slm-faq__item[open] .slm-faq__icon {
    transform: rotate(180deg);
}

.slm-faq__answer {
    padding: 0 1.5rem 1.5rem;
}

.slm-faq__answer p {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.75;
    margin: 0;
}

/* FAQ CTA Section */
.slm-faq__cta {
    margin-top: 4rem;
    padding: 3rem;
    background: var(--yacht-navy);
    border-radius: 1rem;
    text-align: center;
}

.slm-faq__cta h2 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: white;
    margin-bottom: 0.75rem;
}

.slm-faq__cta p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
}

.slm-faq__cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.slm-faq__cta-buttons .slm-btn {
    min-width: 220px;
    text-align: center;
}

@media (max-width: 768px) {
    .slm-faq__category-title {
        font-size: 1.5rem;
    }

    .slm-faq__question {
        font-size: 1rem;
        padding: 1rem 1.25rem;
    }

    .slm-faq__answer {
        padding: 0 1.25rem 1.25rem;
    }

    .slm-faq__cta {
        padding: 2rem 1.5rem;
    }

    .slm-faq__cta h2 {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   MINI FAQ (Service Pages)
   ========================================================================== */
.slm-mini-faq {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.slm-mini-faq .slm-section-title {
    margin-bottom: 2.5rem;
}

.slm-mini-faq__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: left;
}

@media (min-width: 768px) {
    .slm-mini-faq__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.slm-mini-faq__item h3 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--yacht-navy);
    margin-bottom: 0.5rem;
}

.slm-mini-faq__item p {
    color: #6b7280;
    line-height: 1.7;
    font-size: 0.9375rem;
}

.slm-mini-faq__cta {
    margin-top: 2.5rem;
}

/* ==========================================================================
   AMENITIES ICON ROW (Homepage)
   ========================================================================== */
#services.slm-amenities {
    padding: 3rem 2rem;
    background: #f0efed;
    overflow: hidden;
    gap: 0;
}

#services .slm-amenities__header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.slm-amenities__header .slm-eyebrow {
    opacity: 0;
}

.slm-amenities__header .slm-section-title {
    opacity: 0;
    font-size: 1.75rem;
}

.slm-amenities__row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: nowrap;
    max-width: 1070px;
    margin: 0 auto;
}

.slm-amenities__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    padding: 1.75rem 1rem;
    text-decoration: none;
    color: var(--yacht-navy);
    background: var(--yacht-white);
    border-radius: 8px;
    transition: all 0.3s ease;
    flex: 1 1 0;
    min-width: 165px;
    opacity: 0;
    transform: translateY(30px);
}

.slm-amenities__link:hover {
    background: var(--yacht-navy);
    color: var(--yacht-white);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(10, 25, 47, 0.18);
}

.slm-amenities__link:hover .slm-amenities__icon {
    stroke: var(--yacht-gold);
}

.slm-amenities__icon {
    width: 32px;
    height: 32px;
    stroke: var(--yacht-navy);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: stroke 0.3s ease;
}

.slm-amenities__label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

@media (max-width: 768px) {
    .slm-amenities__row {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .slm-amenities__link {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: auto;
        padding: 1.25rem 1rem;
    }
}

/* ==========================================================================
   COMPASS CLUB REDESIGN (PREMIUM)
   ========================================================================== */

/* Page Wrapper */
.slm-compass-page-wrapper {
    background-color: var(--yacht-navy);
    overflow-x: hidden;
}

/* Fullscreen Hero */
.slm-hero-inner--fullscreen {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height - fixes iOS address bar */
    height: calc(100vh + 5.5rem);
    height: calc(100dvh + 5.5rem);
    padding-top: 5.5rem;
}

.slm-compass-hero {
    text-align: center;
}

/* Scroll Indicator */
.slm-scroll-indicator {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    z-index: 10;
}

.slm-scroll-indicator span {
    font-family: var(--font-primary);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--yacht-gold);
}

.slm-scroll-line {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, var(--yacht-gold), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { transform: scaleY(0.6); opacity: 0.4; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* Manifesto Section */
.slm-manifesto-section {
    min-height: 200vh;
    background-color: var(--yacht-navy);
    position: relative;
    padding: 6rem 0;
}

.slm-manifesto-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 30%, rgba(212, 175, 55, 0.06), transparent 50%);
    pointer-events: none;
}

.slm-manifesto-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .slm-manifesto-container {
        grid-template-columns: 1fr 1fr;
        gap: 6rem;
    }
}

.slm-manifesto-text-col {
    padding-top: 2rem;
}

.slm-manifesto-block {
    margin-bottom: 60vh;
    opacity: 0.25;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.slm-manifesto-block:last-child {
    margin-bottom: 20vh;
}

.slm-manifesto-block.active,
.slm-manifesto-block:first-child {
    opacity: 1;
    transform: translateY(0);
}

.slm-manifesto-block p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 480px;
}

.slm-manifesto-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    color: white;
    margin-bottom: 1.5rem;
    line-height: 1.15;
}

.slm-manifesto-visual-col {
    position: sticky;
    top: 25vh;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

/* Premium Card Wrapper */
.slm-premium-card-wrapper {
    position: relative;
    width: 100%;
    max-width: 400px;
    perspective: 1200px;
}

.slm-card-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.12), transparent 55%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    filter: blur(30px);
}

.slm-card-chip {
    position: absolute;
    top: 22%;
    left: 8%;
    width: 45px;
    height: 32px;
    background: linear-gradient(135deg, #e8d48a 0%, #c9a227 50%, #8b7020 100%);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}

.slm-card-chip::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 50%;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 2px;
}

.slm-card-number {
    position: absolute;
    top: 48%;
    left: 8%;
    right: 8%;
    display: flex;
    justify-content: space-between;
    font-family: 'Courier New', monospace;
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-weight: 500;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.slm-card-footer {
    position: absolute;
    bottom: 12%;
    left: 8%;
    right: 8%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.slm-card-holder {
    font-family: var(--font-primary);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
}

.slm-card-holder span {
    display: block;
    font-size: 0.9rem;
    color: var(--yacht-gold);
    letter-spacing: 0.1em;
}

.slm-card-logo {
    width: 50px;
    height: auto;
    opacity: 0.9;
}

/* Collection Section (Horizontal Scroll) */
.slm-collection-section {
    height: 300vh;
    position: relative;
    background: linear-gradient(180deg, var(--yacht-navy) 0%, #0d1a26 100%);
}

.slm-collection-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height - fixes iOS address bar */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 0;
}

.slm-collection-header {
    text-align: center;
    margin-bottom: 4rem;
    padding: 0 1.5rem;
}

.slm-collection-track-wrapper {
    width: 100%;
    overflow: visible;
}

.slm-collection-track {
    display: flex;
    gap: 2rem;
    padding: 0 calc(50vw - 180px);
    width: max-content;
    will-change: transform;
}

.slm-collection-item {
    flex: 0 0 360px;
    width: 360px;
}

/* CTA Background */
.slm-nautical-bg {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.03) 0%, transparent 50%),
        radial-gradient(circle, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 100% 100%, 25px 25px;
    pointer-events: none;
}

/* Large Button Variant */
.slm-btn--lg {
    padding: 1.25rem 3.5rem;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
}

/* Mobile Adjustments for Compass Club */
@media (max-width: 1023px) {
    .slm-manifesto-visual-col {
        position: relative;
        top: 0;
        order: -1;
        margin-bottom: 3rem;
    }

    .slm-manifesto-block {
        margin-bottom: 4rem;
        opacity: 1;
        transform: none;
    }

    .slm-collection-section {
        height: auto;
        padding: 4rem 0;
    }

    .slm-collection-sticky {
        position: relative;
        height: auto;
    }

    .slm-collection-track {
        padding: 0 1.5rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .slm-collection-item {
        flex: 0 0 300px;
        width: 300px;
        scroll-snap-align: center;
    }
}

@media (max-width: 767px) {
    .slm-scroll-indicator {
        bottom: 2rem;
    }

    .slm-premium-card-wrapper {
        max-width: 320px;
    }

    .slm-card-number {
        font-size: 1rem;
    }
}

/* Gold Gradient Text */
.slm-text-gradient-gold {
    background: linear-gradient(135deg, #D4AF37 0%, #F3E5AB 50%, #D4AF37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: none;
}

/* Premium Glass Card */
.slm-glass-card {
    background: rgba(255, 255, 255, 0.03);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.slm-glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.15), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.slm-glass-card:hover {
    transform: translateY(-10px);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.slm-glass-card:hover::before {
    opacity: 1;
}

.slm-glass-card__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 25, 47, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    color: var(--yacht-gold);
    position: relative;
    z-index: 1;
    transition: all 0.5s ease;
}

.slm-glass-card:hover .slm-glass-card__icon {
    transform: scale(1.1) rotate(5deg);
    border-color: var(--yacht-gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

/* Realistic Membership Card */
.slm-premium-card {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1.586/1;
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    border-radius: 16px;
    position: relative;
    padding: 2.5rem;
    box-shadow: 
        0 20px 40px -10px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.1);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.6s ease, box-shadow 0.6s ease;
    margin: 0 auto;
}

.slm-premium-card:hover {
    transform: rotateY(10deg) rotateX(5deg) scale(1.02);
    box-shadow: 
        20px 20px 60px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Gold Foil Effect */
.slm-premium-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        125deg, 
        transparent 0%, 
        transparent 40%, 
        rgba(255,255,255,0.1) 45%, 
        rgba(255,255,255,0.0) 50%, 
        transparent 100%
    );
    pointer-events: none;
    background-size: 250% 250%;
    background-position: 100% 0%;
    transition: background-position 0.6s ease;
}

.slm-premium-card:hover::after {
    background-position: 0% 100%;
}

.slm-card-chip {
    width: 50px;
    height: 36px;
    background: linear-gradient(135deg, #e6cfa3 0%, #d4af37 50%, #b8941f 100%);
    border-radius: 6px;
    margin-bottom: 2.5rem;
    position: relative;
}
.slm-card-chip::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 6px;
    background: 
        linear-gradient(to right, transparent 49%, rgba(0,0,0,0.1) 50%, transparent 51%),
        linear-gradient(to bottom, transparent 49%, rgba(0,0,0,0.1) 50%, transparent 51%);
    background-size: 100% 33%, 33% 100%;
}

.slm-card-number {
    font-family: 'Courier New', monospace;
    font-size: 1.4rem;
    color: #D4AF37;
    letter-spacing: 0.15em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
    opacity: 0.9;
}

.slm-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.slm-card-holder {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.slm-card-holder span {
    display: block;
    color: rgba(255,255,255,0.9);
    font-size: 1rem;
    margin-top: 0.25rem;
}

.slm-card-logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
    opacity: 0.8;
}

@media (max-width: 600px) {
    .slm-premium-card {
        padding: 1.5rem;
    }
    .slm-card-number {
        font-size: 1rem;
    }
}

/* ==========================================================================
   COMPASS CLUB - WAKE LINE DESIGN
   Minimal typography-focused page design
   ========================================================================== */

/* SVG Filter (hidden) */
.slm-ripple-filter {
    position: absolute;
    width: 0;
    height: 0;
}

/* Page Wrapper */
.slm-compass-wakeline {
    background: var(--yacht-gray);
    overflow-x: hidden;
}

/* Hide header initially on Compass Club page */
.slm-compass-wakeline ~ .slm-nav,
.slm-compass-wakeline + .slm-nav,
body.wakeline-header-hidden .slm-nav {
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

body.wakeline-header-visible .slm-nav {
    opacity: 1;
    transform: translateY(0);
}

/* Force dark/scrolled state on reveal */
body.wakeline-header-visible .slm-nav {
    background: var(--yacht-navy);
}

/* ---- HERO SECTION ---- */
.slm-wakeline-hero {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height - fixes iOS address bar */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: var(--warm-white);
    margin-top: -5.5rem; /* Account for header */
    padding-top: 5.5rem;
    padding-bottom: 5rem; /* Space for scroll indicator */
}

.slm-wakeline-hero__title {
    font-family: var(--font-serif);
    font-size: clamp(12vw, 15vw, 18vw);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 0.85;
    text-align: center;
    color: var(--yacht-navy);
    position: relative;
    filter: url(#ripple);
    animation: slm-subtleWave 4s ease-in-out infinite;
    margin: 0;
    margin-top: 2rem;
}

@keyframes slm-subtleWave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.slm-wakeline-hero__title span {
    display: block;
    opacity: 0;
    transform: translateY(100px);
}

/* Scroll Indicator */
.slm-wakeline-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--yacht-navy);
    opacity: 0.5;
}

.slm-wakeline-scroll-indicator span {
    font-size: 0.625rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.slm-wakeline-scroll-arrow {
    width: 1px;
    height: 24px;
    background: var(--yacht-navy);
    position: relative;
    animation: slm-pulse 2s ease-in-out infinite;
}

@keyframes slm-pulse {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(4px); }
}

.slm-wakeline-scroll-arrow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -3px;
    width: 7px;
    height: 7px;
    border-right: 1px solid var(--yacht-navy);
    border-bottom: 1px solid var(--yacht-navy);
    transform: rotate(45deg);
}

/* ---- MANIFESTO SECTION ---- */
.slm-wakeline-manifesto {
    padding: 8vh 10vw 10vh;
    display: flex;
    justify-content: center;
    text-align: center;
    background: var(--yacht-gray);
}

.slm-wakeline-manifesto__content {
    max-width: 800px;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slm-wakeline-manifesto__content.slm-visible {
    opacity: 1;
    transform: translateY(0);
}

.slm-wakeline-manifesto__statement {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--yacht-navy);
    margin: 0;
}

/* ---- BENEFITS SECTION ---- */
.slm-wakeline-benefits {
    padding: 10vh 10vw;
    /* Background controlled by .slm-bg-navy / .slm-bg-white utility classes */
}

/* Navy section text colors */
.slm-wakeline-benefits.slm-bg-navy {
    color: var(--yacht-white);
}

/* White section text colors */
.slm-wakeline-benefits.slm-bg-white .slm-section-title {
    color: var(--yacht-navy);
}

.slm-wakeline-benefits__header {
    text-align: center;
    margin-bottom: 8vh;
}

.slm-wakeline-benefits__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* 2-column grid variant for Partner Perks */
.slm-wakeline-benefits__grid--2col {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
}

.slm-wakeline-benefits__grid--2col .slm-wakeline-card {
    aspect-ratio: 1 / 1;
    min-height: 350px;
}

/* Split layout for Property Level Perks (text + image side by side) */
.slm-wakeline-benefits--split {
    padding: 8vh 5vw;
}

.slm-wakeline-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.slm-wakeline-split__text {
    padding-right: 2rem;
}

.slm-wakeline-split__text .slm-section-title {
    margin-bottom: 2rem;
}

.slm-wakeline-split__benefit {
    margin-top: 1.5rem;
}

.slm-wakeline-split__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 600;
    color: var(--yacht-gold);
    margin: 0 0 0.75rem 0;
}

.slm-wakeline-split__desc {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--yacht-navy);
    margin: 0;
}

.slm-wakeline-split__image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.slm-wakeline-split__img,
.slm-wakeline-split__img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Benefit Cards */
.slm-wakeline-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3/4.4;
    min-height: 400px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(40px);
}

.slm-wakeline-card.slm-visible {
    opacity: 1;
    transform: translateY(0);
}

.slm-wakeline-card:hover {
    transform: translateY(-10px);
}

.slm-wakeline-card.slm-visible:hover {
    transform: translateY(-10px);
}

/* Linked card variant - ensure <a> tag displays like block */
a.slm-wakeline-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
}

a.slm-wakeline-card--link:focus-visible {
    outline: 3px solid var(--yacht-gold);
    outline-offset: 4px;
}

.slm-wakeline-card__image,
.slm-wakeline-card__image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.slm-wakeline-card:hover .slm-wakeline-card__image,
.slm-wakeline-card:hover .slm-wakeline-card__image > img {
    transform: scale(1.08);
}

.slm-wakeline-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(10, 25, 41, 0.95) 0%,
        rgba(10, 25, 41, 0.6) 40%,
        rgba(10, 25, 41, 0.2) 70%,
        transparent 100%
    );
    transition: background 0.4s ease;
}

.slm-wakeline-card:hover .slm-wakeline-card__overlay {
    background: linear-gradient(
        to top,
        rgba(10, 25, 41, 0.98) 0%,
        rgba(10, 25, 41, 0.7) 50%,
        rgba(10, 25, 41, 0.3) 100%
    );
}

.slm-wakeline-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    color: var(--yacht-white);
}

.slm-wakeline-card__partner {
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--yacht-gold);
    margin: 0 0 0.5rem;
}

.slm-wakeline-card__title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

.slm-wakeline-card__desc {
    font-size: 0.875rem;
    line-height: 1.6;
    opacity: 0.8;
    margin: 0.5rem 0 0;
    min-height: 2.8em;
}

/* ---- CTA SECTION ---- */
.slm-wakeline-cta {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10vh 5vw;
    background: var(--yacht-gray);
}

.slm-wakeline-cta__title {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 400;
    line-height: 1;
    margin: 0 0 3rem;
    color: var(--yacht-navy);
}

.slm-wakeline-cta__link {
    font-family: var(--font-sans);
    font-size: 1rem;
    letter-spacing: 0.1em;
    color: var(--yacht-navy);
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 4px;
}

.slm-wakeline-cta__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--yacht-gold);
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 0.4s ease;
}

.slm-wakeline-cta__link:hover::after {
    transform: scaleX(0);
    transform-origin: left;
}

.slm-wakeline-cta__link svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s;
}

.slm-wakeline-cta__link:hover svg {
    transform: translateX(4px);
}

/* Reveal animation class */
.slm-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slm-reveal.slm-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
    .slm-wakeline-benefits__grid {
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .slm-wakeline-manifesto {
        padding: 10vh 6vw;
    }

    .slm-wakeline-benefits {
        padding: 8vh 5vw;
    }

    .slm-wakeline-benefits__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 400px;
    }

    .slm-wakeline-benefits__grid--2col {
        max-width: 400px;
    }

    .slm-wakeline-split {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .slm-wakeline-split__text {
        padding-right: 0;
        order: 1;
    }

    .slm-wakeline-split__image {
        order: 2;
        max-width: 400px;
        margin: 0 auto;
    }

    .slm-wakeline-card {
        aspect-ratio: 1/1;
        min-height: unset;
    }

    /* Content fills card, uses flexbox to position partner at top */
    .slm-wakeline-card__content {
        top: 0;
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    /* Partner name at top with overlay */
    .slm-wakeline-card__partner {
        padding: 1rem 1.25rem;
        margin: 0;
        font-weight: 600;
        background: linear-gradient(
            to bottom,
            rgba(10, 25, 41, 0.85) 0%,
            rgba(10, 25, 41, 0.5) 70%,
            transparent 100%
        );
    }

    /* Push title/desc to bottom */
    .slm-wakeline-card__title {
        margin-top: auto;
        padding: 0 1.25rem;
    }

    .slm-wakeline-card__desc {
        padding: 0 1.25rem 1.25rem;
    }

    .slm-wakeline-card__title {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

    .slm-wakeline-card__desc {
        font-size: 0.8125rem;
        min-height: unset;
    }
}

/* Hide compass float on Compass Club page */
body.page-compass-club .slm-compass-float {
    display: none;
}

/* Reduce spacing between Partner Perks and Member Benefits */
.slm-wakeline-benefits__header .slm-overline {
    margin-bottom: 0.25rem;
}

/* Benefits footer note */
.slm-wakeline-benefits__footer {
    text-align: center;
    margin-top: 4rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

/* ==========================================================================
   REDUCED MOTION ACCESSIBILITY
   Respects user's motion preferences (WCAG 2.1 compliance)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Disable specific hero background animation */
    .slm-hero-dock__bg {
        animation: none;
    }

    /* Disable parallax-like effects */
    .slm-hero__bg,
    .slm-hero-inner__bg {
        transform: none !important;
    }

    /* Disable scroll indicator bounce */
    .slm-scroll-indicator svg {
        animation: none;
    }

    /* Reset opacity and transform for GSAP-animated elements */
    .slm-hero__content > *,
    .slm-fade-up,
    .slm-stagger > *,
    .slm-service-card,
    .slm-stat,
    .slm-testimonial,
    .slm-benefit-card,
    .slm-feature-item,
    [data-gsap],
    [data-scroll-animate] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   GRAVITY FORMS STYLING
   ========================================================================== */

/* Reset GF defaults and apply theme styling */
.gform_wrapper.gform-theme {
    --gf-color-primary: var(--yacht-navy);
    --gf-color-secondary: var(--yacht-gold);
    --gf-ctrl-border-color: #e5e7eb;
    --gf-ctrl-bg-color: var(--yacht-gray);
    --gf-ctrl-radius: 0;
    --gf-label-font-size: 0.75rem;
    font-family: var(--font-sans);
}

/* Form wrapper */
.gform_wrapper.gform-theme .gform_body {
    margin: 0;
}

.gform_wrapper.gform-theme .gform_fields {
    gap: 0.75rem;
}

/* Labels */
.gform_wrapper.gform-theme .gfield_label,
.gform_wrapper.gform-theme .gsection_title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-family: var(--font-sans);
}

/* Hide "* indicates required fields" legend */
.gform_wrapper.gform-theme .gform_required_legend {
    display: none;
}

.gform_wrapper.gform-theme .gfield_required,
.gform_wrapper.gform-theme .gfield_required.gfield_required_custom {
    --gf-ctrl-label-color-req: #c9a227; /* Override GF CSS var */
    color: #c9a227 !important; /* Yacht gold - matches brand */
    margin-left: 0.25em;
    font-weight: 600;
    font-size: 14px !important; /* Explicit size prevents FOUT */
}

/* Section breaks */
.gform_wrapper.gform-theme .gsection {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.5rem;
    margin-top: 1rem;
}

.gform_wrapper.gform-theme .gsection_title {
    font-size: 0.875rem;
    color: var(--yacht-navy);
    font-weight: 600;
}

/* Inputs, selects, textareas */
.gform_wrapper.gform-theme input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
.gform_wrapper.gform-theme select,
.gform_wrapper.gform-theme textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--yacht-gray);
    border: 1px solid #e5e7eb;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--yacht-navy);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}

.gform_wrapper.gform-theme input:focus,
.gform_wrapper.gform-theme select:focus,
.gform_wrapper.gform-theme textarea:focus {
    outline: none;
    border-color: var(--yacht-navy);
    box-shadow: 0 0 0 3px rgba(10, 25, 47, 0.1);
}

.gform_wrapper.gform-theme textarea {
    min-height: 72px;
    resize: vertical;
}

/* Placeholder styling */
.gform_wrapper.gform-theme input::placeholder,
.gform_wrapper.gform-theme textarea::placeholder {
    color: #6b7280; /* WCAG AA: 4.6:1 on light gray */
}

/* Select dropdown arrow */
.gform_wrapper.gform-theme select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

/* Radio and Checkbox styling */
.gform_wrapper.gform-theme .gfield_radio,
.gform_wrapper.gform-theme .gfield_checkbox {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gform_wrapper.gform-theme .gchoice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gform_wrapper.gform-theme .gchoice input[type="radio"],
.gform_wrapper.gform-theme .gchoice input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--yacht-gold);
    cursor: pointer;
}

.gform_wrapper.gform-theme .gchoice label {
    font-size: 0.9375rem;
    color: var(--yacht-navy);
    cursor: pointer;
    margin: 0;
}

/* Submit button */
.gform_wrapper.gform-theme .gform_footer,
.gform_wrapper.gform-theme .gform_page_footer {
    margin-top: 1.5rem;
    padding: 0;
}

.gform_wrapper.gform-theme input[type="submit"],
.gform_wrapper.gform-theme .gform_button {
    width: 100%;
    min-height: 44px; /* WCAG 2.1 touch target requirement */
    padding: 1rem 2rem;
    background: var(--yacht-gold);
    color: var(--yacht-navy);
    border: none;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gform_wrapper.gform-theme input[type="submit"]:hover,
.gform_wrapper.gform-theme .gform_button:hover {
    background: var(--yacht-navy);
    color: var(--yacht-white);
}

.gform_wrapper.gform-theme input[type="submit"]:focus-visible,
.gform_wrapper.gform-theme .gform_button:focus-visible {
    outline: 2px solid var(--yacht-gold);
    outline-offset: 2px;
}

/* Validation errors */
.gform_wrapper.gform-theme .gfield_error input,
.gform_wrapper.gform-theme .gfield_error select,
.gform_wrapper.gform-theme .gfield_error textarea {
    border-color: #dc2626;
}

.gform_wrapper.gform-theme .gfield_error .gfield_label {
    color: #dc2626;
}

.gform_wrapper.gform-theme .validation_message {
    font-size: 0.8125rem;
    color: #dc2626;
    margin-top: 0.5rem;
}

/* Hide the intrusive validation error box - field-level errors are sufficient */
.gform_wrapper.gform-theme .gform_validation_errors {
    display: none;
}

/* Hide number range instructions until error */
.gform_wrapper.gform-theme .instruction {
    display: none;
}

.gform_wrapper.gform-theme .gfield_error .instruction {
    display: block;
    color: #dc2626;
}

/* Confirmation message */
.gform_wrapper.gform-theme .gform_confirmation_message {
    background: var(--yacht-gray);
    border-left: 4px solid var(--yacht-gold);
    padding: 1.5rem;
    color: var(--yacht-navy);
    font-size: 1rem;
}

/* Date picker */
.gform_wrapper.gform-theme .ginput_container_date input {
    max-width: 100%;
}

/* Field descriptions */
.gform_wrapper.gform-theme .gfield_description {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-top: 0.5rem;
}

/* Complex fields (name, address) */
.gform_wrapper.gform-theme .ginput_complex {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.gform_wrapper.gform-theme .ginput_complex .ginput_full {
    flex: 1 1 100%;
}

.gform_wrapper.gform-theme .ginput_complex .ginput_left,
.gform_wrapper.gform-theme .ginput_complex .ginput_right {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 140px;
}

.gform_wrapper.gform-theme .ginput_complex label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280; /* WCAG AA: 4.6:1 on white */
    margin-top: 0.25rem;
}

/* Modal-specific form styles */
.slm-modal .gform_wrapper.gform-theme {
    --gf-ctrl-bg-color: var(--yacht-white);
}

.slm-modal .gform_wrapper.gform-theme input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.slm-modal .gform_wrapper.gform-theme select,
.slm-modal .gform_wrapper.gform-theme textarea {
    background: var(--yacht-white);
}

/* Sidebar form styles (boat rentals) */
.slm-booking-sidebar .gform_wrapper.gform-theme {
    --gf-ctrl-bg-color: rgba(255, 255, 255, 0.1);
}

.slm-booking-sidebar .gform_wrapper.gform-theme .gfield_label {
    color: rgba(255, 255, 255, 0.7);
}

.slm-booking-sidebar .gform_wrapper.gform-theme input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.slm-booking-sidebar .gform_wrapper.gform-theme select,
.slm-booking-sidebar .gform_wrapper.gform-theme textarea {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--yacht-white);
}

.slm-booking-sidebar .gform_wrapper.gform-theme input:focus,
.slm-booking-sidebar .gform_wrapper.gform-theme select:focus,
.slm-booking-sidebar .gform_wrapper.gform-theme textarea:focus {
    border-color: var(--yacht-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

.slm-booking-sidebar .gform_wrapper.gform-theme input::placeholder,
.slm-booking-sidebar .gform_wrapper.gform-theme textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.slm-booking-sidebar .gform_wrapper.gform-theme select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.slm-booking-sidebar .gform_wrapper.gform-theme .gchoice label {
    color: var(--yacht-white);
}

.slm-booking-sidebar .gform_wrapper.gform-theme input[type="submit"] {
    background: var(--yacht-gold);
    color: var(--yacht-navy);
}

.slm-booking-sidebar .gform_wrapper.gform-theme input[type="submit"]:hover {
    background: var(--yacht-white);
}

/* AJAX spinner */
.gform_wrapper.gform-theme .gform_ajax_spinner {
    margin-left: 1rem;
}

/* Hide honeypot */
.gform_wrapper.gform-theme .gform_validation_container {
    display: none !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .gform_wrapper.gform-theme .gform_fields {
        gap: 1rem;
    }

    .gform_wrapper.gform-theme input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
    .gform_wrapper.gform-theme select,
    .gform_wrapper.gform-theme textarea {
        padding: 0.75rem 1rem;
        font-size: 16px; /* Prevent iOS zoom */
    }

    .gform_wrapper.gform-theme .ginput_complex .ginput_left,
    .gform_wrapper.gform-theme .ginput_complex .ginput_right {
        flex: 1 1 100%;
    }

    .gform_wrapper.gform-theme input[type="submit"] {
        min-height: 48px;
    }
}

/* ==========================================================================
   GRAVITY FORMS - MULTI-PAGE FORM STYLING
   ========================================================================== */

/* Progress bar container */
.gform_wrapper.gform-theme .gf_progressbar_wrapper {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

/* Progress bar title */
.gform_wrapper.gform-theme .gf_progressbar_title {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b7280;
    margin-bottom: 0.75rem;
}

/* Progress bar background */
.gform_wrapper.gform-theme .gf_progressbar {
    background: #e5e7eb;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}

/* Progress bar fill - override GF blue default */
.gform_wrapper.gform-theme .gf_progressbar_percentage,
.gform_wrapper.gform-theme .gf_progressbar_percentage.percentbar_blue {
    background: var(--yacht-gold);
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Progress bar text (percentage) */
.gform_wrapper.gform-theme .gf_progressbar_percentage span {
    display: none; /* Hide default percentage text */
}

/* Page steps indicator (alternative style) */
.gform_wrapper.gform-theme .gf_page_steps {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.gform_wrapper.gform-theme .gf_step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280; /* WCAG AA: 4.6:1 on white */
}

.gform_wrapper.gform-theme .gf_step_active {
    color: var(--yacht-navy);
    font-weight: 500;
}

.gform_wrapper.gform-theme .gf_step_completed {
    color: var(--yacht-gold);
}

.gform_wrapper.gform-theme .gf_step_number {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.8rem;
}

.gform_wrapper.gform-theme .gf_step_active .gf_step_number {
    background: var(--yacht-navy);
    color: white;
}

.gform_wrapper.gform-theme .gf_step_completed .gf_step_number {
    background: var(--yacht-gold);
    color: var(--yacht-navy);
}

/* Page navigation buttons container */
.gform_wrapper.gform-theme .gform_page_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

/* Previous button */
.gform_wrapper.gform-theme .gform_previous_button {
    background: transparent;
    color: var(--yacht-navy);
    border: 1px solid #e5e7eb;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.gform_wrapper.gform-theme .gform_previous_button:hover {
    border-color: var(--yacht-navy);
    background: var(--yacht-gray);
}

/* Next button */
.gform_wrapper.gform-theme .gform_next_button {
    background: var(--yacht-gold);
    color: var(--yacht-navy);
    border: none;
    padding: 0.875rem 2rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.gform_wrapper.gform-theme .gform_next_button:hover {
    background: var(--yacht-navy);
    color: white;
}

/* Modal-specific multi-page styling */
.slm-modal .gform_wrapper.gform-theme .gform_page_footer {
    border-top-color: #e5e7eb;
}

.slm-modal .gform_wrapper.gform-theme .gf_progressbar {
    background: #e5e7eb;
}

/* When only next button (first page) - align right */
.gform_wrapper.gform-theme .gform_page_footer:not(:has(.gform_previous_button)) {
    justify-content: flex-end;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .gform_wrapper.gform-theme .gform_page_footer {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }

    .gform_wrapper.gform-theme .gform_previous_button,
    .gform_wrapper.gform-theme .gform_next_button {
        width: 100%;
        min-height: 48px;
        text-align: center;
    }
}

/* ==========================================================================
   BOAT RENTALS - Fleet Catalog Styles
   ========================================================================== */

/* Boat Grid */
.slm-boat-grid {
    min-height: 400px;
}

.slm-boat-grid__cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Fleet Filter Bar */
.slm-filter-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 2rem;
}

/* Type Filter Tabs */
.slm-type-filters {
    display: flex;
    flex: 1;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.slm-type-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: #f3f4f6;
    border: 1px solid transparent;
    border-radius: 50px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.slm-type-filter:hover {
    border-color: var(--yacht-navy);
    color: var(--yacht-navy);
}

.slm-type-filter--active,
.slm-type-filter--active:hover {
    background: var(--yacht-navy);
    border-color: var(--yacht-navy);
    color: white;
}

.slm-type-filter__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.slm-type-filter--active .slm-type-filter__count {
    background: rgba(255, 255, 255, 0.2);
}

/* View Toggle (List/Grid) */
.slm-view-toggle {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.slm-view-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: #f3f4f6;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.slm-view-toggle__btn:hover {
    border-color: var(--yacht-navy);
    color: var(--yacht-navy);
}

.slm-view-toggle__btn--active {
    background: var(--yacht-navy);
    border-color: var(--yacht-navy);
    color: white;
}

/* Boat Card V2 - Full-width horizontal layout */
.slm-boat-card-v2 {
    display: grid;
    grid-template-columns: 400px 1fr;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.slm-boat-card-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Image Container */
.slm-boat-card-v2__image {
    position: relative;
    overflow: hidden;
    min-height: 280px;
}

.slm-boat-card-v2__image img,
.slm-boat-card-v2__image picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-fast);
}

.slm-boat-card-v2:hover .slm-boat-card-v2__image img {
    transform: scale(1.05);
}

/* Badge */
.slm-boat-card-v2__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.375rem 0.75rem;
    background: var(--yacht-navy);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
}

.slm-boat-card-v2__badge--value {
    background: var(--yacht-gold);
    color: var(--yacht-navy);
}

.slm-boat-card-v2__badge--popular {
    background: var(--yacht-navy);
}

.slm-boat-card-v2__badge--premium {
    background: linear-gradient(135deg, #c9a227, #e8c252);
    color: var(--yacht-navy);
}

.slm-boat-card-v2__badge--sport {
    background: #059669;
    color: white;
}

/* Content */
.slm-boat-card-v2__content {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
}

.slm-boat-card-v2__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.slm-boat-card-v2__type {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--yacht-gold);
    margin-bottom: 0.25rem;
}

.slm-boat-card-v2__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--yacht-navy);
    margin: 0;
    line-height: 1.3;
}

.slm-boat-card-v2__price {
    text-align: right;
    flex-shrink: 0;
}

.slm-boat-card-v2__price-label {
    display: block;
    font-size: 0.7rem;
    color: #6b7280;
    margin-bottom: 0.125rem;
}

.slm-boat-card-v2__price-value {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--yacht-navy);
}

/* Model Specs (optional - year, model name, engine) */
.slm-boat-card-v2__model-specs {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: #6b7280;
    font-style: italic;
}

/* Description */
.slm-boat-card-v2__desc {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4b5563;
    flex-grow: 1;
}

/* Details Row */
.slm-boat-card-v2__details {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.slm-boat-card-v2__detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #4b5563;
}

.slm-boat-card-v2__detail svg {
    width: 18px;
    height: 18px;
    opacity: 0.6;
}

/* Actions */
.slm-boat-card-v2__actions {
    display: flex;
    gap: 1rem;
}

.slm-boat-card-v2__book {
    flex: 1;
    text-align: center;
}

/* Grid View Mode (JS adds .slm-boat-grid--grid to parent) */
.slm-boat-grid--grid .slm-boat-grid__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.slm-boat-grid--grid .slm-boat-card-v2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
}

.slm-boat-grid--grid .slm-boat-card-v2__image {
    min-height: 200px;
    max-height: 200px;
}

.slm-boat-grid--grid .slm-boat-card-v2__content {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
}

.slm-boat-grid--grid .slm-boat-card-v2__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.slm-boat-grid--grid .slm-boat-card-v2__title {
    font-size: 1.125rem;
}

/* Hide elements in grid view */
.slm-boat-grid--grid .slm-boat-card-v2__desc,
.slm-boat-grid--grid .slm-boat-card-v2__duration,
.slm-boat-grid--grid .slm-boat-card-v2__times {
    display: none;
}

/* Compact details in grid view */
.slm-boat-grid--grid .slm-boat-card-v2__details {
    margin-top: 0.5rem;
    padding-top: 0;
    border-top: none;
}

/* Grid view footer/actions */
.slm-boat-grid--grid .slm-boat-card-v2__footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.slm-boat-grid--grid .slm-boat-card-v2__actions {
    flex-direction: column;
    gap: 0.75rem;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .slm-boat-card-v2 {
        grid-template-columns: 1fr;
    }

    .slm-boat-card-v2__image {
        min-height: 220px;
        max-height: 280px;
    }

    .slm-boat-card-v2__content {
        padding: 1.25rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .slm-filter-bar {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .slm-type-filters {
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }

    .slm-view-toggle {
        display: none;
    }

    .slm-boat-card-v2__header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .slm-boat-card-v2__price {
        text-align: left;
    }

    .slm-boat-card-v2__details {
        gap: 0.75rem;
    }

    .slm-boat-card-v2__detail {
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   WATER SPORTS SECTION (Boat Rentals page add-on)
   ========================================================================== */

.slm-water-sports {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.slm-water-sports__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.slm-water-sports__item {
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.slm-water-sports__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.slm-water-sports__image {
    aspect-ratio: 16/10;
    overflow: hidden;
}

.slm-water-sports__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.slm-water-sports__item:hover .slm-water-sports__image img {
    transform: scale(1.05);
}

.slm-water-sports__content {
    padding: 1.25rem;
}

.slm-water-sports__name {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--yacht-navy);
}

.slm-water-sports__price {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--yacht-gold);
    background: rgba(201, 162, 39, 0.1);
    border-radius: 0.25rem;
}

.slm-water-sports__desc {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #4b5563;
}

.slm-water-sports__note {
    margin-top: 1.5rem;
    padding: 1rem;
    font-size: 0.9rem;
    color: #4b5563;
    background: #f3f4f6;
    border-radius: 0.5rem;
    text-align: center;
}

@media (max-width: 600px) {
    .slm-water-sports__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   HARBORMASTER UPLOAD PAGE
   Password-protected image upload tool for harbormasters
   ========================================================================== */

/* Solid header on upload page */
.page-harbormaster-upload .slm-nav,
.page-harbormaster-upload .slm-nav--transparent {
    background: rgba(10, 25, 47, 0.98);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Main container */
.slm-upload {
    min-height: calc(100vh - 5.5rem);
    min-height: calc(100dvh - 5.5rem); /* Dynamic viewport height - fixes iOS address bar */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 1.5rem 4rem;
    background: var(--yacht-gray);
}

.slm-upload__container {
    width: 100%;
    max-width: 440px;
}

.slm-upload--authenticated .slm-upload__container {
    max-width: 560px;
}

/* Card styling for login form */
.slm-upload__card {
    background: var(--yacht-white);
    padding: 3rem 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    text-align: center;
}

.slm-upload__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--yacht-navy);
    border-radius: 50%;
    color: var(--yacht-gold);
}

.slm-upload__icon--error {
    background: #fef2f2;
    color: #dc2626;
}

.slm-upload__title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    color: var(--yacht-navy);
    margin: 0 0 0.5rem;
}

.slm-upload__subtitle {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
}

/* Alert messages */
.slm-alert {
    padding: 0.875rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    text-align: left;
}

.slm-alert--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.slm-alert--success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

/* Form fields */
.slm-upload__form {
    text-align: left;
}

.slm-upload__field {
    margin-bottom: 1.25rem;
}

.slm-upload__field input[type="password"],
.slm-upload__field input[type="text"] {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.slm-upload__field input:focus {
    outline: none;
    border-color: var(--yacht-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.slm-upload__submit {
    width: 100%;
    justify-content: center;
}

/* Header for authenticated state */
.slm-upload__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.slm-upload--authenticated .slm-upload__title {
    font-size: 1.5rem;
    margin: 0;
}

.slm-upload__logout {
    font-size: 0.8rem;
    color: #6b7280;
    text-decoration: underline;
}

.slm-upload__logout:hover {
    color: var(--yacht-navy);
}

/* Dropzone */
.slm-upload__dropzone {
    position: relative;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 2.5rem 2rem;
    margin-bottom: 1.5rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    text-align: center;
    background: var(--yacht-white);
}

.slm-upload__dropzone:hover,
.slm-upload__dropzone--dragover {
    border-color: var(--yacht-gold);
    background: rgba(212, 175, 55, 0.05);
}

.slm-upload__dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.slm-upload__dropzone-icon {
    color: #9ca3af;
    margin-bottom: 1rem;
}

.slm-upload__dropzone-text {
    color: var(--yacht-navy);
    font-weight: 500;
    margin: 0 0 0.5rem;
}

.slm-upload__dropzone-hint {
    color: #9ca3af;
    font-size: 0.8rem;
    margin: 0;
}

/* Best practices tips */
.slm-upload__tips {
    background: var(--yacht-white);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border-left: 3px solid var(--yacht-gold);
}

.slm-upload__tips-title {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--yacht-navy);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.slm-upload__tips-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    color: #4b5563;
    line-height: 1.6;
}

.slm-upload__tips-list li {
    margin-bottom: 0.5rem;
}

.slm-upload__tips-list li:last-child {
    margin-bottom: 0;
}

.slm-upload__tips-list strong {
    color: var(--yacht-navy);
}

/* Preview container inside dropzone */
.slm-upload__preview-container {
    max-width: 300px;
    margin: 0 auto;
}

.slm-upload__preview-container img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    object-fit: contain;
}

/* Results card */
.slm-upload__results {
    background: var(--yacht-white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.slm-upload__preview {
    margin: 1.5rem 0;
    text-align: center;
}

.slm-upload__preview-img {
    max-width: 100%;
    max-height: 250px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.slm-upload__filename {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--yacht-navy);
    margin: 0 0 1.5rem;
    word-break: break-word;
}

/* Size list */
.slm-upload__sizes {
    margin-bottom: 1.5rem;
}

.slm-upload__size {
    padding: 1rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.slm-upload__size:last-child {
    border-bottom: none;
}

.slm-upload__size-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.slm-upload__size-label strong {
    font-size: 0.875rem;
    color: var(--yacht-navy);
}

.slm-upload__size-dimensions {
    font-size: 0.75rem;
    color: #6b7280;
}

.slm-upload__size-url {
    display: flex;
    gap: 0.5rem;
}

.slm-upload__url-input {
    flex: 1;
    font-size: 0.7rem;
    font-family: monospace;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #6b7280;
}

.slm-upload__copy {
    flex-shrink: 0;
    min-width: 60px;
}

/* Upload another button */
.slm-upload__new {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .slm-upload {
        padding: 5.5rem 1rem 2rem;
    }

    .slm-upload__card {
        padding: 2rem 1.5rem;
    }

    .slm-upload__results {
        padding: 1.5rem;
    }

    .slm-upload__header {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .slm-upload__size-label {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .slm-upload__size-url {
        flex-direction: column;
    }

    .slm-upload__copy {
        width: 100%;
    }
}

/* Tabs */
.slm-upload__tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: var(--yacht-white);
    padding: 0.375rem;
    border-radius: 8px;
}

.slm-upload__tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.slm-upload__tab:hover {
    color: var(--yacht-navy);
    background: rgba(0, 0, 0, 0.03);
}

.slm-upload__tab--active {
    color: var(--yacht-navy);
    background: var(--yacht-gray);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.slm-upload__tab svg {
    flex-shrink: 0;
}

/* Library grid */
.slm-upload__library {
    background: var(--yacht-white);
    border-radius: 12px;
    padding: 1.5rem;
}

.slm-upload__empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
}

.slm-upload__empty svg {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.slm-upload__empty p {
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
}

.slm-upload__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.slm-upload__grid-item {
    background: var(--yacht-gray);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.slm-upload__grid-thumb {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #e5e7eb;
}

.slm-upload__grid-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slm-upload__grid-info {
    padding: 0.75rem;
    flex: 1;
}

.slm-upload__grid-name {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--yacht-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.slm-upload__grid-date {
    font-size: 0.7rem;
    color: #9ca3af;
}

.slm-upload__grid-expand {
    margin: 0 0.75rem 0.75rem;
}

/* Modal */
.slm-upload__modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.slm-upload__modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.slm-upload__modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.slm-upload__modal-content {
    position: relative;
    background: var(--yacht-white);
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.slm-upload__modal[aria-hidden="false"] .slm-upload__modal-content {
    transform: scale(1);
}

.slm-upload__modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #6b7280;
    border-radius: 4px;
    transition: color 0.2s ease, background 0.2s ease;
}

.slm-upload__modal-close:hover {
    color: var(--yacht-navy);
    background: rgba(0, 0, 0, 0.05);
}

.slm-upload__modal-body {
    padding: 1.5rem;
}

.slm-upload__modal-preview {
    text-align: center;
    margin-bottom: 1rem;
}

.slm-upload__modal-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
}

.slm-upload__modal-filename {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--yacht-navy);
    margin: 0 0 1rem;
    word-break: break-word;
    text-align: center;
}

@media (min-width: 500px) {
    .slm-upload__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Upload progress bar */
.slm-upload__progress {
    background: var(--yacht-white);
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    text-align: center;
}

.slm-upload__progress-bar {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.slm-upload__progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--yacht-gold) 0%, var(--yacht-gold-light) 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.slm-upload__progress-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--yacht-navy);
}

.slm-upload__progress--error .slm-upload__progress-fill {
    background: #ef4444;
}

.slm-upload__progress--error .slm-upload__progress-text {
    color: #dc2626;
}

/* ==========================================================================
   EXPANSION ANNOUNCEMENT SECTION - "Golden Horizon" Design
   ========================================================================== */
.slm-expansion {
    position: relative;
    padding: clamp(5rem, 10vw, 6rem) 0;
    padding-bottom: clamp(6rem, 12vw, 7.5rem); /* caps at 120px (rung 120) */
    overflow: hidden;
    background: var(--yacht-navy-dark);
}

.slm-expansion__diagonal {
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(135deg, var(--yacht-gold) 0%, var(--yacht-gold-light) 50%, var(--yacht-gold) 100%);
    transform: skewX(-15deg);
    transform-origin: top right;
    opacity: 0.12;
    pointer-events: none;
}

/* Background image over the diagonal */
.slm-expansion__bg-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.slm-expansion__bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.35;
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0) 100%);
}

.slm-expansion__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .slm-expansion__grid {
        grid-template-columns: 1fr minmax(320px, 420px);
        gap: 5rem;
    }
}

/* Eyebrow with icon */
.slm-expansion__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--yacht-gold);
    margin-bottom: 1rem;
}

.slm-expansion__eyebrow svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Title */
.slm-expansion__title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--yacht-white);
    margin: 0 0 1.25rem;
    line-height: 1.15;
}

/* Date badge with shimmer */
.slm-expansion__date-wrap {
    display: inline-block;
    margin-bottom: 1.5rem;
}

.slm-expansion__date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.08) 100%);
    border: 1px solid var(--yacht-gold);
    border-radius: 4px;
    color: var(--yacht-gold);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
}

.slm-expansion__date::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: expansion-shimmer 3s ease-in-out infinite;
}

@keyframes expansion-shimmer {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

.slm-expansion__date svg {
    width: 1rem;
    height: 1rem;
}

/* Description */
.slm-expansion__desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 1.75rem;
    max-width: 540px;
}

/* Highlights with checkmarks */
.slm-expansion__highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.slm-expansion__highlights li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.slm-expansion__highlights svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--yacht-gold);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* Glowing CTA Button */
.slm-btn--expansion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--yacht-gold) 0%, var(--yacht-gold-light) 100%);
    color: var(--yacht-navy);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.35), 0 0 40px rgba(212, 175, 55, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.slm-btn--expansion:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(212, 175, 55, 0.45), 0 0 60px rgba(212, 175, 55, 0.2);
    color: var(--yacht-navy);
}

.slm-btn--expansion svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.3s ease;
}

.slm-btn--expansion:hover svg {
    transform: translateX(3px);
}

/* Image frame with gold border */
.slm-expansion__image-frame {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 0 3px var(--yacht-gold), 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 60px rgba(212, 175, 55, 0.15);
}

.slm-expansion__image-frame img {
    width: 100%;
    height: auto;
    display: block;
}

/* Wave divider */
.slm-expansion__wave-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    overflow: hidden;
}

.slm-expansion__wave-divider svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Mobile adjustments */
@media (max-width: 1023px) {
    .slm-expansion__diagonal {
        width: 100%;
        height: 50%;
        top: auto;
        bottom: 0;
        transform: skewY(-5deg);
        transform-origin: bottom left;
    }

    .slm-expansion__bg-image {
        width: 100%;
        height: 60%;
        top: auto;
        bottom: 0;
    }

    .slm-expansion__bg-image img {
        opacity: 0.25;
        mask-image: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    }

    .slm-expansion__content {
        text-align: center;
    }

    .slm-expansion__eyebrow {
        justify-content: center;
    }

    .slm-expansion__desc {
        margin-left: auto;
        margin-right: auto;
    }

    .slm-expansion__highlights {
        display: inline-block;
        text-align: left;
    }

    .slm-expansion__image-frame {
        max-width: 400px;
        margin: 0 auto;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .slm-expansion__date::before {
        animation: none;
    }

    .slm-btn--expansion:hover {
        transform: none;
    }
}

/* ==========================================================================
   CLEAN MARINA CERTIFICATION SECTION
   ========================================================================== */
.slm-clean-marina {
    position: relative;
    padding: clamp(5rem, 10vw, 6rem) 0;
    padding-bottom: clamp(6rem, 12vw, 7.5rem); /* caps at 120px (rung 120) */
    overflow: hidden;
    background: var(--yacht-navy-dark);
}

.slm-clean-marina__wave-bg {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23D4AF37' d='M0,160L48,170.7C96,181,192,203,288,186.7C384,171,480,117,576,117.3C672,117,768,171,864,181.3C960,192,1056,160,1152,154.7C1248,149,1344,171,1392,181.3L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: 200% 100%;
    background-position: center;
    pointer-events: none;
}

.slm-clean-marina__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .slm-clean-marina__grid {
        grid-template-columns: minmax(280px, 380px) 1fr;
        gap: 5rem;
    }
}

/* Badge Styling */
.slm-clean-marina__badge-wrap {
    text-align: center;
}

.slm-clean-marina__badge-ring {
    position: relative;
    display: inline-block;
    padding: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--yacht-gold) 0%, var(--yacht-gold-light) 50%, var(--yacht-gold) 100%);
    box-shadow:
        0 0 40px rgba(212, 175, 55, 0.3),
        0 0 80px rgba(212, 175, 55, 0.15),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.slm-clean-marina__badge {
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: 50%;
    display: block;
}

@media (min-width: 1024px) {
    .slm-clean-marina__badge {
        max-width: 320px;
    }
}

.slm-clean-marina__year {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.5rem 1.5rem;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid var(--yacht-gold);
    border-radius: 2px;
    color: var(--yacht-gold);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Content Styling */
.slm-clean-marina__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--yacht-gold);
    margin-bottom: 1rem;
}

.slm-clean-marina__eyebrow::before {
    content: '';
    width: 40px;
    height: 2px;
    background: var(--yacht-gold);
}

.slm-clean-marina__title {
    font-family: var(--font-serif);
    font-size: clamp(1.875rem, 4.5vw, 2.75rem);
    color: var(--yacht-white);
    margin: 0 0 1.5rem;
    line-height: 1.2;
}

.slm-clean-marina__title em {
    color: var(--yacht-gold);
    font-style: italic;
}

.slm-clean-marina__description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 2rem;
    max-width: 540px;
}

/* Checkmark List */
.slm-clean-marina__points {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.slm-clean-marina__points li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.slm-clean-marina__points svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--yacht-gold);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* Initiative Logo */
.slm-clean-marina__initiative-link {
    display: inline-block;
    transition: opacity 0.2s ease;
}

.slm-clean-marina__initiative-link:hover .slm-clean-marina__initiative-logo {
    opacity: 1;
}

.slm-clean-marina__initiative-logo {
    max-width: 160px;
    height: auto;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

@media (min-width: 768px) {
    .slm-clean-marina__initiative-logo {
        max-width: 180px;
    }
}

/* Wave Divider */
.slm-clean-marina__wave-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    overflow: hidden;
}

.slm-clean-marina__wave-divider svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Mobile centering adjustments */
@media (max-width: 1023px) {
    .slm-clean-marina__content {
        text-align: center;
    }

    .slm-clean-marina__eyebrow {
        justify-content: center;
    }

    .slm-clean-marina__eyebrow::before {
        display: none;
    }

    .slm-clean-marina__description {
        margin-left: auto;
        margin-right: auto;
    }

    .slm-clean-marina__points {
        display: inline-block;
        text-align: left;
    }

    .slm-clean-marina__initiative-logo {
        margin: 0 auto;
        display: block;
    }
}

/* ==========================================================================
   SHARPER MMS UTILITY PAGES - Header Clearance
   These pages have no hero section, so content starts immediately after header.
   Fixed header is ~6.5rem on mobile, so we need padding-top >= 7rem.
   ========================================================================== */
@media (max-width: 768px) {
    .page-customer-portal .slm-section:first-of-type,
    .page-e-sign .slm-section:first-of-type,
    .page-online-booking .slm-section:first-of-type,
    .page-pay-invoice .slm-section:first-of-type,
    .page-reset-password .slm-section:first-of-type {
        padding-top: 7rem;
    }
}

/* Desktop: slightly more breathing room for non-hero pages */
@media (min-width: 769px) {
    .page-customer-portal .slm-section:first-of-type,
    .page-e-sign .slm-section:first-of-type,
    .page-online-booking .slm-section:first-of-type,
    .page-pay-invoice .slm-section:first-of-type,
    .page-reset-password .slm-section:first-of-type {
        padding-top: 8rem;
    }
}

/* Home restaurant section: 2-column grid on desktop, stacked on mobile.
   Container width inherits from .slm-container (added in front-page.php),
   so width and horizontal padding match every other home section. */
.slm-home-restaurant__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 768px) {
    .slm-home-restaurant__grid {
        grid-template-columns: 1fr 1fr;
        gap: 3.5rem;
    }
}

.slm-home-restaurant__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;
}

/* =====================================================================
   2026-05-14 review-readiness visual fixes (Blue Springs)
   Appended so cascade order favors these targeted overrides.
   See clients/.../blue_springs/deliverables/2026-05-14-review-readiness-audit
   ===================================================================== */

/* (1)(2) The theme never reset the UA default body{margin:8px}, so an
   8px white border framed the whole site incl. the hero, and the
   position:fixed full-width nav did not align with the 8px-inset
   content (reading as "header placement off"). */
html,
body {
    margin: 0;
    padding: 0;
}

/* (2) Header logo sat jammed ~16px under the viewport top over a busy
   hero photo at 5rem tall, reading as cut off / mis-aligned with the
   nav links. Add real top breathing room and size the lockup so it
   centers cleanly in the bar. */
.slm-nav {
    padding-top: 1.75rem;
}
@media (min-width: 768px) {
    .slm-nav__logo-img {
        height: 4rem;
    }
}

/* (3) Footer brand block: the logo asset is a center-composed lockup,
   so left-aligning it always read as indented next to the left-aligned
   tagline. Center the logo and tagline as a deliberate pair instead, so
   they align to each other. (Flip: drop these three rules back to just
   `.slm-footer__logo { height: 9rem; }` for a left-justified block.) */
.slm-footer__brand {
    text-align: center;
}
.slm-footer__logo {
    height: 9rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slm-footer__tagline {
    text-align: center;
}

/* (5) Amenity rows had no max-width container, so on desktop the image
   and text stretched to opposite screen edges with a large empty void
   and looked sparse / inconsistent. Contain and balance the pair, and
   collapse empty ACF sub-blocks that added uneven row spacing. */
@media (min-width: 1024px) {
    .slm-amenity {
        max-width: var(--container-max);
        margin-left: auto;
        margin-right: auto;
        gap: 4rem;
        align-items: center;
    }
    .slm-amenity__image {
        flex: 0 0 48%;
        max-width: 48%;
    }
    .slm-amenity__content {
        flex: 1;
    }
}
.slm-amenity__text:empty,
.slm-amenity__details:empty {
    display: none;
}

/* (6) The restaurant (and other inner) heroes use .slm-hero-inner*
   classes that had NO CSS at all: the inline background-image tiled
   (no cover/no-repeat), there was no overlay scrim (white hero text
   was unreadable on the photo), and content was not centered. Mirror
   the standard .slm-hero treatment so inner heroes match the site
   template. */
.slm-hero-inner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.slm-hero-inner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--yacht-navy) 0%, rgba(10, 25, 47, 0.55) 45%, rgba(10, 25, 47, 0.65) 100%);
    z-index: 1;
}
.slm-hero-inner__content {
    position: relative;
    z-index: 2;
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
    color: var(--yacht-white);
}
.slm-hero-inner__content .slm-hero-inner__eyebrow,
.slm-hero-inner__content h1,
.slm-hero-inner__content h2,
.slm-hero-inner__content p {
    color: var(--yacht-white);
}

/* 2026-05-19: bring the restaurant (inner) hero text up to the same
   type treatment as the Dock With Us / Boat Rentals heroes
   (.slm-hero-dock__title / __subtitle / .slm-eyebrow). The inner hero
   keeps its centered single-column layout; only the eyebrow, title,
   and tagline typography are matched (clamp title, gold eyebrow,
   weight-300 tagline, the same text shadows).

   Cascade note: the white-color override directly above is a selector
   LIST; its element-qualified members that match these nodes are
   `.slm-hero-inner__content p` and `.slm-hero-inner__content h1`, each
   (0,1,1). All three rules below are scoped `.slm-hero-inner__content
   .slm-hero-inner__<part>` = (0,2,0), which outranks (0,1,1), so the
   gold eyebrow and rgba tagline colors win. The override's other list
   member, `.slm-hero-inner__content .slm-hero-inner__eyebrow`, is also
   (0,2,0) (a tie) and is defeated on source order because these rules
   come later in the file. Non-color props (font, clamp size, shadow,
   spacing) are uncontested by the override. */
.slm-hero-inner__content .slm-hero-inner__eyebrow {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--yacht-gold);
    margin-bottom: 1rem;
}
.slm-hero-inner__content .slm-hero-inner__title {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: var(--yacht-white);
    line-height: 1.1;
    margin: 0 0 1.5rem;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.slm-hero-inner__content .slm-hero-inner__tagline {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    max-width: 40rem;
    margin: 0 auto 1.5rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

/* =====================================================================
   2026-05-15 social feed: image-only by default, post text on hover.
   The grid stays a clean photo wall; the Facebook/Instagram post text
   fades in over the tile on hover (and on keyboard focus). Caption is
   aria-hidden in markup (same text is already the img alt) so screen
   readers are not double-served.
   ===================================================================== */
.slm-social__feed-item {
    position: relative;
}
.slm-social__feed-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.875rem 1rem;
    background: linear-gradient(to top, rgba(10, 25, 47, 0.96) 0%, rgba(10, 25, 47, 0.78) 100%);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.slm-social__feed-item:hover .slm-social__feed-caption,
.slm-social__feed-item:focus-visible .slm-social__feed-caption,
.slm-social__feed-item:focus-within .slm-social__feed-caption {
    opacity: 1;
    transform: translateY(0);
}
/* Touch devices have no hover: keep it a clean image grid (tap opens
   the post on Facebook/Instagram). */
@media (hover: none) {
    .slm-social__feed-caption {
        display: none;
    }
}

/* =====================================================================
   2026-05-15 social feed: show whole post images, never crop.
   Facebook content is heterogeneous (landscape, square, text graphics,
   screenshots); the original 4:5 + object-fit:cover hard-cropped them
   inconsistently. Square tile + object-fit:contain on the section's
   navy shows every image in full; the minor letterbox blends into the
   dark background. Cascade-safe overrides of the base grid rules.
   ===================================================================== */
.slm-social__feed-item {
    aspect-ratio: 1 / 1;
    background-color: var(--yacht-navy);
}
.slm-social__feed-item img {
    object-fit: contain;
}
/* The base rule scales the image 1.1x on hover; with object-fit:contain
   that would push the image past the tile edge. Hold it steady. */
.slm-social__feed-item:hover img {
    transform: none;
}

/* =====================================================================
   2026-05-15 Restaurant page redesign, "Modern Yacht Club" (Gemini
   mockup C, client-approved). On the existing SLM tokens. The social
   section reuses .slm-social* (no-crop + hover-caption already styled).
   ===================================================================== */
.slm-rest-heading {
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--yacht-navy);
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    line-height: 1.15;
    margin: 0;
}
.slm-rest-heading--light {
    color: var(--yacht-white);
}
.slm-eyebrow--gold {
    color: var(--yacht-gold);
}

/* 2. Overview: centered intro + hours/menu split */
.slm-rest-overview {
    background: var(--yacht-white);
}
.slm-rest-overview__intro {
    max-width: 46rem;
    margin: 0 auto 3rem;
    text-align: center;
}
.slm-rest-overview__lede {
    margin: 1rem 0 0;
    color: #4b5563;
    line-height: 1.7;
}
.slm-rest-split {
    display: grid;
    /* auto-fit so a lone card (e.g. hours unset) spans full width
       instead of leaving an empty grid cell. */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    align-items: stretch;
}
.slm-rest-card {
    padding: 2.5rem;
    border-radius: 6px;
}
.slm-rest-card--hours {
    background: var(--yacht-white);
    border: 1px solid rgba(10, 25, 47, 0.12);
}
.slm-rest-card--menu {
    background: var(--yacht-navy);
    color: var(--yacht-white);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.slm-rest-card__title {
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--yacht-navy);
    font-size: 1.5rem;
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--yacht-gold);
}
.slm-rest-card__title--light {
    color: var(--yacht-white);
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.75rem;
}
.slm-rest-card__menu-copy {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
    margin: 0 0 1.75rem;
}
.slm-rest-card__note--light {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* 4. Social: reuses .slm-social* above (no-crop + hover-caption); only
   the navy-section fallback copy is restaurant-specific. */
.slm-rest-social__fallback {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
    margin: 0 0 1.5rem;
}
.slm-rest-card__note {
    margin: 1.25rem 0 0;
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.5;
}
.slm-rest-hours {
    list-style: none;
    margin: 0;
    padding: 0;
}
.slm-rest-hours__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(10, 25, 47, 0.08);
    font-size: 0.95rem;
}
.slm-rest-hours__row:last-child {
    border-bottom: none;
}
.slm-rest-hours__day {
    color: var(--yacht-navy);
    font-weight: 500;
}
.slm-rest-hours__time {
    color: #4b5563;
}
.slm-rest-hours__row--closed .slm-rest-hours__time {
    color: #9ca3af;
}
.slm-rest-hours__row--open .slm-rest-hours__time {
    color: var(--yacht-gold);
    font-weight: 600;
}

/* 3. Entertainment: light band, two bordered cards */
.slm-rest-entertainment {
    background: #f8f9fa;
}
.slm-rest-section-head {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto 2.5rem;
}
.slm-rest-section-head__sub {
    margin: 0.75rem 0 0;
    color: #4b5563;
}
.slm-rest-ent-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 56rem;
    margin: 0 auto;
}
.slm-rest-ent-card {
    background: var(--yacht-white);
    border: 1px solid rgba(10, 25, 47, 0.12);
    border-top: 3px solid var(--yacht-gold);
    border-radius: 4px;
    padding: 2rem;
    text-align: center;
}
.slm-rest-ent-card__title {
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--yacht-navy);
    font-size: 1.35rem;
    margin: 0 0 0.5rem;
}
.slm-rest-ent-card__when {
    margin: 0;
    color: var(--yacht-gold);
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* 5. Directions: navy band, content + map split */
.slm-rest-directions__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.slm-rest-directions__text {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
    margin: 1rem 0 0;
}
.slm-rest-directions__address {
    color: var(--yacht-white);
    font-weight: 600;
    margin: 1rem 0 1.75rem;
}
.slm-rest-directions__map iframe {
    display: block;
    border-radius: 6px;
}

/* 6. Closing CTA */
.slm-rest-cta {
    background: var(--yacht-white);
    text-align: center;
}
.slm-rest-cta .slm-rest-heading {
    margin-bottom: 1.5rem;
}

@media (max-width: 860px) {
    .slm-rest-split,
    .slm-rest-ent-grid,
    .slm-rest-directions__grid {
        grid-template-columns: 1fr;
    }
    .slm-rest-card {
        padding: 1.75rem;
    }
}

/* =====================================================================
   2026-05-18 Amenities redesign, "Checklist" (Gemini mockup C,
   client-approved). Image-light, on the SLM tokens. The stat-highlights
   band was removed 2026-05-19 per client request.
   ===================================================================== */
/* Slimmer than a default .slm-section so the checklist sits close to
   the hero instead of opening a large empty void below it. */
.slm-amen-list {
    padding-top: 3.5rem;
}

.slm-amen-list__head {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto 3rem;
}
.slm-amen-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 3rem;
    max-width: 56rem;
    margin-inline: auto;
}
.slm-amen-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(10, 25, 47, 0.1);
}
.slm-amen-check {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: var(--yacht-gold);
    margin-top: 2px;
}
.slm-amen-checklist__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.slm-amen-checklist__title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--yacht-navy);
    line-height: 1.25;
}
.slm-amen-checklist__desc {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4b5563;
}
.slm-amen-checklist__desc a {
    color: var(--yacht-gold);
}
.slm-amen-checklist__details {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    line-height: 1.55;
    color: #6b7280;
}
.slm-amen-checklist__details strong {
    color: var(--yacht-navy);
    font-weight: 600;
}
.slm-amen-checklist__details a {
    color: var(--yacht-gold);
}

/* 2026-05-19: linked amenity cards (stretched-link pattern). Only the
   title is the <a>; its ::after overlay expands the click target to
   the whole card. The card keeps its original flex layout untouched
   (no wrapper element), so linked and non-linked cards look identical.
   Any tel: link slm_linkify_phones() emits in the description stays
   independently clickable because it is lifted above the overlay. */
.slm-amen-checklist__item--linked {
    position: relative;
    cursor: pointer;
}
.slm-amen-checklist__link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}
.slm-amen-checklist__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}
.slm-amen-checklist__item--linked:hover .slm-amen-checklist__title,
.slm-amen-checklist__link:focus-visible {
    color: var(--yacht-gold);
}
.slm-amen-checklist__item--linked:hover {
    transform: translateX(2px);
}
.slm-amen-checklist__link:focus-visible {
    outline: 2px solid var(--yacht-gold);
    outline-offset: 4px;
}
/* Keep real links inside the card (phone numbers) above the overlay
   so the whole-card link does not swallow their clicks. */
.slm-amen-checklist__item--linked .slm-amen-checklist__desc a,
.slm-amen-checklist__item--linked .slm-amen-checklist__details a {
    position: relative;
    z-index: 1;
}

@media (max-width: 860px) {
    .slm-amen-checklist {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}