html {
    scroll-behavior: smooth;
}

body {
    /* font-family: 'Work Sans', sans-serif; */
    color: #2D2621;
    font-weight: 400;
}
.font-cormorant {
    font-family: "Cormorant Garamond", serif;
    font-weight: 700 !important;
}
header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    background-color: #ffffff !important;
}
#sidebarBackdrop,
#mobileSidebar {
    z-index: 1000 !important;
}

.font-serif-heading {
    font-family: 'Noto Serif', serif;
    font-weight: 500;
}

h1, h2, h3, h4, h5, h6, button, select, input, label, a {
    font-weight: 500 !important;
}

/* Swiper Navigation Custom Styling */
.swiper-button-next-custom, .swiper-button-prev-custom {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 1px solid #D4C5B0;
    color: #1A1A1A;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.swiper-button-next-custom:hover, .swiper-button-prev-custom:hover {
    background-color: #E85D04;
    color: #FFFFFF;
    border-color: #E85D04;
    transform: scale(1.08);
}

/* Swiper Pagination Styling */
.swiper-pagination-bullet {
    background: #8C7A6B;
    opacity: 0.4;
}
.swiper-pagination-bullet-active {
    background: #E85D04 !important;
    opacity: 1;
    width: 20px;
    border-radius: 6px;
}

/* Swiper Wrapper Height Override Fix */
.swiper-wrapper {
    height: auto !important;
}

/* Continuous Marquee Easing for Media Swiper */
.mediaSwiper .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}
.mediaSwiper .swiper-slide {
    width: auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Custom Styled Select Dropdown Arrow Positioning */
select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238C7A6B' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1.25rem center !important;
    background-size: 1.1em 1.1em !important;
    padding-right: 3rem !important;
}

/* Accordion transition */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.15s linear, opacity 0.15s linear;
    opacity: 0;
}

.accordion-item {
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.accordion-item:hover {
    background-color: #FAF6F0 !important;
    border-color: #C89D66 !important;
}

.accordion-item.active .accordion-content {
    max-height: 300px;
    opacity: 1;
    transition: max-height 0.2s linear, opacity 0.2s linear;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
    transition: transform 0.2s linear;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #FAF7F2;
}
::-webkit-scrollbar-thumb {
    background: #C89D66;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #E85D04;
}

/* Destination Slider Equal-Height Cards */
.destinationSwiper .swiper-wrapper,
.heritageSwiper .swiper-wrapper,
.spiritualSwiper .swiper-wrapper,
.natureSwiper .swiper-wrapper {
    align-items: stretch;
}
.destinationSwiper .swiper-slide,
.heritageSwiper .swiper-slide,
.spiritualSwiper .swiper-slide,
.natureSwiper .swiper-slide {
    height: auto !important;
    display: flex;
    align-items: stretch;
}

/* Pulse animation for play button */
@keyframes pulse-ring {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(232, 93, 4, 0.7);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 16px rgba(232, 93, 4, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(232, 93, 4, 0);
    }
}
.pulse-btn {
    animation: pulse-ring 2.5s infinite;
}

/* Floating WhatsApp Pulse Animation */
@keyframes whatsapp-bounce {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 10px 20px rgba(37, 211, 102, 0.4);
    }
    50% {
        transform: translateY(-6px) scale(1.05);
        box-shadow: 0 16px 25px rgba(37, 211, 102, 0.6);
    }
}
.animate-whatsapp-float {
    animation: whatsapp-bounce 3s ease-in-out infinite;
}

/* Scroll To Top Gentle Bounce Animation */
@keyframes scrolltop-pulse {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 10px 20px rgba(232, 93, 4, 0.4);
    }
    50% {
        transform: translateY(-5px);
        box-shadow: 0 16px 25px rgba(232, 93, 4, 0.6);
    }
}
.animate-scrolltop-bounce {
    animation: scrolltop-pulse 2.8s ease-in-out infinite;
}

/* Mobile Sidebar Media Queries (320px to 991px) */
@media (max-width: 991px) {
    .desktop-nav-container {
        display: none !important;
    }
    .mobile-hamburger-btn {
        display: flex !important;
    }
}
@media (min-width: 992px) {
    .desktop-nav-container {
        display: flex !important;
    }
    .mobile-hamburger-btn {
        display: none !important;
    }
}

.banner-btn-bg {
    background: linear-gradient(90deg, #F26522 0%, #F5A623 100%);
}
.banner-btn-bg:hover {
    filter: brightness(.95);
}

/* Floating Blurred Animal Footprint Keyframe Animations */
@keyframes footprint-float-slow {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
    }
    50% {
        transform: translateY(-18px) rotate(8deg) scale(1.06);
    }
}

@keyframes footprint-float-reverse {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
    }
    50% {
        transform: translateY(16px) rotate(-10deg) scale(0.95);
    }
}

.animate-footprint-slow {
    animation: footprint-float-slow 7s ease-in-out infinite;
}

.animate-footprint-reverse {
    animation: footprint-float-reverse 9s ease-in-out infinite;
}

/* Clean & Smooth Card Expansion Animation for Section 5 */
@media (min-width: 640px) {
    .guide-card-stack .guide-card {
        transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease, box-shadow 0.5s ease;
        transform-origin: center center;
    }

    /* Layering: Card 1 is bottom, Card 2 on top of 1, Card 3 on top of 2, Card 4 on top of 3 */
    .guide-card-stack .guide-card-1 {
        z-index: 1;
    }
    .guide-card-stack .guide-card-2 {
        z-index: 2;
    }
    .guide-card-stack .guide-card-3 {
        z-index: 3;
    }
    .guide-card-stack .guide-card-4 {
        z-index: 4;
    }

    /* Collapsed Initial State: Cards 2, 3, 4 are stacked directly ON TOP of Card 1 */
    .guide-card-stack:not(.aos-animate) .guide-card-1 {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    .guide-card-stack:not(.aos-animate) .guide-card-2 {
        transform: translate3d(calc(-100% - 1.5rem), 0, 0);
        opacity: 1;
    }
    .guide-card-stack:not(.aos-animate) .guide-card-3 {
        transform: translate3d(calc(-200% - 3rem), 0, 0);
        opacity: 1;
    }
    .guide-card-stack:not(.aos-animate) .guide-card-4 {
        transform: translate3d(calc(-300% - 4.5rem), 0, 0);
        opacity: 1;
    }

    /* Expanded State: All cards move to 0 offset (their natural grid slot) */
    .guide-card-stack.aos-animate .guide-card {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

/* Sticky Stacking Itinerary Day Cards Effect */
@media (min-width: 640px) {
    .sticky-itinerary-container {
        padding-bottom: 2rem;
    }
    .itinerary-card-item {
        transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    .itinerary-card-item > div:last-child {
        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
    }
}

/* Big Park Cards — Hover Lift & Transition */
.park-big-card {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s ease;
    will-change: transform;
}
.park-big-card:hover {
    transform: translateY(-8px);
}

/* CSS Infinite Marquee */
.marquee-container {
    display: flex;
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-content {
    display: flex;
    flex-shrink: 0;
    gap: 3rem;
    align-items: center;
    min-width: 100%;
    animation: marquee-scroll 30s linear infinite;
}
.marquee-content:hover {
    animation-play-state: paused;
}
@keyframes marquee-scroll {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}

            @keyframes floatLeaf1 {
                0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
                10% { opacity: 0.85; }
                90% { opacity: 0.85; }
                100% { transform: translate(100px, 200px) rotate(140deg); opacity: 0; }
            }
            @keyframes floatLeaf2 {
                0% { transform: translate(0, 0) rotate(45deg); opacity: 0; }
                10% { opacity: 0.75; }
                90% { opacity: 0.75; }
                100% { transform: translate(-80px, 150px) rotate(-110deg); opacity: 0; }
            }
            @keyframes floatLeaf3 {
                0% { transform: translate(0, 0) rotate(-30deg); opacity: 0; }
                10% { opacity: 0.65; }
                90% { opacity: 0.65; }
                100% { transform: translate(120px, 250px) rotate(90deg); opacity: 0; }
            }

/* Destination Slider Pagination */
.dest-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #D4C5B0;
    opacity: 1;
    transition: all 0.3s ease;
}

.dest-pagination .swiper-pagination-bullet-active {
    background-color: #ED4409;
    width: 28px;
    border-radius: 5px;
}

/* Testimonials Manual Slider */
.testi-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
}

.testi-marquee-track {
    display: flex;
    gap: 24px;
    width: max-content;
    padding: 0 20px;
    transition: transform 0.5s ease;
}

.testi-marquee-item {
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .testi-marquee-track {
        gap: 28px;
    }
}

@media (min-width: 1024px) {
    .testi-marquee-track {
        gap: 32px;
    }
}

/* Instagram Reels Infinite Marquee */
.reels-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
}

.reels-marquee-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: reelsScroll 35s linear infinite;
    padding: 0 20px;
}

.reels-marquee-item {
    flex-shrink: 0;
}

.reels-marquee-wrapper:hover .reels-marquee-track {
    animation-play-state: paused;
}

@keyframes reelsScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (min-width: 640px) {
    .reels-marquee-track {
        gap: 24px;
    }
}

@media (min-width: 1024px) {
    .reels-marquee-track {
        gap: 28px;
    }
}

.journey-item:hover .journey-year,
.journey-item:hover .journey-subtitle {
    color: #ED4409 !important;
}

/* ==========================================================================
   GLOBAL BRAND LOGO SLIDER MARQUEE (footer.html)
   ========================================================================== */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}
.animate-marquee {
    animation: marquee 25s linear infinite;
}
.logo-marquee-container:hover .animate-marquee {
    animation-play-state: paused;
}

/* ==========================================================================
   TEXT SLIDER TICKER MARQUEE (index.html / destinations/single.html)
   ========================================================================== */
.slider-container {
    overflow: hidden;
}
.slider-track {
    display: flex;
    width: max-content;
    animation: slider-scroll 40s linear infinite;
}
.slider-track:hover {
    animation-play-state: paused;
}
@keyframes slider-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.333%);
    }
}

/* ==========================================================================
   DESTINATION DETAILS PAGE PRICING TABLE (destinations/single.html)
   ========================================================================== */
.price-table-body .grid > div:not(:last-child) {
    border-right: 1px solid #e5e7eb;
}

/* ==========================================================================
   ITINERARY TIMELINE STACK CARD ANIMATIONS (itinerary/single.html)
   ========================================================================== */
.tl-stack {
    position: relative;
    padding-left: 0;
}
.tl-stack::before {
    content: '';
    position: absolute;
    left: 23px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #F4DDD4;
    z-index: 0;
}
.tl-stack-card {
    position: sticky;
    top: 80px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    border-radius: 16px;
    margin-bottom: 40px;
    transition: box-shadow 0.4s ease;
}
.tl-stack-card + .tl-stack-card {
    margin-top: -20px;
}
.tl-stack-num {
    width: 48px;
    height: 48px;
    background: #E85D3A;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(232, 93, 58, 0.3);
    flex-shrink: 0;
    margin-top: 0px;
    position: relative;
    z-index: 5;
}
.tl-stack-body {
    flex: 1;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #E8E0DA;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    min-height: 0;
}

/* Mobile: hide timeline line & day numbers, align cards cleanly */
@media (max-width: 767px) {
    .tl-stack::before {
        display: none;
    }
    .tl-stack-num {
        display: none;
    }
    .tl-stack-card {
        position: relative;
        display: block;
        margin-bottom: 16px;
    }
    .tl-stack-card + .tl-stack-card {
        margin-top: 0;
    }
    .tl-stack-img {
        display: none !important;
    }
}

/* ==========================================================================
   TESTIMONIALS MASONRY CARDS & TRANSITIONS (testimonials/list.html)
   ========================================================================== */
.font-cormorant-italic {
    font-family: 'Noto Serif', Georgia, serif;
    font-style: italic;
}
.masonry-card {
    transition: transform 0.3s ease, shadow 0.3s ease;
}
.masonry-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.08);
}
.col-anim {
    opacity: 0;
    transform: translateY(90px);
    will-change: transform, opacity;
    transition: transform 0.8s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.8s ease-in-out;
}
@keyframes fadeInCard {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-in-card {
    animation: fadeInCard 0.6s ease-out forwards;
}

/* Disable scroll fade/translate animation on mobile (testimonials page) */
@media (max-width: 767px) {
    .col-anim {
        opacity: 1 !important;
        transform: none !important;
    }
}
 
 @media (min-width: 1200px) {
    .container {
        max-width: 1024px;
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }
}     
@media (max-width: 575px) and (min-width: 320px) {
   .contact-card-img {
        object-fit: cover;
    padding: 6px;
    object-position: left;
   }
}

/* ==========================================================================
   WHY CHOOSE BANJARI MP TOURS - MOBILE STICKY COLLAPSE EFFECT
   Cards pile up at the top of the viewport while scrolling (mobile only)
   ========================================================================== */
@media (max-width: 767px) {
    .why-choose-card {
        position: -webkit-sticky;
        position: sticky;
        top: 32px;
        box-shadow: 0 10px 30px -10px rgba(31, 31, 31, 0.18);
    }
    .why-choose-card:nth-child(2) { top: 42px; }
    .why-choose-card:nth-child(3) { top: 52px; }
    .why-choose-card:nth-child(4) { top: 62px; }
    .why-choose-card:nth-child(5) { top: 72px; }
    .why-choose-card:nth-child(6) { top: 82px; }
}

/* ==========================================================================
   ABOUT PAGE - SENIOR LEADERSHIP GRID MOBILE STICKY COLLAPSE EFFECT
   Team cards pile up at the top of the viewport while scrolling (mobile only)
   ========================================================================== */
@media (max-width: 767px) {
    .leadership-grid {
        gap: 14px;
    }
    .leadership-grid > div {
        position: -webkit-sticky;
        position: sticky;
        top: 32px;
        box-shadow: 0 10px 30px -10px rgba(31, 31, 31, 0.15);
    }
    .leadership-grid > div:nth-child(2) { top: 42px; }
    .leadership-grid > div:nth-child(3) { top: 52px; }
    .leadership-grid > div:nth-child(4) { top: 62px; }
}

/* ==========================================================================
   THIN HORIZONTAL SCROLLBAR (destinations price table)
   ========================================================================== */
.table-scroll-x {
    scrollbar-width: thin;               /* Firefox */
    scrollbar-color: #d1d5db #f3f4f6;   /* Firefox thumb/track */
    -webkit-overflow-scrolling: touch;
}
.table-scroll-x::-webkit-scrollbar {
    height: 6px;
}
.table-scroll-x::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 9999px;
}
.table-scroll-x::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 9999px;
}
.table-scroll-x::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ==========================================================================
   THIN SCROLLBAR (generic - vertical & horizontal)
   ========================================================================== */
.thin-scroll {
    scrollbar-width: thin;               /* Firefox */
    scrollbar-color: #d1d5db #f3f4f6;   /* Firefox thumb/track */
    -webkit-overflow-scrolling: touch;
}
.thin-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.thin-scroll::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 9999px;
}
.thin-scroll::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 9999px;
}
.thin-scroll::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ==========================================================================
   TYPEWRITER EFFECT CURSOR & ANIMATION
   ========================================================================== */
.typewriter-cursor {
    border-right: 3px solid #F87647;
    animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #F87647; }
}

/* ==========================================================================
   REVERSE SLOW MARQUEE (left to right)
   ========================================================================== */
@keyframes marquee-reverse {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}
.animate-marquee-reverse {
    animation: marquee-reverse 65s linear infinite;
}
.logo-marquee-container:hover .animate-marquee-reverse {
    animation-play-state: paused;
}

/* ==========================================================================
   BLOG DETAIL & MARKDOWN CONTENT TYPOGRAPHY
   ========================================================================== */
.blog-lead-content h3, .blog-lead-content h2 {
    font-family: var(--font-cormorant, 'Cormorant Garamond', serif);
    font-size: 1.75rem;
    line-height: 2.125rem;
    font-weight: 600 !important;
    color: #1F1F1F;
    margin-bottom: 1rem;
}
@media (min-width: 640px) {
    .blog-lead-content h3, .blog-lead-content h2 {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
}
.blog-lead-content p {
    font-size: 1rem;
    line-height: 1.625;
    color: #554D46;
    margin-bottom: 0.75rem;
}
.blog-markdown-content h2, .blog-markdown-content h3 {
    font-family: var(--font-cormorant, 'Cormorant Garamond', serif);
    font-size: 1.625rem;
    line-height: 2rem;
    font-weight: 600 !important;
    color: #1F1F1F;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.blog-markdown-content p {
    margin-bottom: 1.25rem;
    color: #554D46;
    line-height: 1.75;
}
.blog-markdown-content ul, .blog-markdown-content ol {
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
    color: #554D46;
    line-height: 1.75;
}
.blog-markdown-content ul {
    list-style-type: disc;
}
.blog-markdown-content ol {
    list-style-type: decimal;
}
.blog-markdown-content li {
    margin-bottom: 0.375rem;
}
.blog-markdown-content strong {
    color: #1F1F1F;
    font-weight: 600 !important;
}

/* ===== Tighter section spacing (added 2026-09-28) ===== */
/* Section top/bottom padding: was 64-112px, now 36px on tablet/desktop, 32px on phones */
@media (min-width: 640px) {
    section:is(.py-16, .py-20, [class*="sm:py-16"], [class*="sm:py-20"], [class*="md:py-16"], [class*="lg:py-16"], [class*="lg:py-20"], [class*="lg:py-28"]) {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    section.pt-16[class*="sm:pt-20"] {
        padding-top: 36px !important;
    }
}
@media (max-width: 639.98px) {
    section:is(.py-16, .py-20) {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
    section.py-12 {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
    section.pt-16 {
        padding-top: 32px !important;
    }
}
/* Gap between a section heading and its content: was 48-64px */
section div.text-center.mx-auto:is(.mb-8, .mb-12, .mb-16) {
    margin-bottom: 32px !important;
}
@media (max-width: 639.98px) {
    section div.text-center.mx-auto:is(.mb-8, .mb-12, .mb-16) {
        margin-bottom: 24px !important;
    }
}
/* Sliders have no dots, so the 40px bottom padding was just empty space */
.swiper.pb-10 {
    padding-bottom: 12px !important;
}
/* Sketch strip under the reviews card */
@media (min-width: 768px) {
    .logo-marquee-container.md\:mt-10 {
        margin-top: 16px !important;
    }
}
/* "View all" style buttons under section content */
section .text-center.mt-16 {
    margin-top: 28px !important;
}
section .text-center.mt-10 {
    margin-top: 20px !important;
}
/* Testimonial slider arrows sat 32px below the cards */
#testimonials div:has(> .testi-prev) {
    margin-top: 20px !important;
}
/* Reviews card -> sketch strip gap on the home page */
section.pt-16[class*="sm:pt-20"] > .container.pb-10 {
    padding-bottom: 12px !important;
}
#heroContentContainer h1,
#heroContentContainer p,
#heroContentContainer .font-cormorant-heading {
    text-shadow: 0 2px 14px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .45);
}
/* Hero highlight icons (Wildlife / Heritage / Hill Stations / Spiritual) */
#heroContentContainer .hero-highlights {
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
/* ===== Interactive Madhya Pradesh map (home page, added 2026-09-28) ===== */
.mp-map {
    position: relative;
    aspect-ratio: 1586 / 992;
    border-radius: 1rem;
    overflow: hidden;
    background: #3f5a33;
    box-shadow: 0 12px 30px rgba(20, 35, 15, .18);
    container-type: inline-size;
    user-select: none;
    -webkit-user-select: none;
    font-family: 'Manrope', system-ui, sans-serif;
}
.mp-map-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    touch-action: pan-y;
}
.mp-map.is-zoomed .mp-map-viewport {
    touch-action: none;
    cursor: grab;
}
.mp-map.is-dragging .mp-map-viewport {
    cursor: grabbing;
}
.mp-map-stage {
    position: absolute;
    inset: 0;
    transform-origin: 0 0;
}
.mp-map.is-moving .mp-map-stage {
    will-change: transform;
}
.mp-map.is-animating .mp-map-stage,
.mp-map.is-animating .mp-pin {
    transition: transform .35s ease;
}
.mp-map-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* pins: a zero-size anchor at the exact location; counter-scaled so labels keep their size while zooming */
.mp-pin {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 2;
    transform: scale(var(--mp-inv, 1));
    transform-origin: 0 0;
    text-decoration: none;
}
.mp-pin:hover {
    z-index: 3;
}
.mp-pin-icon {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1f4a2c;
    border: 2px solid #fff;
    color: #f5c542;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
    transition: background-color .2s;
}
.mp-pin-dot {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ED4409;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.mp-pin-label {
    position: absolute;
    top: 0;
    white-space: nowrap;
    transform: translateY(-50%);
    line-height: 1.15;
}
.mp-pin[data-side="r"] .mp-pin-label { left: 15px; }
.mp-pin[data-side="l"] .mp-pin-label { right: 15px; }
.mp-pin[data-side="t"] .mp-pin-label { top: auto; bottom: 13px; left: 0; transform: translateX(-50%); }
.mp-pin[data-side="b"] .mp-pin-label { top: 13px; left: 0; transform: translateX(-50%); }
.mp-pin--place[data-side="r"] .mp-pin-label { left: 9px; }
.mp-pin--place[data-side="l"] .mp-pin-label { right: 9px; }
.mp-pin--place[data-side="t"] .mp-pin-label { bottom: 8px; }

.mp-pin--park .mp-pin-label {
    background: rgba(18, 48, 28, .92);
    color: #fff;
    padding: 3px 7px;
    border-radius: 6px;
    border: 1px solid rgba(245, 197, 66, .55);
    font-size: 11px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    transition: background-color .2s;
}
.mp-pin--park .mp-pin-label strong {
    font-weight: 700 !important;
}
.mp-pin--park .mp-pin-label em,
.mp-pin--park .mp-pin-label small {
    display: none;
    font-style: normal;
}
.mp-pin--park .mp-pin-label small {
    font-size: 9.5px;
    color: #f5d77a;
    font-weight: 500;
}
.mp-map.is-zoomed .mp-pin--park .mp-pin-label em { display: inline; }
.mp-map.is-zoomed .mp-pin--park .mp-pin-label small { display: block; }
.mp-pin--place .mp-pin-label {
    font-size: 10px;
    font-weight: 700 !important;
    color: #1f2a14;
    background: rgba(255, 255, 255, .9);
    padding: 1px 6px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.mp-pin--place .mp-pin-label small {
    display: none;
    font-weight: 500;
}
/* crowded minor places show their name only when zoomed */
.mp-map:not(.is-zoomed) .mp-pin--minor .mp-pin-label {
    display: none;
}
.mp-map.is-zoomed .mp-pin--place .mp-pin-label small {
    display: inline;
}
a.mp-pin:hover .mp-pin-icon,
a.mp-pin:hover .mp-pin-label {
    background-color: #ED4409;
}
a.mp-pin--place:hover .mp-pin-label {
    background: #fff;
    color: #ED4409;
}

.mp-map-title {
    position: absolute;
    top: 3.5%;
    right: 3%;
    text-align: right;
    pointer-events: none;
    z-index: 4;
}
.mp-map-title span {
    display: block;
    font: 700 1.45rem/1 'Cormorant Garamond', serif;
    color: #173d24;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.mp-map-title em {
    display: block;
    font: italic 500 .8rem/1.3 'Cormorant Garamond', serif;
    color: #173d24;
}
.mp-map-compass {
    width: 30px;
    height: 30px;
    margin: 6px 0 0 auto;
    display: block;
}
.mp-map-legend {
    position: absolute;
    left: 2.5%;
    bottom: 3.5%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .85);
    font-size: 10px;
    color: #2a2a1a;
    pointer-events: none;
}
.mp-map-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mp-map-legend i {
    display: inline-block;
    flex: none;
}
.mp-lg-park { width: 11px; height: 11px; border-radius: 50%; background: #1f4a2c; border: 2px solid #f5c542; }
.mp-lg-place { width: 9px; height: 9px; border-radius: 50%; background: #ED4409; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.mp-map-controls {
    position: absolute;
    right: 2.5%;
    bottom: 3.5%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mp-map-controls button {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    color: #1f4a2c;
    border: 1px solid rgba(31, 74, 44, .25);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.mp-map-controls button:hover {
    background: #1f4a2c;
    color: #fff;
}
.mp-map-hint {
    position: absolute;
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
    z-index: 4;
    margin: 0;
    font-size: 10px;
    color: #fff;
    background: rgba(0, 0, 0, .35);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity .3s;
}
.mp-map-title,
.mp-map-legend {
    transition: opacity .3s;
}
.mp-map.is-zoomed .mp-map-hint,
.mp-map.is-zoomed .mp-map-title,
.mp-map.is-zoomed .mp-map-legend {
    opacity: 0;
}
/* sizes follow the map's own width (it sits in a half-width column on desktop) */
@container (max-width: 480px) {
    .mp-map-title span { font-size: .75rem; }
    .mp-map-title em { font-size: .5rem; }
    .mp-map-compass { width: 16px; height: 16px; margin-top: 2px; }
    .mp-pin-icon { width: 16px; height: 16px; font-size: 7px; border-width: 1.5px; }
    .mp-pin[data-side="r"] .mp-pin-label { left: 11px; }
    .mp-pin[data-side="l"] .mp-pin-label { right: 11px; }
    .mp-pin[data-side="t"] .mp-pin-label { bottom: 10px; }
    .mp-pin[data-side="b"] .mp-pin-label { top: 10px; }
    .mp-pin--park .mp-pin-label { font-size: 8.5px; padding: 2px 5px; border-radius: 4px; }
    .mp-pin-dot { width: 7px; height: 7px; border-width: 1.5px; }
    .mp-map:not(.is-zoomed) .mp-pin--place .mp-pin-label { display: none; }
    .mp-pin--place .mp-pin-label { font-size: 9px; }
    .mp-map-legend { display: none; }
    /* top-left is open sky in the map image; bottom-right would cover the Pench label */
    .mp-map-controls { flex-direction: row; gap: 4px; top: 3%; bottom: auto; left: 3%; right: auto; }
    .mp-map-controls button { width: 26px; height: 26px; font-size: 10px; border-radius: 6px; }
    .mp-pin[data-side-sm] .mp-pin-label { top: 0; bottom: auto; left: auto; right: auto; transform: translateY(-50%); }
    .mp-pin[data-side-sm="r"] .mp-pin-label { left: 11px; }
    .mp-pin[data-side-sm="l"] .mp-pin-label { right: 11px; }
    .mp-pin[data-side-sm="t"] .mp-pin-label { top: auto; bottom: 10px; left: 0; transform: translateX(-50%); }
    .mp-pin[data-side-sm="b"] .mp-pin-label { top: 10px; left: 0; transform: translateX(-50%); }
    .mp-pin--place[data-side-sm="r"] .mp-pin-label { left: 7px; }
    .mp-pin--place[data-side-sm="l"] .mp-pin-label { right: 7px; }
    .mp-pin--place[data-side-sm="t"] .mp-pin-label { bottom: 6px; }
    /* above the pin but extending left, for pins near the right edge */
    .mp-pin[data-side-sm="tl"] .mp-pin-label { top: auto; bottom: 10px; left: auto; right: -8px; transform: none; }
    .mp-map-hint { display: none; }
}

/* ===== Royal home hero (approved 2026-09-29): brand-orange accents (same as header button), calmer photo, no typewriter/pulse ===== */
:root { --r-accent: #F87647; --r-accent-hover: #D9531E; --r-accent-lt: #FFA27F; --r-ivory: #F4ECDC; --r-grad: linear-gradient(90deg, #F26522 0%, #F5A623 100%); }
/* photo: calmer, warmer, less neon */
#heroBgContainer img, #heroBgContainer img.sm\:hidden { filter: saturate(.72) sepia(.14) contrast(1.06) brightness(.9) !important; }
#heroBgContainer::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16,11,4,.78) 0%, rgba(16,11,4,.5) 36%, rgba(16,11,4,.1) 62%, rgba(16,11,4,0) 78%),
    radial-gradient(ellipse 120% 90% at 70% 45%, rgba(0,0,0,0) 55%, rgba(8,5,1,.45) 100%),
    linear-gradient(0deg, rgba(10,7,2,.55) 0%, rgba(10,7,2,0) 30%); }
@media (max-width: 639.98px) { #heroBgContainer::after { background: linear-gradient(180deg, rgba(10,7,2,.5) 0%, rgba(10,7,2,.38) 50%, rgba(10,7,2,0) 72%), linear-gradient(0deg, rgba(10,7,2,.35) 0%, rgba(10,7,2,0) 25%); } #heroBgContainer img.sm\:hidden { filter: saturate(.8) sepia(.12) contrast(1.05) brightness(1.02) !important; } }
/* "No 1" strip */
#heroContentContainer .royal-strip { background: var(--r-grad); color: #fff; box-shadow: 0 8px 22px -10px rgba(0,0,0,.6); text-shadow: none; }
@media (min-width: 1024px) { #heroContentContainer { padding-top: 40px !important; } }
/* heading */
#heroContentContainer .royal-h1 { font-weight: 600 !important; font-size: clamp(34px, 5vw, 64px); line-height: 1.04; letter-spacing: .05em; margin-bottom: 0 !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.45); }
/* subtitle: same upright bold Cormorant as before, in white */
#heroContentContainer .royal-sub { display: inline-block; margin-top: .12em; font-style: normal; font-weight: 700; font-size: .84em; letter-spacing: .005em; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.55); }
/* hairline under heading */
#heroContentContainer .royal-h1::after { content: ""; display: block; width: 72px; height: 1px; margin: 14px 0 0; background: var(--r-accent); }
@media (max-width: 767.98px) { #heroContentContainer .royal-h1::after { margin-left: auto; margin-right: auto; } }
#heroContentContainer .royal-h1 + p { color: rgba(244,236,220,.86) !important; font-weight: 400; }
/* highlight icons: thin rings in the same ivory as the hero paragraph, orange icon */
#heroContentContainer .hero-highlights li > span:first-child { border: 1px solid rgba(244,236,220,.86) !important; background: rgba(16,11,4,.35) !important; color: var(--r-accent-lt) !important; }
#heroContentContainer .hero-highlights li > span:first-child i { background: var(--r-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
#heroContentContainer .hero-highlights li { border-color: rgba(248,118,71,.35) !important; }
#heroContentContainer .hero-highlights li > span:last-child { color: rgba(244,236,220,.92) !important; font-weight: 500; letter-spacing: .02em; }
/* CTA */
.royal-btn { display: inline-flex; align-items: center; gap: 4px; padding: 15px 32px; border: 0; border-radius: 2px; cursor: pointer;
  background: var(--r-grad); color: #fff;
  font: 700 12.5px/1 'Manrope', sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 12px 28px -12px rgba(248,118,71,.7); transition: background-color .25s, transform .25s; }
.royal-btn:hover { filter: brightness(.95); transform: translateY(-1px); }
@media (max-width: 639.98px) { .royal-btn { padding: 13px 20px; font-size: 13px; letter-spacing: .03em; text-transform: none; } }
/* watch video */
.royal-play { width: 56px; height: 56px; margin-bottom: 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(248,118,71,.95); background: rgba(16,11,4,.35); color: var(--r-accent-lt); font-size: 16px;
  box-shadow: 0 0 0 7px rgba(248,118,71,.18); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color .3s, color .3s; }
.group:hover .royal-play { background: var(--r-grad); color: #fff; }
.royal-play-lbl { color: var(--r-ivory); font: 600 11px/1 'Manrope', sans-serif; letter-spacing: .28em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.group:hover .royal-play-lbl { color: var(--r-accent-lt); }
.group:has(.royal-play) { box-shadow: none !important; }

/* ===== Buttons on all pages: orange -> amber gradient (2026-09-29) ===== */
:is(a, button):is([class~="bg-[#ED4409]"], [class~="bg-brand-orange"], [class~="bg-[#E65C00]"], [class~="bg-[#F05F24]"], .from-\[\#ED4409\], [class~="bg-[#338645]"], [class~="bg-[#006376]"]) {
    background-image: linear-gradient(90deg, #F26522 0%, #F5A623 100%) !important;
}
:is(a, button):is([class~="bg-[#ED4409]"], [class~="bg-brand-orange"], [class~="bg-[#E65C00]"], [class~="bg-[#F05F24]"], .from-\[\#ED4409\], [class~="bg-[#338645]"], [class~="bg-[#006376]"]):hover {
    filter: brightness(.95);
}
/* outlined buttons and round slider arrows fill with the same gradient on hover */
:is(a, button):is([class~="hover:bg-[#ED4409]"], [class~="hover:bg-brand-orange"], [class~="hover:bg-[#338645]"], [class~="hover:bg-[#006376]"]):hover {
    background-image: linear-gradient(90deg, #F26522 0%, #F5A623 100%) !important;
    border-color: transparent !important;
}
/* green outlined "View Itinerary" buttons on inner pages: orange outline like the home page */
a[class~="border-[#338645]"] {
    border-color: #ED4409 !important;
}
/* ===== Tour cards on every page: compact, so a whole card fits on one screen (2026-09-29) ===== */
.tour-grid > div > div.relative:first-child { height: 170px !important; }
.tour-grid > div > div.p-5 { padding: 14px 16px 16px !important; }
.tour-grid h3 { font-size: 18px !important; line-height: 1.25 !important; margin-bottom: 2px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical; overflow: hidden; }
.tour-grid h3 + p { margin-bottom: 10px !important; }
.tour-grid .border-t.border-b { padding-top: 7px !important; padding-bottom: 7px !important; margin-bottom: 10px !important; }
.tour-grid ul { margin-bottom: 10px !important; }
.tour-grid ul > li ~ li { margin-top: 5px !important; }
/* one line per point; long points end with an ellipsis (full text is on the itinerary page) */
.tour-grid ul > li { display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-grid ul > li > i { margin-right: 6px; }
.tour-grid .p-5 > div:has(> p:first-child + div) { margin-bottom: 10px !important; }
.tour-grid .p-5 > div:has(> p:first-child + div) > p { margin-bottom: 0 !important; }
.tour-grid .p-5 > div:last-child { padding-top: 0 !important; }
.tour-grid .p-5 > div:last-child > :is(a, button) { padding-top: 8px !important; padding-bottom: 8px !important; }

/* ===== Floating Call + WhatsApp buttons (always visible, like the earlier site) ===== */
#callFloatBtn {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 45;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    background: #F15A24;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .2px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    text-decoration: none;
    white-space: nowrap;
}
#callFloatBtn:hover {
    background: #d94c1a;
}
#whatsappFloatBtn {
    left: auto !important;
    right: 16px !important;
    bottom: 16px !important;
    width: 52px !important;
    height: 52px !important;
    font-size: 32px !important;
    border-radius: 12px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 45 !important;
}
#scrollTopBtn {
    right: 22px !important;
    bottom: 82px !important;
}
#toastNotification {
    bottom: 82px !important;
}

/* ===== Mobile header: bigger brand, clear menu button ===== */
@media (max-width: 991px) {
    .header-logo-link {
        gap: 8px;
        min-width: 0;
    }
    .header-logo-link img {
        height: 42px !important;
    }
    .header-logo-text {
        font-size: 24px !important;
        line-height: 1.1;
        white-space: nowrap;
    }
    .header-logo-text .logo-pl {
        display: none;
    }
    .mobile-hamburger-btn {
        background: #F15A24;
        color: #fff !important;
        width: 42px;
        height: 42px;
        padding: 0 !important;
        border-radius: 6px !important;
        font-size: 20px !important;
        flex-shrink: 0;
    }
    .mobile-hamburger-btn:hover {
        background: #d94c1a !important;
    }
}
@media (max-width: 359px) {
    .header-logo-text {
        font-size: 20px !important;
    }
    .header-logo-link img {
        height: 36px !important;
    }
}

/* ===== Floating buttons: simpler, tucked to the bottom edge ===== */
#callFloatBtn {
    left: 8px;
    bottom: 6px;
    padding: 9px 14px;
    font-size: 15px;
    letter-spacing: .4px;
    gap: 0;
}
#whatsappFloatBtn {
    right: 8px !important;
    bottom: 6px !important;
    width: 46px !important;
    height: 46px !important;
    font-size: 28px !important;
    animation: none !important;
    transform: none !important;
}
#scrollTopBtn {
    right: 11px !important;
    bottom: 62px !important;
}
#toastNotification {
    bottom: 62px !important;
}

/* ===== Mobile header: full name "Banjari MP Tours Private Limited" on two lines ===== */
@media (max-width: 991px) {
    .header-logo-text {
        font-size: 22px !important;
        line-height: 1 !important;
    }
    .header-logo-text .logo-pl {
        display: block;
        margin-top: 3px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 2.6px;
        text-transform: uppercase;
        color: #F15A24;
    }
}
@media (max-width: 359px) {
    .header-logo-text {
        font-size: 19px !important;
    }
    .header-logo-text .logo-pl {
        font-size: 10.5px;
        letter-spacing: 2.2px;
    }
}

/* Logo keeps its small size even before the Tailwind script has run */
.header-logo-link img {
    height: 32px;
    width: auto;
}
@media (min-width: 992px) {
    .header-logo-link img {
        height: 48px;
    }
}

/* ===== Mobile header: full name on ONE line, sized to the screen width ===== */
@media (max-width: 991px) {
    header > .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 8px !important;
    }
    .header-logo-link {
        gap: 6px;
        flex: 1 1 auto;
        min-width: 0;
    }
    .header-logo-link img {
        height: 36px !important;
    }
    .header-logo-text {
        font-size: min(26px, calc((100vw - 116px) / 13.4)) !important;
        line-height: 1.1 !important;
        white-space: nowrap;
    }
    .header-logo-text .logo-pl {
        display: inline;
        margin: 0;
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: normal;
        text-transform: none;
        color: inherit;
    }
    .mobile-hamburger-btn {
        width: 38px;
        height: 38px;
        font-size: 18px !important;
    }
}

/* Mobile header: brand name 2px bigger, "Private Limited" 2px smaller */
@media (max-width: 991px) {
    .header-logo-text {
        font-size: calc(min(26px, (100vw - 116px) / 13.4) + 2px) !important;
    }
    .header-logo-text .logo-pl {
        font-size: calc(1em - 4px);
        font-weight: 600;
    }
}

/* Hero: "Tour Operator in Madhya Pradesh" strip sits BELOW "No 1" instead of cutting across it */
span.royal-strip.absolute {
    position: static !important;
    transform: none !important;
    display: inline-block;
    margin-top: 6px;
    margin-bottom: 22px;
}
@media (min-width: 1024px) {
    span.royal-strip.absolute {
        margin-bottom: 48px;
    }
}

/* ===== Body text font ===== */
body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ===== Hero: "No 1" in the same font as the MADHYA PRADESH heading, no gap before it ===== */
#heroContentContainer .hero-no1 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 700;
    padding-left: 0 !important;
    letter-spacing: .02em;
    color: #fff;
}
#heroContentContainer .hero-tiger {
    width: 1.35em;
    height: 1.35em;
    fill: #F87647;
}
/* Phone: keep the hero text clear of the header */
@media (max-width: 639.98px) {
    #heroContentContainer .lg\:col-span-8 {
        top: 0 !important;
    }
    #heroContentContainer .hero-no1 {
        font-size: 72px;
    }
}

/* ===== Enquiry popup (Plan Your Madhya Pradesh Trip) ===== */
#bookingModal { z-index: 1001; }
.bm-wrap {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.bm-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55);
}
.bm-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.bm-close:hover { background: rgba(255, 255, 255, .38); }
.bm-head {
    padding: 26px 24px 22px;
    color: #fff;
    background: linear-gradient(135deg, #F15A24 0%, #F7941D 100%);
}
.bm-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
}
.bm-title {
    margin: 12px 0 6px;
    padding-right: 28px;
    font-family: "Cormorant Garamond", serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.08;
    color: #fff;
}
.bm-sub {
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .95);
}
.bm-form {
    padding: 20px 24px 6px;
    display: grid;
    gap: 12px;
}
.bm-field {
    position: relative;
    display: block;
}
.bm-field > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #F15A24;
    font-size: 14px;
    pointer-events: none;
}
.bm-area > i { top: 17px; transform: none; }
.bm-field input,
.bm-field textarea {
    width: 100%;
    padding: 13px 14px 13px 42px;
    border: 1px solid #EADFD6;
    border-radius: 12px;
    background: #FBF8F5;
    color: #2D2621;
    font: inherit;
    font-size: 15px;
    outline: none;
    resize: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.bm-field input:focus,
.bm-field textarea:focus {
    border-color: #F15A24;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(241, 90, 36, .14);
}
.bm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, #F15A24 0%, #F7941D 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    box-shadow: 0 12px 24px -12px rgba(241, 90, 36, .9);
    transition: transform .15s, box-shadow .15s;
}
.bm-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -12px rgba(241, 90, 36, .95); }
.bm-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    padding: 14px 20px 0;
    font-size: 12px;
    font-weight: 600;
    color: #5A4A3F;
}
.bm-trust li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bm-trust i { color: #F15A24; }
.bm-note {
    padding: 10px 24px 18px;
    text-align: center;
    font-size: 11.5px;
    color: #8A7B70;
}
@media (max-width: 380px) {
    .bm-head { padding: 22px 18px 18px; }
    .bm-title { font-size: 26px; }
    .bm-form { padding: 16px 18px 4px; }
}

/* "No 1": full-height numeral; popup title weight */
#heroContentContainer .hero-no1 {
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
}
.bm-title { font-weight: 700 !important; color: #fff !important; }

/* ===== Text clarity: sharper, easier-to-read body and description text ===== */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
    color: #26201C;
}
/* no hair-thin weights for running text */
.font-light, .font-extralight, .font-thin {
    font-weight: 400 !important;
}
/* nothing smaller than 12px anywhere */
.text-\[9px\], .text-\[10px\], .text-\[11px\] {
    font-size: 12px !important;
    line-height: 1.45 !important;
}
.text-xs {
    font-size: 13px !important;
    line-height: 1.5 !important;
}
/* washed-out text gets full strength */
.text-white\/60, .text-white\/70, .text-white\/80, .text-white\/85, .text-white\/90 {
    color: rgba(255, 255, 255, .96) !important;
}
.text-gray-400, .text-gray-500 {
    color: #5B534D !important;
}
/* animated blocks settle on the normal text layer once shown (keeps letters crisp) */
[data-aos].aos-animate {
    transform: none !important;
}
#heroContentContainer h1,
#heroContentContainer p {
    will-change: auto !important;
}
/* hero description: tight shadow instead of a wide soft glow */
#heroContentContainer .royal-h1 + p {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .75) !important;
}
/* phone: larger description text with comfortable line spacing */
@media (max-width: 639.98px) {
    main p.text-sm, main li.text-sm, main p.text-xs, main li.text-xs,
    main p:not([class*="text-"]), main li:not([class*="text-"]) {
        font-size: 15px !important;
        line-height: 1.62 !important;
    }
    #heroContentContainer .royal-h1 + p {
        font-size: 15.5px !important;
        line-height: 1.55 !important;
    }
    footer p, footer li, footer a, footer span {
        font-size: 14px;
    }
}

/* ===== Hero video popup (plays our own video file automatically) ===== */
#heroReelModal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .92);
}
#heroReelModal video {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    background: #000;
}
#heroReelModal button {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 20px;
}

/* ================= phone polish (owner, 4 Oct) ================= */
/* overview: both lines stay readable, only the tail of line 2 fades into Read More */
.ip-ov-box.is-clamped:not(.is-open)::after { left: auto; right: 0; bottom: 0; width: 42%; height: 28px; background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 82%); }
@media (max-width: 639.98px) {
  .ip-ov-box { max-height: calc(15px * 1.62 * 2 + 3px); }
  .ip-ov-box.is-clamped:not(.is-open)::after { height: 23px; bottom: 2px; }
  /* day plan: the day number sits as a tab on top of its card, so the text gets the full width */
  .ip-lean .ip-dlist { gap: 16px; }
  .ip-lean .ip-dlist::before { display: none; }
  .ip-lean .ip-d { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ip-lean .ip-d-rail { display: flex; padding-left: 14px; }
  .ip-lean .ip-d-n { width: auto; height: auto; flex-direction: row; align-items: baseline; gap: 6px; padding: 7px 14px 6px; border-radius: 12px 12px 0 0; font-size: 15px; box-shadow: none; }
  .ip-lean .ip-d-n small { margin: 0; font-size: 10px; }
  .ip-lean .ip-d-head h3 { font-size: 20px; }
  .ip-lean .ip-d-body .dp-body { font-size: 15.5px; line-height: 1.7; }
}
/* the back-to-top button clears the sticky price bar */
@media (max-width: 991px) {
  /* phones and tablets: no form in the page flow, the sticky bar and the Enquire buttons open the same form as a popup */
  .ip-aside .ip-quote { display: none !important; }
  body:has(#ipBar) #scrollTopBtn { bottom: calc(88px + env(safe-area-inset-bottom)) !important; right: 14px !important; }
}

/* phone: review cards a little narrower, so more of the next review peeks in (owner, 4 Oct) */
@media (max-width: 639px) { .ip-lean #reviews .dp-swipe > * { flex-basis: 74%; } }

/* itinerary heading: package name on top, "Day Wise Itinerary" as a gold script line under it (owner, 4 Oct) */
.ip-lean #itinerary h2 { font-weight: 600 !important; line-height: 1.18; letter-spacing: -.005em; margin-bottom: 10px !important; }
.ip-lean #itinerary h2 .ip-dh-c { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ip-lean #itinerary h2 .ip-dh-s { display: block; margin-top: 6px; font: italic 500 .66em/1.2 "EB Garamond", "Cormorant Garamond", Georgia, serif; letter-spacing: .02em; color: #A8752B; }
.ip-lean #itinerary .text-center.max-w-3xl > div:first-child > span.font-semibold { padding: 5px 14px; border-radius: 999px; background: #fff; border: 1px solid #E9DCC6; color: #8C6524 !important; margin: 0 12px !important; font-size: 11.5px !important; }
@media (max-width: 639.98px) {
  .ip-lean .ip-d-strip { display: none !important; }
  .ip-lean #itinerary .text-center.max-w-3xl { margin-bottom: 20px !important; }
  .ip-lean #itinerary h2 { font-size: 27px !important; }
}

/* narrow desktop: the note box in the side form shows its whole 3-line text */
@media (min-width: 1024px) and (max-width: 1199px) and (max-height: 960px) { .ip-pop .bm-area textarea { height: 104px; } }

/* >>> HOME PAGE START (generated by _build/home.js from _build/home.css, do not edit here) >>> */
/* HOME PAGE: styles for the trust blocks on / only. Source: _build/home.css (written into css/style.css by _build/home.js). */

/* proof bar under the hero */
.bjh-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px 8px; }
.bjh-proof-item { display: flex; align-items: center; gap: 10px; padding: 12px 8px; min-width: 0; text-decoration: none; }
.bjh-ic { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bj-gold); color: var(--bj-gold-ink); display: flex; align-items: center; justify-content: center; font-size: 15px; background: #fff; }
.bjh-ic--g { border-color: var(--bj-line); }
.bjh-proof-txt { display: flex; flex-direction: column; min-width: 0; }
.bjh-proof-txt strong { font-family: "EB Garamond", serif; font-size: 18px; font-weight: 700; line-height: 1.12; color: var(--bj-ink); }
.bjh-proof-txt small { font-size: 13px; line-height: 1.3; color: var(--bj-muted); margin-top: 2px; }
.bjh-proof-txt .bj-stars { font-size: 14px; letter-spacing: 1px; vertical-align: 2px; margin-left: 4px; }
.bjh-proof-google { grid-column: 1 / -1; justify-content: center; border-bottom: 1px solid var(--bj-line); }
.bjh-proof-google strong { font-size: 22px; }
.bjh-proof-google:hover small { color: var(--bj-orange-hover); }
@media (min-width: 1024px) {
  .bjh-proof { grid-template-columns: 1.15fr 1fr 1.1fr 1.15fr 1.25fr; padding: 16px 10px; }
  .bjh-proof-item { padding: 6px 16px; }
  .bjh-proof-item + .bjh-proof-item { border-left: 1px solid var(--bj-line); }
  .bjh-proof-google { grid-column: auto; justify-content: flex-start; border-bottom: 0; }
  .bjh-proof-txt strong { font-size: 20px; }
  .bjh-proof-txt small { font-size: 14px; }
}
.bjh-g { flex: 0 0 auto; display: inline-block; }

/* verify us yourself */
.bjh-company { border-top: 3px solid var(--bj-gold); padding: 24px 20px; }
.bjh-company-top h3 { font-size: 30px; line-height: 1.1; font-weight: 700; color: var(--bj-ink); margin: 2px 0 8px; }
.bjh-company-top p { font-size: 15px; line-height: 1.6; color: var(--bj-muted); }
.bjh-dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 18px 0 0; border-top: 1px solid var(--bj-line); }
.bjh-dl > div { padding: 14px 0; border-bottom: 1px solid var(--bj-line); min-width: 0; }
.bjh-dl dt { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bj-gold-ink); margin-bottom: 4px; }
.bjh-dl dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--bj-text); overflow-wrap: anywhere; }
.bjh-dl dd a:not(.bj-link) { color: var(--bj-ink); font-weight: 600; }
.bjh-dl dd .bj-link { display: inline-block; margin-left: 12px; font-size: 14px; }
.bjh-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--bj-ink); }
.bjh-note { margin-top: 18px; padding: 14px 16px; background: var(--bj-ivory); border: 1px solid var(--bj-line); border-radius: 10px; font-size: 15px; line-height: 1.6; color: var(--bj-text); }
.bjh-note i { color: var(--bj-gold); margin-right: 6px; }
@media (min-width: 640px) {
  .bjh-company { padding: 32px 34px; }
  .bjh-company-top h3 { font-size: 38px; }
  .bjh-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .bjh-dl .bjh-wide { grid-column: 1 / -1; }
}
.bjh-photo { margin: 0; position: relative; border-radius: var(--bj-radius); overflow: hidden; border: 1px solid var(--bj-line); box-shadow: var(--bj-shadow); background: #fff; }
.bjh-photo img { display: block; width: 100%; height: 150px; object-fit: cover; cursor: zoom-in; }
.bjh-photo figcaption { padding: 8px 10px; font-size: 14px; color: var(--bj-muted); text-align: center; }
@media (min-width: 640px) { .bjh-photo img { height: 180px; } }

.bjh-certs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.bjh-cert { background: #fff; border: 1px solid var(--bj-line); border-radius: var(--bj-radius); padding: 12px 12px 16px; text-align: center; box-shadow: var(--bj-shadow); min-width: 0; }
.bjh-cert-frame { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--bj-ivory); border: 1px solid var(--bj-gold); outline: 1px solid var(--bj-line); outline-offset: 4px; margin: 5px 5px 16px; border-radius: 4px; overflow: hidden; }
.bjh-cert-img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.bjh-cert-ic { font-size: 34px; color: var(--bj-gold); opacity: .8; }
.bjh-tag { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; background: rgba(42, 24, 16, .82); color: #F4EBDD; font-size: 11px; line-height: 1.3; letter-spacing: .04em; }
.bjh-cert h3 { font-size: 21px; font-weight: 700; line-height: 1.15; color: var(--bj-ink); }
.bjh-cert p { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--bj-muted); overflow-wrap: anywhere; }
@media (min-width: 900px) { .bjh-certs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 36px; } .bjh-cert h3 { font-size: 24px; } .bjh-cert p { font-size: 15px; } }

/* book with confidence */
.bjh-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; counter-reset: none; }
.bjh-step { position: relative; background: #fff; border: 1px solid var(--bj-line); border-radius: 24px; padding: 22px 20px 22px; box-shadow: var(--bj-shadow); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.bjh-step::before { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0; background: var(--bj-gold); transition: width .3s ease; }
.bjh-step:hover { transform: translateY(-4px); box-shadow: var(--bj-shadow-hover); }
.bjh-step:hover::before { width: 100%; }
.bjh-step-no { position: absolute; top: 10px; right: 18px; font-size: 44px; font-weight: 700; line-height: 1; color: var(--bj-gold); opacity: .35; }
.bjh-step-ic { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bj-ivory); border: 1px solid var(--bj-line); color: var(--bj-gold-ink); font-size: 17px; margin-bottom: 14px; }
.bjh-step h3 { font-size: 23px; font-weight: 700; line-height: 1.15; color: var(--bj-ink); margin-bottom: 6px; padding-right: 30px; }
.bjh-step p { font-size: 15px; line-height: 1.6; color: var(--bj-muted); }
@media (min-width: 640px) { .bjh-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1100px) { .bjh-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.bjh-pay { position: relative; margin-top: 28px; border-radius: 24px; overflow: hidden; background: linear-gradient(150deg, #33201580 0%, transparent 60%), var(--bj-ink); color: #fff; }
.bjh-pay-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .12; pointer-events: none; }
.bjh-pay-in { position: relative; display: grid; grid-template-columns: 1fr; gap: 24px; padding: 28px 20px; }
.bjh-pay .bj-eyebrow { color: var(--bj-gold-lt); }
.bjh-pay h3 { font-size: 30px; font-weight: 700; line-height: 1.1; color: #fff; margin-bottom: 16px; }
.bjh-pay-main, .bjh-pay-side { min-width: 0; }
.bjh-pay-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0 0 16px; }
.bjh-pay-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 24px; margin: 0; min-width: 0; }
.bjh-pay-dl > div { min-width: 0; }
.bjh-pay-dl dt { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bj-gold-lt); margin-bottom: 2px; }
.bjh-pay-dl dd { margin: 0; font-family: "EB Garamond", serif; font-size: 22px; font-weight: 700; line-height: 1.2; color: #fff; overflow-wrap: anywhere; word-break: break-word; }
.bjh-pay-bank { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bjh-pay-bank img { display: block; width: auto; height: 28px; max-width: 110px; padding: 3px 6px; background: #fff; border-radius: 4px; object-fit: contain; }
.bjh-pay-dl .bjh-pay-code { display: inline-block; font-size: clamp(14px, 4.6vw, 19px); letter-spacing: .06em; color: #fff; vertical-align: middle; overflow-wrap: anywhere; }
.bjh-copy { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 4px 10px; border: 1px solid rgba(227, 200, 143, .55); border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--bj-gold-lt); font-family: Manrope, system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1; cursor: pointer; vertical-align: middle; transition: background .2s, color .2s; }
.bjh-copy:hover { background: var(--bj-gold-lt); color: var(--bj-ink); }
.bjh-copy.is-done { background: #fff; border-color: #fff; color: var(--bj-ink); }
.bjh-copy i { font-size: 12px; }
.bjh-qr { margin: 0; justify-self: center; width: 100%; max-width: 200px; padding: 10px 10px 12px; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); text-align: center; color: var(--bj-ink); }
.bjh-qr img { display: block; width: 100%; height: auto; border-radius: 8px; }
.bjh-qr figcaption { margin-top: 8px; display: grid; gap: 2px; }
.bjh-qr figcaption strong { font-family: Manrope, system-ui, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bj-ink); }
.bjh-qr figcaption span { font-size: 12px; line-height: 1.35; color: var(--bj-muted); overflow-wrap: anywhere; }
.bjh-pay p { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .85); max-width: 640px; }
.bjh-pay-logos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.bjh-pay-logos span { display: flex; align-items: center; justify-content: center; width: 62px; height: 38px; padding: 6px 8px; background: #fff; border-radius: 6px; }
.bjh-pay-logos img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.bjh-pay-side { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.bjh-pay-side ul { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 9px; }
.bjh-pay-side li { font-size: 15px; line-height: 1.45; color: #fff; }
.bjh-pay-side li i { color: var(--bj-gold-lt); margin-right: 8px; font-size: 13px; }
.bjh-pay-link { color: var(--bj-gold-lt); font-size: 15px; border-bottom: 1px solid rgba(227, 200, 143, .5); padding-bottom: 1px; }
.bjh-pay-link:hover { color: #fff; }
@media (min-width: 640px) { .bjh-pay-grid { grid-template-columns: minmax(0, 1fr) 200px; gap: 28px; align-items: start; } .bjh-pay-dl { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .bjh-pay-dl .bjh-pay-wide { grid-column: 1 / -1; } .bjh-qr { justify-self: end; } .bjh-pay-in { padding: 36px 36px; } .bjh-pay h3 { font-size: 36px; } }
@media (min-width: 1024px) { .bjh-pay-in { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 40px; padding: 44px 48px; align-items: center; } .bjh-pay-side { border-left: 1px solid rgba(227, 200, 143, .3); padding-left: 40px; } }

/* reviews */
.bjh-rating { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -24px 0 34px; font-size: 16px; color: var(--bj-muted); }
.bjh-rating strong { font-family: "EB Garamond", serif; font-size: 28px; font-weight: 700; line-height: 1; color: var(--bj-ink); }
.bjh-avatar { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bj-ivory); border: 1px solid var(--bj-gold); color: var(--bj-gold-ink); font-size: 22px; font-weight: 700; line-height: 1; }
.bjh-posted { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.3; color: var(--bj-muted); margin-top: 2px; }
.bjh-posted .bjh-g { width: 14px; height: 14px; }
.bjh-places { display: block; font-size: 13px; line-height: 1.35; color: var(--bj-gold-ink); margin-top: 2px; }

/* guest moments */
.bjh-guests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bjh-guest { position: relative; display: block; padding: 0; border: 1px solid var(--bj-line); border-radius: var(--bj-radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--bj-sand); cursor: zoom-in; box-shadow: var(--bj-shadow); }
.bjh-guest img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .5s ease; }
.bjh-guest:hover img { transform: scale(1.05); }
.bjh-guest-cap { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; background: rgba(42, 24, 16, .78); color: #F4EBDD; border: 1px solid rgba(227, 200, 143, .5); border-radius: 999px; font-size: 13px; line-height: 1.3; }
@media (min-width: 900px) { .bjh-guests { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

/* our videos */
.bjh-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bjh-video { position: relative; display: block; padding: 0; border: 0; border-radius: var(--bj-radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--bj-ink); cursor: pointer; box-shadow: var(--bj-shadow); text-align: left; }
.bjh-video--big { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.bjh-video img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .5s ease; }
.bjh-video:hover img { transform: scale(1.05); }
.bjh-video-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 10, 5, .82) 0%, rgba(20, 10, 5, .15) 55%, rgba(20, 10, 5, .2) 100%); }
.bjh-play { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -30px 0 0 -22px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .85); background: rgba(0, 0, 0, .28); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; padding-left: 3px; transition: transform .3s ease, background .3s ease; }
.bjh-video:hover .bjh-play { transform: scale(1.1); background: var(--bj-orange); border-color: var(--bj-orange); }
.bjh-video--big .bjh-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; font-size: 20px; }
.bjh-video-t { position: absolute; left: 12px; right: 12px; bottom: 9px; color: #fff; font-size: 17px; font-weight: 700; line-height: 1.15; }
.bjh-video--big .bjh-video-t { font-size: 24px; left: 16px; bottom: 14px; }
@media (min-width: 900px) {
  .bjh-videos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .bjh-video--big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .bjh-video-t { font-size: 20px; }
  .bjh-video--big .bjh-video-t { font-size: 32px; left: 22px; bottom: 20px; }
}

/* signature tours note, recognition strip */
.bjh-fine { max-width: 760px; margin: 28px auto 0; text-align: center; font-size: 15px; line-height: 1.6; color: var(--bj-muted); }
.bjh-recog { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 0 16px; margin: 0 0 26px; position: relative; z-index: 1; }
.bjh-recog img { height: 54px; width: auto; object-fit: contain; }
.bjh-recog span { font-family: "EB Garamond", serif; font-size: 20px; font-weight: 700; color: var(--bj-ink); text-align: center; }
@media (min-width: 768px) { .bjh-recog img { height: 70px; } .bjh-recog span { font-size: 24px; } }

/* signature tour cards: inclusions may wrap to two lines on the home page */
#homepackages .tour-grid ul > li { white-space: normal; overflow: visible; display: flex !important; }
#homepackages .tour-grid h3 { font-size: 21px !important; }
.bjh-proof-txt small, .bjh-posted, .bjh-places, .bjh-guest-cap { font-size: 14px; }

/* certificate frames: label sits under the artwork, never over it */
.bjh-cert-frame { flex-direction: column; align-items: stretch; }
.bjh-cert-frame .bjh-cert-img, .bjh-cert-frame .bjh-cert-ic { flex: 1 1 0; min-height: 0; }
.bjh-cert-frame .bjh-cert-ic { display: flex; align-items: center; justify-content: center; }
.bjh-cert-frame .bjh-cert-img { padding: 6px; }
.bjh-tag { position: static; flex: 0 0 auto; }
.bjh-dl dd .bj-link { display: table; margin: 6px 0 0; }
@media (min-width: 640px) { .bjh-dl dd .bj-link { display: inline-block; margin: 0 0 0 12px; } }
.bjh-story-g { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }

/* verify block: recognition badge row, certificate gallery placeholders */
.bjh-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: -14px 0 28px; }
.bjh-badges span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--bj-gold); border-radius: 999px; background: #fff; color: var(--bj-ink); font-family: Manrope, system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.bjh-badges span i { color: var(--bj-gold-ink); font-size: 13px; }
.bjh-certs-head { text-align: center; margin-top: 40px; }
.bjh-certs-head p { margin: 6px auto 0; max-width: 640px; font-size: 15px; line-height: 1.6; color: var(--bj-muted); }
.bjh-certs-head + .bjh-certs { margin-top: 18px; }
.bjh-cert-frame--soon { background: var(--bj-ivory) repeating-linear-gradient(135deg, transparent 0 14px, rgba(184, 137, 59, .07) 14px 15px); }
.bjh-cert-frame--soon .bjh-cert-ic { flex-direction: column; gap: 8px; padding: 10px 8px; opacity: 1; font-size: inherit; }
.bjh-seal { display: block; flex: 0 0 auto; }
.bjh-cert-kind { font-family: "EB Garamond", serif; font-size: 15px; font-style: italic; line-height: 1.2; color: var(--bj-gold-ink); text-align: center; }
.bjh-cert-frame--soon .bjh-tag { background: transparent; color: var(--bj-muted); border-top: 1px solid var(--bj-line); font-size: 12px; font-style: italic; letter-spacing: .02em; padding: 6px 6px 5px; }
.bjh-cert p .bjh-code { font-size: 13px; }
@media (min-width: 900px) { .bjh-badges { margin-top: -20px; } .bjh-cert-kind { font-size: 16px; } .bjh-cert p .bjh-code { font-size: 14px; } }

/* why block intro */
.bjh-why-intro { margin: 18px auto 0; max-width: 760px; font-size: 15px; line-height: 1.65; color: var(--bj-muted); }
.bjh-why-guests { margin: 10px auto 0; font-family: "EB Garamond", serif; font-size: 18px; font-style: italic; line-height: 1.4; color: var(--bj-gold-ink); }
@media (min-width: 640px) { .bjh-why-intro { font-size: 16px; } .bjh-why-guests { font-size: 20px; } }

.bjh-upi { display:block; margin-top:6px; font-size:12px; color:#5A4A3F; letter-spacing:.2px; }
.bjh-upi b { color:#2A1810; font-weight:700; }

/* mixed section order (owner, 4 Oct): neighbours keep different backgrounds */
body > section#testimonials { background: #fff !important; }
body > section#videos { background: var(--bj-sand, #F4EBDD) !important; }

/* ================= phone layout of the home page (owner, 4 Oct): shorter sections, swipe rows instead of long stacks ================= */
@media (max-width: 639px) {
  body > section:not(#home) { padding-top: 40px !important; padding-bottom: 36px !important; }
  body > section:not(#home) .text-center.max-w-3xl.mb-12, body > section:not(#home) .text-center.max-w-3xl.mb-16 { margin-bottom: 22px !important; }
  body > section:not(#home) h2.font-cormorant { font-size: 27px !important; line-height: 1.18 !important; }

  /* one swipe row: cards sit side by side, the next card peeks in from the right */
  #homepackages .tour-grid, body > section .bjh-guests, #booking .bjh-steps, #verify .bjh-certs, #testimonials .testi-slider-track {
    display: flex !important; grid-template-columns: none !important; gap: 12px !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: -16px !important; margin-right: -16px !important; padding: 4px 16px 14px !important; scroll-padding: 0 16px; max-width: none !important; }
  #homepackages .tour-grid::-webkit-scrollbar, body > section .bjh-guests::-webkit-scrollbar, #booking .bjh-steps::-webkit-scrollbar, #verify .bjh-certs::-webkit-scrollbar, #testimonials .testi-slider-track::-webkit-scrollbar { display: none; }
  #homepackages .tour-grid > *, body > section .bjh-guests > *, #booking .bjh-steps > *, #verify .bjh-certs > *, #testimonials .testi-slider-track > * { scroll-snap-align: start; transform: none !important; opacity: 1 !important; }
  #homepackages .tour-grid > * { flex: 0 0 82%; }
  body > section .bjh-guests > * { flex: 0 0 58%; }
  #booking .bjh-steps > * { flex: 0 0 76%; }
  #verify .bjh-certs > * { flex: 0 0 66%; }

  /* Google reviews: finger swipe, wider cards, rating on one clean line */
  #testimonials .text-center.max-w-3xl { margin-bottom: 12px !important; }
  #testimonials .bjh-rating { margin: 0 auto 18px !important; flex-wrap: nowrap; white-space: nowrap; gap: 6px; font-size: 14px; }
  #testimonials .bjh-rating strong { font-size: 22px; }
  #testimonials .testi-slider-wrapper { padding-left: 16px !important; padding-right: 16px !important; overflow: visible !important; }
  #testimonials .testi-slider-track { transform: none !important; transition: none !important; }
  #testimonials .testi-slider-track > .testi-slide { flex: 0 0 82% !important; width: auto !important; }
  #testimonials .testi-slide > div { min-height: 0 !important; padding: 18px !important; }
  #testimonials .testi-prev, #testimonials .testi-next { display: none !important; }
  #testimonials .testi-slider-wrapper + div, #testimonials .flex.items-center.justify-center.gap-4.mt-8 { margin-top: 6px !important; }

}

/* home hero: the "No 1 Travel Agency in Madhya Pradesh" badge is the H1, the big line is an H2; both look exactly as before */
#heroContentContainer h1.hero-h1 { font: inherit; letter-spacing: inherit; margin: 0; text-shadow: none; }
/* <<< HOME PAGE END <<< */

/* >>> ROYAL THEME START (generated from _build/royal-theme.css, do not edit here) >>> */
/* ==========================================================================
   ROYAL THEME  (source: _build/royal-theme.css, written into css/style.css by _build/build.js)
   One refined layer on top of the hand-made design. Do not edit inside css/style.css:
   edit _build/royal-theme.css and run  node _build/build.js
   --------------------------------------------------------------------------
   Tokens
     --bj-orange   #F15A24  the ONLY call-to-action colour (hover #D94C1A)
     --bj-ink      #2A1810  deep heritage ink: dark surfaces, headings
     --bj-gold     #B8893B  fine rules, small labels, icons (text on light: --bj-gold-ink, on dark: --bj-gold-lt)
     --bj-ivory    #FBF6EE  / --bj-sand #F4EBDD  section backgrounds
     --bj-text     #2B2420  body text
   Components for new markup
     .bj-btn  .bj-btn--outline  .bj-btn--light  .bj-link
     .bj-card  .bj-eyebrow  .bj-h2  .bj-rule  .bj-section(--sand|--ink)  .bj-prose  .bj-page-hero  .bj-facts
   ========================================================================== */
:root {
  --bj-orange: #F15A24; --bj-orange-hover: #D94C1A;
  --bj-ink: #2A1810; --bj-ink-2: #3B261B;
  --bj-gold: #B8893B; --bj-gold-ink: #8C6524; --bj-gold-lt: #E3C88F;
  --bj-ivory: #FBF6EE; --bj-sand: #F4EBDD; --bj-line: #E6D9C3;
  --bj-text: #2B2420; --bj-muted: #5E534B;
  --bj-radius: 14px; --bj-radius-btn: 6px;
  --bj-shadow: 0 12px 30px -20px rgba(42, 24, 16, .38), 0 1px 2px rgba(42, 24, 16, .06);
  --bj-shadow-hover: 0 20px 40px -22px rgba(42, 24, 16, .48), 0 2px 4px rgba(42, 24, 16, .08);
  /* the approved home hero keeps its layout; its accent variables now point at the single brand orange and gold */
  --r-accent: #F15A24; --r-accent-hover: #D94C1A; --r-accent-lt: #E3C88F; --r-ivory: #F4EBDD;
  --r-grad: linear-gradient(90deg, #F15A24 0%, #F15A24 100%);
}
html { overflow-x: clip; }
body { color: var(--bj-text); background: #fff; overflow-x: clip; max-width: 100%; }

/* ---------- 1. one brand orange ---------- */
[class~="bg-[#ED4409]"], [class~="bg-[#F05F24]"], [class~="bg-[#E85D3A]"], [class~="bg-[#E65C00]"], [class~="bg-[#F87647]"] { background-color: var(--bj-orange) !important; }
[class~="text-[#ED4409]"], [class~="text-[#F05F24]"], [class~="text-[#E85D3A]"], [class~="text-[#F87647]"] { color: var(--bj-orange) !important; }
[class~="hover:text-[#B8401C]"]:hover, [class~="hover:text-[#ED4409]"]:hover { color: var(--bj-orange-hover) !important; }
[class~="focus:border-[#ED4409]"]:focus { border-color: var(--bj-orange) !important; }

/* ---------- 2. buttons: one primary, one outline, one text link ---------- */
:is(a, button):is([class~="bg-[#ED4409]"], [class~="bg-brand-orange"], [class~="bg-[#E65C00]"], [class~="bg-[#F05F24]"], [class~="bg-[#E85D3A]"], .from-\[\#ED4409\], [class~="bg-[#338645]"], [class~="bg-[#006376]"], .banner-btn-bg),
.royal-btn, .bm-btn, .bj-btn {
  background-image: none !important;
  background-color: var(--bj-orange) !important;
  color: #fff !important;
  border-color: var(--bj-orange) !important;
  box-shadow: 0 10px 20px -14px rgba(241, 90, 36, .8) !important;
  filter: none !important;
  font-weight: 600 !important;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
:is(a, button):is([class~="bg-[#ED4409]"], [class~="bg-brand-orange"], [class~="bg-[#E65C00]"], [class~="bg-[#F05F24]"], [class~="bg-[#E85D3A]"], .from-\[\#ED4409\], [class~="bg-[#338645]"], [class~="bg-[#006376]"], .banner-btn-bg):not([class~="rounded-full"]),
.royal-btn, .bm-btn, .bj-btn { border-radius: var(--bj-radius-btn) !important; }
:is(a, button):is([class~="bg-[#ED4409]"], [class~="bg-brand-orange"], [class~="bg-[#E65C00]"], [class~="bg-[#F05F24]"], [class~="bg-[#E85D3A]"], .from-\[\#ED4409\], [class~="bg-[#338645]"], [class~="bg-[#006376]"], .banner-btn-bg):hover,
.royal-btn:hover, .bm-btn:hover, .bj-btn:hover {
  background-color: var(--bj-orange-hover) !important;
  border-color: var(--bj-orange-hover) !important;
  filter: none !important;
}
/* outline button */
:is(a, button):is([class~="border"], [class~="border-2"]):is([class~="border-[#ED4409]"], [class~="border-[#338645]"], [class~="border-[#F05F24]"], [class~="border-brand-orange"]):not([class~="bg-[#ED4409]"]):not([class~="bg-brand-orange"]):not([class~="bg-[#F05F24]"]):not([class~="bg-[#E85D3A]"]):not([class~="bg-[#338645]"]):not([class~="bg-[#006376]"]):not([class~="border-b"]),
.bj-btn--outline {
  background-image: none !important;
  border: 1px solid var(--bj-orange) !important;
  color: var(--bj-ink) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
:is(a, button):is([class~="border"], [class~="border-2"]):is([class~="border-[#ED4409]"], [class~="border-[#338645]"], [class~="border-[#F05F24]"], [class~="border-brand-orange"]):not([class~="bg-[#ED4409]"]):not([class~="bg-brand-orange"]):not([class~="bg-[#F05F24]"]):not([class~="bg-[#E85D3A]"]):not([class~="bg-[#338645]"]):not([class~="bg-[#006376]"]):not([class~="border-b"]):not([class~="rounded-full"]),
.bj-btn--outline { border-radius: var(--bj-radius-btn) !important; }
:is(a, button):is([class~="hover:bg-[#ED4409]"], [class~="hover:bg-brand-orange"], [class~="hover:bg-[#338645]"], [class~="hover:bg-[#006376]"], [class~="hover:bg-[#F05F24]"]):hover,
.bj-btn--outline:hover {
  background-image: none !important;
  background-color: var(--bj-orange) !important;
  border-color: var(--bj-orange) !important;
  color: #fff !important;
}
.bj-btn, .bj-btn--outline, .bj-btn--light {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 24px; border: 1px solid transparent; cursor: pointer;
  font: 600 14px/1.2 "Inter", "Segoe UI", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.bj-btn--light { background: transparent; color: #fff; border-color: rgba(227, 200, 143, .7); border-radius: var(--bj-radius-btn); }
.bj-btn--light:hover { background: rgba(227, 200, 143, .14); }
/* text link */
a[class~="border-b"][class~="border-brand-orange"], .bj-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--bj-orange) !important; background: none !important; box-shadow: none !important;
  border: 0 !important; border-bottom: 1px solid var(--bj-gold) !important; border-radius: 0 !important;
  padding: 4px 0 6px !important;
  font-weight: 600 !important; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
a[class~="border-b"][class~="border-brand-orange"]:hover, .bj-link:hover { color: var(--bj-orange-hover) !important; border-bottom-color: var(--bj-orange-hover) !important; }

/* ---------- 3. ink, ivory, sand ---------- */
[class~="bg-[#1F1F1F]"], [class~="bg-[#1A1A1A]"], [class~="bg-[#1c1c21]"], [class~="bg-[#2D2A26]"], [class~="bg-slate-900"], .bj-footer { background-color: var(--bj-ink) !important; }
[class~="bg-[#FAF8F5]"], [class~="bg-[#FAF7F2]"], [class~="bg-[#FAF6F0]"], [class~="bg-[#FDF8F5]"], [class~="bg-[#FFFAF9]"], [class~="bg-[#FCF9F8]"], [class~="bg-[#FFF8F3CC]"] { background-color: var(--bj-ivory) !important; }
[class~="bg-[#FDF6F0]"], [class~="bg-[#FAF0E4]"], [class~="bg-[#FFF4F0]"] { background-color: var(--bj-sand) !important; }
[class~="bg-[#FDF6F0]/85"] { background-color: rgba(244, 235, 221, .95) !important; }
[class~="bg-[#FFD9CC33]"], [class~="bg-[#ED440933]"] { background-color: rgba(184, 137, 59, .11) !important; }
[class~="text-[#1F1F1F]"], [class~="text-[#3D372C]"], [class~="text-[#1F2937]"] { color: var(--bj-text) !important; }
[class~="text-[#686868]"], [class~="text-[#665E55]"], [class~="text-[#6B7280]"], [class~="text-[#9CA3AF]"], [class~="text-[#554D46]"] { color: var(--bj-muted) !important; }
/* headings: heritage ink instead of orange */
:is(h1, h2, h3, h4, h5):is([class~="text-[#ED4409]"], [class~="text-[#F05F24]"], [class~="text-[#E85D3A]"], [class~="text-brand-orange"], [class~="text-[#1F1F1F]"], [class~="text-brand-dark"]) { color: var(--bj-ink) !important; }
:is([class~="bg-[#1F1F1F]"], [class~="bg-[#1A1A1A]"], [class~="bg-brand-dark"], [class~="bg-slate-900"], .bj-footer, .bj-section--ink) :is(h1, h2, h3, h4, h5):is([class~="text-[#ED4409]"], [class~="text-[#F05F24]"], [class~="text-brand-orange"], [class~="text-[#F89032]"]) { color: var(--bj-gold-lt) !important; }
[class~="text-[#F89032]"], .bj-foot-head { color: var(--bj-gold-lt) !important; }
/* headings coloured from their parent with Tailwind child variants, e.g. [&>h2]:text-[#ED4409] */
[class*=">h2]:text-[#ED4409]"] > h2, [class*=">h3]:text-[#ED4409]"] > h3, [class*=">h2]:text-[#F05F24]"] > h2, [class*=">h3]:text-[#F05F24]"] > h3 { color: var(--bj-ink) !important; }
h1.font-cormorant, h2.font-cormorant { font-weight: 600 !important; letter-spacing: .005em; }

/* ---------- 4. antique gold: fine rules, small labels, icons ---------- */
/* eyebrow label above a section heading */
span[class~="tracking-widest"]:is([class~="text-[#ED4409]"], [class~="text-[#F05F24]"], [class~="text-brand-orange"]), .bj-eyebrow {
  color: var(--bj-gold-ink) !important; text-transform: uppercase; letter-spacing: .2em !important; font-size: 12px !important; font-weight: 600 !important;
}
.bj-eyebrow { display: inline-block; margin-bottom: 10px; }
span[class~="rounded-full"][class~="w-1.5"]:is([class~="bg-[#ED4409]"], [class~="bg-[#F05F24]"]) { background-color: var(--bj-gold) !important; transform: rotate(45deg); border-radius: 0 !important; width: 5px !important; height: 5px !important; }
span:is([class~="bg-[#ED4409]/40"], [class~="bg-[#F05F24]/40"]) { background-color: rgba(184, 137, 59, .55) !important; }
/* thin gold divider under section headings */
:is(h1, h2, h3) + div:is([class~="bg-[#ED4409]"], [class~="bg-[#F05F24]"], [class~="bg-brand-orange"]), .bj-rule {
  position: relative; height: 1px !important; width: 84px !important; background: linear-gradient(90deg, transparent, var(--bj-gold) 18%, var(--bj-gold) 82%, transparent) !important; border-radius: 0 !important; overflow: visible;
}
:is(h1, h2, h3) + div:is([class~="bg-[#ED4409]"], [class~="bg-[#F05F24]"], [class~="bg-brand-orange"])::after, .bj-rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--bj-gold); transform: translate(-50%, -50%) rotate(45deg);
}
.bj-rule { margin: 14px auto 0; }
.bj-rule--left { margin-left: 0; }
/* icons */
i[class*="fa-"]:is([class~="text-[#ED4409]"], [class~="text-[#F05F24]"], [class~="text-[#E85D3A]"]),
:is(div, span, p, li)[class~="text-[#ED4409]"] > i[class*="fa-"]:only-child { color: var(--bj-gold) !important; }
/* solid icon tiles and small tags: ink with gold, so orange stays reserved for actions */
div:is([class~="bg-[#ED4409]"], [class~="bg-[#F05F24]"]):is([class~="w-10"], [class~="w-12"], [class~="w-14"]):has(> i) { background-color: var(--bj-ink) !important; color: var(--bj-gold-lt) !important; }
div:is([class~="bg-[#ED4409]"], [class~="bg-[#F05F24]"]):is([class~="w-10"], [class~="w-12"], [class~="w-14"]):has(> i) > i { color: var(--bj-gold-lt) !important; }
span:is([class~="bg-[#F05F24]"], [class~="bg-[#ED4409]"], [class~="bg-brand-orange"]):not([class~="w-1.5"]):not([class~="h-[1px]"]) { background-color: var(--bj-ink) !important; color: var(--bj-gold-lt) !important; }
/* borders: warm sandstone line; left accent bars in gold */
:not(a):not(button):not(input):not(textarea):is([class~="border-[#ED4409]"], [class~="border-[#F05F24]"], [class~="border-[#FFD9CC]"], [class~="border-[#E85D3A]"], [class~="border-[#DCC7A1]"], [class~="border-[#EDE4D8]"], [class~="border-[#E8D9C8]"], [class~="border-[#EBE3D8]"]) { border-color: var(--bj-line) !important; }
[class~="border-l-4"]:is([class~="border-[#ED4409]"], [class~="border-[#F05F24]"]) { border-left-color: var(--bj-gold) !important; }

/* ---------- 5. cards: one radius, one soft shadow ---------- */
body :not(a):not(button):not(input):not(textarea):not(i):not(span):not(img):not(iframe):is([class~="rounded-2xl"], [class~="rounded-xl"], [class~="rounded-3xl"], [class~="rounded-[28px]"], [class~="lg:rounded-[32px]"]),
.tour-grid > div, .testi-slide > div, .park-big-card, .masonry-card, .accordion-item, .bm-card, .bj-card { border-radius: var(--bj-radius) !important; }
[class~="shadow"], [class~="shadow-md"], [class~="shadow-lg"], [class~="shadow-xl"] { --tw-shadow: var(--bj-shadow) !important; --tw-shadow-colored: var(--bj-shadow) !important; }
[class~="hover:shadow-md"]:hover, [class~="hover:shadow-lg"]:hover, [class~="hover:shadow-xl"]:hover, [class~="hover:shadow-2xl"]:hover { --tw-shadow: var(--bj-shadow-hover) !important; --tw-shadow-colored: var(--bj-shadow-hover) !important; }
.bj-card { background: #fff; border: 1px solid var(--bj-line); box-shadow: var(--bj-shadow); overflow: hidden; }
.bj-card:hover { box-shadow: var(--bj-shadow-hover); }
.tour-grid > div, .testi-slide > div { border-color: var(--bj-line) !important; box-shadow: var(--bj-shadow) !important; }
.tour-grid > div:hover { box-shadow: var(--bj-shadow-hover) !important; }

/* ---------- 6. calm the decoration ---------- */
img[src*="/images/elements/"]:not([src*="-bg"]), img[src*="footer-bg-design"], img[alt="Footprint Accent"], [style*="footer-bg-design"] { display: none !important; }
img[src*="testimonial-card-bg"] { opacity: .08 !important; }
.animate-footprint-slow, .animate-footprint-reverse, .pulse-btn, .animate-whatsapp-float, .animate-scrolltop-bounce { animation: none !important; }
[class*="bg-[linear-gradient(90deg,#F26522"] { background: var(--bj-ink-2) !important; border-color: rgba(227, 200, 143, .6) !important; color: var(--bj-gold-lt) !important; }
[class*="bg-[linear-gradient(90deg,_#F26522"] { background: var(--bj-ink) !important; box-shadow: inset 0 0 0 1px rgba(227, 200, 143, .28), var(--bj-shadow) !important; }
#heroContentContainer .royal-strip { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .animate-marquee, .animate-marquee-reverse, .marquee-content, .reels-marquee-track, .slider-track { animation: none !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- 7. header, mobile menu ---------- */
header { box-shadow: 0 1px 0 var(--bj-line), 0 8px 24px -22px rgba(42, 24, 16, .5) !important; }
.header-logo-text { color: var(--bj-ink); }
.bj-menu-head { font-size: 11px; font-weight: 700 !important; letter-spacing: .18em; text-transform: uppercase; color: var(--bj-gold-ink); padding-bottom: 6px; border-bottom: 1px solid var(--bj-line); margin-bottom: 4px; }
#mobileSidebar { background-color: var(--bj-ink) !important; }
#mobileSidebar a, #mobileSidebar button { min-height: 44px; }
#mobileDestinationsMenu a { min-height: 0; padding: 4px 0; font-size: 15px; }

/* ---------- 8. enquiry popup ---------- */
.bm-head { background: var(--bj-ink) !important; border-bottom: 1px solid var(--bj-gold); }
.bm-tag { background: rgba(227, 200, 143, .14) !important; color: var(--bj-gold-lt); border: 1px solid rgba(227, 200, 143, .35); }
.bm-sub { color: rgba(244, 235, 221, .92) !important; }
.bm-field > i, .bm-trust i { color: var(--bj-gold) !important; }
.bm-field input, .bm-field textarea { border-color: var(--bj-line) !important; background: var(--bj-ivory) !important; font-size: 16px !important; border-radius: 8px !important; }
.bm-btn { background: var(--bj-orange) !important; }
.bm-note a { color: var(--bj-gold-ink); text-decoration: underline; }
.bj-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
#toastNotification { background-color: var(--bj-ink) !important; border-color: rgba(227, 200, 143, .5) !important; max-width: calc(100vw - 24px); }
#toastNotification i { color: var(--bj-gold-lt) !important; }
#callFloatBtn { background: var(--bj-orange); border-radius: var(--bj-radius-btn); }
#callFloatBtn:hover { background: var(--bj-orange-hover); }
/* phones: a full 46px tap target (same height as the WhatsApp button). Owner's wish: only the number "75875 33 222", no phone icon */
#callFloatBtn { display: inline-flex; align-items: center; justify-content: center; gap: 0; min-height: 46px; padding: 12px 16px; }
#callFloatBtn i { display: none; }
/* desktop cannot dial: the bottom-left button becomes an enquiry button there (phones keep Call + WhatsApp exactly as before) */
#planFloatBtn { display: none; }
@media (min-width: 992px) {
  #callFloatBtn { display: none !important; }
  #planFloatBtn { display: inline-flex; align-items: center; position: fixed; left: 8px; bottom: 6px; z-index: 45; padding: 11px 18px; border: 0; cursor: pointer;
    background: var(--bj-orange); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .04em; line-height: 1; border-radius: var(--bj-radius-btn); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
  #planFloatBtn:hover { background: var(--bj-orange-hover); }
}
/* recognition line above the hotel logo strip (shared by every page) */
.bj-recog { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 0 16px; margin: 0 0 26px; position: relative; z-index: 1; }
.bj-recog img { height: 54px; width: auto; object-fit: contain; }
.bj-recog img[alt="IATTE"] { height: 40px; margin-left: 18px; }
.bj-recog span { font-family: "EB Garamond", serif; font-size: 20px; font-weight: 700; color: var(--bj-ink); text-align: center; }
@media (min-width: 768px) { .bj-recog img { height: 70px; } .bj-recog span { font-size: 24px; } }
.bj-strip-label { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--bj-gold-ink); margin: 0 0 14px; position: relative; z-index: 1; }
#scrollTopBtn { background-color: var(--bj-ink) !important; background-image: none !important; color: var(--bj-gold-lt) !important; box-shadow: var(--bj-shadow) !important; border: 1px solid rgba(227, 200, 143, .4) !important; }

/* ---------- 9. footer: proof strip + readable legal block ---------- */
.bj-footer { border-top: 1px solid var(--bj-gold) !important; color: rgba(255, 255, 255, .9); }
@media (max-width: 991.98px) { .bj-footer { padding-bottom: 76px !important; } }
.bj-footer .bj-foot-ic { color: var(--bj-gold-lt); width: 14px; text-align: center; }
.bj-footer ul a:hover { color: var(--bj-gold-lt) !important; }
.bj-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; padding: 26px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.bj-proof-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bj-proof-ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(227, 200, 143, .55); display: flex; align-items: center; justify-content: center; color: var(--bj-gold-lt); font-size: 15px; }
.bj-proof-txt { display: flex; flex-direction: column; min-width: 0; }
.bj-proof-txt strong { color: #fff; font-family: "EB Garamond", serif; font-size: 19px; font-weight: 700; line-height: 1.15; }
.bj-proof-txt small { color: rgba(255, 255, 255, .78); font-size: 13px; line-height: 1.35; }
.bj-proof-google { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 10px 18px; border: 1px solid rgba(227, 200, 143, .45); border-radius: var(--bj-radius-btn); color: #fff; font-size: 14px; font-weight: 600; }
.bj-proof-google:hover { background: rgba(227, 200, 143, .12); }
.bj-legal { display: grid; gap: 24px; padding: 26px 0; }
.bj-legal-grid { display: grid; grid-template-columns: 1fr; gap: 14px 28px; margin: 0; }
.bj-legal-grid dt { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bj-gold-lt); margin-bottom: 3px; }
.bj-legal-grid dd { margin: 0; color: #fff; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.bj-legal-grid dd a:hover { color: var(--bj-gold-lt); }
.bj-pay h5 { font-size: 11px; font-weight: 700 !important; letter-spacing: .16em; text-transform: uppercase; color: var(--bj-gold-lt); margin-bottom: 10px; }
.bj-pay img { background: #fff; border-radius: 4px; padding: 2px; }
.bj-pay-note { margin-top: 12px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.bj-pay-note a { color: var(--bj-gold-lt); text-decoration: underline; }
@media (min-width: 640px) { .bj-legal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bj-legal-wide { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .bj-proof { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; }
  .bj-proof-google { grid-column: auto; }
  .bj-legal { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  .bj-legal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bj-legal-wide { grid-column: span 2; }
}

/* ---------- 10. building blocks for new pages ---------- */
.bj-section { padding: 44px 0; background: #fff; }
.bj-section--ivory { background: var(--bj-ivory); }
.bj-section--sand { background: var(--bj-sand); }
.bj-section--ink { background: var(--bj-ink); color: rgba(255, 255, 255, .92); }
.bj-section--ink .bj-h2 { color: #fff; }
.bj-section--ink .bj-eyebrow { color: var(--bj-gold-lt) !important; }
@media (min-width: 768px) { .bj-section { padding: 64px 0; } }
.bj-h2 { font-family: "EB Garamond", serif; font-weight: 600 !important; font-size: clamp(28px, 4.2vw, 40px); line-height: 1.12; color: var(--bj-ink); }
.bj-head { text-align: center; max-width: 760px; margin: 0 auto 32px; }
.bj-head p { margin-top: 14px; color: var(--bj-muted); font-size: 16px; line-height: 1.65; }
.bj-page-hero { background: var(--bj-ink); color: #fff; padding: 40px 0 44px; border-bottom: 1px solid var(--bj-gold); text-align: center; }
.bj-page-hero .bj-crumb { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--bj-gold-lt); margin-bottom: 14px; }
.bj-page-hero .bj-crumb a { color: #fff; }
.bj-page-hero h1 { font-family: "EB Garamond", serif; font-weight: 600 !important; font-size: clamp(34px, 6vw, 56px); line-height: 1.08; color: #fff; }
.bj-page-hero p { max-width: 640px; margin: 14px auto 0; font-size: 16px; line-height: 1.6; color: rgba(244, 235, 221, .92); }
@media (min-width: 768px) { .bj-page-hero { padding: 64px 0 68px; } }
.bj-prose { max-width: 820px; margin: 0 auto; font-size: 16px; line-height: 1.75; color: var(--bj-text); }
.bj-prose h2 { font-family: "EB Garamond", serif; font-weight: 700 !important; font-size: 26px; line-height: 1.2; color: var(--bj-ink); margin: 34px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--bj-line); }
.bj-prose p { margin: 0 0 14px; }
.bj-prose ul { list-style: disc; padding-left: 22px; margin: 0 0 16px; }
.bj-prose li { margin-bottom: 8px; }
.bj-prose a { color: var(--bj-orange); text-decoration: underline; text-underline-offset: 3px; }
.bj-prose table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 15px; }
.bj-prose th, .bj-prose td { text-align: left; padding: 11px 12px; border: 1px solid var(--bj-line); vertical-align: top; }
.bj-prose th { background: var(--bj-sand); color: var(--bj-ink); font-weight: 700; }
.bj-prose .bj-updated { font-size: 14px; color: var(--bj-muted); }
.bj-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bj-fact { background: #fff; border: 1px solid var(--bj-line); border-radius: var(--bj-radius); padding: 18px 14px; text-align: center; box-shadow: var(--bj-shadow); }
.bj-fact strong { display: block; font-family: "EB Garamond", serif; font-size: 30px; font-weight: 700; line-height: 1.05; color: var(--bj-ink); }
.bj-fact span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--bj-muted); }
.bj-fact i { color: var(--bj-gold); font-size: 20px; margin-bottom: 10px; }
@media (min-width: 900px) { .bj-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .bj-fact strong { font-size: 36px; } }
.bj-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .bj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) { .bj-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bj-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* two cards per row on phones (destination hub) */
.bj-grid--2m { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bj-grid--2m .bj-dest { aspect-ratio: 3 / 4; }
.bj-grid--2m .bj-dest-txt { left: 12px; right: 12px; bottom: 12px; }
.bj-grid--2m .bj-dest-txt strong { font-size: 20px; }
.bj-grid--2m .bj-dest-txt span { font-size: 12px; letter-spacing: .04em; }
@media (min-width: 640px) { .bj-grid--2m { gap: 20px; } .bj-grid--2m .bj-dest { aspect-ratio: 4 / 3; } .bj-grid--2m .bj-dest-txt strong { font-size: 24px; } }
.bj-dest { position: relative; display: block; border-radius: var(--bj-radius); overflow: hidden; background: var(--bj-ink); box-shadow: var(--bj-shadow); aspect-ratio: 4 / 3; }
.bj-dest img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.bj-dest:hover img { transform: scale(1.04); }
.bj-dest::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(42, 24, 16, .88) 0%, rgba(42, 24, 16, .1) 58%, rgba(42, 24, 16, 0) 100%); }
.bj-dest-txt { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; color: #fff; }
.bj-dest-txt strong { display: block; font-family: "EB Garamond", serif; font-size: 24px; font-weight: 700; line-height: 1.1; }
.bj-dest-txt span { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--bj-gold-lt); }
.bj-review { display: flex; flex-direction: column; gap: 14px; height: 100%; background: #fff; border: 1px solid var(--bj-line); border-radius: var(--bj-radius); padding: 22px 20px; box-shadow: var(--bj-shadow); }
.bj-review p { font-size: 16px; line-height: 1.65; color: var(--bj-text); }
.bj-review footer, .bj-review .bj-review-by { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--bj-line); }
.bj-review-by strong { font-size: 15px; color: var(--bj-ink); font-weight: 700; }
.bj-review-by span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bj-muted); white-space: nowrap; }
.bj-stars { color: var(--bj-gold); letter-spacing: 2px; font-size: 15px; }
.testi-slide .bj-stars { display: block; margin-bottom: 10px; }

/* ---------- 10b. enquiry panel photo (per page, set by _build/lib/panel.js) under an ink shade so the white copy stays readable ---------- */
.contact-card-img { object-fit: cover; object-position: center; padding: 0 !important; z-index: 0; }
.bj-panel-shade { z-index: 0; background: linear-gradient(160deg, rgba(42, 24, 16, .9) 0%, rgba(42, 24, 16, .72) 55%, rgba(42, 24, 16, .5) 100%); }
.bj-panel-shade + .relative.z-10 { position: relative; z-index: 1; }

/* ---------- 11. phones: 15px floor for running text, 16px inputs, no sideways scroll ---------- */
@media (max-width: 639.98px) {
  body :is(p, li):is(.text-sm, .text-xs, .text-\[13px\], .text-\[14px\]):not(.bm-sub):not(.bm-note),
  body :is(main, section, article) :is(p, li):not([class*="text-"]),
  body :is(div, ul)[class~="text-sm"] > :is(p, li, div):not([class*="text-"]) { font-size: 15px !important; line-height: 1.62 !important; }
  .bj-footer p, .bj-footer li, .bj-footer li a, .bj-footer li span { font-size: 15px !important; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
  .bj-btn, .bj-btn--outline, .bj-btn--light { white-space: normal; text-align: center; }
  img, iframe, video, table { max-width: 100%; }
}
/* ========================== END ROYAL THEME ========================== */

/* ---- hero height: a compact banner on large screens instead of a full-screen photo (owner, 3 Oct) ---- */
@media (min-width: 1024px) {
  .dp-hero, .ip-hero { aspect-ratio: auto !important; min-height: 0 !important; height: clamp(460px, 64vh, 600px); }
}
/* ---- WhatsApp buttons look like WhatsApp: green, with the logo ---- */
a.bj-btn[href*="wa.me"], a.bj-btn--light[href*="wa.me"], a.bj-btn--outline[href*="wa.me"] {
  background: #25D366 !important; border-color: #25D366 !important; color: #fff !important;
  backdrop-filter: none !important; box-shadow: 0 10px 22px -12px rgba(37, 211, 102, .9);
}
a.bj-btn[href*="wa.me"]:hover, a.bj-btn--light[href*="wa.me"]:hover, a.bj-btn--outline[href*="wa.me"]:hover { background: #1EBE5A !important; border-color: #1EBE5A !important; }
a[class*="bj-btn"][href*="wa.me"] i.fa-whatsapp { font-size: 1.5em; margin-right: 6px; vertical-align: -2px; }

/* ---- TYPE (owner, 3 Oct): clear, crisp, easy to read ----
   Body and all small text: Inter (loads on every phone and computer, unlike Segoe UI).
   Headings: EB Garamond, a sturdier serif with a taller x-height than Cormorant, so it stays sharp at card-title sizes.
   Prices and numbers: Inter bold with even-height numerals. The logo text keeps Cormorant. */
html body { font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.65; color: #26201C; -webkit-font-smoothing: auto; text-rendering: optimizeLegibility; font-feature-settings: "cv05", "cv11"; }
.font-cormorant, .font-cormorant-heading, .font-serif-heading, .royal-h1, .royal-sub, .hero-no1, .bm-title { font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif !important; font-variant-numeric: lining-nums; letter-spacing: 0; }
header .header-logo-text, header .header-logo-text .logo-pl { font-family: "Cormorant Garamond", serif !important; }
h3.font-cormorant, h4.font-cormorant { font-weight: 600 !important; letter-spacing: .005em; }
.dp-price, .dp-tprice, .dp-offer-offer strong, .ip-hero-price-v, .ip-tprice, .ip-bar-price strong, #homepackages .text-2xl.font-bold {
  font-family: "Inter", "Segoe UI", sans-serif !important; font-weight: 700 !important; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em;
}
.dp-price { font-size: 26px; } .dp-offer-offer strong { font-size: 21px; } .dp-tprice, .ip-tprice { font-size: 19px; }
/* small labels: a touch larger and darker so they read easily */
.dp-label, .bj-eyebrow { letter-spacing: .12em; }
.dp-pkg [class*="tracking-wider"], .dp-icons span, .dp-icon-l { font-size: 11.5px !important; letter-spacing: .04em !important; color: #4A4039 !important; }
p, li, dd, td { font-kerning: normal; }


/* ---- hero trust chips (all screens) ---- */
.dp-hero-chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.dp-hero-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font: 600 13px/1 "Inter", sans-serif; backdrop-filter: blur(4px); white-space: nowrap; }
.dp-hero-chips li i { color: #FFD27A; font-size: 12px; }
/* dark closing band: WhatsApp button in WhatsApp green */
a[href*="wa.me"][class*="border-white"] { background: #25D366 !important; border-color: #25D366 !important; color: #fff !important; }

/* ================= PHONE POLISH (owner, 3 Oct): the phone view must look as finished as the desktop ================= */
@media (max-width: 639px) {
  .dp-crumb-x { display: none; }
  .dp-hero { min-height: 500px !important; padding-top: 40px !important; padding-bottom: 34px !important; }
  .dp-hero h1 { font-size: 34px !important; line-height: 1.12 !important; }
  .dp-hero-sub { font-size: 16px !important; line-height: 1.55 !important; }
  .dp-hero-chips { justify-content: center; margin-top: 16px; gap: 7px; }
  .dp-hero-chips li { font-size: 12px; padding: 6px 11px; }

  /* calmer section rhythm */
  .dp section[class*="py-"] { padding-top: 46px !important; padding-bottom: 46px !important; }
  .dp h2.font-cormorant { font-size: 29px !important; line-height: 1.18 !important; }

  /* About blocks: photo first, like an editorial card */
  .dp-about { gap: 20px; }
  .dp-about-fig { order: 0; }
  .dp-about-fig img { height: 210px !important; border-radius: 16px; }

  /* recognition: two tidy rows */
  .bj-recog { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 14px 14px; max-width: 330px; margin: 0 auto 24px; padding: 14px 16px; background: #FBF6EE; border: 1px solid #EFE4D2; border-radius: 14px; }
  .bj-recog img { height: 46px; justify-self: center; margin: 0 !important; }
  .bj-recog img[alt="IATTE"] { height: 30px; }
  .bj-recog span { font-size: 17px; text-align: left; line-height: 1.25; }

  /* footer: link lists side by side */
  .bj-footer .container > .grid:first-child { grid-template-columns: 1fr 1fr !important; gap: 30px 18px !important; }
  .bj-footer .container > .grid:first-child > :first-child,
  .bj-footer .container > .grid:first-child > :last-child { grid-column: 1 / -1; }
  .bj-footer .container > .grid:first-child a { font-size: 14.5px; }

  /* filter pills: hint that the row scrolls */
  .dp-pills { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
}


/* ---- destination-specific enquiry popup: the place's photo behind the heading ---- */
.bm-head--photo { position: relative; overflow: hidden; padding-top: 34px !important; padding-bottom: 24px !important; background: #2A1810 !important; }
.bm-head--photo .bm-head-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.bm-head--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 24, 16, .35) 0%, rgba(42, 24, 16, .9) 100%); }
.bm-head--photo > *:not(.bm-head-img) { position: relative; z-index: 1; }
.bm-head--photo .bm-tag { background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(4px); }
.bm-head--photo .bm-title { font-size: 32px; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }

/* phones: hero buttons side by side in one row instead of two stacked bars (owner, 3 Oct night) */
@media (max-width: 639px) {
  .dp-hero .flex.flex-col:has(> .bj-btn), .ip-hero .flex.flex-col:has(> .bj-btn) { flex-direction: row !important; gap: 8px !important; }
  .dp-hero .flex.flex-col:has(> .bj-btn) > *, .ip-hero .flex.flex-col:has(> .bj-btn) > * { flex: 1 1 0; min-width: 0; min-height: 48px !important; padding-left: 8px !important; padding-right: 8px !important; font-size: 12.5px !important; letter-spacing: .03em !important; white-space: nowrap; }
  .dp-hero a[href*="wa.me"] i.fa-whatsapp, .ip-hero a[href*="wa.me"] i.fa-whatsapp { font-size: 1.35em !important; margin-right: 5px !important; }
}

/* ---- breadcrumb in its usual place on phones: small, top-left corner of the hero (owner, 3 Oct night) ---- */
@media (max-width: 639px) {
  .dp-hero, .ip-hero { isolation: isolate; }
  .dp-hero > .absolute, .ip-hero > .absolute { z-index: -1 !important; }
  .dp-hero > .container, .ip-hero > .container { position: static !important; }
  .dp-hero nav[aria-label="Breadcrumb"], .ip-hero nav[aria-label="Breadcrumb"] { position: absolute; top: 4px; left: 12px; right: 12px; margin: 0 !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 6px !important; font-size: 10.5px !important; letter-spacing: .1em !important; opacity: .92; overflow: hidden; white-space: nowrap; }
  .dp-hero nav[aria-label="Breadcrumb"] a, .ip-hero nav[aria-label="Breadcrumb"] a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px; }
  .dp-hero nav[aria-label="Breadcrumb"] > span, .ip-hero nav[aria-label="Breadcrumb"] > span { font-size: 12px !important; }
  .dp-hero nav[aria-label="Breadcrumb"] > span:last-child, .ip-hero nav[aria-label="Breadcrumb"] > span:last-child { font-size: 10.5px !important; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- comfortable tap sizes on phones (44px guideline) without changing how things look ---- */
@media (max-width: 767px) {
  .mobile-hamburger-btn { width: 44px !important; height: 44px !important; }
  .dp-filters .dp-pill { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .dp-readmore:not([hidden]) { min-height: 44px; padding: 10px 0 10px 14px; margin-top: 2px; }
  .dp-more { min-height: 44px; display: inline-flex; align-items: center; }
  .dp-plan-x { width: 44px; height: 44px; }
  .bj-footer a { display: inline-block; padding-top: 5px; padding-bottom: 5px; }
  .dp-offer-title { padding: 4px 0; }
  .gr-btn { min-height: 46px; }
  /* smallest labels up to a readable size */
  .dp-plan-n small { font-size: 10.5px; }
  .dp-tl-n small { font-size: 10px; }
  .dp-pkg .dp-icons li span, .dp-pkg [class*="tracking-wider"], .dp-icons span { font-size: 12px !important; }
  .dp-offer-sub, .dp-offer-per { font-size: 13px; }
}

/* footer end on phones and tablets: only as much room as the floating call + WhatsApp buttons need (owner, 4 Oct) */
@media (max-width: 991.98px) {
  .bj-footer { padding-bottom: 58px !important; }
  .bj-footer .container > div:last-child { padding-top: 14px !important; padding-bottom: 4px !important; }
}
@media (max-width: 639px) { .bj-footer .container > div:last-child > p { padding: 0 54px; font-size: 13px; line-height: 1.5; } }
/* <<< ROYAL THEME END <<< */

/* >>> DESTINATION PAGE START (generated from _build/destination-page.css, do not edit here) >>> */
/* DESTINATION PAGE: styles for pages generated by _build/build-destinations.js.
   Edit this file, then run: node _build/build-destinations.js  (it copies the block into css/style.css). */
.dp .dp-sec { padding: 52px 0; }
@media (min-width: 1024px) { .dp .dp-sec { padding: 84px 0; } }
.dp .bj-eyebrow { margin-bottom: 10px; }
.dp-text p { font-size: 16px; line-height: 1.75; color: var(--bj-text); margin: 0 0 14px; }
.dp-text p:last-child { margin-bottom: 0; }
.dp-body { font-size: 15.5px; line-height: 1.65; color: var(--bj-muted); }
.dp-label { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bj-gold-ink); margin-bottom: 6px; }
.dp-note { font-size: 15px; line-height: 1.6; color: var(--bj-muted); }
.dp-note--light { color: rgba(255, 255, 255, .78); }
.dp-figure { border-radius: var(--bj-radius); overflow: hidden; box-shadow: var(--bj-shadow); border: 1px solid var(--bj-line); background: #fff; }
.dp-figure figcaption { font-size: 14px; color: var(--bj-muted); padding: 10px 14px; }

/* hero */
.dp-hero .dp-flip { transform: scaleX(-1); }
/* hero buttons */
.dp-hero .bj-btn, .dp-hero .bj-btn--light { min-height: 50px; padding-left: 26px; padding-right: 26px; }
.dp-hero .bj-btn--light { background: rgba(42, 24, 16, .35); backdrop-filter: blur(3px); }

/* quick facts strip */
.dp-factswrap { padding: 0 0 26px; border-bottom: 1px solid var(--bj-line); }
.dp-facts { position: relative; z-index: 5; margin-top: -28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #fff; border: 1px solid var(--bj-line); border-radius: var(--bj-radius); box-shadow: var(--bj-shadow); overflow: hidden; }
.dp-fact { display: flex; gap: 12px; align-items: flex-start; padding: 16px 14px; border-top: 1px solid var(--bj-line); border-left: 1px solid var(--bj-line); margin: -1px 0 0 -1px; }
.dp-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dp-fact > i { color: var(--bj-gold); font-size: 18px; margin-top: 3px; width: 20px; text-align: center; flex: none; }
.dp-fact-l { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bj-gold-ink); }
.dp-fact-v { font-size: 15px; line-height: 1.4; color: var(--bj-ink); font-weight: 600; margin-top: 3px; }
@media (min-width: 1024px) { .dp-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: -40px; } .dp-fact { padding: 22px 20px; } .dp-fact:last-child:nth-child(odd) { grid-column: auto; } }
.dp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 20px; font-size: 15px; color: var(--bj-muted); }
.dp-trust i { color: var(--bj-gold); font-size: 12px; margin-right: 4px; }

/* package cards */
.dp-pkgs { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .dp-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .dp-pkgs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dp-pkg { transition: transform .3s ease, box-shadow .3s ease; }
.dp-pkg:hover { transform: translateY(-4px); }
.dp-tag { position: absolute; top: 12px; left: 12px; background: var(--bj-ink); color: var(--bj-gold-lt); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 4px; }
.dp-meta { font-size: 15px; color: var(--bj-muted); margin-bottom: 14px; }
.dp-meta i { color: var(--bj-gold); margin-right: 4px; }
.dp-icons { display: flex; justify-content: space-between; gap: 6px; padding: 12px 10px; margin-bottom: 14px; background: var(--bj-ivory); border-top: 1px solid var(--bj-line); border-bottom: 1px solid var(--bj-line); }
.dp-icons li { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; }
.dp-icons i { color: var(--bj-ink); font-size: 15px; }
.dp-icons span { font-family: "Inter", sans-serif; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--bj-muted); }
.dp-ticks { margin-bottom: 18px; }
.dp-ticks li { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--bj-text); margin-bottom: 8px; }
.dp-ticks li i { color: var(--bj-gold); font-size: 12px; margin-top: 6px; flex: none; }
.dp-ticks--wide { margin-top: 16px; }
.dp-ticks--wide li { font-size: 16px; line-height: 1.65; margin-bottom: 10px; }
.dp-price { font-family: "EB Garamond", serif; font-size: 32px; font-weight: 700; line-height: 1; color: var(--bj-ink); }
.dp-price span { font-family: "Inter", sans-serif; font-size: 14px; font-weight: 500; color: var(--bj-muted); margin-left: 4px; }
.dp-price--ask { font-size: 26px; }
.dp-pkg .bj-btn, .dp-pkg .bj-btn--outline { padding-left: 10px; padding-right: 10px; min-height: 46px; }

/* tables (price list, how to reach, free blocks): real table on wide screens, stacked rows on phones */
.dp-tablewrap { background: #fff; border: 1px solid var(--bj-line); border-radius: var(--bj-radius); box-shadow: var(--bj-shadow); overflow: hidden; margin-top: 6px; }
.dp-text + .dp-tablewrap { margin-top: 22px; }
.dp-table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.dp-table th { background: var(--bj-ink); color: var(--bj-gold-lt); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 14px 16px; }
.dp-table td { padding: 14px 16px; border-top: 1px solid var(--bj-line); color: var(--bj-text); vertical-align: middle; line-height: 1.5; }
.dp-table tbody tr:hover { background: var(--bj-ivory); }
.dp-tname { display: block; font-weight: 700; color: var(--bj-ink); }
a.dp-tname:hover { color: var(--bj-orange); }
.dp-tsub { display: block; font-size: 14px; color: var(--bj-muted); font-weight: 400; }
.dp-tprice { display: block; font-family: "EB Garamond", serif; font-size: 24px; font-weight: 700; color: var(--bj-ink); line-height: 1.1; white-space: nowrap; }
.dp-tact { text-align: right; white-space: nowrap; }
.dp-tact .bj-btn--outline { min-height: 40px; padding: 8px 16px; }
.dp-notes { margin: 18px auto 0; max-width: 900px; }
.dp-notes li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.6; color: var(--bj-muted); margin-bottom: 6px; }
.dp-notes li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--bj-gold); }
@media (max-width: 767px) {
  .dp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dp-table, .dp-table tbody, .dp-table td { display: block; width: 100%; }
  .dp-table tr { display: block; padding: 14px 16px; border-top: 1px solid var(--bj-line); }
  .dp-table tr[hidden] { display: none; }
  .dp-table tbody tr:first-child { border-top: 0; }
  .dp-table td { border: 0; padding: 2px 0; }
  .dp-table td:empty { display: none; }
  /* price list: name, what is included, then duration and price on one line */
  .dp-table--price tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: end; }
  .dp-table--price td:first-child, .dp-table--price .dp-tinc, .dp-table--price .dp-tact { grid-column: 1 / -1; }
  .dp-table--price td:first-child { font-size: 17px; }
  .dp-table--price .dp-tinc { font-size: 15px; color: var(--bj-muted); padding-bottom: 6px; }
  .dp-table--price td:first-child { order: 1; }
  .dp-table--price .dp-tinc { order: 2; }
  .dp-table--price td[data-label="Duration"] { order: 3; grid-column: 1; font-weight: 600; color: var(--bj-ink); padding-bottom: 4px; }
  .dp-table--price td[data-label="Starting from"] { order: 3; grid-column: 2; }
  .dp-table--price .dp-tact { order: 4; }
  .dp-table--price td[data-label="Starting from"] { text-align: right; }
  .dp-table--price .dp-tact { text-align: left; padding-top: 10px; }
  .dp-table--price .dp-tact .bj-btn--outline { width: 100%; }
  /* other tables: first cell is the row title, the rest read as "Label: value" */
  .dp-table--plain td:first-child { font-weight: 700; color: var(--bj-ink); font-size: 16.5px; }
  .dp-table--plain td + td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--bj-gold-ink); }
  .dp-table--plain td[data-label="Good to know"]::before { content: ""; }
  .dp-table--plain td[data-label="Good to know"] { color: var(--bj-muted); font-size: 15px; }
}

/* phones: card rows become a swipe row, so the page stays short */
@media (max-width: 639px) {
  .dp .dp-swipe { display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 4px 16px 14px; scroll-padding: 0 16px; }
  .dp .dp-swipe::-webkit-scrollbar { display: none; }
  .dp .dp-swipe > * { flex: 0 0 84%; scroll-snap-align: start; transform: none !important; opacity: 1 !important; }
  .dp .dp-swipe.mb-8 { margin-bottom: 18px; }
}

/* links inside running text keep the text size */
.dp-text .bj-link, .dp-body .bj-link, .dp-ticks .bj-link, .dp-note .bj-link, .dp .accordion-content .bj-link { font-size: inherit; }
.dp > section .bj-link { font-size: 15px; }
.dp-text .bj-link { font-size: inherit; }

/* season cards on the ink band */
.dp-ink { background: var(--bj-ink); }
.dp-season { border: 1px solid rgba(227, 200, 143, .35); border-radius: var(--bj-radius); padding: 24px 22px; color: #fff; background: rgba(255, 255, 255, .04); }
.dp-season > i { color: var(--bj-gold-lt); font-size: 22px; margin-bottom: 12px; }
.dp-season-m { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bj-gold-lt); margin-bottom: 4px; }
.dp-season h3 { color: #fff !important; margin-bottom: 8px; }
.dp-season-t { font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, .82); }

/* how to reach / stay / near */
.dp-mode { padding: 22px 20px; }
.dp-mode > i { color: var(--bj-gold); font-size: 22px; margin-bottom: 12px; }
.dp-near { display: block; transition: transform .3s ease, box-shadow .3s ease; }
.dp-near:hover { transform: translateY(-4px); }
.dp-near .bj-link { font-size: 15px; }

/* sample day plan */
.dp-days { max-width: 860px; margin: 0 auto; position: relative; }
.dp-days::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--bj-line); }
.dp-days li { position: relative; padding: 0 0 26px 34px; }
.dp-days li:last-child { padding-bottom: 0; }
.dp-days li::before { content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid var(--bj-gold); }
.dp-day-n { display: block; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bj-gold-ink); margin-bottom: 2px; }

/* reviews */
.dp-review { margin: 0; }
.dp-quote p { font-size: 16px; line-height: 1.65; color: var(--bj-text); }
.dp-clamp p { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.dp-more { align-self: flex-start; font-size: 15px; font-weight: 600; color: var(--bj-orange); padding: 4px 0; margin-top: -6px; }
.dp-review-trip { font-size: 14px; color: var(--bj-muted); margin-top: -4px; }
.dp-review .bj-review-by { flex-wrap: wrap; }

/* related itineraries */
.dp-related { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 1100px; margin: 0 auto; }
@media (min-width: 768px) { .dp-related { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; } }
.dp-related a, .dp-related button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; text-align: left; min-height: 52px; padding: 12px 16px; background: #fff; border: 1px solid var(--bj-line); border-radius: 10px; font-size: 15.5px; line-height: 1.4; font-weight: 600; color: var(--bj-ink); transition: border-color .2s ease, box-shadow .2s ease; }
.dp-related a:hover, .dp-related button:hover { border-color: var(--bj-gold); box-shadow: var(--bj-shadow); }
.dp-related i { color: var(--bj-gold); font-size: 12px; flex: none; }

/* enquiry form */
.dp-formside { background: var(--bj-ink); padding: 32px 24px; position: relative; overflow: hidden; }
.dp-formside::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(227, 200, 143, .28); border-radius: 10px; pointer-events: none; z-index: 2; }
/* the destination's own photo under an ink shade (set by _build/lib/panel.js); the copy sits above both */
.dp-formside-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.dp-formside-shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(160deg, rgba(42, 24, 16, .92) 0%, rgba(42, 24, 16, .76) 55%, rgba(42, 24, 16, .56) 100%); }
.dp-formside > :not(.dp-formside-photo):not(.dp-formside-shade) { position: relative; z-index: 1; }
@media (min-width: 1024px) { .dp-formside { padding: 56px 52px; } }
.dp-formside h3 { color: #fff !important; }
.dp-ring { width: 46px; height: 46px; flex: none; border: 1px solid rgba(227, 200, 143, .6); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--bj-gold-lt); }
.dp-formcall { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .85); font-size: 15px; position: relative; z-index: 1; }
.dp-formcall a { display: block; font-family: "EB Garamond", serif; font-size: 30px; font-weight: 700; color: #fff; line-height: 1.2; }
.dp-formcall span { font-size: 14px; color: rgba(255, 255, 255, .7); }

/* links inside running text read as text links, not as the uppercase action link */
.dp-text a.bj-link, .dp-body a.bj-link, .dp-ticks a.bj-link, .dp .accordion-content a.bj-link, .dp-notes a.bj-link {
  display: inline; text-transform: none; letter-spacing: 0; font-family: inherit; font-size: inherit; font-weight: 600; padding: 0; border: 0;
  color: var(--bj-orange); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--bj-gold);
}
.dp-text a.bj-link::after, .dp-body a.bj-link::after, .dp-ticks a.bj-link::after { content: none; }

/* ---- live-content sections (owner, 3 Oct 2026): rich text, Read More clamps, offer price table, filter bar, planning guide, places with Read More ---- */
.dp-rich .dp-h3 { font-family: "EB Garamond", serif; font-size: 26px; font-weight: 700; color: var(--bj-ink); margin: 20px 0 8px; line-height: 1.2; }
.dp-rich .dp-h4 { font-size: 17px; font-weight: 700; color: var(--bj-ink); margin: 14px 0 6px; }
.dp-factlist { margin: 6px 0 16px; display: grid; gap: 6px; }
.dp-factlist li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.5; color: var(--bj-ink); font-weight: 600; }
.dp-factlist li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--bj-gold); }
.dp-factlist--sm { margin: 12px 0 0; }
.dp-factlist--sm li { font-size: 14.5px; font-weight: 600; }
/* a clamped box with a Read More button right after it; the fade colour follows the background (--dp-fade) */
.dp-clampbox { position: relative; }
.dp-clampbox.dp-collapsed { overflow: hidden; }
.dp-clampbox.dp-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--dp-fade, #fff)); pointer-events: none; }
.dp .bg-brand-ivory { --dp-fade: var(--bj-ivory); }
.dp .bg-brand-sand { --dp-fade: var(--bj-sand); }
.dp .bj-card { --dp-fade: #fff; }
.dp-clamp--about.dp-collapsed { max-height: 19em; }
.dp-clamp--place.dp-collapsed { max-height: 6.8em; }
.dp-clamp--guide.dp-collapsed { max-height: 25em; }
.dp-readmore { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-family: "Inter", sans-serif; font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bj-orange); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.dp-readmore:hover { color: var(--bj-orange-hover); }
.dp-readmore i { font-size: 11px; transition: transform .25s ease; }
.dp-readmore[aria-expanded="true"] i { transform: rotate(180deg); }
.dp-readmore[hidden] { display: none; }
@media (min-width: 1024px) { .dp-about-pic { position: sticky; top: 96px; } }
/* links inside the copied text read as text links */
.dp-rich a.bj-link, .dp-glist a.bj-link, .dp-gintro a.bj-link, .dp-gitem-p a.bj-link, .dp-factlist a.bj-link, .dp-inc a.bj-link, .dp-place-text a.bj-link {
  display: inline; text-transform: none; letter-spacing: 0; font-family: inherit; font-size: inherit; font-weight: 600; padding: 0; border: 0;
  color: var(--bj-orange); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--bj-gold);
}
.dp-rich a.bj-link::after, .dp-glist a.bj-link::after, .dp-gintro a.bj-link::after, .dp-gitem-p a.bj-link::after, .dp-factlist a.bj-link::after, .dp-inc a.bj-link::after, .dp-place-text a.bj-link::after { content: none; }
.dp-hero-sub a.bj-link { display: inline; text-transform: none; letter-spacing: 0; font: inherit; padding: 0; border: 0; color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--bj-gold-lt); }
.dp-hero-sub a.bj-link::after { content: none; }

/* offer price table (the designer's Price Table): scrolls sideways inside its own box on phones */
.dp-offerwrap { background: #fff; border: 1px solid var(--bj-line); border-radius: var(--bj-radius); box-shadow: var(--bj-shadow); overflow: hidden; max-width: 100%; }
.dp-offerscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.dp-offer { width: 100%; min-width: 780px; border-collapse: collapse; table-layout: fixed; }
.dp-offer th:nth-child(1) { width: 31%; } .dp-offer th:nth-child(2) { width: 12%; } .dp-offer th:nth-child(3) { width: 12%; } .dp-offer th:nth-child(4) { width: 14%; } .dp-offer th:nth-child(5) { width: 18%; } .dp-offer th:nth-child(6) { width: 13%; }
.dp-offer th { background: var(--bj-ink); color: var(--bj-gold-lt); font-family: "Inter", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 15px 10px; border-left: 1px solid rgba(255, 255, 255, .08); white-space: nowrap; }
.dp-offer th i { font-size: 10px; margin-right: 4px; }
.dp-offer th:first-child { text-align: left; padding-left: 18px; border-left: 0; }
.dp-offer th.dp-offer-th-offer { background: var(--bj-orange); color: #fff; }
.dp-offer td { padding: 16px 10px; border-top: 1px solid var(--bj-line); border-left: 1px solid var(--bj-line); vertical-align: middle; text-align: center; font-size: 15px; color: var(--bj-text); line-height: 1.4; }
.dp-offer td:first-child { text-align: left; padding-left: 18px; border-left: 0; }
.dp-offer tbody tr:hover { background: var(--bj-ivory); }
.dp-offer tr[hidden] { display: none; }
.dp-offer-pkg { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dp-offer-thumb { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; flex: none; background: var(--bj-sand); display: block; }
.dp-offer-title { display: block; font-weight: 700; color: var(--bj-ink); font-size: 15.5px; line-height: 1.35; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.dp-offer-title:hover { color: var(--bj-orange); }
.dp-offer-sub { display: block; font-size: 13px; color: var(--bj-muted); margin-top: 3px; font-weight: 400; }
.dp-offer-c strong { display: block; font-weight: 600; color: var(--bj-ink); }
.dp-offer-normal s { color: var(--bj-muted); font-size: 15.5px; }
.dp-offer-offer { background: rgba(255, 247, 237, .7); }
.dp-offer-offer strong { font-family: "EB Garamond", serif; font-size: 25px; font-weight: 700; color: var(--bj-orange); line-height: 1.1; display: block; }
.dp-offer-per { display: block; font-size: 12px; color: var(--bj-muted); }
.dp-offer-save { display: inline-block; margin-top: 7px; background: #FFEDD5; color: #C2410C; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.dp-offer-act { padding-left: 6px !important; padding-right: 10px !important; } .dp-offer-act .bj-btn { min-height: 40px; padding: 8px 12px; font-size: 12px; width: 100%; }
.dp-offer-foot { text-align: center; padding: 14px; border-top: 1px solid var(--bj-line); }
.dp-viewmore { font-family: "Inter", sans-serif; font-weight: 700; font-size: 15px; color: var(--bj-orange); display: inline-flex; gap: 8px; align-items: center; background: none; border: 0; cursor: pointer; }
.dp-viewmore:hover { color: var(--bj-orange-hover); }
.dp-offer-pic { width: 100%; height: 540px; object-fit: cover; border-radius: var(--bj-radius); box-shadow: var(--bj-shadow); border: 1px solid var(--bj-line); }
@media (max-width: 767px) { .dp-offer-thumb { width: 60px; height: 60px; } .dp-offer td, .dp-offer th { padding-left: 8px; padding-right: 8px; } }

/* filter bar above the package cards */
.dp-filters { background: #fff; border: 1px solid var(--bj-line); border-radius: var(--bj-radius); box-shadow: var(--bj-shadow); padding: 16px 18px 12px; margin: -10px 0 26px; display: grid; gap: 12px; }
.dp-fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.dp-flabel { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bj-gold-ink); display: inline-flex; align-items: center; gap: 8px; min-width: 96px; }
.dp-flabel i { color: var(--bj-gold); font-size: 12px; }
.dp-pills { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.dp-pill { font-family: "Inter", sans-serif; font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--bj-line); background: #fff; color: var(--bj-ink); transition: border-color .2s ease, background .2s ease, color .2s ease; cursor: pointer; white-space: nowrap; }
.dp-pill:hover { border-color: var(--bj-gold); }
.dp-pill.is-on { background: var(--bj-orange); border-color: var(--bj-orange); color: #fff; }
.dp-fcount { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 14px; color: var(--bj-muted); border-top: 1px solid var(--bj-line); padding-top: 10px; }
.dp-freset { font-family: "Inter", sans-serif; font-weight: 700; color: var(--bj-orange); font-size: 13px; background: none; border: 0; cursor: pointer; }
.dp-freset[hidden], .dp-fnone[hidden] { display: none; }
.dp-pkgs--filter .dp-pkg[hidden] { display: none; }
.dp-fnone { margin-top: 20px; }
@media (max-width: 639px) {
  .dp-pkgs--filter { display: grid; grid-template-columns: 1fr; }
  .dp-filters { padding: 14px 16px 10px; }
  .dp-flabel { min-width: 100%; }
  .dp-pills { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .dp-pills::-webkit-scrollbar { display: none; }
  .dp-pill { flex: none; }
}

/* planning guide: three cards with an icon heading, fact rows and line-art at the foot */
.dp-guide { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1024px) { .dp-guide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dp-gcard { border-radius: 16px; overflow: hidden; box-shadow: var(--bj-shadow); border: 1px solid var(--bj-line); display: flex; flex-direction: column; background: #fff; transition: box-shadow .3s ease; min-width: 0; }
.dp-gcard:hover { box-shadow: var(--bj-shadow-hover); }
.dp-gcard--1 { background: #F7F6F0; --dp-fade: #F7F6F0; }
.dp-gcard--2 { background: #FFF6F3; --dp-fade: #FFF6F3; }
.dp-gcard--3 { background: #F7ECE0; --dp-fade: #F7ECE0; }
.dp-gcard-top { padding: 24px 24px 0; flex: 1; }
.dp-gcard-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.dp-gcard-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--bj-orange); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; font-size: 14px; }
.dp-gcard--3 .dp-gcard-ic { background: var(--bj-gold); }
.dp-gcard-rule { width: 48px; height: 2px; background: var(--bj-orange); margin-top: 6px; }
.dp-gcard--3 .dp-gcard-rule { background: var(--bj-gold); }
.dp-gintro { font-size: 15px; line-height: 1.6; color: var(--bj-muted); margin-bottom: 12px; }
.dp-gsub { font-family: "EB Garamond", serif; font-size: 22px; font-weight: 700; color: var(--bj-ink); margin: 2px 0 6px; }
.dp-gitems hr { border: 0; border-top: 1px solid var(--bj-line); margin: 12px 0; }
.dp-gitem { display: flex; gap: 12px; align-items: flex-start; }
.dp-gitem-ic { width: 32px; height: 32px; border-radius: 8px; background: rgba(241, 90, 36, .1); color: var(--bj-orange); display: flex; align-items: center; justify-content: center; flex: none; font-size: 12px; margin-top: 2px; }
.dp-gcard--3 .dp-gitem-ic { background: rgba(184, 137, 59, .18); color: var(--bj-gold-ink); }
.dp-gitem-t { font-size: 16px; font-weight: 700; color: var(--bj-ink); margin-bottom: 2px; line-height: 1.35; }
.dp-gitem-p { font-size: 14.5px; line-height: 1.6; color: var(--bj-muted); }
.dp-glist { margin-top: 5px; display: grid; gap: 3px; }
.dp-glist li { font-size: 14.5px; line-height: 1.55; color: var(--bj-text); padding-left: 14px; position: relative; }
.dp-glist li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--bj-gold); }
.dp-goutro { margin-top: 12px; }
.dp-gcard-top .dp-readmore { margin: 8px 0 2px; }
.dp-gcard-art { height: 13rem; margin-top: 12px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.dp-gcard-img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; opacity: .5; }
.dp-gcard-svg { width: 100%; height: 100%; opacity: .8; padding: 0 12px; }

/* places with Read More: normal stacked grid on phones (the card grows when opened) */
.dp-places-rm .dp-place { height: auto; }
.dp-place-text .dp-body + .dp-body { margin-top: 10px; }

/* inclusions and exclusions under the sample day plan */
.dp-incgrid { max-width: 1000px; margin: 32px auto 0; }
.dp-inc { padding: 24px 22px; }
.dp-inc li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.55; color: var(--bj-text); margin-bottom: 9px; }
.dp-inc li i { font-size: 12px; margin-top: 6px; flex: none; }
.dp-inc--yes li i { color: #2F8F5B; }
.dp-inc--no li i { color: #C0392B; }

/* promise cards */
.dp-feature { padding: 26px 22px; }

/* price table: the first rows sit beside the photo (photo height follows the table), View All opens the rest */
.dp-offer-foot { padding: 18px 14px; background: var(--bj-ivory); }
.dp-viewall { min-width: 240px; }
.dp-viewall i { margin-left: 8px; font-size: 12px; }

/* About blocks, newspaper style: photo floats, text wraps round it and continues under it once Read More is open */
.dp-about { display: flex; flex-direction: column; gap: 28px; }
.dp-about-fig { order: 2; margin: 0; }
@media (min-width: 1024px) {
  .dp-about { display: block; }
  .dp-about::after { content: ""; display: table; clear: both; }
  .dp-about-fig { width: 36%; }
  .dp-about--r .dp-about-fig { float: right; margin: 6px 0 22px 52px; }
  .dp-about--l .dp-about-fig { float: left; margin: 6px 52px 22px 0; }
}

/* itinerary accordion: one plan open at a time */
.dp-plans { max-width: 1040px; margin: 0 auto; display: grid; gap: 14px; }
.dp-plan { background: #fff; border: 1px solid var(--bj-line); border-radius: var(--bj-radius); box-shadow: var(--bj-shadow); overflow: hidden; }
.dp-plan > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.dp-plan > summary::-webkit-details-marker { display: none; }
.dp-plan > summary:hover { background: var(--bj-ivory); }
.dp-plan-n { flex: none; width: 58px; height: 58px; border-radius: 12px; background: var(--bj-ink); color: var(--bj-gold-lt); display: flex; flex-direction: column; align-items: center; justify-content: center; font: 700 22px/1 "Inter", sans-serif; }
.dp-plan-n small { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
.dp-plan-t { flex: 1; min-width: 0; }
.dp-plan-t strong { display: block; font-family: "EB Garamond", serif; font-size: 24px; font-weight: 600; color: var(--bj-ink); line-height: 1.2; }
.dp-plan-t em { display: block; font-style: normal; font-size: 14px; color: var(--bj-muted); margin-top: 2px; }
.dp-plan > summary > i { flex: none; color: var(--bj-orange); transition: transform .25s; }
.dp-plan[open] > summary > i { transform: rotate(180deg); }
.dp-plan[open] > summary { border-bottom: 1px solid var(--bj-line); background: var(--bj-ivory); }
.dp-plan-body { padding: 26px 22px 28px; }
@media (max-width: 639px) { .dp-plan > summary { padding: 14px; gap: 12px; } .dp-plan-n { width: 50px; height: 50px; font-size: 19px; } .dp-plan-t strong { font-size: 20px; } .dp-plan-body { padding: 20px 14px 22px; } }

/* FAQ: no photo, numbered questions in two columns, help strip under them */
.dp-faq { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 1180px; margin: 0 auto; align-items: start; }
@media (min-width: 1024px) { .dp-faq { grid-template-columns: 1fr 1fr; gap: 14px 22px; } }
.dp-faq-col { display: grid; gap: 12px; align-content: start; }
.dp-faq-item { background: #fff; border: 1px solid var(--bj-line); border-radius: 12px; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.dp-faq-item:hover { border-color: var(--bj-gold); box-shadow: var(--bj-shadow); }
.dp-faq-q { width: 100%; display: flex; align-items: center; gap: 14px; padding: 15px 18px; text-align: left; background: none; border: 0; cursor: pointer; font: 600 16px/1.4 "Inter", sans-serif; color: var(--bj-ink); }
.dp-faq-n { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bj-gold); color: var(--bj-gold); display: flex; align-items: center; justify-content: center; font: 600 13px/1 "Inter", sans-serif; letter-spacing: .04em; }
.dp-faq-t { flex: 1; min-width: 0; }
.dp-faq-q .accordion-icon { flex: none; color: var(--bj-orange); font-size: 12px; transition: transform .3s; }
.dp-faq-a > div { padding: 2px 18px 18px 68px; font-size: 15.5px; line-height: 1.7; color: var(--bj-text); }
.dp-faq-help { max-width: 1180px; margin: 26px auto 0; background: var(--bj-ink); color: #fff; border-radius: var(--bj-radius); padding: 22px 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.dp-faq-help strong { display: block; font-family: "EB Garamond", serif; font-size: 24px; font-weight: 600; line-height: 1.2; }
.dp-faq-help span { display: block; font-size: 14.5px; color: rgba(255,255,255,.82); margin-top: 3px; }
.dp-faq-help-btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 639px) { .dp-faq-a > div { padding-left: 18px; } .dp-faq-help { padding: 20px 18px; } .dp-faq-help-btns, .dp-faq-help-btns > * { width: 100%; } }

/* ---- itinerary accordion, second pass (owner, 3 Oct): nights badge, price on the header, day cards on a gold line ---- */
.dp-plans { max-width: 1080px; gap: 16px; }
.dp-plan { border-radius: 18px; border-color: #E9DCC6; box-shadow: 0 14px 34px -22px rgba(42, 24, 16, .35); transition: box-shadow .25s, border-color .25s; }
.dp-plan[open] { border-color: var(--bj-gold); box-shadow: 0 24px 50px -26px rgba(42, 24, 16, .45); }
.dp-plan > summary { padding: 16px 22px; gap: 18px; }
.dp-plan[open] > summary, .dp-plan[open] > summary:hover { background: linear-gradient(120deg, #2A1810 0%, #4A2C1B 100%); border-bottom: 0; }
.dp-plan-n { width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(145deg, #C89D66, #A9792F); color: #fff; font-size: 26px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.dp-plan-n small { font-size: 9.5px; letter-spacing: .14em; margin-top: 4px; color: rgba(255,255,255,.92); }
.dp-plan-t strong { font-size: 25px; }
.dp-plan-t em { font-size: 14px; margin-top: 3px; }
.dp-plan[open] .dp-plan-t strong { color: #fff; }
.dp-plan[open] .dp-plan-t em { color: rgba(255,255,255,.78); }
.dp-plan-p { flex: none; text-align: right; font: 700 20px/1.1 "Inter", sans-serif; color: var(--bj-orange); font-variant-numeric: lining-nums tabular-nums; }
.dp-plan-p small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bj-muted); margin-bottom: 3px; }
.dp-plan[open] .dp-plan-p { color: #FFD9A8; } .dp-plan[open] .dp-plan-p small { color: rgba(255,255,255,.7); }
.dp-plan-x { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bj-line); display: flex; align-items: center; justify-content: center; color: var(--bj-orange); background: #fff; transition: transform .25s; }
.dp-plan-x i { font-size: 13px; }
.dp-plan[open] .dp-plan-x { transform: rotate(180deg); background: var(--bj-orange); border-color: var(--bj-orange); color: #fff; }
.dp-plan-body { padding: 30px 28px 26px; background: linear-gradient(180deg, #FDFAF5 0%, #fff 140px); }
.dp-tl { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 16px; }
.dp-tl::before { content: ""; position: absolute; left: 27px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(180deg, var(--bj-gold), rgba(184,137,59,.15)); }
.dp-tl > li { display: flex; gap: 18px; align-items: flex-start; position: relative; }
.dp-tl-n { flex: none; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 2px solid var(--bj-gold); color: var(--bj-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; font: 700 20px/1 "Inter", sans-serif; position: relative; z-index: 1; box-shadow: 0 0 0 5px #FDFAF5; }
.dp-tl-n small { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8C6524; margin-bottom: 2px; }
.dp-tl-card { flex: 1; min-width: 0; background: #fff; border: 1px solid #EFE4D2; border-radius: 14px; padding: 16px 20px 18px; }
.dp-tl-card h3 { font-size: 22px; font-weight: 600 !important; color: var(--bj-ink); line-height: 1.25; margin: 0 0 6px; }
.dp-tl-card .dp-body { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--bj-text); }
.dp-iogrid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 22px; }
@media (min-width: 768px) { .dp-iogrid { grid-template-columns: 1fr 1fr; } }
.dp-io { border-radius: 14px; padding: 20px 22px; border: 1px solid; }
.dp-io--yes { background: #F3FAF4; border-color: #CFE8D3; }
.dp-io--no { background: #FDF5F3; border-color: #F3D5CD; }
.dp-io h3 { display: flex; align-items: center; gap: 10px; font: 700 13px/1 "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; }
.dp-io--yes h3 { color: #1E7A34; } .dp-io--no h3 { color: #B4432E; }
.dp-io h3 i { font-size: 18px; }
.dp-io ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.dp-io li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--bj-text); }
.dp-io li i { flex: none; margin-top: 4px; font-size: 12px; }
.dp-io--yes li i { color: #2E9C48; } .dp-io--no li i { color: #D0553D; }
.dp-planfoot { margin-top: 22px; padding: 16px 20px; border-radius: 14px; background: var(--bj-ivory); border: 1px dashed var(--bj-gold); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.dp-planfoot-p { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.dp-planfoot-p small { font: 700 11px/1 "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--bj-muted); width: 100%; }
.dp-planfoot-p strong { font: 700 28px/1 "Inter", sans-serif; color: var(--bj-orange); font-variant-numeric: lining-nums; }
.dp-planfoot-p strong.dp-planfoot-ask { font-size: 20px; color: var(--bj-ink); }
.dp-planfoot-p span { font-size: 14px; color: var(--bj-muted); }
.dp-planfoot-b { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 639px) {
  .dp-plan > summary { padding: 13px 14px; gap: 12px; flex-wrap: wrap; }
  .dp-plan-n { width: 54px; height: 54px; font-size: 21px; border-radius: 13px; }
  .dp-plan-t strong { font-size: 20px; }
  .dp-plan-p { order: 3; width: 100%; text-align: left; padding-left: 66px; font-size: 17px; }
  .dp-plan-p small { display: inline; margin-right: 6px; }
  .dp-plan-body { padding: 20px 14px 18px; }
  .dp-tl::before { left: 21px; }
  .dp-tl > li { gap: 12px; }
  .dp-tl-n { width: 44px; height: 44px; font-size: 16px; }
  .dp-tl-card { padding: 13px 14px 15px; } .dp-tl-card h3 { font-size: 19px; }
  .dp-planfoot-b, .dp-planfoot-b > * { width: 100%; }
}

/* ---- reviews shown like Google review cards ---- */
.gr-g { width: 22px; height: 22px; flex: none; }
.gr-bar { max-width: 980px; margin: 0 auto 26px; background: #fff; border: 1px solid #E3E6EA; border-radius: 16px; padding: 16px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; box-shadow: 0 10px 28px -20px rgba(32, 33, 36, .45); }
.gr-bar-l { display: flex; align-items: center; gap: 14px; }
.gr-bar-l .gr-g { width: 40px; height: 40px; }
.gr-bar-t { margin: 0; font: 600 15px/1.2 "Inter", sans-serif; color: #202124; }
.gr-bar-r { margin: 4px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 400 14px/1 "Inter", sans-serif; color: #5F6368; }
.gr-bar-r strong { font-size: 24px; font-weight: 700; color: #202124; }
.gr-stars { color: #FBBC04; font-size: 18px; letter-spacing: 1px; line-height: 1; }
.gr-stars span { color: #DADCE0; }
.gr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border-radius: 999px; background: #1A73E8; color: #fff; font: 600 14px/1 "Inter", sans-serif; text-decoration: none; }
.gr-btn:hover { background: #1765CC; color: #fff; }
.gr-card { margin: 0; background: #fff; border: 1px solid #E3E6EA; border-radius: 16px; padding: 18px 20px 18px; display: flex; flex-direction: column; box-shadow: 0 10px 26px -20px rgba(32, 33, 36, .4); }
.gr-head { display: flex; align-items: center; gap: 12px; }
.gr-av { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; color: #fff; font: 600 19px/1 "Inter", sans-serif; }
.gr-who { flex: 1; min-width: 0; }
.gr-who strong { display: block; font: 600 15.5px/1.3 "Inter", sans-serif; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-who small { display: block; font: 400 13px/1.3 "Inter", sans-serif; color: #70757A; margin-top: 2px; }
.gr-rate { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; }
.gr-rate i { color: #1A73E8; font-size: 14px; }
.gr-text { margin: 0; }
.gr-text p { margin: 0; font: 400 15px/1.65 "Inter", sans-serif; color: #3C4043; }
.gr-trip { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #EEF0F2; font: 500 13px/1.3 "Inter", sans-serif; color: #5F6368; }
.gr-trip i { color: #EA4335; margin-right: 5px; }
.gr-card .dp-more { align-self: flex-start; color: #1A73E8; font-weight: 600; }
@media (max-width: 639px) { .gr-bar { padding: 14px 16px; } .gr-bar-b, .gr-btn { width: 100%; } }

.gr-head + .gr-text { margin-top: 14px; }

/* ================= PHONE PASS (owner, 3 Oct) ================= */
.dp-price { font-size: 26px !important; line-height: 1.1 !important; }
.dp-price span { font-size: 14px !important; }
.dp-mshow { display: none; }

@media (max-width: 767px) {
  /* price table becomes a list of cards: no sideways scrolling, price always in view */
  .dp-offerscroll { overflow: visible; }
  .dp-offer { min-width: 0; display: block; table-layout: auto; }
  .dp-offer thead { display: none; }
  .dp-offer tbody { display: block; }
  .dp-offer tbody tr:not([hidden]) { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 14px 14px 16px; border-top: 1px solid var(--bj-line); }
  .dp-offer tbody tr:first-child { border-top: 0; }
  .dp-offer td { display: block; padding: 0 !important; border: 0 !important; text-align: left; background: none !important; }
  .dp-offer td:nth-child(1) { grid-column: 1 / -1; }
  .dp-offer td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .dp-offer td:nth-child(2) strong { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; background: var(--bj-ivory); border: 1px solid var(--bj-line); border-radius: 999px; padding: 4px 12px; }
  .dp-offer td:nth-child(3) { display: none; }
  .dp-offer td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; }
  .dp-offer td:nth-child(4) s { font-size: 14px; }
  .dp-offer td:nth-child(5) { grid-column: 1; grid-row: 3; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
  .dp-offer td:nth-child(5) strong { font-size: 24px; display: inline; }
  .dp-offer td:nth-child(5) .dp-offer-per { display: inline; }
  .dp-offer td:nth-child(5) .dp-offer-save { margin-top: 0; }
  .dp-offer td:nth-child(6) { grid-column: 2; grid-row: 3; }
  .dp-offer td:nth-child(6) .bj-btn { width: auto; min-height: 44px; padding: 10px 18px; font-size: 13px; }
  .dp-offer-thumb { width: 64px; height: 64px; }
  .dp-offer-title { font-size: 16px; }
  .dp-offer-foot .dp-viewall { width: 100%; min-width: 0; }

  /* places to visit: one swipe row instead of nine stacked cards */
  .dp .dp-places-rm { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 4px 16px 14px; scroll-padding: 0 16px; align-items: flex-start; }
  .dp .dp-places-rm::-webkit-scrollbar { display: none; }
  .dp .dp-places-rm > * { flex: 0 0 84%; scroll-snap-align: start; transform: none !important; opacity: 1 !important; }

  /* trip guide: smaller line art */
  .dp-guide img[src*="elements"], .dp-gart, .dp-gart svg { max-height: 120px; }
}

@media (max-width: 639px) {
  /* package cards and FAQ: first few, then a Show All button (added by js/destination.js) */
  [data-dp-cards]:not(.is-all) > .dp-pkg:nth-child(n+5) { display: none; }
  .dp-faq:not(.is-all) .dp-faq-col:nth-child(2) { display: none; }
  .dp-faq:not(.is-all) .dp-faq-col:nth-child(1) > .dp-faq-item:nth-child(n+9) { display: none; }
  .dp-mshow { display: flex; width: 100%; margin-top: 16px; }
  .dp-hero h1, .dp-hero .font-cormorant { overflow-wrap: anywhere; }
  .gr-card { min-height: 0; }
}

/* phone pass, part 2 */
main p.dp-price, .dp p.dp-price { font-size: 26px !important; line-height: 1.1 !important; }
main p.dp-price span, .dp p.dp-price span { font-size: 14px !important; }
@media (max-width: 767px) {
  .dp-gcard-art { max-height: 130px; overflow: hidden; margin-top: 4px; }
  .dp-gcard-img, .dp-gcard-svg { max-height: 130px; width: 100%; object-fit: contain; object-position: bottom center; }
}

/* phone polish: About photo first, like an editorial card */
@media (max-width: 639px) {
  .dp-about { gap: 20px; }
  .dp-about .dp-about-fig { order: -1; }
  .dp-about .dp-about-fig img { height: 210px !important; }
}

/* ---- package card buttons: desktop = [View Itinerary] [Enquire]; phone = Call | Enquire Now | WhatsApp ---- */
.dp-pkg-btns { display: flex; gap: 8px; align-items: stretch; }
.dp-pkg-ic { display: none; }
@media (max-width: 639px) {
  .dp-pkg-btns { display: grid; grid-template-columns: 50px 1fr 50px; gap: 8px; }
  .dp-pkg-btns > .bj-btn--outline { grid-column: 1 / -1; }
  .dp-pkg-ic { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 12px; color: #fff; font-size: 20px; text-decoration: none; }
  .dp-pkg-call { background: var(--bj-ink); }
  .dp-pkg-wa { background: #25D366; font-size: 24px; }
  .dp-pkg-btns .bj-btn { min-height: 50px; }

  /* floating Call + WhatsApp (phones): hidden over the hero and the price table, slide in from "Know the place",
     slide away while the package cards (which carry their own Call / Enquire / WhatsApp row) are on screen */
  #callFloatBtn, #whatsappFloatBtn { transition: translate .45s cubic-bezier(.2, .8, .2, 1), opacity .35s ease; }
  body.fab-hide #callFloatBtn, body.fab-hide #whatsappFloatBtn { translate: 0 110px; opacity: 0 !important; pointer-events: none !important; }
  body.fab-hide #scrollTopBtn { opacity: 0 !important; pointer-events: none !important; }
  /* every 5 seconds (after the first 15) the two buttons hop and flash once */
  body #callFloatBtn.fab-jump, body #whatsappFloatBtn.fab-jump { animation: bjFabJump .9s cubic-bezier(.3, 1.6, .5, 1) 1 !important; }
  body #whatsappFloatBtn.fab-jump { animation-delay: .12s !important; }
}
@keyframes bjFabJump {
  0% { translate: 0 0; scale: 1; filter: brightness(1); }
  25% { translate: 0 -16px; scale: 1.08; filter: brightness(1.25); }
  45% { translate: 0 0; scale: .97; }
  62% { translate: 0 -7px; scale: 1.03; filter: brightness(1.15); }
  100% { translate: 0 0; scale: 1; filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) { body #callFloatBtn.fab-jump, body #whatsappFloatBtn.fab-jump { animation: none !important; } }

/* ---- "See Day-wise Plan" link on every package card ---- */
.dp-plan-link { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 9px 12px 9px 9px; border-radius: 12px; background: var(--bj-ivory); border: 1px dashed var(--bj-gold); color: var(--bj-ink); text-decoration: none; transition: background .2s, border-color .2s, box-shadow .2s; }
.dp-plan-link-ic { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid var(--bj-gold); color: var(--bj-gold); display: flex; align-items: center; justify-content: center; font-size: 13px; transition: background .2s, color .2s; }
.dp-plan-link-t { flex: 1; font: 600 14.5px/1.2 "Inter", sans-serif; letter-spacing: .01em; }
.dp-plan-link-ar { flex: none; font-size: 13px; color: var(--bj-orange); transition: transform .2s; }
.dp-plan-link:hover { background: #fff; border-style: solid; border-color: var(--bj-orange); box-shadow: 0 8px 18px -12px rgba(241, 90, 36, .7); color: var(--bj-ink); }
.dp-plan-link:hover .dp-plan-link-ic { background: var(--bj-orange); border-color: var(--bj-orange); color: #fff; }
.dp-plan-link:hover .dp-plan-link-ar { transform: translateX(4px); }
.dp-pkg-btns .bj-btn { flex: 1; }
@media (max-width: 639px) { .dp-pkg-btns > .bj-btn--outline { grid-column: auto; } .dp-plan-link { padding: 10px 12px 10px 10px; } }
html { scroll-padding-top: 90px; }

/* ---- package card buttons, final (owner, 3 Oct evening): [ View Full Itinerary ] [ WhatsApp tile ] on every screen ---- */
.dp-pkg-btns { display: grid !important; grid-template-columns: 1fr 50px !important; gap: 9px !important; align-items: stretch; }
.dp-pkg-btns .dp-pkg-main { min-height: 50px; width: 100%; border-radius: 12px; gap: 9px; font-size: 14px; letter-spacing: .05em; }
.dp-pkg-btns .dp-pkg-main i { font-size: 13px; }
.dp-pkg-wa { display: flex !important; width: 50px; height: 50px; min-height: 0 !important; border-radius: 12px; overflow: hidden; background: none !important; box-shadow: 0 6px 14px -8px rgba(18, 214, 29, .9); transition: transform .15s; }
.dp-pkg-wa svg { width: 100%; height: 100%; display: block; }
.dp-pkg-wa:hover { transform: translateY(-2px); }

@media (max-width: 639px) {
  /* phones: over the hero and price table both floating buttons wait below the screen; after that the call button stays put.
     While package cards are on screen only the floating WhatsApp button slides away (each card has its own). The "up" arrow never hides. */
  body.fab-hide #scrollTopBtn { opacity: 1 !important; pointer-events: auto !important; }
  body.fab-wa-hide #whatsappFloatBtn { translate: 0 110px; opacity: 0 !important; pointer-events: none !important; }
}

/* ---- phones: "Enquire Now" stands in for the floating WhatsApp button while package cards are on screen ---- */
#enqFloatBtn { display: none; }
@media (max-width: 639px) {
  #enqFloatBtn { display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 8px; bottom: 6px; z-index: 45; min-height: 46px; padding: 12px 16px; border: 0; border-radius: var(--bj-radius-btn, 6px); background: var(--bj-ink, #2A1810); color: #fff; font: 700 13.5px/1 "Inter", sans-serif; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 10px 22px -10px rgba(42, 24, 16, .8); cursor: pointer; translate: 0 110px; opacity: 0; pointer-events: none; transition: translate .45s cubic-bezier(.2, .8, .2, 1), opacity .35s ease; }
  #enqFloatBtn i { color: var(--bj-gold-lt, #E3C88F); font-size: 13px; }
  body.fab-wa-hide:not(.fab-hide) #enqFloatBtn { translate: 0 0; opacity: 1; pointer-events: auto; }
  body #enqFloatBtn.fab-jump { animation: bjFabJump .9s cubic-bezier(.3, 1.6, .5, 1) 1; animation-delay: .12s; }
  /* the "up" arrow sits above whichever button is at the bottom right */
}

/* phones: filter pills wrap onto the next line, nothing is cut off at the edge (owner, 3 Oct) */
@media (max-width: 767px) {
  .dp-filters { padding: 14px 14px 10px; gap: 14px; overflow: hidden; }
  .dp-filters .dp-pills { flex-wrap: wrap !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; gap: 7px !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .dp-filters .dp-pill { flex: 0 0 auto; font-size: 13px; padding: 7px 12px; min-height: 36px; }
  .dp-fcount { flex-wrap: wrap; gap: 6px 12px; }
}

/* ---- package cards: 8 first on every screen, then Show More (owner, 3 Oct) ---- */
[data-dp-cards]:not(.is-all) > .dp-pkg:nth-child(n+9) { display: none; }
@media (max-width: 639px) { [data-dp-cards]:not(.is-all) > .dp-pkg:nth-child(n+5) { display: revert; } [data-dp-cards]:not(.is-all) > .dp-pkg:nth-child(n+9) { display: none; } }
.dp-mshow.dp-mshow--cards { display: flex; width: auto; min-width: 260px; margin: 24px auto 0; }
@media (max-width: 639px) { .dp-mshow.dp-mshow--cards { width: 100%; } }

/* Enquire Now stand-in: gold, not black (owner, 3 Oct) */
@media (max-width: 639px) {
  #enqFloatBtn { background: linear-gradient(145deg, #E6C27A 0%, #C8963E 55%, #B07F2A 100%); color: #2A1810; border: 1px solid rgba(255, 255, 255, .45); box-shadow: 0 10px 22px -10px rgba(176, 127, 42, .95), inset 0 1px 0 rgba(255, 255, 255, .45); }
  #enqFloatBtn i { color: #2A1810; }
}

/* Read More sits on the right, under the end of the text (owner, 3 Oct) */
.dp-readmore:not([hidden]) { display: flex; width: -moz-fit-content; width: fit-content; margin-left: auto !important; margin-right: 0 !important; }

/* ---- phones: package filter = three drop-downs in one row (owner, 3 Oct night) ---- */
.dp-fsel { display: none; }
@media (max-width: 767px) {
  .dp-filters { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; padding: 12px !important; border-radius: 16px; }
  .dp-filters .dp-fgroup { display: block; min-width: 0; position: relative; }
  .dp-filters .dp-pills { display: none !important; }
  .dp-filters .dp-flabel { display: flex; min-width: 0; margin: 0 0 5px 2px; font-size: 10.5px; letter-spacing: .08em; gap: 5px; white-space: nowrap; }
  .dp-filters .dp-flabel i { font-size: 10px; }
  .dp-fsel { display: block; width: 100%; min-height: 44px; padding: 0 26px 0 11px; border: 1px solid var(--bj-line); border-radius: 12px; background-color: var(--bj-ivory);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F15A24' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 10px;
    font: 600 14px/1.2 "Inter", sans-serif; color: var(--bj-ink); -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
  .dp-fsel.is-set { border-color: var(--bj-orange); background-color: #FFF4EE; color: var(--bj-orange-hover, #D94C1A); }
  .dp-fsel:focus { outline: 2px solid rgba(241, 90, 36, .35); outline-offset: 1px; }
  .dp-filters .dp-fcount { grid-column: 1 / -1; border-top: 0; padding-top: 2px; font-size: 13px; justify-content: space-between; }
}

/* ---- package card: old price and discount beside "Starting from" ---- */
.dp-pricetop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.dp-pricetop .dp-label { margin: 0; }
.dp-priceold { margin: 0; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.dp-priceold s { font: 500 15px/1 "Inter", sans-serif; color: #8A7B70; text-decoration-thickness: 1.5px; font-variant-numeric: lining-nums; }
.dp-priceoff { display: inline-block; padding: 4px 9px; border-radius: 999px; background: #E7F7EC; color: #15803D; font: 700 11.5px/1 "Inter", sans-serif; letter-spacing: .04em; }
/* phone filter drop-downs: smaller arrow */
@media (max-width: 767px) { .dp-fsel { background-size: 10px 7px !important; padding-right: 24px !important; } }

/* ---- phones: back to pills (owner preferred them), small enough that each group fits on ONE line ---- */
@media (max-width: 767px) {
  .dp-filters { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; padding: 12px 12px 10px !important; }
  .dp-fsel { display: none !important; }
  .dp-filters .dp-fgroup { display: block; }
  .dp-filters .dp-flabel { margin: 0 0 6px 2px; font-size: 10.5px; }
  .dp-filters .dp-pills { display: flex !important; flex-wrap: nowrap !important; gap: 5px !important; overflow: hidden !important; }
  .dp-filters .dp-pill { flex: 0 1 auto; min-width: 0; min-height: 32px; padding: 6px 9px; font-size: clamp(10px, 2.95vw, 12px); letter-spacing: -.01em; white-space: nowrap; }
  .dp-filters .dp-fcount { grid-column: auto; border-top: 1px solid var(--bj-line); padding-top: 8px; }
}

/* phones: pills never cut their text; a group that does not fit one line wraps onto a second line (owner, 3 Oct night) */
@media (max-width: 767px) {
  .dp-filters .dp-pills { flex-wrap: wrap !important; overflow: visible !important; row-gap: 6px !important; }
  .dp-filters .dp-pill { flex: 0 0 auto; }
}

/* ---- package cards: deep forest-green body under the photo (owner, 3 Oct night; same family as the packages site cards) ---- */
.dp-pkg.bj-card { background: linear-gradient(180deg, #14382C 0%, #0C241C 100%); border: 1px solid #1E4A3A; box-shadow: 0 18px 38px -22px rgba(8, 26, 20, .75); overflow: hidden; }
.dp-pkg.bj-card > div:first-child { position: relative; }
.dp-pkg.bj-card > div:first-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(180deg, rgba(20, 56, 44, 0) 0%, #14382C 100%); pointer-events: none; }
.dp-pkg.bj-card > div:last-child { position: relative; }
.dp-pkg h3.font-cormorant { color: #fff !important; }
.dp-pkg .dp-meta { color: #BCD3C8 !important; }
.dp-pkg .dp-meta i { color: #E3C88F !important; }
.dp-pkg .dp-icons { background: rgba(255, 255, 255, .06) !important; border-top: 1px solid rgba(227, 200, 143, .28) !important; border-bottom: 1px solid rgba(227, 200, 143, .28) !important; border-radius: 10px; }
.dp-pkg .dp-icons li i { color: #E3C88F !important; }
.dp-pkg .dp-icons li span { color: #D5E4DC !important; }
/* package card: what is included, as four round icons with plain labels (no box), owner 4 Oct */
.dp-pkg ul.dp-icons { display: flex; gap: 0; padding: 14px 0 0 !important; margin: 12px 0 16px; background: none !important; border: 0 !important; border-top: 1px solid rgba(227, 200, 143, .22) !important; border-radius: 0; }
.dp-pkg ul.dp-icons li { position: relative; flex: 1 1 0; min-width: 0; gap: 7px; }
.dp-pkg ul.dp-icons li + li::before { content: ""; position: absolute; left: 0; top: 4px; height: 34px; width: 1px; background: rgba(227, 200, 143, .16); }
.dp-pkg ul.dp-icons li i { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(227, 200, 143, .12); border: 1px solid rgba(227, 200, 143, .45); font-size: 15px; }
.dp-pkg ul.dp-icons li span { font-size: 12.5px !important; font-weight: 500; letter-spacing: 0 !important; text-transform: none; color: #E6EFE9 !important; white-space: nowrap; }
@media (min-width: 640px) { .dp-pkg ul.dp-icons li span { font-size: 11px !important; } .dp-pkg ul.dp-icons li i { width: 36px; height: 36px; font-size: 14px; } .dp-pkg ul.dp-icons li + li::before { height: 30px; } }
.dp-pkg .dp-label { color: #E3C88F !important; }
.dp-pkg .dp-price { color: #fff !important; }
.dp-pkg .dp-price span { color: #BCD3C8 !important; }
.dp-pkg .dp-priceold s { color: #9DB9AC; }
.dp-pkg .dp-priceoff { background: #22C55E; color: #04321A; }
.dp-pkg .dp-tag { background: #E3C88F; color: #14382C; }

/* hero heading in two parts: "Pachmarhi Tour Package" on one line, "Exclusive Deals" under it */
.dp-h1-a { display: block; white-space: nowrap; }
.dp-h1-b { display: block; margin-top: .18em; font-size: .52em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #FFD9A8; font-family: "Inter", sans-serif; }
@media (max-width: 639px) { .dp-hero h1 { font-size: min(34px, 8.3vw) !important; } .dp-h1-b { font-size: 13px; letter-spacing: .2em; } }

/* the first section under the hero is there at once: no scroll-in animation, no empty white gap (owner, 3 Oct night) */
.dp-hero + section [data-aos], #prices [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (max-width: 639px) { .dp-hero + section { padding-top: 30px !important; } }
/* "Exclusive Deals" line: 4px larger */
.dp-h1-b { font-size: calc(.52em + 4px); }
@media (max-width: 639px) { .dp-h1-b { font-size: 17px; letter-spacing: .16em; } }

/* ---- comfortable tap sizes and label sizes on phones (must come last in this block) ---- */
@media (max-width: 767px) {
  .dp-filters .dp-pill { min-height: 40px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
  .dp-readmore:not([hidden]) { min-height: 44px; padding: 10px 0 10px 14px; margin-top: 2px; }
  .dp-more { min-height: 44px; display: inline-flex; align-items: center; }
  .dp-plan-x { width: 44px; height: 44px; }
  .dp-plan-n small { font-size: 10.5px !important; }
  .dp-tl-n small { font-size: 10px !important; }
  .dp-pkg .dp-icons li span, .dp-icons span { font-size: 12px !important; }
  .dp-offer-sub, .dp-offer-per { font-size: 13px !important; }
  .dp-priceoff { font-size: 12px; }
  .dp-filters .dp-flabel { font-size: 11px !important; }
}

/* video section on destination and itinerary pages (tiles are styled by the HOME PAGE block: .bjh-videos) */
#videos .bjh-videos { max-width: 1200px; margin: 0 auto; }
.ip-lean > section#videos { background: #fff; }
@media print { #videos { display: none !important; } }

/* guest photo section on destination and itinerary pages (tiles styled by the HOME PAGE block: .bjh-guests) */
#guests .bjh-guests { max-width: 1200px; margin: 0 auto; }
.ip-hotels { background: #fff; padding: 28px 0 30px; margin-top: 26px; border-top: 1px solid #EFE4D2; overflow: hidden; }
.ip-lean > section#guests { background: var(--bj-sand, #F4EBDD); }
.ip-lean > section#guests .bjh-guests { max-width: none; }   /* same full width tiles as the home page section */
.ip-lean > section#reviews { background: #FBF6EE !important; }
@media print { #guests { display: none !important; } }

/* ===== additions for the Ujjain page (5 Oct): hero h2 line, bullet days, price grid per itinerary, tables in place cards, two guide cards ===== */
.dp-hero-h2 { margin: -4px 0 12px; font: 600 15px/1.4 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #FFD9A8; }
@media (min-width: 1024px) { .dp-hero-h2 { font-size: 19px; margin: -8px 0 16px; } }
.dp-daylist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.dp-daylist > li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.6; color: var(--bj-text, #2B2420); }
.dp-daylist > li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--bj-gold, #B8893B); }
.dp-daylist ul { list-style: none; margin: 6px 0 2px; padding: 0; display: grid; gap: 5px; }
.dp-daylist ul li { position: relative; padding-left: 18px; }
.dp-daylist ul li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 8px; height: 1.5px; background: #B8893B; }
.dp-plangrid { margin: 22px 0 6px; }
.dp-plangrid-h { font-size: 24px; font-weight: 600; color: var(--bj-ink, #2A1810); margin: 0 0 10px; }
.dp-plangrid .dp-table td:first-child { font-weight: 700; }
.dp-place--rm .dp-tablewrap { margin: 8px 0 12px; }
.dp-place--rm .dp-table td { font-size: 14px; padding: 8px 10px; }
@media (min-width: 1024px) { .dp-guide--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-left: auto; margin-right: auto; } }

@media (min-width: 1280px) { .dp-pkgs--few { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1020px; margin-left: auto; margin-right: auto; } .dp-pkgs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; } .dp-pkgs--1 { grid-template-columns: 1fr; max-width: 340px; } }
@media (min-width: 640px) and (max-width: 1279px) { .dp-pkgs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dp-place-noimg { display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 50% 0%, #3A2418 0%, #2A1810 60%, #1E110B 100%); position: relative; overflow: hidden; }
.dp-place-noimg::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(184, 137, 59, .45); border-radius: 10px; }
.dp-place-noimg i { font-size: 54px; color: #D9B26A; opacity: .9; }
.dp-planfoot:has(.dp-planfoot-b:only-child) { justify-content: center; }

/* ================= BLOG (5 Oct): the two real posts and the /blogs/ list ================= */
.bl-hero { min-height: 420px; padding: 96px 0 44px; }
.bl-hero--list { min-height: 340px; }
.bl-hero-in { color: #fff; }
.bl-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 12px/1 "Inter", sans-serif; letter-spacing: .16em; margin-bottom: 16px; }
.bl-crumb a { color: #fff; } .bl-crumb a:hover { text-decoration: underline; } .bl-crumb-on { color: #FFDCC5; }
.bl-hero-tag { display: inline-block; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(227, 200, 143, .7); color: #F3DDAE; font: 700 11.5px/1 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.bl-hero h1 { font-size: clamp(30px, 4.6vw, 54px); line-height: 1.12; font-weight: 500; color: #fff; max-width: 900px; margin: 0 0 14px; }
.bl-hero-sub { font-size: 17px; color: rgba(255, 255, 255, .9); max-width: 620px; margin: 0; }
.bl-meta { margin: 0; font: 500 13px/1.5 "Inter", sans-serif; color: #7A6A5C; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bl-meta i { color: var(--bj-gold, #B8893B); } .bl-meta--light { color: rgba(255, 255, 255, .85); } .bl-meta--light i { color: #E3C88F; }
.bl-wrap { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 44px 0 56px; }
.bl-body { min-width: 0; max-width: 760px; }
.bl-body p { font-size: 17px; line-height: 1.85; color: var(--bj-text, #2B2420); margin: 0 0 18px; }
.bl-body h2 { font-size: 30px; line-height: 1.2; font-weight: 600; color: var(--bj-ink, #2A1810); margin: 34px 0 12px; padding-left: 14px; border-left: 3px solid var(--bj-gold, #B8893B); }
.bl-body h3 { font-size: 24px; line-height: 1.25; font-weight: 600; color: var(--bj-ink, #2A1810); margin: 28px 0 10px; }
.bl-body ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.bl-body ul li { position: relative; padding: 12px 14px 12px 40px; background: #FBF6EE; border: 1px solid #EFE4D2; border-radius: 12px; font-size: 16px; line-height: 1.65; }
.bl-body ul li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 14px; top: 13px; color: var(--bj-gold, #B8893B); font-size: 13px; }
.bl-body a { color: var(--bj-orange-d, #D94C1A); text-decoration: underline; text-underline-offset: 2px; }
.bl-share { margin-top: 28px !important; padding-top: 22px; border-top: 1px solid #EFE4D2; }
.bl-plan { background: linear-gradient(180deg, #FFFDF9 0%, #FBF6EE 100%); border: 1px solid #EADFCB; border-top: 3px solid var(--bj-gold, #B8893B); border-radius: 18px; padding: 22px; box-shadow: 0 18px 36px -28px rgba(42, 24, 16, .55); display: grid; gap: 12px; }
.bl-plan h2 { font-size: 26px; line-height: 1.15; font-weight: 600; color: var(--bj-ink, #2A1810); margin: 0; }
.bl-plan p { margin: 0; font-size: 15px; line-height: 1.6; color: #5B4E44; }
.bl-plan .bj-btn { width: 100%; justify-content: center; }
.bl-wa { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 10px; background: #25D366; color: #fff !important; font: 700 14px/1 "Inter", sans-serif; }
.bl-wa i { font-size: 18px; }
.bl-more, .bl-listsec { padding: 56px 0 64px; }
.bl-grid { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 1100px; margin: 0 auto; }
.bl-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.bl-card-pic { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.bl-card-pic img { transition: transform .5s; } .bl-card:hover .bl-card-pic img { transform: scale(1.05); }
.bl-card-tag { position: absolute; left: 14px; top: 14px; padding: 6px 11px; border-radius: 999px; background: rgba(42, 24, 16, .82); color: #F3DDAE; font: 700 11px/1 "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.bl-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bl-card-t { font-size: 25px; line-height: 1.2; font-weight: 600; margin: 0; } .bl-card-t a { color: var(--bj-ink, #2A1810); } .bl-card-t a:hover { color: var(--bj-orange, #F15A24); }
.bl-card-x { margin: 0; font-size: 15.5px; line-height: 1.65; color: #5B4E44; flex: 1; }
.bl-card-more { align-self: flex-start; }
@media (min-width: 768px) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bl-grid--1 { grid-template-columns: minmax(0, 560px); justify-content: center; } }
@media (min-width: 1024px) { .bl-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 48px; align-items: start; } .bl-aside { position: sticky; top: 100px; } .bl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } main.bl-post { overflow: visible !important; } }
@media (max-width: 639px) { .bl-hero { min-height: 360px; padding: 84px 0 30px; } .bl-body p { font-size: 16.5px; } .bl-body h2 { font-size: 25px; } .bl-wrap { padding: 30px 0 40px; } }

/* ================= SAFARI BOOKING pages (5 Oct): guide on the left, availability form on the right ================= */
.sb-hero { min-height: 480px; padding: 104px 0 46px; }
.sb-hero-in { color: #fff; }
.sb-hero h1 { font-size: clamp(32px, 4.8vw, 58px); line-height: 1.1; font-weight: 500; color: #fff; max-width: 860px; margin: 0 0 14px; }
.sb-hero-p { font-size: 16.5px; line-height: 1.7; color: rgba(255, 255, 255, .9); max-width: 720px; margin: 0 0 20px; }
.sb-hero-b { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; }
.sb-wrap { display: flex; flex-direction: column; gap: 28px; padding: 30px 0 48px; }
.sb-aside { order: -1; }
.sb-inline { display: none; }
.sb-body { max-width: none; min-width: 0; }
.sb-body > h2:first-child { margin-top: 0; }
.sb-body .sb-table { margin: 6px 0 24px; }
.sb-body .dp-table th { white-space: nowrap; }
.sb-body .dp-table td:first-child { font-weight: 700; color: var(--bj-ink, #2A1810); }
.sb-form { background: #fff; border: 1px solid #EADFCB; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 46px -30px rgba(42, 24, 16, .6); }
.sb-form-h { display: flex; align-items: center; gap: 12px; padding: 18px 20px; background: linear-gradient(120deg, #2A1810 0%, #4A2C1C 100%); color: #fff; }
.sb-form-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(227, 200, 143, .18); border: 1px solid rgba(227, 200, 143, .6); color: #F3DDAE; font-size: 18px; }
.sb-form-h h2 { margin: 0; font-size: 24px; line-height: 1.1; font-weight: 600; color: #fff; border: 0; padding: 0; }
.sb-form-h p { margin: 3px 0 0; font: 600 11.5px/1 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #E3C88F; }
.sb-form form { padding: 18px 20px 6px; display: grid; gap: 12px; }
.sb-row { display: grid; gap: 5px; }
.sb-row label { font: 700 11.5px/1 "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #8C6524; }
.sb-in { width: 100%; min-height: 48px; padding: 10px 14px; background: #FBF6EE; border: 1px solid #E4D7C0; border-radius: 10px; font: 500 16px/1.3 "Inter", sans-serif; color: var(--bj-ink, #2A1810); }
.sb-in:focus { outline: none; border-color: var(--bj-orange, #F15A24); box-shadow: 0 0 0 3px rgba(241, 90, 36, .15); background: #fff; }
.sb-go { width: 100%; justify-content: center; min-height: 52px; margin-top: 4px; }
.sb-wa { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin: 8px 20px 0; border-radius: 10px; background: #25D366; color: #fff !important; font: 700 14px/1 "Inter", sans-serif; }
.sb-wa i { font-size: 18px; }
.sb-form-n { margin: 10px 20px 16px; text-align: center; font-size: 12px; color: #7A6A5C; } .sb-form-n i { color: var(--bj-gold, #B8893B); margin-right: 4px; }
.sb-pk { padding: 56px 0 60px; }
.sb-pk-grid { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1100px; margin: 0 auto; }
.sb-pk-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; color: inherit; }
.sb-pk-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; } .sb-pk-pic img { transition: transform .5s; } .sb-pk-card:hover .sb-pk-pic img { transform: scale(1.05); }
.sb-pk-body { display: grid; gap: 8px; padding: 18px 20px 20px; }
.sb-pk-body strong { font-size: 23px; line-height: 1.2; font-weight: 600; color: var(--bj-ink, #2A1810); }
.sb-pk-d { font-size: 14px; color: #5B4E44; } .sb-pk-d i { color: var(--bj-gold, #B8893B); margin-right: 4px; }
.sb-pk-p { font: 800 22px/1.2 "Inter", sans-serif; color: var(--bj-orange-d, #D94C1A); } .sb-pk-p small { display: block; font: 700 11px/1.4 "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8C6524; } .sb-pk-p em { font: 500 13px/1 "Inter", sans-serif; color: #7A6A5C; font-style: normal; }
.sb-disc { background: #F4EBDD; border-top: 1px solid #E4D7C0; padding: 22px 0; }
.sb-disc p { margin: 0 auto; max-width: 980px; font-size: 13.5px; line-height: 1.7; color: #5B4E44; } .sb-disc i { color: var(--bj-gold, #B8893B); margin-right: 6px; }
@media (min-width: 768px) { .sb-pk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sb-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3.4fr); gap: 48px; align-items: start; padding: 48px 0 60px; } .sb-aside { order: 0; position: sticky; top: 100px; } main.sb { overflow: visible !important; } }
@media (max-width: 1023px) { .sb-inline { display: block; margin-top: 30px; } .sb-aside, .sb-inline { max-width: 560px; width: 100%; margin-left: auto; margin-right: auto; } }
@media (max-width: 639px) { .sb-hero { min-height: 0; padding: 88px 0 30px; } .sb-hero-p { font-size: 15.5px; } .sb-hero-b > * { flex: 1 1 100%; justify-content: center; } }

/* safari booking pages standing alone (no site menu, no footer) + the better form (5 Oct, later) */
.sb-top { background: #2A1810; color: #F3DDAE; font: 500 13px/1.4 "Inter", sans-serif; }
.sb-top .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 9px; padding-bottom: 9px; }
.sb-top p { margin: 0; } .sb-top strong { color: #fff; font-weight: 700; } .sb-top i { color: #E3C88F; margin-right: 6px; }
.sb-top a { flex: none; color: #fff; font-weight: 700; white-space: nowrap; }
.sb-alone .sb-hero { padding-top: 52px; min-height: 420px; }
.sb-alone .bl-hero-tag i { margin-right: 6px; }
@media (min-width: 1024px) { .sb-alone .sb-aside { top: 24px; } }
.sb-foot { background: #2A1810; color: rgba(255, 255, 255, .75); text-align: center; font-size: 13px; line-height: 1.7; padding: 18px 0 84px; }
.sb-foot p { margin: 0; } .sb-foot a { color: #E3C88F; text-decoration: underline; text-underline-offset: 2px; }
.sb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sb-row label i { color: var(--bj-gold, #B8893B); margin-right: 5px; width: 14px; text-align: center; }
.sb-in::placeholder { color: #A8998A; font-weight: 400; }
select.sb-in { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238C6524'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 38px; }
.sb-by { margin: 2px 0 0; text-align: center; font-size: 12px; line-height: 1.5; color: #7A6A5C; }
.sb-form form { padding-bottom: 12px; }
.sb-steps { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 34px; }
.sb-step { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px 16px; background: linear-gradient(180deg, #FFFDF9 0%, #FBF6EE 100%); border: 1px solid #EADFCB; border-radius: 16px; }
.sb-step > i { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #2A1810; color: #E3C88F; font-size: 17px; }
.sb-step-n { position: absolute; right: 14px; top: 8px; font: 700 34px/1 "EB Garamond", serif; color: rgba(184, 137, 59, .28); }
.sb-step h3 { margin: 0 0 4px !important; font-size: 21px !important; line-height: 1.2; }
.sb-step p { margin: 0 !important; font-size: 14.5px !important; line-height: 1.55 !important; color: #5B4E44 !important; }
@media (min-width: 768px) { .sb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sb-step { flex-direction: column; } }
@media (max-width: 639px) { .sb-top .container { flex-direction: column; align-items: flex-start; gap: 4px; } .sb-top { font-size: 12.5px; } }

/* ================= TOUR PACKAGES list (/itinerary/): every package page, by destination (5 Oct) ================= */
.tp-jump { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 26px 0 6px; }
.tp-jump a { padding: 9px 14px; border-radius: 999px; border: 1px solid #E4D7C0; background: #FBF6EE; color: var(--bj-ink, #2A1810); font: 600 13.5px/1 "Inter", sans-serif; }
.tp-jump a:hover { background: var(--bj-ink, #2A1810); color: #F3DDAE; border-color: var(--bj-ink, #2A1810); }
.tp-list { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 1040px; margin: 0 auto; }
.tp-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n go" "d p"; gap: 4px 14px; align-items: center; padding: 14px 18px; background: #fff; border: 1px solid #EADFCB; border-radius: 14px; color: inherit; transition: border-color .2s, box-shadow .2s, transform .2s; }
.tp-row:hover { border-color: var(--bj-gold, #B8893B); box-shadow: 0 14px 28px -22px rgba(42, 24, 16, .6); transform: translateY(-1px); }
.tp-n { grid-area: n; font: 600 19px/1.3 "EB Garamond", serif; color: var(--bj-ink, #2A1810); }
.tp-d { grid-area: d; font-size: 13.5px; color: #5B4E44; } .tp-d i { color: var(--bj-gold, #B8893B); margin-right: 4px; }
.tp-p { grid-area: p; font: 800 16px/1 "Inter", sans-serif; color: var(--bj-orange-d, #D94C1A); text-align: right; white-space: nowrap; }
.tp-go { grid-area: go; color: var(--bj-gold, #B8893B); font-size: 13px; justify-self: end; }
@media (min-width: 768px) { .tp-row { grid-template-columns: minmax(0, 1fr) 170px 130px 20px; grid-template-areas: "n d p go"; gap: 16px; } }

/* ================= HTML SITEMAP (/sitemap/) ================= */
.sm-grid { display: grid; grid-template-columns: 1fr; gap: 28px 40px; max-width: 1180px; margin: 0 auto 36px; }
.sm-g h2 { font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--bj-ink, #2A1810); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--bj-gold, #B8893B); }
.sm-g ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sm-g li a { display: inline-block; padding: 3px 0; font-size: 15px; line-height: 1.45; color: #3F332B; }
.sm-g li a:hover { color: var(--bj-orange-d, #D94C1A); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 640px) { .sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sm-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== HTML SITEMAP, richer look (5 Oct, later): stat strip, cards with icon heads and counts, jump pills ===== */
.sm-top { padding-bottom: 34px; }
.sm-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1180px; margin: -70px auto 34px; position: relative; z-index: 2; }
.sm-stat { background: #fff; border: 1px solid #EADFCB; border-top: 3px solid var(--bj-gold, #B8893B); border-radius: 16px; padding: 16px 12px 14px; text-align: center; box-shadow: 0 20px 40px -30px rgba(42, 24, 16, .7); }
.sm-stat strong { display: block; font-size: 38px; line-height: 1; font-weight: 600; color: var(--bj-ink, #2A1810); }
.sm-stat span { display: block; margin-top: 6px; font: 700 11px/1.3 "Inter", sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #8C6524; }
.sm-stat:first-child { grid-column: 1 / -1; background: linear-gradient(120deg, #2A1810 0%, #4A2C1C 100%); border-color: #2A1810; border-top-color: var(--bj-gold, #B8893B); }
.sm-stat:first-child strong { color: #fff; } .sm-stat:first-child span { color: #E3C88F; }
.sm-page .sm-grid { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1180px; margin: 0 auto; align-items: start; }
.sm-stack { display: grid; gap: 20px; }
.sm-card { background: #fff; border: 1px solid #EADFCB; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 36px -30px rgba(42, 24, 16, .55); scroll-margin-top: 110px; }
.sm-card-h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(180deg, #FBF6EE 0%, #F4EBDD 100%); border-bottom: 1px solid #EADFCB; }
.sm-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #2A1810; color: #E3C88F; font-size: 15px; }
.sm-card-h h2 { flex: 1; margin: 0; font-size: 22px; line-height: 1.15; font-weight: 600; color: var(--bj-ink, #2A1810); border: 0; padding: 0; }
.sm-count { flex: none; min-width: 30px; padding: 5px 9px; border-radius: 999px; background: var(--bj-orange, #F15A24); color: #fff; font: 800 12px/1 "Inter", sans-serif; text-align: center; }
.sm-card ul { list-style: none; margin: 0; padding: 8px 8px 10px; display: grid; gap: 0; }
.sm-card li a { display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px; border-radius: 9px; font-size: 14.5px; line-height: 1.45; color: #3F332B; transition: background .15s, color .15s; }
.sm-card li a i { flex: none; margin-top: 4px; font-size: 10px; color: var(--bj-gold, #B8893B); transition: transform .15s; }
.sm-card li a:hover { background: #FBF6EE; color: var(--bj-orange-d, #D94C1A); text-decoration: none; } .sm-card li a:hover i { transform: translateX(3px); color: var(--bj-orange, #F15A24); }
.sm-more { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 12px 18px; border-top: 1px dashed #E4D7C0; background: #FFFDF9; font: 700 12px/1.3 "Inter", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--bj-orange-d, #D94C1A); }
.sm-more:hover { background: #FBF6EE; }
.sm-jump { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; max-width: 1180px; margin: 0 auto 26px; }
.sm-jump-l { font: 700 11.5px/1 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8C6524; margin-right: 4px; } .sm-jump-l i { margin-right: 5px; color: var(--bj-gold, #B8893B); }
.sm-jump a { padding: 9px 14px; border-radius: 999px; border: 1px solid #E4D7C0; background: #fff; color: var(--bj-ink, #2A1810); font: 600 13.5px/1 "Inter", sans-serif; }
.sm-jump a:hover { background: var(--bj-ink, #2A1810); color: #F3DDAE; border-color: var(--bj-ink, #2A1810); }
@media (min-width: 640px) { .sm-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } .sm-stat:first-child { grid-column: auto; } .sm-page .sm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sm-page .sm-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm-page .sm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .sm-stats { margin-top: -46px; } .sm-stat strong { font-size: 32px; } }

/* ================= CONTACT US (5 Oct): details, enquiry form, map, office photo ================= */
.ct-grid { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 1180px; margin: 0 auto; align-items: stretch; }
.ct-info { background: radial-gradient(120% 120% at 0% 0%, #3A2418 0%, #2A1810 55%, #1E110B 100%); color: #fff; border-radius: 22px; padding: 30px 28px; box-shadow: 0 26px 50px -34px rgba(42, 24, 16, .9); }
.ct-info h2 { margin: 0 0 20px; font-size: 34px; line-height: 1.1; font-weight: 500; color: #fff; }
.ct-info ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.ct-info li { display: flex; gap: 14px; align-items: flex-start; }
.ct-ic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(227, 200, 143, .14); border: 1px solid rgba(227, 200, 143, .5); color: #E3C88F; font-size: 15px; }
.ct-info h3 { margin: 0 0 3px; font-size: 20px; font-weight: 600; color: #F3DDAE; }
.ct-info p { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.ct-info a { color: #fff; text-decoration: underline; text-decoration-color: rgba(227, 200, 143, .6); text-underline-offset: 3px; }
.ct-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.ct-btns .bj-btn, .ct-wa { justify-content: center; min-height: 48px; text-decoration: none !important; }
.ct-wa { display: flex; align-items: center; gap: 8px; border-radius: 10px; background: #25D366; color: #fff !important; font: 700 13.5px/1 "Inter", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.ct-wa i { font-size: 18px; }
.ct-form { background: #fff; border: 1px solid #EADFCB; border-top: 3px solid var(--bj-gold, #B8893B); border-radius: 22px; padding: 28px 26px 24px; box-shadow: 0 24px 46px -34px rgba(42, 24, 16, .6); }
.ct-form h2 { margin: 4px 0 6px; font-size: 32px; line-height: 1.12; font-weight: 600; color: var(--bj-ink, #2A1810); }
.ct-form-sub { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: #5B4E44; }
.ct-form form { display: grid; gap: 6px; }
.ct-l { margin-top: 8px; font: 700 11.5px/1 "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #8C6524; }
.ct-in { width: 100%; min-height: 50px; padding: 12px 14px; background: #FBF6EE; border: 1px solid #E4D7C0; border-radius: 10px; font: 500 16px/1.4 "Inter", sans-serif; color: var(--bj-ink, #2A1810); }
textarea.ct-in { min-height: 112px; resize: vertical; }
.ct-in::placeholder { color: #A8998A; font-weight: 400; }
.ct-in:focus { outline: none; border-color: var(--bj-orange, #F15A24); box-shadow: 0 0 0 3px rgba(241, 90, 36, .15); background: #fff; }
.ct-go { width: 100%; justify-content: center; min-height: 54px; margin-top: 12px; }
.ct-note { margin: 8px 0 0; text-align: center; font-size: 12.5px; color: #7A6A5C; } .ct-note i { color: var(--bj-gold, #B8893B); margin-right: 4px; } .ct-note a { color: var(--bj-orange-d, #D94C1A); text-decoration: underline; }
.ct-visit { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 1180px; margin: 0 auto; }
.ct-map { background: #fff; border: 1px solid #EADFCB; border-radius: 20px; padding: 10px; box-shadow: 0 20px 40px -32px rgba(42, 24, 16, .6); display: grid; gap: 10px; }
.ct-map iframe { width: 100%; height: 340px; border: 0; border-radius: 14px; display: block; }
.ct-dir { justify-content: center; }
.ct-photo { margin: 0; border-radius: 20px; overflow: hidden; position: relative; box-shadow: 0 20px 40px -32px rgba(42, 24, 16, .6); min-height: 260px; }
.ct-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-photo figcaption { position: absolute; left: 14px; bottom: 14px; padding: 7px 12px; border-radius: 999px; background: rgba(42, 24, 16, .82); color: #F3DDAE; font: 700 11.5px/1 "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
@media (min-width: 1024px) { .ct-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; } .ct-visit { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px; align-items: stretch; } .ct-map iframe { height: 400px; } .ct-info { padding: 38px 36px; } .ct-form { padding: 34px 34px 28px; } }
@media (max-width: 639px) { .ct-info h2 { font-size: 29px; } .ct-form h2 { font-size: 27px; } .ct-form, .ct-info { padding: 24px 20px; } }
/* <<< DESTINATION PAGE END <<< */

/* >>> ITINERARY PAGE START (generated from _build/itinerary-page.css, do not edit here) >>> */
/* ITINERARY PAGE: styles for pages generated by _build/build-itineraries.js (main has classes "dp ip", so the dp-* pieces of the destination page are reused).
   Edit this file, then run: node _build/build-itineraries.js  (it copies the block into css/style.css). */

/* hero */
.ip-crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin-bottom: 14px; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.ip-crumbs a { color: #fff; }
.ip-crumbs a:hover { text-decoration: underline; }
.ip-crumbs .ip-crumb-here { color: #FFDCC5; }
@media (min-width: 640px) { .ip-crumbs { justify-content: flex-start; } }
.ip-hero-sub { font-family: "EB Garamond", serif; font-style: italic; font-size: 21px; line-height: 1.3; color: var(--bj-gold-lt); margin-bottom: 12px; }
@media (min-width: 1024px) { .ip-hero-sub { font-size: 26px; } }
.ip-hero-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; margin-bottom: 20px; padding: 10px 18px; border: 1px solid rgba(227, 200, 143, .55); border-radius: 8px; background: rgba(42, 24, 16, .45); backdrop-filter: blur(3px); color: #fff; }
.ip-hero-price-l { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bj-gold-lt); }
.ip-hero-price-v { font-family: "EB Garamond", serif; font-size: 34px; font-weight: 700; line-height: 1; color: #fff; }
.ip-hero-price-n { font-size: 15px; color: rgba(255, 255, 255, .85); }
.ip-hero .bj-btn, .ip-hero .bj-btn--light { min-height: 50px; padding-left: 26px; padding-right: 26px; }
.ip-hero .bj-btn--light { background: rgba(42, 24, 16, .35); backdrop-filter: blur(3px); }

/* route line: stacked on phones, one line on wide screens */
.ip-routewrap { padding: 22px 0 30px; border-bottom: 1px solid var(--bj-line); }
.ip-route { max-width: 420px; margin: 10px auto 0; position: relative; }
.ip-route li { position: relative; padding-left: 30px; }
.ip-route li::before { content: ""; position: absolute; left: 8px; top: 20px; bottom: -6px; width: 1px; background: var(--bj-gold); opacity: .55; }
.ip-route li:last-child::before { display: none; }
.ip-stop { display: block; font-family: "EB Garamond", serif; font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--bj-ink); }
.ip-stop i { position: absolute; left: 2px; top: 8px; width: 14px; text-align: center; font-size: 13px; color: var(--bj-gold); background: #fff; }
.ip-stop i.fa-circle { font-size: 8px; top: 11px; }
.ip-stop em { font-family: "Inter", sans-serif; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bj-gold-ink); margin-left: 6px; }
.ip-leg { display: block; font-size: 15px; color: var(--bj-muted); padding: 2px 0 12px; min-height: 14px; }
@media (min-width: 1024px) {
  .ip-route { max-width: none; display: flex; justify-content: center; align-items: flex-start; gap: 0; }
  .ip-route li { padding: 0; display: flex; align-items: flex-start; }
  .ip-route li::before { display: none; }
  .ip-stop { text-align: center; white-space: nowrap; }
  .ip-stop i { position: static; display: block; margin: 0 auto 4px; background: transparent; }
  .ip-stop i.fa-circle { margin-top: 3px; margin-bottom: 6px; }
  .ip-stop em { display: block; margin: 0; }
  .ip-leg { position: relative; min-width: 150px; margin: 0 14px; padding: 16px 0 0; text-align: center; font-size: 14px; }
  .ip-leg::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; border-top: 1px dashed var(--bj-gold); }
}

/* overview + quote card */
.ip-side { display: flex; flex-direction: column; gap: 22px; }
.ip-quote { overflow: hidden; }
.ip-quote-top { padding: 22px 22px 18px; background: var(--bj-ivory); border-bottom: 1px solid var(--bj-line); }
.ip-quote-form { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 6px; }
.ip-quote-foot { padding: 10px 22px 20px; font-size: 14px; line-height: 1.5; color: var(--bj-muted); }
.ip-quote-foot i { color: var(--bj-gold); margin-right: 4px; }
/* sidebar enquiry card = the booking popup's own form (owner, 4 Oct) */
.ip-pop .bm-head { padding: 26px 20px 20px; }
.ip-pop .bm-title { padding-right: 0; font-size: 28px !important; }
.ip-pop .bm-form { padding: 18px 18px 4px; }
.ip-pop .bm-btn { cursor: pointer; }
.ip-pop .bm-trust { list-style: none; margin: 0; padding: 14px 12px 0; }
.ip-pop .bm-note { padding: 10px 18px 18px; }
.ip .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 1024px) { .ip-side { position: sticky; top: 96px; } }

/* day by day: the designer's stacked timeline, with a photo on every day (on phones too) */
.ip-stack { max-width: 1100px; margin: 0 auto; }
.ip-stack .tl-stack-num { background: var(--bj-ink); color: var(--bj-gold-lt); box-shadow: none; border: 1px solid var(--bj-gold); font-family: "EB Garamond", serif; font-size: 22px; }
.ip-stack.tl-stack::before { background: var(--bj-line); width: 1px; left: 24px; }
.ip-stack .tl-stack-body { border-color: var(--bj-line); border-radius: var(--bj-radius); box-shadow: var(--bj-shadow); }
.ip-day { display: grid; grid-template-columns: 1fr; }
.ip-day-img { height: 190px; overflow: hidden; }
.ip-day-txt { padding: 20px 18px 22px; }
.ip-day-n { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bj-gold-ink); margin-bottom: 4px; }
.ip-day-p { font-size: 16px; line-height: 1.7; color: var(--bj-text); margin-bottom: 14px; }
.ip-sights { background: var(--bj-ivory); border: 1px solid var(--bj-line); border-radius: 10px; padding: 14px 16px; }
.ip-sights ul { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 4px; }
.ip-sights li { display: flex; gap: 9px; align-items: baseline; font-size: 15.5px; line-height: 1.45; color: var(--bj-text); }
.ip-sights li i { color: var(--bj-gold); font-size: 12px; flex: none; }
.ip-day-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bj-line); }
.ip-day-meta li { display: flex; gap: 8px; align-items: baseline; font-size: 15px; line-height: 1.45; color: var(--bj-muted); }
.ip-day-meta li i { color: var(--bj-gold); font-size: 13px; width: 16px; text-align: center; flex: none; }
.ip-day-meta strong { color: var(--bj-ink); font-weight: 600; }
@media (min-width: 640px) { .ip-sights ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ip-day-img { height: 260px; } .ip-day-txt { padding: 26px 28px 28px; } }
@media (min-width: 1024px) {
  .ip-day { grid-template-columns: minmax(0, 1fr) 320px; }
  .ip-day-img { order: 2; height: auto; position: relative; margin: 16px 16px 16px 0; border-radius: 10px; }
  .ip-day-img img { position: absolute; inset: 0; }
  .ip-day-txt { order: 1; }
}

/* inclusions and exclusions */
.ip-incgrid { max-width: 1100px; margin: 0 auto; }
.ip-inc { padding: 24px 20px; }
.ip-inc li { display: flex; gap: 11px; align-items: baseline; font-size: 16px; line-height: 1.55; color: var(--bj-text); padding: 9px 0; border-top: 1px solid var(--bj-line); }
.ip-inc li:first-child { border-top: 0; padding-top: 0; }
.ip-inc li i { flex: none; width: 16px; text-align: center; font-size: 13px; }
.ip-inc--yes li i { color: var(--bj-gold); }
.ip-inc--no { background: var(--bj-ivory); }
.ip-inc--no li i { color: var(--bj-muted); }
@media (min-width: 1024px) { .ip-inc { padding: 32px 30px; } }

/* price table */
.ip-tprice { font-family: "EB Garamond", serif; font-size: 24px; font-weight: 700; color: var(--bj-ink); line-height: 1.1; white-space: nowrap; }
@media (max-width: 767px) { .ip-ptable td + td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; } .ip-ptable td:first-child { padding-bottom: 6px; } }

/* from <city> and good to know */
.ip-mfacts { margin-top: 12px; }
.ip-mfacts li { position: relative; padding-left: 16px; font-size: 15.5px; line-height: 1.6; color: var(--bj-text); margin-bottom: 6px; }
.ip-mfacts li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--bj-gold); }
.ip-tip { display: flex; gap: 14px; align-items: flex-start; max-width: 900px; margin: 26px auto 0; padding: 18px 20px; background: var(--bj-ivory); border: 1px solid var(--bj-line); border-left: 3px solid var(--bj-gold); border-radius: 10px; }
.ip-tip i { color: var(--bj-gold); font-size: 18px; margin-top: 4px; }
.ip-tip p { font-size: 16px; line-height: 1.65; color: var(--bj-text); }
.ip-know { padding: 22px 20px; }
.ip-know > i { color: var(--bj-gold); font-size: 22px; margin-bottom: 12px; }
.ip-destcards { margin-top: 28px; }
.ip-formpkg { font-family: "EB Garamond", serif; font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--bj-ink); padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--bj-line); }
.ip-formpkg span { display: block; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bj-gold-ink); margin-bottom: 2px; }
.ip .bj-link { font-size: inherit; }

/* sticky enquiry bar: phones and tablets only. The floating call and WhatsApp buttons step aside on these pages. */
.ip-bar { display: none; }
@media (max-width: 991px) {
  .ip-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 8px; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); background: var(--bj-ink); border-top: 1px solid var(--bj-gold); box-shadow: 0 -6px 20px rgba(42, 24, 16, .22); transition: transform .3s ease; }
  .ip-bar.ip-bar--off { transform: translateY(110%); }
  .ip-bar-price { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; color: #fff; line-height: 1.15; }
  .ip-bar-l { flex-basis: 100%; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bj-gold-lt); }
  .ip-bar-price strong { font-family: "EB Garamond", serif; font-size: 25px; font-weight: 700; color: #fff; }
  .ip-bar-price strong.ip-bar-ask { font-size: 18px; }
  .ip-bar-n { font-size: 13px; color: rgba(255, 255, 255, .8); }
  .ip-bar-ic { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(227, 200, 143, .6); border-radius: 6px; color: var(--bj-gold-lt); font-size: 17px; }
  .ip-bar-wa { color: #fff; background: #25D366; border-color: #25D366; font-size: 21px; }
  .ip-bar-btn { flex: none; min-height: 44px; padding: 10px 16px; }
  body.page-itinerary-v2 #callFloatBtn, body.page-itinerary-v2 #whatsappFloatBtn { display: none !important; }
  body.page-itinerary-v2 #scrollTopBtn { bottom: 76px; }
  body.page-itinerary-v2 .bj-footer { padding-bottom: 84px; }
}

/* train list on phones: name, then departs / arrives / travel time side by side, then running days */
@media (max-width: 767px) {
  .ip-trains tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; }
  .ip-trains td:first-child, .ip-trains td:last-child { grid-column: 1 / -1; }
  .ip-trains td + td::before { display: block; font-family: "Inter", sans-serif; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
  .ip-trains td:last-child::before { display: inline; }
  .ip-trains td { font-weight: 600; color: var(--bj-ink); }
  .ip-trains td:last-child { font-weight: 400; color: var(--bj-muted); }
}

/* wide screens: the hero grows with its content so the snapshot strip never covers the buttons */
@media (min-width: 1024px) { main.ip .ip-hero { aspect-ratio: auto; min-height: 640px; padding-top: 64px; padding-bottom: 96px; } }

/* ---- photo-free day plan ("planStyle": "line") ---- */
.ip-line { max-width: 920px; margin: 0 auto; }
.ip-line .dp-tl { gap: 18px; }
.ip-line .dp-tl-n { box-shadow: 0 0 0 5px var(--bj-ivory, #FBF6EE); }
.ip-line .dp-tl-card { padding: 20px 24px 22px; box-shadow: 0 12px 28px -22px rgba(42, 24, 16, .45); }
.ip-line .dp-tl-card h3 { font-size: 24px; margin-bottom: 8px; }
.ip-line .dp-tl-card .dp-body { font-size: 16px; line-height: 1.75; margin: 0 0 10px; }
.ip-line .dp-tl-card .dp-body:last-child { margin-bottom: 0; }
.ip-chips { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.ip-chips li { padding: 6px 12px; border-radius: 999px; background: var(--bj-ivory, #FBF6EE); border: 1px solid var(--bj-line, #EADFCB); font: 500 13.5px/1.2 "Inter", sans-serif; color: var(--bj-ink, #2A1810); }
@media (max-width: 639px) { .ip-line .dp-tl-card { padding: 15px 15px 17px; } .ip-line .dp-tl-card h3 { font-size: 20px; } .ip-line .dp-tl-card .dp-body { font-size: 15.5px; } }

/* photo-free template: overview text reads a little larger so it balances the enquiry card */
.ip-ov--lean .dp-text p { font-size: 17px; line-height: 1.8; }
@media (min-width: 1024px) { .ip-ov--lean { max-width: 1120px; margin: 0 auto; } }

/* ================= photo-free itinerary template, second pass (4 Oct) ================= */
.ip-dsec { background: linear-gradient(180deg, #FBF6EE 0%, #F4EBDD 100%); }
.ip-d-strip { list-style: none; margin: -14px auto 30px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ip-d-strip li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid #E9DCC6; font: 600 13.5px/1 "Inter", sans-serif; color: var(--bj-ink, #2A1810); box-shadow: 0 6px 16px -12px rgba(42, 24, 16, .5); }
.ip-d-strip li i { color: var(--bj-gold, #B8893B); font-size: 13px; }
.ip-dlist { list-style: none; margin: 0 auto; padding: 0; max-width: 960px; display: grid; gap: 20px; position: relative; }
.ip-dlist::before { content: ""; position: absolute; left: 35px; top: 30px; bottom: 30px; width: 2px; background: repeating-linear-gradient(180deg, var(--bj-gold, #B8893B) 0 8px, transparent 8px 15px); opacity: .65; }
.ip-d { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: start; position: relative; }
.ip-d-n { width: 72px; height: 72px; border-radius: 20px; background: linear-gradient(145deg, #2A1810, #4A2C1B); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 700 26px/1 "Inter", sans-serif; box-shadow: 0 0 0 6px #F8F1E5, 0 14px 26px -14px rgba(42, 24, 16, .8); position: relative; z-index: 1; }
.ip-d-n small { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #E3C88F; margin-bottom: 4px; }
.ip-d-card { background: #fff; border: 1px solid #EADFCB; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 36px -26px rgba(42, 24, 16, .55); transition: transform .25s, box-shadow .25s; }
.ip-d-card:hover { transform: translateY(-2px); box-shadow: 0 24px 44px -26px rgba(42, 24, 16, .6); }
.ip-d-head { display: flex; align-items: center; gap: 14px; padding: 16px 22px; background: linear-gradient(90deg, #FBF6EE 0%, #fff 100%); border-bottom: 1px solid #F0E6D6; border-left: 4px solid var(--bj-gold, #B8893B); }
.ip-d-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--bj-gold, #B8893B); color: var(--bj-orange, #F15A24); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.ip-d-head h3 { margin: 0; font-size: 24px; font-weight: 600 !important; line-height: 1.25; color: var(--bj-ink, #2A1810); }
.ip-d-body { padding: 18px 22px 20px; }
.ip-d-body .dp-body { margin: 0 0 10px; font-size: 16px; line-height: 1.75; color: var(--bj-text, #2B2420); }
.ip-d-body .dp-body:last-child { margin-bottom: 0; }
.ip-d-note { max-width: 960px; margin: 22px auto 0; padding: 14px 18px; border-radius: 12px; background: rgba(255, 255, 255, .7); border: 1px dashed var(--bj-gold, #B8893B); font-size: 14.5px; line-height: 1.6; color: var(--bj-muted, #6B5E55); text-align: center; }
.ip-iogrid { max-width: 1040px; margin: 0 auto; }
.ip-recs { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .ip-recs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.ip-rec { display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: 18px; background: linear-gradient(180deg, #14382C 0%, #0C241C 100%); border: 1px solid #1E4A3A; color: #fff; box-shadow: 0 18px 38px -22px rgba(8, 26, 20, .75); }
.ip-rec-tag { margin: 0 0 10px; align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: rgba(227, 200, 143, .16); border: 1px solid rgba(227, 200, 143, .4); color: #E3C88F; font: 700 11.5px/1 "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.ip-rec-tag i { font-size: 10px; margin-right: 4px; }
.ip-rec h3 { margin: 0 0 6px; font-size: 24px; font-weight: 600 !important; line-height: 1.22; color: #fff !important; }
.ip-rec-d { margin: 0 0 14px; font-size: 14.5px; color: #BCD3C8; }
.ip-rec-d i { color: #E3C88F; margin-right: 4px; }
.ip-rec-p { margin: auto 0 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ip-rec-p small { width: 100%; font: 700 11px/1 "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #E3C88F; }
.ip-rec-p strong { font: 700 26px/1 "Inter", sans-serif; color: #fff; font-variant-numeric: lining-nums; }
.ip-rec-p span { font-size: 14px; color: #BCD3C8; }
.ip-rec-b { margin-top: auto; }
.ip-rec-b .bj-btn { width: 100%; min-height: 48px; border-radius: 12px; }
.ip-faq5 { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
@media (max-width: 639px) {
  .ip-dlist::before { left: 25px; }
  .ip-d { grid-template-columns: 52px 1fr; gap: 12px; }
  .ip-d-n { width: 52px; height: 52px; border-radius: 15px; font-size: 19px; box-shadow: 0 0 0 4px #F8F1E5, 0 10px 20px -12px rgba(42, 24, 16, .8); }
  .ip-d-n small { font-size: 9.5px; margin-bottom: 3px; }
  .ip-d-head { padding: 13px 14px; gap: 10px; }
  .ip-d-ic { width: 34px; height: 34px; font-size: 13px; }
  .ip-d-head h3 { font-size: 19.5px; }
  .ip-d-body { padding: 14px 14px 16px; }
  .ip-d-body .dp-body { font-size: 15.5px; }
  .ip-d-strip { margin-top: -8px; margin-bottom: 22px; }
  .ip-d-strip li { padding: 7px 12px; font-size: 12.5px; }
}

/* ---- lean template: tighter vertical rhythm (owner, 4 Oct: too much empty space) ---- */
.ip-lean > section.dp-sec, .ip-lean > section[class*="py-"] { padding-top: 52px !important; padding-bottom: 52px !important; }
.ip-lean > section .text-center.max-w-3xl { margin-bottom: 24px !important; }
.ip-lean > section#overview { padding-top: 44px !important; padding-bottom: 44px !important; }
.ip-lean .ip-d-strip { margin: -6px auto 22px; }
.ip-lean .ip-dlist { gap: 14px; }
.ip-lean .ip-d-head { padding-top: 13px; padding-bottom: 13px; }
.ip-lean .ip-d-body { padding-top: 14px; padding-bottom: 16px; }
.ip-lean .ip-d-note { margin-top: 16px; }
.ip-lean .dp-note.mt-6 { margin-top: 16px !important; }
.ip-lean > div.relative[class*="py-24"] { padding-top: 72px !important; padding-bottom: 72px !important; }
.ip-lean .dp-factswrap { padding-bottom: 14px !important; }
@media (max-width: 639px) {
  .ip-lean > section.dp-sec, .ip-lean > section[class*="py-"] { padding-top: 36px !important; padding-bottom: 36px !important; }
  .ip-lean > section#overview { padding-top: 30px !important; padding-bottom: 30px !important; }
  .ip-lean > section .text-center.max-w-3xl { margin-bottom: 18px !important; }
  .ip-lean > div.relative[class*="py-24"] { padding-top: 52px !important; padding-bottom: 52px !important; }
}

/* ---- lean template: share / PDF bar under inclusions ---- */
.ip-share { max-width: 1040px; margin: 18px auto 0; padding: 14px 18px; border-radius: 14px; background: var(--bj-ivory, #FBF6EE); border: 1px solid #EADFCB; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ip-share p { margin: 0; font-size: 15px; color: var(--bj-text, #2B2420); }
.ip-share p strong { font-family: "EB Garamond", serif; font-size: 20px; font-weight: 600; color: var(--bj-ink, #2A1810); margin-right: 4px; }
.ip-share-b { display: flex; flex-wrap: wrap; gap: 8px; }
.ip-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 10px; background: #fff; border: 1px solid #DCCDB4; color: var(--bj-ink, #2A1810); font: 600 13.5px/1 "Inter", sans-serif; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .15s; }
.ip-share-btn:hover { border-color: var(--bj-orange, #F15A24); box-shadow: 0 8px 18px -12px rgba(241, 90, 36, .8); transform: translateY(-1px); color: var(--bj-ink, #2A1810); }
.ip-share-btn i { color: var(--bj-orange, #F15A24); font-size: 14px; }
.ip-share-wa { background: #25D366; border-color: #25D366; color: #fff !important; }
.ip-share-wa i { color: #fff; font-size: 17px; }

/* ---- lean template: sentence-style quote form ---- */
.ip-ql { background: #FBF6EE; border-top: 1px solid #EFE4D2; }
.ip-ql-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
@media (min-width: 1024px) { .ip-ql-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; } .ip-ql-grid--solo { grid-template-columns: 1fr; max-width: 860px; } }
.ip-ql-txt h2 { margin: 0 0 16px; font-size: 34px; font-weight: 600 !important; line-height: 1.18; color: var(--bj-orange, #F15A24); }
.ip-ql-line { margin: 0 0 20px; font-size: 17px; line-height: 2.25; color: var(--bj-text, #2B2420); }
.ip-ql-line strong { color: var(--bj-orange, #F15A24); font-weight: 600; }
.ip-ql-in { display: inline-block; vertical-align: baseline; border: 0; border-bottom: 2px solid #D9C7A8; background: transparent; padding: 2px 4px 3px; font: 600 17px/1.2 "Inter", sans-serif; color: var(--bj-ink, #2A1810); outline: none; border-radius: 0; transition: border-color .2s, background .2s; }
.ip-ql-in::placeholder { color: #A99B8C; font-weight: 500; }
.ip-ql-in:focus { border-bottom-color: var(--bj-orange, #F15A24); background: #fff; }
.ip-ql-in--name { width: 170px; } .ip-ql-in--n { width: 62px; text-align: center; } .ip-ql-in--ph { width: 190px; }
.ip-ql-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ip-ql-btns .bj-btn { min-height: 48px; }
.ip-ql-note { margin: 14px 0 0; font-size: 13.5px; color: var(--bj-muted, #6B5E55); }
.ip-ql-note i { color: var(--bj-gold, #B8893B); margin-right: 6px; }
.ip-ql-fig { margin: 0; height: 280px; border-radius: 18px; overflow: hidden; box-shadow: 0 22px 44px -26px rgba(42, 24, 16, .6); border: 1px solid #EADFCB; }
@media (max-width: 639px) {
  .ip-share { padding: 14px; } .ip-share-b { width: 100%; } .ip-share-btn { flex: 1 1 0; padding: 10px 8px; font-size: 12.5px; }
  .ip-ql-txt h2 { font-size: 26px; }
  .ip-ql-line { font-size: 16px; line-height: 2.3; }
  .ip-ql-in { font-size: 16px; } .ip-ql-in--name { width: 150px; } .ip-ql-in--ph { width: 170px; }
  .ip-ql-btns .bj-btn { width: 100%; }
  .ip-ql-btns .ip-share-btn { flex: 1 1 0; }
  .ip-ql-fig { height: 200px; order: -1; }
}

/* ---- Save PDF: a clean print layout for the lean itinerary page ---- */
@media print {
  header, .bj-footer, #callFloatBtn, #planFloatBtn, #whatsappFloatBtn, #enqFloatBtn, #scrollTopBtn, #ipBar, #bookingModal, .ip-share, .ip-ql, #reviews, #recommended, #faq, .ip-quote, .ip-lean > div.relative[class*="py-"], .bj-logo-strip, .ip-hero .flex.flex-col, .dp-hero-chips { display: none !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
  .ip-lean > section.dp-sec { padding-top: 14px !important; padding-bottom: 14px !important; background: #fff !important; }
  .ip-hero { min-height: 0 !important; height: auto !important; padding: 18px !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ip-d, .ip-d-card, .dp-io { break-inside: avoid; }
  .ip-d-card, .dp-io { box-shadow: none !important; }
  body { font-size: 12pt; }
}

/* ================= lean template: two columns up to the reviews (owner, 4 Oct) ================= */
main.ip-lean { overflow-x: clip !important; overflow-y: visible !important; background: #fff; }   /* clip (not hidden) so the right column can stick */
.ip-2col { max-width: 1280px; margin: 0 auto; padding: 34px 16px 10px; display: flex; flex-direction: column; gap: 22px; }
.ip-main { display: contents; }
.ip-2col section { order: 3; padding: 0 !important; background: none !important; }
.ip-2col section#overview { order: 1; }
.ip-aside { order: 2; }
.ip-2col section > .container { max-width: none !important; padding: 0 !important; margin: 0 !important; }
.ip-2col section .text-center.max-w-3xl { text-align: left !important; margin: 0 0 16px !important; max-width: none !important; }
.ip-2col section .text-center.max-w-3xl > div:first-child { justify-content: flex-start !important; }
.ip-2col section .text-center.max-w-3xl > div:first-child > span:first-child, .ip-2col section .text-center.max-w-3xl > div:first-child > span:nth-child(2) { display: none; }
.ip-2col section .text-center.max-w-3xl h2 { font-size: 28px !important; }
.ip-2col section .bj-rule { margin-left: 0 !important; }
.ip-2col .ip-d-strip { justify-content: flex-start; margin: 0 0 18px; }
.ip-2col .ip-dlist, .ip-2col .ip-d-note, .ip-2col .ip-iogrid, .ip-2col .ip-share { max-width: none; margin-left: 0; margin-right: 0; }
.ip-2col .ip-dsec { background: none; }
.ip-2col .text-center.mt-7 { text-align: left; margin-top: 16px; }
.ip-2col .dp-note.text-center { text-align: left; }
.ip-ov-box { position: relative; max-height: calc(16.5px * 1.8 * 2); overflow: hidden; }
@media (max-width: 639.98px) { .ip-ov-box { max-height: calc(15px * 1.62 * 2); } }
.ip-ov-box.is-open { max-height: none; }
.ip-ov-box.is-clamped:not(.is-open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); }
.ip-ov-box p { font-size: 16.5px; line-height: 1.8; }
.ip-ov-box > :first-child { margin-top: 0; }
.ip-ov-more { display: flex; align-items: center; gap: 7px; margin: 6px 0 0 auto; min-height: 44px; background: none; border: 0; cursor: pointer; font: 700 13.5px/1 "Inter", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--bj-orange, #F15A24); }
.ip-ov-more[hidden] { display: none; }
.ip-ov-more i { font-size: 11px; transition: transform .25s; }
.ip-ov-more[aria-expanded="true"] i { transform: rotate(180deg); }
.ip-aside-in { display: grid; gap: 16px; }
.ip-side-h { margin: 0 0 10px; font: 700 12px/1 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8C6524; }
.ip-side-h i { color: var(--bj-gold, #B8893B); margin-right: 6px; }
.ip-gal { background: #fff; border: 1px solid #EADFCB; border-radius: 18px; padding: 14px; box-shadow: 0 16px 34px -26px rgba(42, 24, 16, .55); }
.ip-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.ip-g-t { padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--bj-sand, #F4EBDD); cursor: zoom-in; display: block; }
.ip-g-t img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ip-g-t:hover img { transform: scale(1.07); }
.ip-g-big { grid-column: 1 / -1; aspect-ratio: 16 / 10; border-radius: 12px; }
.ip-aside .ip-quote { margin: 0; }
@media (min-width: 1024px) {
  .ip-2col { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 40px; align-items: start; padding: 44px 32px 20px; }
  .ip-main { display: grid; gap: 40px; min-width: 0; }
  .ip-aside { position: sticky; top: 88px; min-width: 0; }
  .ip-2col section { order: 0 !important; }
  .ip-2col .dp-iogrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1023px) { .ip-aside-in { max-width: 560px; margin: 0 auto; width: 100%; } }
/* photos + form stay beside the plan; on shorter screens the pair is made compact so the whole form fits */
@media (min-width: 1024px) and (max-height: 960px) {
  .ip-aside-in { gap: 12px; }
  .ip-aside .ip-gal { padding: 10px 12px 12px; }
  .ip-aside .ip-g-big { aspect-ratio: 16 / 7; }
  .ip-pop .bm-head { padding: 16px 18px 14px !important; }
  .ip-pop .bm-title { margin: 8px 0 0; font-size: 25px !important; }
  .ip-pop .bm-sub { display: none; }
  .ip-pop .bm-form { gap: 10px; padding: 14px 16px 2px; }
  .ip-pop .bm-field input, .ip-pop .bm-field textarea { padding-top: 11px; padding-bottom: 11px; }
  .ip-pop .bm-area textarea { height: 76px; overflow: hidden; }
  .ip-pop .bm-trust { padding-top: 10px; }
  .ip-pop .bm-note { padding: 8px 14px 12px; }
}@media (min-width: 1024px) and (max-height: 800px) {
  .ip-aside { position: static; align-self: stretch; }
  .ip-aside-in { height: 100%; align-content: start; }
  .ip-aside .ip-quote { position: sticky; top: 88px; }
}

/* ================= Save PDF (newest itinerary template): portrait letterhead, two flowing columns =================
   Every page of the PDF carries the letterhead (small logo + company name) on top and the contact strip at the bottom:
   they are the header and footer rows of a table, which Chrome repeats on each printed page.
   The page margin is 0, so the browser cannot add its own date / title / URL lines; the letterhead rows give the spacing.
   Two columns: Tour Overview + day plan | photos + inclusions and exclusions (js/forms.js moves the inclusions
   under the photos while printing), so a 3 day plan fits on ONE portrait page; longer plans run on to the next page.
   Cards never split across pages. */
.ip-ph, .ip-pf { display: none; }
@page plan { size: 262mm 371mm; margin: 0; }   /* portrait, A4 proportions, a little larger, so a 3 day plan fits on one page */
@media print {
  #mobileSidebar { display: none !important; }
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  main.ip-lean { page: plan; display: table !important; table-layout: fixed; width: 100%; box-sizing: border-box; border-spacing: 0; margin: 0 !important; padding: 0 10mm !important; overflow: visible !important; background: #fff !important; }
  main.ip-lean, main.ip-lean * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  main.ip-lean [data-aos] { opacity: 1 !important; transform: none !important; }

  /* letterhead, repeated on every page */
  .ip-ph { display: table-header-group; break-inside: avoid; }
  .ip-ph-in { display: flex; align-items: center; gap: 14px; padding: 7mm 2px 8px; margin-bottom: 10px; border-bottom: 2px solid var(--bj-gold, #B8893B); }
  .ip-ph-logo { height: 46px; width: auto; flex: none; }
  .ip-ph-m { flex: 1; margin: 0; display: flex; flex-direction: column; gap: 4px; }
  .ip-ph-m strong { font: 700 25px/1 "EB Garamond", "Cormorant Garamond", serif; color: #2A1810; letter-spacing: 0; }
  .ip-ph-m span { font: 500 12.5px/1.3 "Inter", sans-serif !important; color: #6B5B4E !important; }
  .ip-ph-r { margin: 0; display: flex; flex-direction: column; gap: 6px; text-align: right; font: 700 14px/1 "Inter", sans-serif !important; color: #2A1810 !important; }
  .ip-ph-r i { color: var(--bj-orange, #F15A24); margin-right: 5px; font-size: 12px; }

  /* contact strip, repeated on every page */
  .ip-pf { display: table-footer-group; break-inside: avoid; }
  .ip-pf-in { margin: 10px 0 6mm; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #2A1810 0%, #4B2C19 100%); color: #fff; border-top: 3px solid var(--bj-gold, #B8893B); }
  .ip-pf-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 11px 20px 10px; }
  .ip-pf-l { flex: 0 0 100%; margin: 0; text-align: center; }
  .ip-pf-l strong { font: 700 20px/1.1 "EB Garamond", serif; color: #fff; }
  .ip-pf-l span { display: none; }
  .ip-pf-c { flex: 1; display: flex; justify-content: space-between; gap: 14px; margin: 0; padding: 0; list-style: none; }
  .ip-pf-c li { display: flex; align-items: center; gap: 8px; }
  .ip-pf-c i { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(227, 200, 143, .16); border: 1px solid rgba(227, 200, 143, .45); color: #E3C88F; font-size: 12px; }
  .ip-pf-c span { display: flex; flex-direction: column; gap: 3px; font: 600 9.5px/1 "Inter", sans-serif !important; letter-spacing: .12em; text-transform: uppercase; color: #E3C88F !important; }
  .ip-pf-c b { font: 700 12.5px/1 "Inter", sans-serif; letter-spacing: 0; text-transform: none; color: #fff; }
  .ip-pf-b { margin: 0; padding: 6px 22px; background: rgba(0, 0, 0, .28); font: 400 11px/1.35 "Inter", sans-serif !important; color: rgba(244, 235, 221, .9) !important; text-align: center; }

  /* banner and facts */
  main.ip-lean > div.ip-hero.relative[class*="py-"] { display: flex !important; min-height: 0 !important; }
  .ip-hero { aspect-ratio: auto !important; border-radius: 14px; padding: 18px 22px !important; break-inside: avoid; }
  .ip-hero > .container { display: flex !important; align-items: center; justify-content: space-between; gap: 20px; text-align: left !important; }
  .ip-hero > .container { max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .ip-hero h1 { font-size: 30px !important; line-height: 1.12 !important; margin: 0 !important; width: auto !important; }
  .ip-hero-price { margin: 0 !important; flex: none; }
  .ip-crumbs { display: none !important; }
  main.ip-lean .dp-factswrap { padding: 8px 0 0 !important; border: 0 !important; background: none !important; break-inside: avoid; }
  .dp-factswrap > .container { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .dp-factswrap .dp-facts { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; max-width: none !important; margin: 0 !important; box-shadow: none !important; }
  .dp-factswrap .dp-fact { padding: 9px 12px; }
  .dp-factswrap ul { display: none !important; }

  /* two flowing columns: overview + day plan | photos + inclusions and exclusions (a grid row breaks across pages with both columns running on) */
  .ip-2col { display: grid !important; grid-template-columns: minmax(0, 1fr) 40.5%; column-gap: 2%; align-items: start; max-width: none !important; margin: 0 !important; padding: 12px 0 0 !important; }
  .ip-main { display: block !important; grid-column: 1; grid-row: 1; min-width: 0; }
  .ip-aside { display: block !important; grid-column: 2; grid-row: 1; min-width: 0; position: static !important; }
  .ip-aside-in { display: block !important; max-width: none !important; height: auto !important; }
  .ip-2col section { margin: 0 0 12px !important; box-shadow: none !important; }
  .ip-2col .text-center.mt-7, .ip-2col .bj-btn, .ip-2col .ip-d-strip, .ip-2col .dp-note, .ip-main > .dp-note { display: none !important; }
  .ip-2col section .text-center.max-w-3xl { margin: 0 0 9px !important; break-inside: avoid; break-after: avoid; }
  .ip-2col section .text-center.max-w-3xl > div:first-child { display: none !important; }
  .ip-2col section .text-center.max-w-3xl h2 { font-size: 21px !important; margin-bottom: 2px !important; }

  /* left: overview, then the day plan */
  .ip-ov-box { max-height: none !important; }
  .ip-ov-box::after, .ip-ov-more { display: none !important; }
  .ip-ov-box p { font-size: 14.5px; line-height: 1.6; }
  main.ip-lean .ip-2col section#overview { padding: 14px 18px 12px !important; break-inside: avoid; }
  main.ip-lean .ip-2col section#overview h2 { font-size: 23px !important; margin-bottom: 2px !important; }
  main.ip-lean .ip-2col section#overview::after { font-size: 70px; }
  main.ip-lean .ip-2col section#itinerary { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; }
  main.ip-lean .ip-2col .ip-dlist { display: block !important; }
  main.ip-lean .ip-2col .ip-dlist::before { display: none; }
  main.ip-lean .ip-2col .ip-d { break-inside: avoid; margin: 0 0 8px; gap: 10px; grid-template-columns: 50px 1fr; }
  main.ip-lean .ip-2col .ip-d-n { width: 50px; height: 50px; border-radius: 14px; font-size: 19px; box-shadow: none; }
  main.ip-lean .ip-2col .ip-d-n small { font-size: 8.5px; margin-bottom: 2px; }
  .ip-2col .ip-d-card { box-shadow: none !important; break-inside: avoid; }
  main.ip-lean .ip-2col .ip-d-head { padding: 7px 14px !important; gap: 10px; }
  main.ip-lean .ip-2col .ip-d-head h3 { font-size: 19px; }
  main.ip-lean .ip-2col .ip-d-ic { width: 32px; height: 32px; font-size: 13px; }
  main.ip-lean .ip-2col .ip-d-body { padding: 10px 14px 11px !important; }
  main.ip-lean .ip-2col .ip-d-body .dp-body { font-size: 14.5px; line-height: 1.6; }
  main.ip-lean .ip-2col .ip-d-note { display: block !important; margin: 0 0 12px !important; padding: 8px 12px !important; font-size: 13px; break-inside: avoid; break-before: avoid; }

  /* right: photos in one compact block, then what is included */
  .ip-aside .ip-gal { margin: 0 0 12px; padding: 10px 12px 12px; box-shadow: none; break-inside: avoid; }
  .ip-aside .ip-g { gap: 6px; }
  .ip-aside .ip-g-big { aspect-ratio: 16 / 9; }
  .ip-2col .dp-iogrid, .ip-2col .ip-iogrid { display: block !important; margin: 0 !important; max-width: none !important; }
  .ip-2col .ip-io, .ip-2col .dp-io { break-inside: avoid; margin: 0 0 10px; box-shadow: none !important; }
  .ip-2col .ip-io-h { padding: 8px 16px; break-after: avoid; }
  .ip-2col .ip-io-ic { width: 30px; height: 30px; font-size: 13px; }
  .ip-2col .ip-io-h h3 { font-size: 20px; }
  .ip-2col .ip-io ul { padding-top: 4px !important; padding-bottom: 6px !important; }
  .ip-2col .ip-io li { padding-top: 6px !important; padding-bottom: 6px !important; font-size: 13.5px !important; line-height: 1.4 !important; gap: 9px; }
  .ip-2col .ip-io ul { padding-left: 14px !important; padding-right: 14px !important; }
  .ip-pcol #inclusions .text-center.max-w-3xl { display: none !important; }   /* in their own column the two cards carry their own titles */
  .ip-pcol section { margin: 0 !important; }
  .ip-2col .ip-io li > span:last-child { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
}

/* two-column template: section heading dividers sit under the left edge of the heading */
.ip-2col section .text-center.max-w-3xl > div:last-child { margin-left: 0 !important; margin-right: auto !important; }

/* ================= lean template polish (4 Oct, later): centred headings, panels, richer inclusion cards ================= */
.ip-2col section .text-center.max-w-3xl { text-align: center !important; margin: 0 auto 18px !important; }
.ip-2col section .text-center.max-w-3xl > div:first-child { justify-content: center !important; }
.ip-2col section .text-center.max-w-3xl > div:first-child > span:first-child, .ip-2col section .text-center.max-w-3xl > div:first-child > span:nth-child(2) { display: block; }
.ip-2col section .text-center.max-w-3xl > div:last-child { margin-left: auto !important; margin-right: auto !important; }
.ip-2col .ip-d-strip { justify-content: center; margin: 0 0 20px; }
.ip-2col .text-center.mt-7 { text-align: center; }
.ip-2col .dp-note.text-center { text-align: center; }
/* overview: a quiet card with a gold edge */
.ip-2col section#overview { background: linear-gradient(180deg, #FFFDF9 0%, #fff 100%) !important; border: 1px solid #EFE4D2; border-top: 3px solid var(--bj-gold, #B8893B); border-radius: 18px; padding: 22px 24px 18px !important; box-shadow: 0 16px 34px -28px rgba(42, 24, 16, .5); }
/* overview card: eyebrow, watermark and pill Read More */
.ip-2col section#overview { position: relative; overflow: hidden; background: linear-gradient(180deg, #FFF7EA 0%, #fff 48%) !important; padding: 24px 28px 22px !important; box-shadow: 0 18px 40px -26px rgba(42, 24, 16, .45); }
.ip-2col section#overview::before { content: "About this tour"; display: block; margin-bottom: 8px; font: 700 11.5px/1 "Inter", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #8C6524; }
.ip-2col section#overview::after { content: "\e52f"; position: absolute; top: -6px; right: 14px; font: 900 112px/1 "Font Awesome 6 Free"; color: var(--bj-gold, #B8893B); opacity: .09; pointer-events: none; }
.ip-2col section#overview > * { position: relative; z-index: 1; }
.ip-2col section#overview .ip-ov-box p { color: #4A4039; }
.ip-2col section#overview .ip-ov-more { margin: 16px 0 0; padding: 0 20px; min-height: 40px; border: 1px solid #F6CDB9; border-radius: 999px; background: #FFF3EC; font-size: 12.5px; transition: background .2s, color .2s, border-color .2s, box-shadow .2s; }
.ip-2col section#overview .ip-ov-more:hover, .ip-2col section#overview .ip-ov-more:focus-visible { background: var(--bj-orange, #F15A24); border-color: var(--bj-orange, #F15A24); color: #fff; box-shadow: 0 10px 20px -12px rgba(241, 90, 36, .8); }
/* day by day: soft ivory panel */
.ip-2col section#itinerary { background: linear-gradient(180deg, #FBF6EE 0%, #F6EEE0 100%) !important; border: 1px solid #EFE4D2; border-radius: 22px; padding: 28px 26px 26px !important; }
.ip-2col .ip-d-n { box-shadow: 0 0 0 6px #F8F1E5, 0 14px 26px -14px rgba(42, 24, 16, .8); }
.ip-2col .ip-d-note { padding: 10px 16px; font-size: 14px; background: #fff; }
/* inclusions and exclusions */
.ip-io { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid; box-shadow: 0 18px 36px -28px rgba(42, 24, 16, .55); }
.ip-io--yes { border-color: #BFE3C6; }
.ip-io--no { border-color: #F1CFC6; }
.ip-io-h { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: #fff; }
.ip-io--yes .ip-io-h { background: linear-gradient(120deg, #1E7A34 0%, #2E9C48 100%); }
.ip-io--no .ip-io-h { background: linear-gradient(120deg, #A63B27 0%, #D0553D 100%); }
.ip-io-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .45); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.ip-io-h h3 { flex: 1; margin: 0; font-family: "EB Garamond", serif; font-size: 23px; font-weight: 600; line-height: 1.1; color: #fff; }
.ip-io-c { flex: none; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .2); font: 700 11.5px/1 "Inter", sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ip-io ul { list-style: none; margin: 0; padding: 6px 18px 10px; }
.ip-io li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px dashed #EADFCB; font-size: 15.5px; line-height: 1.5; color: var(--bj-text, #2B2420); }
.ip-io li:last-child { border-bottom: 0; }
.ip-io-b { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.ip-io--yes .ip-io-b { background: #E3F4E7; color: #1E7A34; }
.ip-io--no .ip-io-b { background: #FBE6E1; color: #B4432E; }
.ip-2col .ip-iogrid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 768px) { .ip-2col .ip-iogrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) {
  .ip-2col section#overview { padding: 20px 18px 18px !important; }
  .ip-2col section#overview::after { font-size: 84px; right: 8px; }
  .ip-2col section#itinerary { padding: 20px 14px 18px !important; border-radius: 18px; }
  .ip-io-h { padding: 12px 14px; } .ip-io-h h3 { font-size: 21px; } .ip-io ul { padding: 4px 14px 8px; } .ip-io li { font-size: 15px; }
}
@media print { .ip-io-h { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* two-column block lines up with the header and every other section (same widths as the site container) */
@media (min-width: 1024px) { .ip-2col { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1280px) { .ip-2col { max-width: 1280px; } }
@media (min-width: 1536px) { .ip-2col { max-width: 1536px; gap: 48px; } }

/* inclusions above, exclusions below (owner, 4 Oct): each card full width, its items in two columns on wide screens */
.ip-2col .ip-iogrid { grid-template-columns: 1fr !important; gap: 16px; }
@media (min-width: 768px) {
  .ip-io ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; padding: 8px 20px 12px; }
  .ip-io li { border-bottom: 1px dashed #EADFCB !important; }
  .ip-io li:nth-last-child(-n+2):nth-child(odd), .ip-io li:last-child { border-bottom: 0 !important; }
}

/* ================= phone polish (owner, 4 Oct) ================= */
/* overview: both lines stay readable, only the tail of line 2 fades into Read More */
.ip-ov-box.is-clamped:not(.is-open)::after { left: auto; right: 0; bottom: 0; width: 42%; height: 28px; background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 82%); }
@media (max-width: 639.98px) {
  .ip-ov-box { max-height: calc(15px * 1.62 * 2 + 3px); }
  .ip-ov-box.is-clamped:not(.is-open)::after { height: 23px; bottom: 2px; }
  /* day plan: the day number sits as a tab on top of its card, so the text gets the full width */
  .ip-lean .ip-dlist { gap: 16px; }
  .ip-lean .ip-dlist::before { display: none; }
  .ip-lean .ip-d { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ip-lean .ip-d-rail { display: flex; padding-left: 14px; }
  .ip-lean .ip-d-n { width: auto; height: auto; flex-direction: row; align-items: baseline; gap: 6px; padding: 7px 14px 6px; border-radius: 12px 12px 0 0; font-size: 15px; box-shadow: none; }
  .ip-lean .ip-d-n small { margin: 0; font-size: 10px; }
  .ip-lean .ip-d-head h3 { font-size: 20px; }
  .ip-lean .ip-d-body .dp-body { font-size: 15.5px; line-height: 1.7; }
}
/* the back-to-top button clears the sticky price bar */
@media (max-width: 991px) {
  /* phones and tablets: no form in the page flow, the sticky bar and the Enquire buttons open the same form as a popup */
  .ip-aside .ip-quote { display: none !important; }
  body:has(#ipBar) #scrollTopBtn { bottom: calc(88px + env(safe-area-inset-bottom)) !important; right: 14px !important; }
}

/* phone: review cards a little narrower, so more of the next review peeks in (owner, 4 Oct) */
@media (max-width: 639px) { .ip-lean #reviews .dp-swipe > * { flex-basis: 74%; } }

/* itinerary heading: package name on top, "Day Wise Itinerary" as a gold script line under it (owner, 4 Oct) */
.ip-lean #itinerary h2 { font-weight: 600 !important; line-height: 1.18; letter-spacing: -.005em; margin-bottom: 10px !important; }
.ip-lean #itinerary h2 .ip-dh-c { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ip-lean #itinerary h2 .ip-dh-s { display: block; margin-top: 6px; font: italic 500 .66em/1.2 "EB Garamond", "Cormorant Garamond", Georgia, serif; letter-spacing: .02em; color: #A8752B; }
.ip-lean #itinerary .text-center.max-w-3xl > div:first-child > span.font-semibold { padding: 5px 14px; border-radius: 999px; background: #fff; border: 1px solid #E9DCC6; color: #8C6524 !important; margin: 0 12px !important; font-size: 11.5px !important; }
@media (max-width: 639.98px) {
  .ip-lean .ip-d-strip { display: none !important; }
  .ip-lean #itinerary .text-center.max-w-3xl { margin-bottom: 20px !important; }
  .ip-lean #itinerary h2 { font-size: 27px !important; }
}

/* narrow desktop: the note box in the side form shows its whole 3-line text */
@media (min-width: 1024px) and (max-width: 1199px) and (max-height: 960px) { .ip-pop .bm-area textarea { height: 104px; } }

/* links inside the day bullets read as part of the sentence (no capitals, no button look), so a bullet stays one tidy pill */
.ip-chips li a { text-transform: none !important; letter-spacing: 0 !important; font: inherit !important; font-weight: 600 !important; color: var(--bj-orange-d, #D94C1A) !important; border: 0 !important; padding: 0 !important; display: inline !important; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 639px) { .ip-lean .ip-chips li { border-radius: 14px; } }
/* <<< ITINERARY PAGE END <<< */

/* >>> RESPONSIVE START (generated from _build/responsive.css, do not edit here) >>> */
/* RESPONSIVE: every page on every screen, 320px phones to 2560px monitors (owner, Oct 2026).
   One section per page family, each split into "small" (max-width 1023.98px) and "large" (min-width 1024px);
   every rule sits in a screen-only media query, so print (Save PDF) is never touched.
   This is the LAST block of css/style.css. Edit here, then run node _build/build.js (or require('./lib/responsive').apply()).
   How it was made and how to re-test: _build/tools/RWD-BRIEF.md and _build/tools/rwd-audit.js. */

/* ---------- shell: phones and tablets (up to 1023px) ---------- */
/* shell.small.css : site chrome (header, slide-in menu, logo strip, footer, floating UI, popups) on phones and tablets, up to 1023.98px.
   Appended at the end of css/style.css. Every rule sits in a "screen and (max-width ...)" query, so desktop and print are untouched. */

/* ---------- header ---------- */
/* 992 to 1023: the desktop menu was shown inside the 768px container and pushed the page 75 to 90px sideways.
   Keep the menu button (same orange button as on tablets) until the desktop layout starts at 1024. */
@media screen and (min-width: 992px) and (max-width: 1023.98px) {
  header.sticky .desktop-nav-container { display: none !important; }
  header.sticky .header-logo-link { gap: 6px; }
  header.sticky .mobile-hamburger-btn { display: flex !important; width: 44px; height: 44px; padding: 0 !important; flex-shrink: 0; background: #F15A24; color: #fff !important; border-radius: 6px !important; font-size: 18px !important; }
  header.sticky .mobile-hamburger-btn:hover { background: #d94c1a !important; }
}
/* tablets: the menu button gets the same 44px tap size it has on phones (was 38px) */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  header.sticky .mobile-hamburger-btn { width: 44px; height: 44px; }
}

/* ---------- slide-in menu ---------- */
@media screen and (max-width: 1023.98px) {
  /* icons share one column, so the menu labels start on one line */
  #mobileSidebar a > i.mr-3, #mobileSidebar button > span > i.mr-3 { width: 20px; text-align: center; }
  #mobileSidebar button > span > i.mr-3 { margin-right: 16px; }
  /* close button: a round 44px button (min-height made it a 36 x 44 oval) */
  #mobileSidebar button[aria-label="Close menu"] { width: 44px; height: 44px; flex: none; }
  /* destination links: the whole 40px row is the tap target, spacing unchanged */
  #mobileSidebar #mobileDestinationsMenu a { padding-top: 9px; padding-bottom: 9px; }
  #mobileSidebar #mobileDestinationsMenu a + a { margin-top: 2px; }
  /* the closed menu waits just outside the right edge and its shadow fell about 30px into the page as a grey band;
     no shadow while it is closed, the shadow is back as soon as the menu opens */
  #mobileSidebar.translate-x-full { box-shadow: none; }
}

/* ---------- popups ---------- */
@media screen and (max-width: 1023.98px) {
  /* video and photo popups open above the sticky header (the header sat on top of them) */
  #videoModal, #imageModal { z-index: 1001; }
  /* the message toast shows above the enquiry popup (it is the only answer the popup form gives when a field is missing) */
  #toastNotification { z-index: 1002; }
  /* photo popup: a visible close button, same round 40px button as the video popup (a tap anywhere on the popup closes it) */
  #imageModal::after { content: "\00d7"; position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(26, 26, 26, .6); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font: 400 28px/36px "Inter", sans-serif; text-align: center; cursor: pointer; }
  /* video popup on a phone held sideways: the 16:9 player is sized by the screen height, so its top, bottom and close button stay on screen */
  #videoModal > div { max-width: min(56rem, calc((100vh - 32px) * 16 / 9)); max-width: min(56rem, calc((100svh - 32px) * 16 / 9)); }
  /* enquiry popup: small print at 12px, the tag stays clear of the close button, bigger tap area for the close button */
  #bookingModal .bm-tag { font-size: 12px; line-height: 1.3; letter-spacing: .1px; padding-left: 9px; padding-right: 9px; max-width: calc(100% - 36px); border-radius: 14px; }
  #bookingModal .bm-note { font-size: 12px; }
  #bookingModal .bm-close::after { content: ""; position: absolute; inset: -6px; }
  /* enquiry popup heading: two even lines, no single word left alone ("Plan Your Madhya Pradesh / Trip") */
  #bookingModal .bm-title { text-wrap: balance; }
}
/* small phones: the photo heading keeps the 2-line title the plain heading has */
@media screen and (max-width: 380px) {
  #bookingModal .bm-head--photo .bm-title { font-size: 27px; }
}
/* narrow phones: the "Mobile / WhatsApp Number" hint fits in its field */
@media screen and (max-width: 359.98px) {
  #bookingModal .bm-form { padding-left: 14px; padding-right: 14px; }
  #bookingModal .bm-field > i { left: 12px; }
  #bookingModal .bm-field input, #bookingModal .bm-field textarea { padding-left: 34px; padding-right: 8px; }
}
/* toast on phones: a margin on both sides (its left edge touched the screen edge) */
@media screen and (max-width: 639.98px) {
  #toastNotification { left: 12px; right: 12px; max-width: none; padding: 12px 16px; }
}
/* pages with the sticky price bar: the toast and the end of the footer stay above the bar */
@media screen and (max-width: 991.98px) {
  body:has(#ipBar) #toastNotification { bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
  body:has(#ipBar) footer.bj-footer { padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
}
/* phones: the full-width toast sits above the "up" arrow (it lay on top of the arrow). While the enquiry popup is open the
   arrow is covered, so there the toast keeps its low place, clear of the form fields and the send button */
@media screen and (max-width: 639.98px) {
  #toastNotification { bottom: 112px !important; }
  body:has(#ipBar) #toastNotification { bottom: calc(138px + env(safe-area-inset-bottom)) !important; }
  body:has(#bookingModal:not(.hidden)) #toastNotification { bottom: 62px !important; }
}
/* phones, the two destination landing pages: the "up" arrow stays hidden until the page is scrolled 120px, as on every
   other page. While the site script still keeps its hidden-state classes on the arrow, "body.fab-hide #scrollTopBtn"
   forced it visible on the first screen, 2px below the screen edge, on top of the price table */
@media screen and (max-width: 639.98px) {
  #scrollTopBtn.opacity-0.pointer-events-none { opacity: 0 !important; pointer-events: none !important; }
}
/* 640 to 1023: the toast sits beside the "up" arrow, as on desktop */
@media screen and (min-width: 640px) and (max-width: 1023.98px) {
  #toastNotification { right: 68px; }
}
/* tablets: "up" arrow centred over the WhatsApp button, as on desktop (pages with the sticky price bar keep their own place) */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  #scrollTopBtn { right: 7px !important; }
}
/* 992 to 1023, home page: "Get Free Trip Plan" waits until the page is scrolled 120px, exactly as from 1024 up
   (on the first screen it lay on the "Since 2012" fact; the site script keeps opacity-0 on the WhatsApp button until then) */
@media screen and (min-width: 992px) and (max-width: 1023.98px) {
  #planFloatBtn { transition: opacity .3s ease; }
  body.home-grad:has(#whatsappFloatBtn.opacity-0) #planFloatBtn { opacity: 0; pointer-events: none; }
}

/* narrow phones: a five-digit price ("₹26,900") ran under the call button of the sticky price bar */
@media screen and (max-width: 359.98px) {
  #ipBar { gap: 6px; padding-left: 10px; padding-right: 10px; }
  #ipBar .ip-bar-btn { padding-left: 12px; padding-right: 12px; }
  #ipBar .ip-bar-price strong:not(.ip-bar-ask) { font-size: 23px; }
}

/* ---------- logo strip (recognition + hotel logos) ---------- */
@media screen and (max-width: 639.98px) {
  /* the recognition card keeps a 16px margin on narrow phones (it touched both screen edges at 320) */
  .bj-logo-strip .bj-recog { max-width: min(330px, calc(100% - 32px)); }
  /* strip labels: one size everywhere (inside the itinerary page the 15px text floor made the label run edge to edge) */
  .bj-logo-strip .bj-strip-label { font-size: 12px !important; line-height: 1.5 !important; padding-left: 16px; padding-right: 16px; }
}
/* narrow phones: a slimmer logo column, so "Authorised and recognised by MP Tourism" stays on two lines */
@media screen and (max-width: 359.98px) {
  .bj-logo-strip .bj-recog { grid-template-columns: 60px 1fr; gap: 12px 8px; padding: 12px; }
  .bj-logo-strip .bj-recog img[alt="IATTE"] { height: 24px; }
  .bj-logo-strip .bj-recog span { font-size: 16.5px; }
}
/* 640 to 767: the one-line layout wrapped and left the IATTE logo away from its label: use the tidy two-row card of the phones */
@media screen and (min-width: 640px) and (max-width: 767.98px) {
  .bj-logo-strip .bj-recog { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 14px; max-width: 340px; margin: 0 auto 24px; padding: 14px 16px; background: #FBF6EE; border: 1px solid #EFE4D2; border-radius: 14px; }
  .bj-logo-strip .bj-recog img { height: 46px; justify-self: center; margin: 0; }
  .bj-logo-strip .bj-recog img[alt="IATTE"] { height: 30px; margin: 0; }
  .bj-logo-strip .bj-recog span { font-size: 17px; text-align: left; line-height: 1.25; }
}
/* 768 to 899: both recognitions on one line (the line wrapped after the IATTE logo) */
@media screen and (min-width: 768px) and (max-width: 899.98px) {
  .bj-logo-strip .bj-recog { flex-wrap: nowrap; }
  .bj-logo-strip .bj-recog img { height: 54px; }
  .bj-logo-strip .bj-recog img[alt="IATTE"] { height: 38px; }
  .bj-logo-strip .bj-recog span { font-size: 20px; white-space: nowrap; }
}

/* ---------- footer ---------- */
@media screen and (max-width: 1023.98px) {
  /* legal labels and "We Accept" at 12px (were 11px) */
  footer.bj-footer .bj-legal-grid dt, footer.bj-footer .bj-pay h5 { font-size: 12px; letter-spacing: .14em; }
  /* social buttons: icon centred in a 40px circle */
  footer.bj-footer a.rounded-full { display: flex; width: 40px; height: 40px; padding: 0; }
  /* phone, email and policy links in the legal block: a 40px tap area without moving the lines */
  footer.bj-footer .bj-legal-grid dd a, footer.bj-footer .bj-pay-note a { display: inline-block; padding-top: 9px; padding-bottom: 9px; margin-top: -9px; margin-bottom: -9px; }
}
@media screen and (max-width: 767.98px) {
  /* link lists: each link is a 40px tap row */
  footer.bj-footer ul.space-y-2 > li + li { margin-top: 2px !important; }
  footer.bj-footer ul.space-y-2 > li > a { padding-top: 8px; padding-bottom: 8px; }
  /* contact list: icon and text side by side again (the phone rule turned these links into inline blocks), even rows */
  footer.bj-footer ul.space-y-3 > li + li { margin-top: 0 !important; }
  footer.bj-footer ul.space-y-3 > li.flex, footer.bj-footer ul.space-y-3 > li > a.flex { display: flex; padding-top: 7px; padding-bottom: 7px; }
  /* Google reviews button: logo, text and arrow on one centred line */
  footer.bj-footer .bj-proof-google { display: flex; padding: 10px 14px; }
}
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  /* tablets: link lists are 40px tap rows (were 34px), the tap area is the full row */
  footer.bj-footer ul.space-y-2 > li + li, footer.bj-footer ul.space-y-3 > li + li { margin-top: 0 !important; }
  footer.bj-footer ul.space-y-2 > li > a { display: inline-block; padding-top: 7px; padding-bottom: 7px; }
  footer.bj-footer ul.space-y-3 > li.flex, footer.bj-footer ul.space-y-3 > li > a.flex { padding-top: 6px; padding-bottom: 6px; }
}
/* phones: company facts one under the other (two cramped columns broke "MP Tourism Authorised" over three lines) */
@media screen and (max-width: 559.98px) {
  footer.bj-footer .bj-proof { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
/* large phones: legal details in two columns, as on tablets */
@media screen and (min-width: 480px) and (max-width: 639.98px) {
  footer.bj-footer .bj-legal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer.bj-footer .bj-legal-wide { grid-column: 1 / -1; }
}
/* phones: the copyright line breaks evenly (no single word left on the last line) */
@media screen and (max-width: 639.98px) {
  footer.bj-footer .container > div:last-child > p { text-wrap: balance; }
}
/* 640 to 767: link lists side by side as on phones (they fell back to one long column) */
@media screen and (min-width: 640px) and (max-width: 767.98px) {
  footer.bj-footer .container > .grid:first-child { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  footer.bj-footer .container > .grid:first-child > :first-child, footer.bj-footer .container > .grid:first-child > :last-child { grid-column: 1 / -1; }
}

/* ---------- dark CTA band ("Ready for Your ... ?") ---------- */
/* the text under the heading breaks into even lines, no single word left alone on the last line (same rule as on desktop) */
@media screen and (max-width: 1023.98px) {
  div.bg-slate-900:has(> div > img[src*="elements/footer-bg"]) p { text-wrap: balance; }
}
/* the heading too, from 390px: there it is one or two lines ("Ready for Your Pachmarhi / Trip?" became two even lines).
   Narrower phones keep their three-line break "Ready for Your / Madhya Pradesh / Journey?", which reads better than the balanced one */
@media screen and (min-width: 390px) and (max-width: 1023.98px) {
  div.bg-slate-900:has(> div > img[src*="elements/footer-bg"]) h2 { text-wrap: balance; }
}

/* ---------- shell: laptops, desktops and big monitors (1024px and up) ---------- */
/* shell.large.css : site chrome (header, footer, floating buttons, popups, CTA band) on screens 1024px and wider.
   Appended after css/style.css, before tailwind.css. Every rule sits inside "screen and (min-width: 1024px ...)". */

/* ---------- header, narrowest desktop layout (1024 to 1279) ----------
   Logo (312px) + navigation (485px) + button (178px) + gaps need 999px, the header row offers 960px (992px from 1200):
   the row ran 39px past its container and 7px past the screen edge. Trim type and spacing so the whole row fits. */
@media screen and (min-width: 1024px) and (max-width: 1279.98px) {
  header.sticky .header-logo-text { font-size: 18px; }
  header.sticky .desktop-nav-container > nav { gap: 14px; }
  header.sticky .desktop-nav-container > nav > a,
  header.sticky .desktop-nav-container > nav > .group > a { letter-spacing: .025em; }
  header.sticky .desktop-nav-container > button { padding-left: 12px; padding-right: 12px; }
  /* Destinations menu: room for the 12px column headings */
  header.sticky nav .group .col-span-8 { column-gap: 16px; }
}
/* from 1200 the row is 32px wider: the brand name keeps its 20px */
@media screen and (min-width: 1200px) and (max-width: 1279.98px) {
  header.sticky .header-logo-text { font-size: 20px; }
}

/* ---------- header, 1280 to 1535 ----------
   The 30px brand name left only 9px of slack in the row and sat 21px from "Home"; 27px gives the row air. */
@media screen and (min-width: 1280px) and (max-width: 1535.98px) {
  header.sticky .header-logo-text { font-size: 27px; }
}

/* ---------- footer link columns (1024 to 1279) ----------
   The 12 column split left 127px for Quick Links and 210px for Contact Us: links wrapped and the email address
   was cut off at the screen edge. Size the three list columns by their content, the About column takes the rest. */
@media screen and (min-width: 1024px) and (max-width: 1279.98px) {
  footer.bj-footer .container > .grid:first-child { grid-template-columns: minmax(0, 1fr) max-content max-content fit-content(250px); column-gap: 28px; }
  footer.bj-footer .container > .grid:first-child > div { grid-column: auto; }
  footer.bj-footer .container > .grid:first-child > div:first-child > p { width: 100%; }
}

/* ---------- footer proof strip (1024 to 1535) ----------
   Four facts plus the Google button in one row squeezed each fact into 125 to 197px ("MP Tourism Authorised" spilled
   out of its box). Facts get one row sized by their text, the Google button sits centred on the next row. */
@media screen and (min-width: 1024px) and (max-width: 1535.98px) {
  footer.bj-footer .bj-proof { grid-template-columns: repeat(4, auto); justify-content: space-between; }
  footer.bj-footer .bj-proof-google { grid-column: 1 / -1; justify-self: center; }
}

/* ---------- footer legal block ----------
   Four columns were 135px (1024) to 226px (1536 and up) wide: CIN, GSTIN and the email address broke in the middle,
   the legal name wrapped, the email sat alone on a third row. Three columns give a tidy 3 x 3 block at every width. */
@media screen and (min-width: 1024px) {
  footer.bj-footer .bj-legal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (min-width: 1024px) and (max-width: 1279.98px) {
  /* legal details across the full width, payment logos and note in one row under them */
  footer.bj-footer .bj-legal { grid-template-columns: minmax(0, 1fr); }
  footer.bj-footer .bj-pay { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 32px; align-items: center; }
  footer.bj-footer .bj-pay > h5 { grid-column: 1; }
  footer.bj-footer .bj-pay > div { grid-column: 1; grid-row: 2; flex-wrap: nowrap; }
  footer.bj-footer .bj-pay > .bj-pay-note { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

/* ---------- all desktop widths ---------- */
@media screen and (min-width: 1024px) {
  /* small uppercase labels: 12px instead of 11px (same line height, so nothing moves) */
  footer.bj-footer .bj-legal-grid dt,
  footer.bj-footer .bj-pay h5 { font-size: 12px; line-height: 1.5; }
  header.sticky .bj-menu-head { font-size: 12px; letter-spacing: .1em; }
  /* navigation links: the 21 to 25px high text links get a 45px high touch area (tablets in landscape, touch
     laptops). Padding and an equal negative margin: nothing moves. The underlined current-page link is left alone. */
  header.sticky .desktop-nav-container > nav > a:not(.border-b-2) { padding: 12px 6px; margin: -12px -6px; }
  header.sticky .desktop-nav-container > nav > .group > a { padding: 12px 6px; margin: -8px -6px; }
  #bookingModal .bm-tag,
  #bookingModal .bm-note { font-size: 12px; }
  /* enquiry popup heading: two even lines, no single word left alone ("Plan Your Madhya Pradesh / Trip") */
  #bookingModal .bm-title { text-wrap: balance; }
  /* logo mark and company name: the same small gap as on phones and tablets (the star of the mark touched the "B") */
  header.sticky .header-logo-link { gap: 8px; }

  /* video and photo popups open above the sticky header (header is z-index 999, they were 50: on a short laptop
     screen the top of the video or photo and the close button slid under the header) */
  #videoModal,
  #imageModal { z-index: 1001; }
  /* photo popup: a visible close button, same round 40px button as the video popup (a click anywhere on the popup closes it) */
  #imageModal::after { content: "\00d7"; position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(26, 26, 26, .6); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font: 400 28px/36px "Inter", sans-serif; text-align: center; cursor: pointer; }
  /* video popup in a short window: the 16:9 player is sized by the window height, so its top, bottom and close button stay on screen */
  #videoModal > div { max-width: min(56rem, calc((100vh - 32px) * 16 / 9)); }
  /* the message toast shows above the enquiry popup and beside the floating buttons instead of on top of the "up" arrow */
  #toastNotification { z-index: 1002; right: 68px !important; bottom: 6px !important; }
  /* "up" arrow centred over the WhatsApp button */
  #scrollTopBtn { right: 7px !important; }
  /* the closed slide-in menu waits just outside the right edge and its shadow fell 35px into the page as a grey
     band on every page; while it is closed it is not painted at all (it cannot be opened on desktop: no menu button) */
  #mobileSidebar.translate-x-full { visibility: hidden; }
  /* home page, first screen: "Get Free Trip Plan" lay on top of the hero button "Plan Your Madhya Pradesh Trip" (two orange
     buttons on each other). It waits until the page is scrolled 120px, like the "up" arrow: the site script keeps the class
     opacity-0 on the WhatsApp button until then. The header button "Book Your Trip Now" opens the same popup meanwhile. */
  #planFloatBtn { transition: opacity .3s ease; }
  body.home-grad:has(#whatsappFloatBtn.opacity-0) #planFloatBtn { opacity: 0; pointer-events: none; }

  /* dark CTA band: even line lengths, no single word left alone on the last line */
  div.bg-slate-900:has(> div > img[src*="elements/footer-bg"]) h2,
  div.bg-slate-900:has(> div > img[src*="elements/footer-bg"]) p { text-wrap: balance; }
}

/* ---------- home: phones and tablets (up to 1023px) ---------- */
/* home.small.css : home page ("/", body.home-grad) on phones and tablets, up to 1023.98px.
   Appended at the end of css/style.css. Every rule sits in a "screen and (max-width ...)" query and starts with body.home-grad,
   so desktop, print and every other page are untouched. */

/* ---------- hero ---------- */
@media screen and (max-width: 1023.98px) {
  /* "Watch video" label at 12px (was 11px) */
  body.home-grad #heroContentContainer .royal-play-lbl { font-size: 12px; }
}
/* phones and small tablets: the "Watch video" label sat under the company-facts card that overlaps the hero
   (hidden at 320 and at 640 to 767). The button moves up by its old top margin and the hero keeps room below it. */
@media screen and (max-width: 767.98px) {
  body.home-grad #heroContentContainer { padding-bottom: 80px; }
  body.home-grad #heroContentContainer > .grid > div:last-child { margin-top: 0; }
}
/* tablets: the play button sat on top of "Spiritual Journeys" in the highlights row: it moves up beside the heading */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  body.home-grad #heroContentContainer > .grid > div:last-child > button { top: 37%; }
  /* "Nature & Hill Stations" and "Spiritual Journeys" lie on the bright waterfall and the tiger here: a tight dark edge plus a
     soft dark glow keeps them readable (the old shadow was one soft 8px blur at 60%) */
  body.home-grad #heroContentContainer .hero-highlights li > span:last-child { text-shadow: 0 0 2px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.9), 0 0 16px rgba(0,0,0,.7); }
}
/* narrow phones: the "Travel Agency in Madhya Pradesh" strip was wider than the screen */
@media screen and (max-width: 349.98px) {
  body.home-grad #heroContentContainer .royal-strip { letter-spacing: 2px; }
}

/* ---------- company facts card under the hero ---------- */
/* phones: one fact per row (two columns left 71 to 126px for the text: titles broke over 3 lines and ran into the next icon) */
@media screen and (max-width: 479.98px) {
  body.home-grad #quickSearchForm.bjh-proof { grid-template-columns: minmax(0, 1fr); padding: 6px 14px 10px; }
  body.home-grad #quickSearchForm .bjh-proof-item { padding: 9px 8px; gap: 12px; }
  body.home-grad #quickSearchForm .bjh-proof-google { padding: 12px 8px; }
}

/* narrow phones: slimmer padding keeps every fact on two lines */
@media screen and (max-width: 349.98px) {
  body.home-grad #quickSearchForm.bjh-proof { padding-left: 8px; padding-right: 8px; }
  body.home-grad #quickSearchForm .bjh-proof-item { padding-left: 4px; padding-right: 4px; gap: 10px; }
}

/* ---------- section headings, destination sliders ---------- */
@media screen and (max-width: 639.98px) {
  /* a small label that wraps to two lines stays centred between its two rules */
  body.home-grad > section .flex.items-center.justify-center.mb-3 > span { text-align: center; }
  /* slider arrows sit above the card text (at mid height they covered the first letter of the place name) */
  body.home-grad > section :is(.dest-prev, .dest-next, .heritage-prev, .heritage-next, .spiritual-prev, .spiritual-next, .nature-prev, .nature-next) { top: 104px; }
}

@media screen and (max-width: 1023.98px) {
  /* headings of two or three lines: balanced lines instead of one word alone on the last line ("... Tap a Place to / Explore") */
  body.home-grad > section:not(#home) h2.font-cormorant { text-wrap: balance; }
}

/* ---------- Google reviews ---------- */
/* narrow phones: the rating line was wider than the screen: "on Google · 500+ reviews" goes to a second centred line */
@media screen and (max-width: 349.98px) {
  body.home-grad #testimonials .bjh-rating { flex-wrap: wrap; row-gap: 2px; }
}
/* tablets: the arrows move the row by card + 24px, so the gap has to be 24px (it was 16px: the cards drifted 8px per click
   and the last card stopped 56px short). Two cards of calc(50% - 12px) + 24px fill the row exactly. */
@media screen and (min-width: 640px) and (max-width: 1023.98px) {
  body.home-grad #testimonials .testi-slider-track { gap: 24px; }
}

/* ---------- signature tours ---------- */
@media screen and (max-width: 767.98px) {
  /* icon row: the four labels ran into each other ("HOTELBREAKFASTCABFOREST TOUR") on narrow cards */
  body.home-grad #homepackages .tour-grid .justify-between.border-t.border-b { padding-left: 6px; padding-right: 6px; gap: 8px; }
  body.home-grad #homepackages .tour-grid .justify-between.border-t.border-b span { letter-spacing: .02em; text-align: center; }
}
@media screen and (max-width: 359.98px) {
  body.home-grad #homepackages .tour-grid .justify-between.border-t.border-b { gap: 5px; }
}
/* small phones: the two card buttons at 13px ("View Packages" filled its outlined button from edge to edge) */
@media screen and (max-width: 374.98px) {
  body.home-grad #homepackages .tour-grid .p-5 > div:last-child > .flex-1 { font-size: 13px; }
}
/* narrow phones: a slightly wider swipe card with 12px side padding, so the two buttons fit with air around their text */
@media screen and (max-width: 349.98px) {
  body.home-grad #homepackages .tour-grid > * { flex-basis: 86%; }
  body.home-grad #homepackages .tour-grid > div > div.p-5 { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ---------- guest photos ---------- */
/* tablets below 900: four photos per row as on wider screens (two 300 to 360px columns made the section 1500 to 1900px tall) */
@media screen and (min-width: 640px) and (max-width: 899.98px) {
  body.home-grad > section .bjh-guests { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- videos ---------- */
@media screen and (max-width: 1023.98px) {
  /* play button and title share the tile as a column: a two or three line title can no longer run under the play button */
  /* overflow: clip (not hidden) lets a tile grow when a long title needs it; both tiles of a row stretch to the same height */
  body.home-grad #videos .bjh-video { display: flex; flex-direction: column; align-self: stretch; justify-self: stretch; padding-top: 6px; gap: 6px; overflow: clip; }
  body.home-grad #videos .bjh-video .bjh-play { position: relative; top: auto; left: auto; flex: 0 0 auto; margin: auto; }
  body.home-grad #videos .bjh-video .bjh-video-t { position: relative; left: auto; right: auto; bottom: auto; padding: 0 12px 9px; }
  body.home-grad #videos .bjh-video--big .bjh-video-t { padding: 0 16px 14px; }
  /* the YouTube thumbnails are 4:3 files with black bars above and below the picture: the image is 134% of the tile height,
     so only the 16:9 picture shows, whatever the shape of the tile (dark lines stayed at the top and bottom of the tiles) */
  body.home-grad #videos .bjh-video img { inset: -17% 0; height: 134%; }
}
/* phones: smaller title and play button on the half-width tiles, the odd last tile is centred (no empty cell beside it) */
@media screen and (max-width: 639.98px) {
  body.home-grad #videos .bjh-video:not(.bjh-video--big) .bjh-video-t { font-size: 15px; }
  body.home-grad #videos .bjh-video:not(.bjh-video--big) .bjh-play { width: 36px; height: 36px; font-size: 12px; }
  body.home-grad #videos .bjh-video:last-child:nth-child(even) { grid-column: 1 / -1; width: calc(50% - 5px); justify-self: center; }
}
/* small phones: "Ujjain and Omkareshwar Darshan" stays on two lines at 360 */
@media screen and (max-width: 384.98px) {
  body.home-grad #videos .bjh-video:not(.bjh-video--big) { padding-top: 5px; gap: 5px; }
  body.home-grad #videos .bjh-video:not(.bjh-video--big) .bjh-video-t { font-size: 14px; padding: 0 10px 8px; }
  body.home-grad #videos .bjh-video:not(.bjh-video--big) .bjh-play { width: 30px; height: 30px; font-size: 11px; }
}
/* narrow phones (three line titles): a smaller play mark keeps the tile close to its normal height */
@media screen and (max-width: 349.98px) {
  body.home-grad #videos .bjh-video:not(.bjh-video--big) .bjh-play { width: 26px; height: 26px; font-size: 10px; }
}
/* tablets: big video with two small ones beside it and three below (2 columns left one tile alone,
   4 columns at 900 squeezed 20px titles into 172px tiles) */
@media screen and (min-width: 640px) and (max-width: 1023.98px) {
  body.home-grad #videos .bjh-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  body.home-grad #videos .bjh-video { aspect-ratio: 16 / 9; }
  body.home-grad #videos .bjh-video--big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  body.home-grad #videos .bjh-video .bjh-video-t { font-size: 17px; }
  body.home-grad #videos .bjh-video--big .bjh-video-t { font-size: 26px; padding: 0 18px 16px; }
}

/* ---------- map ---------- */
@media screen and (max-width: 1023.98px) {
  /* legend and hint at 12px (the legend was 10px; the hint was 10px on tablets and 15px on large phones) */
  body.home-grad #mpMap .mp-map-legend { font-size: 12px; }
  body.home-grad #mpMap .mp-map-hint { font-size: 12px !important; line-height: 1.4 !important; }
}
/* small tablets: the centred hint ran over the legend: it sits beside the zoom buttons */
@media screen and (max-width: 767.98px) {
  body.home-grad #mpMap .mp-map-hint { left: auto; right: calc(2.5% + 42px); transform: none; }
}
/* up to 639: 32px zoom buttons in a row in the open sky, top left (bottom right they sat against the Kanha label; were 26px on phones) */
@media screen and (max-width: 639.98px) {
  body.home-grad #mpMap .mp-map-controls { flex-direction: row; gap: 4px; top: 3%; bottom: auto; left: 3%; right: auto; }
  body.home-grad #mpMap .mp-map-controls button { width: 32px; height: 32px; font-size: 12px; }
  body.home-grad #mpMap .mp-map-hint { right: 2.5%; }
}
/* below 600 the legend and the hint do not fit side by side: the hint is hidden (as it already is on phones), the legend is one flat row */
@media screen and (max-width: 599.98px) {
  body.home-grad #mpMap .mp-map-hint { display: none; }
  body.home-grad #mpMap .mp-map-legend { flex-direction: row; gap: 14px; padding: 4px 9px; bottom: 2%; }
}
/* 529 to 599 (the map still shows every place name): a smaller title clear of the Gwalior Fort pin,
   and two labels turned so they are not cut off or covered */
@media screen and (min-width: 529px) and (max-width: 599.98px) {
  body.home-grad #mpMap .mp-map-title span { font-size: 1.15rem; }
  body.home-grad #mpMap .mp-map-title em { font-size: 12px; }
  body.home-grad #mpMap .mp-pin[title="Amarkantak"] .mp-pin-label { left: auto; right: 9px; }
  body.home-grad #mpMap .mp-pin[title="Pachmarhi"] .mp-pin-label { top: 10px; left: -14px; transform: none; }
  /* "Sanjay-Dubri" reached past the right edge of the map: the label stays above its pin and is pulled to the left */
  body.home-grad #mpMap .mp-pin[title^="Sanjay-Dubri"] .mp-pin-label { left: auto; right: -34px; transform: none; }
  /* "Ujjain" touched "Van Vihar": the label goes to the left of its pin */
  body.home-grad #mpMap .mp-pin[title="Ujjain"] .mp-pin-label { left: auto; right: 9px; }
}
/* phones (small map): the sub-title at 10px (was 8px) is as wide as the title above it */
@media screen and (max-width: 528px) {
  body.home-grad #mpMap .mp-map-title em { font-size: 10px; }
}
/* from 412: the map is wide enough for the sub-title at 12px (on narrower maps its first letter would lie on the Gwalior hill) */
@media screen and (min-width: 412px) and (max-width: 528px) {
  body.home-grad #mpMap .mp-map-title em { font-size: 12px; }
}
/* narrow phones: the 32px zoom buttons covered the top of the "Kuno" label and touched its pin:
   the row sits in the top left corner (2px under the top edge), the label 3px lower */
@media screen and (max-width: 359.98px) {
  body.home-grad #mpMap .mp-map-controls { top: 2px; left: 2%; gap: 3px; }
  body.home-grad #mpMap .mp-pin[title^="Kuno"] .mp-pin-label { top: 3px; }
}

/* ---------- verify us yourself ---------- */
@media screen and (max-width: 1023.98px) {
  /* phone number and email: a 32px tap area */
  body.home-grad #verify .bjh-dl dd a:not(.bj-link) { display: inline-block; padding: 6px 0; margin: -2px 0; }
}
/* tablets: a link that wraps under its value ("Check on MCA portal", "Get directions") starts at the left edge (it kept a 12px indent) */
@media screen and (min-width: 640px) and (max-width: 1023.98px) {
  body.home-grad #verify .bjh-dl dd:has(> .bj-link) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; }
  body.home-grad #verify .bjh-dl dd:has(> .bj-link) .bj-link { margin-left: 0; }
  /* "Office hours" stood alone in a half row above the full-width address: it takes the full row (its line ended in the middle) */
  body.home-grad #verify .bjh-dl > div:nth-child(odd):has(+ .bjh-wide) { grid-column: 1 / -1; }
}
/* 900 to 1023: certificates stay two per row as on tablets (four 172px cards: the frame texts ran over each other) */
@media screen and (min-width: 900px) and (max-width: 1023.98px) {
  body.home-grad #verify .bjh-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* small phones: wider certificate swipe cards (in the 190 to 216px cards the frame was too low: "Recognition letter" ran over "Certificate scan coming soon") */
@media screen and (max-width: 389.98px) {
  body.home-grad #verify .bjh-certs > * { flex-basis: 82%; }
}

/* ---------- how booking works ---------- */
/* tablets (two columns): the fifth step takes the full row instead of leaving an empty cell */
@media screen and (min-width: 640px) and (max-width: 1023.98px) {
  body.home-grad #booking .bjh-steps > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media screen and (max-width: 1023.98px) {
  /* Copy buttons and the Terms link: 32px tap area (were 22 and 27px) */
  body.home-grad #booking .bjh-copy { padding: 9px 12px; }
  body.home-grad #booking .bjh-pay-link { display: inline-block; padding: 6px 0 3px; }
}
/* phones: the five payment logos share one row (they wrapped 4 + 1, or 3 + 2 on narrow phones) */
@media screen and (max-width: 419.98px) {
  body.home-grad #booking .bjh-pay-logos { flex-wrap: nowrap; gap: 6px; }
  body.home-grad #booking .bjh-pay-logos span { flex: 1 1 0; min-width: 0; max-width: 62px; padding: 6px; }
}

/* ---------- FAQ ---------- */
@media screen and (max-width: 1023.98px) {
  /* "col-span-12" in a one-column grid made 11 phantom gaps (352px minimum): the questions were cut off at 320 and 360 */
  body.home-grad #faq .grid > [class~="col-span-12"] { grid-column: 1 / -1; }
}

/* ---------- enquiry form ---------- */
/* narrow phones: the "Mobile / WhatsApp Number" hint fits in its field (the last letter was cut at 320) */
@media screen and (max-width: 349.98px) {
  body.home-grad #journeyName, body.home-grad #journeyPhone, body.home-grad #journeyMessage { padding-left: 12px; padding-right: 8px; }
}

/* ---------- home: laptops, desktops and big monitors (1024px and up) ---------- */
/* home.large.css : home page (body.home-grad), screens 1024px and wider. */

/* ---------- all large screens ---------- */
@media screen and (min-width: 1024px) {
  /* videos: 1 big + 5 small tiles left one orphan tile in a 4 column grid; 3 columns give a full 3 x 3 block.
     960px wide: the big tile is 635px, 1.3x its 480px thumbnail file (at 1088px it was 720px = 1.5x and looked soft) */
  body.home-grad #videos .bjh-videos:has(> .bjh-video:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; }
  /* the YouTube thumbnails are 4:3 files with black bars: a 16:9 tile crops the bars away */
  body.home-grad #videos .bjh-videos > .bjh-video:not(.bjh-video--big) { aspect-ratio: 16 / 9; }
  /* the big tile is not exactly 16:9 (a dark line stayed along its top edge): the image is 134% of the tile height,
     so only the 16:9 picture shows, whatever the shape of the tile */
  body.home-grad #videos .bjh-video img { inset: -17% 0; height: 134%; }
  /* headings of two lines: balanced lines instead of one word alone on the last line ("... Check in Two / Minutes") */
  body.home-grad > section:not(#home) h2.font-cormorant { text-wrap: balance; }
  /* verify list: a link that wraps under its number ("Check on MCA portal") starts at the left edge (it kept a 12px indent) */
  body.home-grad #verify .bjh-dl dd:has(> .bjh-code) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; }
  body.home-grad #verify .bjh-dl dd:has(> .bjh-code) .bj-link { margin-left: 0; }
  /* "Office hours" stood alone in a half row above the full-width address: it takes the full row (its line ended in the middle) */
  body.home-grad #verify .bjh-dl > div:nth-child(odd):has(+ .bjh-wide) { grid-column: 1 / -1; }
  /* "Watch video" label was 11px */
  body.home-grad #heroContentContainer .royal-play-lbl { font-size: 12px; }
  /* hero "Watch video": where the container is (nearly) as wide as the screen (1024, 1280, 1536) the label ran to the
     screen edge, into the column of the floating WhatsApp / "up" buttons (54px wide). Keep it out of that column.
     Once the side margins are wide enough the value falls back to the old offset (24px below 1280, 0 from 1280). */
  body.home-grad #heroContentContainer button:has(> .royal-play) { right: max(24px, calc(56px - (100vw - 100%) / 2)); }
}

/* ---------- 1024 to 1279: the narrowest desktop layout (the container is 1024px wide) ---------- */
@media screen and (min-width: 1024px) and (max-width: 1279.98px) {
  /* hero: the four highlight icons fit on one row instead of 3 + 1 */
  body.home-grad #heroContentContainer .hero-highlights li { gap: 8px; padding-right: 12px; margin-right: 12px; }
  body.home-grad #heroContentContainer .hero-highlights li:last-child { padding-right: 0; margin-right: 0; }
  /* hero heading: it grows with the screen (5vw) while its column stays about 630px wide, so from about 1200px
     "The Heart of Incredible India" broke after "Incredible" and the hero grew by 57px. It stops at the 59px it has at 1180. */
  body.home-grad #heroContentContainer .royal-h1 { font-size: min(5vw, 59px); }

  /* reviews: the arrows move by card + 24px, so the gap has to be 24px or the cards drift */
  body.home-grad #testimonials .testi-slider-track { gap: 24px; }

  /* map (440 to 456px wide, the small-map look): title and sub-title were 12px and 8px */
  body.home-grad #mpMap .mp-map-title span { font-size: 1.05rem; }
  body.home-grad #mpMap .mp-map-title em { font-size: 12px; }

  /* verify: "Visit our office" + "WhatsApp now" were 45px wider than their column */
  body.home-grad #verify .flex > .bj-btn,
  body.home-grad #verify .flex > .bj-btn--outline { min-width: 0; padding-left: 10px; padding-right: 10px; letter-spacing: .03em; }

  /* booking steps: 3 + 2 cards instead of 2 + 2 + 1 (1024 to 1099) or five 184px columns (1100 to 1279) */
  body.home-grad #booking .bjh-steps:has(> .bjh-step:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.home-grad #booking .bjh-steps:has(> .bjh-step:nth-child(5):last-child) > .bjh-step { grid-column: span 2; }
  body.home-grad #booking .bjh-steps:has(> .bjh-step:nth-child(5):last-child) > .bjh-step:nth-child(n+4) { grid-column: span 3; }

  /* payment block: the policy button stuck out of the dark box */
  body.home-grad #booking .bjh-pay-in { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px; padding: 40px 36px; }
  body.home-grad #booking .bjh-pay-side { padding-left: 28px; }
  body.home-grad #booking .bjh-pay-side .bj-btn--light { padding-left: 16px; padding-right: 16px; white-space: normal; text-align: center; }

  /* enquiry form: wider fields and a 13px hint, so "Mobile / WhatsApp Number" is not cut off */
  body.home-grad .contcat-form-section [class~="lg:p-12"] { padding-left: 28px; padding-right: 28px; }
  body.home-grad .contcat-form-section form [class~="sm:grid-cols-2"] { column-gap: 12px; }
  body.home-grad .contcat-form-section form input::placeholder,
  body.home-grad .contcat-form-section form textarea::placeholder { font-size: 13px; }
}

/* ---------- 1024 to 1179: the fact bar under the hero is only 960 to 1115px wide ---------- */
@media screen and (min-width: 1024px) and (max-width: 1179.98px) {
  body.home-grad #quickSearchForm.bjh-proof { padding: 14px 6px; }
  body.home-grad #quickSearchForm .bjh-proof-item { padding: 6px 10px; gap: 8px; }
  body.home-grad #quickSearchForm .bjh-proof-txt strong { font-size: 18px; }
}

/* ---------- 1024 to 1535: enquiry form, the three small promises: icon above the text (text was squeezed to 60 to 90px) ---------- */
@media screen and (min-width: 1024px) and (max-width: 1535.98px) {
  body.home-grad .contcat-form-section [class~="sm:grid-cols-3"] { column-gap: 16px; }
  body.home-grad .contcat-form-section [class~="sm:grid-cols-3"] > div { flex-direction: column; text-align: center; gap: 8px; }
}

/* ---------- 1180 to 1279: reviews ----------
   The arrows count four cards per view from 1024 on, but only three fit, so the last review could never be reached.
   From 1180 four cards fit (245 to 270px, 1280 uses 270px). Below 1180 they would be 206px: left as it is (needs the script). */
@media screen and (min-width: 1180px) and (max-width: 1279.98px) {
  body.home-grad #testimonials .testi-slider-track > .testi-slide { width: calc(25% - 18px); }
  /* 18px card padding (was 24px): the text column is as wide as in the 270px cards at 1280, so the quote and the
     "Posted on Google ..." lines wrap the same way as there (they were squeezed to 185px) */
  body.home-grad #testimonials .testi-slider-track > .testi-slide > div { padding: 18px; }
}

/* ---------- 1280 to 1535: 584px map, four tour cards in a row ---------- */
@media screen and (min-width: 1280px) and (max-width: 1535.98px) {
  /* map: the 12px hint sits beside the zoom buttons, clear of the 12px legend (centred it would run into the legend) */
  body.home-grad #mpMap .mp-map-hint { left: auto; right: calc(2.5% + 42px); transform: none; }

  /* tour cards, icon strip: "HOTEL BREAKFAST CAB FOREST TOUR" ran together */
  body.home-grad #homepackages .tour-grid .border-t.border-b { padding-left: 4px; padding-right: 4px; }
  body.home-grad #homepackages .tour-grid .border-t.border-b span { letter-spacing: .02em; }
}

/* ---------- 1280 and wider ---------- */
@media screen and (min-width: 1280px) {
  /* hero "Watch video": same idea as above with 80px, because here the old offset was 0 and the play ring itself sat
     under the WhatsApp button (1280 x 720, 1366 x 768). From a 80px side margin on (1440 and wider screens) it is 0 again. */
  body.home-grad #heroContentContainer button:has(> .royal-play) { right: max(0px, calc(80px - (100vw - 100%) / 2)); }
  /* map: legend and hint at 12px (were 10px) */
  body.home-grad #mpMap .mp-map-legend,
  body.home-grad #mpMap .mp-map-hint { font-size: 12px; }
}

/* ---------- 1280 and wider, window up to 800px high: 1280 x 720, 1366 x 768, 1536 x 864 with the browser bars ----------
   The hero was 790px high, so the "Plan your Madhya Pradesh trip" button (y 732 to 775) sat on or under the fold.
   "No 1" takes its 140px size from the 1024 layout and the gaps shrink: the button ends at y 687. */
@media screen and (min-width: 1280px) and (max-height: 800px) {
  body.home-grad section#home { min-height: 0; }
  body.home-grad #heroContentContainer { padding-top: 28px !important; }
  body.home-grad #heroContentContainer .hero-no1 { font-size: 140px; }
  body.home-grad #heroContentContainer .royal-strip { margin-bottom: 28px; }
  body.home-grad #heroContentContainer > .grid > div:first-child > * + * { margin-top: 16px; }
}
/* window up to 700px high (a 1366 x 768 laptop leaves the page about 640px under the browser bars): one step tighter,
   the button ends at y 617 */
@media screen and (min-width: 1280px) and (max-height: 700px) {
  body.home-grad #heroContentContainer { padding-top: 20px !important; }
  body.home-grad #heroContentContainer .hero-no1 { font-size: 110px; }
  body.home-grad #heroContentContainer .royal-strip { margin-bottom: 20px; }
  body.home-grad #heroContentContainer > .grid > div:first-child > * + * { margin-top: 12px; }
  body.home-grad #heroContentContainer .royal-h1 + p { font-size: 16px; line-height: 24px; }
}

/* ---------- 1536 and wider: payment block ----------
   The account details turn into two short columns here (171px) next to the 329px QR card, which left a 160px hole
   above the "We accept ..." text. The QR card now stands beside details + text + payment logos. */
@media screen and (min-width: 1536px) {
  body.home-grad #booking .bjh-pay-main { display: grid; grid-template-columns: minmax(0, 1fr) 200px; column-gap: 28px; align-content: start; }
  body.home-grad #booking .bjh-pay-main > * { grid-column: 1; }
  body.home-grad #booking .bjh-pay-main > .bjh-pay-grid { display: contents; }
  body.home-grad #booking .bjh-pay-main .bjh-pay-dl { grid-column: 1; margin-bottom: 16px; }
  body.home-grad #booking .bjh-pay-main .bjh-qr { grid-column: 2; grid-row: 3 / span 3; align-self: start; justify-self: end; }
  /* verify list: here the address fills one line and "Get directions" wraps under it: it starts at the left edge too */
  body.home-grad #verify .bjh-dl .bjh-wide dd:has(> .bj-link) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; }
  body.home-grad #verify .bjh-dl .bjh-wide dd:has(> .bj-link) .bj-link { margin-left: 0; }
}

/* ---------- wider than the 1536px container ---------- */
@media screen and (min-width: 1537px) {
  /* reviews: the card row was full screen wide (590px cards at 2560); keep it in the same 1536px column as the page.
     The clip ends 20px outside the four cards (room for their shadow), so no slice of the next card shows beside them. */
  body.home-grad #testimonials .testi-slider-wrapper { max-width: 1536px; margin-left: auto; margin-right: auto; clip-path: inset(-40px 44px); }
}

/* ---------- very wide screens ---------- */
@media screen and (min-width: 1990px) {
  /* safari section: the 3:1 leaf background ended in a hard edge left and right */
  body.home-grad #touristdestinations > .absolute > img { object-fit: cover; }
}

/* ---------- dest-new: phones and tablets (up to 1023px) ---------- */
/* dest-new, small screens (320 to 1023px): /pachmarhi-tour-package/ and /kanha-tour-packages/ (body.page-destination) */

/* ---------- all small screens ---------- */
@media screen and (max-width: 1023.98px) {
  /* package cards: the tick list was dark ink on the dark green card, now readable */
  body.page-destination .dp-pkg .dp-ticks li { color: #E6EFE9; }
  /* guest photo used as a section picture: crop from the top, so the faces stay in the frame */
  body.page-destination .dp-about-fig img[src*="/guests/"] { object-position: center 18%; }
  /* small labels up to a readable size */
  body.page-destination .dp-planfoot-p small { font-size: 12px; }
  body.page-destination .dp-plan-p small { font-size: 12px; }
  body.page-destination .dp-plan-n small { font-size: 12px !important; letter-spacing: .02em; }
  /* videos: play button and title share the tile as a column, so a two or three line title cannot run under the play button (same as the home page) */
  body.page-destination #videos .bjh-video { display: flex; flex-direction: column; align-self: stretch; justify-self: stretch; padding-top: 6px; gap: 6px; overflow: clip; }
  body.page-destination #videos .bjh-video .bjh-play { position: relative; top: auto; left: auto; flex: 0 0 auto; margin: auto; }
  body.page-destination #videos .bjh-video .bjh-video-t { position: relative; left: auto; right: auto; bottom: auto; padding: 0 12px 9px; }
  body.page-destination #videos .bjh-video--big .bjh-video-t { padding: 0 16px 14px; }
  /* video tiles: the YouTube thumbnails are 4:3 files with a black bar above and below the picture, and the bars showed
     inside the small tiles (up to 11px). The image is drawn 34% taller, so both bars fall outside the tile (same rule as on desktop) */
  body.page-destination #videos .bjh-video img[src*="ytimg.com"] { top: -17%; bottom: auto; height: 134%; }
}

/* ---------- phones and small tablets ---------- */
@media screen and (max-width: 767.98px) {
  /* filter pills and their labels: 12px, never smaller (the pills already wrap onto a second line) */
  body.page-destination .dp-filters .dp-pill { font-size: 12px; letter-spacing: 0; min-width: 40px; }
  body.page-destination .dp-filters .dp-flabel { font-size: 12px !important; }
  /* price table cards: the package title link gets a comfortable tap height */
  body.page-destination .dp-offer-title { padding: 6px 0; }
  /* package cards: "Starting from" stays on one line; the old price moves under it when the card is narrow */
  body.page-destination .dp-pkg .dp-pricetop { flex-wrap: wrap; gap: 4px 8px; }
  body.page-destination .dp-pkg .dp-pricetop .dp-label { white-space: nowrap; }
}

/* ---------- phones ---------- */
@media screen and (max-width: 639.98px) {
  /* hero: the one-line title may use the hero's side padding, so it stays centred instead of running out to the right */
  body.page-destination .dp-hero .dp-h1-a { margin-left: -24px; margin-right: -24px; }
  /* hero buttons: a long label on the first button wraps inside it instead of spilling out */
  body.page-destination .dp-hero .flex.flex-col:has(> .bj-btn) > .bj-btn { white-space: normal; text-wrap: balance; line-height: 1.2; padding-top: 6px; padding-bottom: 6px; }
  body.page-destination .dp-hero .flex.flex-col:has(> .bj-btn) > a[href*="wa.me"] { gap: 4px; }
  /* breadcrumb: 12px */
  body.page-destination .dp-hero nav[aria-label="Breadcrumb"] { font-size: 12px !important; letter-spacing: .08em !important; }
  /* trust line under the quick facts: a wrapped item stays centred */
  body.page-destination .dp-trust li { text-align: center; }
  /* day circles: "DAY" at 12px; closer letters keep it as wide as before inside the 44px circle */
  body.page-destination .dp-tl-n small { font-size: 12px !important; letter-spacing: .03em; }
  /* videos: smaller title and play button on the half-width tiles */
  body.page-destination #videos .bjh-video:not(.bjh-video--big) .bjh-video-t { font-size: 15px; }
  body.page-destination #videos .bjh-video:not(.bjh-video--big) .bjh-play { width: 36px; height: 36px; font-size: 12px; }
}

/* large phones: the guest photo gets a taller frame (at 210px it was a thin strip that cut people at the waist) */
@media screen and (min-width: 480px) and (max-width: 639.98px) {
  body.page-destination .dp-about .dp-about-fig img[src*="/guests/"] { height: 300px !important; }
}

/* 600 to 639 (small tablets, unfolded phones): the full-width package cards were 568px wide and the eight of them 5150px tall.
   Two per row as from 640, with the compact card: less padding, icon columns as wide as each label, the 13px button.
   The swipe row on Kanha is not touched. */
@media screen and (min-width: 600px) and (max-width: 639.98px) {
  body.page-destination .dp-pkgs:not(.dp-swipe) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  body.page-destination .dp-pkgs:not(.dp-swipe) .dp-pkg > div:last-child { padding-left: 12px; padding-right: 12px; }
  body.page-destination .dp-pkgs:not(.dp-swipe) ul.dp-icons li { flex: 1 1 auto; }
  body.page-destination .dp-pkgs:not(.dp-swipe) ul.dp-icons li span { font-size: 12px !important; }
  body.page-destination .dp-pkgs:not(.dp-swipe) .dp-pkg-btns { grid-template-columns: minmax(0, 1fr) 50px !important; }
  body.page-destination .dp-pkgs:not(.dp-swipe) .dp-pkg-btns .dp-pkg-main { font-size: 13px; letter-spacing: .02em; gap: 7px; padding-left: 8px; padding-right: 8px; }
}

/* small phones: label spacing so "Starting from" and a five digit old price share one line */
@media screen and (max-width: 400px) {
  body.page-destination .dp-pkg .dp-pricetop .dp-label { letter-spacing: .06em; }
}
@media screen and (max-width: 384.98px) {
  body.page-destination #videos .bjh-video:not(.bjh-video--big) { padding-top: 5px; gap: 5px; }
  body.page-destination #videos .bjh-video:not(.bjh-video--big) .bjh-video-t { font-size: 14px; padding: 0 10px 8px; }
  body.page-destination #videos .bjh-video:not(.bjh-video--big) .bjh-play { width: 30px; height: 30px; font-size: 11px; }
}
/* swipe cards (Kanha), 374 to 407px: "View Full Itinerary" broke onto two lines beside the WhatsApp tile; the 13px button
   of the two-column cards keeps it on one line (below 374px the card is too narrow for that, so nothing changes there) */
@media screen and (min-width: 374px) and (max-width: 407.98px) {
  body.page-destination .dp-swipe .dp-pkg-btns .dp-pkg-main { font-size: 13px; letter-spacing: .02em; gap: 7px; padding-left: 8px; padding-right: 8px; }
}
/* full-width cards (Pachmarhi): the same button below 340px */
@media screen and (max-width: 339.98px) {
  body.page-destination .dp-pkgs:not(.dp-swipe) .dp-pkg-btns .dp-pkg-main { font-size: 13px; letter-spacing: .02em; gap: 7px; padding-left: 8px; padding-right: 8px; }
}
/* under 400px "WhatsApp Now" does not fit half of the hero button row (its text ran over the button padding):
   it keeps its own width on one line, the first button takes the rest */
@media screen and (max-width: 399.98px) {
  body.page-destination .dp-hero .flex.flex-col:has(> .bj-btn) > a[href*="wa.me"] { flex: 0 0 auto; }
}
/* and under 375px the button row also uses a little of the hero's side padding */
@media screen and (max-width: 374.98px) {
  body.page-destination .dp-hero .flex.flex-col:has(> .bj-btn) { margin-left: -8px; margin-right: -8px; }
  body.page-destination .dp-hero .flex.flex-col:has(> .bj-btn) > * { padding-left: 6px !important; padding-right: 6px !important; }
}

/* narrow phones (under 360px) */
@media screen and (max-width: 359.98px) {
  /* hero buttons: 20px from the screen edges, labels at 12px */
  body.page-destination .dp-hero .flex.flex-col:has(> .bj-btn) { margin-left: -20px; margin-right: -20px; }
  body.page-destination .dp-hero .flex.flex-col:has(> .bj-btn) > * { font-size: 12px !important; }
  /* package cards: the four icon labels no longer touch each other */
  body.page-destination .dp-pkg > div:last-child { padding-left: 16px; padding-right: 16px; }
  body.page-destination .dp-pkg ul.dp-icons li { flex: 1 1 auto; }
  body.page-destination .dp-pkg ul.dp-icons li span { font-size: 12px !important; }
  /* quick facts: more room for the text beside the icon */
  body.page-destination .dp-fact { padding-left: 9px; padding-right: 9px; gap: 8px; }
  body.page-destination #videos .bjh-video:not(.bjh-video--big) .bjh-play { width: 26px; height: 26px; font-size: 10px; }
}

/* ---------- tablets ---------- */
@media screen and (min-width: 640px) and (max-width: 1023.98px) {
  /* guest photo used as a section picture: taller frame, so people are not cut at the head */
  body.page-destination .dp-about-fig img[src*="/guests/"] { height: 400px; }
  /* day circles: "DAY" at 12px */
  body.page-destination .dp-tl-n small { font-size: 12px !important; letter-spacing: .08em; }
  /* night badge: "NIGHTS" at 12px (the 64px badge has the room, as on desktop) */
  body.page-destination .dp-plan-n small { font-size: 12px !important; letter-spacing: .06em; }
  /* breadcrumb links: a taller tap area without moving anything */
  body.page-destination .dp-hero nav[aria-label="Breadcrumb"] a { display: inline-flex; align-items: center; min-height: 36px; margin-top: -4px; margin-bottom: -4px; }
  /* card rows of three: the third card sits centred under the first two instead of leaving an empty cell beside it */
  body.page-destination .dp .bj-grid--3:not(.dp-places-rm) > :last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 10px); justify-self: center; }
}
/* small tablets: guest photos four in a row (two rows) instead of four rows of very large photos */
@media screen and (min-width: 640px) and (max-width: 899.98px) {
  body.page-destination #guests .bjh-guests { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}
/* two package cards per row, each about 290px wide: slightly less card padding, icon labels at 12px in columns as wide as each label needs,
   and the "View Full Itinerary" button sized to fit beside the WhatsApp tile (the tile was pushed out of the card) */
@media screen and (min-width: 640px) and (max-width: 767.98px) {
  body.page-destination .dp-pkg > div:last-child { padding-left: 16px; padding-right: 16px; }
  body.page-destination .dp-pkg ul.dp-icons li { flex: 1 1 auto; }
  body.page-destination .dp-pkg ul.dp-icons li span { font-size: 12px !important; }
  /* "Starting from" and a five digit old price share one line in every card (one card dropped the old price, its neighbour did not) */
  body.page-destination .dp-pkg .dp-pricetop .dp-label { letter-spacing: .06em; }
  body.page-destination .dp-pkg .dp-priceold { gap: 6px; }
  body.page-destination .dp-pkg-btns { grid-template-columns: minmax(0, 1fr) 50px !important; }
  body.page-destination .dp-pkg-btns .dp-pkg-main { font-size: 13px; letter-spacing: .03em; gap: 7px; padding-left: 8px; padding-right: 8px; white-space: normal; text-align: center; }
  /* breadcrumb stays on one line (it broke after the second ">"); a very long page name ends in "..." */
  body.page-destination .dp-hero nav[aria-label="Breadcrumb"] { flex-wrap: nowrap; white-space: nowrap; letter-spacing: .05em; }
  body.page-destination .dp-hero nav[aria-label="Breadcrumb"] > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* day plan foot: its two buttons share one row as equal halves (they stacked with ragged widths) */
  body.page-destination .dp-planfoot-b:has(> :nth-child(2)) { width: 100%; flex-wrap: nowrap; }
  body.page-destination .dp-planfoot-b:has(> :nth-child(2)) > * { flex: 1 1 0; min-width: 0; padding-left: 12px; padding-right: 12px; white-space: normal; text-align: center; }
}
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  /* package cards: icon labels at 12px (there is room in the 350px cards) */
  body.page-destination .dp-pkg ul.dp-icons li span { font-size: 12px !important; }
  /* "9% OFF" badge at 12px, as on phones and desktop */
  body.page-destination .dp-priceoff { font-size: 12px; }
  /* "how to reach" table: distance and drive time stay on one line ("About 3 / hours" broke beside a half empty last column) */
  body.page-destination .dp-table--plain td[data-label="Distance"],
  body.page-destination .dp-table--plain td[data-label="Drive time"] { white-space: nowrap; }
  /* price list table: the head "Starting from" and the duration ("2 Nights / 3 Days") stay on one line. The width comes from
     tighter cell padding and a slimmer Enquire button, so the package names keep the width they had */
  body.page-destination .dp-table--price th:nth-child(4),
  body.page-destination .dp-table--price td[data-label="Duration"] { white-space: nowrap; }
  body.page-destination .dp-table--price th,
  body.page-destination .dp-table--price td { padding-left: 10px; padding-right: 10px; }
  body.page-destination .dp-table--price th:first-child,
  body.page-destination .dp-table--price td:first-child { padding-left: 16px; }
  body.page-destination .dp-table--price .dp-tact { padding-right: 16px; }
  body.page-destination .dp-table--price .dp-tact .bj-btn--outline { padding-left: 12px; padding-right: 12px; }
  /* tap sizes, as on phones */
  body.page-destination .dp-readmore:not([hidden]) { min-height: 44px; }
  body.page-destination .dp-plan-x { width: 44px; height: 44px; }
  /* places grid (a swipe row below 768): the ninth card sits centred under the others */
  body.page-destination .dp .dp-places-rm > :last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 10px); justify-self: center; }
  /* offer price table: fits its box (it was 780px wide in a 720px box, so the Enquire buttons were cut off) */
  body.page-destination .dp-offer { min-width: 0; }
  body.page-destination .dp-offer th:nth-child(1) { width: 30%; }
  body.page-destination .dp-offer th:nth-child(2) { width: 12%; }
  body.page-destination .dp-offer th:nth-child(3) { width: 11%; }
  body.page-destination .dp-offer th:nth-child(4) { width: 13%; }
  body.page-destination .dp-offer th:nth-child(5) { width: 20%; }
  body.page-destination .dp-offer th:nth-child(6) { width: 14%; }
  body.page-destination .dp-offer th { font-size: 12px; white-space: normal; letter-spacing: .06em; line-height: 1.3; padding-left: 6px; padding-right: 6px; }
  body.page-destination .dp-offer th i { display: none; }
  body.page-destination .dp-offer th:first-child, body.page-destination .dp-offer td:first-child { padding-left: 14px; }
  body.page-destination .dp-offer td { padding-left: 6px; padding-right: 6px; }
  body.page-destination .dp-offer-pkg { gap: 10px; }
  body.page-destination .dp-offer-thumb { width: 56px; height: 56px; }
  body.page-destination .dp-offer-act .bj-btn { padding-left: 8px; padding-right: 8px; }
}
/* 900 to 1023: the video grid keeps the tablet layout (big video on top, four below); four columns squeezed the titles */
@media screen and (min-width: 900px) and (max-width: 1023.98px) {
  body.page-destination #videos .bjh-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.page-destination #videos .bjh-video--big { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
  body.page-destination #videos .bjh-video-t { font-size: 17px; }
  body.page-destination #videos .bjh-video--big .bjh-video-t { font-size: 24px; }
}

/* ---------- dest-new: laptops, desktops and big monitors (1024px and up) ---------- */
/* dest-new.large.css : destination pages (body.page-destination: Pachmarhi, Kanha), screens 1024px and wider.
   Appended after css/style.css, before tailwind.css. Every rule sits inside "screen and (min-width: 1024px ...)". */

/* ---------- all large screens ---------- */
@media screen and (min-width: 1024px) {
  /* About block with the photo on the left: the gold rule under the heading is an empty block, so it was drawn at the
     left edge, on top of the floated photo. As its own formatting context it sits beside the photo, under the heading. */
  body.page-destination .dp-about--l .bj-rule { display: flow-root; }

  /* package cards with a ticked list (Kanha): the list kept the dark text of a white card, unreadable on the green card */
  body.page-destination .dp-pkg .dp-ticks li { color: #E6EFE9; }

  /* small labels were 9 to 11.5px: icon labels on the cards, "NIGHTS" / "DAY" badges, "FROM", "STARTING FROM", "9% OFF", table head */
  body.page-destination .dp-pkg ul.dp-icons li span { font-size: 12px !important; }
  body.page-destination .dp-plan-n small { font-size: 12px; letter-spacing: .06em; }
  body.page-destination .dp-tl-n small { font-size: 12px; letter-spacing: .08em; }
  body.page-destination .dp-plan-p small,
  body.page-destination .dp-planfoot-p small,
  body.page-destination .dp-priceoff { font-size: 12px; }
  body.page-destination .dp-offer th { font-size: 12px; letter-spacing: .06em; }

  /* day plan that sits straight in the section (Kanha): the day cards ran the full container width (up to 1504px,
     190 characters a line); same 1080px column as the itinerary accordion on Pachmarhi */
  body.page-destination #day-plan .container > .dp-tl,
  body.page-destination #day-plan .container > .dp-planfoot { max-width: 1080px; margin-left: auto; margin-right: auto; }

  /* "how to reach" table: "155 to 160 km" and "About 4 hours" broke onto two lines beside a half empty last column */
  body.page-destination .dp-table--plain td[data-label="From"],
  body.page-destination .dp-table--plain td[data-label="Distance"],
  body.page-destination .dp-table--plain td[data-label="Drive time"] { white-space: nowrap; }

  /* video tiles: the YouTube thumbnails are 4:3 files with a black bar above and below the picture, and both bars
     showed inside the tile (21px on the big one). The image is drawn 34% taller, so the bars fall outside the tile. */
  body.page-destination #videos .bjh-video img[src*="ytimg.com"] { top: -17%; bottom: auto; height: 134%; }

  /* enquiry block: the form is shorter than the photo panel beside it; centre it instead of leaving a hole under it */
  body.page-destination #enquiry .dp-formside + div { display: flex; flex-direction: column; justify-content: center; }
}

/* ---------- 1024 to 1279: the narrowest desktop layout (content is 960 to 992px wide) ---------- */
@media screen and (min-width: 1024px) and (max-width: 1279.98px) {
  /* price table: beside a 4/12 photo it had 629px for a 780px table, so Offer Price and Enquire were cut off
     (sideways scroll inside the box). Narrower photo, tighter columns: the whole table shows. */
  body.page-destination .dp-offer-grid { grid-template-columns: 220px minmax(0, 1fr); column-gap: 24px; }
  body.page-destination .dp-offer-grid > div { grid-column: auto; }
  body.page-destination .dp-offer { min-width: 0; }
  body.page-destination .dp-offer th:nth-child(1) { width: 34%; }
  body.page-destination .dp-offer th:nth-child(2) { width: 12%; }
  body.page-destination .dp-offer th:nth-child(3) { width: 11%; }
  body.page-destination .dp-offer th:nth-child(4) { width: 12%; }
  body.page-destination .dp-offer th:nth-child(5) { width: 17%; }
  body.page-destination .dp-offer th:nth-child(6) { width: 14%; }
  body.page-destination .dp-offer th { padding-left: 6px; padding-right: 6px; letter-spacing: .03em; white-space: normal; line-height: 1.3; }
  body.page-destination .dp-offer th i { display: none; }
  body.page-destination .dp-offer td { padding-left: 8px; padding-right: 8px; }
  body.page-destination .dp-offer th:first-child,
  body.page-destination .dp-offer td:first-child { padding-left: 14px; }
  body.page-destination .dp-offer-pkg { gap: 10px; }
  body.page-destination .dp-offer-thumb { width: 56px; height: 56px; }
  body.page-destination .dp-offer-act .bj-btn { padding-left: 6px; padding-right: 6px; }

  /* quick facts under the hero (Kanha): five 192px columns, "NEAREST AIRPORT" and "NEAREST STATION" wrapped */
  body.page-destination .dp-fact { padding-left: 14px; padding-right: 14px; gap: 10px; }
  body.page-destination .dp-fact-l { letter-spacing: .05em; }

  /* "combine your trip" cards (Kanha), four 224px columns: "EXPLORE BANDHAVGARH" broke onto two lines */
  body.page-destination .dp-near .bj-link { font-size: 14px; letter-spacing: .04em; }

  /* enquiry form: Name and Mobile side by side were 182px wide, the hint "Mobile / WhatsApp Number" was cut off.
     One field per row (the form is still shorter than the photo panel beside it) */
  body.page-destination #enquiry form [class~="sm:grid-cols-2"] { grid-template-columns: minmax(0, 1fr); }

  /* price list table (Kanha): the head "STARTING FROM" and the duration ("2 Nights / 3 Days") broke onto two lines */
  body.page-destination .dp-table--price th:nth-child(4),
  body.page-destination .dp-table--price td[data-label="Duration"] { white-space: nowrap; }

  /* small video tiles (228 to 236px wide): a two-line 20px title started 0 to 3px under the play button */
  body.page-destination #videos .bjh-video:not(.bjh-video--big) .bjh-video-t { font-size: 17px; }

  /* planning guide, three 304px cards: less side padding and gap, so the text column is wider and
     "Gypsy Tour Booking" stays on one line like the other two card heads */
  body.page-destination .dp-guide { gap: 18px; }
  body.page-destination .dp-gcard-top { padding-left: 18px; padding-right: 18px; }
}

/* ---------- 1280 to 1535: four package cards in a row, 297px each ---------- */
@media screen and (min-width: 1280px) and (max-width: 1535.98px) {
  /* price table head: "NORMAL PRICE" (127px) ran out of its 115px column into the orange Offer Price cell: two lines */
  body.page-destination .dp-offer th { padding-left: 5px; padding-right: 5px; line-height: 1.3; }
  body.page-destination .dp-offer th:first-child { padding-left: 18px; }
  body.page-destination .dp-offer th:nth-child(4) { white-space: normal; }
  /* price table: beside the 395px photo the package names had about 136px and ran to 4 or 5 lines (rows 175px tall).
     Narrower photo and a wider first column: names take 2 or 3 lines */
  body.page-destination .dp-offer-grid { grid-template-columns: 300px minmax(0, 1fr); }
  body.page-destination .dp-offer-grid > div { grid-column: auto; }
  body.page-destination .dp-offer th:nth-child(1) { width: 37%; }
  body.page-destination .dp-offer th:nth-child(2) { width: 12%; }
  body.page-destination .dp-offer th:nth-child(3) { width: 10%; }
  body.page-destination .dp-offer th:nth-child(4) { width: 12%; }
  body.page-destination .dp-offer th:nth-child(5) { width: 16%; }
  body.page-destination .dp-offer th:nth-child(6) { width: 13%; }

  /* card: the four icon labels touched ("Transfers Sightseeing"): each column as wide as its label needs */
  body.page-destination .dp-pkg ul.dp-icons li { flex: 1 1 auto; }
  /* card: "STARTING FROM" broke in two beside a five digit old price; now one line (a longer old price drops under it) */
  body.page-destination .dp-pkg .dp-pricetop { flex-wrap: wrap; row-gap: 4px; }
  body.page-destination .dp-pkg .dp-pricetop .dp-label { white-space: nowrap; letter-spacing: .06em; }
  body.page-destination .dp-pkg .dp-priceold { gap: 6px; }
  /* card: button + WhatsApp tile were 12px wider than the card body, the tile sat in the card padding */
  body.page-destination .dp-pkg-btns .dp-pkg-main { padding-left: 8px; padding-right: 8px; font-size: 13px; letter-spacing: .02em; gap: 7px; }
}

/* ---------- itinerary-v2: phones and tablets (up to 1023px) ---------- */
/* itinerary-v2, small screens (320 to 1023px): the 19 package pages (body.page-itinerary-v2, main.dp.ip; the newest one also main.ip-lean) */

/* ---------- all small screens ---------- */
@media screen and (max-width: 1023.98px) {
  /* day cards, fact lists and the short notes (booking terms, "More guest stories"): a link inside the running text reads as a
     text link (it was the uppercase action link and broke the sentence onto its own lines). Underlined like the same links on
     large screens; no bottom border (on an inline link it sat on the next line of text). The 7px top and bottom padding only
     makes the tap area taller (32px), nothing moves */
  body.page-itinerary-v2 :is(.ip-day-txt, .ip-mfacts, .ip-know, .ip-tip, .dp-note) a.bj-link {
    display: inline; text-transform: none; letter-spacing: 0; font-family: inherit; font-size: inherit;
    text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--bj-gold);
    padding: 7px 0 !important; border-bottom: 0 !important;
  }
  /* text links in the overview: a slightly taller tap area, nothing moves */
  body.page-itinerary-v2 .dp-text a.bj-link { padding-top: 6px !important; }
  /* day cards: the paragraph after the sightseeing box no longer touches the box */
  body.page-itinerary-v2 .ip-sights + .ip-day-p { margin-top: 14px; }
  /* quote sentence (newest page): the three inline fields get a taller tap area, the sentence keeps its line height */
  body.page-itinerary-v2 .ip-ql-in { padding-top: 6px; padding-bottom: 6px; }
  /* newest page: the smallest labels come up to 12px (the DAY BY DAY pill, DAY in the day number, the item count chips, the tag line and the privacy note of the enquiry card) */
  body.page-itinerary-v2 .ip-lean #itinerary .text-center.max-w-3xl > div:first-child > span.font-semibold { font-size: 12px !important; }
  body.page-itinerary-v2 .ip-d-n small { font-size: 12px; }
  body.page-itinerary-v2 .ip-io-c { font-size: 12px; }
  body.page-itinerary-v2 .ip-pop .bm-tag { font-size: 12px; }
  body.page-itinerary-v2 .ip-pop .bm-note { font-size: 12px; }
  /* newest page, day titles: a title that needs two lines gets two even lines ("Pickup from Pipariya and / Transfer to Pachmarhi")
     instead of one word alone on the second line; the number of lines does not change */
  body.page-itinerary-v2 main.ip-lean .ip-d-head h3 { text-wrap: balance; }
  /* videos (newest page): play button and title share the tile as a column, so a two or three line title cannot run under the play button (same as the destination pages) */
  body.page-itinerary-v2 #videos .bjh-video { display: flex; flex-direction: column; align-self: stretch; justify-self: stretch; padding-top: 6px; gap: 6px; overflow: clip; }
  body.page-itinerary-v2 #videos .bjh-video .bjh-play { position: relative; top: auto; left: auto; flex: 0 0 auto; margin: auto; }
  body.page-itinerary-v2 #videos .bjh-video .bjh-video-t { position: relative; left: auto; right: auto; bottom: auto; padding: 0 12px 9px; }
  body.page-itinerary-v2 #videos .bjh-video--big .bjh-video-t { padding: 0 16px 14px; }
}

/* ---------- phones and small tablets: day cards are a plain list ---------- */
@media screen and (max-width: 767.98px) {
  /* the cards are not sticky here, but they kept the sticky offset (80px) and the scroll script kept shrinking and fading them:
     every card sat 80px too low (a gap under the heading, the last card over the note below) and faded while being read */
  body.page-itinerary-v2 .tl-stack-card { top: auto; transform: none !important; opacity: 1 !important; }
  /* train list: the "Travel time" column is as wide as its label, so the label and the time stay on one line
     (on narrow phones both wrapped and the three times no longer lined up) */
  body.page-itinerary-v2 .ip-trains tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content; }
}

/* ---------- phones ---------- */
@media screen and (max-width: 639.98px) {
  /* hero title: scales with the screen so a long word ("Itarsi/Hoshangabad") stays inside the hero */
  body.page-itinerary-v2 .ip-hero h1 { font-size: min(36px, 9vw); overflow-wrap: break-word; }
  /* hero subtitle: the 15px phone text rule had shrunk the gold italic line (designed at 21px) below the intro text under it.
     19px, with a soft shadow so it stays readable on a bright part of the photo; two even lines instead of one word alone on the second */
  body.page-itinerary-v2 .ip-hero .ip-hero-sub { font-size: 19px !important; line-height: 1.3 !important; text-shadow: 0 1px 6px rgba(0, 0, 0, .65); text-wrap: balance; }
  /* breadcrumb: 12px */
  body.page-itinerary-v2 .ip-hero nav[aria-label="Breadcrumb"] { font-size: 12px !important; letter-spacing: .08em !important; }
  body.page-itinerary-v2 .ip-hero nav[aria-label="Breadcrumb"] > span:last-child { font-size: 12px !important; }
  /* hero buttons: icon and label sit closer */
  body.page-itinerary-v2 .ip-hero .flex.flex-col:has(> .bj-btn) > a[href*="wa.me"] { gap: 4px; }
  /* quote sentence (newest page): its own line spacing is back (the 15px phone text rule had squeezed it to 1.62),
     so the taller fields fit and every line of the sentence is spaced alike */
  body.page-itinerary-v2 .ip-ql-line { line-height: 2.3 !important; }
  /* trust line under the quick facts: a wrapped item stays centred */
  body.page-itinerary-v2 .dp-trust li { text-align: center; }
  /* videos: smaller title and play button on the half-width tiles */
  body.page-itinerary-v2 #videos .bjh-video:not(.bjh-video--big) .bjh-video-t { font-size: 15px; }
  body.page-itinerary-v2 #videos .bjh-video:not(.bjh-video--big) .bjh-play { width: 36px; height: 36px; font-size: 12px; }
}

/* under 400px: the breadcrumb is set a little tighter so the whole trail fits, and the hero button row
   uses 16px of the hero's 40px side padding ("WhatsApp Now" ran over its button) */
@media screen and (max-width: 399.98px) {
  body.page-itinerary-v2 .ip-hero nav[aria-label="Breadcrumb"] { letter-spacing: .04em !important; gap: 5px !important; }
  body.page-itinerary-v2 .ip-hero .flex.flex-col:has(> .bj-btn) { margin-left: -16px; margin-right: -16px; }
}
@media screen and (max-width: 384.98px) {
  body.page-itinerary-v2 #videos .bjh-video:not(.bjh-video--big) { padding-top: 5px; gap: 5px; }
  body.page-itinerary-v2 #videos .bjh-video:not(.bjh-video--big) .bjh-video-t { font-size: 14px; padding: 0 10px 8px; }
  body.page-itinerary-v2 #videos .bjh-video:not(.bjh-video--big) .bjh-play { width: 30px; height: 30px; font-size: 11px; }
}
/* narrow phones (under 360px) */
@media screen and (max-width: 359.98px) {
  /* quick facts: more room for the text beside the icon; the value is set at 14px so the longest single words
     ("Hoshangabad,", "Omkareshwar,") fit in the 144px cell (at 15px they ran up to the cell border) */
  body.page-itinerary-v2 .dp-fact { padding-left: 9px; padding-right: 9px; gap: 6px; }
  body.page-itinerary-v2 .dp-fact .dp-fact-v { font-size: 14px !important; }
  /* enquiry forms: the hint "Mobile / WhatsApp Number" fits inside its field (the last letter was cut off) */
  body.page-itinerary-v2 .ip-quote-form .px-4, body.page-itinerary-v2 form[data-lead="inline"] .px-4 { padding-left: 12px; padding-right: 12px; }
  body.page-itinerary-v2 #enquiry .grid > .p-6 { padding-left: 18px; padding-right: 18px; }
  body.page-itinerary-v2 #videos .bjh-video:not(.bjh-video--big) .bjh-play { width: 26px; height: 26px; font-size: 10px; }
  /* breadcrumb: set tighter still, so the whole trail fits down to 320px */
  body.page-itinerary-v2 .ip-hero nav[aria-label="Breadcrumb"] { letter-spacing: .01em !important; gap: 3px !important; left: 8px; right: 8px; }
}
/* under 350px "WhatsApp Now" keeps its own width on one line, "Enquire Now" takes the rest of the row */
@media screen and (max-width: 349.98px) {
  body.page-itinerary-v2 .ip-hero .flex.flex-col:has(> .bj-btn) > a[href*="wa.me"] { flex: 0 0 auto; }
}

/* ---------- tablets ---------- */
@media screen and (min-width: 640px) and (max-width: 1023.98px) {
  /* breadcrumb links: a taller tap area without moving anything */
  body.page-itinerary-v2 .ip-crumbs a { display: inline-flex; align-items: center; min-height: 36px; margin-top: -8px; margin-bottom: -8px; }
  /* newest page: the overview, photo and day plan block lines up with the hero, the quick facts and every section below it (it ran up to 124px wider on each side) */
  body.page-itinerary-v2 .ip-2col { max-width: 768px; padding-left: 24px; padding-right: 24px; }
  /* card rows of three, and a single guide card: the last card sits centred instead of leaving an empty cell beside it */
  body.page-itinerary-v2 .bj-grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 10px); justify-self: center; }
}
/* 640 to 767: the page container is 640px wide here, so the newest page's block is too; and the enquiry form has two fields
   side by side, where the hint "Mobile / WhatsApp Number" fits with a little less side padding (its last letter was cut) */
@media screen and (min-width: 640px) and (max-width: 767.98px) {
  body.page-itinerary-v2 .ip-2col { max-width: 640px; }
  body.page-itinerary-v2 form[data-lead="inline"] .px-4 { padding-left: 12px; padding-right: 12px; }
}
/* 640 to 991 (newest page): the side form is hidden here, so the photo card is alone in its column; it takes the full
   column width like the overview card above it and the day plan below it (it was 560px wide, inset up to 80px on each side) */
@media screen and (min-width: 640px) and (max-width: 991.98px) {
  body.page-itinerary-v2 main.ip-lean .ip-aside-in { max-width: none; }
}
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  /* related tours list in two columns: both boxes of a row get the same height */
  body.page-itinerary-v2 .dp-related > li { display: flex; }
  /* overview: the photo and the price card sit side by side (the card was a phone form stretched to the full width,
     with two 670px wide fields); the photo takes the height of the card */
  body.page-itinerary-v2 #overview .ip-side:has(> .ip-ovimg + .ip-quote) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  body.page-itinerary-v2 #overview .ip-side > .ip-ovimg:has(+ .ip-quote) { display: flex; flex-direction: column; }
  body.page-itinerary-v2 #overview .ip-side > .ip-ovimg:has(+ .ip-quote) > img { flex: 1 1 auto; height: auto; min-height: 0; }
}
/* small tablets: guest photos four in a row (two rows) instead of four rows of very large photos */
@media screen and (min-width: 640px) and (max-width: 899.98px) {
  body.page-itinerary-v2 #guests .bjh-guests { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}
/* 900 to 1023: the video grid keeps the tablet layout (big video on top, four below); four columns squeezed the titles */
@media screen and (min-width: 900px) and (max-width: 1023.98px) {
  body.page-itinerary-v2 #videos .bjh-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.page-itinerary-v2 #videos .bjh-video--big { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
  body.page-itinerary-v2 #videos .bjh-video-t { font-size: 17px; }
  body.page-itinerary-v2 #videos .bjh-video--big .bjh-video-t { font-size: 24px; }
}

/* ---------- itinerary-v2: laptops, desktops and big monitors (1024px and up) ---------- */
/* itinerary-v2.large.css : itinerary pages (body.page-itinerary-v2, main.dp.ip; the newest one is main.ip-lean),
   screens 1024px and wider. Appended after css/style.css, before tailwind.css.
   Every rule sits inside "screen and (min-width: 1024px ...)". */

/* ---------- all large screens ---------- */
@media screen and (min-width: 1024px) {
  /* hero: the banner had a fixed height (64% of the screen height, 460 to 600px). A long title with a subtitle and an
     intro line needs up to 508px + 160px padding: the breadcrumb slid under the header and the two buttons sat on top
     of the facts card. The same value is now the least height, so a full hero grows and a short one stays as it was. */
  body.page-itinerary-v2 .ip-hero { height: auto; min-height: clamp(460px, 64vh, 600px) !important; }

  /* headings and centred notes: even line lengths, no single word left alone on the last line
     ("... from / Pipariya", "... Day Wise / Itinerary", "... Madhai / Tour", and the day titles of the newest page:
     "... Transfer to / Pachmarhi" at 1024 to 1279); the number of lines does not change */
  body.page-itinerary-v2 .ip-hero h1,
  body.page-itinerary-v2 main.ip section h2,
  body.page-itinerary-v2 main.ip-lean .ip-d-head h3,
  body.page-itinerary-v2 main.ip section p.dp-note.text-center { text-wrap: balance; }
  body.page-itinerary-v2 .ip-hero .ip-hero-sub + p { text-wrap: pretty; }

  /* facts card under the hero: always five columns, so three or four facts left one or two empty cells at the right */
  body.page-itinerary-v2 .dp-facts:has(> .dp-fact:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.page-itinerary-v2 .dp-facts:has(> .dp-fact:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* links inside a sentence (day headings, day text, sightseeing points, "how to reach" points, tips, the short notes
     with the booking terms and "More guest stories") were drawn as the uppercase action link on a line of its own;
     they read as text links, like the links in the overview text and like the same links on small screens */
  body.page-itinerary-v2 .ip-day-txt a.bj-link,
  body.page-itinerary-v2 .dp-note a.bj-link,
  body.page-itinerary-v2 .ip-mfacts a.bj-link,
  body.page-itinerary-v2 .ip-tip a.bj-link,
  body.page-itinerary-v2 .ip-know a.bj-link,
  body.page-itinerary-v2 .ip-inc li a.bj-link {
    display: inline; text-transform: none; letter-spacing: 0; font-family: inherit; font-size: inherit;
    text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--bj-gold);
    padding: 0 !important; border-bottom: 0 !important;
  }
  /* day cards: the paragraph after the sightseeing box no longer touches the box */
  body.page-itinerary-v2 .ip-sights + .ip-day-p { margin-top: 14px; }

  /* destination guide cards under the "more tours" list: one or two cards sat at the far left of a three column grid
     that is wider than the list above. Same 1100px column as the list; one card sits in the middle column,
     two cards match the two columns of the list */
  body.page-itinerary-v2 .ip-destcards { max-width: 1100px; margin-left: auto; margin-right: auto; }
  body.page-itinerary-v2 .ip-destcards > :only-child { grid-column: 2; }
  body.page-itinerary-v2 .ip-destcards:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* overview of the older pages: a short text (190 to 370px high) stood beside the photo and the price card (677px),
     which left a 300 to 480px hole under the text. With a one paragraph overview the photo moves under the text and the
     price card stands alone on the right, centred on that block; nothing is hidden, the order in the page stays the same */
  body.page-itinerary-v2 #overview .grid:has(.dp-text > p:only-child):has(> .ip-side > .ip-ovimg + .ip-quote) { row-gap: 28px; }
  body.page-itinerary-v2 #overview .grid:has(.dp-text > p:only-child) > .ip-side:has(> .ip-ovimg + .ip-quote) { display: contents; }
  body.page-itinerary-v2 #overview .grid:has(.dp-text > p:only-child) > .ip-side > .ip-ovimg:has(+ .ip-quote) { grid-column: 1 / span 7; grid-row: 2; }
  body.page-itinerary-v2 #overview .grid:has(.dp-text > p:only-child) > .ip-side > .ip-ovimg + .ip-quote { grid-column: 8 / span 5; grid-row: 1 / span 2; align-self: center; }
  /* a longer overview without the tick list (two paragraphs): the text is centred on the photo and price card column,
     so the space left over is shared above and below it. Overviews with the tick list are as tall as that column: unchanged */
  body.page-itinerary-v2 #overview .grid > [class~="lg:col-span-7"]:not(:has(.dp-ticks)):has(+ .ip-side) { align-self: center; }

  /* enquiry block: the form is shorter than the photo panel beside it; centre it instead of leaving a hole under it */
  body.page-itinerary-v2 #enquiry .dp-formside + div { display: flex; flex-direction: column; justify-content: center; }

  /* small labels were 10 to 11.5px: "DAY" in the day badge, "DAY BY DAY" chip, "7 ITEMS", "About this tour",
     the tag and the privacy note of the side form */
  body.page-itinerary-v2 .ip-d-n small { font-size: 12px; letter-spacing: .1em; }
  body.page-itinerary-v2 .ip-lean #itinerary .text-center.max-w-3xl > div:first-child > span.font-semibold { font-size: 12px !important; }
  body.page-itinerary-v2 .ip-io-c { font-size: 12px; }
  body.page-itinerary-v2 .ip-2col section#overview::before { font-size: 12px; }
  body.page-itinerary-v2 .ip-pop .bm-tag,
  body.page-itinerary-v2 .ip-pop .bm-note { font-size: 12px; }
}

/* ---------- newest page, sticky side column (photos + form) on screens where the pair is taller than the screen ----------
   Up to 800px of screen height only the form sticks, from 801px the photos and the form stick together. The pair
   needs 875 to 926px (compact, screens up to 960px high) or up to 1155px (full size): on 1180 x 820, 1536 x 864 and
   1920 x 1080 the privacy note and part of the trust line stayed below the screen edge while the column was stuck.
   In those two bands the photos scroll away and the form alone sticks, as it does on shorter screens. */
@media screen and (min-width: 1024px) and (min-height: 800.02px) and (max-height: 929.98px) {
  body.page-itinerary-v2 .ip-aside { position: static; align-self: stretch; }
  body.page-itinerary-v2 .ip-aside-in { height: 100%; align-content: start; }
  body.page-itinerary-v2 .ip-aside .ip-quote { position: sticky; top: 88px; }
}
@media screen and (min-width: 1024px) and (min-height: 960.02px) and (max-height: 1159.98px) {
  body.page-itinerary-v2 .ip-aside { position: static; align-self: stretch; }
  body.page-itinerary-v2 .ip-aside-in { height: 100%; align-content: start; }
  body.page-itinerary-v2 .ip-aside .ip-quote { position: sticky; top: 88px; }
}

/* ---------- from 1200: the site container has 16px side padding (32px below 1200) ---------- */
@media screen and (min-width: 1200px) {
  /* newest page: the two column block kept 32px, so it stood 16px inside the facts card above and the review cards below */
  body.page-itinerary-v2 .ip-2col { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- 1024 to 1535: laptops (screens 720 to 860px high) ---------- */
@media screen and (min-width: 1024px) and (max-width: 1535.98px) {
  /* hero with a subtitle and an intro line (three pages): the 60px title took three lines and the banner needed 668px,
     the whole first screen. 48px title on two lines, intro at 16px, a little less padding: 527px */
  body.page-itinerary-v2 .ip-hero:has(.ip-hero-sub) { padding-top: 48px; padding-bottom: 88px; }
  body.page-itinerary-v2 .ip-hero:has(.ip-hero-sub) h1 { font-size: 48px; line-height: 1.1; margin-bottom: 12px; }
  body.page-itinerary-v2 .ip-hero .ip-hero-sub { font-size: 24px; margin-bottom: 8px; }
  body.page-itinerary-v2 .ip-hero .ip-hero-sub + p { font-size: 16px; margin-bottom: 16px; }
}

/* ---------- 1024 to 1279: the narrowest desktop layout (content is 960 to 992px wide) ---------- */
@media screen and (min-width: 1024px) and (max-width: 1279.98px) {
  /* five facts in 192px columns: "PLACES COVERED" and "START AND END" wrapped */
  body.page-itinerary-v2 .dp-facts:has(> .dp-fact:nth-child(5)) .dp-fact { padding-left: 14px; padding-right: 14px; gap: 10px; }
  body.page-itinerary-v2 .dp-facts:has(> .dp-fact:nth-child(5)) .dp-fact-l { letter-spacing: .05em; }

  /* enquiry form: Name and Mobile side by side were 182px wide, the hint "Mobile / WhatsApp Number" was cut off.
     One field per row (the form is still shorter than the photo panel beside it) */
  body.page-itinerary-v2 #enquiry form [class~="sm:grid-cols-2"] { grid-template-columns: minmax(0, 1fr); }

  /* newest page, side form (276px wide): the hint "Mobile / WhatsApp Number" was cut off at "Num";
     the tag above the title stays on one line at 12px */
  body.page-itinerary-v2 .ip-pop .bm-field input::placeholder,
  body.page-itinerary-v2 .ip-pop .bm-field textarea::placeholder { font-size: 13.5px; }
  body.page-itinerary-v2 .ip-pop .bm-tag { letter-spacing: 0; padding-left: 8px; padding-right: 8px; gap: 5px; }
}

/* ---------- designer-dest: phones and tablets (up to 1023px) ---------- */
/* designer-dest.small.css : /destinations/ (index) and the 23 pages under it, phones and tablets (up to 1023.98px).
   Scope hooks (these pages have no body class):
     detail pages  body:has(> #destinationModal)      (the "destination" popup exists only on the 23 pages under /destinations/)
     index page    main:has(> #wildlife.bj-section)   (only /destinations/ has this section) */

/* ===================== detail pages, every small width ===================== */
@media screen and (max-width: 1023.98px) {
  /* hero breadcrumb: the HOME link gets a finger-sized tap area, nothing moves */
  body:has(> #destinationModal) main > .min-h-svh .tracking-widest.uppercase > a { padding: 9px 6px; margin: -9px -6px; }
  /* FAQ: "col-span-12" inside a 1-column grid makes 11 phantom columns (11 gaps x 32px = 352px), wider than a small phone */
  body:has(> #destinationModal) main #faq .grid > [class~="col-span-12"] { grid-column: 1 / -1; min-width: 0; }
  /* small text buttons: taller tap area, same place on the page */
  body:has(> #destinationModal) main #readMoreBtnMobile { padding: 8px 14px; }
  body:has(> #destinationModal) main #costPriceReadMoreBtn { padding: 10px 14px 10px 0; margin-top: 14px; margin-bottom: -10px; }
  body:has(> #destinationModal) main .grid > div > .p-5 > .mt-auto.pt-3.border-t > button { padding: 9px 14px 9px 0; margin-top: -9px; margin-bottom: -9px; }
  /* section headings on two or three lines left one word alone on the last line ("... That's Right for / You").
     The dark call-to-action band at the end of main belongs to the shell and is left out. */
  body:has(> #destinationModal) main > :not(.bg-slate-900) h2.font-cormorant { text-wrap: balance; }
  /* guest review cards without a star row: the review starts at the top of the card, where the decorative quote mark
     sits, and the mark covered the end of the first lines. The text now flows around the mark. */
  body:has(> #destinationModal) #testimonials .testi-slide > div > div:first-of-type:not(:has(> .bj-stars)) > p::before { content: ""; float: right; width: 30px; height: 36px; }
  /* "Cost & Price" (Ujjain): the Read More fade ran to a paler cream than the sand section behind it and showed as a
     hard-edged box. It now fades to the section's own colour. */
  body:has(> #destinationModal) #costPriceFade { background-image: linear-gradient(to top, #F4EBDD, rgba(244, 235, 221, 0)); }
  /* "Best Time to Visit" card (Ujjain): the gold rule with the diamond touched the heading. 5px of air above it,
     taken from the space below, so the card's rows stay where they were. */
  body:has(> #destinationModal) main h3 + div[class~="bg-[#ED4409]"] { margin-top: 5px; margin-bottom: 15px; }
}

/* ===================== price table ===================== */
/* tablets: the 1000px wide table is cut after "Stay"; the same table now fits the box, no sideways scroll */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  body:has(> #destinationModal) main .table-scroll-x > table { min-width: 0; }
  body:has(> #destinationModal) main .table-scroll-x > table col:nth-child(1) { width: 35%; }
  body:has(> #destinationModal) main .table-scroll-x > table col:nth-child(2) { width: 16%; }
  body:has(> #destinationModal) main .table-scroll-x > table col:nth-child(3) { width: 16%; }
  body:has(> #destinationModal) main .table-scroll-x > table col:nth-child(4) { width: 14%; }
  body:has(> #destinationModal) main .table-scroll-x > table col:nth-child(5) { width: 19%; }
  body:has(> #destinationModal) main .table-scroll-x > table th, body:has(> #destinationModal) main .table-scroll-x > table td { padding-left: 8px; padding-right: 8px; }
  body:has(> #destinationModal) main .table-scroll-x > table th:first-child, body:has(> #destinationModal) main .table-scroll-x > table td:first-child { padding-left: 14px; padding-right: 10px; }
  body:has(> #destinationModal) main .table-scroll-x > table td:first-child > .flex { gap: 12px; }
  body:has(> #destinationModal) main .table-scroll-x > table td:first-child img { width: 64px; height: 64px; }
  body:has(> #destinationModal) main .table-scroll-x > table td .rounded-full { padding-left: 10px; padding-right: 10px; white-space: nowrap; }
}
/* phones: only the package names were on screen, every price was off to the right. Each row becomes one card:
   name on top, duration and stay on the left, old price and offer price on the right */
@media screen and (max-width: 767.98px) {
  body:has(> #destinationModal) main .table-scroll-x > table { display: block; min-width: 0; }
  body:has(> #destinationModal) main .table-scroll-x > table col { display: none; }
  body:has(> #destinationModal) main .table-scroll-x > table > thead, body:has(> #destinationModal) main .table-scroll-x > table > tbody:not(.hidden) { display: block; }
  body:has(> #destinationModal) main .table-scroll-x > table > thead > tr { display: flex; }
  body:has(> #destinationModal) main .table-scroll-x > table > thead th { display: block; }
  body:has(> #destinationModal) main .table-scroll-x > table > thead th:first-child { flex: 1 1 auto; }
  body:has(> #destinationModal) main .table-scroll-x > table > thead th:nth-child(2), body:has(> #destinationModal) main .table-scroll-x > table > thead th:nth-child(3), body:has(> #destinationModal) main .table-scroll-x > table > thead th:nth-child(4) { display: none; }
  body:has(> #destinationModal) main .table-scroll-x > table > tbody + tbody { border-top: 1px solid #f3f4f6; }
  body:has(> #destinationModal) main .table-scroll-x > table > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "dur old" "stay offer"; column-gap: 12px; padding: 16px 16px 18px; }
  body:has(> #destinationModal) main .table-scroll-x > table > tbody > tr > td { display: block; padding: 0; border: 0; background: none; text-align: left; }
  body:has(> #destinationModal) main .table-scroll-x > table > tbody > tr > td:nth-child(1) { grid-area: name; padding-bottom: 12px; }
  body:has(> #destinationModal) main .table-scroll-x > table > tbody > tr > td:nth-child(2) { grid-area: dur; align-self: end; }
  body:has(> #destinationModal) main .table-scroll-x > table > tbody > tr > td:nth-child(3) { grid-area: stay; }
  body:has(> #destinationModal) main .table-scroll-x > table > tbody > tr > td:nth-child(3) > span { display: inline; }
  body:has(> #destinationModal) main .table-scroll-x > table > tbody > tr > td:nth-child(4) { grid-area: old; align-self: end; text-align: right; }
  body:has(> #destinationModal) main .table-scroll-x > table > tbody > tr > td:nth-child(5) { grid-area: offer; text-align: right; }
}
/* large phones and small tablets: the same card on one line (name | duration and stay | prices), no empty middle */
@media screen and (min-width: 600px) and (max-width: 767.98px) {
  body:has(> #destinationModal) main .table-scroll-x > table > tbody > tr { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; grid-template-areas: "name dur old" "name stay offer"; column-gap: 16px; }
  body:has(> #destinationModal) main .table-scroll-x > table > tbody > tr > td:nth-child(1) { padding-bottom: 0; align-self: center; }
}

/* ===================== tablets: itinerary photo, review slider, side padding ===================== */
@media screen and (min-width: 640px) and (max-width: 1023.98px) {
  /* the 351px wide photo was stretched to the full column (736 x 551 at 768); keep it at a size it can carry */
  body:has(> #destinationModal) main #itineraryImageCol { max-width: 520px; }
  /* guest reviews: the arrow script moves one card plus 24px, the cards stood 16px apart, so every click left the row
     8px further left (at the end the left card touched the screen edge). 24px apart: two cards fill the row exactly. */
  body:has(> #destinationModal) #testimonials .testi-slider-track { gap: 24px; }
  /* sections without "px-4" on their container (tour grids, photo moments, Cost & Price) had 24px at the sides, their
     neighbours 16px, so the blocks of one page started at two different left edges. All 16px, as on phones.
     The hero and the dark call-to-action band are not sections and stay as they are. */
  body:has(> #destinationModal) main > :is(section, #costPriceSection) > .container { padding-left: 16px; padding-right: 16px; }
  /* enquiry block, the three points under the form stand side by side here: "Mon to Sat, 11am to / 7pm" left one word
     alone on the second line. Even lines, same height. */
  body:has(> #destinationModal) main .contcat-form-section form + .grid p { text-wrap: balance; }
}

/* ===================== photo and video moments: ten tiles ===================== */
/* three columns left the tenth tile alone on a fourth row. 640 to 767: two columns, five full rows, as on phones */
@media screen and (min-width: 640px) and (max-width: 767.98px) {
  body:has(> #destinationModal) main .grid.grid-cols-2[class~="sm:grid-cols-3"]:has(> :nth-child(10):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 768 to 1023: five columns, two full rows, as on desktop. The tiles are 134px wide, so they are a little lower
   (160px, was 192px) and a long video label wraps inside its tile, as on phones */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  body:has(> #destinationModal) main .grid.grid-cols-2[class~="sm:grid-cols-3"]:has(> :nth-child(10):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body:has(> #destinationModal) main .grid.grid-cols-2[class~="sm:grid-cols-3"]:has(> :nth-child(10):last-child) > div { height: 160px; }
  body:has(> #destinationModal) main .grid.grid-cols-2[class~="sm:grid-cols-3"]:has(> :nth-child(10):last-child) > div > .absolute.bottom-2.left-2 { max-width: calc(100% - 16px); }
}

/* ===================== tour cards ===================== */
@media screen and (max-width: 719.98px) {
  /* the four icon labels ran into each other ("HOTELBREAKFASTCABSIGHTSEEING") in cards narrower than about 300px */
  body:has(> #destinationModal) main .tour-grid > div .justify-between.border-t.border-b { padding-left: 4px; padding-right: 4px; }
  body:has(> #destinationModal) main .tour-grid > div .justify-between.border-t.border-b span { letter-spacing: 0; }
}

/* ===================== phones ===================== */
@media screen and (max-width: 639.98px) {
  /* hero: it already has 24px side padding, the inner container added 16px more; the title gets that room back */
  body:has(> #destinationModal) main > .min-h-svh > .container { padding-left: 0; padding-right: 0; }
  /* moments grid: a long video label wraps inside the tile instead of running to its edge */
  body:has(> #destinationModal) main .grid.grid-cols-2 > div > .absolute.bottom-2.left-2 { max-width: calc(100% - 16px); }
  /* tour cards: a long highlight line wraps instead of ending in "..." */
  body:has(> #destinationModal) main .tour-grid ul > li { display: flex !important; align-items: baseline; gap: 4px; white-space: normal; overflow: visible; }
}
/* long stacks of similar cards (tours, hotels, places) become one swipe row, the next card peeks in.
   Not under 360px: a swipe card would be too narrow there for the four icon labels, so the cards stay stacked. */
@media screen and (min-width: 360px) and (max-width: 639.98px) {
  body:has(> #destinationModal) main .tour-grid, body:has(> #destinationModal) main .grid.grid-cols-1.gap-6[class~="xl:grid-cols-4"] {
    display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: -16px; margin-right: -16px; padding: 4px 16px 14px; scroll-padding: 0 16px; }
  body:has(> #destinationModal) main .tour-grid::-webkit-scrollbar, body:has(> #destinationModal) main .grid.grid-cols-1.gap-6[class~="xl:grid-cols-4"]::-webkit-scrollbar { display: none; }
  body:has(> #destinationModal) main .tour-grid > *, body:has(> #destinationModal) main .grid.grid-cols-1.gap-6[class~="xl:grid-cols-4"] > * { flex: 0 0 84%; height: auto; scroll-snap-align: start; transform: none !important; opacity: 1 !important; }
}
@media screen and (min-width: 360px) and (max-width: 379.98px) {
  body:has(> #destinationModal) main .tour-grid > *, body:has(> #destinationModal) main .grid.grid-cols-1.gap-6[class~="xl:grid-cols-4"] > * { flex-basis: 88%; }
}
@media screen and (min-width: 520px) and (max-width: 639.98px) {
  body:has(> #destinationModal) main .tour-grid > *, body:has(> #destinationModal) main .grid.grid-cols-1.gap-6[class~="xl:grid-cols-4"] > * { flex-basis: 60%; }
}
/* under 360px: the hotel and place cards have no icon labels, so their rows swipe here too (253px cards, the next one
   peeks in); stacked, they made the page 3600px longer. Only the tour cards stay one under the other. */
@media screen and (max-width: 359.98px) {
  body:has(> #destinationModal) main .grid.grid-cols-1.gap-6[class~="xl:grid-cols-4"]:not(.tour-grid) {
    display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: -16px; margin-right: -16px; padding: 4px 16px 14px; scroll-padding: 0 16px; }
  body:has(> #destinationModal) main .grid.grid-cols-1.gap-6[class~="xl:grid-cols-4"]:not(.tour-grid)::-webkit-scrollbar { display: none; }
  body:has(> #destinationModal) main .grid.grid-cols-1.gap-6[class~="xl:grid-cols-4"]:not(.tour-grid) > * { flex: 0 0 88%; height: auto; scroll-snap-align: start; transform: none !important; opacity: 1 !important; }
}
/* 480 to 639 (small tablets, unfolded phones): the hero took the whole screen height, 960px of photo on a 600 x 960
   screen with the title in the top 170px. It stops at 560px; phones under 480px keep the full-screen photo. */
@media screen and (min-width: 480px) and (max-width: 639.98px) {
  body:has(> #destinationModal) main > .min-h-svh { min-height: min(100svh, 560px); }
}
@media screen and (max-width: 479.98px) {
  /* breadcrumb: a little tighter, and a long place name moves to a second centred line instead of running off both screen edges */
  body:has(> #destinationModal) main > .min-h-svh .tracking-widest.uppercase { flex-wrap: wrap; column-gap: 5px; row-gap: 0; letter-spacing: .07em; }
  /* section eyebrow: the side rules shrink first, so the label stays on one line */
  body:has(> #destinationModal) main .text-center > .flex.items-center.justify-center.mb-3 > span[class~="h-[1px]"] { flex: 1 1 0; min-width: 12px; max-width: 40px; }
}
@media screen and (max-width: 429.98px) {
  /* Experience / Duration buttons: they could not shrink, so the second one ran off the screen (at 320 always, up to 429 once a filter count badge shows).
     The round icon makes room for the count badge; the button keeps its height */
  body:has(> #destinationModal) main .flex.items-center.gap-3[class~="lg:hidden"] > button { min-width: 0; min-height: 66px; padding-left: 8px; padding-right: 8px; gap: 6px; }
  body:has(> #destinationModal) main .flex.items-center.gap-3[class~="lg:hidden"] > button:has(> span:not(.hidden)) > div { display: none; }
}
@media screen and (max-width: 389.98px) {
  /* narrow phones: less air around the eyebrow label, so it stays on one line */
  body:has(> #destinationModal) main .text-center > .flex.items-center.justify-center.mb-3 > span.tracking-widest { margin-left: 10px; margin-right: 10px; }
  body:has(> #destinationModal) main .flex.items-center.gap-3[class~="lg:hidden"] > button { min-height: 60px; }
  body:has(> #destinationModal) main .flex.items-center.gap-3[class~="lg:hidden"] > button > div { width: 30px; height: 30px; }
}
@media screen and (max-width: 359.98px) {
  body:has(> #destinationModal) main .text-center > .flex.items-center.justify-center.mb-3 > span.tracking-widest { letter-spacing: .1em !important; }
}
@media screen and (max-width: 339.98px) {
  body:has(> #destinationModal) main .flex.items-center.gap-3[class~="lg:hidden"] > button { font-size: 12px !important; min-height: 56px; gap: 5px; padding-left: 6px; padding-right: 6px; }
  body:has(> #destinationModal) main .flex.items-center.gap-3[class~="lg:hidden"] > button > div { width: 26px; height: 26px; }
  /* enquiry form: the "Mobile / WhatsApp Number" hint was cut */
  body:has(> #destinationModal) main .contcat-form-section .grid > .bg-white { padding-left: 18px; padding-right: 18px; }
  body:has(> #destinationModal) main .contcat-form-section form input, body:has(> #destinationModal) main .contcat-form-section form textarea { padding-left: 12px; padding-right: 12px; }
}

/* ===================== index page /destinations/ ===================== */
@media screen and (max-width: 359.98px) {
  /* 138px wide cards: the place name fits its card and "VIEW PACKAGES" stays on one line */
  main:has(> #wildlife.bj-section) .bj-dest-txt { left: 10px; right: 10px; }
  main:has(> #wildlife.bj-section) .bj-dest-txt strong { font-size: 18px; }
  main:has(> #wildlife.bj-section) .bj-dest-txt span { letter-spacing: 0; gap: 4px; }
}
@media screen and (min-width: 520px) and (max-width: 639.98px) {
  /* large phones: the tall 3:4 cards (278 x 370 at 600) become the same 4:3 cards as from 640 up */
  main:has(> #wildlife.bj-section) .bj-grid--2m .bj-dest { aspect-ratio: 4 / 3; }
}

/* ---------- designer-dest: laptops, desktops and big monitors (1024px and up) ---------- */
/* designer-dest.large.css : designer destination pages (/destinations/ and the 23 pages under it), screens 1024px and wider.
   Appended after css/style.css, before tailwind.css. Every rule sits inside "screen and (min-width: 1024px ...)".
   Scope hooks (no body class on these pages):
     main:has(> #wildlife)              the /destinations/ index (the only page with section#wildlife)
     body:has(> #destinationModal)      the 23 destination pages (the only pages with that modal as a child of body) */

/* ---------- all large screens ---------- */
@media screen and (min-width: 1024px) {
  /* index: the photo tiles are marked up for three columns (.bj-grid--3), but the two-column phone rule (.bj-grid--2m)
     comes later in style.css and won, so desktop showed two tiles a row, 470 to 742px wide, with 299px photos blown up
     2.5 times and a page of 7500 to 9500px. Three a row; a short last row (1 or 2 tiles) is centred. */
  main:has(> #wildlife) .bj-grid--2m.bj-grid--3 { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
  main:has(> #wildlife) .bj-grid--2m.bj-grid--3 > .bj-dest { flex: 0 0 calc((100% - 40px) / 3); }
  /* a group of exactly four tiles (Pilgrimage) is shown two and two, same tile size, instead of three and one */
  main:has(> #wildlife) .bj-grid--2m.bj-grid--3:has(> :nth-child(4):last-child) { padding-left: calc((100% - 40px) / 6 + 10px); padding-right: calc((100% - 40px) / 6 + 10px); }
  main:has(> #wildlife) .bj-grid--2m.bj-grid--3:has(> :nth-child(4):last-child) > .bj-dest { flex-basis: calc((100% - 20px) / 2); }

  /* section headings that take two lines left one word alone on the second line ("... Through Our Guests' / Eyes").
     The dark call-to-action band at the end of main belongs to the shell and is left out. */
  body:has(> #destinationModal) main > :not(.bg-slate-900) h2.font-cormorant { text-wrap: balance; }

  /* guest review cards without a star row: the review starts at the top of the card, where the decorative quote mark
     sits, and the mark covered the end of the first lines. The text now flows around the mark. */
  body:has(> #destinationModal) #testimonials .testi-slide > div > div:first-of-type:not(:has(> .bj-stars)) > p::before { content: ""; float: right; width: 30px; height: 36px; }

  /* price table (Ujjain): the table had a fixed least width of 1000px in a 651 to 992px column, so the Offer Price
     column (and at 1024 the Normal Price too) was hidden behind a sideways scroll. It now takes the width of its box. */
  body:has(> #destinationModal) .table-scroll-x > table { min-width: 0; }

  /* enquiry block: the form is shorter than the photo panel beside it; centre it instead of leaving a hole under it */
  body:has(> #destinationModal) .contcat-form-section .grid.items-stretch > .bg-white { display: flex; flex-direction: column; justify-content: center; }

  /* "Cost & Price" (Ujjain): the Read More fade ran to a paler cream than the sand section behind it and showed as a
     hard-edged box wider than the text. It now fades to the section's own colour. */
  body:has(> #destinationModal) #costPriceFade { background-image: linear-gradient(to top, #F4EBDD, rgba(244, 235, 221, 0)); }

  /* "Best Time to Visit" card (Ujjain): the gold rule with the diamond sat right under the heading and the diamond
     touched the letters. 5px of air above it, taken from the space below, so the card's rows stay where they were. */
  body:has(> #destinationModal) main h3 + div[class~="bg-[#ED4409]"] { margin-top: 5px; margin-bottom: 15px; }
}

/* ---------- 1024 to 1199: sections without their own side padding ---------- */
@media screen and (min-width: 1024px) and (max-width: 1199.98px) {
  /* containers without "px-4" (tour grids, photo moments, Cost & Price) had 32px at the sides, their neighbours 16px, so
     the card grids of one page started at two different left edges. All 16px here, as style.css makes them from 1200 up.
     The hero and the dark call-to-action band are not sections and stay as they are. */
  body:has(> #destinationModal) main > :is(section, #costPriceSection) > .container { padding-left: 16px; padding-right: 16px; }
}

/* ---------- 1024 to 1279: the narrowest desktop layout (content is 960 to 992px wide) ---------- */
@media screen and (min-width: 1024px) and (max-width: 1279.98px) {
  /* hero with an intro line under the title (Ujjain): the banner height is fixed at 5/12 of the width (427px at 1024),
     the text block needs 352px plus 136px of padding, so the button ended 10px above the bottom edge. Here the same
     5/12 is the least height and the banner grows with its text (488px at 1024, unchanged from about 1180 up). */
  body:has(> #destinationModal) main > div[class~="lg:aspect-[12/5]"]:has(h1 + p) { aspect-ratio: auto; min-height: 41.667vw; }

  /* price table: beside a 4/12 photo it had 651px. Narrower photo (236px), tighter cells, smaller thumbnails: all five
     columns show, and the header keeps its four small icons with every heading on one line. */
  body:has(> #destinationModal) .grid:has(> div > div > div > .table-scroll-x) { grid-template-columns: 236px minmax(0, 1fr); column-gap: 24px; }
  body:has(> #destinationModal) .grid:has(> div > div > div > .table-scroll-x) > div { grid-column: auto; }
  body:has(> #destinationModal) .table-scroll-x col:nth-child(1) { width: 36%; }
  body:has(> #destinationModal) .table-scroll-x col:nth-child(2) { width: 14%; }
  body:has(> #destinationModal) .table-scroll-x col:nth-child(3) { width: 15%; }
  body:has(> #destinationModal) .table-scroll-x col:nth-child(4) { width: 18%; }
  body:has(> #destinationModal) .table-scroll-x col:nth-child(5) { width: 17%; }
  body:has(> #destinationModal) .table-scroll-x th { padding-left: 4px; padding-right: 4px; }
  body:has(> #destinationModal) .table-scroll-x th > span { letter-spacing: .01em; }
  body:has(> #destinationModal) .table-scroll-x td { padding-left: 8px; padding-right: 8px; }
  body:has(> #destinationModal) .table-scroll-x th:first-child,
  body:has(> #destinationModal) .table-scroll-x td:first-child { padding-left: 16px; }
  body:has(> #destinationModal) .table-scroll-x td:first-child > div { gap: 12px; }
  body:has(> #destinationModal) .table-scroll-x td:first-child img { width: 72px; height: 72px; }
  body:has(> #destinationModal) .table-scroll-x td:last-child span + span { padding-left: 10px; padding-right: 10px; }

  /* enquiry block: the white form half is 496px wide. With 48px padding the phone field cut its hint
     ("Mobile / WhatsApp Num"). */
  body:has(> #destinationModal) .contcat-form-section .grid.items-stretch > .bg-white { padding-left: 32px; padding-right: 32px; }
  body:has(> #destinationModal) .contcat-form-section form > .grid { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); column-gap: 16px; }
  body:has(> #destinationModal) .contcat-form-section form input { padding-left: 12px; padding-right: 12px; }

  /* guest reviews: the arrow script moves one card plus 24px, the cards stood 16px apart, so every click left the
     row 8px further left (after four clicks the cards started 33px too far left). 24px apart, as from 1280 up. */
  body:has(> #destinationModal) #testimonials .testi-slider-track { gap: 24px; }
}

/* ---------- 1024 to 1535: enquiry block ---------- */
@media screen and (min-width: 1024px) and (max-width: 1535.98px) {
  /* the three points under the form (Quick Response, Custom Itineraries, Memories for Life) stood in three columns
     with 85 to 88px for the text: four lines of one or two words. One under the other, as on phones and as the three
     points in the photo half. The form is centred in its half, so the block keeps its height; only where the photo
     half has a one-line title (Bhopal, Kuno, Panna, Pench, Sanchi, Tamia) it grows by 45px from 1280 up. */
  body:has(> #destinationModal) .contcat-form-section form + .grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ---------- 1280 to 1535: four package cards a row, each 294px wide ---------- */
@media screen and (min-width: 1280px) and (max-width: 1535.98px) {
  /* price table: 819px for five columns. A little less for the name, more for the stay and the two price columns, so no heading and no hotel type wraps. */
  body:has(> #destinationModal) .table-scroll-x col:nth-child(1) { width: 37%; }
  body:has(> #destinationModal) .table-scroll-x col:nth-child(2) { width: 14%; }
  body:has(> #destinationModal) .table-scroll-x col:nth-child(3) { width: 15%; }
  body:has(> #destinationModal) .table-scroll-x col:nth-child(4) { width: 17%; }
  body:has(> #destinationModal) .table-scroll-x col:nth-child(5) { width: 17%; }
  body:has(> #destinationModal) .table-scroll-x th + th { padding-left: 6px; padding-right: 6px; }

  /* package cards: the four icon labels (HOTEL BREAKFAST CAB SIGHTSEEING) filled the 236px row with 3px between them
     and read as one line of text. No letter spacing and less side padding: about 14px between the labels. */
  body:has(> #destinationModal) .tour-grid .border-t.border-b { padding-left: 4px; padding-right: 4px; }
  body:has(> #destinationModal) .tour-grid .border-t.border-b span { letter-spacing: 0; }
}

/* ---------- 1536 and wider: enquiry block ---------- */
@media screen and (min-width: 1536px) {
  /* the three points under the form stand side by side here with 131px for the text; two of them ended in one word
     alone on a second line ("Mon to Sat, 11am to / 7pm", "Experiences to / cherish"). Even lines, same height. */
  body:has(> #destinationModal) .contcat-form-section form + .grid p { text-wrap: balance; }
}

/* ---------- wider than the 1536px container ---------- */
@media screen and (min-width: 1537px) {
  /* guest reviews: the card row was full screen wide (430px cards at 1920, 590px at 2560, with a slice of a fifth card
     at the screen edge) while the rest of the page sits in the 1536px column. Same column here, as on the home and
     itinerary pages (334px cards). The clip ends in the middle of the 24px gap beside the outer cards: it hides the
     sliver of the next card, which would otherwise end at a hard edge in the middle of the screen. */
  body:has(> #destinationModal) #testimonials .testi-slider-wrapper { max-width: 1536px; margin-left: auto; margin-right: auto; clip-path: inset(-40px 52px); }
}

/* ---------- wider than 1920: big monitors ---------- */
@media screen and (min-width: 1921px) {
  /* hero: its height is 5/12 of the screen width with no limit (1067px at 2560, 1600px on a 4K screen).
     It keeps the 800px it has at 1920. */
  body:has(> #destinationModal) main > div[class~="lg:aspect-[12/5]"] { aspect-ratio: auto; height: 800px; }
}

/* ---------- designer-lists: phones and tablets (up to 1023px) ---------- */
/* designer-lists.small.css : /itinerary/ and its 8 detail pages, /blogs/ and its 6 posts, /tags/ + tag pages, /categories/.
   Phones and tablets (up to 1023.98px). Scope hooks (these pages have no body class):
     itinerary list     main:has(> [class~="min-h-[380px]"])    this hero block sits directly in <main> only on /itinerary/
     itinerary detail   main:has(#readMoreContainer)              the "Read More" intro box, only on the 8 detail pages
                        (not .tl-stack: 18 of the 19 newer package pages, main.dp.ip, have a .tl-stack too)
     blog list          main:has(#blogCardsGrid)                 only /blogs/
     blog post          main:has(.blog-markdown-content)         only the 6 posts
     tags, categories   main:has(> [class~="min-h-[480px]"])    hero block of the 9 tag / category pages */

/* ===================== every small width ===================== */
@media screen and (max-width: 1023.98px) {
  /* hero breadcrumb links: a finger-sized tap area, nothing moves */
  main:has(#readMoreContainer, #blogCardsGrid, .blog-markdown-content, > [class~="min-h-[380px]"], > [class~="min-h-[480px]"]) > div:first-child .tracking-widest.uppercase > a { padding: 9px 6px; margin: -9px -6px; }
  /* "View all ..." text links under a card grid: taller tap area, same place */
  main:has(#readMoreContainer, #blogCardsGrid, .blog-markdown-content, > [class~="min-h-[480px]"]) .text-center > a.border-b-2 { padding-top: 12px !important; margin-top: -12px; }

  /* --- itinerary detail --- */
  /* FAQ: "col-span-12" inside a 1-column grid makes 11 phantom columns (11 gaps x 32px = 352px), wider than a small phone */
  main:has(#readMoreContainer) #faq .grid > [class~="col-span-12"] { grid-column: 1 / -1; min-width: 0; }
  /* payment and cancellation cards: the fixed 80px height let longer text run out of the card, top and bottom */
  main:has(#readMoreContainer) .grid > .space-y-4 > .h-20 { height: auto; min-height: 80px; padding-top: 14px; padding-bottom: 14px; }
  /* cancellation rows: the period on top, the retention under it (side by side both were squeezed into 3 or 4 lines) */
  main:has(#readMoreContainer) .grid > .space-y-4 > .h-20:has(> span) { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
  /* quote sentence: the package name was cut after about 22 letters ("Kanha Tiger Safari Exp") */
  main:has(#readMoreContainer) form[data-lead="quote"] input[name="package"] { width: 20em; max-width: calc(100% - 10px); }
  /* "Read More" under the intro: taller tap area, same place */
  main:has(#readMoreContainer) #readMoreBtn { padding: 10px 14px 10px 0; margin-top: 2px; margin-bottom: -10px; }

  /* --- tags / categories, Recommended Packages: finger-sized "Book your trip" and call buttons --- */
  main:has(> [class~="min-h-[480px]"]) .grid-cols-12 > .col-span-7 > .justify-between > button:first-child { min-height: 36px; white-space: nowrap; }
  main:has(> [class~="min-h-[480px]"]) .grid-cols-12 > .col-span-7 > .justify-between > button:last-child { width: 36px; height: 36px; flex: none; }
  /* tags / categories, filter row: the "All" button asks for an icon (fa-grid-2) that the free icon set on the page does not have,
     so it showed an empty gap before the word; the free grid icon takes its place */
  main:has(> [class~="min-h-[480px]"]) > .sticky .fa-grid-2::before { content: "\f00a"; }
}
/* guest review cards without a star row (itinerary pages): the review starts at the top of the card, where the decorative quote
   mark sits, and the first lines ended on top of the mark. The text flows round the mark, as on desktop.
   Phones up to 519px: the card is narrow enough for the text to reach the mark (from 520 to 639 it is wide enough already) */
@media screen and (max-width: 519.98px) {
  main:has(#readMoreContainer, > [class~="min-h-[380px]"]) #testimonials .testi-slide > div > div:first-of-type:not(:has(> .bj-stars)) > p::before { content: ""; float: right; width: 30px; height: 36px; }
}
/* 640 to 1023: two review cards side by side, three moments tiles a row */
@media screen and (min-width: 640px) and (max-width: 1023.98px) {
  /* review cards without a star row: same as above */
  main:has(#readMoreContainer, > [class~="min-h-[380px]"]) #testimonials .testi-slide > div > div:first-of-type:not(:has(> .bj-stars)) > p::before { content: ""; float: right; width: 30px; height: 36px; }
  /* moments gallery: ten tiles in three columns left the tenth alone at the left of a fourth row; it sits in the middle */
  main:has(#readMoreContainer, > [class~="min-h-[380px]"]) .grid.grid-cols-2[class~="sm:grid-cols-3"] > :last-child:nth-child(3n+1) { grid-column: 2; }
}

/* 640 to 767: one wide column, so a cancellation row fits on one line again */
@media screen and (min-width: 640px) and (max-width: 767.98px) {
  main:has(#readMoreContainer) .grid > .space-y-4 > .h-20:has(> span) { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  main:has(#readMoreContainer) .grid > .space-y-4 > .h-20 > span:first-child { flex: none; }
  main:has(#readMoreContainer) .grid > .space-y-4 > .h-20 > span:last-child { text-align: right; }
  /* quote: the Send button had 8px side padding next to two roomy buttons */
  main:has(#readMoreContainer) form[data-lead="quote"] > .flex.flex-wrap > button[type="submit"] { padding-left: 24px; padding-right: 24px; }
  /* blog list, recommended tours: two cards per row as on the itinerary pages (one 590px wide card cut its photo to a thin strip) */
  main:has(#blogCardsGrid) .tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* tour cards, two a row: a title that takes two lines pushed that card's icon row 22px below its neighbour's.
     The shorter title keeps the room of the longer one, so both icon rows line up */
  main:has(#readMoreContainer, > [class~="min-h-[380px]"]) .tour-grid > div h3 { flex-grow: 1; }
  main:has(#readMoreContainer) .tour-grid > div ul { flex: none; }
}
/* blog list, filter sheet: its heading and close button line up with the list below (they sat 8px from the screen edge) */
@media screen and (max-width: 767.98px) {
  main:has(#blogCardsGrid) #blogFilterSheet .sticky.top-0 { padding-left: 20px; padding-right: 16px; }
}

/* ===================== tablets ===================== */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  /* itinerary detail, FAQ photo: a 384px high band cut from the top of a portrait photo showed only leaves; show the middle */
  main:has(#readMoreContainer) #faq .grid > [class~="col-span-12"] > img { object-position: center; }
  /* tags / categories, Recommended Packages: three side-by-side cards squeezed the text into 94px. Photo on top, text under it */
  main:has(> [class~="min-h-[480px]"]) .grid > div > .grid.grid-cols-12 { display: flex; flex-direction: column; align-items: stretch; flex: 1 1 auto; }
  main:has(> [class~="min-h-[480px]"]) .grid > div > .grid.grid-cols-12 > .col-span-5 { height: 150px; flex: none; }
  /* the button row sits at the bottom of every card, so the three rows line up */
  main:has(> [class~="min-h-[480px]"]) .grid > div > .grid.grid-cols-12 > .col-span-7 { flex: 1 1 auto; display: flex; flex-direction: column; }
  main:has(> [class~="min-h-[480px]"]) .grid > div > .grid.grid-cols-12 > .col-span-7 > .justify-between { margin-top: auto; }
  /* blog post, Recommended Blogs: the third card sits centred under the first two (was alone on the left) */
  main:has(.blog-markdown-content) .grid.gap-8[class~="md:grid-cols-2"] > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 16px); }
}

/* ===================== tour cards ===================== */
@media screen and (max-width: 719.98px) {
  /* the four icon labels ran into each other ("HOTELBREAKFASTCABSIGHTSEEING") in cards narrower than about 300px */
  main:has(#readMoreContainer, #blogCardsGrid, > [class~="min-h-[380px]"]) .tour-grid > div .justify-between.border-t.border-b { padding-left: 4px; padding-right: 4px; }
  main:has(#readMoreContainer, #blogCardsGrid, > [class~="min-h-[380px]"]) .tour-grid > div .justify-between.border-t.border-b span { letter-spacing: 0; }
}

/* ===================== phones ===================== */
@media screen and (max-width: 639.98px) {
  /* hero: it already has 24px side padding, the inner container added 16px more; the title gets that room back */
  main:has(#readMoreContainer, #blogCardsGrid, .blog-markdown-content, > [class~="min-h-[380px]"], > [class~="min-h-[480px]"]) > div:first-child > .container { padding-left: 0; padding-right: 0; }
  /* hero title: the line breaks are switched off on phones and the words on both sides ran together ("PerfectTravel", "ThroughNature's") */
  main:has(> [class~="min-h-[380px]"], > [class~="min-h-[480px]"]) > div:first-child h1 > br { display: inline; }
  /* blog list hero title: same fault ("Nature'sGreatest"); a space, so the line can still fill up */
  main:has(#blogCardsGrid) > div:first-child h1 > span::before { content: " "; }
  /* moments grid: a long video label wraps inside the tile instead of running to its edge */
  main:has(#readMoreContainer, > [class~="min-h-[380px]"]) .grid.grid-cols-2 > div > .absolute.bottom-2.left-2 { max-width: calc(100% - 16px); }
  /* recommended tour cards: a long highlight line wraps instead of ending in "..." */
  main:has(#readMoreContainer, #blogCardsGrid) .tour-grid ul > li { display: flex !important; align-items: baseline; gap: 4px; white-space: normal; overflow: visible; }
  /* tags / categories, Recommended Packages: the photo fills the card height (it floated with white strips above and below) */
  main:has(> [class~="min-h-[480px]"]) .grid > div > .grid.grid-cols-12 { align-items: stretch; }
  main:has(> [class~="min-h-[480px]"]) .grid > div > .grid.grid-cols-12 > .col-span-5 { height: auto; min-height: 12rem; }
  main:has(> [class~="min-h-[480px]"]) .grid > div > .grid.grid-cols-12 > .col-span-5 > img { position: absolute; inset: 0; }
}
/* "Recommended Madhya Pradesh Tours" under an itinerary and under the blog list: the four stacked cards become one swipe row,
   the next card peeks in (same row as on the destination pages). Not under 360px: a swipe card would be too narrow for the four icon labels. */
@media screen and (min-width: 360px) and (max-width: 639.98px) {
  main:has(#readMoreContainer, #blogCardsGrid) .tour-grid {
    display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: -16px; margin-right: -16px; padding: 4px 16px 14px; scroll-padding: 0 16px; }
  main:has(#readMoreContainer, #blogCardsGrid) .tour-grid::-webkit-scrollbar { display: none; }
  main:has(#readMoreContainer, #blogCardsGrid) .tour-grid > * { flex: 0 0 84%; height: auto; scroll-snap-align: start; transform: none !important; opacity: 1 !important; }
}
@media screen and (min-width: 360px) and (max-width: 379.98px) {
  main:has(#readMoreContainer, #blogCardsGrid) .tour-grid > * { flex-basis: 88%; }
}
@media screen and (min-width: 520px) and (max-width: 639.98px) {
  main:has(#readMoreContainer, #blogCardsGrid) .tour-grid > * { flex-basis: 60%; }
}
@media screen and (max-width: 479.98px) {
  /* itinerary detail breadcrumb: four steps ran off both screen edges; the last step moves to a second centred line.
     Blog posts get the same safety net for a long category name (nothing changes while the line fits) */
  main:has(#readMoreContainer, .blog-markdown-content) > div:first-child .tracking-widest.uppercase { flex-wrap: wrap; row-gap: 0; }
  main:has(#readMoreContainer) > div:first-child .tracking-widest.uppercase { column-gap: 5px; letter-spacing: .07em; }
  /* section eyebrow: the side rules shrink first, so the label stays on one line */
  main:has(#readMoreContainer, #blogCardsGrid, .blog-markdown-content, > [class~="min-h-[380px]"]) .text-center > .flex.items-center.justify-center.mb-3 > span[class~="h-[1px]"] { flex: 1 1 0; min-width: 12px; max-width: 40px; }
}
@media screen and (max-width: 419.98px) {
  /* quote buttons: Send on its own row, Share and PDF share the next one (PDF was left alone on a second row) */
  main:has(#readMoreContainer) form[data-lead="quote"] > .flex.flex-wrap > button[type="submit"] { flex: 1 0 100%; }
  main:has(#readMoreContainer) form[data-lead="quote"] > .flex.flex-wrap > button[type="button"] { flex: 1 1 0; justify-content: center; }
}
@media screen and (max-width: 389.98px) {
  /* blog post and tag pages, hero button: slimmer side padding keeps "YOUR NEXT ADVENTURE AWAITS" on one line */
  main:has(.blog-markdown-content, > [class~="min-h-[480px]"]) > div:first-child button.banner-btn-bg { padding-left: 20px; padding-right: 20px; }
  /* narrow phones: less air around the eyebrow label, so it stays on one line */
  main:has(#readMoreContainer, #blogCardsGrid, .blog-markdown-content, > [class~="min-h-[380px]"]) .text-center > .flex.items-center.justify-center.mb-3 > span.tracking-widest { margin-left: 10px; margin-right: 10px; }
  /* tags / categories, Recommended Packages: room for "BOOK YOUR TRIP" on one line next to the call button */
  main:has(> [class~="min-h-[480px]"]) .grid-cols-12 > .col-span-7 { padding-left: 12px; padding-right: 12px; }
  main:has(> [class~="min-h-[480px]"]) .grid-cols-12 > .col-span-7 > .justify-between > button:first-child { padding-left: 8px; padding-right: 8px; letter-spacing: .02em; }
}
@media screen and (max-width: 359.98px) {
  /* eyebrow label: normal letter spacing (style.css forces .2em), so "FREQUENTLY ASKED QUESTIONS" still fits one line */
  main:has(#readMoreContainer, #blogCardsGrid, .blog-markdown-content, > [class~="min-h-[380px]"]) .text-center > .flex.items-center.justify-center.mb-3 > span.tracking-widest { letter-spacing: .1em !important; }
  /* tags / categories, Recommended Packages: a slimmer photo column, so both buttons stay inside the card */
  main:has(> [class~="min-h-[480px]"]) .grid > div > .grid.grid-cols-12 { grid-template-columns: 38% minmax(0, 1fr); }
  main:has(> [class~="min-h-[480px]"]) .grid > div > .grid.grid-cols-12 > div { grid-column: auto; }
  main:has(> [class~="min-h-[480px]"]) .grid-cols-12 > .col-span-7 > .justify-between > button:first-child { padding-left: 6px; padding-right: 6px; letter-spacing: 0; }
  /* blog list: the "Search stories..." hint was cut ("Search stor") */
  main:has(#blogCardsGrid) #blogFilterBtn { padding-left: 12px; padding-right: 12px; }
  main:has(#blogCardsGrid) div:has(> #blogFilterBtn) { padding-left: 12px; padding-right: 12px; gap: 10px; }
  main:has(#blogCardsGrid) #blogSearchMobile { padding-left: 34px; padding-right: 8px; }
  main:has(#blogCardsGrid) #blogSearchMobile + i { left: 12px; }
}
@media screen and (max-width: 339.98px) {
  /* hero button, 320px phones: one line needs a little less padding still */
  main:has(.blog-markdown-content, > [class~="min-h-[480px]"]) > div:first-child button.banner-btn-bg { padding-left: 14px; padding-right: 14px; letter-spacing: .01em; }
  /* quote sentence: the longest package name ("Mahakaleshwar & Mandu Heritage Tour", 301px at 16px) fits its 278px line.
     !important because style.css forces 16px on every phone input; this field is pre-filled, so it is rarely tapped */
  main:has(#readMoreContainer) form[data-lead="quote"] input[name="package"] { font-size: 14.5px !important; max-width: calc(100% - 7px); }
  /* enquiry form: the "Mobile / WhatsApp Number" hint was cut */
  main:has(#readMoreContainer, > [class~="min-h-[380px]"]) .contcat-form-section .grid > .bg-white { padding-left: 18px; padding-right: 18px; }
  main:has(#readMoreContainer, > [class~="min-h-[380px]"]) .contcat-form-section form input, main:has(#readMoreContainer, > [class~="min-h-[380px]"]) .contcat-form-section form textarea { padding-left: 12px; padding-right: 12px; }
}

/* ---------- designer-lists: laptops, desktops and big monitors (1024px and up) ---------- */
/* designer-lists.large.css : designer list and detail pages (/itinerary/ + 8 detail pages, /blogs/ + 6 posts, /tags/ + tag pages,
   /categories/), screens 1024px and wider. Appended after css/style.css, before tailwind.css.
   Every rule sits inside "screen and (min-width: 1024px ...)".
   Scope hooks (no body class on these pages):
     body:not(:has(> #destinationModal)) main:has(> #instagramReelModal)   the 9 itinerary pages (list + detail)
     main:has(#readMoreContainer)          the 8 itinerary detail pages
     main:has(#blogCardsGrid)              /blogs/
     main:has(.blog-markdown-content)      the 6 blog posts
     main:has(> .sticky.top-20)            /tags/, the tag pages and /categories/ */

/* ---------- all large screens ---------- */
@media screen and (min-width: 1024px) {
  /* section headings that take two lines left one word alone on the second line ("... Through Our Guests' / Eyes").
     The dark call-to-action band at the end of main belongs to the shell and is left out. */
  body:not(:has(> #destinationModal)) main:has(> #instagramReelModal) > :not(.bg-slate-900) h2.font-cormorant,
  main:has(#readMoreContainer) #pkgIntroContent > h2 { text-wrap: balance; }

  /* guest review cards without a star row: the review starts at the top of the card, where the decorative quote mark
     sits, and the mark covered the end of the first lines. The text now flows around the mark. */
  body:not(:has(> #destinationModal)) main:has(> #instagramReelModal) #testimonials .testi-slide > div > div:first-of-type:not(:has(> .bj-stars)) > p::before { content: ""; float: right; width: 30px; height: 36px; }

  /* enquiry block: the form is shorter than the photo panel beside it; centre it instead of leaving a hole under it */
  body:not(:has(> #destinationModal)) main:has(> #instagramReelModal) .contcat-form-section .grid.items-stretch > .bg-white { display: flex; flex-direction: column; justify-content: center; }

  /* cancellation rows: the box is 80px high and both texts could shrink, so a long note ("100% Retention (Safari permits
     are ...)") squeezed "Within 14 days of travel" into two or three lines and at 1024 the text ran out of the box.
     The term keeps one line, the note wraps right aligned, the box grows only when it has to. */
  main:has(#readMoreContainer) .h-20.border-l-4:has(> span + span) { height: auto; min-height: 5rem; padding-top: 12px; padding-bottom: 12px; column-gap: 20px; }
  main:has(#readMoreContainer) .h-20.border-l-4 > span:first-child { flex: 0 0 auto; }
  main:has(#readMoreContainer) .h-20.border-l-4 > span + span { text-align: right; }

  /* quote sentence: the tour name sits in a 192px field and was cut off ("Kanha Tiger Safari Exp"). The field takes the
     width of its text where the browser can do that, and is at least 300px everywhere else. */
  main:has(#readMoreContainer) form[data-lead="quote"] input[name="package"] { width: auto; min-width: 300px; max-width: 100%; field-sizing: content; }
  /* the one name that needs more than 300px ("Mahakaleshwar & Mandu Heritage Tour", 339px) was still cut by four letters
     in browsers that cannot size a field by its text (Firefox, older Safari): 20em (360px) for it, as on phones and
     tablets. Not 20em for every name: from 1024 to 1279 a 360px field no longer fits beside "and I want to inquire
     about", so the sentence on the other seven pages would take a fourth line. */
  main:has(#readMoreContainer) form[data-lead="quote"] input[name="package"][value^="Mahakaleshwar & Mandu"] { min-width: 20em; }

  /* tag pages, filter row: the "All" button asks for an icon (fa-grid-2) that the free icon set on the page does not
     have, so it showed an empty gap before the word; the free grid icon takes its place */
  main:has(> .sticky.top-20) > .sticky .fa-grid-2::before { content: "\f00a"; }
}

/* ---------- 1024 to 1279: the narrowest desktop layout (content is 960 to 992px wide) ---------- */
@media screen and (min-width: 1024px) and (max-width: 1279.98px) {
  /* /blogs/ hero: the banner height is fixed at 5/12 of the width (427px at 1024) but the text block needs 436px:
     the path line touched the header and the button was cut off at the bottom. The same 5/12 is now the least height
     and the banner grows with its text (532px), unchanged from 1280 up. */
  main:has(#blogCardsGrid) > div[class~="lg:aspect-[12/5]"] { aspect-ratio: auto; min-height: 41.667vw; padding-top: 48px; padding-bottom: 48px; }

  /* blog post hero: the title had 3/4 of the row (648px at 1024); a long title took four 90px lines and the banner
     (684px) filled the whole first screen. 9/10 of the row: three lines at most, the banner is 612px or less.
     Even line lengths, so the wider row does not leave one short word alone at a line end. */
  main:has(.blog-markdown-content) > div[class~="xl:aspect-[12/5]"] h1 { width: 90%; text-wrap: balance; }

  /* itinerary overview: the three fact boxes had 111px for their text, so "BMP-KAN-001", "5 Days / 4 Nights" and
     "PRICE PER HEAD" each broke into two lines. Wider text column, narrower photo: every box is one line again. */
  main:has(#readMoreContainer) div:has(> div > #readMoreContainer) { column-gap: 40px; }
  main:has(#readMoreContainer) div:has(> #readMoreContainer) { width: 56%; }
  main:has(#readMoreContainer) div:has(> #readMoreContainer) + div { width: 40%; }

  /* cancellation rows: beside the term a long note had 213px and took four lines; it goes under the term instead */
  main:has(#readMoreContainer) .h-20.border-l-4:has(> span + span) { flex-wrap: wrap; row-gap: 2px; }
  main:has(#readMoreContainer) .h-20.border-l-4 > span + span { text-align: left; }

  /* /blogs/ filter box: the six tick boxes wrapped as 4 + 2 with the second row starting under the "Filter by" label.
     Label on the left, the boxes in three even columns. */
  main:has(#blogCardsGrid) #desktopBlogFilters { display: grid; grid-template-columns: auto repeat(3, auto); justify-content: start; }
  main:has(#blogCardsGrid) #desktopBlogFilters > span:first-child { grid-row: span 2; }

  /* reviews: the arrows move by card + 24px, so the gap has to be 24px or the cards drift */
  body:not(:has(> #destinationModal)) main:has(> #instagramReelModal) #testimonials .testi-slider-track { gap: 24px; }

  /* enquiry block: the white form half is 496px wide. With 48px padding the three points under the form had 117px each
     and their text ran out of the box; the phone field cut its hint ("Mobile / WhatsApp Num"). */
  body:not(:has(> #destinationModal)) main:has(> #instagramReelModal) .contcat-form-section .grid.items-stretch > .bg-white { padding-left: 32px; padding-right: 32px; }
  body:not(:has(> #destinationModal)) main:has(> #instagramReelModal) .contcat-form-section form + .grid { gap: 14px; }
  body:not(:has(> #destinationModal)) main:has(> #instagramReelModal) .contcat-form-section form + .grid > div { gap: 10px; }
  body:not(:has(> #destinationModal)) main:has(> #instagramReelModal) .contcat-form-section form > .grid { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); column-gap: 16px; }
  body:not(:has(> #destinationModal)) main:has(> #instagramReelModal) .contcat-form-section form input { padding-left: 12px; padding-right: 12px; }

  /* tag pages, filter row: six buttons need 810px, the row has 688px, so the last button hid behind the search box
     (the row scrolls sideways without a scrollbar). Tighter buttons and a narrower search box: all six show. */
  main:has(> .sticky.top-20) > .sticky .overflow-x-auto { gap: 8px; }
  main:has(> .sticky.top-20) > .sticky .overflow-x-auto > button { padding-left: 11px; padding-right: 11px; }
  main:has(> .sticky.top-20) > .sticky .overflow-x-auto + div { width: 208px; }

  /* tag pages, recommended packages: three side by side cards of 299px left 143px for the text (place name over two
     lines, "BOOK YOUR TRIP" over two lines). Photo on top, text below, as the story cards above them. */
  main:has(> .sticky.top-20) .grid.grid-cols-12 { grid-template-columns: minmax(0, 1fr); }
  main:has(> .sticky.top-20) .grid.grid-cols-12 > div { grid-column: auto; }
  main:has(> .sticky.top-20) .grid.grid-cols-12 > .col-span-5 { height: 176px; }
}

/* ---------- 1280 and wider ---------- */
@media screen and (min-width: 1280px) {
  /* blog post hero: its least height (550px) is turned into a least width of 1320px by the 12:5 ratio, so from 1280
     to 1319 the banner was wider than the screen and the page scrolled sideways */
  main:has(.blog-markdown-content) > div[class~="xl:aspect-[12/5]"] { max-width: 100%; }

  /* blog post: the article ran the full 1248 to 1504px (154 to 190 characters a line). The author box and the
     article sit in a centred 960px column (928px of text, under 120 characters a line), close to what a small
     laptop shows. */
  main:has(.blog-markdown-content) > div:not(:first-child):has(+ div .blog-markdown-content) > .container,
  main:has(.blog-markdown-content) > div > .container:has(> .blog-markdown-content) { max-width: 960px; }

  /* day plan: day descriptions ran up to 1082px wide (about 155 characters a line) */
  main:has(#readMoreContainer) .tl-stack-body p.leading-relaxed { max-width: 52rem; }
}

/* ---------- 1280 to 1535: four package cards a row, each 294px wide ---------- */
@media screen and (min-width: 1280px) and (max-width: 1535.98px) {
  /* package cards: the four icon labels (HOTEL BREAKFAST CAB SIGHTSEEING) filled the 236px row with 3px between them
     and read as one line of text. No letter spacing and less side padding: about 14px between the labels. */
  body:not(:has(> #destinationModal)) main:has(> #instagramReelModal) .tour-grid .border-t.border-b { padding-left: 4px; padding-right: 4px; }
  body:not(:has(> #destinationModal)) main:has(> #instagramReelModal) .tour-grid .border-t.border-b span { letter-spacing: 0; }

  /* package cards: "Mahakaleshwar & Mandu Heritage Tour" takes two lines in a 294px card, so that card's icon row sat
     22px below the other three in its row. A one-line title keeps the room of the two-line one beside it (nothing
     changes in a row where every title has one line), so the four icon rows line up. */
  body:not(:has(> #destinationModal)) main:has(> #instagramReelModal) .tour-grid > div h3 { flex-grow: 1; }
  main:has(#readMoreContainer) .tour-grid > div ul { flex: none; }

  /* blog post hero: the title had 715px (3/5 of the row), a long title took four lines and the text block filled the
     550px banner to 21px from its edges. 3/4 of the row (the title's own limit is 896px): one line less. */
  main:has(.blog-markdown-content) > div[class~="xl:aspect-[12/5]"] h1 { width: 75%; }
}

/* ---------- wider than the 1536px container ---------- */
@media screen and (min-width: 1537px) {
  /* reviews: the card row was full screen wide (590px cards at 2560); keep it in the same 1536px column as the page.
     The clip ends in the middle of the 24px gap beside the outer cards: it hides the sliver of the next card, which
     would otherwise end at a hard edge in the middle of the screen. */
  body:not(:has(> #destinationModal)) main:has(> #instagramReelModal) #testimonials .testi-slider-wrapper { max-width: 1536px; margin-left: auto; margin-right: auto; clip-path: inset(-40px 52px); }
}

/* ---------- wider than 1920: big monitors ---------- */
@media screen and (min-width: 1921px) {
  /* heroes: the height is 5/12 of the screen width with no limit (1067px at 2560, 1600px on a 4K screen).
     They keep the 800px they have at 1920. */
  main:has(#readMoreContainer) > div[class~="lg:aspect-[12/5]"],
  main:has(#blogCardsGrid) > div[class~="lg:aspect-[12/5]"],
  main:has(.blog-markdown-content) > div[class~="xl:aspect-[12/5]"] { aspect-ratio: auto; height: 800px; }
}

/* ---------- static: phones and tablets (up to 1023px) ---------- */
/* static.small.css : /about-us/, /contact-us/, /testimonials/, the three policy pages and /thank-you/, phones and tablets (up to 1023.98px).
   Scope hooks (these pages have no body class):
     about-us      main.overflow-x-clip                         (only /about-us/ has this class on <main>)
     contact-us    main:has(iframe[src*="google.com/maps"])     (the office map; the home page has the same map but no <main>)
     testimonials  #testimonialsSection, and its hero  body:has(> #testimonialsSection) > section:first-of-type
     policy pages  main:has(.bj-updated)                        (the "Last updated" line exists only on the three policy pages)
     thank-you     main:has(#bjThanksName) */

/* ===================== every small width ===================== */
@media screen and (max-width: 1023.98px) {
  /* hero breadcrumb: the HOME link gets a finger-sized tap area, nothing moves */
  main.overflow-x-clip > div:first-child .uppercase > a,
  main:has(iframe[src*="google.com/maps"]) > div:first-child .uppercase > a,
  body:has(> #testimonialsSection) > section:first-of-type .uppercase > a,
  main:has(.bj-updated) .bj-page-hero .bj-crumb a { padding: 9px 6px; margin: -9px -6px; }
  /* phone and email links people tap to call or write: taller tap area, same place on the page */
  main.overflow-x-clip .bj-prose td > a { display: inline-block; padding: 7px 0; margin: -7px 0; }
  main:has(iframe[src*="google.com/maps"]) .flex.items-start.gap-4 > div > p > a { display: inline-block; padding: 5px 0; margin: -5px 0; }
  /* titles and short centred lines: lines of even length, no single word left alone on the last line ("... Named After Banjari / Mata") */
  main.overflow-x-clip > div:first-child h1,
  main.overflow-x-clip .bj-section .text-center > h2,
  main.overflow-x-clip .bj-section .text-center > p,
  main.overflow-x-clip .bj-section p.text-center,
  main:has(iframe[src*="google.com/maps"]) > .py-10 .text-center > h2,
  body:has(> #testimonialsSection) > section:first-of-type h1,
  #testimonialsSection .text-center > p,
  main:has(.bj-updated) .bj-page-hero h1,
  main:has(.bj-updated) .bj-page-hero p,
  main:has(.bj-updated) .bj-prose h2,
  main:has(#bjThanksName) .bj-page-hero p,
  main:has(#bjThanksName) .bj-section p.text-center { text-wrap: balance; }
  /* about, first photo tile: the picture file has a black row on its top edge. The picture is enlarged from its bottom edge, so the row
     (and a part of the white sky) falls outside the tile; the hover zoom keeps its 4% step */
  main.overflow-x-clip .bj-grid--4 > .bj-dest:first-child img { transform: scale(1.22); transform-origin: 50% 100%; }
  main.overflow-x-clip .bj-grid--4 > .bj-dest:first-child:hover img { transform: scale(1.27); }
  /* contact, map card: the GET DIRECTIONS button was 33px high; now 41px for a finger */
  main:has(iframe[src*="google.com/maps"]) .absolute.bottom-5 > a { padding-top: 12px; padding-bottom: 12px; }
  /* policy pages: the phone number stays in one piece ("75875 33 / 222" broke over two lines) */
  main:has(.bj-updated) .bj-prose a[href^="tel:"] { white-space: nowrap; }
}

/* ===================== tablets ===================== */
@media screen and (min-width: 640px) and (max-width: 1023.98px) {
  /* three cards in a two-column grid left a hole beside the third card: the third card takes the whole row */
  main.overflow-x-clip .bj-grid--3 > :last-child:nth-child(odd),
  main:has(#bjThanksName) .bj-grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* contact card: address, phone, hours and email were 13px here (15px on phones) */
  main:has(iframe[src*="google.com/maps"]) .flex.items-start.gap-4 > div > p { font-size: 15px !important; line-height: 1.6 !important; }
  /* reviews: from 768 three 229px columns squeezed the text and the desktop scroll effect held the outer columns 300px lower, over the
     VIEW ALL link; from 640 to 767 it was one column of 592px wide cards holding one-line reviews. Every tablet gets two even columns
     that all cards flow into, with no scroll effect (as on phones). The three rules have no :has(), so old browsers get all of them together */
  #testimonialsSection .container > .grid.items-start { display: block; column-count: 2; column-gap: 16px; }
  #testimonialsSection .container > .grid.items-start > .col-anim { display: contents; }
  #testimonialsSection .container > .grid.items-start > .col-anim > .masonry-card { break-inside: avoid; margin: 0 0 16px; }
}
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  /* contact card: the four details sat in one narrow stack with the right half of the card empty; now two by two */
  main:has(iframe[src*="google.com/maps"]) .grid > .space-y-6:has(> .flex.items-start.gap-4) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; }
  main:has(iframe[src*="google.com/maps"]) .grid > .space-y-6:has(> .flex.items-start.gap-4) > * { margin-top: 0; margin-bottom: 0; }
  main:has(iframe[src*="google.com/maps"]) .grid > .space-y-6:has(> .flex.items-start.gap-4) > h3 { grid-column: 1 / -1; }
}
@media screen and (min-width: 900px) and (max-width: 1023.98px) {
  /* four fact cards in one row were too narrow here ("Since / 2012", "MP / Tourism" broke in two): keep the two by two block of smaller tablets */
  main.overflow-x-clip .bj-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  main.overflow-x-clip .bj-fact strong { font-size: 30px; }
}

/* ===================== phones ===================== */
@media screen and (max-width: 639.98px) {
  /* policy and thank-you hero: the small label above the title is back at its 12px size (the 15px phone text floor had enlarged it, so long page names broke in two) */
  main:has(.bj-updated) .bj-page-hero .bj-crumb,
  main:has(#bjThanksName) .bj-page-hero .bj-crumb { font-size: 12px !important; line-height: 1.6 !important; letter-spacing: .14em; }
}
@media screen and (min-width: 480px) and (max-width: 639.98px) {
  /* about, "Four Ways to See Madhya Pradesh" on large phones and small tablets: one 450 to 570px wide photo per row made 1,400 to
     1,750px of photos. Two square tiles a row, the tile size the same text already has at 1024 */
  main.overflow-x-clip .bj-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  main.overflow-x-clip .bj-grid--4 > .bj-dest { aspect-ratio: 1 / 1; }
}
@media screen and (max-width: 479.98px) {
  /* section eyebrow: the side rules shrink first, so the label stays on one line */
  main.overflow-x-clip .bj-section .text-center > .flex.items-center.justify-center.mb-3 > span[class~="h-[1px]"],
  main:has(iframe[src*="google.com/maps"]) > .py-10 .text-center > .flex.items-center.justify-center.mb-3 > span[class~="h-[1px]"],
  #testimonialsSection .text-center > .flex.items-center.justify-center.mb-3 > span[class~="h-[1px]"],
  main:has(#bjThanksName) .bj-section .text-center > .flex.items-center.justify-center.mb-3 > span[class~="h-[1px]"] { flex: 1 1 0; min-width: 12px; max-width: 40px; }
  /* about, fact cards: "MP Tourism" broke in two up to 412px, "Since 2012" up to 375, "Pvt. Ltd." at 320, beside one-line neighbours.
     A little less side padding and a number size that follows the card width (21.5px at 320, the full 30px from 411) keep all four on one line */
  main.overflow-x-clip .bj-fact { padding-left: 8px; padding-right: 8px; }
  main.overflow-x-clip .bj-fact strong { font-size: clamp(21px, calc(9.4vw - 8.6px), 30px); }
}
@media screen and (max-width: 429.98px) {
  /* company details table: it was wider than the screen (cut by 48px at 320, 8px at 360) because the CIN and the email cannot break,
     and from 390 to 399 the email had only 7px to spare. On phones each row becomes label above value, so both stay in one piece */
  main.overflow-x-clip .bj-prose table, main.overflow-x-clip .bj-prose tbody, main.overflow-x-clip .bj-prose tr, main.overflow-x-clip .bj-prose th, main.overflow-x-clip .bj-prose td { display: block; }
  main.overflow-x-clip .bj-prose tr { border: 1px solid var(--bj-line); border-bottom: 0; }
  main.overflow-x-clip .bj-prose tr:last-child { border-bottom: 1px solid var(--bj-line); }
  main.overflow-x-clip .bj-prose th { border: 0; padding: 7px 12px; }
  main.overflow-x-clip .bj-prose td { border: 0; padding: 9px 12px 11px; overflow-wrap: anywhere; }
}
@media screen and (max-width: 389.98px) {
  /* narrow phones: less air around the eyebrow label ("WHY GUESTS CHOOSE US", "WHAT HAPPENS NEXT" broke in two) */
  main.overflow-x-clip .bj-section .text-center > .flex.items-center.justify-center.mb-3 > span.tracking-widest,
  main:has(iframe[src*="google.com/maps"]) > .py-10 .text-center > .flex.items-center.justify-center.mb-3 > span.tracking-widest,
  #testimonialsSection .text-center > .flex.items-center.justify-center.mb-3 > span.tracking-widest,
  main:has(#bjThanksName) .bj-section .text-center > .flex.items-center.justify-center.mb-3 > span.tracking-widest { margin-left: 10px; margin-right: 10px; }
}
@media screen and (max-width: 359.98px) {
  /* contact card: a little less padding, so the email address stays inside it */
  main:has(iframe[src*="google.com/maps"]) .container > .p-6 { padding: 20px 18px; }
  main:has(iframe[src*="google.com/maps"]) .flex.items-start.gap-4 { gap: 12px; }
}

/* ---------- static: laptops, desktops and big monitors (1024px and up) ---------- */
/* static.large.css : static pages (/about-us/, /contact-us/, /testimonials/, /privacy-policy/, /refund-cancellation-policy/,
   /terms-conditions/, /thank-you/), screens 1024px and wider. Appended after css/style.css, before tailwind.css.
   Every rule sits inside "screen and (min-width: 1024px ...)".
   Scope hooks (no body class on these pages):
     main.overflow-x-clip                              /about-us/ (the only main with that class)
     main:has(iframe[src*="google.com/maps"])          /contact-us/ (the only main with the office map)
     #testimonialsSection, body:has(> #testimonialsSection)   /testimonials/ (this page has no main)
     main:has(> .bj-page-hero):not(:has(> #wildlife))  the three policy pages and /thank-you/ (#wildlife = /destinations/) */

/* ---------- all large screens ---------- */
@media screen and (min-width: 1024px) {
  /* hero titles left one word alone on the second line ("What Our Guests Say on / Google", "... Since / 2012") */
  main.overflow-x-clip > div[class~="lg:aspect-[12/5]"] h1,
  main:has(iframe[src*="google.com/maps"]) > div[class~="lg:aspect-[12/5]"] h1,
  body:has(> #testimonialsSection) > section[class~="lg:aspect-[12/5]"] h1 { text-wrap: balance; }

  /* thank-you and policy heroes: the intro line ended with two words alone on a third line ("to 7pm.") */
  main:has(> .bj-page-hero):not(:has(> #wildlife)) > .bj-page-hero p:not(.bj-crumb) { text-wrap: balance; }

  /* about, company table: "Phone and WhatsApp" was the only label that broke into two lines, and the office address
     left the single word "Pradesh" on its second line */
  main.overflow-x-clip .bj-prose th { white-space: nowrap; }
  main.overflow-x-clip .bj-prose td { text-wrap: pretty; }

  /* about, first photo tile: the picture file has a black row on its top edge. The picture is enlarged from its bottom
     edge, so the row (and a part of the white sky) falls outside the tile; the hover zoom keeps its 4% step */
  main.overflow-x-clip .bj-grid--4 > .bj-dest:first-child img { transform: scale(1.22); transform-origin: 50% 100%; }
  main.overflow-x-clip .bj-grid--4 > .bj-dest:first-child:hover img { transform: scale(1.27); }

  /* contact card: address, phone, hours and email were 13px here (15px on phones and tablets, 16px in the cards below).
     !important because style.css sets the 13px on .text-xs with !important */
  main:has(iframe[src*="google.com/maps"]) .flex.items-start.gap-4 > div > p { font-size: 15px !important; line-height: 1.6 !important; }

  /* testimonials: before "View all" each column shows its first four reviews, and one of the four in the third column
     is a 1340 to 1840px long letter, so that column was twice as long as the other two and left a 1100 to 1650px high
     hole beside it. The two short columns show their next two reviews as well (three below 1280, see there), which
     brings the three columns to about the same length. "View all" and "Show less" work as before.
     NOTE: the counts 6 and 7 fit today's review order only (they offset the one long letter, second in column three).
     Check them again whenever the reviews are regenerated or reordered. 16 reviews (18 below 1280) now show before
     "View all" instead of 12, and some of the added ones have no star row. */
  #testimonialsSection #testimonialCol1 > .more-card.hidden:nth-child(-n+6),
  #testimonialsSection #testimonialCol2 > .more-card.hidden:nth-child(-n+6) { display: block; }
  /* these reviews are already on screen: no second fade-in when "View all" is pressed */
  #testimonialsSection #testimonialCol1 > .more-card.animate-in-card:nth-child(-n+6),
  #testimonialsSection #testimonialCol2 > .more-card.animate-in-card:nth-child(-n+6) { animation: none; }
}

/* ---------- 1024 to 1279: the narrowest desktop layout (content is 960 to 992px wide) ---------- */
@media screen and (min-width: 1024px) and (max-width: 1279.98px) {
  /* contact, "Complete Safari Guide": four cards a row left 170px for the text, the timing rows ("Morning 6:00 AM –
     11:00 AM") ran out of their card and the texts took seven lines. Two cards a row. */
  main:has(iframe[src*="google.com/maps"]) .grid[class~="lg:grid-cols-4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* about, "Four Ways to See Madhya Pradesh": the four photo tiles are 225px wide and 169px high here, the four lines
     of text covered 60% of the photo and the title ran into the bright sky above the dark fade. Square tiles (the
     height they have from 1280 up) keep the text in the dark lower half. */
  main.overflow-x-clip .bj-grid--4 > .bj-dest { aspect-ratio: 1 / 1; }

  /* testimonials: the cards are 299 to 309px wide here and the long letter is 1840px high: one more review in each
     short column */
  #testimonialsSection #testimonialCol1 > .more-card.hidden:nth-child(7),
  #testimonialsSection #testimonialCol2 > .more-card.hidden:nth-child(7) { display: block; }
  #testimonialsSection #testimonialCol1 > .more-card.animate-in-card:nth-child(7),
  #testimonialsSection #testimonialCol2 > .more-card.animate-in-card:nth-child(7) { animation: none; }
}

/* ---------- wider than 1920: big monitors ---------- */
@media screen and (min-width: 1921px) {
  /* heroes: the height is 5/12 of the screen width with no limit (1067px at 2560, 1600px on a 4K screen).
     They keep the 800px they have at 1920. */
  main.overflow-x-clip > div[class~="lg:aspect-[12/5]"],
  main:has(iframe[src*="google.com/maps"]) > div[class~="lg:aspect-[12/5]"],
  body:has(> #testimonialsSection) > section[class~="lg:aspect-[12/5]"] { aspect-ratio: auto; height: 800px; }
}
/* <<< RESPONSIVE END <<< */