/* ========================================
   RESET
======================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--color-ivory);
    color: var(--color-charcoal);
    font-family: var(--font-body);
    overflow-x: hidden;
}

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

button {
    font-family: inherit;
}


/* ========================================
   PAGE LOADER
======================================== */

.page-loader {

    position: fixed;
    inset: 0;

    z-index: 9999;

    background: var(--color-backwater);

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    gap: 2rem;

    transition:
        opacity 900ms ease,
        visibility 900ms ease;
}

.page-loader.loaded {

    opacity: 0;
    visibility: hidden;
}

.loader-brand {

    display: flex;
    flex-direction: column;

    align-items: center;

    font-family: var(--font-display);

    letter-spacing: 0.12em;
}

.loader-brand span:first-child {
    font-size: 2rem;
}

.loader-brand span:last-child {

    font-family: var(--font-body);

    font-size: 0.55rem;

    letter-spacing: 0.35em;

    margin-top: 0.2rem;
}

.loader-line {

    width: 120px;
    height: 1px;

    background: rgba(247, 244, 236, 0.25);

    overflow: hidden;
}

.loader-line span {

    display: block;

    width: 0;
    height: 100%;

    background: var(--color-gold);

    animation: loaderProgress 1.8s ease forwards;
}


/* ========================================
   HEADER
======================================== */

.site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: var(--header-height);

    padding: 0 5vw;

    z-index: 100;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid rgba(247, 244, 236, 0.15);
}


/* BRAND */

.brand {

    display: flex;

    flex-direction: column;

    line-height: 1;
}

.brand-main {

    font-family: var(--font-display);

    font-size: 1.8rem;

    letter-spacing: 0.08em;
}

.brand-sub {

    margin-top: 0.35rem;

    font-size: 0.48rem;

    letter-spacing: 0.3em;

    opacity: 0.75;
}


/* NAVIGATION */

.desktop-nav {

    display: flex;

    gap: 2.5rem;

    margin-left: auto;
    margin-right: 3rem;
}

.desktop-nav a {

    position: relative;

    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 0.16em;

    opacity: 0.8;

    transition: var(--transition-fast);
}

.desktop-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 1px;

    background: var(--color-gold);

    transition: var(--transition-smooth);
}

.desktop-nav a:hover {

    opacity: 1;
}

.desktop-nav a:hover::after {

    width: 100%;
}


/* BOOK BUTTON */

.nav-book {

    border: 1px solid rgba(247, 244, 236, 0.45);

    padding: 0.9rem 1.4rem;

    font-size: 0.62rem;

    text-transform: uppercase;

    letter-spacing: 0.14em;

    transition: var(--transition-fast);
}

.nav-book:hover {

    background: var(--color-ivory);

    color: var(--color-backwater);
}


/* MENU */

.menu-button {

    display: none;

    border: 0;

    background: transparent;

    cursor: pointer;

    flex-direction: column;

    gap: 6px;
}

.menu-button span {

    width: 26px;
    height: 1px;

    display: block;

    background: var(--color-ivory);
}


/* ========================================
   HERO
======================================== */

.hero {

    position: relative;

    min-height: 100vh;
    height: 100svh;

    overflow: hidden;

    display: flex;

    align-items: center;
}


/* BACKGROUND */

.hero-background {

    position: absolute;

    inset: 0;

    overflow: hidden;
}

.hero-image {

    position: absolute;

    inset: -5%;

    background-image:
        url("../assets/images/hero.jpg");

    background-size: cover;

    background-position: center;

    transform: scale(1.05);

    animation: heroZoom 12s ease-out forwards;
}

.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(46, 94, 63, 0.82) 0%,
            rgba(46, 94, 63, 0.48) 45%,
            rgba(46, 94, 63, 0.22) 100%);

}


/* HERO CONTENT */

.hero-content {

    position: relative;

    z-index: 2;

    width: min(900px,
            90%);

    margin-left: 10vw;

    padding-top: 5rem;
}

.hero-eyebrow {

    margin-bottom: 1.5rem;

    font-size: 0.65rem;

    font-weight: 500;

    letter-spacing: 0.3em;

    color: var(--color-gold);
}

.hero h1 {

    display: flex;

    flex-direction: column;

    font-family: var(--font-display);

    font-size: clamp(4rem,
            8vw,
            9rem);

    font-weight: 500;

    line-height: 0.82;

    letter-spacing: -0.025em;

    text-transform: uppercase;
}

.hero h1 span {

    display: block;
}

.hero h1 span:nth-child(2) {

    margin-left: 8vw;
}

.hero-description {

    max-width: 390px;

    margin-top: 2.5rem;

    font-size: 0.9rem;

    line-height: 1.8;

    font-weight: 300;

    color: rgba(247, 244, 236, 0.8);
}


/* HERO BUTTON */

.hero-button {

    display: inline-flex;

    align-items: center;

    gap: 1.5rem;

    margin-top: 2.5rem;

    padding: 1.1rem 1.5rem;

    border: 1px solid rgba(247, 244, 236, 0.5);

    font-size: 0.65rem;

    text-transform: uppercase;

    letter-spacing: 0.15em;

    transition: var(--transition-smooth);
}

.button-arrow {

    color: var(--color-gold);

    font-size: 1rem;

    transition: var(--transition-fast);
}

.hero-button:hover {

    background: var(--color-ivory);

    color: var(--color-backwater);

    padding-right: 1.8rem;
}

.hero-button:hover .button-arrow {

    transform: translate(4px, -4px);
}


/* SCROLL */

.scroll-indicator {

    position: absolute;

    z-index: 3;

    left: 5vw;
    bottom: 4vh;

    display: flex;

    align-items: center;

    gap: 1rem;
}

.scroll-text {

    font-size: 0.52rem;

    letter-spacing: 0.25em;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    opacity: 0.7;
}

.scroll-line {

    position: relative;

    width: 1px;
    height: 70px;

    background:
        rgba(247, 244, 236, 0.25);

    overflow: hidden;
}

.scroll-line::after {

    content: "";

    position: absolute;

    top: -100%;

    left: 0;

    width: 100%;
    height: 50%;

    background: var(--color-gold);

    animation:
        scrollLine 2s ease-in-out infinite;
}


/* LOCATION */

.hero-location {

    position: absolute;

    right: 5vw;
    bottom: 4vh;

    z-index: 3;

    display: flex;

    align-items: center;

    gap: 0.6rem;

    font-size: 0.55rem;

    letter-spacing: 0.25em;

    opacity: 0.7;
}

.location-dot {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--color-gold);
}


/* ========================================
   INTRODUCTION SECTION
======================================== */

.intro-section {

    position: relative;

    min-height: 100vh;

    background:
        var(--color-sand);

    color:
        var(--color-charcoal);

    overflow: hidden;

    padding:
        12vh 7vw;
}


/* ========================================
   INNER LAYOUT
======================================== */

.intro-inner {

    max-width:
        var(--container-width);

    min-height:
        76vh;

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        1fr 0.9fr;

    gap:
        8vw;

    align-items: center;
}


/* ========================================
   IMAGE
======================================== */

.intro-visual {

    position: relative;

    width: 100%;

    max-width:
        650px;
}

.intro-image-wrap {

    position: relative;

    width: 100%;

    height: 72vh;

    min-height:
        520px;

    overflow: hidden;
}

.intro-image {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    transform:
        scale(1.08);

    transition:
        transform 1.5s cubic-bezier(.22, 1, .36, 1);
}


/*
    Subtle image movement when
    the section is hovered.
*/

.intro-visual:hover .intro-image {

    transform:
        scale(1.02);
}


/* ========================================
   IMAGE LABEL
======================================== */

.intro-image-label {

    position: absolute;

    left: -1px;
    bottom: 0;

    display: flex;

    align-items: center;

    gap: 1rem;

    padding:
        1rem 1.3rem;

    background:
        var(--color-sand);

    font-size: 0.55rem;

    letter-spacing: 0.2em;

    text-transform:
        uppercase;
}

.intro-image-label span:first-child {

    color:
        var(--color-gold);

    font-family:
        var(--font-display);

    font-size: 1rem;
}


/* ========================================
   CONTENT
======================================== */

.intro-content {

    max-width:
        600px;
}

.section-label {

    position: relative;

    display: flex;

    align-items: center;

    gap: 0.8rem;

    margin-bottom:
        2rem;

    font-size:
        0.58rem;

    font-weight:
        600;

    letter-spacing:
        0.25em;

    text-transform:
        uppercase;

    color:
        var(--color-teal);
}

.section-label::before {

    content: "";

    width: 35px;
    height: 1px;

    background:
        var(--color-gold);
}


.intro-content h2 {

    font-family:
        var(--font-display);

    font-size:
        clamp(3.5rem,
            5.5vw,
            6.5rem);

    font-weight:
        500;

    line-height:
        0.88;

    letter-spacing:
        -0.025em;

    text-transform:
        uppercase;
}

.intro-content h2 span {

    display: block;
}

.intro-content h2 span:nth-child(2) {

    margin-left:
        3vw;
}

.intro-content h2 span:nth-child(3) {

    margin-left:
        6vw;

    color:
        var(--color-teal);
}


/* ========================================
   DIVIDER
======================================== */

.intro-divider {

    width:
        100%;

    max-width:
        420px;

    height: 1px;

    margin:
        3rem 0 2rem;

    background:
        rgba(8, 10, 8, 0.2);
}


/* ========================================
   TEXT
======================================== */

.intro-text {

    max-width:
        470px;

    margin-bottom:
        1.2rem;

    font-size:
        0.82rem;

    line-height:
        1.9;

    font-weight:
        400;

    color:
        rgba(8, 10, 8, 0.72);
}


/* ========================================
   TEXT LINK
======================================== */

.text-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 1rem;

    margin-top:
        1.2rem;

    padding-bottom:
        0.7rem;

    font-size:
        0.62rem;

    font-weight:
        600;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}

.text-link::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background:
        var(--color-charcoal);

    transform:
        scaleX(0.35);

    transform-origin:
        left;

    transition:
        transform var(--transition-smooth);
}

.text-link:hover::after {

    transform:
        scaleX(1);
}

.text-link-arrow {

    color:
        var(--color-gold);

    font-size:
        1rem;

    transition:
        transform var(--transition-fast);
}

.text-link:hover .text-link-arrow {

    transform:
        translate(4px,
            -4px);
}


/* ========================================
   DECORATIVE NUMBER
======================================== */

.intro-number {

    position: absolute;

    right: -1vw;
    bottom: -4rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(10rem,
            22vw,
            25rem);

    line-height:
        0.7;

    color:
        rgba(46, 94, 63, 0.045);

    user-select:
        none;

    pointer-events:
        none;
}

/* ========================================
   MOBILE MENU
======================================== */

.mobile-menu {

    position: fixed;

    inset: 0;

    z-index: 200;

    background:
        var(--color-backwater);

    display: flex;

    align-items: center;
    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-20px);

    transition:
        opacity 500ms ease,
        transform 700ms ease,
        visibility 500ms ease;
}

.mobile-menu.active {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}

.mobile-menu nav {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2rem;
}

.mobile-menu nav a {

    font-family:
        var(--font-display);

    font-size: 3rem;

    font-weight: 400;

    transition:
        var(--transition-fast);
}

.mobile-menu nav a:hover {

    color: var(--color-gold);
}

.mobile-menu-close {

    position: absolute;

    top: 25px;
    right: 6vw;

    border: 0;

    background: transparent;

    color: var(--color-ivory);

    font-size: 2rem;

    cursor: pointer;
}

/* ========================================
   EXPERIENCE SECTION
======================================== */

.experience-section {

    position: relative;

    min-height: 100vh;

    padding:
        12vh 7vw;

    background:
        var(--color-backwater);

    color:
        var(--color-ivory);

    overflow: hidden;
}


/* ========================================
   HEADER
======================================== */

.experience-header {

    max-width:
        var(--container-width);

    margin:
        0 auto 7rem;

    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        5rem;
}


.experience-label {

    color:
        var(--color-gold);
}


.experience-header h2 {

    font-family:
        var(--font-display);

    font-size:
        clamp(5rem,
            9vw,
            10rem);

    font-weight:
        500;

    line-height:
        0.72;

    letter-spacing:
        -0.03em;
}

.experience-header h2 span {

    display:
        block;

    margin-left:
        5vw;

    color:
        var(--color-sand);
}


.experience-intro {

    width:
        300px;

    padding-bottom:
        0.5rem;

    font-size:
        0.75rem;

    line-height:
        1.9;

    font-weight:
        300;

    color:
        rgba(247, 244, 236, 0.65);
}


/* ========================================
   MAIN EXPERIENCE CONTAINER
======================================== */

.experience-container {

    max-width:
        var(--container-width);

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        0.9fr 1fr;

    gap:
        8vw;

    align-items:
        center;
}


/* ========================================
   IMAGE AREA
======================================== */

.experience-image-area {

    position:
        relative;

    height:
        70vh;

    min-height:
        500px;
}

.experience-image-wrapper {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;
}


.experience-image {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    opacity:
        0;

    transform:
        scale(1.08);

    transition:
        opacity 800ms cubic-bezier(.22, 1, .36, 1),

        transform 1.4s cubic-bezier(.22, 1, .36, 1);
}


.experience-image.active {

    opacity:
        1;

    transform:
        scale(1);
}


/* ========================================
   IMAGE CAPTION
======================================== */

.experience-image-caption {

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    display:
        flex;

    justify-content:
        space-between;

    padding:
        1rem 1.2rem;

    background:
        rgba(46, 94, 63, 0.88);

    backdrop-filter:
        blur(10px);

    font-size:
        0.48rem;

    letter-spacing:
        0.2em;

    color:
        rgba(247, 244, 236, 0.75);
}


/* ========================================
   EXPERIENCE LIST
======================================== */

.experience-list {

    border-top:
        1px solid rgba(247, 244, 236, 0.18);
}


.experience-item {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        55px 1fr 40px;

    gap:
        1.5rem;

    align-items:
        start;

    padding:
        2rem 0;

    border-bottom:
        1px solid rgba(247, 244, 236, 0.18);

    cursor:
        pointer;

    transition:
        padding var(--transition-smooth);
}


.experience-item::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        -1px;

    width:
        0;

    height:
        1px;

    background:
        var(--color-gold);

    transition:
        width var(--transition-smooth);
}


.experience-item:hover,
.experience-item.active {

    padding-left:
        1rem;

    padding-right:
        1rem;
}


.experience-item:hover::before,
.experience-item.active::before {

    width:
        100%;
}


/* ========================================
   NUMBER
======================================== */

.experience-number {

    font-family:
        var(--font-display);

    font-size:
        1.2rem;

    color:
        var(--color-gold);

    line-height:
        1.2;
}


/* ========================================
   DETAILS
======================================== */

.experience-details h3 {

    font-family:
        var(--font-display);

    font-size:
        clamp(2rem,
            3vw,
            3.3rem);

    font-weight:
        500;

    line-height:
        0.85;

    letter-spacing:
        -0.01em;

    transition:
        color var(--transition-fast);
}


.experience-details h3 span {

    display:
        block;

    margin-left:
        2rem;
}


.experience-item:hover .experience-details h3,
.experience-item.active .experience-details h3 {

    color:
        var(--color-sand);
}


.experience-details p {

    max-width:
        360px;

    max-height:
        0;

    margin-top:
        0;

    overflow:
        hidden;

    opacity:
        0;

    font-size:
        0.7rem;

    line-height:
        1.8;

    font-weight:
        300;

    color:
        rgba(247, 244, 236, 0.6);

    transition:
        max-height 700ms cubic-bezier(.22, 1, .36, 1),

        margin-top 700ms cubic-bezier(.22, 1, .36, 1),

        opacity 500ms ease;
}


.experience-item:hover .experience-details p,
.experience-item.active .experience-details p {

    max-height:
        150px;

    margin-top:
        1.3rem;

    opacity:
        1;
}


/* ========================================
   ARROW
======================================== */

.experience-arrow {

    font-size:
        1.2rem;

    color:
        rgba(247, 244, 236, 0.35);

    transition:
        transform var(--transition-fast),

        color var(--transition-fast);
}


.experience-item:hover .experience-arrow,
.experience-item.active .experience-arrow {

    color:
        var(--color-gold);

    transform:
        translate(4px,
            -4px);
}


/* ========================================
   BACKGROUND NUMBER
======================================== */

.experience-background-number {

    position:
        absolute;

    right:
        -2vw;

    bottom:
        -5rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(15rem,
            30vw,
            35rem);

    line-height:
        0.7;

    color:
        rgba(247, 244, 236, 0.025);

    pointer-events:
        none;

    user-select:
        none;
}

/* ========================================
   THE SHIKARA SECTION
======================================== */

.boat-section {

    position: relative;

    padding:
        14vh 7vw;

    background:
        var(--color-sand);

    color:
        var(--color-charcoal);

    overflow: hidden;
}


/* ========================================
   HEADER
======================================== */

.boat-header {

    max-width:
        var(--container-width);

    margin:
        0 auto 5rem;
}


.boat-label {

    color:
        var(--color-teal);
}


.boat-header h2 {

    font-family:
        var(--font-display);

    font-size:
        clamp(5rem,
            10vw,
            11rem);

    font-weight:
        500;

    line-height:
        0.7;

    letter-spacing:
        -0.04em;
}


.boat-header h2 span {

    display:
        block;

    margin-left:
        8vw;

    color:
        var(--color-teal);
}


/* ========================================
   IMAGE
======================================== */

.boat-image-container {

    max-width:
        var(--container-width);

    margin:
        0 auto;
}


.boat-image-wrap {

    position:
        relative;

    width:
        100%;

    height:
        75vh;

    min-height:
        520px;

    overflow:
        hidden;
}


.boat-main-image {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    display:
        block;

    transform:
        scale(1.08);

    transition:
        transform 1.8s cubic-bezier(.22, 1, .36, 1);
}


.boat-image-wrap:hover .boat-main-image {

    transform:
        scale(1.02);
}


.boat-image-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(to top,
            rgba(46, 94, 63, 0.65),
            transparent 50%);
}


/* ========================================
   IMAGE INFORMATION
======================================== */

.boat-image-info {

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    padding:
        1.5rem 1.7rem;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    color:
        var(--color-ivory);

    font-size:
        0.5rem;

    letter-spacing:
        0.2em;
}


/* ========================================
   CONTENT
======================================== */

.boat-content {

    max-width:
        var(--container-width);

    margin:
        9rem auto 0;

    display:
        grid;

    grid-template-columns:
        1fr 0.8fr;

    gap:
        10vw;

    align-items:
        start;
}


/* ========================================
   STORY
======================================== */

.boat-story-label {

    margin-bottom:
        2rem;

    color:
        var(--color-teal);

    font-size:
        0.55rem;

    font-weight:
        600;

    letter-spacing:
        0.25em;

    text-transform:
        uppercase;
}


.boat-story h3 {

    max-width:
        650px;

    font-family:
        var(--font-display);

    font-size:
        clamp(3.5rem,
            5.5vw,
            6.5rem);

    font-weight:
        500;

    line-height:
        0.85;

    letter-spacing:
        -0.025em;
}


.boat-story h3 span {

    display:
        block;

    margin-left:
        4vw;
}


.boat-story h3 span:last-child {

    margin-left:
        8vw;

    color:
        var(--color-teal);
}


/* ========================================
   DESCRIPTION
======================================== */

.boat-description {

    max-width:
        470px;

    margin-top:
        2rem;

    font-size:
        0.78rem;

    line-height:
        1.9;

    color:
        rgba(8, 10, 8, 0.7);
}


/* ========================================
   SPECIFICATIONS
======================================== */

.boat-specifications {

    border-top:
        1px solid rgba(8, 10, 8, 0.2);
}


.boat-spec {

    display:
        grid;

    grid-template-columns:
        50px 1fr;

    gap:
        1.5rem;

    align-items:
        center;

    padding:
        1.6rem 0;

    border-bottom:
        1px solid rgba(8, 10, 8, 0.2);

    transition:
        padding var(--transition-smooth);
}


.boat-spec:hover {

    padding-left:
        0.8rem;
}


.boat-spec-number {

    color:
        var(--color-gold);

    font-family:
        var(--font-display);

    font-size:
        1.1rem;
}


.boat-spec-label {

    display:
        block;

    margin-bottom:
        0.35rem;

    font-size:
        0.48rem;

    letter-spacing:
        0.2em;

    color:
        rgba(8, 10, 8, 0.5);
}


.boat-spec strong {

    font-family:
        var(--font-display);

    font-size:
        1.5rem;

    font-weight:
        500;

    letter-spacing:
        0.02em;
}


/* ========================================
   CTA
======================================== */

.boat-cta {

    max-width:
        var(--container-width);

    margin:
        6rem auto 0;
}


.outline-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        2rem;

    padding:
        1.2rem 1.6rem;

    border:
        1px solid rgba(8, 10, 8, 0.5);

    font-size:
        0.58rem;

    font-weight:
        600;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

    transition:
        var(--transition-smooth);
}


.outline-button span:last-child {

    color:
        var(--color-gold);

    font-size:
        1rem;

    transition:
        transform var(--transition-fast);
}


.outline-button:hover {

    background:
        var(--color-backwater);

    color:
        var(--color-ivory);

    border-color:
        var(--color-backwater);
}


.outline-button:hover span:last-child {

    transform:
        translate(5px,
            -5px);
}


/* ========================================
   DECORATIVE NUMBER
======================================== */

.boat-background-number {

    position:
        absolute;

    left:
        -2vw;

    bottom:
        -4rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(15rem,
            30vw,
            35rem);

    line-height:
        0.7;

    color:
        rgba(46, 94, 63, 0.045);

    pointer-events:
        none;

    user-select:
        none;
}

/* ========================================
   BOAT COLLECTION
   CINEMATIC EDITORIAL EXPERIENCE
======================================== */

.backwaters-section {

    /* LOCAL BOAT COLLECTION COLORS */
    --boat-black: var(--color-black);
    --boat-black-soft: var(--color-black-soft);

    --boat-green: var(--color-green);
    --boat-green-deep: var(--color-green-deep);

    --boat-red: var(--color-red);
    --boat-red-dark: var(--color-red-dark);

    --boat-gold: var(--color-gold);
    --boat-gold-soft: var(--color-gold-soft);

    --boat-ivory: var(--color-ivory);
    --boat-ivory-muted: var(--color-ivory-muted);

    position: relative;

    height: 500vh;

    background:
        linear-gradient(135deg,
            var(--boat-black) 0%,
            var(--boat-green-deep) 55%,
            var(--boat-black) 100%);

    color: var(--boat-ivory);

    overflow: clip;
}

/* ========================================
   CINEMATIC STAGE
======================================== */

.backwaters-cinematic {

    position: sticky;

    top: 0;

    width: 100%;

    height: 100vh;

    min-height: 650px;

    overflow: hidden;

    isolation: isolate;

    background:
        var(--boat-black);
}

/* ========================================
   VISUAL
======================================== */

.backwaters-visual {

    position: absolute;

    inset: 0;

    z-index: 1;

    overflow: hidden;

    background:
        var(--boat-black);
}

/* ========================================
   IMAGE LAYERS
======================================== */

.backwaters-image {

    position: absolute;

    inset: -4%;

    width: 108%;

    height: 108%;

    overflow: hidden;

    opacity: 0;

    transform: scale(1.06);

    will-change:
        opacity,
        transform;

    transition:
        opacity 900ms cubic-bezier(.22, 1, .36, 1),
        transform 1800ms cubic-bezier(.16, 1, .3, 1);
}


.backwaters-image.current {

    opacity: 1;

    z-index: 1;
}


.backwaters-image.next {

    opacity: 0;

    z-index: 2;

}

.backwaters-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    filter:
        saturate(.84) contrast(.96);

    transform:
        scale(1.04);

    will-change:
        transform;

    transition:
        transform 7s cubic-bezier(.16, 1, .3, 1);

}

.backwaters-image.current img {
    transform: scale(1)
}

/* ========================================
   IMAGE CROSSFADE
======================================== */

.backwaters-cinematic.is-transitioning .backwaters-image.current {

    opacity: 0;

    transform:
        scale(1.025);

}

.backwaters-cinematic.is-transitioning .backwaters-image.next {

    opacity: 1;

    transform:
        scale(1);

}

.backwaters-cinematic.is-transitioning .backwaters-image.next img {

    transform:
        scale(1);

}

.backwaters-image-overlay {

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    background:

        linear-gradient(90deg,
            rgba(46, 94, 63, .90) 0%,
            rgba(46, 94, 63, .66) 28%,
            rgba(46, 94, 63, .20) 65%,
            rgba(46, 94, 63, .40) 100%),

        linear-gradient(180deg,
            rgba(23, 60, 43, .64) 0%,
            rgba(23, 60, 43, .05) 34%,
            rgba(23, 60, 43, .08) 58%,
            rgba(23, 60, 43, .84) 100%);

}


.backwaters-grain {

    position: absolute;

    inset: -50%;

    z-index: 5;

    pointer-events: none;

    opacity: .055;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.65'/%3E%3C/svg%3E");

    animation:
        backwaterGrain .35s steps(2) infinite;

}


@keyframes backwaterGrain {

    0% {
        transform:
            translate(0, 0);
    }

    25% {
        transform:
            translate(2%, -1%);
    }

    50% {
        transform:
            translate(-1%, 2%);
    }

    75% {
        transform:
            translate(1%, 1%);
    }

    100% {
        transform:
            translate(-2%, -1%);
    }

}

.backwaters-header {

    position: absolute;

    top: 7rem;

    left: 5vw;

    right: 5vw;

    z-index: 20;

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: .5rem;

    font-weight: 500;

    letter-spacing: .24em;

    text-transform: uppercase;

    color:
        rgba(247, 244, 236, .72);

}

.backwaters-header::before {

    content: "";

    position: absolute;

    left: 0;

    top: -18px;

    width: 40px;

    height: 1px;

    background:
        var(--color-gold);

}

.backwaters-content {

    position: absolute;

    left: 9vw;

    top: 50%;

    z-index: 15;

    width:
        min(850px, 72vw);

    transform:
        translateY(-50%);

    pointer-events: none;

}

.backwaters-small-label {

    margin-bottom: 1.7rem;

    font-size: .55rem;

    font-weight: 600;

    letter-spacing: .32em;

    text-transform: uppercase;

    color:
        var(--color-gold);

    opacity: .95;

}

.backwaters-title-wrap {

    display: flex;

    align-items: flex-start;

    gap: 1.5rem;

}

.backwaters-number {

    display: block;

    margin-top: .45rem;

    min-width: 38px;

    font-family:
        var(--font-display);

    font-size: 1.25rem;

    line-height: 1;

    color:
        var(--color-gold);

}

.backwaters-title {

    margin: 0;

    display: flex;

    flex-direction: column;

    font-family:
        var(--font-display);

    font-size:
        clamp(5rem, 10vw, 11rem);

    font-weight: 500;

    line-height: .76;

    letter-spacing: -.045em;

    text-transform: uppercase;

    text-shadow:
        0 15px 50px rgba(0, 0, 0, .20);

    will-change:
        opacity,
        transform;

}

.backwaters-title span,
.backwaters-title strong {

    display: block;

    font: inherit;

}

.backwaters-title strong {

    margin-left: 4.5vw;

    color:
        var(--color-sand);

}

.backwaters-title.is-exiting {

    opacity: 0;

    transform:
        translateY(-22px);

}

.backwaters-title.is-entering {

    animation:
        backwaterTitleEnter 850ms cubic-bezier(.22, 1, .36, 1) forwards;

}

@keyframes backwaterTitleEnter {

    from {

        opacity: 0;

        transform:
            translateY(35px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

.backwaters-description {

    max-width: 390px;

    margin-top: 2.3rem;

    margin-left: 4.5vw;

    font-size: .72rem;

    line-height: 1.9;

    font-weight: 300;

    color:
        rgba(247, 244, 236, .70);

    opacity: 0;

    transform:
        translateY(20px);

    transition:
        opacity 850ms 150ms cubic-bezier(.22, 1, .36, 1),

        transform 850ms 150ms cubic-bezier(.22, 1, .36, 1);

}


.backwaters-description.visible {

    opacity: 1;

    transform:
        translateY(0);

}

.backwaters-navigation {

    position: absolute;

    right: 5vw;

    top: 50%;

    z-index: 20;

    display: flex;

    flex-direction: column;

    gap: .65rem;

    transform:
        translateY(-50%);

}

.backwaters-nav-item {

    position: relative;

    display: grid;

    grid-template-columns:
        28px auto;

    align-items: center;

    gap: .75rem;

    min-width: 145px;

    padding: .55rem 0;

    border: 0;

    outline: 0;

    background: transparent;

    font-family: inherit;

    text-align: left;

    cursor: pointer;

    color:
        rgba(247, 244, 236, .38);

    transition:
        color 400ms ease,

        transform 400ms cubic-bezier(.22, 1, .36, 1);

}

.backwaters-nav-item::before {

    content: "";

    position: absolute;

    left: -14px;

    top: 50%;

    width: 2px;

    height: 0;

    background:
        var(--color-gold);

    transform:
        translateY(-50%);

    transition:
        height 400ms cubic-bezier(.22, 1, .36, 1);

}

.backwaters-nav-item span {

    font-family:
        var(--font-display);

    font-size: .85rem;

}

.backwaters-nav-item strong {

    font-size: .45rem;

    font-weight: 500;

    letter-spacing: .15em;

    white-space: nowrap;

}

.backwaters-nav-item:hover {

    color:
        rgba(247, 244, 236, .78);

    transform:
        translateX(-4px);

}

.backwaters-nav-item.active {

    color:
        var(--color-ivory);

    transform:
        translateX(-7px);

}

.backwaters-nav-item.active::before {

    height: 28px;

}

.backwaters-nav-item.active span {

    color:
        var(--color-gold);

}

.backwaters-footer {

    position: absolute;

    left: 5vw;

    right: 5vw;

    bottom: 6vh;

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 1.25rem;

    font-size: .43rem;

    font-weight: 500;

    letter-spacing: .24em;

    text-transform: uppercase;

    color:
        rgba(247, 244, 236, .42);

}


.backwaters-scroll-line {

    position: relative;

    width: 90px;

    height: 1px;

    overflow: hidden;

    background:
        rgba(247, 244, 236, .18);

}

.backwaters-scroll-line span {

    position: absolute;

    left: 0;

    top: 0;

    width: 8%;

    height: 100%;

    background:
        var(--color-gold);

    transition:
        width 200ms ease;

}

.backwaters-cinematic::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 10;

    pointer-events: none;

    background:
        radial-gradient(ellipse at center,
            transparent 35%,
            rgba(0, 0, 0, .22) 100%);

}

.backwaters-scroll-area {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

}

.backwaters-scroll-point {

    height: 20vh;

}


@media (max-width: 1000px) {

    .backwaters-content {

        left: 7vw;

        width: 74vw;

    }


    .backwaters-title {

        font-size:
            clamp(4.5rem, 10vw, 8rem);

    }


    .backwaters-navigation {

        right: 4vw;

    }

}

@media (max-width: 768px) {

    .backwaters-section {

        height: 400vh;
        min-height: 400vh;

    }


    .backwaters-cinematic {

        min-height: 600px;

    }


    .backwaters-header {

        top: 6rem;

        left: 24px;

        right: 24px;

        font-size: .42rem;

        letter-spacing: .17em;

    }


    .backwaters-section-number {

        display: none;

    }


    .backwaters-content {

        left: 24px;

        top: 47%;

        width:
            calc(100% - 48px);

        transform:
            translateY(-50%);

    }


    .backwaters-small-label {

        margin-bottom: 1.2rem;

        font-size: .43rem;

        letter-spacing: .23em;

    }


    .backwaters-title-wrap {

        gap: .7rem;

    }


    .backwaters-number {

        min-width: 22px;

        margin-top: .3rem;

        font-size: .95rem;

    }


    .backwaters-title {

        font-size:
            clamp(4rem, 16vw, 6rem);

        line-height: .82;

    }


    .backwaters-title strong {

        margin-left: 7vw;

    }


    .backwaters-description {

        max-width: 290px;

        margin-top: 1.7rem;

        margin-left: 2rem;

        font-size: .63rem;

        line-height: 1.8;

    }


    /* MOBILE NAV */

    .backwaters-navigation {

        left: 24px;

        right: 24px;

        top: auto;

        bottom: 82px;

        transform: none;

        flex-direction: row;

        justify-content: space-between;

        gap: .25rem;

    }


    .backwaters-nav-item {

        min-width: 0;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: .2rem;

        padding: .35rem 0;

        flex: 1;

    }


    .backwaters-nav-item::before {

        left: 0;

        top: auto;

        bottom: -5px;

        width: 0;

        height: 2px;

        transform: none;

    }


    .backwaters-nav-item.active {

        transform: none;

    }


    .backwaters-nav-item.active::before {

        width: 100%;

        height: 2px;

    }


    .backwaters-nav-item span {

        font-size: .7rem;

    }


    .backwaters-nav-item strong {

        display: none;

    }


    .backwaters-footer {

        left: 24px;

        right: 24px;

        bottom: 28px;

        gap: .75rem;

        font-size: .38rem;

        letter-spacing: .17em;

    }


    .backwaters-footer>span:first-child {

        display: none;

    }


    .backwaters-scroll-line {

        flex: 1;

    }


    .backwaters-footer>span:last-child {

        white-space: nowrap;

    }


    /*
       MOBILE IMAGE PRESENTATION
       --------------------------
       Do not zoom wide boat photographs to fill a tall phone screen.
       The full source photograph stays visible with a soft version of
       the same photograph behind it.
    */

    .backwaters-image {

        inset: 0;

        width: 100%;

        height: 100%;

        transform: none !important;

        background: #0b1713;

        overflow: hidden;

    }


    .backwaters-image::before {

        content: "";

        position: absolute;

        inset: -8%;

        z-index: 0;

        background-image: var(--mobile-boat-bg, none);

        background-size: cover;

        background-position: center;

        background-repeat: no-repeat;

        filter: blur(22px) brightness(.52) saturate(.82);

        transform: scale(1.08);

        opacity: .95;

    }


    .backwaters-image img {

        position: relative;

        z-index: 1;

        width: 100%;

        height: 100%;

        object-fit: contain;

        object-position: center center;

        transform: none !important;

        filter: saturate(.88) contrast(.97);

    }


    .backwaters-image-overlay {

        background:

            linear-gradient(180deg,
                rgba(46, 94, 63, .72) 0%,
                rgba(46, 94, 63, .18) 35%,
                rgba(46, 94, 63, .38) 58%,
                rgba(46, 94, 63, .86) 100%);

    }

}

@media (prefers-reduced-motion: reduce) {

    .backwaters-image,
    .backwaters-image img,
    .backwaters-title,
    .backwaters-description,
    .backwaters-scroll-line span {

        animation: none !important;

        transition: none !important;

    }

}

/* ========================================
   JOURNEYS SECTION
======================================== */

.journeys-section {

    position: relative;

    padding:
        14vh 7vw;

    background:
        var(--color-ivory);

    color:
        var(--color-charcoal);

    overflow: hidden;
}


/* ========================================
   HEADER
======================================== */

.journeys-header {

    max-width:
        var(--container-width);

    margin:
        0 auto 7rem;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        5rem;
}


.journeys-header h2 {

    font-family:
        var(--font-display);

    font-size:
        clamp(4.5rem,
            8vw,
            9rem);

    font-weight:
        500;

    line-height:
        0.75;

    letter-spacing:
        -0.035em;
}


.journeys-header h2 span {

    display:
        block;

    margin-left:
        5vw;

    color:
        var(--color-teal);
}


.journeys-intro {

    width:
        310px;

    padding-bottom:
        0.4rem;

    font-size:
        0.72rem;

    line-height:
        1.9;

    color:
        rgba(8, 10, 8, 0.6);
}


/* ========================================
   JOURNEY LIST
======================================== */

.journeys-list {

    max-width:
        var(--container-width);

    margin:
        0 auto;

    border-top:
        1px solid rgba(8, 10, 8, 0.2);
}


/* ========================================
   CARD
======================================== */

.journey-card {

    position:
        relative;

    padding:
        2.5rem 0;

    border-bottom:
        1px solid rgba(8, 10, 8, 0.2);

    overflow:
        hidden;

    transition:
        padding var(--transition-smooth);
}


.journey-card::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        0;

    background:
        var(--color-backwater);

    transition:
        height 700ms cubic-bezier(.22, 1, .36, 1);

    z-index:
        0;
}


.journey-card:hover {

    padding-left:
        2rem;

    padding-right:
        2rem;

    color:
        var(--color-ivory);
}


.journey-card:hover::before {

    height:
        100%;
}


/* ========================================
   CARD TOP
======================================== */

.journey-card-top {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        2rem;
}


.journey-number {

    font-family:
        var(--font-display);

    font-size:
        1.2rem;

    color:
        var(--color-gold);
}


.journey-time {

    font-size:
        0.5rem;

    letter-spacing:
        0.25em;

    opacity:
        0.55;
}


/* ========================================
   MAIN CONTENT
======================================== */

.journey-card-main {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1.2fr 0.8fr 50px;

    gap:
        5vw;

    align-items:
        end;
}


/* ========================================
   TITLE
======================================== */

.journey-title h3 {

    font-family:
        var(--font-display);

    font-size:
        clamp(3rem,
            5vw,
            5.5rem);

    font-weight:
        500;

    line-height:
        0.8;

    letter-spacing:
        -0.025em;
}


.journey-title h3 span {

    display:
        block;

    margin-left:
        3vw;
}


.journey-title p {

    max-width:
        390px;

    margin-top:
        1.8rem;

    font-size:
        0.68rem;

    line-height:
        1.8;

    color:
        rgba(8, 10, 8, 0.6);

    transition:
        color var(--transition-fast);
}


.journey-card:hover .journey-title p {

    color:
        rgba(247, 244, 236, 0.65);
}


/* ========================================
   DETAILS
======================================== */

.journey-details {

    display:
        flex;

    flex-direction:
        column;

    gap:
        1.5rem;
}


.journey-details div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.35rem;
}


.journey-details span {

    font-size:
        0.45rem;

    letter-spacing:
        0.2em;

    opacity:
        0.5;
}


.journey-details strong {

    font-family:
        var(--font-display);

    font-size:
        1.25rem;

    font-weight:
        500;
}


/* ========================================
   ARROW
======================================== */

.journey-arrow {

    width:
        45px;

    height:
        45px;

    border:
        1px solid rgba(8, 10, 8, 0.3);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        1rem;

    color:
        var(--color-gold);

    transition:
        var(--transition-fast);
}


.journey-card:hover .journey-arrow {

    border-color:
        rgba(247, 244, 236, 0.4);

    color:
        var(--color-gold);

    transform:
        translate(5px,
            -5px);
}


/* ========================================
   FOOTER
======================================== */

.journeys-footer {

    max-width:
        var(--container-width);

    margin:
        5rem auto 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.journeys-footer p {

    font-family:
        var(--font-display);

    font-size:
        1.6rem;
}


.journeys-footer a {

    display:
        flex;

    align-items:
        center;

    gap:
        1rem;

    font-size:
        0.58rem;

    font-weight:
        600;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}


.journeys-footer a span {

    color:
        var(--color-gold);

    font-size:
        1rem;

    transition:
        transform var(--transition-fast);
}


.journeys-footer a:hover span {

    transform:
        translate(4px,
            -4px);
}


/* ========================================
   GUEST EXPERIENCES
======================================== */

.reviews-section {
    position: relative;
    background: var(--color-sand);
    color: var(--color-charcoal);
    padding: 9rem 6vw 6rem;
    overflow: hidden;
}


/* HEADER */

.reviews-header {
    max-width: var(--container-width);
    margin: 0 auto 5rem;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 5rem;
    align-items: end;
}

.reviews-header h2 {
    margin-top: 1rem;
    font-family: var(--font-display);
    font-size: clamp(4rem, 7vw, 8rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.04em;
}

.reviews-header h2 span {
    display: block;
    font-style: italic;
    margin-left: 12%;
}

.reviews-intro {
    max-width: 380px;
    font-size: 0.9rem;
    line-height: 1.9;
    color: rgba(8, 10, 8, 0.65);
    padding-bottom: 0.4rem;
}


/* REVIEW STAGE */

.reviews-stage {
    position: relative;
    max-width: var(--container-width);
    min-height: 560px;
    margin: 0 auto;
}


.review-card {
    position: absolute;
    inset: 0;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 6vw;

    opacity: 0;
    visibility: hidden;
    transform: translateY(35px);

    transition:
        opacity 800ms cubic-bezier(.22, 1, .36, 1),
        transform 1000ms cubic-bezier(.22, 1, .36, 1),
        visibility 800ms;

    pointer-events: none;
}

.review-card.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}


/* CONTENT */

.review-content {
    align-self: center;
    position: relative;
    z-index: 2;
    padding-left: 3rem;
}

.review-label {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    font-weight: 600;
    margin-bottom: 2.5rem;
    color: rgba(8, 10, 8, 0.55);
}

.review-content blockquote {
    max-width: 600px;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4vw, 5rem);
    line-height: 0.98;
    font-weight: 400;
    letter-spacing: -0.025em;
}

.review-divider {
    width: 70px;
    height: 1px;
    background: var(--color-gold);
    margin: 3rem 0 1.5rem;
}

.review-author {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.review-author-name {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.review-author-location {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: rgba(8, 10, 8, 0.55);
}


/* IMAGE */

.review-image-wrap {
    height: 560px;
    overflow: hidden;
    position: relative;
}

.review-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(46, 94, 63, 0.08),
            transparent 45%);
    pointer-events: none;
}

.review-image {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transform: scale(1.08);

    transition:
        transform 1.8s cubic-bezier(.22, 1, .36, 1);
}

.review-card.active .review-image {
    transform: scale(1);
}


/* QUOTE MARK */

.reviews-quote-mark {
    position: absolute;
    left: 1vw;
    top: 18rem;

    font-family: var(--font-display);
    font-size: 15rem;
    line-height: 1;

    color: rgba(216, 169, 40, 0.3);

    pointer-events: none;
    z-index: 1;
}


/* CONTROLS */

.reviews-controls {
    max-width: var(--container-width);
    margin: 4rem auto 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


.review-arrow {
    width: 52px;
    height: 52px;

    border: 1px solid rgba(8, 10, 8, 0.25);
    background: transparent;

    color: var(--color-charcoal);

    font-size: 1rem;

    cursor: pointer;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.review-arrow:hover {
    background: var(--color-backwater);
    color: var(--color-ivory);
    border-color: var(--color-backwater);
}


/* DOTS */

.review-dots {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.review-dot {
    width: 7px;
    height: 7px;

    padding: 0;
    border: 0;
    border-radius: 50%;

    background: rgba(8, 10, 8, 0.25);

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast);
}

.review-dot.active {
    background: var(--color-gold);
    transform: scale(1.5);
}


/* BOTTOM LINE */

.reviews-bottom {
    max-width: var(--container-width);
    margin: 5rem auto 0;

    display: flex;
    align-items: center;
    gap: 1.5rem;

    font-size: 0.6rem;
    letter-spacing: 0.2em;
    font-weight: 600;

    color: rgba(8, 10, 8, 0.45);
}

.reviews-bottom-line {
    height: 1px;
    flex: 1;
    background: rgba(8, 10, 8, 0.15);
}

/* ========================================
   BOOKING / ENQUIRY
======================================== */

.booking-section {
    position: relative;

    background: var(--color-backwater);
    color: var(--color-ivory);

    padding: 10rem 6vw 5rem;

    overflow: hidden;
}


/* ========================================
   MAIN LAYOUT
======================================== */

.booking-inner {
    max-width: var(--container-width);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    gap: 8vw;

    align-items: start;
}


/* ========================================
   INTRO
======================================== */

.booking-intro {
    position: sticky;
    top: 150px;
}

.booking-intro h2 {
    margin-top: 1rem;

    font-family: var(--font-display);

    font-size: clamp(4rem, 7vw, 8rem);

    font-weight: 400;

    line-height: 0.82;

    letter-spacing: -0.04em;
}

.booking-intro h2 span {
    display: block;

    margin-left: 12%;

    font-style: italic;
}

.booking-description {
    max-width: 390px;

    margin-top: 3rem;

    font-size: 0.9rem;

    line-height: 1.9;

    color: rgba(247, 244, 236, 0.68);
}

.booking-note {
    display: flex;

    align-items: center;

    gap: 1rem;

    margin-top: 4rem;
}

.booking-note-line {
    width: 50px;

    height: 1px;

    background: var(--color-gold);
}

.booking-note p {
    font-size: 0.6rem;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: rgba(247, 244, 236, 0.5);
}


/* ========================================
   FORM WRAPPER
======================================== */

.booking-form-wrap {
    position: relative;

    background: rgba(255, 255, 255, 0.055);

    border: 1px solid rgba(247, 244, 236, 0.16);

    padding: clamp(2rem, 4vw, 4rem);
}


/* ========================================
   FORM
======================================== */

.booking-form {
    width: 100%;
}

.form-heading {
    display: flex;

    align-items: center;

    gap: 1rem;

    padding-bottom: 1.5rem;

    border-bottom: 1px solid rgba(247, 244, 236, 0.15);

    margin-bottom: 2rem;
}

.form-heading span {
    font-family: var(--font-display);

    font-size: 1.6rem;

    color: var(--color-gold);
}

.form-heading p {
    font-size: 0.65rem;

    font-weight: 600;

    letter-spacing: 0.2em;
}

.form-heading-space {
    margin-top: 4rem;
}


/* ========================================
   FORM FIELDS
======================================== */

.form-field {
    margin-bottom: 2rem;
}

.form-field label {
    display: block;

    margin-bottom: 0.7rem;

    font-size: 0.6rem;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color: rgba(247, 244, 236, 0.55);
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;

    border: none;

    border-bottom: 1px solid rgba(247, 244, 236, 0.25);

    background: transparent;

    color: var(--color-ivory);

    padding: 0.8rem 0;

    outline: none;

    font-family: var(--font-body);

    font-size: 0.85rem;

    border-radius: 0;

    transition:
        border-color var(--transition-fast);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--color-gold);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: rgba(247, 244, 236, 0.3);
}


/* SELECT */

.form-field select {
    cursor: pointer;
}

.form-field select option {
    background: var(--color-backwater);

    color: var(--color-ivory);
}


/* TEXTAREA */

.form-field textarea {
    resize: vertical;

    min-height: 100px;

    line-height: 1.7;
}


/* ========================================
   FORM ROW
======================================== */

.form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 2rem;
}


/* ========================================
   SUBMIT BUTTON
======================================== */

.booking-submit {
    width: 100%;

    margin-top: 1rem;

    padding: 1.3rem 1.5rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 1px solid var(--color-gold);

    background: var(--color-gold);

    color: var(--color-charcoal);

    cursor: pointer;

    font-family: var(--font-body);

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.booking-submit:hover {
    background: transparent;

    color: var(--color-ivory);

    transform: translateY(-2px);
}

.booking-submit-arrow {
    font-size: 1.1rem;

    transition: transform var(--transition-fast);
}

.booking-submit:hover .booking-submit-arrow {
    transform: translate(3px, -3px);
}

.booking-form-note {
    margin-top: 1.5rem;

    font-size: 0.6rem;

    line-height: 1.7;

    color: rgba(247, 244, 236, 0.4);

    text-align: center;
}


/* ========================================
   SUCCESS STATE
======================================== */

.booking-success {
    display: none;

    min-height: 500px;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    animation: bookingSuccessReveal 800ms cubic-bezier(.22, 1, .36, 1);
}

.booking-success.active {
    display: flex;
}

.success-number {
    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--color-gold);

    border-radius: 50%;

    color: var(--color-gold);

    font-size: 1.3rem;

    margin-bottom: 2rem;
}

.booking-success h3 {
    max-width: 600px;

    margin-top: 1rem;

    font-family: var(--font-display);

    font-size: clamp(3rem, 5vw, 5rem);

    font-weight: 400;

    line-height: 0.9;
}

.booking-success h3 span {
    display: block;

    font-style: italic;

    margin-top: 0.3rem;
}

.booking-success>p:not(.section-label) {
    max-width: 400px;

    margin-top: 2rem;

    font-size: 0.8rem;

    line-height: 1.8;

    color: rgba(247, 244, 236, 0.6);
}

.booking-reset {
    margin-top: 2rem;

    background: transparent;

    border: none;

    border-bottom: 1px solid var(--color-gold);

    color: var(--color-gold);

    padding-bottom: 0.4rem;

    font-size: 0.65rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    cursor: pointer;
}


/* ========================================
   BOTTOM
======================================== */

.booking-footer {
    max-width: var(--container-width);

    margin: 7rem auto 0;

    display: flex;

    align-items: center;

    gap: 1.5rem;

    font-size: 0.6rem;

    letter-spacing: 0.2em;

    font-weight: 600;

    color: rgba(247, 244, 236, 0.4);
}

.booking-footer-line {
    height: 1px;

    flex: 1;

    background: rgba(247, 244, 236, 0.15);
}


/* ========================================
   SUCCESS ANIMATION
======================================== */

@keyframes bookingSuccessReveal {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* ========================================
   LOCATION & CONTACT
======================================== */

.contact-section {
    position: relative;

    background: var(--color-ivory);
    color: var(--color-charcoal);

    padding: 10rem 6vw 5rem;

    overflow: hidden;
}


/* ========================================
   MAIN
======================================== */

.contact-inner {
    max-width: var(--container-width);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 8vw;
}


/* ========================================
   INTRO
======================================== */

.contact-intro {
    padding-top: 2rem;
}

.contact-intro h2 {
    margin-top: 1rem;

    font-family: var(--font-display);

    font-size: clamp(4rem, 7vw, 8rem);

    font-weight: 400;

    line-height: 0.82;

    letter-spacing: -0.04em;
}

.contact-intro h2 span {
    display: block;

    margin-left: 12%;

    font-style: italic;
}

.contact-description {
    max-width: 350px;

    margin-top: 3rem;

    font-size: 0.85rem;

    line-height: 1.9;

    color: var(--color-muted);
}


/* ========================================
   LOCATION
======================================== */

.contact-location {
    display: flex;

    align-items: flex-start;

    gap: 1.5rem;

    margin-top: 4rem;
}

.contact-location-number {
    font-family: var(--font-display);

    font-size: 1.6rem;

    color: var(--color-gold);
}

.contact-location p {
    margin-bottom: 0.4rem;

    font-size: 0.6rem;

    font-weight: 600;

    letter-spacing: 0.18em;

    color: var(--color-muted);
}

.contact-location strong {
    font-size: 0.85rem;

    font-weight: 500;
}


/* ========================================
   MAP
======================================== */

.contact-map {
    position: relative;

    height: 380px;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            rgba(46, 94, 63, 0.15),
            rgba(216, 212, 201, 0.35));

    border: 1px solid rgba(8, 10, 8, 0.12);
}

.google-map-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    z-index: 1;
    filter: saturate(0.88) contrast(0.98);
}


/* Decorative map grid */

.map-grid {
    display: none;
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(rgba(8, 10, 8, 0.07) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(8, 10, 8, 0.07) 1px,
            transparent 1px);

    background-size: 55px 55px;

    transform: rotate(-8deg) scale(1.3);
}


/* Map overlay */

.map-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;
    pointer-events: none;

    display: flex;

    align-items: center;

    justify-content: center;
}

.map-pin {
    position: absolute;

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--color-gold);

    border-radius: 50%;

    color: var(--color-gold);

    font-family: var(--font-display);

    font-size: 1.5rem;

    background: rgba(247, 244, 236, 0.75);

    backdrop-filter: blur(5px);

    animation: mapPulse 2.5s infinite;
}

.map-label {
    position: absolute;

    left: 2rem;

    bottom: 2rem;

    display: flex;

    flex-direction: column;

    gap: 0.4rem;
}

.map-label span {
    font-size: 0.65rem;

    font-weight: 700;

    letter-spacing: 0.14em;
}

.map-label small {
    font-size: 0.55rem;

    letter-spacing: 0.15em;

    color: var(--color-muted);
}


/* ========================================
   CONTACT LIST
======================================== */

.contact-list {
    margin-top: 3rem;
}

.contact-item {
    display: grid;

    /* ICON | NUMBER | CONTENT | ARROW */
    grid-template-columns: 45px 45px minmax(0, 1fr) 30px;

    align-items: center;

    gap: 1rem;

    width: 100%;

    padding: 1.5rem 0;

    border-top: 1px solid rgba(8, 10, 8, 0.15);

    transition:
        padding var(--transition-smooth),
        background var(--transition-smooth);
}

.contact-item:last-child {
    border-bottom: 1px solid rgba(8, 10, 8, 0.15);
}

.contact-item:hover {
    padding-left: 1rem;
    padding-right: 1rem;

    background: var(--color-sand);
}


/* ========================================
   ICON
======================================== */

.contact-item-icon {
    width: 25px;
    height: 25px;

    justify-self: center;

    color: var(--color-gold);

    flex-shrink: 0;

    transition:
        transform 350ms ease,
        color 350ms ease;
}

.contact-item:hover .contact-item-icon {
    transform: translateY(-2px);
    color: var(--color-red);
}


/* ========================================
   NUMBER
======================================== */

.contact-item-number {
    font-family: var(--font-display);

    font-size: 1.2rem;

    color: var(--color-gold);

    white-space: nowrap;
}


/* ========================================
   CONTENT
======================================== */

.contact-item-content {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 0.35rem;
}

.contact-item-content span {
    font-size: 0.55rem;

    letter-spacing: 0.16em;

    color: var(--color-muted);
}

.contact-item-content strong {
    display: block;

    max-width: 100%;

    font-size: 0.8rem;

    font-weight: 500;

    line-height: 1.4;

    overflow-wrap: anywhere;

    word-break: break-word;
}


/* ========================================
   ARROW
======================================== */

.contact-arrow {
    justify-self: end;

    font-size: 1rem;

    color: var(--color-charcoal);

    transition:
        transform var(--transition-fast),
        color var(--transition-fast);
}

.contact-item:hover .contact-arrow {
    color: var(--color-red);

    transform: translate(3px, -3px);
}

/* ========================================
   CONTACT — RESPONSIVE
======================================== */

@media (max-width: 900px) {

    .contact-item {
        grid-template-columns:
            35px 40px minmax(0, 1fr) 25px;

        gap: 0.75rem;
    }

    .contact-item-content strong {
        font-size: 0.75rem;
    }

}


@media (max-width: 600px) {

    .contact-item {
        grid-template-columns:
            30px 35px minmax(0, 1fr) 22px;

        gap: 0.6rem;

        padding: 1.25rem 0;
    }

    .contact-item-icon {
        width: 22px;
        height: 22px;
    }

    .contact-item-number {
        font-size: 1rem;
    }

    .contact-item-content span {
        font-size: 0.48rem;
    }

    .contact-item-content strong {
        font-size: 0.68rem;

        overflow-wrap: anywhere;
    }

    .contact-arrow {
        font-size: 0.9rem;
    }

}


/* ========================================
   DIRECTIONS
======================================== */

.directions-link {
    display: inline-flex;

    align-items: center;

    gap: 1.5rem;

    margin-top: 2rem;

    padding-bottom: 0.5rem;

    border-bottom: 1px solid var(--color-gold);

    font-size: 0.65rem;

    font-weight: 600;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.directions-link span:last-child {
    font-size: 1rem;

    transition: transform var(--transition-fast);
}

.directions-link:hover span:last-child {
    transform: translate(3px, -3px);
}


/* ========================================
   BOTTOM
======================================== */

.contact-bottom {
    max-width: var(--container-width);

    margin: 7rem auto 0;

    display: flex;

    align-items: center;

    gap: 1.5rem;

    font-size: 0.6rem;

    letter-spacing: 0.2em;

    font-weight: 600;

    color: var(--color-muted);
}

.contact-bottom-line {
    flex: 1;

    height: 1px;

    background: rgba(8, 10, 8, 0.15);
}


/* ========================================
   MAP ANIMATION
======================================== */

@keyframes mapPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(216, 169, 40, 0.3);
    }

    50% {
        box-shadow: 0 0 0 15px rgba(216, 169, 40, 0);
    }

}

/* ========================================
   PREMIUM FOOTER
======================================== */

.site-footer {
    position: relative;

    background: var(--color-charcoal);

    color: var(--color-ivory);

    padding: 9rem 6vw 2rem;

    overflow: hidden;
}


/* ========================================
   CLOSING STATEMENT
======================================== */

.footer-opening {
    max-width: var(--container-width);

    margin: 0 auto;

    padding-bottom: 9rem;

    text-align: center;
}

.footer-opening .section-label {
    color: rgba(247, 244, 236, 0.45);
}

.footer-opening h2 {
    margin-top: 1.5rem;

    font-family: var(--font-display);

    font-size: clamp(4.5rem, 10vw, 11rem);

    font-weight: 400;

    line-height: 0.78;

    letter-spacing: -0.05em;
}

.footer-opening h2 span {
    display: block;

    font-style: italic;

    margin-left: 12%;
}


/* ========================================
   FOOTER CTA
======================================== */

.footer-book-button {
    display: inline-flex;

    align-items: center;

    gap: 2rem;

    margin-top: 4rem;

    padding: 1rem 0;

    border-bottom: 1px solid var(--color-gold);

    font-size: 0.7rem;

    font-weight: 600;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    transition:
        gap var(--transition-smooth),
        color var(--transition-fast);
}

.footer-book-button span:last-child {
    font-size: 1.1rem;

    transition: transform var(--transition-fast);
}

.footer-book-button:hover {
    gap: 2.8rem;

    color: var(--color-gold);
}

.footer-book-button:hover span:last-child {
    transform: translate(4px, -4px);
}


/* ========================================
   MAIN FOOTER
======================================== */

.footer-main {
    max-width: var(--container-width);

    margin: 0 auto;

    padding: 5rem 0;

    border-top: 1px solid rgba(247, 244, 236, 0.12);

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: 5rem;
}


/* ========================================
   BRAND
======================================== */

.footer-logo {
    display: inline-flex;

    flex-direction: column;

    gap: 0.15rem;
}

.footer-logo span {
    font-family: var(--font-display);

    font-size: 2rem;

    letter-spacing: 0.05em;
}

.footer-logo strong {
    font-size: 0.55rem;

    font-weight: 600;

    letter-spacing: 0.3em;
}

.footer-brand>p {
    max-width: 300px;

    margin-top: 2rem;

    font-size: 0.75rem;

    line-height: 1.8;

    color: rgba(247, 244, 236, 0.45);
}


/* ========================================
   FOOTER COLUMNS
======================================== */

.footer-column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 0.9rem;
}

.footer-column-title {
    margin-bottom: 1rem;

    font-size: 0.55rem;

    font-weight: 700;

    letter-spacing: 0.2em;

    color: var(--color-gold);
}

.footer-column a {
    font-size: 0.7rem;

    color: rgba(247, 244, 236, 0.6);

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.footer-column a:hover {
    color: var(--color-ivory);

    transform: translateX(4px);
}


/* ========================================
   LOCATION
======================================== */

.footer-location p {
    font-family: var(--font-display);

    font-size: 1.25rem;

    line-height: 1.2;

    color: rgba(247, 244, 236, 0.8);
}

.footer-location span {
    margin-top: 1rem;

    font-size: 0.5rem;

    letter-spacing: 0.15em;

    color: rgba(247, 244, 236, 0.3);
}


/* ========================================
   FOOTER BOTTOM
======================================== */

.footer-bottom {
    max-width: var(--container-width);

    margin: 0 auto;

    padding-top: 2rem;

    border-top: 1px solid rgba(247, 244, 236, 0.12);

    display: grid;

    grid-template-columns: 1fr 1.5fr 1fr;

    align-items: center;

    gap: 2rem;

    font-size: 0.5rem;

    letter-spacing: 0.15em;

    color: rgba(247, 244, 236, 0.3);
}

.footer-bottom-center {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    white-space: nowrap;
}

.footer-line {
    width: 30px;

    height: 1px;

    background: rgba(247, 244, 236, 0.2);
}

.back-to-top {
    justify-self: end;

    color: rgba(247, 244, 236, 0.45);

    transition: color var(--transition-fast);
}

.back-to-top:hover {
    color: var(--color-gold);
}

/* ========================================
   HEADER SCROLL BEHAVIOUR
======================================== */

.site-header {
    transition:
        background 500ms cubic-bezier(.22, 1, .36, 1),
        color 500ms cubic-bezier(.22, 1, .36, 1),
        padding 500ms cubic-bezier(.22, 1, .36, 1),
        transform 500ms cubic-bezier(.22, 1, .36, 1);
}


/* Scrolled header */

.site-header.scrolled {
    background: rgba(247, 244, 236, 0.94);

    color: var(--color-charcoal);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.08);
}


/* Smaller header after scrolling */

.site-header.scrolled {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}


/* ========================================
   NAV LINKS
======================================== */

.desktop-nav .nav-link {
    position: relative;
}

.desktop-nav .nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -7px;

    height: 1px;

    background: currentColor;

    transform: scaleX(0);

    transform-origin: right;

    transition:
        transform 400ms cubic-bezier(.22, 1, .36, 1);
}

.desktop-nav .nav-link:hover::after,
.desktop-nav .nav-link.active::after {
    transform: scaleX(1);

    transform-origin: left;
}


/* ========================================
   HEADER BOOKING BUTTON
======================================== */

.site-header.scrolled .nav-book {
    background: var(--color-backwater);

    color: var(--color-ivory);
}


/* ========================================
   SECTION OFFSET
======================================== */

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

/* ========================================
   MOBILE MENU — POLISHED
======================================== */

.mobile-menu-inner {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    justify-content: center;
}

.mobile-menu-label {
    margin-bottom: 3rem;

    font-size: 0.55rem;

    letter-spacing: 0.2em;

    color: rgba(247, 244, 236, 0.4);
}


.mobile-nav {
    display: flex;
    flex-direction: column;

    gap: 1.2rem;
}

.mobile-nav a {
    display: flex;

    align-items: baseline;

    gap: 1.2rem;

    font-family: var(--font-display);

    font-size: clamp(2.5rem, 10vw, 4rem);

    line-height: 0.9;

    transition:
        transform var(--transition-fast),
        color var(--transition-fast);
}

.mobile-nav a span {
    font-family: var(--font-body);

    font-size: 0.5rem;

    letter-spacing: 0.1em;

    color: var(--color-gold);
}

.mobile-nav a:hover {
    transform: translateX(8px);

    color: var(--color-gold);
}


.mobile-book-button {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 4rem;

    padding: 1rem 0;

    border-bottom: 1px solid var(--color-gold);

    font-size: 0.65rem;

    font-weight: 600;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}

.mobile-book-button span {
    font-size: 1rem;
}

/* =========================================================
   KEERTHI SHIKARA
   BOAT COLLECTION — FINAL COLOR OVERRIDE

   BLACK × DEEP GREEN × RED × GOLD × IVORY
========================================================= */

.backwaters-section {

    --boat-black: var(--color-black);
    --boat-black-soft: var(--color-black-soft);

    --boat-green: #2E5E3F;
    --boat-green-deep: var(--color-green-deep);

    --boat-red: var(--color-red);
    --boat-red-dark: var(--color-red-dark);

    --boat-gold: var(--color-gold);
    --boat-gold-soft: var(--color-gold-bright);

    --boat-ivory: var(--color-ivory);
    --boat-white: var(--color-white);
    --boat-ivory-muted: var(--color-ivory-muted);

    background:
        linear-gradient(135deg,
            var(--boat-black) 0%,
            var(--boat-green-deep) 50%,
            var(--boat-black) 100%);

    color: var(--boat-ivory);
}


/* =========================================================
   MAIN BACKGROUND
========================================================= */

.backwaters-cinematic,
.backwaters-visual {

    background: var(--boat-black);
}


/* =========================================================
   IMAGE OVERLAY
   THIS IS THE MOST IMPORTANT CHANGE
========================================================= */

.backwaters-image-overlay {

    background:

        /* LEFT — BLACK */

        linear-gradient(90deg,
            rgba(8, 10, 8, 0.94) 0%,
            rgba(8, 10, 8, 0.72) 22%,

            /* GREEN */

            rgba(9, 40, 32, 0.42) 48%,

            /* NATURAL IMAGE */

            rgba(9, 40, 32, 0.10) 68%,

            /* BLACK */

            rgba(8, 10, 8, 0.55) 100%),

        /* TOP / BOTTOM CINEMATIC DEPTH */

        linear-gradient(180deg,
            rgba(8, 10, 8, 0.72) 0%,
            rgba(8, 10, 8, 0.05) 35%,
            rgba(8, 10, 8, 0.12) 60%,
            rgba(8, 10, 8, 0.94) 100%),

        /* SUBTLE RED */

        radial-gradient(circle at 82% 48%,
            rgba(155, 41, 41, 0.18),
            transparent 36%);
}


/* =========================================================
   HEADER
========================================================= */

.backwaters-header {

    color: var(--boat-ivory-muted);
}


.backwaters-header::before {

    background: var(--boat-red);
}


.backwaters-brand {

    color: var(--boat-ivory);
}


.backwaters-section-number {

    color: var(--boat-gold);
}


/* =========================================================
   SMALL LABEL
========================================================= */

.backwaters-small-label {

    color: var(--boat-gold);
}


/* =========================================================
   CHAPTER NUMBER
========================================================= */

.backwaters-number {

    color: var(--boat-red);
}


/* =========================================================
   MAIN TITLE
========================================================= */

.backwaters-title {

    color: var(--boat-white);
}


.backwaters-title strong {

    color: var(--boat-gold-soft);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.backwaters-description {

    color: var(--boat-ivory-muted);
}


/* =========================================================
   NAVIGATION
========================================================= */

.backwaters-nav-item {

    color: rgba(247, 244, 236, 0.40);
}


.backwaters-nav-item::before {

    background: var(--boat-red);
}


.backwaters-nav-item span {

    color: var(--boat-gold);
}


.backwaters-nav-item:hover {

    color: var(--boat-white);
}


.backwaters-nav-item.active {

    color: var(--boat-white);
}


.backwaters-nav-item.active span {

    color: var(--boat-gold-soft);
}


/* =========================================================
   FOOTER
========================================================= */

.backwaters-footer {

    color: rgba(247, 244, 236, 0.48);
}


.backwaters-scroll-line {

    background: rgba(247, 244, 236, 0.20);
}


.backwaters-scroll-line span {

    background: var(--boat-gold);
}


/* =========================================================
   CINEMATIC VIGNETTE
========================================================= */

.backwaters-cinematic::after {

    background:
        radial-gradient(ellipse at center,
            transparent 30%,
            rgba(0, 0, 0, 0.42) 100%);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .backwaters-image-overlay {

        background:

            /* BLACK */

            linear-gradient(180deg,
                rgba(8, 10, 8, 0.82) 0%,

                /* GREEN */

                rgba(9, 40, 32, 0.22) 32%,

                rgba(9, 40, 32, 0.34) 56%,

                /* BLACK */

                rgba(8, 10, 8, 0.94) 100%),

            /* RED ATMOSPHERE */

            radial-gradient(circle at 78% 48%,
                rgba(155, 41, 41, 0.15),
                transparent 42%);
    }


    .backwaters-header::before {

        background: var(--boat-red);
    }


    .backwaters-number {

        color: var(--boat-red);
    }


    .backwaters-nav-item.active::before {

        background: var(--boat-red);
    }
}

/* =========================================================
   KEERTHI SHIKARA — GLOBAL BOAT PALETTE REINFORCEMENT
   BLACK × DEEP GREEN × RED × GOLD × IVORY
   COLOR ONLY — NO LAYOUT CHANGES
========================================================= */

:root {
    --color-black: #080A08;
    --color-black-soft: #111411;
    --color-green: #2E5E3F;
    --color-green-deep: #173C2B;
    --color-red: #C72C1C;
    --color-red-dark: #8E1E16;
    --color-red-soft: #E04A2A;
    --color-gold: #D8A928;
    --color-gold-bright: #F0C94A;
    --color-gold-soft: #E4BD45;
    --color-ivory: #F6F1E5;
    --color-white: #FFFDF8;
    --color-ivory-muted: #D8D1C2;

    --color-backwater: var(--color-green);
    --color-teal: var(--color-red);
    --color-sand: #F1E9D8;
    --color-charcoal: var(--color-black);
    --color-muted: #777A72;
    --color-green-soft: var(--color-green);
}

/* Light sections */
.intro-section,
.boat-section,
.reviews-section {
    background: var(--color-sand);
    color: var(--color-black);
}

/* Green sections */
.experience-section,
.booking-section {
    background: var(--color-green-deep);
}

/* White/ivory section */
.journeys-section,
.contact-section {
    background: var(--color-ivory);
    color: var(--color-black);
}

/* Black luxury footer */
.site-footer {
    background: var(--color-black);
    color: var(--color-ivory);
}

/* Red is the secondary boat accent across the page */
.section-label,
.boat-label,
.boat-story-label {
    color: var(--color-red);
}

.desktop-nav a::after,
.intro-image-label span:first-child,
.text-link-arrow,
.experience-number,
.boat-spec-number,
.journey-number,
.form-heading span,
.footer-column-title,
.location-dot,
.contact-location-number,
.contact-item-number {
    color: var(--color-gold);
}

.intro-content h2 span:nth-child(3),
.boat-header h2 span,
.boat-story h3 span:last-child,
.journeys-header h2 span {
    color: var(--color-red);
}

/* Global selection / progress accents */
::selection {
    background: var(--color-gold);
    color: var(--color-black);
}


/* =========================================================
   KEERTHI SHIKARA — BOAT PHOTO COLOR REINFORCEMENT
   COLOR ONLY — NO LAYOUT CHANGES
========================================================= */
:root {
    --boat-black: #0A0A09;
    --boat-green: #2E5E3F;
    --boat-green-deep: #173C2B;
    --boat-red: #C72C1C;
    --boat-red-dark: #8E1E16;
    --boat-gold: #D8A928;
    --boat-gold-bright: #F0C94A;
    --boat-ivory: #F6F1E5;
    --boat-white: #FFFDF8;
}

/* Existing section families */
.section--intro,
.section--boats,
.section--reviews,
.section--light {
    background-color: var(--boat-ivory);
    color: var(--boat-black);
}

.section--experience,
.section--booking,
.section--green {
    background-color: var(--boat-green-deep);
    color: var(--boat-ivory);
}

.section--journey,
.section--contact,
.section--white {
    background-color: var(--boat-white);
    color: var(--boat-black);
}

.site-header,
.navbar,
.site-footer,
.footer {
    background-color: var(--boat-black);
    color: var(--boat-ivory);
}

.section-label,
.boat-label,
.boat-story-label {
    color: var(--boat-red) !important;
}

.gold,
.gold-text,
.text-gold,
.price,
.amount,
.highlight-gold {
    color: var(--boat-gold) !important;
}

.btn-primary,
.button-primary,
.cta-primary {
    background-color: var(--boat-red) !important;
    border-color: var(--boat-red) !important;
    color: var(--boat-white) !important;
}

.btn-primary:hover,
.button-primary:hover,
.cta-primary:hover {
    background-color: var(--boat-red-dark) !important;
    border-color: var(--boat-gold) !important;
}

.btn-outline,
.button-outline {
    border-color: var(--boat-gold) !important;
    color: var(--boat-gold) !important;
}

.btn-outline:hover,
.button-outline:hover {
    background-color: var(--boat-gold) !important;
    color: var(--boat-black) !important;
}

a:hover,
.nav-link:hover {
    color: var(--boat-gold) !important;
}

::selection {
    background: var(--boat-red);
    color: var(--boat-white);
}

/* ========================================
   WARM BOAT-SAND LIGHT BACKGROUNDS
   Replace the previous white/ivory panels
   without changing layout.
======================================== */

body {
    background: var(--color-sand);
}

.intro-section,
.boat-section,
.reviews-section,
.journeys-section,
.contact-section {
    background: var(--color-sand) !important;
    color: var(--color-black) !important;
}

/* Keep text readable on the new warm background. */
.intro-section p,
.intro-section h1,
.intro-section h2,
.intro-section h3,
.intro-section h4,
.intro-section a,
.boat-section p,
.boat-section h1,
.boat-section h2,
.boat-section h3,
.boat-section h4,
.boat-section a,
.reviews-section p,
.reviews-section h1,
.reviews-section h2,
.reviews-section h3,
.reviews-section h4,
.reviews-section a,
.journeys-section p,
.journeys-section h1,
.journeys-section h2,
.journeys-section h3,
.journeys-section h4,
.journeys-section a,
.contact-section p,
.contact-section h1,
.contact-section h2,
.contact-section h3,
.contact-section h4,
.contact-section a {
    color: var(--color-black);
}

/* White utility text that was previously disappearing on white panels. */
.intro-section .text-white,
.boat-section .text-white,
.reviews-section .text-white,
.journeys-section .text-white,
.contact-section .text-white {
    color: var(--color-black) !important;
}



/* =========================================================
   KEERTHI SHIKARA — CUSTOM ICON SYSTEM
   Luxury line icons: champagne/gold + deep forest accents
========================================================= */

.ks-icon {
    width: 1.35em;
    height: 1.35em;
    display: inline-block;
    flex: 0 0 auto;
    color: var(--color-gold, #D8A928);
    stroke: currentColor;
    vertical-align: -0.22em;
    transition: transform 350ms ease, color 350ms ease;
}

.backwaters-boat-icon {
    width: 30px;
    height: 30px;
    color: var(--boat-gold, var(--color-gold));
    stroke: currentColor;
    flex: 0 0 30px;
    transition: transform 400ms cubic-bezier(.22, 1, .36, 1), color 350ms ease;
}

.backwaters-nav-item:hover .backwaters-boat-icon {
    transform: translateY(-2px) scale(1.04);
    color: var(--boat-gold-bright, var(--color-gold));
}

.backwaters-nav-item.active .backwaters-boat-icon {
    color: var(--boat-gold-bright, var(--color-gold));
}

.contact-item-icon {
    width: 25px;
    height: 25px;
    color: var(--color-gold);
    justify-self: center;
}

.contact-item:hover .contact-item-icon {
    transform: translateY(-2px);
    color: var(--color-red);
}

.contact-location {
    align-items: center;
}

.contact-location-icon {
    width: 28px;
    height: 28px;
    color: var(--color-gold);
}

.form-heading-icon {
    width: 25px;
    height: 25px;
    color: var(--color-gold);
}

/* Mobile boat navigation: icons become the visual identifier. */
@media (max-width: 768px) {
    .backwaters-nav-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
    }

    .backwaters-boat-icon {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

    .backwaters-nav-item span {
        font-size: .62rem;
    }
}


/* =========================================================
   KEERTHI SHIKARA — FOOTER SOCIAL ICONS
   Inline SVG version — no external icon files required.
========================================================= */

.footer-socials {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1.25rem;
}

.footer-social {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(247, 244, 236, 0.24);

    color: var(--color-gold);

    transition:
        transform 350ms cubic-bezier(.22, 1, .36, 1),
        background 350ms ease,
        border-color 350ms ease,
        color 350ms ease;
}

.footer-social svg {
    width: 19px;
    height: 19px;

    display: block;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-social .social-dot {
    fill: currentColor;
    stroke: none;
}

.footer-social:hover {
    transform: translateY(-3px);
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-black);
}

.footer-social:first-child:hover {
    background: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-ivory);
}

@media (max-width: 768px) {

    .footer-socials {
        gap: 0.55rem;
    }

    .footer-social {
        width: 35px;
        height: 35px;
    }

    .footer-social svg {
        width: 17px;
        height: 17px;
    }

}


/* =========================================
   KEERTHI SHIKARA LOGO
========================================= */

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 70px;
}

.logo img {
    display: block;
    width: 190px;
    height: auto;
    object-fit: contain;
}

@media (min-width: 992px) {
    .logo img {
        width: 220px;
    }
}

/* =========================================
   FOOTER LOGO — TRANSPARENT VERSION
   ========================================= */
.footer-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    height: auto;
    text-decoration: none;
    margin: 0;
}

.footer-logo-image {
    display: block;
    width: 250px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    background: transparent;
    border: 0;
}

.footer-brand>p {
    max-width: 300px;
    margin-top: 1.15rem;
    font-size: 0.75rem;
    line-height: 1.8;
    color: rgba(247, 244, 236, 0.55);
}

@media (max-width: 768px) {
    .footer-logo-image {
        width: 220px;
    }
}

.loader-brand {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-brand img {
    width: 220px;
    height: auto;
    display: block;
}


/* =========================================
   HEADER BRAND LOGO
   Uses: assets/images/logo-wordmark-dark.png
========================================= */

.site-header .brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: auto;
    height: auto;
    line-height: 0;
    text-decoration: none;
}

.site-header .brand img {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

@media (min-width: 992px) {
    .site-header .brand img {
        width: 220px;
    }
}

@media (max-width: 768px) {
    .site-header .brand img {
        width: 145px;
    }
}


/* =========================================================
   KEERTHI SHIKARA — CINEMATIC PAGE LOADER
   Deep Forest × Champagne Gold × Ivory
========================================================= */

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    isolation: isolate;
    overflow: hidden;

    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: center;

    padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 6rem);

    background:
        radial-gradient(circle at 50% 42%,
            rgba(216, 169, 40, 0.075) 0%,
            rgba(216, 169, 40, 0) 27%),
        radial-gradient(circle at 50% 100%,
            rgba(7, 34, 24, 0.55) 0%,
            rgba(7, 34, 24, 0) 46%),
        linear-gradient(145deg,
            #173c2b 0%,
            #214d38 48%,
            #183d2e 100%);

    color: var(--color-ivory, #f6f1e5);

    transition:
        opacity 900ms cubic-bezier(.22, 1, .36, 1),
        visibility 900ms ease;
}

.page-loader::before {
    content: "";
    position: absolute;
    inset: 1.25rem;
    z-index: -1;
    pointer-events: none;

    border: 1px solid rgba(228, 189, 69, 0.16);
}

.page-loader::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    opacity: 0.22;

    background-image:
        radial-gradient(rgba(255,255,255,.12) .55px, transparent .55px);
    background-size: 5px 5px;

    mix-blend-mode: soft-light;
}

.page-loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* Ambient water-like movement */

.loader-atmosphere {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -18%;
    height: 42%;
    z-index: -1;
    pointer-events: none;

    opacity: 0.42;

    background:
        radial-gradient(ellipse at 50% 0%,
            rgba(246, 241, 229, 0.08) 0%,
            transparent 58%);

    filter: blur(1px);
    animation: loaderWater 7s ease-in-out infinite;
}

.loader-atmosphere::before,
.loader-atmosphere::after {
    content: "";
    position: absolute;
    left: -5%;
    width: 110%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(228, 189, 69, 0.22),
        transparent
    );
}

.loader-atmosphere::before {
    top: 35%;
    transform: rotate(-1deg);
}

.loader-atmosphere::after {
    top: 58%;
    transform: rotate(1deg);
    opacity: 0.55;
}


/* Top location line */

.loader-topline {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    color: rgba(246, 241, 229, 0.68);

    font-family: var(--font-body);
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;

    animation: loaderFadeDown 1000ms cubic-bezier(.22, 1, .36, 1) both;
}

.loader-rule {
    width: clamp(28px, 5vw, 68px);
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(216, 169, 40, 0.7)
    );
}

.loader-rule:last-child {
    transform: rotate(180deg);
}


/* Center */

.loader-center {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    animation:
        loaderCenterIn 1200ms 100ms cubic-bezier(.22, 1, .36, 1) both;
}

.loader-mark {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: clamp(230px, 27vw, 390px);
    aspect-ratio: 1 / 0.62;
}

.loader-mark-ring {
    position: absolute;
    width: 92%;
    height: 92%;

    border: 1px solid rgba(228, 189, 69, 0.13);
    border-radius: 50%;

    transform: scaleX(1.35);

    animation: loaderRing 5s ease-in-out infinite;
}

.loader-mark-ring::after {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(246, 241, 229, 0.07);
    border-radius: 50%;
}

.loader-brand {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
}

.loader-brand img {
    display: block;

    width: clamp(190px, 23vw, 320px);
    max-width: 86%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(0 14px 24px rgba(0, 0, 0, 0.18));

    animation: loaderLogo 1800ms cubic-bezier(.22, 1, .36, 1) both;
}

.loader-tagline {
    margin-top: clamp(0.2rem, 1vw, 0.65rem);

    color: rgba(246, 241, 229, 0.52);

    font-family: var(--font-body);
    font-size: 0.52rem;
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;

    animation: loaderFadeUp 1000ms 450ms cubic-bezier(.22, 1, .36, 1) both;
}


/* Bottom loading information */

.loader-bottom {
    position: relative;
    z-index: 2;

    width: min(460px, 72vw);
    justify-self: center;

    animation: loaderFadeUp 1000ms 300ms cubic-bezier(.22, 1, .36, 1) both;
}

.loader-status,
.loader-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    font-family: var(--font-body);
    text-transform: uppercase;
}

.loader-status {
    margin-bottom: 0.75rem;

    color: rgba(246, 241, 229, 0.68);

    font-size: 0.48rem;
    font-weight: 600;
    letter-spacing: 0.24em;
}

.loader-percent {
    min-width: 3rem;
    text-align: right;

    color: var(--color-gold, #d8a928);

    font-variant-numeric: tabular-nums;
}

.loader-line {
    position: relative;

    width: 100%;
    height: 2px;

    overflow: hidden;

    background: rgba(246, 241, 229, 0.15);
}

.loader-line::before {
    content: "";
    position: absolute;
    inset: -5px 0;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(216, 169, 40, 0.16),
        transparent
    );

    animation: loaderShimmer 1.6s linear infinite;
}

.loader-line span {
    position: relative;
    z-index: 1;

    display: block;
    width: 0;
    height: 100%;

    background: linear-gradient(
        90deg,
        #b58a25 0%,
        #e4bd45 50%,
        #f0d06a 100%
    );

    box-shadow: 0 0 12px rgba(228, 189, 69, 0.3);

    animation: loaderProgress 2.2s cubic-bezier(.22, 1, .36, 1) forwards;
}

.loader-caption {
    margin-top: 0.75rem;

    color: rgba(246, 241, 229, 0.34);

    font-size: 0.42rem;
    letter-spacing: 0.18em;
}


/* Loader animations */

@keyframes loaderProgress {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes loaderLogo {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

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

@keyframes loaderFadeDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loaderRing {
    0%, 100% {
        opacity: 0.5;
        transform: scaleX(1.35) scale(0.98);
    }
    50% {
        opacity: 0.95;
        transform: scaleX(1.35) scale(1.02);
    }
}

@keyframes loaderWater {
    0%, 100% {
        transform: translate3d(-1%, 0, 0) scaleY(0.96);
    }
    50% {
        transform: translate3d(1%, -4px, 0) scaleY(1.02);
    }
}

@keyframes loaderShimmer {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}


/* Responsive loader */

@media (max-width: 768px) {
    .page-loader {
        padding: 1.5rem 1.25rem 2rem;
    }

    .page-loader::before {
        inset: 0.85rem;
    }

    .loader-topline {
        font-size: 0.44rem;
        letter-spacing: 0.24em;
        gap: 0.65rem;
    }

    .loader-mark {
        width: min(82vw, 320px);
    }

    .loader-brand img {
        width: min(72vw, 250px);
    }

    .loader-tagline {
        font-size: 0.45rem;
        letter-spacing: 0.32em;
    }

    .loader-bottom {
        width: min(88vw, 420px);
    }

    .loader-status {
        font-size: 0.42rem;
        letter-spacing: 0.18em;
    }

    .loader-caption {
        font-size: 0.36rem;
        letter-spacing: 0.12em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loader-atmosphere,
    .loader-mark-ring,
    .loader-brand img,
    .loader-center,
    .loader-topline,
    .loader-bottom,
    .loader-line span {
        animation: none !important;
    }

    .loader-line span {
        width: 100%;
    }
}


/* =========================================================
   FINAL HEADER FIX
   Compact logo + dark header on scroll
========================================================= */

.site-header {
    height: 110px !important;
    min-height: 110px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    background: #080909 !important;
    color: #F6F3EA !important;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Keep the logo fully inside the navigation bar */
.site-header .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    line-height: 0 !important;
    flex-shrink: 0 !important;
}

.site-header .brand img {
    display: block !important;
    width: 205px !important;
    max-width: 205px !important;
    height: auto !important;
    max-height: 96px !important;
    object-fit: contain !important;
}

/* Never switch to a light header while scrolling */
.site-header.scrolled {
    height: 110px !important;
    min-height: 110px !important;

    background: #080909 !important;
    color: #F6F3EA !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28) !important;
}

/* Navigation text */
.site-header .desktop-nav .nav-link,
.site-header.scrolled .desktop-nav .nav-link {
    color: #F6F3EA !important;
    opacity: 0.82 !important;
}

.site-header .desktop-nav .nav-link:hover,
.site-header .desktop-nav .nav-link.active,
.site-header.scrolled .desktop-nav .nav-link:hover,
.site-header.scrolled .desktop-nav .nav-link.active {
    color: #C8A96B !important;
    opacity: 1 !important;
}

/* Keep booking button readable */
.site-header .nav-book,
.site-header.scrolled .nav-book {
    color: #F6F3EA !important;
    border-color: rgba(246, 243, 234, 0.45) !important;
}

.site-header .nav-book:hover,
.site-header.scrolled .nav-book:hover {
    background: #C8A96B !important;
    color: #080909 !important;
    border-color: #C8A96B !important;
}

/* Mobile */
@media (max-width: 768px) {
    .site-header,
    .site-header.scrolled {
        height: 82px !important;
        min-height: 82px !important;
        padding-left: 5vw !important;
        padding-right: 5vw !important;
    }

    .site-header .brand img {
        width: 125px !important;
        max-width: 125px !important;
        max-height: 60px !important;
    }
}


/* ========================================
   GOOGLE REVIEWS SUMMARY + CTA
======================================== */

.reviews-intro-wrap {
    max-width: 380px;
    padding-bottom: 0.4rem;
}

.reviews-intro-wrap .reviews-intro {
    margin-bottom: 2rem;
}

.reviews-rating {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(8, 10, 8, 0.14);
}

.reviews-rating-stars {
    color: var(--color-gold);
    font-size: 1rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.reviews-rating strong {
    display: inline-block;
    margin-right: 0.45rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
}

.reviews-rating span {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: rgba(8, 10, 8, 0.58);
}

.reviews-google-cta {
    max-width: var(--container-width);
    margin: 4rem auto 0;
    padding: 1.5rem 1.75rem;
    border: 1px solid rgba(8, 10, 8, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.reviews-google-copy {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.reviews-google-label {
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: rgba(8, 10, 8, 0.5);
    white-space: nowrap;
}

.reviews-google-copy p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
}

.reviews-google-copy strong {
    font-weight: 700;
}

.reviews-google-button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.15rem;
    background: var(--color-backwater);
    color: var(--color-ivory);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-decoration: none;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.reviews-google-button span {
    font-size: 1rem;
    line-height: 1;
}

.reviews-google-button:hover {
    background: var(--color-teal);
    transform: translateY(-2px);
}

@media (max-width: 800px) {
    .reviews-intro-wrap {
        max-width: none;
    }

    .reviews-google-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .reviews-google-copy {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.7rem;
    }

    .reviews-google-button {
        width: 100%;
        justify-content: center;
    }
}


/* Long Google reviews keep the editorial layout balanced without hiding text. */
.review-card.review-long .review-content blockquote {
    font-size: clamp(1.65rem, 2.45vw, 3.25rem);
    line-height: 1.08;
}

@media (max-width: 800px) {
    .review-card.review-long .review-content blockquote {
        font-size: clamp(1.55rem, 7vw, 2.35rem);
        line-height: 1.08;
    }
}

/* ============================================================
   KEERTHI SHIKARA — GLOBAL FIXED NAVBAR
   Added without removing existing styles.
   ============================================================ */

header,
.site-header,
.navbar,
nav.main-nav,
.navigation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
}

/* Keep the navbar readable over every section */
header,
.site-header,
.navbar,
nav.main-nav,
.navigation {
    background: rgba(20, 25, 23, 0.96) !important;
    color: #F6F3EA;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Navigation links */
header a,
.site-header a,
.navbar a,
nav.main-nav a,
.navigation a {
    color: #F6F3EA !important;
}

/* Hover / active state */
header a:hover,
.site-header a:hover,
.navbar a:hover,
nav.main-nav a:hover,
.navigation a:hover,
header a.active,
.site-header a.active,
.navbar a.active,
nav.main-nav a.active,
.navigation a.active {
    color: #C8A96B !important;
}

/* Prevent fixed header from covering anchored sections */
html {
    scroll-padding-top: 90px;
}

/* Give page content enough room where a fixed header would otherwise overlap it */
body {
    scroll-padding-top: 90px;
}

@media (max-width: 768px) {
    html,
    body {
        scroll-padding-top: 76px;
    }
}


/* ============================================================
   GOOGLE MAP — RELIABLE EMBED FIX
   ============================================================ */

.contact-map {
    position: relative;
    width: 100%;
    min-height: 380px;
    overflow: hidden;
}

.contact-map .google-map-frame {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 380px !important;
    display: block !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1;
}

.contact-map .map-overlay {
    pointer-events: none !important;
}

@media (max-width: 768px) {
    .contact-map {
        min-height: 300px;
    }

    .contact-map .google-map-frame {
        min-height: 300px !important;
    }
}


/* FINAL GOOGLE MAP EMBED FIX */
.contact-map {
    position: relative !important;
    width: 100% !important;
    min-height: 420px !important;
    overflow: hidden !important;
    background: #e9e5d8 !important;
}
.contact-map .google-map-frame {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 420px !important;
    border: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
}


/* FINAL MAP DISPLAY — zero-cost OpenStreetMap embed + Google directions */
.contact-map {
    position: relative !important;
    width: 100% !important;
    min-height: 420px !important;
    overflow: hidden !important;
    background: #e9e5d8 !important;
}
.contact-map .google-map-frame {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 420px !important;
    border: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
}
@media (max-width: 768px) {
    .contact-map { min-height: 300px !important; }
    .contact-map .google-map-frame { min-height: 300px !important; }
}


/* ============================================================
   KEERTHI SHIKARA — FINAL LOCATION MAP
   Interactive OpenStreetMap + Leaflet
   No Google API key / no paid map API required.
   ============================================================ */

.contact-map {
    position: relative !important;
    width: 100% !important;
    min-height: 420px !important;
    height: 420px !important;
    overflow: hidden !important;
    background: #e9e5d8 !important;
    border: 1px solid rgba(8, 10, 8, 0.12) !important;
}

.keerti-location-map {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    background: #e9e5d8 !important;
}

/* Keep Leaflet controls visible above the map */
.keerti-location-map .leaflet-control-container {
    z-index: 20 !important;
}

.keerti-location-map .leaflet-control-zoom a {
    color: #202824 !important;
    background: #fffdf8 !important;
}

.keerti-location-map .leaflet-popup-content-wrapper,
.keerti-location-map .leaflet-popup-tip {
    background: #fffdf8 !important;
    color: #202824 !important;
}

.keerti-location-map .leaflet-popup-content {
    font-family: Manrope, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.keerti-location-map .leaflet-popup-content strong {
    font-family: Manrope, sans-serif;
    letter-spacing: 0.03em;
}

.keerti-map-marker-wrap {
    background: transparent !important;
    border: 0 !important;
}

.keerti-map-marker {
    width: 42px;
    height: 42px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c8a96b;
    border: 3px solid #fffdf8;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
}

.keerti-map-marker span {
    transform: rotate(45deg);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #183d35;
    color: #fffdf8;
    font-size: 12px;
    font-weight: 700;
}

.map-location-card {
    position: absolute !important;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 25 !important;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.9rem 1.1rem;
    background: rgba(255, 253, 248, 0.94);
    border-left: 3px solid #c8a96b;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.map-location-card strong {
    color: #202824;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.map-location-card span {
    color: #68746d;
    font-size: 0.58rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .contact-map {
        min-height: 300px !important;
        height: 300px !important;
    }

    .map-location-card {
        left: 1rem;
        bottom: 1rem;
        padding: 0.75rem 0.9rem;
    }
}


/* KEERTHI SHIKARA — MAP VISIBILITY FIX */
.contact-map {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    background: #dfe5df;
}
.keerti-location-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 420px;
    z-index: 1;
    background: #dfe5df;
}
.keerti-location-map .leaflet-pane,
.keerti-location-map .leaflet-control-container {
    z-index: 400;
}
.keerti-location-map .leaflet-tile-pane {
    z-index: 200;
}
.map-location-card {
    z-index: 1000 !important;
}
@media (max-width: 768px) {
    .contact-map,
    .keerti-location-map {
        min-height: 300px;
    }
}


/* ============================================================
   KEERTHI SHIKARA — FINAL MAP FIX
   Google public map embed, no API key / no billing required.
   ============================================================ */
.contact-map {
    position: relative !important;
    width: 100% !important;
    min-height: 420px !important;
    height: 420px !important;
    overflow: hidden !important;
    background: #e9e5d8 !important;
    border: 1px solid rgba(8, 10, 8, 0.12) !important;
}
.contact-map .keerti-google-map {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 420px !important;
    border: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
}
.contact-map .map-location-card {
    z-index: 5 !important;
}
@media (max-width: 768px) {
    .contact-map { min-height: 300px !important; height: 300px !important; }
    .contact-map .keerti-google-map { min-height: 300px !important; }
}


/* ============================================================
   KEERTHI SHIKARA — ZERO-DEPENDENCY LOCATION MAP
   Reliable static map-style location panel. No API, tiles or
   external map service required. Google Maps opens via button.
   ============================================================ */
.contact-map {
    position: relative !important;
    width: 100% !important;
    height: 420px !important;
    min-height: 420px !important;
    overflow: hidden !important;
    background: #e8e5d9 !important;
    border: 1px solid rgba(8,10,8,.14) !important;
}
.keerti-static-map {
    position: absolute; inset: 0; overflow: hidden;
    background:
      linear-gradient(rgba(32,40,36,.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(32,40,36,.055) 1px, transparent 1px),
      #e8e5d9;
    background-size: 46px 46px;
}
.keerti-static-map:after {
    content:""; position:absolute; inset:0;
    background: radial-gradient(circle at 53% 47%, rgba(200,169,107,.10), transparent 22%), linear-gradient(115deg, transparent 0 44%, rgba(49,95,84,.035) 44% 45%, transparent 45% 100%);
}
.map-water { position:absolute; border-radius:48% 52% 42% 58%; background:rgba(49,95,84,.16); border:1px solid rgba(49,95,84,.22); transform:rotate(-12deg); }
.water-1 { width:72%; height:28%; left:-12%; top:34%; }
.water-2 { width:58%; height:18%; right:-14%; top:57%; transform:rotate(18deg); }
.map-road { position:absolute; height:2px; background:rgba(72,78,72,.24); transform-origin:left center; }
.road-1 { width:78%; left:10%; top:30%; transform:rotate(18deg); }
.road-2 { width:66%; left:18%; top:72%; transform:rotate(-21deg); }
.road-3 { width:52%; left:38%; top:15%; transform:rotate(76deg); }
.map-place { position:absolute; color:rgba(32,40,36,.55); font:600 10px/1 Manrope,Arial,sans-serif; letter-spacing:.18em; }
.place-alappuzha { left:18%; top:25%; }
.place-kuttanad { right:15%; bottom:24%; }
.place-vembanad { left:56%; top:68%; transform:rotate(-12deg); }
.keerti-marker { position:absolute; left:50%; top:50%; width:46px; height:46px; transform:translate(-50%,-50%) rotate(45deg); background:#183d35; border:4px solid #f6f3ea; box-shadow:0 8px 22px rgba(0,0,0,.24); border-radius:50% 50% 50% 0; z-index:4; }
.keerti-marker span { position:absolute; inset:0; display:grid; place-items:center; transform:rotate(-45deg); color:#c8a96b; font:bold 22px Arial; }
.keerti-marker-label { position:absolute; left:calc(50% + 32px); top:calc(50% + 24px); z-index:5; background:rgba(246,243,234,.96); padding:12px 15px; box-shadow:0 10px 26px rgba(0,0,0,.13); border-left:2px solid #c8a96b; }
.keerti-marker-label strong { display:block; color:#202824; font:600 11px/1.2 Manrope,Arial,sans-serif; letter-spacing:.12em; }
.keerti-marker-label small { display:block; margin-top:5px; color:#68746d; font:500 9px/1.2 Manrope,Arial,sans-serif; letter-spacing:.08em; }
.map-compass { position:absolute; right:22px; top:20px; width:34px; height:34px; border:1px solid rgba(32,40,36,.25); border-radius:50%; display:grid; place-items:center; color:#183d35; font:600 12px Manrope,Arial,sans-serif; background:rgba(246,243,234,.8); }
.map-scale { position:absolute; left:22px; bottom:22px; display:flex; align-items:center; gap:8px; color:#68746d; font:500 9px Manrope,Arial,sans-serif; letter-spacing:.08em; }
.map-scale span { width:48px; height:5px; border-top:2px solid #315f54; border-left:2px solid #315f54; border-right:2px solid #315f54; }
.contact-map .map-location-card { position:absolute; left:14px; bottom:14px; z-index:10 !important; background:rgba(246,243,234,.97); padding:14px 18px; border-left:2px solid #c8a96b; box-shadow:0 12px 28px rgba(0,0,0,.14); }
.contact-map .map-location-card strong { display:block; color:#202824; font:600 11px/1.2 Manrope,Arial,sans-serif; letter-spacing:.12em; }
.contact-map .map-location-card span { display:block; margin-top:7px; color:#68746d; font:500 9px/1.2 Manrope,Arial,sans-serif; letter-spacing:.12em; }
.contact-map .map-location-card a { display:inline-block; margin-top:10px; color:#183d35; font:600 9px/1.2 Manrope,Arial,sans-serif; letter-spacing:.1em; text-decoration:none; }
.contact-map .map-location-card a:hover { color:#b08d4c; }
@media (max-width:768px) {
  .contact-map { height:300px !important; min-height:300px !important; }
  .keerti-marker-label { left:calc(50% + 18px); top:calc(50% + 20px); }
  .place-vembanad { display:none; }
}


/* KEERTHI SHIKARA — WORKING GOOGLE MAP EMBED */
.contact-map { position: relative !important; width: 100% !important; height: 420px !important; min-height: 420px !important; overflow: hidden !important; background: #e8e5d9 !important; }
.contact-map .google-map-frame { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; border: 0 !important; display: block !important; z-index: 1 !important; filter: none !important; }
.contact-map .map-location-card { z-index: 5 !important; }
@media (max-width: 768px) { .contact-map { height: 300px !important; min-height: 300px !important; } }


/* ============================================================
   KEERTHI SHIKARA — FINAL REAL GOOGLE MAP EMBED
   Use the exact Google Maps "Share > Embed a map" iframe.
   Keep the iframe in normal document flow so existing map/animation
   rules cannot collapse or cover it.
   ============================================================ */
.contact-map {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 450px !important;
    min-height: 450px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #e9e5d8 !important;
    border: 1px solid rgba(8, 10, 8, 0.12) !important;
    isolation: isolate !important;
}

.contact-map > .google-map-frame {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 450px !important;
    min-width: 100% !important;
    min-height: 450px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1 !important;
    filter: none !important;
    transform: none !important;
}

.contact-map > .map-location-card {
    position: absolute !important;
    left: 14px !important;
    bottom: 14px !important;
    z-index: 5 !important;
}

@media (max-width: 768px) {
    .contact-map {
        height: 360px !important;
        min-height: 360px !important;
    }
    .contact-map > .google-map-frame {
        height: 360px !important;
        min-height: 360px !important;
    }
}


/* =========================================================
   MOBILE BOAT COLLECTION — FINAL GAP / BLANK FIX
   Four boats only: Speed, House, Kayaking, Canoe
========================================================= */
@media (max-width: 768px) {

    .backwaters-section {
        height: 400vh !important;
        min-height: 400vh !important;
        overflow: visible !important;
        overflow-x: clip !important;
        overflow-y: visible !important;
        position: relative;
    }

    /* A sticky child must not have an ancestor whose overflow creates
       an unintended scroll container. */
    main {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    .backwaters-cinematic {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        height: 100svh !important;
        min-height: 100svh !important;
        max-height: none !important;
        min-height: 100vh !important;
        height: 100vh !important;
        height: 100svh !important;
        overflow: hidden !important;
        background: var(--boat-black) !important;
    }

    .backwaters-visual {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        background: var(--boat-black) !important;
    }

    .backwaters-image,
    .backwaters-image.current,
    .backwaters-image.next {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        transform: none !important;
    }

    .backwaters-image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
    }

    /* Do not fade both layers out on mobile. */
    .backwaters-cinematic.is-transitioning
    .backwaters-image.current {
        opacity: 1 !important;
    }

    .backwaters-cinematic.is-transitioning
    .backwaters-image.next {
        opacity: 1 !important;
    }

    .backwaters-image.current {
        opacity: 1 !important;
        z-index: 1 !important;
    }

    .backwaters-image.next {
        opacity: 0 !important;
        z-index: 2 !important;
    }

    .backwaters-cinematic.is-transitioning .backwaters-image.current {
        opacity: 0 !important;
    }

    .backwaters-cinematic.is-transitioning .backwaters-image.next {
        opacity: 1 !important;
    }

    .backwaters-image-overlay,
    .backwaters-grain,
    .backwaters-cinematic::after {
        position: absolute !important;
        inset: 0 !important;
    }

    .backwaters-scroll-area {
        position: absolute !important;
        inset: 0 !important;
        height: 100% !important;
        pointer-events: none !important;
    }

    .backwaters-scroll-point {
        height: 25% !important;
    }
}

/* MOBILE BOAT IMAGE STABILITY PATCH */

/* MOBILE BOAT IMAGE STABILITY PATCH */
@media (max-width: 768px) {
    .backwaters-cinematic {
        position: sticky !important;
        top: 0 !important;
        height: 100svh !important;
        min-height: 100svh !important;
        max-height: none !important;
        overflow: hidden !important;
        background: var(--boat-black) !important;
    }

    .backwaters-visual {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        background: var(--boat-black) !important;
    }

    .backwaters-image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        transform: none !important;
        transition: none !important;
    }

    .backwaters-image.current {
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 2 !important;
    }

    .backwaters-image.next {
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: 1 !important;
    }

    .backwaters-image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
        transition: none !important;
    }

    .backwaters-cinematic.is-transitioning .backwaters-image.current,
    .backwaters-cinematic.is-transitioning .backwaters-image.next {
        opacity: 1 !important;
    }

    /* JS keeps layer B hidden on mobile. */
    .backwaters-cinematic.is-transitioning .backwaters-image.next {
        visibility: hidden !important;
        z-index: 1 !important;
    }
}

/* =========================================================
   MOBILE BOAT PHOTOS — FINAL ASPECT-RATIO FIX
   Keep the complete source photograph visible on phones.
   The photo must NOT be forced to fill the tall viewport with cover.
========================================================= */
@media (max-width: 768px) {
    .backwaters-image img,
    .backwaters-cinematic .backwaters-image.current img,
    .backwaters-cinematic .backwaters-image.next img {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: none !important;
        transition: none !important;
    }

    /* Keep the blurred photo behind the real photo so wide images
       do not leave an ugly empty/black area on a tall phone. */
    .backwaters-image::before {
        content: "" !important;
        position: absolute !important;
        inset: -8% !important;
        z-index: 0 !important;
        background-image: var(--mobile-boat-bg, none) !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        filter: blur(22px) brightness(.52) saturate(.82) !important;
        transform: scale(1.08) !important;
        opacity: .95 !important;
    }

    .backwaters-image img {
        position: relative !important;
        z-index: 1 !important;
        display: block !important;
    }
}


/* =========================================================
   GALLERY — PHOTO + VIDEO COLLECTION
========================================================= */

.gallery-section {
    position: relative;
    background: var(--color-black-soft);
    color: var(--color-ivory);
    padding: 10rem 5vw 6rem;
    overflow: hidden;
}

.gallery-inner {
    width: min(1400px, 100%);
    margin: 0 auto;
}

.gallery-header {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .55fr);
    gap: 5rem;
    align-items: end;
    margin-bottom: 4.5rem;
}

.gallery-header h2 {
    margin-top: 1rem;
    font-family: var(--font-display);
    font-size: clamp(4rem, 8vw, 8rem);
    line-height: .78;
    font-weight: 400;
    letter-spacing: -.035em;
    text-transform: uppercase;
}

.gallery-header h2 span {
    display: block;
    margin-left: 7vw;
}

.gallery-intro {
    max-width: 360px;
    margin: 0 0 .35rem auto;
    color: var(--color-ivory-muted);
    font-size: .78rem;
    line-height: 1.9;
    font-weight: 300;
}

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

.gallery-card {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: var(--color-black);
    cursor: pointer;
    text-align: left;
}

.gallery-card-large {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-card-wide {
    grid-column: span 2;
}

.gallery-card-tall {
    grid-row: span 2;
}

.gallery-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.015);
    transition: transform 1.1s cubic-bezier(.22, 1, .36, 1),
                filter 1.1s cubic-bezier(.22, 1, .36, 1);
}

.gallery-card-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.02) 20%, rgba(0,0,0,.72) 100%);
    opacity: .78;
    transition: opacity .6s ease;
}

.gallery-card-info {
    position: absolute;
    left: 1.35rem;
    right: 1.35rem;
    bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    z-index: 2;
    color: var(--color-white);
}

.gallery-card-info small {
    color: var(--color-gold);
    font-size: .5rem;
    letter-spacing: .2em;
}

.gallery-card-info strong {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    font-weight: 400;
}

.gallery-view {
    margin-top: .25rem;
    color: rgba(255,253,248,.75);
    font-size: .48rem;
    letter-spacing: .18em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .45s ease, transform .45s ease;
}

.gallery-card:hover img {
    transform: scale(1.08);
    filter: saturate(1.05);
}

.gallery-card:hover .gallery-card-overlay {
    opacity: .92;
}

.gallery-card:hover .gallery-view,
.gallery-card:focus-visible .gallery-view {
    opacity: 1;
    transform: translateY(0);
}

.gallery-card:focus-visible {
    outline: 1px solid var(--color-gold);
    outline-offset: 4px;
}

.gallery-video-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, .55fr);
    gap: 4rem;
    align-items: end;
    margin: 8rem 0 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--border-light);
}

.gallery-video-heading h3 {
    margin-top: .8rem;
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: .8;
    font-weight: 400;
    letter-spacing: -.03em;
}

.gallery-video-heading h3 span {
    display: block;
    margin-left: 5vw;
}

.gallery-video-heading > p {
    margin: 0 0 .25rem auto;
    max-width: 360px;
    color: var(--color-ivory-muted);
    font-size: .72rem;
    line-height: 1.8;
}

.gallery-video-heading strong {
    color: var(--color-gold);
    font-weight: 500;
}

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

.gallery-video-card {
    min-width: 0;
}

.gallery-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-black);
    border: 1px solid rgba(255,253,248,.1);
}

.gallery-video-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--color-black);
}

.gallery-video-placeholder {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    background: linear-gradient(180deg, rgba(8,10,8,.15), rgba(8,10,8,.72));
    color: var(--color-white);
    pointer-events: none;
    transition: opacity .35s ease;
}

.gallery-video-frame:has(video:not([src])) .gallery-video-placeholder {
    opacity: 1;
}

.gallery-play {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    padding-left: 3px;
    border: 1px solid rgba(255,253,248,.65);
    border-radius: 50%;
    color: var(--color-gold);
    font-size: .9rem;
}

.gallery-video-placeholder small {
    color: var(--color-gold);
    font-size: .48rem;
    letter-spacing: .2em;
}

.gallery-video-placeholder strong {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 400;
}

.gallery-video-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-light);
}

.gallery-video-meta span {
    color: var(--color-gold);
    font-size: .5rem;
    letter-spacing: .18em;
}

.gallery-video-meta strong {
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .13em;
}

.gallery-bottom {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 4rem;
    color: var(--color-muted);
    font-size: .48rem;
    letter-spacing: .18em;
}

.gallery-bottom-line {
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vw;
    background: rgba(5,6,5,.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .45s ease, visibility .45s ease;
}

.gallery-lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gallery-lightbox-content {
    width: min(1200px, 100%);
    max-height: 90vh;
}

.gallery-lightbox-media {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 78vh;
}

.gallery-lightbox-media img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 25px 80px rgba(0,0,0,.5);
}

.gallery-lightbox-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.gallery-lightbox-caption span {
    color: var(--color-gold);
    font-size: .5rem;
    letter-spacing: .18em;
}

.gallery-lightbox-caption p {
    margin: 0;
    color: var(--color-ivory);
    font-family: var(--font-display);
    font-size: 1.25rem;
}

.gallery-lightbox-close {
    position: absolute;
    top: 2rem;
    right: 3vw;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255,253,248,.3);
    background: transparent;
    cursor: pointer;
}

.gallery-lightbox-close span {
    position: absolute;
    left: 11px;
    top: 21px;
    width: 20px;
    height: 1px;
    background: var(--color-ivory);
}

.gallery-lightbox-close span:first-child {
    transform: rotate(45deg);
}

.gallery-lightbox-close span:last-child {
    transform: rotate(-45deg);
}

body.gallery-open {
    overflow: hidden;
}

@media (max-width: 900px) {
    .gallery-header,
    .gallery-video-heading {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .gallery-intro,
    .gallery-video-heading > p {
        margin: 0;
    }

    .gallery-photo-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 260px;
    }
}

@media (max-width: 600px) {
    .gallery-section {
        padding: 7rem 6vw 4rem;
    }

    .gallery-header {
        margin-bottom: 3rem;
    }

    .gallery-header h2 {
        font-size: clamp(3.2rem, 17vw, 5rem);
    }

    .gallery-header h2 span {
        margin-left: 5vw;
    }

    .gallery-photo-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: .8rem;
    }

    .gallery-card,
    .gallery-card-large,
    .gallery-card-wide,
    .gallery-card-tall {
        grid-column: auto;
        grid-row: auto;
        height: 68vw;
        min-height: 230px;
        max-height: 430px;
    }

    .gallery-card-large {
        height: 76vw;
    }

    .gallery-video-heading {
        margin-top: 6rem;
    }

    .gallery-video-heading h3 {
        font-size: clamp(2.8rem, 13vw, 4rem);
    }

    .gallery-video-grid {
        grid-template-columns: 1fr;
    }

    .gallery-video-frame {
        aspect-ratio: 16 / 10;
    }

    .gallery-video-meta {
        display: block;
    }

    .gallery-video-meta strong {
        display: block;
        margin-top: .45rem;
    }

    .gallery-bottom {
        gap: .7rem;
    }

    .gallery-lightbox {
        padding: 1rem 5vw;
    }

    .gallery-lightbox-close {
        top: 1rem;
        right: 5vw;
    }

    .gallery-lightbox-media,
    .gallery-lightbox-media img {
        max-height: 70vh;
    }

    .gallery-lightbox-caption {
        display: block;
    }

    .gallery-lightbox-caption p {
        margin-top: .45rem;
        font-size: 1rem;
    }
}