/* ========================================
   KEERTHI SHIKARA
   RESPONSIVE DESIGN
======================================== */


/* ========================================
   TABLET / SMALL DESKTOP
   1000px AND BELOW
======================================== */

@media (max-width: 1000px) {

    /* HEADER */

    .desktop-nav,
    .nav-book {
        display: none;
    }

    .menu-button {
        display: flex;
    }

    .site-header {
        padding-left: 4vw;
        padding-right: 4vw;
    }


    /* HERO */

    .hero-content {
        margin-left: 6vw;
    }

    .hero h1 {
        font-size: clamp(4rem, 10vw, 7rem);
    }


    /* INTRO */

    .intro-inner {
        grid-template-columns: 1fr;
        gap: 4rem;
    }


    /* BOAT */

    .boat-inner {
        grid-template-columns: 1fr;
        gap: 4rem;
    }


    /* BOOKING */

    .booking-inner {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .booking-intro {
        position: relative;
        top: auto;
    }


    /* CONTACT */

    .contact-inner {
        grid-template-columns: 1fr;
        gap: 4rem;
    }


    /* FOOTER */

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

}


/* ========================================
   TABLET
   768px AND BELOW
======================================== */

@media (max-width: 768px) {

    /* ====================================
       GLOBAL
    ==================================== */

    html {
        scroll-behavior: smooth;
    }

    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    main,
    section,
    footer {
        max-width: 100%;
        /* Use clip instead of hidden so sticky sections are not trapped
           inside an unintended scrolling ancestor on mobile. */
        overflow-x: clip;
    }

    img {
        max-width: 100%;
    }


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

    :root {
        --header-height: 80px;
    }

    .site-header {
        height: var(--header-height);

        padding-left: 6vw;
        padding-right: 6vw;
    }

    .brand-main {
        font-size: 1.45rem;
    }

    .brand-sub {
        font-size: 0.42rem;
    }


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

    .hero {
        min-height: 100svh;
        height: 100svh;
    }

    .hero-image {
        background-position: 62% center;
    }

    .hero-overlay {
        background:
            linear-gradient(90deg,
                rgba(46, 94, 63, 0.78),
                rgba(46, 94, 63, 0.3));
    }

    .hero-content {
        width: 88%;

        margin-left: 6vw;

        padding-top: 4rem;
        padding-left: 0;
        padding-right: 0;
    }

    .hero-eyebrow {
        font-size: 0.55rem;
        letter-spacing: 0.2em;
    }

    .hero h1 {
        font-size: clamp(3.4rem,
                16vw,
                5.5rem);

        line-height: 0.86;
    }

    .hero h1 span:nth-child(2) {
        margin-left: 5vw;
    }

    .hero-description {
        max-width: 290px;

        margin-top: 2rem;

        font-size: 0.78rem;

        line-height: 1.7;
    }

    .hero-button {
        margin-top: 2rem;

        padding: 1rem 1.2rem;

        font-size: 0.58rem;
    }


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

    .scroll-indicator {
        left: 6vw;
        bottom: 3vh;
    }

    .scroll-text {
        font-size: 0.45rem;
    }

    .scroll-line {
        height: 50px;
    }

    .hero-location {
        right: 6vw;
        bottom: 3vh;

        font-size: 0.45rem;
    }


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

    .intro-section {
        min-height: auto;

        padding:
            12vh 6vw;
    }

    .intro-inner {
        display: flex;

        flex-direction: column;

        gap: 4rem;

        align-items: stretch;
    }

    .intro-visual,
    .intro-content {
        width: 100%;
        max-width: 100%;
    }

    .intro-image-wrap {
        height: 60vh;
        min-height: 380px;
        max-height: 600px;
    }

    .section-label {
        margin-bottom: 1.5rem;

        font-size: 0.5rem;
    }

    .intro-content h2 {
        font-size: clamp(3rem,
                14vw,
                5rem);

        line-height: 0.88;
    }

    .intro-content h2 span:nth-child(2) {
        margin-left: 4vw;
    }

    .intro-content h2 span:nth-child(3) {
        margin-left: 8vw;
    }

    .intro-divider {
        margin:
            2.2rem 0 1.5rem;
    }

    .intro-text {
        font-size: 0.75rem;
        line-height: 1.8;
    }

    .intro-number {
        right: -5vw;
        bottom: -2rem;

        font-size: 11rem;
    }


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

    .experience-section {
        padding:
            11vh 6vw;
    }

    .experience-header {
        display: block;

        margin-bottom: 3.5rem;
    }

    .experience-header h2 {
        font-size: clamp(3.5rem,
                16vw,
                5.5rem);

        margin-top: 1rem;

        line-height: 0.84;
    }

    .experience-header h2 span {
        margin-left: 8vw;
    }

    .experience-intro {
        width: auto;

        max-width: 290px;

        margin-top: 2rem;

        font-size: 0.7rem;

        line-height: 1.8;
    }

    .experience-container {
        display: flex;

        flex-direction: column;

        gap: 3rem;
    }

    .experience-image-area {
        width: 100%;

        height: 55vh;

        min-height: 360px;

        max-height: 600px;
    }

    .experience-item {
        grid-template-columns:
            30px 1fr 25px;

        gap: 0.7rem;

        padding: 1.4rem 0;
    }

    .experience-item:hover,
    .experience-item.active {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    .experience-number {
        font-size: 0.85rem;
    }

    .experience-details h3 {
        font-size: clamp(1.9rem,
                9vw,
                3rem);

        line-height: 0.95;
    }

    .experience-details h3 span {
        margin-left: 0.8rem;
    }

    .experience-details p {
        font-size: 0.63rem;

        line-height: 1.7;

        margin-top: 0.7rem;
    }

    .experience-image-caption {
        font-size: 0.42rem;

        padding: 0.8rem;
    }

    .experience-background-number {
        font-size: 16rem;

        bottom: -2rem;
    }


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

    .boat-section {
        padding:
            11vh 6vw;
    }

    .boat-header {
        margin-bottom: 3.5rem;
    }

    .boat-header h2 {
        font-size: clamp(4rem,
                18vw,
                6rem);

        line-height: 0.82;
    }

    .boat-header h2 span {
        margin-left: 10vw;
    }

    .boat-image-wrap {
        height: 55vh;

        min-height: 380px;

        max-height: 600px;
    }

    .boat-main-image {
        object-position: center;
    }

    .boat-image-info {
        padding: 1rem;

        font-size: 0.42rem;
    }

    .boat-content {
        display: flex;

        flex-direction: column;

        gap: 3.5rem;

        margin-top: 4rem;
    }

    .boat-story h3 {
        font-size: clamp(2.8rem,
                14vw,
                5rem);

        line-height: 0.9;
    }

    .boat-story h3 span {
        margin-left: 5vw;
    }

    .boat-story h3 span:last-child {
        margin-left: 10vw;
    }

    .boat-description {
        font-size: 0.72rem;

        line-height: 1.8;
    }

    .boat-spec {
        grid-template-columns:
            30px 1fr;

        gap: 1rem;

        padding: 1.3rem 0;
    }

    .boat-spec-number {
        font-size: 0.85rem;
    }

    .boat-spec strong {
        font-size: 1.2rem;
    }

    .boat-cta {
        margin-top: 3rem;
    }

    .boat-background-number {
        font-size: 16rem;

        bottom: -2rem;
    }


    /* ====================================
       BACKWATERS
    ==================================== */

    .backwaters-section {
        min-height: 400vh;
    }

    .backwaters-sticky {
        height: 100svh;

        min-height: 100svh;
    }

    .backwaters-top-label {
        top: 5.5rem;

        left: 6vw;
        right: 6vw;

        font-size: 0.42rem;
    }

    .backwaters-title h2 {
        font-size: clamp(3.5rem,
                17vw,
                6rem);

        line-height: 0.85;
    }

    .backwaters-title p {
        font-size: 0.48rem;

        letter-spacing: 0.22em;
    }

    .backwaters-chapter {
        left: 6vw;
        bottom: 5vh;

        right: 20vw;
    }

    .backwaters-progress {
        right: 6vw;
        bottom: 5vh;
    }

    .progress-line {
        height: 18px;
    }

    .progress-line.active {
        height: 36px;
    }

    .backwater-chapter-item {
        min-height: 100svh;

        align-items: flex-end;

        padding:
            0 6vw 17vh;
    }

    .chapter-spacer {
        display: none;
    }

    .chapter-content {
        width: 100%;

        max-width: 100%;

        padding: 1.4rem;

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

        backdrop-filter: blur(5px);
    }

    .chapter-content h3 {
        font-size: clamp(2.7rem,
                13vw,
                5rem);

        line-height: 0.9;
    }

    .chapter-content h3 span {
        margin-left: 1rem;
    }

    .chapter-content p {
        font-size: 0.63rem;

        line-height: 1.75;
    }


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

    .journeys-section {
        padding:
            11vh 6vw;
    }

    .journeys-header {
        display: block;

        margin-bottom: 3.5rem;
    }

    .journeys-header h2 {
        margin-top: 1rem;

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

        line-height: 0.85;
    }

    .journeys-header h2 span {
        margin-left: 7vw;
    }

    .journeys-intro {
        width: auto;

        max-width: 290px;

        margin-top: 2rem;

        font-size: 0.68rem;

        line-height: 1.8;
    }

    .journey-card {
        padding: 1.7rem 0;
    }

    .journey-card:hover {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .journey-card-main {
        grid-template-columns:
            1fr 32px;

        gap: 1rem;
    }

    .journey-title h3 {
        font-size: clamp(2.5rem,
                12vw,
                4.2rem);

        line-height: 0.9;
    }

    .journey-title h3 span {
        margin-left: 5vw;
    }

    .journey-title p {
        font-size: 0.62rem;

        line-height: 1.75;

        margin-top: 1.2rem;
    }

    .journey-details {
        grid-column: 1 / -1;

        display: flex;

        flex-wrap: wrap;

        gap: 1.5rem;

        margin-top: 0.8rem;
    }

    .journey-details strong {
        font-size: 0.95rem;
    }

    .journey-arrow {
        width: 34px;
        height: 34px;
    }

    .journeys-footer {
        display: block;

        margin-top: 3.5rem;
    }

    .journeys-footer p {
        font-size: 1.3rem;

        margin-bottom: 1.3rem;
    }


    /* ====================================
       GALLERY
    ==================================== */

    .gallery-section {
        padding-left: 6vw;
        padding-right: 6vw;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .gallery-item {
        width: 100%;
    }


    /* ====================================
       REVIEWS
    ==================================== */

    .reviews-section {
        padding:
            6rem 6vw 4rem;
    }

    .reviews-header {
        display: block;

        margin-bottom: 3rem;
    }

    .reviews-header h2 {
        font-size: clamp(3.2rem,
                14vw,
                5rem);

        line-height: 0.85;
    }

    .reviews-header h2 span {
        margin-left: 8%;
    }

    .reviews-intro {
        margin-top: 2rem;

        font-size: 0.75rem;

        line-height: 1.8;
    }

    .reviews-stage {
        min-height: auto;
    }

    .review-card {
        position: relative;

        display: flex;

        flex-direction: column-reverse;

        gap: 2.2rem;

        opacity: 0;

        visibility: hidden;

        height: 0;

        overflow: hidden;

        transform: translateY(20px);
    }

    .review-card.active {
        height: auto;

        opacity: 1;

        visibility: visible;

        overflow: visible;

        transform: translateY(0);
    }

    .review-content {
        padding-left: 0;
    }

    .review-label {
        margin-bottom: 1.4rem;
    }

    .review-content blockquote {
        font-size: clamp(2.2rem,
                10vw,
                4rem);

        line-height: 0.95;
    }

    .review-divider {
        margin: 2rem 0 1rem;
    }

    .review-image-wrap {
        height: 380px;
    }

    .reviews-quote-mark {
        display: none;
    }

    .reviews-controls {
        margin-top: 2.5rem;
    }

    .review-arrow {
        width: 46px;
        height: 46px;
    }

    .reviews-bottom {
        margin-top: 3rem;

        gap: 0.8rem;

        font-size: 0.48rem;
    }


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

    .booking-section {
        padding:
            6rem 6vw 4rem;
    }

    .booking-inner {
        display: block;
    }

    .booking-intro {
        position: relative;

        top: auto;

        margin-bottom: 4rem;
    }

    .booking-intro h2 {
        font-size: clamp(3.5rem,
                15vw,
                5rem);

        line-height: 0.85;
    }

    .booking-intro h2 span {
        margin-left: 7%;
    }

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

        font-size: 0.76rem;

        line-height: 1.8;
    }

    .booking-note {
        margin-top: 2.5rem;
    }

    .booking-form-wrap {
        width: 100%;

        padding: 1.5rem;
    }

    .form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }

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

    .booking-success {
        min-height: 450px;
    }

    .booking-success h3 {
        font-size: clamp(2.7rem,
                11vw,
                4rem);

        line-height: 0.9;
    }

    .booking-footer {
        margin-top: 4rem;

        gap: 0.8rem;

        font-size: 0.48rem;
    }


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

    .contact-section {
        padding:
            6rem 6vw 4rem;
    }

    .contact-inner {
        display: block;
    }

    .contact-intro {
        padding-top: 0;

        margin-bottom: 4rem;
    }

    .contact-intro h2 {
        font-size: clamp(3.5rem,
                15vw,
                5rem);

        line-height: 0.85;
    }

    .contact-intro h2 span {
        margin-left: 7%;
    }

    .contact-description {
        margin-top: 2rem;

        font-size: 0.76rem;

        line-height: 1.8;
    }

    .contact-location {
        margin-top: 2.5rem;
    }

    .contact-map {
        height: 300px;
    }

    .map-label {
        left: 1.25rem;
        bottom: 1.25rem;
    }

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

    .contact-item {
        /* ICON | NUMBER | CONTENT | ARROW */
        grid-template-columns:
            30px 35px minmax(0, 1fr) 22px;

        align-items: center;
        gap: 0.6rem;
        width: 100%;
        padding: 1.3rem 0;
    }

    .contact-item-content {
        min-width: 0;
        width: 100%;
    }

    .contact-item-content strong {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }

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

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

    .contact-arrow {
        grid-column: 4;
        grid-row: 1;
        justify-self: end;
        font-size: 0.9rem;
    }

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

    .contact-bottom {
        margin-top: 4rem;

        gap: 0.8rem;

        font-size: 0.48rem;
    }


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

    .site-footer {
        padding:
            6rem 6vw 2rem;
    }

    .footer-opening {
        padding-bottom: 5rem;
    }

    .footer-opening h2 {
        font-size: clamp(3.8rem,
                18vw,
                6rem);

        line-height: 0.82;
    }

    .footer-opening h2 span {
        margin-left: 5%;
    }

    .footer-book-button {
        margin-top: 3rem;
    }

    .footer-main {
        padding: 4rem 0;

        grid-template-columns:
            1fr 1fr;

        gap: 3rem 2rem;
    }

    .footer-brand {
        grid-column: 1 / -1;

        margin-bottom: 1rem;
    }

    .footer-brand>p {
        margin-top: 1.5rem;
    }

    .footer-bottom {
        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 1.5rem;

        text-align: center;
    }

    .footer-bottom-center {
        order: 3;

        width: 100%;
    }

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

        order: 2;
    }


    /* ====================================
       TOUCH
    ==================================== */

    button,
    a {
        -webkit-tap-highlight-color: transparent;
    }

    .review-arrow,
    .review-dot,
    .menu-button,
    .mobile-menu-close {
        touch-action: manipulation;
    }

    .contact-item,
    .experience-item,
    .journey-card,
    .gallery-item {
        -webkit-tap-highlight-color: transparent;
    }


    /* ====================================
       DATE INPUT
    ==================================== */

    .booking-form input[type="date"] {
        color-scheme: dark;
    }

    .booking-form input[type="date"]::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: 0.65;
    }

}


/* ========================================
   SMALL MOBILE
   480px AND BELOW
======================================== */

@media (max-width: 480px) {

    html {
        font-size: 15px;
    }


    /* HEADER */

    .site-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .brand-main {
        font-size: 1.2rem;
    }

    .brand-sub {
        font-size: 0.45rem;
    }


    /* HERO */

    .hero-content {
        width: 90%;

        margin-left: 5vw;
    }

    .hero h1 {
        font-size: clamp(3.1rem,
                16vw,
                5rem);
    }

    .hero-description {
        max-width: 280px;
    }


    /* INTRO */

    .intro-section {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .intro-image-wrap {
        height: 55vh;
        min-height: 350px;
    }

    .intro-content h2 {
        font-size: clamp(2.8rem,
                14vw,
                4.5rem);
    }


    /* EXPERIENCE */

    .experience-section {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .experience-image-area {
        height: 50vh;
        min-height: 340px;
    }

    .experience-header h2 {
        font-size: clamp(3.2rem,
                16vw,
                5rem);
    }


    /* BOAT */

    .boat-section {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .boat-image-wrap {
        height: 50vh;
        min-height: 340px;
    }

    .boat-header h2 {
        font-size: clamp(3.7rem,
                18vw,
                5.5rem);
    }


    /* BACKWATERS */

    .backwaters-top-label {
        left: 5vw;
        right: 5vw;
    }

    .backwaters-chapter {
        left: 5vw;
        right: 20vw;
    }

    .backwater-chapter-item {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .chapter-content {
        padding: 1.2rem;
    }


    /* JOURNEYS */

    .journeys-section {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .journeys-header h2 {
        font-size: clamp(3.3rem,
                16vw,
                5rem);
    }

    .journey-card-main {
        grid-template-columns:
            1fr 28px;

        gap: 0.8rem;
    }

    .journey-title h3 {
        font-size: clamp(2.3rem,
                11vw,
                4rem);
    }


    /* GALLERY */

    .gallery-section {
        padding-left: 5vw;
        padding-right: 5vw;
    }


    /* REVIEWS */

    .reviews-section {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .reviews-header h2 {
        font-size: clamp(3rem,
                14vw,
                4.5rem);
    }

    .review-image-wrap {
        height: 340px;
    }

    .review-content blockquote {
        font-size: clamp(2rem,
                10vw,
                3.5rem);
    }


    /* BOOKING */

    .booking-section {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .booking-intro h2 {
        font-size: clamp(3.2rem,
                15vw,
                4.7rem);
    }

    .booking-form-wrap {
        padding: 1.25rem;
    }


    /* CONTACT */

    .contact-section {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .contact-intro h2 {
        font-size: clamp(3.2rem,
                15vw,
                4.7rem);
    }

    .contact-map {
        height: 270px;
    }


    /* FOOTER */

    .site-footer {
        padding-left: 5vw;
        padding-right: 5vw;
    }

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

    .footer-brand {
        grid-column: auto;
    }

    .footer-opening h2 {
        font-size: clamp(3.5rem,
                18vw,
                5.5rem);
    }

}

@media (max-width: 768px) {
    .logo {
        height: 55px;
    }

    .logo img {
        width: 155px;
    }
}


@media (max-width: 768px) {

    .site-header .brand img {
        width: 145px;
    }

}

/* 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;
    }
}


/* ========================================
   CONTACT MOBILE — FINAL GRID FIX
   Keep all four contact elements on one row.
======================================== */
@media (max-width: 600px) {
    .contact-list {
        width: 100%;
        min-width: 0;
    }

    .contact-item {
        display: grid;
        grid-template-columns: 30px 35px minmax(0, 1fr) 22px !important;
        grid-template-rows: auto;
        align-items: center;
        column-gap: 0.6rem;
        row-gap: 0;
        width: 100%;
        min-width: 0;
        padding: 1.25rem 0;
    }

    .contact-item-icon {
        grid-column: 1;
        grid-row: 1;
        width: 22px;
        height: 22px;
        justify-self: center;
    }

    .contact-item-number {
        grid-column: 2;
        grid-row: 1;
        white-space: nowrap;
        font-size: 1rem;
    }

    .contact-item-content {
        grid-column: 3;
        grid-row: 1;
        min-width: 0;
        width: 100%;
        overflow: hidden;
    }

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

    .contact-item-content strong {
        display: block;
        width: 100%;
        max-width: 100%;
        font-size: 0.68rem;
        line-height: 1.45;
        overflow-wrap: anywhere;
        word-break: normal;
        white-space: normal;
    }

    .contact-arrow {
        grid-column: 4;
        grid-row: 1;
        justify-self: end;
        font-size: 0.9rem;
        margin: 0;
    }
}