/* ================================================================
   THE BEACH HOUSE — responsive-fixes.css
   Drop-in responsive overrides for all screen sizes.
   Add <link rel="stylesheet" href="assets/css/responsive-fixes.css">
   AFTER the main style.css link in header.php
   ================================================================ */


/* ================================================================
   1. NAVBAR
   ----------------------------------------------------------------
   NOTE: The real navbar markup is centered-logo-on-top (.nav-top)
   with the horizontal link row below it (.nav-bottom), inside
   .main-nav — not .nav-container/.nav-links, which don't exist in
   the DOM. header.php's inline critical CSS already implements the
   full responsive system for this (logo + links row on desktop /
   laptop / Nest Hub / Nest Hub Max at ≥992px, centered logo +
   hamburger + slide-in menu on everything below that), so it is not
   duplicated here. This section only adds small, additive tweaks
   using the real selectors.
================================================================ */

/* ── Large desktop (≥1400px) — a little extra breathing room ── */
@media (min-width: 1400px) {
    .nav-bottom { gap: 40px; }
}

/* ── Fallback --nav-h for the "logo on top / links row below" desktop
   layout (≥992px: laptop, Nest Hub, Nest Hub Max, desktop). This is a
   static best-guess matching the unscrolled header (150px logo + the
   link row below it); main.js measures the real header height on load
   and overrides this exact value, so this only matters for that first
   instant before JS runs (or if JS is unavailable). ── */
@media (min-width: 992px) {
    :root { --nav-h: 205px; }
}


/* ================================================================
   2. HERO SECTION
   ----------------------------------------------------------------
   Single source of truth for hero-heading/hero-body sizing across
   every breakpoint (style.css / style_min.css no longer set
   conflicting font-size !important rules for these — see those
   files' HERO comments). Ranges are contiguous and non-overlapping
   so exactly one rule ever applies per width, regardless of stylesheet
   load order.

   Covers, left to right along the width axis:
   Galaxy Fold folded (~344) → small phones (360–414, iPhone SE/XR/12
   Pro/14 Pro Max, Pixel 7, Galaxy S8+/S20 Ultra/A51/71) → phablets /
   Surface Duo (~540) → tablets (iPad Mini 768, iPad Air 820,
   Surface Pro 7 ~912) → iPad Pro / Nest Hub / small laptop (1024) →
   Nest Hub Max / laptop (1280) → desktop (≥1400).
================================================================ */

/* ── Base: stack the two-column hero below desktop ── */
@media (max-width: 991px) {
    .hero-section   { min-height: 100svh; }
    .hero-container {
        padding-top: calc(var(--nav-h) + 10px);
        padding-bottom: 60px;
        min-height: unset;
    }

    /* Stack booking card under content */
    .hero-two-col {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }
    .hero-two-col .hero-content { max-width: 100%; }
    .hero-booking-card          { width: 100%; max-width: 100%; flex: none; }
}

/* ── Tablets: iPad Mini/Air, Surface Pro 7, Zenbook Fold unfolded (768px–991px) ── */
@media (min-width: 768px) and (max-width: 991px) {
    .hero-heading       { font-size: clamp(3rem, 7vw, 4.4rem); }
    .hero-body          { font-size: 15px; max-width: 560px; }
    .hero-booking-card  { max-width: 560px; }
}

/* ── Phablets / Surface Duo / small tablets in portrait (576px–767px) ── */
@media (min-width: 576px) and (max-width: 767px) {
    .hero-heading      { font-size: clamp(2.8rem, 8.5vw, 3.6rem); line-height: 1.1; }
    .hero-body         { font-size: 14.5px; margin-bottom: 28px; }
    .hero-indicators   { margin-top: 22px; }
}

/* ── Shared mobile tweaks (≤767px) ── */
@media (max-width: 767px) {
    .hero-scroll-cue   { display: none; }
    .hero-dots         { display: none; } /* reduce visual noise on mobile */
}

/* ── Standard phones: iPhone 12 Pro/XR/14 Pro Max, Pixel 7, Galaxy S8+/S20 Ultra/A51/71 (376px–575px) ── */
@media (min-width: 376px) and (max-width: 575px) {
    .hero-container     { padding-left: 16px; padding-right: 16px; padding-bottom: 40px; }
    .hero-heading       { font-size: clamp(2.3rem, 9vw, 2.7rem); line-height: 1.15; }
    .hero-body          { font-size: 14px; margin-bottom: 24px; }
    .hero-eyebrow       { font-size: 10px; letter-spacing: 3px; }

    /* Full-width CTA buttons */
    .hero-actions       { flex-direction: column; align-items: stretch; gap: 12px; }
    .btn-primary-hero,
    .btn-ghost-hero     { width: 100%; justify-content: center; padding: 14px 20px; font-size: 14px; }

    /* Booking card */
    .hero-booking-card  { padding: 22px 16px 18px; border-radius: 18px; }
    .hbc-row            { grid-template-columns: 1fr; gap: 0; }
    .hbc-title          { font-size: 1.35rem; }
    .hbc-submit         { font-size: 12px; letter-spacing: 1px; }
}

/* ── iPhone SE / Galaxy Fold folded / very small (≤375px) ── */
@media (max-width: 375px) {
    .hero-container     { padding-left: 14px; padding-right: 14px; padding-bottom: 36px; }
    .hero-heading       { font-size: clamp(2rem, 10vw, 2.3rem); line-height: 1.18; }
    .hero-body          { font-size: 13px; margin-bottom: 20px; }
    .hero-eyebrow       { font-size: 9.5px; letter-spacing: 2.5px; }

    .hero-actions       { flex-direction: column; align-items: stretch; gap: 10px; }
    .btn-primary-hero,
    .btn-ghost-hero     { width: 100%; justify-content: center; padding: 13px 18px; font-size: 13px; }

    .hero-booking-card  { padding: 20px 14px 16px; border-radius: 16px; }
    .hbc-row            { grid-template-columns: 1fr; gap: 0; }
    .hbc-title          { font-size: 1.25rem; }
    .hbc-submit         { font-size: 11.5px; letter-spacing: .8px; }
}

/* ── Short-viewport safeguard: landscape phones and Nest Hub-style
   short/wide screens (height ≤ 700px) — trim vertical padding and cap
   heading size so hero content never needs the visitor to scroll to
   see the CTA. ── */
@media (max-height: 700px) and (min-width: 576px) {
    .hero-container { padding-top: calc(var(--nav-h) + 6px); padding-bottom: 30px; }
    .hero-heading    { font-size: clamp(2.6rem, 6vw, 4rem); margin-bottom: 16px; }
    .hero-body       { margin-bottom: 20px; }
}
@media (max-height: 480px) {
    .hero-section    { min-height: auto; }
    .hero-container  { padding-top: calc(var(--nav-h) + 4px); padding-bottom: 20px; min-height: auto; }
    .hero-heading    { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 10px; }
    .hero-body       { display: none; } /* reclaim vertical space on very short/landscape screens */
    .hero-dots       { display: none; }
}


/* ================================================================
   3. INFO BAR
================================================================ */
@media (max-width: 767px) {
    .info-bar          { padding: 12px 0; }
    .info-bar-inner    { flex-direction: column; gap: 6px; }
    .info-bar-divider  { display: none; }
    .info-bar-item     { justify-content: center; padding: 5px 12px; font-size: 12.5px; }
}

@media (max-width: 575px) {
    .info-bar-item     { font-size: 12px; gap: 7px; }
}


/* ================================================================
   4. HOME ABOUT SECTION (collage + text)
================================================================ */
@media (max-width: 991px) {
    .about-collage { height: 400px; }
    .section-gap   { padding: 80px 0; }
}

@media (max-width: 767px) {
    .about-collage      { height: 320px; }
    .collage-float-tag  { display: none; }
    .mini-stats         { gap: 16px; padding: 16px 18px; width: 100%; }
    .mini-stat strong   { font-size: 1.7rem; }
}

@media (max-width: 575px) {
    .about-collage  { height: 260px; }
    .collage-badge  { padding: 12px 14px; font-size: 11px; }
    .collage-mini   { width: 48%; height: 48%; }
    .mini-stats     { gap: 10px; padding: 14px 14px; }
    .mini-stat strong { font-size: 1.55rem; }
    .section-gap    { padding: 60px 0; }
}

@media (max-width: 375px) {
    .about-collage { height: 220px; }
}


/* ================================================================
   5. MARQUEE STRIP
================================================================ */
@media (max-width: 575px) {
    .marquee-item { padding: 0 24px; font-size: 0.95rem; gap: 10px; }
}


/* ================================================================
   6. HOW TO REACH
================================================================ */
@media (max-width: 1199px) {
    .reach-grid        { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .reach-card-img    { height: 160px; }
}

@media (max-width: 767px) {
    .reach-section     { padding: 60px 0; }
    .reach-grid        { gap: 16px; }
    .reach-card-img    { height: 180px; }
}

@media (max-width: 575px) {
    .reach-grid        { grid-template-columns: 1fr; }
    .reach-card-img    { height: 200px; }
    .reach-card-body   { padding: 0 18px 24px; }
    .reach-map-link    { width: 100%; justify-content: center; font-size: 13px; padding: 14px 20px; }
}


/* ================================================================
   7. AMENITIES (3-column with centre image)
================================================================ */

/* ── iPad Pro / Nest Hub (1024px–1199px):
   Force 2-col grid — centre image full-width on top,
   both side cols side by side below.
   The original 3-col .85fr 1.2fr .85fr is too cramped here. ── */
@media (max-width: 1199px) {
    .amenities-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: start;
    }
    /* Centre image spans both columns and sits on top */
    .amenities-centre {
        grid-column: 1 / -1;
        order: -1;
        margin-bottom: 4px;
    }
    .amenities-centre-img    { height: 320px; border-radius: 24px; object-fit: cover; }
    .amenities-centre-badge  { bottom: -14px; font-size: 12px; padding: 11px 22px; }

    /* Reset right col so icons align left, matching left col */
    .amenities-col--right .amenity-item { flex-direction: row; text-align: left; }
    .amenity-item            { min-height: auto; padding: 16px 18px; }
    .amenity-text h5         { font-size: 13.5px; }
    .amenity-text p          { font-size: 12.5px; }
}

/* ── Single-column below 991px ────────────────────────────────── */
@media (max-width: 991px) {
    .amenities-section       { padding: 80px 0; }
    .amenities-layout        { grid-template-columns: 1fr; gap: 14px; }
    .amenities-centre        { grid-column: auto; }
    .amenities-centre-img    { height: 260px; }
    .amenity-item            { padding: 16px; min-height: auto; }
}

@media (max-width: 575px) {
    .amenities-section       { padding: 60px 0; }
    .amenities-centre-img    { height: 220px; border-radius: 20px; }
    .amenities-centre-badge  { font-size: 11px; padding: 10px 18px; }
    .amenity-item            { gap: 12px; padding: 14px; }
    .amenity-text h5         { font-size: 13px; }
    .amenity-text p          { font-size: 12px; }
    .sec-head .sec-title     { font-size: 1.8rem; }
}


/* ================================================================
   8. EXPERIENCE STRIP (dark 4-col grid)
================================================================ */
@media (max-width: 1199px) {
    .exp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .experience-strip { padding: 55px 0; }
    .exp-grid         { grid-template-columns: 1fr; }
    .exp-item         { padding: 32px 20px; }
    .exp-icon         { width: 54px; height: 54px; font-size: 22px; }
    .exp-item h4      { font-size: 0.95rem; }
}


/* ================================================================
   9. ROOMS / ACCOMMODATION GRID
================================================================ */
@media (max-width: 1199px) {
    .accommodation-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .accommodation-grid { grid-template-columns: 1fr; gap: 16px; }
    .accommodation-card img { height: 220px; }
    .accommodation-content  { padding: 20px 18px 22px; }
}


/* ================================================================
   10. WHY CHOOSE BEACH HOUSE
================================================================ */
@media (max-width: 991px) {
    .why-grid-v2 { grid-template-columns: 1fr; gap: 36px; }
    .why-visual  { position: static; }
    .why-img     { height: 360px; }
    .why-header  { padding-top: 56px; margin-bottom: 36px; }
}

@media (max-width: 767px) {
    .why-img       { height: 300px; }
    .why-pill      { font-size: 11.5px; padding: 8px 13px; }
    .why-stat-row  { padding: 14px 8px; }
    .why-stat strong { font-size: 1.3rem; }
}

@media (max-width: 575px) {
    .why-card          { flex-direction: column; gap: 12px; }
    .why-img           { height: 240px; }
    .why-heading       { font-size: 1.9rem; }
    .why-stat strong   { font-size: 1.2rem; }
    .why-stat span     { font-size: 9px; }
    .why-header        { padding-top: 44px; margin-bottom: 28px; }
}

@media (max-width: 375px) {
    .why-img { height: 200px; }
}


/* ================================================================
   11. TESTIMONIALS
================================================================ */

/* ── 992px–1199px (iPad Pro, Nest Hub): show 3 slides
   The JS visibleCount() returns 3 for w≥992, so CSS must match.
   Original CSS had flex: 0 0 25% (4 slides) causing mismatch. ── */
@media (min-width: 992px) and (max-width: 1199px) {
    .testi-slide {
        flex: 0 0 calc(100% / 3);
    }
    .testi-slider-wrap {
        width: 100%;
        margin-left: 0;
        overflow: hidden;
    }
}

/* ── ≤991px: reset the strange calc offset, show 2 slides ─────── */
@media (max-width: 991px) {
    .testi-slider-wrap {
        width: 100%;
        margin-left: 0;
        overflow: hidden;
    }
}

/* ── 576px–991px: show 2 slides ─────────────────────────────── */
@media (min-width: 576px) and (max-width: 991px) {
    .testi-slide { flex: 0 0 50%; }
}

/* ── ≤575px: show 1 slide ─────────────────────────────────────── */
@media (max-width: 575px) {
    .testimonial-section { padding: 70px 0 55px; }
    .testi-slide         { flex: 0 0 100%; }
    .testi-header        { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 32px; }
    .testi-section-title { font-size: 1.8rem; }
    .testi-card          { padding: 24px 22px 28px; border-radius: 28px; }
    .testi-btn           { width: 46px; height: 46px; font-size: 14px; }
}

@media (max-width: 375px) {
    .testi-card { padding: 20px 16px 24px; }
}


/* ================================================================
   12. HOME CTA BANNER
================================================================ */
@media (max-width: 991px) {
    .home-cta { padding: 90px 20px; }
}

@media (max-width: 767px) {
    .home-cta { padding: 75px 16px; }
    .home-cta-inner h2 { font-size: 2.1rem; }
    .home-cta-inner p  { font-size: 14px; }
}

@media (max-width: 575px) {
    .home-cta         { padding: 65px 16px; }
    .home-cta-inner h2{ font-size: 1.9rem; }
    .cta-actions      { flex-direction: column; align-items: stretch; gap: 12px; }
    .cta-actions a    { width: 100%; justify-content: center; }
}


/* ================================================================
   13. FOOTER
================================================================ */

/* ── Large desktop (≥1400px) ──────────────────────────────────── */
@media (min-width: 1400px) {
    .footer-inner     { padding: 70px 0 0; }
}

/* ── iPad Pro / Nest Hub / Surface (1024px–1199px) ─────────────
   Bootstrap col-lg-* kicks in at 992px so at 1024 the 4-column
   layout is still active. Logo column is too wide; tighten it. ── */
@media (min-width: 992px) and (max-width: 1199px) {
    .footer-logo      { width: 160px; height: auto; }
    .footer-tagline   { font-size: 13px; max-width: 220px; }
    .footer-inner     { padding: 50px 12px 0; }
    .footer-heading   { font-size: 13px; letter-spacing: 1.5px; }
    .footer-links a,
    .footer-contact-list li,
    .footer-cta-text  { font-size: 13px; }
    .footer-btn       { padding: 11px 20px; font-size: 13px; }
}

/* ── Tablet portrait (768px–991px) ────────────────────────────
   Bootstrap stacks into 2-column (col-md-6). Centre everything. */
@media (max-width: 991px) {
    .site-footer           { text-align: center; }
    .footer-brand          { align-items: center; display: flex; flex-direction: column; }
    .footer-logo           { margin: 0 auto 16px; width: 180px; height: auto; }
    .footer-tagline        { max-width: 100%; margin-left: auto; margin-right: auto; }
    .footer-social         { justify-content: center; }
    .footer-heading        { text-align: center; }
    .footer-links          { display: flex; flex-direction: column; align-items: center; }
    .footer-links a        { justify-content: center; }
    .footer-contact-list li{ justify-content: center; text-align: left; }
    .footer-cta-text       { text-align: center; }
    .footer-note           { justify-content: center; }
    .footer-btn            { margin: 0 auto; display: inline-flex; }
    .footer-bottom         { justify-content: center; text-align: center; }
    .footer-bottom-links   { justify-content: center; }
    .footer-divider        { margin: 44px 0 24px; }
}

/* ── Tablet portrait exact (768px–991px) ──────────────────────── */
@media (min-width: 768px) and (max-width: 991px) {
    .footer-inner          { padding: 52px 20px 0; }
    .footer-logo           { width: 170px; }
    .footer-tagline        { font-size: 13.5px; }
    .footer-links a,
    .footer-cta-text       { font-size: 13.5px; }
    .footer-contact-list li{ font-size: 13.5px; }
    /* 2-col layout: brand + links on row 1, contact + book on row 2 */
    .footer-bottom         { flex-direction: row; flex-wrap: wrap; gap: 10px; }
}

/* ── Mobile (≤767px) ──────────────────────────────────────────── */
@media (max-width: 767px) {
    .footer-inner          { padding: 44px 20px 0; }
    .footer-logo           { width: 165px; }
    .footer-tagline        { font-size: 13.5px; line-height: 1.75; }
    .footer-heading        { font-size: 13px; letter-spacing: 1.8px; margin-bottom: 16px; }
    .footer-links a        { font-size: 13.5px; }
    .footer-contact-list li{ font-size: 13.5px; gap: 10px; }
    .footer-cta-text       { font-size: 13.5px; }
    .footer-btn            { padding: 12px 24px; font-size: 13.5px; }
    .footer-bottom         { flex-direction: column; gap: 8px; padding-bottom: 28px; }
    .footer-copy           { font-size: 12.5px; }
    .footer-bottom-links   { font-size: 12.5px; }
    .footer-divider        { margin: 38px 0 22px; }
}

/* ── Small phones (≤575px) ────────────────────────────────────── */
@media (max-width: 575px) {
    .footer-inner          { padding: 38px 16px 0; }
    .footer-logo           { width: 160px; margin: 0 auto 14px; }
    .footer-tagline        { font-size: 13px; }
    .footer-heading        { font-size: 12.5px; margin-bottom: 14px; letter-spacing: 1.5px; }
    .footer-links a,
    .footer-cta-text       { font-size: 13px; }
    .footer-links li       { margin-bottom: 9px; }

    /* Contact list: stack icon above text on very small screens */
    .footer-contact-list li{
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        text-align: left;
        gap: 10px;
        font-size: 13px;
    }
    .contact-icon          { flex-shrink: 0; margin-top: 2px; }

    .footer-btn            { width: 100%; justify-content: center; padding: 13px 20px; font-size: 13px; }
    .footer-note           { font-size: 11.5px; }
    .social-icon           { width: 36px; height: 36px; font-size: 14px; }
    .footer-social         { gap: 10px; }

    .footer-divider        { margin: 32px 0 20px; }
    .footer-bottom         { flex-direction: column; align-items: center; gap: 8px; padding-bottom: 22px; }
    .footer-copy           { font-size: 12px; margin: 0; }
    .footer-bottom-links   { font-size: 12px; text-align: center; }
    .footer-bottom-links a { font-size: 12px; }
}

/* ── iPhone SE / small phones (≤375px) ───────────────────────── */
@media (max-width: 375px) {
    .footer-inner          { padding: 32px 14px 0; }
    .footer-logo           { width: 145px; }
    .footer-tagline        { font-size: 12.5px; }
    .footer-heading        { font-size: 12px; }
    .footer-links a,
    .footer-contact-list li,
    .footer-cta-text       { font-size: 12.5px; }
    .social-icon           { width: 34px; height: 34px; font-size: 13px; }
    .footer-btn            { font-size: 12.5px; padding: 12px 16px; }
    .footer-copy,
    .footer-bottom-links   { font-size: 11.5px; }
}

/* ── Galaxy Fold / very narrow (≤320px) ──────────────────────── */
@media (max-width: 320px) {
    .footer-logo           { width: 130px; }
    .footer-tagline        { font-size: 12px; }
    .footer-links a,
    .footer-contact-list li{ font-size: 12px; }
    .footer-btn            { font-size: 12px; padding: 11px 14px; }
    .social-icon           { width: 32px; height: 32px; font-size: 12px; }
    .footer-copy,
    .footer-bottom-links   { font-size: 11px; }
}

/* ── Nest Hub landscape (1024×600) — compact vertical space ──── */
@media (min-width: 992px) and (max-width: 1024px) and (max-height: 640px) {
    .footer-inner          { padding: 40px 12px 0; }
    .footer-logo           { width: 150px; }
    .footer-divider        { margin: 32px 0 18px; }
    .footer-tagline        { font-size: 12.5px; line-height: 1.65; }
}


/* ================================================================
   14. GLOBAL SECTION / TYPOGRAPHY SCALING
================================================================ */

@media (max-width: 991px) {
    .section-title { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
    .eyebrow       { font-size: 11px; letter-spacing: 3px; }
    .section-head  { margin-bottom: 40px; }
    .section-gap   { padding: 80px 0; }
}

@media (max-width: 767px) {
    .section-title { font-size: clamp(1.7rem, 5vw, 2.2rem); }
    .section-text  { font-size: 14px; }
}

@media (max-width: 575px) {
    .section-title { font-size: 1.75rem !important; }
    .section-text  { font-size: 13.5px; }
    .section-head  { margin-bottom: 32px; }
    .section-gap   { padding: 60px 0; }

    /* Container padding so content isn't flush to edge */
    .container     { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 375px) {
    .section-title { font-size: 1.6rem !important; }
    .container     { padding-left: 14px; padding-right: 14px; }
}


/* ================================================================
   15. SPECIFIC DEVICE OVERRIDES
   (Samsung Galaxy S8+, iPhone SE, Galaxy Fold, etc.)
================================================================ */

/* Galaxy Fold open view / very narrow (≤280px) */
@media (max-width: 320px) {
    .hero-heading      { font-size: 1.85rem !important; }
    .hero-body         { font-size: 12.5px; }
    .hero-booking-card { padding: 18px 12px 16px; }
    .hbc-title         { font-size: 1.15rem; }
    .hbc-input,
    .hbc-select        { height: 44px; font-size: 12px; }
    .hbc-submit        { height: 48px; font-size: 11.5px; }

    .why-stat strong   { font-size: 1rem; }
    .why-stat span     { font-size: 8.5px; }
    .exp-item          { padding: 24px 14px; }
}

/* iPad Mini / Air (768px exact) */
@media (min-width: 768px) and (max-width: 834px) {
    .hero-two-col      { gap: 28px; }
    .hero-booking-card { max-width: 100%; }
    .accommodation-grid{ grid-template-columns: repeat(2, 1fr); }
    .reach-grid        { grid-template-columns: repeat(2, 1fr); }
    .exp-grid          { grid-template-columns: repeat(2, 1fr); }
}

/* iPad Pro (1024px) */
@media (min-width: 1024px) and (max-width: 1100px) {
    .hero-booking-card { flex: 0 0 440px; width: 440px; }
    .nav-links         { gap: 20px; }
    .nav-link          { font-size: 15px; }
    /* amenities handled by the ≤1199px rule in section 7 */
}

/* Surface Pro 7 / landscape tablet (1368px) */
@media (min-width: 1200px) and (max-width: 1400px) {
    .hero-booking-card { flex: 0 0 480px; width: 480px; }
}


/* ================================================================
   16. LANDSCAPE PHONE ORIENTATION
================================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section      { min-height: 100vw; } /* wider than tall in landscape */
    .hero-container    {
        padding-top: 70px;
        padding-bottom: 30px;
        min-height: unset;
    }
    .hero-two-col      { flex-direction: row; gap: 24px; align-items: flex-start; }
    .hero-two-col .hero-content { flex: 1; }
    .hero-booking-card { flex: 0 0 46%; width: 46%; max-width: 46%; }
    .hero-heading      { font-size: 2rem !important; }
    .hero-body         { font-size: 13px; margin-bottom: 20px; }
    .hero-actions      { flex-direction: row; }
    .btn-primary-hero,
    .btn-ghost-hero    { width: auto; }
}


/* ================================================================
   17. CONTACT PAGE
================================================================ */

/* ── Page Banner ──────────────────────────────────────────────── */

/* Large desktop */
@media (min-width: 1400px) {
    .page-banner              { min-height: 60vh; }
    .page-banner-content h1   { font-size: 68px; }
}

/* iPad Pro / Nest Hub / Surface (992px–1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .page-banner              { min-height: 52vh; }
    .page-banner-content      { padding-top: 100px; }
    .page-banner-content h1   { font-size: 52px; }
    .page-subtitle            { font-size: 13px; letter-spacing: 3px; }
}

/* Tablet portrait (768px–991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .page-banner              { min-height: 48vh; }
    .page-banner-content      { padding-top: 90px; }
    .page-banner-content h1   { font-size: 42px; }
    .page-subtitle            { font-size: 12px; letter-spacing: 3px; }
    .page-banner-content p    { font-size: 14px; }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
    .page-banner              { min-height: 44vh; }
    .page-banner-content      { padding-top: 80px; }
    .page-banner-content h1   { font-size: 36px; margin: 10px 0; }
    .page-subtitle            { font-size: 11px; letter-spacing: 2.5px; }
    .page-banner-content p    { font-size: 13.5px; }
}

/* Small phones (≤575px) */
@media (max-width: 575px) {
    .page-banner              { min-height: 40vh; }
    .page-banner-content      { padding-top: 70px; }
    .page-banner-content h1   { font-size: 30px; line-height: 1.2; margin: 8px 0; }
    .page-subtitle            { font-size: 10px; letter-spacing: 2px; }
    .page-banner-content p    { font-size: 13px; }
}

/* iPhone SE / very small (≤375px) */
@media (max-width: 375px) {
    .page-banner-content h1   { font-size: 26px; }
    .page-subtitle            { font-size: 10px; }
}

/* ── Contact Section wrapper ──────────────────────────────────── */

/* iPad Pro / Nest Hub (992px–1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .contact-section          { padding: 70px 0; }
    .contact-page             { padding: 70px 0; }
    .section-heading h2       { font-size: 36px; }
    .contact-form-box         { padding: 36px 32px; }
    .contact-map              { min-height: 460px; }
    .contact-map iframe       { min-height: 460px; }
}

/* Tablet portrait (768px–991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .contact-section          { padding: 60px 0; }
    .contact-page             { padding: 60px 0; }
    .section-heading h2       { font-size: 30px; }
    .section-heading p        { font-size: 14px; }

    /* Info cards: 2 per row, third centred */
    .contact-card             { padding: 28px 20px; }
    .contact-card i           { width: 60px; height: 60px; line-height: 60px; font-size: 24px; }
    .contact-card h5          { font-size: 19px; }
    .contact-card p           { font-size: 14px; }

    /* Form */
    .contact-form-box         { padding: 30px 28px; }
    .contact-form-box h4      { font-size: 24px; margin-bottom: 20px; }
    .contact-form-box .form-control { height: 48px; font-size: 14px; }
    .contact-form-box textarea.form-control { height: 130px; }
    .contact-submit-btn       { padding: 14px; font-size: 15px; }

    /* Map stacks below form — full width */
    .contact-map              { min-height: 340px; }
    .contact-map iframe       { min-height: 340px; }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
    .contact-section          { padding: 55px 0; }
    .contact-page             { padding: 55px 0; }
    .section-subtitle         { font-size: 12px; letter-spacing: 3px; }
    .section-heading h2       { font-size: 26px; }
    .section-heading p        { font-size: 13.5px; }

    /* Info cards: full width stack */
    .contact-card             { padding: 26px 18px; border-radius: 20px; }
    .contact-card i           { width: 58px; height: 58px; line-height: 58px; font-size: 22px; margin-bottom: 14px; }
    .contact-card h5          { font-size: 18px; }
    .contact-card p           { font-size: 13.5px; }

    /* Form */
    .contact-form-box         { padding: 26px 22px; border-radius: 22px; }
    .contact-form-box h4      { font-size: 22px; margin-bottom: 18px; }
    .contact-form-box label   { font-size: 13.5px; }
    .contact-form-box .form-control { height: 46px; font-size: 13.5px; border-radius: 10px; }
    .contact-form-box textarea.form-control { height: 120px; }
    .contact-submit-btn       { padding: 14px; font-size: 14.5px; border-radius: 40px; }

    /* Map */
    .contact-map              { min-height: 300px; border-radius: 20px; }
    .contact-map iframe       { min-height: 300px; }
}

/* Small phones (≤575px) */
@media (max-width: 575px) {
    .contact-section          { padding: 48px 0; }
    .contact-page             { padding: 48px 0; }
    .section-subtitle         { font-size: 11px; letter-spacing: 2.5px; }
    .section-heading h2       { font-size: 24px; }
    .section-heading p        { font-size: 13px; }

    /* Cards full-width, reduce icon size */
    .contact-card             { padding: 24px 16px; border-radius: 18px; }
    .contact-card i           {
        width: 54px; height: 54px; line-height: 54px;
        font-size: 20px; margin-bottom: 12px;
    }
    .contact-card h5          { font-size: 17px; }
    .contact-card p           { font-size: 13px; }

    /* Form inputs full-width side by side cols collapse to 1 */
    .contact-form-box         { padding: 22px 16px; border-radius: 18px; }
    .contact-form-box h4      { font-size: 20px; margin-bottom: 16px; }
    .contact-form-box label   { font-size: 13px; }
    .contact-form-box .form-control {
        height: 44px; font-size: 13px;
        border-radius: 10px; padding: 0 14px;
    }
    .contact-form-box textarea.form-control { height: 110px; padding: 12px 14px; }
    .contact-submit-btn       { padding: 13px; font-size: 14px; }

    /* Map */
    .contact-map              { min-height: 260px; border-radius: 18px; }
    .contact-map iframe       { min-height: 260px; }
}

/* iPhone SE / very small (≤375px) */
@media (max-width: 375px) {
    .contact-section          { padding: 40px 0; }
    .contact-page             { padding: 40px 0; }
    .section-heading h2       { font-size: 22px; }

    .contact-card             { padding: 20px 14px; }
    .contact-card i           { width: 50px; height: 50px; line-height: 50px; font-size: 18px; }
    .contact-card h5          { font-size: 16px; }
    .contact-card p           { font-size: 12.5px; }

    .contact-form-box         { padding: 18px 14px; }
    .contact-form-box h4      { font-size: 18px; }
    .contact-form-box .form-control { height: 42px; font-size: 12.5px; }
    .contact-submit-btn       { font-size: 13.5px; padding: 12px; }

    .contact-map              { min-height: 240px; }
    .contact-map iframe       { min-height: 240px; }
}

/* Galaxy Fold / very narrow (≤320px) */
@media (max-width: 320px) {
    .page-banner-content h1   { font-size: 22px; }
    .section-heading h2       { font-size: 20px; }

    .contact-card i           { width: 46px; height: 46px; line-height: 46px; font-size: 16px; }
    .contact-card h5          { font-size: 15px; }
    .contact-card p           { font-size: 12px; }

    .contact-form-box         { padding: 16px 12px; }
    .contact-form-box h4      { font-size: 17px; }
    .contact-form-box .form-control { height: 40px; font-size: 12px; }
    .contact-submit-btn       { font-size: 13px; }

    .contact-map              { min-height: 200px; }
    .contact-map iframe       { min-height: 200px; }
}

/* Nest Hub landscape (1024×600) — tighten vertical space */
@media (min-width: 992px) and (max-width: 1024px) and (max-height: 640px) {
    .page-banner              { min-height: 40vh; }
    .page-banner-content      { padding-top: 80px; }
    .page-banner-content h1   { font-size: 40px; }
    .contact-section          { padding: 50px 0; }
    .contact-page             { padding: 50px 0; }
    .contact-form-box         { padding: 28px 24px; }
    .contact-map              { min-height: 320px; }
    .contact-map iframe       { min-height: 320px; }
}

/* Landscape phone orientation */
@media (max-height: 500px) and (orientation: landscape) {
    .page-banner              { min-height: 100vw; }
    .page-banner-content      { padding-top: 60px; }
    .page-banner-content h1   { font-size: 28px; margin: 6px 0; }
    .contact-section          { padding: 40px 0; }
    .contact-page             { padding: 40px 0; }
    .contact-map              { min-height: 220px; }
    .contact-map iframe       { min-height: 220px; }
}


/* ================================================================
   18. PRINT
================================================================ */
@media print {
    .site-header, .hero-section, .marquee-strip,
    .experience-strip, .home-cta, .testimonial-section { display: none; }
    body { background: #fff; color: #000; font-size: 12pt; }
    a { color: #000; text-decoration: underline; }
}