* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Colors */
    --navy: #0F172A;
    /* Slate 900 */
    --navy-deep: #020617;
    /* Darker Slate */
    --ocean: #1e293b;
    /* Slate 800 */
    --sky: #e2e8f0;
    /* Slate 200 */
    --sand: #f8fafc;
    /* Slate 50 */
    --mist: #f1f5f9;
    /* Slate 100 */
    --accent: #f5c15b;
    --accent-dark: #e8aa35;

    --text: #0F172A;
    /* Primary Text */
    --text-muted: #334155;
    /* Secondary Text */
    --text-light: #64748B;
    /* Tertiary Text */

    --white: #ffffff;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --radius-lg: 24px;
    --radius-md: 16px;
    --container: min(1120px, 90vw);

    /* Typography Scale */
    --text-4xl: 3.052rem;
    --text-3xl: 2.441rem;
    --text-2xl: 1.953rem;
    --text-xl: 1.563rem;
    --text-lg: 1.250rem;
    --text-base: 1rem;
    --text-sm: 0.875rem;
    --text-xs: 0.75rem;

    /* Display face for headings. Three rules already asked for
       var(--font-display) but it was never defined, so the adventure card
       titles silently fell back to the body's Inter while every other heading
       on the site rendered in Outfit. */
    --font-display: 'Outfit', sans-serif;

    /* Font Weights */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 55%, #f8fafc 100%);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
    font-size: var(--text-base);
}

section[id] {
    scroll-margin-top: 110px;
}

body.no-scroll {
    overflow: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

p {
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

small {
    font-size: var(--text-sm);
    color: var(--text-light);
}

h2,
h3,
h4 {
    font-weight: var(--weight-bold);
    color: var(--text);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(2.5rem, 5vw, var(--text-4xl));
    line-height: 1.1;
    font-weight: var(--weight-bold);
}

h2 {
    font-size: clamp(2rem, 4vw, var(--text-3xl));
    font-weight: var(--weight-semibold);
}

h3 {
    font-size: clamp(1.5rem, 3vw, var(--text-2xl));
    font-weight: var(--weight-semibold);
    letter-spacing: -0.015em;
}

small {
    font-size: 0.85rem;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    font-weight: 600;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 1.8rem;
    border-radius: 999px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn.primary {
    background: var(--accent);
    color: var(--navy);
    box-shadow: 0 16px 30px rgba(245, 193, 91, 0.35);
}

.btn.primary:hover {
    background: var(--accent-dark);
    transform: translateY(-2px);
}

.btn.ghost {
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
}

.btn.ghost.dark {
    color: var(--navy);
    border-color: rgba(11, 29, 42, 0.2);
    background: var(--white);
}

.btn.ghost:hover {
    transform: translateY(-2px);
}

.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Apply scrolled header style globally (mobile + desktop) */
.site-header.is-scrolled {
    background: rgba(7, 20, 29, 0.44);
    backdrop-filter: blur(12px);
    box-shadow: 0 15px 30px rgba(7, 20, 29, 0.35);
}

.navbar {
    width: var(--container);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 0;
    color: var(--white);
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 700;
}

.nav-logo img {
    height: 123px;
    width: auto;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    font-weight: 500;
}

.nav-close {
    display: none;
}

.nav-links a {
    opacity: 0.85;
    transition: opacity 0.2s ease;
    position: relative;
}

.nav-links a:hover {
    opacity: 1;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--accent);
    transition: width 0.2s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-cta {
    background: var(--accent);
    color: var(--navy);
    padding: 1rem 2.5rem;
    font-size: 0.95rem;
    border-radius: 999px;
    font-weight: 600;
    transition: transform 0.2s ease, background-color 0.2s ease;
    border: none;
}

.nav-cta:hover {
    background: var(--accent-dark);
    transform: translateY(-2px);
}

.nav-toggle {
    display: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: var(--white) !important;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    cursor: pointer;
}

.hero {
    position: relative;
    min-height: 105vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    color: var(--white);
    padding: 6rem 0 3rem;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px at 15% 20%, rgba(245, 193, 91, 0.15), transparent 60%),
        radial-gradient(700px at 85% 15%, rgba(105, 181, 214, 0.2), transparent 65%);
    z-index: 1;
    pointer-events: none;
}

.hero_media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.hero_slide {
    position: absolute;
    inset: 0;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    opacity: 0;
    will-change: opacity, transform;
}

.hero_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(6, 16, 23, 0.75) 0%, rgba(6, 16, 23, 0.35) 55%, rgba(6, 16, 23, 0.8) 100%);
    z-index: 1;
}

.hero_content {
    /* Match the widget's visible card inside its 16px desktop inset. */
    width: calc(var(--container) - 32px);
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    max-width: 848px;
    padding: 1.5rem 1.8rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.hero_content h1 {
    color: var(--white);
    font-size: clamp(2.5rem, 5vw + 1rem, 4rem);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hero_booking {
    position: relative;
    z-index: 2;
    width: var(--container);
    max-width: 900px;
}

/* The iframe switches to a 12px inset below its own 640px breakpoint. */
@media (max-width: 711px) {
    .hero_content {
        width: calc(var(--container) - 24px);
    }
}

@media (max-width: 390px) {
    .hero_content h1 {
        font-size: clamp(2rem, 10vw, 2.5rem);
    }
}

.hero_content p,
.hero_content h2 {
    color: var(--text);
    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 500;
}

.hero_content h2 {
    font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
    color: var(--white);
    line-height: 1.3;
}

.hero_actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* The headline and subhead are Outfit; the button, the "Next up" badge and the
   rating were inheriting Inter from the body, so the hero read as two
   typefaces stacked on top of each other. Scoped to the hero block so ordinary
   buttons elsewhere keep their own treatment. */
.hero_content .hero_actions a,
.hero_content .urgency-badge,
.hero_content .hero_rating {
    font-family: var(--font-display);
}

.hero_rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

.hero_rating span {
    color: var(--accent);
}

.hero_scroll {
    position: absolute;
    bottom: 5.5rem;
    right: 8vw;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-weight: 600;
    z-index: 2;
    padding-right: 1.5rem;
}

.hero_scroll::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
    transform: translateY(-50%) rotate(45deg);
    animation: bounceArrow 1.6s infinite;
}

@keyframes bounceArrow {

    0%,
    100% {
        transform: translateY(-50%) rotate(45deg);
    }

    50% {
        transform: translateY(-30%) rotate(45deg);
    }
}

.hero_strip {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0.8rem 0;
    background: rgba(7, 20, 29, 0.7);
    backdrop-filter: blur(8px);
    overflow: hidden;
    z-index: 2;
    display: flex;
    gap: 2rem;
    white-space: nowrap;
}

.hero_strip_track {
    display: flex;
    gap: 2rem;
    white-space: nowrap;
    animation: marquee 36s linear infinite;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    color: rgba(255, 255, 255, 0.75);
    min-width: 100%;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.section {
    padding: 11rem 0;
    background: var(--sand);
    position: relative;
}

/* 11rem top and bottom is 352px of dead space per section on a 390px phone —
   more than a third of the viewport at every boundary, which made the pages
   feel like endless empty scrolling. Desktop keeps its full rhythm.
   tideline.css already does this with clamp(5rem, 11vw, 9.5rem). */
@media (max-width: 900px) {
    .section {
        padding: 5rem 0;
    }

    .section.alt {
        padding-top: 4rem;
    }
}

.section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 70%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(11, 29, 42, 0.12) 50%, transparent 100%);
    transform: translateX(-50%);
}

.section.alt {
    background: var(--white);
    color: var(--navy);
    padding-top: 5.5rem;
    /* Reduced from default 11rem */
}

.section.alt::before {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
}

.section.alt h2,
.section.alt h3,
.section.alt p {
    color: var(--navy);
}

.section-inner {
    width: 100%;
    max-width: 1400px;
    /* Allow wider container for this section if needed */
    margin: 0 auto;
    padding: 0 5%;
    /* Ensure consistent padding on sides */
}

.section-header {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 3rem;
}

.section-header h2::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    border-radius: 999px;
    background: var(--accent);
    margin-top: 1rem;
}

.section-header .eyebrow {
    color: rgba(11, 29, 42, 0.6);
}

.section.alt .section-header .eyebrow {
    color: rgba(255, 255, 255, 0.6);
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1400px;
    /* Increased max-width to allow more space */
    margin: 0 auto;
    width: 100%;
    justify-items: center;
    /* Center items in their tracks */
}

@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 600px;
    }
}

@media (max-width: 600px) {
    .about-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

.feature-circle {
    width: 160px;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
    background-color: white;
    border-radius: 50%;
    border: 3px solid var(--accent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 30px;
}

@media (max-width: 768px) {
    .feature-circle {
        width: 112px;
        height: 112px;
        padding: 20px;
    }
}

.feature-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.feature-item:hover .feature-circle {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(245, 193, 91, 0.2);
}

.feature-item:hover .feature-circle img {
    transform: scale(1.1);
}

.feature-item h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
    margin: 0;
}

.feature-item p {
    font-size: 0.95rem;
    color: var(--text-light);
    margin: 0;
    max-width: 200px;
    opacity: 0.8;
}



.about-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.about-list li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 500;
    transition: transform 0.3s ease, color 0.3s ease;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 99px;
}

.about-list li:hover {
    transform: translateX(5px);
    color: var(--accent-dark);
    background: rgba(245, 193, 91, 0.1);
}

.about-list li::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(245, 193, 91, 0.3);
}

.about-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    min-height: 360px;
    background-size: cover;
    background-position: center;
    position: relative;
    transform: translateZ(0);
}

.about-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 20, 29, 0) 0%, rgba(7, 20, 29, 0.35) 100%);
    opacity: 0.6;
}

.route {
    position: relative;
    overflow: hidden;
}

.route_media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.7);
}

.route_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(7, 20, 29, 0.85) 0%, rgba(7, 20, 29, 0.35) 70%);
}

.route_content {
    position: relative;
    z-index: 2;
    width: var(--container);
    margin: 0 auto;
    color: var(--white);
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.route_content p,
.route_content .eyebrow {
    color: var(--white);
    max-width: 480px;
}

.experience-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

.experience-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    min-height: 420px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.experience-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 70px rgba(7, 20, 29, 0.22);
}

.experience-card img {
    height: 240px;
    width: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.experience-card:hover img {
    transform: scale(1.05);
}

.experience-card .card-body {
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.card-tag {
    font-size: 0.75rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    color: rgba(11, 29, 42, 0.5);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.card-tag::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--accent);
    border-radius: 999px;
}

/* --- Gallery Carousel (Homepage) --- */
.gallery-track-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 2rem 0;
}

.gallery-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    /* GSAP animation handles movement */
}

/* Specific overrides for homepage carousel items */
.gallery-track .gallery-item {
    width: 375px;
    min-width: 375px;
    /* Prevent collapse if image loading */
    height: 470px;
    flex-shrink: 0;
    cursor: zoom-in;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    /* Reset grid-specific styles if any, but .gallery-item is shared */
}

.gallery-track .gallery-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}

/* --- Gallery Grid (matches gallery.html masonry) --- */
.gallery-grid {
    columns: 3 320px;
    gap: 2px;
}

.gallery-item {
    break-inside: avoid;
    margin-bottom: 2px;
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}

.gallery-item img {
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.025);
}

.gallery-item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem 1.2rem 1rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #f3efe7;
    background: linear-gradient(180deg, transparent, rgba(10, 21, 24, 0.75));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gallery-item:hover figcaption {
    opacity: 1;
}

/* No hover on touch, so the caption would never appear. Show it outright. */
@media (hover: none) {
    .gallery-item figcaption {
        opacity: 1;
    }
}

/* Instagram Section */
/* Instagram Section */
.insta-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 5 columns for Instagram feed look */
    gap: 0;
    /* Seamless look or small gap */
    width: 100%;
}

.insta-grid .insta-item:nth-child(6) {
    display: none;
}

@media (max-width: 768px) {
    .insta-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .insta-grid .insta-item:nth-child(6) {
        display: block;
    }
}

.insta-item {
    display: block;
    width: 100%;
    padding-bottom: 100%;
    /* Square aspect ratio */
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.insta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
}

.insta-item:hover .insta-overlay {
    opacity: 1;
}

.contact-section {
    background: var(--navy);
    color: var(--white);
}

.contact-section h2,
.contact-section h3,
.contact-section p,
.contact-section a,
.contact-section .eyebrow {
    color: rgba(255, 255, 255, 0.85);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    align-items: start;
}

.contact-section .contact-card {
    background: var(--sand);
    border-radius: var(--radius-md);
    padding: 1.6rem;
    border: none;
    margin-top: 1.5rem;
    display: block;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
    color: var(--navy);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.contact-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    background: var(--white);
}

.contact-section .contact-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--navy);
}

.contact-section .contact-card p {
    color: var(--text-light);
    /* Or a dark grey variable if available */
    font-weight: 500;
}

.contact-form {
    display: grid;
    gap: 1rem;
    background: var(--sand);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: 0 20px 45px rgba(7, 20, 29, 0.28);
    color: var(--navy);
}

.contact-form label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    color: var(--navy);
    font-weight: 600;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--white);
    color: var(--navy);
    font-family: inherit;
    transition: border-color 0.3s;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--accent);
}

.footer {
    background: var(--navy-deep);
    color: var(--white);
    padding: 3rem 0 2rem;
}

.footer p,
.footer h3 {
    color: var(--white);
}

.footer-inner {
    width: var(--container);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
}

.footer-nav {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

.nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.footer-nav a {
    color: var(--white);
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.footer-nav a:hover {
    opacity: 0.8;
    color: var(--accent);
}

.nav-sub {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 400 !important;
}

.footer-bottom {
    width: var(--container);
    margin: 2rem auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
}

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(7, 20, 29, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    z-index: 200;
}

.lightbox[hidden] {
    display: none;
}

.lightbox_image {
    max-width: min(80vw, 900px);
    max-height: 70vh;
    border-radius: var(--radius-md);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.lightbox_caption {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.lightbox_close,
.lightbox_nav {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    padding: 0.6rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
}

.lightbox_nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox_nav.prev {
    left: 4vw;
}

.lightbox_nav.next {
    right: 4vw;
}

@media (max-width: 980px) {

    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .experience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .navbar {
        padding: 0.6rem 0;
        width: 90%;
        /* Ensure container width logic holds up on mobile if var(--container) is too wide */
        margin: 0 auto;
    }

    /* The 123px desktop logo made the fixed header 161px — 19% of a phone
       screen permanently covered. 52px keeps the wordmark legible in ~72px. */
    .nav-logo img {
        height: 68px;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        /* Opaque: at 0.96 the hero headline behind it read straight through the
           menu and tangled with the link labels. */
        background: #071420;
        flex-direction: column;
        padding: calc(6rem + env(safe-area-inset-top)) 2rem 2rem;
        gap: 1.5rem;
        transform: translateY(-100%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Nothing should float over an open full-screen menu. !important because
       the mobile rules above force the chat button to inline-flex the same way. */
    body:has(.nav-links.is-open) .floating-whatsapp,
    body:has(.nav-links.is-open) .mobile-booking-bar {
        display: none !important;
    }

    /* 26px tall links are well under the 44px comfortable tap target. */
    .nav-links a {
        padding: 0.6rem 0.4rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .nav-links.is-open {
        transform: translateY(0);
        visibility: visible;
    }

    .nav-close {
        position: absolute;
        top: calc(1.2rem + env(safe-area-inset-top));
        right: 1.2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.08);
        color: var(--white);
        font-size: 1.1rem;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .nav-cta {
        display: none;
    }

    .experience-grid {
        grid-template-columns: 1fr;
    }

    .hero_content {
        padding: 1.2rem 1.4rem;
    }

    .hero_scroll {
        display: none;
    }

    .hero_strip {
        font-size: 0.75rem;
    }
}

/* --- Experiences Slider --- */
#experiences {
    position: relative;
    /* Use 100vh or a large fixed height. The reference uses window.innerHeight in JS, so we need a container that matches the expected dimensions or we adapt JS. 
       Let's use 100vh to match the "full screen" feel of the reference. */
    /* Increased by 20% from 80vh */
    height: 96vh;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #07141d;
    /* Fallback/Base */
    color: var(--white);
}

.exp-indicator {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 5px;
    z-index: 60;
    background-color: var(--accent);
    transform: translateX(-100%);
    /* Initial state */
}

/* Dynamically generated cards */
.exp-card {
    position: absolute;
    left: 0;
    top: 0;
    background-position: center;
    background-size: cover;
    box-shadow: 6px 6px 10px 2px rgba(0, 0, 0, 0.6);
}

.exp-card-content {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--white);
    padding-left: 16px;
}

.content-place {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
}

.content-title-1,
.content-title-2 {
    font-weight: 600;
    font-size: 20px;
    font-family: var(--font-display);
    /* Using site font */
    text-transform: uppercase;
}

.content-start {
    width: 30px;
    height: 5px;
    border-radius: 99px;
    background-color: var(--white);
}

/* Details Overlay */
.exp-details {
    z-index: 22;
    position: absolute;
    top: 25%;
    /* Adapted from fixed pixel value */
    left: 5%;
    max-width: 500px;
    pointer-events: none;
    /* Let clicks pass to cards if needed, but buttons need pointer-events */
}

.exp-details * {
    pointer-events: auto;
}

.exp-details .place-box {
    height: 46px;
    overflow: hidden;
}

.exp-details .place-box .text {
    padding-top: 16px;
    font-size: 20px;
    position: relative;
}

.exp-details .place-box .text:before {
    top: 0;
    left: 0;
    position: absolute;
    content: "NEXT";
    /* Changed from empty string to "NEXT" */
    font-size: 0.7rem;
    letter-spacing: 0.2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    width: auto;
    height: auto;
    background: transparent;
}

.exp-details .title-box-1,
.exp-details .title-box-2 {
    margin-top: 2px;
    height: auto;
    overflow: hidden;
}

.exp-details .title-1,
.exp-details .title-2 {
    font-weight: 600;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-family: var(--font-display);
    line-height: 1;
    text-transform: uppercase;
}

.exp-details .desc {
    margin-top: 16px;
    width: 100%;
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.9;
}

.exp-quick-info {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    width: fit-content;
    background: rgba(7, 20, 29, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.exp-quick-info .info-item {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

/* Same as the buttons below: an explicit display beats the UA's [hidden] rule,
   which left a bare "Ages" label with nothing after it. */
.exp-quick-info .info-item[hidden] {
    display: none;
}

.exp-quick-info .label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.7);
}

.exp-quick-info .value {
    font-size: 0.85rem;
    font-weight: 600;
}

.exp-details .cta {
    width: 100%;
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Shared box so the two CTAs are always identical in height. A <button> does not
   inherit font-family/font-size, so the primary fell back to Arial 13.33px while
   the ghost used Inter 14.4px — that plus line-height and the 1px border left
   them 9.5px apart. Both now carry a border (transparent on the primary) so the
   box models match exactly. */
.exp-btn-primary,
.exp-btn-ghost {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.8rem 2rem;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.exp-btn-primary {
    background: var(--accent);
    color: var(--navy);
}

.exp-btn-ghost {
    background: transparent;
    color: var(--white);
    border-color: var(--white);
}

/* The display above beats the UA's [hidden] rule, so tours without footage
   would still show their Watch video button. */
.exp-btn-primary[hidden],
.exp-btn-ghost[hidden] {
    display: none;
}

/* Pagination / Controls */
.exp-pagination {
    position: absolute;
    /* Positioning handled by JS or fallback */
    bottom: 10%;
    right: 5%;
    display: inline-flex;
    align-items: center;
    z-index: 60;
    width: max-content;
}

.exp-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
}

.exp-arrow:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
}

.exp-arrow svg {
    width: 24px;
    height: 24px;
    stroke: var(--white);
    stroke-width: 2;
}

.exp-arrow:nth-child(2) {
    margin-left: 20px;
}

.progress-sub-container {
    margin-left: 24px;
    width: 300px;
    /* Reduced from 500px for better fit */
    height: 50px;
    display: flex;
    align-items: center;
}

.progress-sub-background {
    width: 100%;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.2);
}

.progress-sub-foreground {
    height: 3px;
    background-color: var(--accent);
    width: 0;
}

.slide-numbers {
    width: 50px;
    height: 50px;
    overflow: hidden;
    position: relative;
    margin-left: 20px;
}

.slide-numbers .item {
    width: 50px;
    height: 50px;
    position: absolute;
    color: var(--white);
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    font-size: 32px;
    font-weight: bold;
    font-family: var(--font-display);
}

.exp-cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 100;
    transform: translateX(100%);
    pointer-events: none;
    /* Let clicks pass if visible */
}

/* Lightbox Image Overrides */
.lightbox_image {
    max-width: 90%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    width: auto;
    height: auto;
}

/* Experiences Header Override */
.exp-header {
    position: absolute;
    top: 3rem;
    left: 10%;
    /* Matches offsetLeft logic roughly */
    z-index: 50;
    pointer-events: none;
}

/* Floating over the pinned desktop slider is the point; on mobile the slider is
   a normal scrolling card list, so absolute positioning parked the heading
   underneath the first card as ghost text. */
@media (max-width: 900px) {
    .exp-header {
        position: static;
        left: auto;
        margin-bottom: 1.5rem;
    }

    .exp-header h2 {
        font-size: 2rem;
    }
}

.exp-header h2 {
    font-size: 2.5rem;
    /* Slightly smaller than main titles */
    color: var(--white);
}

.exp-header .eyebrow {
    color: var(--white);
    opacity: 0.9;
}

/* Social media links in footer */
.social-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.social-links a {
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.2s ease, transform 0.2s ease;
    display: flex;
}

.social-links a:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

/* --- UX/UI Report Additions --- */

/* Hero Rating */
.hero_rating {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.5rem;
    background: rgba(7, 20, 29, 0.4);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero_rating .stars {
    display: flex;
    gap: 2px;
}

.hero_rating span {
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Trust Strip (White Ribbon) */
.trust-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    padding: 1.5rem 0;
    z-index: 5;
    display: flex;
    justify-content: space-evenly;
    /* Spread items across width */
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
    /* Subtle lift */
}

.trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
}

/* SVG rule removed as icons are gone */

.trust-item span {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #000000;
}

@media (max-width: 768px) {
    .trust-strip {
        gap: 2rem;
        padding: 1rem;
        justify-content: flex-start;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Team Section */
.team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
}

@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
}

.team-card {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid rgba(11, 29, 42, 0.05);
}

.team-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 3px solid var(--accent);
    flex-shrink: 0;
}

.team-content h3 {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
}

.team-content .role {
    color: var(--accent-dark);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.team-content p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.8rem;
}

.team-content .credential {
    display: inline-block;
    margin: 0 0.35rem 0.35rem 0;
    background: var(--mist);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
}

.bio-discovery {
    margin-top: 0.8rem;
    padding: 0.75rem 0.9rem;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    display: grid;
    gap: 0.3rem;
}

.bio-discovery .label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    color: var(--text-light);
}

.bio-discovery .value {
    font-size: 0.95rem;
    color: var(--navy);
    line-height: 1.4;
}

/* Experience Pricing */
.exp-price {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
    display: block;
    /* Make sure it breaks line */
    width: 100%;
}

.exp-price .amount {
    color: var(--accent);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Optional per-tour qualifiers under the price (torch surcharge, gear included,
   seasonal dates). width:100% so each takes its own line in the wrapping .cta
   flex row, the same trick .exp-price uses. Hidden when the tour has no note. */
.exp-note {
    width: 100%;
    margin-top: -0.35rem;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.65);
}

.exp-note[hidden] {
    display: none;
}

.cta {
    flex-wrap: wrap;
    /* Allow price to be on top */
}

/* Testimonials */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

@media (max-width: 900px) {
    .testimonial-grid {
        grid-template-columns: 1fr;
    }
}

.testimonial-card {
    background: var(--sand);
    /* Light background for card */
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.testimonial-card .tour-tag {
    align-self: flex-start;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: var(--navy);
    background: rgba(15, 23, 42, 0.08);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
}

.section.alt .testimonial-card .quote {
    color: var(--text-muted);
    font-style: italic;
    font-size: 1.05rem;
}

.testimonial-card .stars {
    color: var(--accent);
    letter-spacing: 2px;
}

.testimonial-card .author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
}

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--navy);
}

.author .name {
    margin: 0;
    color: var(--navy);
    font-weight: 600;
}

.author small {
    color: var(--text-light);
}

/* Floating CTA */
/* Floating chat trigger. Kept byte-for-byte in step with the tideline.css rule
   of the same name — the two stylesheets split the site between them, and this
   button has to look identical on every page. */
.floating-whatsapp {
    position: fixed;
    bottom: 1.4rem;
    right: 1.4rem;
    z-index: 100;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.floating-whatsapp_mascot {
    width: auto;
    height: 83px;
    display: block;
    filter: drop-shadow(0 10px 22px rgba(10, 21, 24, 0.35));
}

.floating-whatsapp svg {
    display: none;
}

.floating-whatsapp:hover {
    transform: translateY(-4px);
}

/* Hover/focus label. Sits to the left of the mascot so it never runs off the
   right edge. aria-hidden — the anchor's own label already says this. */
.floating-whatsapp_label {
    margin-right: 0.5rem;
    padding: 0.35rem 0.7rem;
    background: #0A1518;
    color: #F3EFE6;
    border: 1px solid rgba(243, 239, 230, 0.16);
    border-radius: 999px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(6px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.floating-whatsapp:hover .floating-whatsapp_label,
.floating-whatsapp:focus-visible .floating-whatsapp_label {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 900px) {
    /* Mascot is a full-body figure — too tall for a phone viewport, so the
       glyph button takes over. Matches the tideline.css mobile rule exactly. */
    .floating-whatsapp {
        display: inline-flex !important;
        right: 1.4rem;
        left: auto;
        bottom: 1.4rem;
        width: 48px;
        height: 48px;
        background: #0A1518;
        border: 1px solid rgba(243, 239, 230, 0.16);
        border-radius: 50%;
        transition: border-color 0.3s ease, transform 0.3s ease;
    }

    .floating-whatsapp_mascot,
    .floating-whatsapp_label {
        display: none;
    }

    .floating-whatsapp svg {
        display: block;
        width: 22px;
        height: 22px;
        fill: #8FE0CE;
    }

    .floating-whatsapp:hover {
        border-color: #5FA396;
        transform: translateY(-2px);
    }

    /* Mobile Menu CTA */
    .mobile-only-cta {
        display: inline-flex !important;
        background: var(--accent);
        color: var(--navy) !important;
        padding: 1rem 2rem;
        border-radius: 999px;
        font-weight: 600;
        text-align: center;
        justify-content: center;
        margin-top: 1rem;
        opacity: 1 !important;
    }

    /* Ensure link underline override */
    .mobile-only-cta::after {
        display: none !important;
    }
}

/* Hide mobile CTA on desktop */
.mobile-only-cta {
    display: none;
}

/* --- Dark Mode (Night Walk Page) --- */
body.theme-dark {
    background: linear-gradient(180deg, #050a10 0%, #0a1628 50%, #050a10 100%);
    color: rgba(255, 255, 255, 0.9);
}

body.theme-dark .site-header {
    background: rgba(5, 10, 16, 0.5);
    /* Semi-transparent initially */
}

body.theme-dark .site-header.is-scrolled {
    background: rgba(5, 10, 16, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.theme-dark .detail-card,
body.theme-dark .faq-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
}

body.theme-dark .detail-card h3,
body.theme-dark .faq-card h3 {
    color: var(--accent);
}

body.theme-dark p {
    color: rgba(255, 255, 255, 0.7);
}

body.theme-dark .page-hero .eyebrow {
    color: var(--accent);
}

body.theme-dark .section-header h2 {
    color: var(--white);
}

body.theme-dark .detail-list li::before {
    background: var(--accent);
    box-shadow: 0 0 10px rgba(245, 193, 91, 0.4);
    /* Glow effect */
}

body.theme-dark footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: #020408;
}

/* --- Tide & Light Section --- */
.tide-section {
    background: #f4f4f4;
    /* Light grey */
    position: relative;
    padding: 6rem 0;
}

.tide-section::before {
    display: none;
}

.marine-ticker {
    background: linear-gradient(120deg, #06151f 0%, #0c2a3a 50%, #06151f 100%);
    color: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: 0 12px 30px rgba(7, 20, 29, 0.25);
}

.marine-ticker-track {
    display: flex;
    width: max-content;
    animation: marineScroll 26s linear infinite;
}

.marine-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 1.5rem;
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.marine-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.marine-value {
    font-size: 0.85rem;
    font-weight: 600;
}

.marine-dot {
    opacity: 0.5;
}

.marine-ticker:hover .marine-ticker-track {
    animation-play-state: paused;
}

@keyframes marineScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.mobile-booking-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 1.2rem calc(0.85rem + env(safe-area-inset-bottom));
    background: rgba(7, 20, 29, 0.95);
    color: var(--white);
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    z-index: 999;
}

.mobile-booking-bar .booking-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-weight: 600;
}

.mobile-booking-bar .booking-price .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.8;
}

.mobile-booking-bar .booking-price .value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
}

.mobile-booking-bar .booking-price .suffix {
    font-size: 0.85rem;
    opacity: 0.75;
}

.mobile-booking-bar .booking-button {
    padding: 0.6rem 1.4rem;
    font-size: 0.95rem;
    white-space: nowrap;
}

@media (max-width: 999px) {
    body.has-mobile-booking {
        padding-bottom: 90px;
    }

    .mobile-booking-bar {
        display: flex;
    }

    /* The bar owns the bottom of the screen on the four tour pages, and the
       chat button was landing right on top of its Book & Pay. Lift it clear;
       pages without a bar keep the normal offset. */
    body:has(.mobile-booking-bar) .floating-whatsapp {
        bottom: calc(5.5rem + env(safe-area-inset-bottom));
    }
}

.tide-widget {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    color: var(--navy);
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.tide-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
    padding-bottom: 1.5rem;
}

.tide-header h3 {
    margin: 0.5rem 0 0.2rem 0;
    font-size: 2.2rem;
    color: #000000;
}

.tide-date {
    color: #000000;
    font-size: 1.15rem;
}

.tide-updated {
    color: rgba(0, 0, 0, 0.7);
    font-size: 0.9rem;
    margin-top: 0.2rem;
}

.weather-icon {
    color: var(--accent);
}

.tide-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.tide-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tide-item .label {
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    color: #000000;
}

.tide-item .value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #000000;
}

.tide-item .sub {
    font-size: 1rem;
    color: #000000;
}

@media (max-width: 768px) {
    .tide-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1rem;
    }
}

/* --- Video Testimonials --- */
.video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
    }
}

.video-card {
    background: transparent;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.video-card:hover {
    transform: translateY(-5px);
}

.video-thumbnail {
    width: 100%;
    position: relative;
}

.video-thumbnail::after {
    content: "";
    /* Play button overlay */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    border: 2px solid var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-info {
    padding: 1.2rem 0;
}

.video-info h4 {
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

.video-info p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.video-parallax {
    position: relative;
    clip-path: inset(0);
    will-change: transform, clip-path;
}

.video-parallax .video-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateY(0);
    will-change: transform;
}

.video-parallax .video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 20, 29, 0.15), rgba(7, 20, 29, 0.55));
    pointer-events: none;
    opacity: 0.5;
}

/* --- Premium Typography (Report Item 5.5) --- */
h1,
h2,
h3,
h4 {
    font-family: 'Outfit', sans-serif;
}

/* Adjust headings for new font */
h1 {
    font-weight: 700;
    letter-spacing: -0.03em;
}

h2 {
    font-weight: 600;
}

/* --- Mobile Nav Animation (Report Item 3.2) --- */
.nav-toggle {
    /* Existing styles remain, ensuring we overwrite or add transition */
    transition: transform 0.3s ease;
}



/* If using an icon based toggle later, we'd animate spans here */

/* --- Form Field Polish --- */
.contact-form select {
    background: var(--white);
    color: var(--navy);
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    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='%230F172A' 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 1rem center;
    background-size: 1.2em;
}

/* Conservation Mini-Section (Quick Win) */
.conservation-note {
    background: rgba(245, 193, 91, 0.1);
    border-left: 4px solid var(--accent);
    padding: 1.5rem;
    margin-top: 2rem;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.conservation-note h4 {
    color: var(--navy);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.conservation-note p {
    font-size: 0.9rem;
    margin-bottom: 0;
    color: var(--text-muted);
}

/* --- Mobile Nav Animation (Hamburger) --- */
.nav-toggle {
    padding: 0.5rem;
    display: none;
    /* Desktop default */
    border: none;
    background: transparent;
    cursor: pointer;
}

.hamburger-box {
    width: 24px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 24px;
    height: 2px;
    background-color: var(--white);
    position: absolute;
    border-radius: 999px;
    transition: transform 0.15s ease;
}

.hamburger-inner {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -8px;
}

.hamburger-inner::after {
    bottom: -8px;
}

/* Active State (X) */
.nav-toggle.is-active .hamburger-inner {
    background-color: transparent;
}

.nav-toggle.is-active .hamburger-inner::before {
    transform: translateY(8px) rotate(45deg);
}

.nav-toggle.is-active .hamburger-inner::after {
    transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 768px) {
    .nav-toggle {
        display: block;
    }
}

/* --- Urgency Badge --- */
.urgency-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(245, 193, 91, 0.2);
    /* Slight Gold tint */
    color: var(--navy);
    padding: 0.8rem 1.2rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--accent);
    text-decoration: none;
    transition: background 0.2s ease;
}

.urgency-badge:hover {
    background: rgba(245, 193, 91, 0.4);
}

.pulsing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(245, 193, 91, 0.7);
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 193, 91, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(245, 193, 91, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 193, 91, 0);
    }
}

/* --- Mobile Adventures Hero --- */
.page-hero.mobile-adventures-hero {
    display: none;
}

@media (max-width: 999px) {
    .page-hero.mobile-adventures-hero {
        display: flex;
        /* Uses .page-hero styles for layout */
        min-height: 60vh;
        /* Matches mobile hero feel */
    }
}

/* --- Multi-Step Booking Form --- */
.contact-form-container {
    background: var(--sand);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: 0 20px 45px rgba(7, 20, 29, 0.28);
}

.vibe-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.vibe-card {
    background: var(--white);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.vibe-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.vibe-card:active {
    transform: scale(0.98);
}

.vibe-icon {
    font-size: 2rem;
    margin-bottom: 0.2rem;
}

.vibe-name {
    font-weight: 600;
    color: var(--navy);
    font-size: 0.9rem;
}

/* --- Instagram Grid --- */
.insta-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* No gap for a sleek mosaic look, or small gap */
    gap: 0;
}

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

.insta-item {
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    display: block;
}

.insta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.insta-item:hover .insta-overlay {
    opacity: 1;
}

/* --- Educational Blog Section --- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

@media (max-width: 900px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

.blog-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.blog-img {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.blog-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.blog-cat {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--accent-dark);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.blog-content h4 {
    font-size: 1.25rem;
    margin-bottom: 0.8rem;
    color: var(--navy);
    line-height: 1.3;
}

.blog-content p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.blog-link {
    color: var(--navy);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 2px solid var(--accent);
}

/* --- Contact Client-Side Validation (Report Item 2.4/2.5) --- */
.contact-form input:invalid,
.contact-form select:invalid {
    border-color: #ffcccc;
}

.contact-form input:focus:invalid {
    outline-color: var(--accent);
    /* Don't shame them while typing */
}

.contact-form input:not(:placeholder-shown):valid {
    border-color: #4ade80;
    /* Green hint when correct */
}

/* Ensure the select placeholder color is lighter */
.contact-form select:required:invalid {
    color: #666;
}

.contact-form select option[value=""][disabled] {
    display: none;
}

/* --- Ocean Report Fixes (White Text + Size) --- */
.tide-widget .eyebrow {
    color: #ffffff !important;
    /* Override inline accent color */
    font-size: 0.9rem !important;
    /* Increase from default */
    opacity: 0.9;
}

.tide-widget div[style*="font-size: 0.9rem"] {
    font-size: 1.1rem !important;
    /* Increase Biologist note size */
    color: #ffffff !important;
}

.tide-widget p,
.tide-widget strong,
.tide-widget span {
    color: #ffffff !important;
}

/* --- Mobile Experiences Slider --- */
.mobile-exp-wrapper {
    display: none;
    /* Hidden by default */
}

@media (max-width: 999px) {

    /* Adjust breakpoint as needed */
    /* Hide Desktop Slider Elements */
    #exp-slider-container,
    .exp-indicator,
    .exp-details,
    .exp-pagination,
    .exp-cover,
    .slide-numbers {
        display: none !important;
    }

    #experiences {
        height: auto !important;
        /* Allow auto height on mobile */
        min-height: auto;
        padding-bottom: 0;
        overflow-y: visible;
    }

    /* Show Mobile Slider */
    .mobile-exp-wrapper {
        display: block;
        position: relative;
        background: #07141d;
        /* Match section bg */
        padding-bottom: 0;
        overflow: hidden;
        font-family: inherit;
        /* Use site font */
        width: 100%;
        height: 100%;
    }

    :root {
        --card-width: 85vw;
        --card-gap: 15px;
        --accent-color: #00d2ff;
    }

    #exp-slider-container-mobile {
        display: flex;
        gap: var(--card-gap);
        padding: 40px 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        align-items: center;
        /* Center cards vertically if needed */
    }

    #exp-slider-container-mobile::-webkit-scrollbar {
        display: none;
    }

    .exp-card-wrapper {
        position: relative;
        flex: 0 0 var(--card-width);
        height: 65vh;
        scroll-snap-align: center;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    }

    .exp-card-mobile {
        position: relative;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: transform 0.3s ease;
    }

    /* A text-shadow alone could not carry white body copy over bright water.
       Scrim rises behind the lower two thirds where the content sits. */
    .exp-card-mobile::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,
                rgba(7, 20, 29, 0) 25%,
                rgba(7, 20, 29, 0.55) 55%,
                rgba(7, 20, 29, 0.85) 100%);
    }

    /* Content Styling */
    .exp-card-content-mobile {
        position: absolute;
        bottom: 30px;
        left: 20px;
        color: white;
        z-index: 2;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }

    /* content-title-1 and 2 are already defined globally or desktop, ensuring they apply here */
    .mobile-exp-wrapper .content-title-1 {
        font-weight: 800;
        font-size: 1.6rem;
        line-height: 1.1;
    }

    .mobile-exp-wrapper .content-title-2 {
        font-weight: 300;
        font-size: 1.6rem;
        color: var(--accent-color);
        line-height: 1.1;
    }

    .mobile-exp-wrapper .content-place {
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 5px;
        opacity: 0.9;
    }

    /* The card is a fixed height but the copy is not: the Kayak combo's 528
       characters ran to 604px inside a 549px card and spilled out of the top.
       Clamp to a four-line summary — the full description is on the tour page —
       and use the full card width rather than 80% so those lines are not
       needlessly cramped. */
    .mobile-exp-wrapper .content-desc {
        font-size: 0.95rem;
        margin-top: 8px;
        max-width: 100%;
        line-height: 1.4;
        font-weight: 500;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .exp-card-quick-info {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: rgba(255, 255, 255, 0.85);
    }

    .exp-card-quick-info span {
        background: rgba(7, 20, 29, 0.45);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 0.25rem 0.5rem;
        border-radius: 999px;
    }

    .mobile-exp-wrapper .content-price {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--accent-color);
        margin-top: 5px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Nav Buttons */
    .slider-nav {
        position: absolute;
        bottom: 100px;
        right: 25px;
        display: flex;
        gap: 10px;
        z-index: 100;
        pointer-events: auto;
    }

    .slider-nav button {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        touch-action: manipulation;
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .slider-nav button:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: scale(1.05);
    }

    .slider-nav button:active {
        transform: scale(0.95);
    }

    .slider-nav svg {
        width: 24px;
        height: 24px;
        fill: white;
        pointer-events: none;
    }

    /* Dots Styling */
    .dots-container {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 10px;
        position: absolute;
        bottom: 30px;
        width: 100%;
    }

    /* The dot stays 10px visually, but a 10px button is far under the ~44px a
       fingertip needs. Pad the button out and draw the dot as the ::before, so
       the hit area grows without the design changing. */
    .dot {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 0;
        border-radius: 50%;
    }

    .dot::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;
    }

    .dot.active::before {
        background: var(--accent-color);
        transform: scale(1.3);
        box-shadow: 0 0 10px var(--accent-color);
    }

    /* Buttons are 40px wide now, so the visual gap comes from the padding. */
    .dots-container {
        gap: 0;
    }
}

/* Native <details> disclosure — the marker is rotated by [open], no JS involved. */
.news-drop {
    margin-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 1rem;
}

.news-drop > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--navy);
    font-size: 0.95rem;
}

.news-drop > summary::-webkit-details-marker {
    display: none;
}

.news-drop > summary::after {
    content: "";
    margin-left: auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.news-drop[open] > summary::after {
    transform: rotate(-135deg);
}

.news-count {
    background: var(--accent-dark);
    color: #fff;
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    font-size: 0.7rem;
}

.article-widget {
    margin-top: 1rem;
    padding: 0.8rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: #f9f9f9;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    display: block;
}

.article-widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    background: #fff;
}

.article-meta {
    font-size: 0.7rem;
    color: var(--accent-dark);
    font-weight: 600;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    justify-content: space-between;
}

.article-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
    margin: 0 0 0.5rem 0;
}

.article-snippet {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Contact Page Specific Overrides (White & Grey Glassmorphism) --- */
body.contact-page {
    /* Subtle light gradient background */
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    color: var(--navy);
}

body.contact-page .contact-section {
    background: transparent;
    color: var(--navy);
}

body.contact-page .section-header .eyebrow {
    color: var(--text-light);
}

body.contact-page .section-header h2,
body.contact-page .section-header p {
    color: var(--navy);
}

/* Glassmorphism Cards */
body.contact-page .contact-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
    color: var(--navy);
}

body.contact-page .contact-card:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.1);
}

body.contact-page .contact-card h3 {
    color: var(--navy);
}

body.contact-page .contact-card p {
    color: var(--text-muted);
}

/* Form Container Glassmorphism */
body.contact-page .contact-form,
body.contact-page .contact-form-container {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    color: var(--navy);
}

body.contact-page .contact-form label {
    color: var(--navy);
    font-weight: 600;
}

body.contact-page .contact-form input,
body.contact-page .contact-form select,
body.contact-page .contact-form textarea {
    background: rgba(255, 255, 255, 0.8);
    color: var(--navy);
    border: 1px solid rgba(203, 213, 225, 0.6);
    /* Slate-300ish */
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.02);
}

body.contact-page .contact-form input::placeholder,
body.contact-page .contact-form textarea::placeholder {
    color: var(--text-light);
}

body.contact-page .contact-form input:focus,
body.contact-page .contact-form select:focus,
body.contact-page .contact-form textarea:focus {
    border-color: var(--accent);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(245, 193, 91, 0.2);
}

/* Vibe Cards */
body.contact-page .vibe-card {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    color: var(--navy);
}

body.contact-page .vibe-card:hover,
body.contact-page .vibe-card.selected {
    background: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 8px 20px rgba(245, 193, 91, 0.15);
}

body.contact-page .vibe-card .vibe-name {
    color: var(--navy);
}

body.contact-page #selected-vibe-display {
    color: var(--accent-dark) !important;
}

/* Reset Headings */
body.contact-page h1,
body.contact-page h2,
body.contact-page h3,
body.contact-page h4,
body.contact-page h5,
body.contact-page h6 {
    color: var(--navy);
}

body.contact-page #booking-form>div[onclick] {
    color: var(--text-light) !important;
}

/* Correct Hero Text Color */
body.contact-page .page-hero h1,
body.contact-page .page-hero p,
body.contact-page .page-hero .eyebrow {
    color: var(--white);
}

/* --- Booking modal (booking.js) --- */
.booking-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(7, 20, 29, 0.72);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 1rem;
    overflow-y: auto;
}

.booking-modal[hidden] {
    display: none;
}

.booking-dialog {
    position: relative;
    background: var(--white);
    color: var(--navy);
    border-radius: var(--radius-md);
    padding: 2rem;
    width: min(480px, 100%);
    box-shadow: 0 30px 60px rgba(7, 20, 29, 0.35);
}

.booking-dialog h3 {
    margin: 0.25rem 0 1.25rem;
    font-size: 1.5rem;
}

.booking-close {
    position: absolute;
    top: 0.75rem;
    right: 0.9rem;
    background: none;
    border: 0;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: var(--navy);
    opacity: 0.5;
}

.booking-close:hover {
    opacity: 1;
}

.booking-form label {
    display: block;
    margin-bottom: 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.booking-optional {
    font-weight: 400;
    opacity: 0.6;
}

/* select was never listed here, so the date dropdown rendered inline and
   unstyled. With two dropdowns side by side that reads as a broken row. */
.booking-form input,
.booking-form select,
.booking-form textarea {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.7rem 0.85rem;
    font: inherit;
    font-weight: 400;
    color: var(--navy);
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.15);
    border-radius: 8px;
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.booking-row {
    display: grid;
    grid-template-columns: 1fr 100px;
    gap: 0.75rem;
}

/* Date and departure share the width; guests sits alone and stays narrow. */
.booking-row.is-split {
    grid-template-columns: 1fr 1fr;
}

.booking-row.is-guests {
    grid-template-columns: 100px;
}

@media (max-width: 420px) {
    .booking-row.is-split {
        grid-template-columns: 1fr;
    }
}

.booking-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 1.1rem 0 0.6rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(15, 23, 42, 0.12);
    font-size: 0.9rem;
}

.booking-total strong {
    font-size: 1.4rem;
    color: var(--accent-dark, var(--accent));
}

.booking-error {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: rgba(190, 30, 45, 0.08);
    color: #a3121f;
    font-size: 0.85rem;
}

.booking-submit {
    width: 100%;
    justify-content: center;
}

.booking-submit:disabled {
    opacity: 0.6;
    cursor: progress;
}

.booking-fineprint {
    margin: 0.85rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    opacity: 0.65;
}

/* Post-payment banner */
.booking-banner {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 1001;
    max-width: min(560px, calc(100vw - 2rem));
    padding: 1rem 3rem 1rem 1.25rem;
    border-radius: var(--radius-md);
    color: var(--white);
    font-size: 0.9rem;
    line-height: 1.5;
    box-shadow: 0 18px 40px rgba(7, 20, 29, 0.35);
}

.booking-banner.is-success {
    background: #1c7a53;
}

.booking-banner.is-error {
    background: #a3121f;
}

.booking-banner-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: none;
    border: 0;
    color: inherit;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
}

.booking-banner-close:hover {
    opacity: 1;
}

/* Book & Pay buttons added to existing cards */
.detail-book-btn,
.mobile-card-book {
    margin-top: 0.9rem;
    width: 100%;
    justify-content: center;
}

/* --- Partners Page (Explore The Shore) --- */
.partner-intro {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
}

.partner-logo {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

.partner-logo img {
    width: 100%;
    max-width: 260px;
    height: auto;
    display: block;
}

.partner-copy h2 {
    margin-bottom: 1.5rem;
}

.partner-copy h2::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    border-radius: 999px;
    background: var(--accent);
    margin-top: 1rem;
}

.partner-copy > p:not(.eyebrow) {
    color: var(--text-muted);
    margin-bottom: 1.2rem;
    line-height: 1.7;
}

.partner-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(11, 29, 42, 0.12);
}

.partner-stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.partner-stat .value {
    font-family: 'Outfit', sans-serif;
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--navy);
    line-height: 1;
}

.partner-stat .label {
    font-size: var(--text-sm);
    color: var(--text-light);
}

/* Episode grid */
.partner-video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 1.5rem;
}

.partner-video {
    display: flex;
    flex-direction: column;
}

.partner-video-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--navy);
    box-shadow: var(--shadow);
    cursor: pointer;
}

.partner-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.partner-video-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 20, 29, 0) 40%, rgba(7, 20, 29, 0.35) 100%);
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* Play button: white disc with a navy triangle */
.partner-video-thumb::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    z-index: 2;
    background-color: var(--white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'%3E%3Cpath d='M20 11L0 22V0z' fill='%230F172A'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 55% center;
    box-shadow: 0 6px 20px rgba(7, 20, 29, 0.3);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.partner-video-thumb:hover img,
.partner-video-thumb:focus-visible img {
    transform: scale(1.06);
}

.partner-video-thumb:hover::after,
.partner-video-thumb:focus-visible::after {
    background-color: var(--accent);
    transform: translate(-50%, -50%) scale(1.08);
}

.partner-video-thumb:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* Iframe swapped in on click keeps the thumbnail's box */
.partner-video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    display: block;
    background: var(--navy);
}

.partner-video-info {
    padding: 1rem 0.2rem 0;
}

.partner-video-info h4 {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--navy);
    line-height: 1.35;
    margin-bottom: 0.3rem;
}

.partner-video-info p {
    font-size: var(--text-sm);
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
}

.partner-video-info p:empty {
    display: none;
}

.partner-channel-cta {
    display: flex;
    justify-content: center;
    margin-top: 3.5rem;
}

@media (max-width: 1024px) {
    .partner-intro {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .partner-logo {
        position: static;
        align-items: flex-start;
        text-align: left;
    }

    .partner-logo img {
        max-width: 200px;
    }

    .partner-video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .partner-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1rem;
    }

    .partner-video-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Book callout in the partners sidebar */
.partner-book {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(11, 29, 42, 0.12);
}

.partner-book img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    display: block;
}

.partner-book p {
    font-size: var(--text-sm);
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 1024px) {
    .partner-book {
        align-items: flex-start;
    }
}

/* --- Events page --- */
.events-status {
    color: var(--text-muted);
    font-size: var(--text-lg);
    margin-bottom: 2rem;
}

.events-status[hidden] {
    display: none;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

.event-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(7, 20, 29, 0.14);
}

.event-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--mist);
}

.event-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.event-card:hover .event-media img {
    transform: scale(1.05);
}

/* Events without a photo still need a consistent card silhouette. */
.event-media.is-empty {
    background: linear-gradient(135deg, var(--mist) 0%, var(--sky) 100%);
}

.event-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.6rem;
}

.event-date {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-dark);
    margin-bottom: 0.5rem;
}

.event-body h3 {
    font-size: var(--text-xl);
    color: var(--navy);
    line-height: 1.25;
    margin-bottom: 0.9rem;
}

.event-facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin-bottom: 0.9rem;
}

.event-facts li {
    font-size: var(--text-sm);
    color: var(--text-light);
    display: inline-flex;
    align-items: center;
}

.event-facts li + li::before {
    content: "·";
    margin-right: 0.9rem;
    color: var(--text-light);
}

.event-desc {
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 1.4rem;
}

/* margin-top:auto pins the footer to the bottom so mixed-length cards line up. */
.event-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(11, 29, 42, 0.1);
}

.event-price {
    font-family: 'Outfit', sans-serif;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--navy);
}

.event-foot .btn {
    padding: 0.7rem 1.4rem;
    font-size: var(--text-sm);
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .events-grid {
        grid-template-columns: 1fr;
    }
}

/* Fullscreen video overlay for the experience "View Here" buttons */
.video-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(7, 20, 29, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.video-overlay iframe {
    width: min(1100px, 100%);
    aspect-ratio: 16 / 9;
    max-height: 100%;
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Local files: let the clip's own ratio decide, so portrait footage isn't
   letterboxed into a 16:9 box. */
.video-overlay video {
    width: auto;
    height: auto;
    max-width: min(1100px, 100%);
    max-height: 100%;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    background: #000;
}

.video-overlay_close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: none;
    border: 0;
    color: var(--white);
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

@media (max-width: 640px) {
    .video-overlay {
        padding: 0.75rem;
    }
}

/* Partners page: playlist dropdowns.
   ponytail: native <details>/<summary>, no JS toggle. Collapsed content is not
   rendered, so the ~200 lazy thumbnails cost nothing until a playlist is opened. */
.playlist-set {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.playlist {
    background: var(--sand);
    border: 1px solid var(--sky);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.playlist-summary {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.35rem 1.6rem;
    cursor: pointer;
    list-style: none;
    transition: background-color 0.2s ease;
}

.playlist-summary::-webkit-details-marker {
    display: none;
}

.playlist-summary:hover {
    background: var(--mist);
}

.playlist-summary:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

/* Still from the playlist's first video, so a closed row previews its contents. */
.playlist-thumb {
    flex-shrink: 0;
    width: 104px;
    /* height:auto or the width/height attributes (kept so the box is reserved
       before the image loads) win and aspect-ratio is ignored. */
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    background: var(--navy);
    box-shadow: var(--shadow);
}

.playlist-heading {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.playlist-name {
    font-family: "Outfit", sans-serif;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--navy);
}

.playlist-blurb {
    font-size: var(--text-sm);
    color: var(--text-light);
}

.playlist-count {
    margin-left: auto;
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--white);
    border: 1px solid var(--sky);
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
}

/* Chevron, rotated when the playlist is open */
.playlist-summary::after {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--text-light);
    border-bottom: 2px solid var(--text-light);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.25s ease;
}

.playlist[open] > .playlist-summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

.playlist[open] > .playlist-summary {
    border-bottom: 1px solid var(--sky);
}

.playlist > .partner-video-grid {
    padding: 1.75rem 1.6rem 2rem;
}

@media (max-width: 640px) {
    .playlist-summary {
        flex-wrap: wrap;
        gap: 0.6rem 1rem;
        padding: 1.1rem 1.15rem;
    }

    .playlist-thumb {
        width: 72px;
        border-radius: 8px;
        order: 0;
    }

    .playlist-heading {
        flex: 1 1 55%;
        order: 1;
    }

    .playlist-count {
        order: 2;
        margin-left: 0;
    }

    .playlist-summary::after {
        order: 3;
        margin-left: auto;
    }

    .playlist > .partner-video-grid {
        padding: 1.25rem 1.15rem 1.5rem;
    }
}

.exp-quick-info .info-item[hidden] {
    display: none;
}

/* ============================================================================
   DESIGN REFRESH
   Visual layer only — no markup or behaviour depends on anything below. Rules
   keep the same specificity as the ones they supersede so they win purely on
   order, which makes the whole layer safe to delete if it is ever unwanted.
   ========================================================================= */

:root {
    /* Shadows tinted with the navy rather than neutral black: grey shadows on a
       warm sand background read as dirt, brand-hue shadows read as depth.
       Layered (tight contact + wide diffuse) instead of a single flat drop. */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 6px 16px -4px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.04), 0 12px 28px -6px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 8px 16px rgba(15, 23, 42, 0.05), 0 24px 48px -12px rgba(15, 23, 42, 0.14);
    --shadow-xl: 0 16px 32px rgba(15, 23, 42, 0.06), 0 40px 80px -16px rgba(15, 23, 42, 0.18);
    --shadow-accent: 0 8px 24px -8px rgba(232, 170, 53, 0.55);

    /* Shared easings. The default ease-in-out is the single biggest giveaway of
       an untuned interface; these decelerate hard and settle. */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --radius-sm: 10px;
    --radius: 14px;
}

/* --- Typography rhythm ---------------------------------------------------
   Large display type set at default tracking looks loose; real display faces
   are drawn tighter as they scale up. */
h1,
.title-1,
.title-2 {
    letter-spacing: -0.03em;
}

h2 {
    letter-spacing: -0.02em;
}

/* 0.3rem of tracking on 12px text is a word-spacer, not a label. */
.eyebrow {
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    font-weight: 700;
}

/* A 72x4 solid gold slab under every heading is the most dated element on the
   page. Same idea, drawn as a tapering hairline. */
.section-header h2::after {
    width: 52px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), rgba(245, 193, 91, 0));
    margin-top: 0.9rem;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out),
        background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn.primary {
    box-shadow: var(--shadow-accent);
}

.btn.primary:hover {
    box-shadow: 0 14px 32px -8px rgba(232, 170, 53, 0.7);
    transform: translateY(-2px);
}

.btn.ghost:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.85);
}

/* --- Feature icons -------------------------------------------------------
   A hard 3px ring reads as a 2016 badge. Flat white face, hairline ring
   carried by an inset shadow so it cannot add layout width. */
.feature-circle {
    border: 0;
    background: var(--white);
    box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(245, 193, 91, 0.4);
    transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.feature-item:hover .feature-circle {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(245, 193, 91, 0.75);
}

/* --- Cards --------------------------------------------------------------- */
.faq-card,
.detail-card,
.team-card {
    box-shadow: var(--shadow);
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.faq-card:hover,
.detail-card:hover,
.team-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Playlists -----------------------------------------------------------
   Rebuilt as a proper media row: cinematic still, clear hierarchy, and an
   open state you can read at a glance. Still <details>/<summary> underneath,
   so the keyboard and no-JS behaviour is untouched. */
.playlist-set {
    gap: 0.85rem;
}

.playlist {
    position: relative;
    background: var(--white);
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out),
        border-color 0.4s var(--ease-out);
}

.playlist:hover {
    transform: translateY(-2px);
    border-color: rgba(245, 193, 91, 0.55);
    box-shadow: var(--shadow-md);
}

/* Accent rail marking the open playlist. Sits behind the summary, clipped by
   the card's own radius. */
.playlist::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 18px 0 0 18px;
    background: linear-gradient(180deg, var(--accent), var(--accent-dark));
    opacity: 0;
    transition: opacity 0.4s var(--ease-out);
}

.playlist[open] {
    transform: none;
    border-color: rgba(245, 193, 91, 0.6);
    box-shadow: var(--shadow-lg);
}

.playlist[open]::before {
    opacity: 1;
}

.playlist-summary {
    gap: 1.25rem;
    padding: 1.05rem 1.35rem;
    align-items: center;
    border-radius: 18px;
}

.playlist-summary:hover {
    background: transparent;
}

.playlist[open] > .playlist-summary {
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 18px 18px 0 0;
}

.playlist-thumb {
    width: 132px;
    border-radius: 12px;
    box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.45);
    transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out);
}

.playlist:hover .playlist-thumb {
    transform: scale(1.04);
    box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.55);
}

.playlist-name {
    font-size: 1.35rem;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.playlist-blurb {
    font-size: 0.875rem;
    line-height: 1.45;
}

/* Count reads as a quiet stat until its playlist is open, then it is the
   thing confirming what you just expanded. */
.playlist-count {
    background: rgba(15, 23, 42, 0.045);
    border: 0;
    color: var(--text-muted);
    padding: 0.4rem 0.85rem;
    transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}

.playlist[open] .playlist-count {
    background: var(--accent);
    color: var(--navy);
}

/* Chevron promoted from a rotated border hairline to a real affordance. */
.playlist-summary::after {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background-color: rgba(15, 23, 42, 0.05);
    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='%230F172A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px;
    transform: none;
    transition: background-color 0.3s var(--ease), transform 0.45s var(--ease-out);
}

.playlist-summary:hover::after {
    background-color: rgba(245, 193, 91, 0.4);
}

.playlist[open] > .playlist-summary::after {
    transform: rotate(180deg);
    background-color: var(--accent);
}

.playlist > .partner-video-grid {
    padding: 1.75rem 1.35rem 1.9rem;
    gap: 1.75rem 1.25rem;
}

/* --- Video cards --------------------------------------------------------- */
.partner-video-thumb {
    border-radius: 14px;
    box-shadow: var(--shadow);
    transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.partner-video-thumb:hover,
.partner-video-thumb:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Play disc: smaller and less shouty at rest, confident on hover. */
.partner-video-thumb::after {
    width: 52px;
    height: 68px;
    background-color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 22px rgba(7, 20, 29, 0.35);
    transition: background-color 0.3s var(--ease), transform 0.45s var(--ease-out);
}

.partner-video iframe {
    border-radius: 14px;
}

@media (max-width: 640px) {
    .playlist-summary {
        padding: 0.95rem 1rem;
        gap: 0.7rem 0.9rem;
    }

    .playlist-thumb {
        width: 84px;
        border-radius: 10px;
    }

    .playlist-name {
        font-size: 1.1rem;
    }

    .playlist-summary::after {
        width: 32px;
        height: 32px;
        background-size: 13px;
    }

    .playlist > .partner-video-grid {
        padding: 1.25rem 1rem 1.5rem;
    }
}

/* .ghost.dark is the light-background variant (navy on white), so it must not
   inherit the white hover border the dark-background .ghost uses. */
.btn.ghost.dark:hover {
    border-color: rgba(11, 29, 42, 0.35);
    box-shadow: var(--shadow-md);
}

/* ══════════════════════════════════════════════════════════════════
   UNIFIED FOOTER — same footer sitewide (matches tideline.css).
   Appended last so it overrides the legacy footer rules above.
   ══════════════════════════════════════════════════════════════════ */

.footer {
    background: #0A1518;
    color: rgba(243, 239, 230, 0.72);
    overflow: hidden;
    padding: 0;
}

.footer-inner {
    width: min(1440px, 100% - 2 * clamp(1.25rem, 4vw, 4rem));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3rem;
    padding: clamp(3.5rem, 7vw, 6rem) 0 3rem;
}

.footer-inner > div:first-child img {
    height: 64px;
    width: auto;
    margin-bottom: 1.4rem;
    display: block;
}

.footer-inner p {
    color: rgba(243, 239, 230, 0.45);
    font-size: 0.875rem;
    line-height: 1.6;
    max-width: 34ch;
    margin-bottom: 0;
}

.footer-contact {
    margin-top: 1.4rem;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: rgba(243, 239, 230, 0.72);
    display: grid;
    gap: 0.4rem;
}

.footer-contact a {
    transition: color 0.3s ease;
}

.footer-contact a:hover {
    color: #D9A552;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: auto;
    margin: 0;
    padding: 0;
}

.footer .nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.footer .nav-group a {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(243, 239, 230, 0.72);
    opacity: 1;
    transition: color 0.3s ease;
}

.footer .nav-group a:hover {
    color: #D9A552;
}

.footer .nav-group a.nav-sub {
    color: rgba(243, 239, 230, 0.45);
}

.footer .nav-group a.nav-sub:hover {
    color: #D9A552;
}

.footer-wordmark {
    width: min(1440px, 100% - 2 * clamp(1.25rem, 4vw, 4rem));
    margin-inline: auto;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: clamp(4.5rem, 17vw, 15rem);
    line-height: 0.78;
    letter-spacing: -0.03em;
    color: rgba(243, 239, 230, 0.1);
    user-select: none;
    pointer-events: none;
    transform: translateY(0.08em);
}

.footer-bottom {
    border-top: 1px solid rgba(243, 239, 230, 0.16);
    padding: 1.4rem 0;
    width: auto;
    margin: 0;
    display: block;
}

.footer-bottom_inner {
    width: min(1440px, 100% - 2 * clamp(1.25rem, 4vw, 4rem));
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem 2.5rem;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(243, 239, 230, 0.45);
}

.footer .social-links {
    display: flex;
    gap: 1.8rem;
}

.footer .social-links a {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(243, 239, 230, 0.72);
    background: none;
    border: none;
    width: auto;
    height: auto;
    transition: color 0.3s ease;
}

.footer .social-links a:hover {
    color: #D9A552;
}

@media (max-width: 980px) {
    .footer-inner {
        grid-template-columns: 1fr;
    }

    .footer-nav {
        grid-template-columns: 1fr 1fr;
    }

    /* 16-19px tall text links are an awkward fingertip target. Give the footer
       links a comfortable height without changing how they look. */
    .footer-nav a,
    .footer .nav-group a,
    .footer-contact a,
    .social-links a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   LOGBOOK REVIEWS — awwwards pull-quote treatment on the homepage.
   ══════════════════════════════════════════════════════════════════ */

/* Transparent section — the page background shows through. One review at a
   time, ported from the nurturing-growth homepage carousel. */
.logbook {
    background: transparent;
    padding: clamp(5rem, 11vw, 9.5rem) 0;
}

.logbook-inner {
    width: var(--container);
    margin: 0 auto;
}

.logbook-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.15);
    padding-bottom: 1.5rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.logbook-eyebrow {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 0.6rem;
}

.logbook-head h2 {
    color: var(--text);
    margin: 0;
}

.tq {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.tq-mark {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(110px, 13vw, 180px);
    line-height: 0.7;
    letter-spacing: -0.04em;
    color: #f5c15b;
    animation: tqBob 5s ease-in-out infinite;
    user-select: none;
}

.tq-side-count {
    display: block;
    margin-top: 1.2rem;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--text-light);
}

.tq-side-count b {
    font-weight: 500;
    color: #e8aa35;
}

.tq-side-count i {
    font-style: normal;
    margin: 0 0.35em;
    opacity: 0.5;
}

.tq-stage {
    position: relative;
    touch-action: pan-y;
}

.tq-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.tq-slide.is-active {
    position: relative;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.tq-slide.is-exit {
    opacity: 0;
    transform: translateY(-16px);
}

.tq-slide blockquote {
    margin: 0;
    max-width: 52rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text);
}

.tq-slide figcaption {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tq-dash {
    width: 40px;
    height: 1px;
    background: #e8aa35;
    flex-shrink: 0;
}

.tq-slide figcaption b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
}

.tq-slide figcaption small {
    display: block;
    margin-top: 0.25rem;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-light);
}

.tq-controls {
    margin-top: 3rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
}

.tq-num {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.tq-num.is-dim {
    color: var(--text-light);
}

.tq-progress {
    position: relative;
    height: 3px;
    width: min(220px, 40vw);
    background: rgba(15, 23, 42, 0.15);
    border-radius: 999px;
    overflow: hidden;
}

.tq-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background: #e8aa35;
    border-radius: 999px;
}

.tq-btns {
    display: flex;
    gap: 0.25rem;
    margin-left: 0.5rem;
}

.tq-btns button {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.tq-btns button:hover {
    background: rgba(15, 23, 42, 0.08);
}

@keyframes tqBob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@media (max-width: 640px) {
    .tq {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .tq-mark {
        font-size: 80px;
        line-height: 0.8;
    }

    .tq-side-count {
        display: none;
    }

    .tq-controls {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tq-mark {
        animation: none;
    }
}

/* --- Outline buttons: wipe-fill on hover ---------------------------------
   The "Discover" buttons and every other outline button fill left-to-right.

   Implemented as a background-image gradient grown from 0% to 100% width
   rather than a scaling pseudo-element: .btn.ghost carries backdrop-filter,
   which promotes it to its own compositing layer and paints a z-index:-1
   pseudo-element behind that layer, i.e. invisible. A background has no
   stacking relationship to fight, so this works on every variant. */
.exp-btn-ghost,
.btn.ghost {
    background-image: linear-gradient(to right, var(--white), var(--white));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    transition: background-size 0.45s var(--ease-out), color 0.25s var(--ease),
        border-color 0.35s var(--ease), transform 0.35s var(--ease-out),
        box-shadow 0.35s var(--ease-out);
}

.exp-btn-ghost:hover,
.exp-btn-ghost:focus-visible,
.btn.ghost:hover,
.btn.ghost:focus-visible {
    background-size: 100% 100%;
    color: var(--navy);
    border-color: var(--white);
}

/* .ghost.dark already sits on a light background, so it fills the other way. */
.btn.ghost.dark {
    background-image: linear-gradient(to right, var(--navy), var(--navy));
}

.btn.ghost.dark:hover,
.btn.ghost.dark:focus-visible {
    color: var(--white);
    border-color: var(--navy);
}

/* ══════════════════════════════════════════════════════════════════
   MOMENTS CAPTURED (adventures) — even grid, every image aligned
   top and bottom. Overrides the ragged masonry columns above.
   ══════════════════════════════════════════════════════════════════ */

.gallery-grid {
    columns: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

.gallery-item {
    margin: 0;
    aspect-ratio: 1;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 900px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── mobile: primary actions need a fingertip-sized target ───────────────── */

@media (max-width: 720px) {

    .btn,
    .exp-btn-primary,
    .exp-btn-ghost {
        min-height: 48px;
    }
}

.footer-credit {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(243, 239, 230, 0.72);
    transition: color 0.3s ease;
}

.footer-credit:hover {
    color: #D9A552;
}