/* ================================================================
   BITE BLISS — MOBILE UX ENHANCEMENTS
   Purpose: Progressive, touch-optimised mobile layer.
            Desktop styles in the original CSS files are untouched.
   Scope:   All 6 pages — index, services, menu, gallery, about, contact
   Author:  Added as a separate CSS file; link after all page-level CSS.
   Breakpoints:
       ≤900px  — tablet / hide desktop nav
       ≤768px  — mobile layout changes
       ≤480px  — small mobile tweaks
       ≤380px  — minimum supported width
================================================================ */

/* ================================================================
   0. CSS CUSTOM PROPERTIES (mobile tokens)
================================================================ */
:root {
    --touch-target : 48px;
    --mob-pad      : 5%;
    --mob-gap      : 14px;
    --card-r       : 16px;
}

/* ================================================================
   1. GLOBAL — prevent overflow, fluid images, tap highlighting
================================================================ */
html, body { overflow-x: hidden; max-width: 100%; }

img { max-width: 100%; height: auto; }

/* Remove default tap highlight; we add our own focus styles */
* { -webkit-tap-highlight-color: transparent; }

/* Minimum touch target for all interactive elements */
a, button, [role="button"] { min-height: var(--touch-target); }

/* But allow short inline links to stay inline */
p a, li a, .footer-col__links a,
.mobile-nav-links a + a { min-height: unset; }

/* ================================================================
   2. BUTTONS — unified touch-friendly baseline
================================================================ */
.btn-primary,
.btn-secondary,
.hero-btn,
.quote-btn {
    min-height : var(--touch-target);
    display    : inline-flex;
    align-items: center;
    justify-content: center;
}

/* Disable hover lift on true touch devices */
@media (hover: none) {
    .btn-primary:hover,
    .btn-secondary:hover,
    .hero-btn:hover,
    .quote-btn:hover {
        transform  : none !important;
        box-shadow : none !important;
    }
}

/* Large CTA variant */
@media (max-width: 768px) {
    .btn-primary--large {
        padding   : 16px 32px;
        font-size : .88rem;
        min-height: 52px;
        width     : 100%;
        max-width : 320px;
    }
}

/* ================================================================
   3. NAVBAR — sticky, accessible, drawer optimised for thumb reach
================================================================ */

/* ── 3a. Mobile hamburger button ─────────────────────────────── */
@media (max-width: 900px) {
    .mobile-menu-btn {
        display        : flex !important;
        width          : 44px;
        height         : 44px;
        align-items    : center;
        justify-content: center;
        padding        : 0;
        border-radius  : 8px;
        background     : rgba(255,215,0,.06);
        border         : 1px solid rgba(255,215,0,.12);
        flex-shrink    : 0;
        transition     : background .2s ease;
    }

    .mobile-menu-btn:active { background: rgba(255,215,0,.18); }

    /* Hide desktop nav items on mobile */
    .nav-links,
    .nav-phone,
    .nav-right .quote-btn:not(.mobile-quote-btn) {
        display: none !important;
    }
}

/* ── 3b. Mobile drawer — full-width slide-down ───────────────── */
/*
   Override the max-height transition approach in styles.css with a
   smooth opacity+translate approach that avoids content flashing.
*/
@media (max-width: 900px) {
    .mobile-drawer {
        position       : fixed;
        top            : 68px;
        left           : 0;
        right          : 0;
        display        : flex !important;   /* always rendered, toggled by opacity */
        flex-direction : column;
        background     : rgba(9,9,9,.97);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        border-bottom  : 1px solid rgba(255,215,0,.14);
        z-index        : 999;
        max-height     : calc(100vh - 68px);
        overflow-y     : auto;
        /* Hidden state */
        opacity         : 0;
        pointer-events  : none;
        transform       : translateY(-10px);
        transition      : opacity .28s ease, transform .28s ease;
        /* Reset old padding approach */
        padding: 0 !important;
    }

    .mobile-drawer.open {
        opacity        : 1;
        pointer-events : all;
        transform      : translateY(0);
    }
}

/* Safe-area support (iPhone notch / home-bar) */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 900px) {
        .mobile-drawer {
            padding-bottom: env(safe-area-inset-bottom) !important;
        }
    }
}

/* ── 3c. Drawer nav links — large tap targets ────────────────── */
@media (max-width: 900px) {
    .mobile-nav-links {
        display       : flex;
        flex-direction: column;
        border-bottom : 1px solid rgba(255,215,0,.07);
        padding       : 8px 0;
    }

    .mobile-nav-links a {
        display       : flex;
        align-items   : center;
        justify-content: space-between;
        min-height    : var(--touch-target);
        padding       : 0 6%;
        color         : rgba(255,255,255,.88);
        font-size     : .82rem;
        font-weight   : 500;
        text-transform: uppercase;
        letter-spacing: .9px;
        border-bottom : 1px solid rgba(255,255,255,.04);
        transition    : color .2s ease, background .2s ease;
    }

    .mobile-nav-links a::after {
        content   : "›";
        color     : rgba(255,215,0,.4);
        font-size : 1.1rem;
        transition: transform .2s ease, color .2s ease;
    }

    .mobile-nav-links a:active,
    .mobile-nav-links a:hover {
        background: rgba(255,215,0,.04);
        color     : var(--gold);
    }

    .mobile-nav-links a:hover::after { color: var(--gold); }

    /* Phone link inside drawer */
    .mobile-phone {
        display        : flex;
        align-items    : center;
        justify-content: center;
        gap            : 8px;
        min-height     : var(--touch-target);
        margin         : 14px 6% 0;
        border         : 1px solid rgba(255,215,0,.18);
        border-radius  : 50px;
        color          : var(--white);
        font-size      : .8rem;
        font-weight    : 600;
        text-decoration: none;
        transition     : border-color .2s ease, color .2s ease;
        padding        : 0 20px;
    }

    .mobile-phone:hover { color: var(--gold); border-color: var(--gold); }

    /* Quote CTA inside drawer */
    .mobile-quote-btn {
        display        : flex !important;
        align-items    : center;
        justify-content: center;
        min-height     : var(--touch-target);
        margin         : 10px 6% 20px !important;
        border-radius  : 50px;
        font-size      : .82rem;
        font-weight    : 700;
        letter-spacing : .4px;
        width          : auto !important;
        max-width      : unset;
    }
}

/* ── 3d. Floating WhatsApp button ────────────────────────────── */
.float-whatsapp {
    position     : fixed;
    bottom       : 24px;
    right        : 20px;
    z-index      : 997;
    width        : 54px;
    height       : 54px;
    border-radius: 50%;
    background   : #25D366;
    display      : flex;
    align-items  : center;
    justify-content: center;
    box-shadow   : 0 4px 20px rgba(37,211,102,.42);
    text-decoration: none;
    transition   : transform .2s ease, box-shadow .2s ease;
}

.float-whatsapp svg {
    width : 26px;
    height: 26px;
    fill  : #fff;
}

.float-whatsapp:active {
    transform : scale(.95);
    box-shadow: 0 3px 14px rgba(37,211,102,.5);
}

/* Only show on mobile */
@media (min-width: 901px) {
    .float-whatsapp { display: none !important; }
}

@supports (padding: env(safe-area-inset-bottom)) {
    .float-whatsapp {
        bottom: calc(24px + env(safe-area-inset-bottom));
    }
}

/* ================================================================
   4. HERO — INDEX.HTML (collage hero)
   Reduce to 75–80vh, strong overlay, 2 CTAs, minimal decoration
================================================================ */

@media (max-width: 768px) {
    /* ── 4a. Hero container ──────────────────────────────────── */
    .hero {
        min-height: 78vh;
        max-height: 100svh;
    }

    /* ── 4b. 2×2 collage grid ───────────────────────────────── */
    .hero-collage {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows   : repeat(2, 1fr);
    }

    /* Stronger overlay for readability */
    .hero-overlay {
        background: linear-gradient(
            160deg,
            rgba(0,0,0,.72) 0%,
            rgba(0,0,0,.88) 100%
        );
    }

    /* ── 4c. Content layout ─────────────────────────────────── */
    .hero-content {
        display       : flex;
        flex-direction: column;
        align-items   : center;
        text-align    : center;
        gap           : 16px;
        padding       : 0 5%;
        width         : 100%;
    }

    /* Compact animated service label */
    .hero-services {
        display       : flex;
        flex-direction: column;
        align-items   : center;
        gap           : 4px;
    }

    .specialist-label { font-size: .6rem; letter-spacing: 2.5px; }

    #animated-service {
        font-size : clamp(1.2rem, 5.5vw, 1.9rem);
        min-height: auto;
        text-align: center;
        padding   : 0;
    }

    /* Primary heading — single strong line */
    .hero-heading {
        font-size    : clamp(1.8rem, 8vw, 3.2rem);
        padding      : 0;
        line-height  : 1.15;
        word-break   : break-word;
        margin-bottom: 18px;
        text-align   : center;
    }

    /* ── 4d. Mobile hero CTA block (2 buttons) ──────────────── */
    /*
       The index.html hero currently has one .hero-btn.
       We inject a second via JS (mobile-enhancements.js).
       This CSS styles the wrapper that JS creates.
    */
    .hero-mobile-ctas {
        display       : flex;
        flex-direction: column;
        align-items   : center;
        gap           : 10px;
        width         : 100%;
    }

    .hero-mobile-ctas .btn-primary,
    .hero-mobile-ctas .btn-secondary,
    .hero-mobile-ctas .hero-btn {
        width          : 100%;
        max-width      : 310px;
        min-height     : var(--touch-target);
        display        : flex;
        align-items    : center;
        justify-content: center;
        gap            : 8px;
    }

    /* Hide original single hero-btn when mobile CTA block is present */
    .hero-content .hero-btn-original { display: none !important; }

    /* Disable particle animation (performance) */
    .hero::before { display: none; }

    /* Scroll indicator */
    .scroll-indicator { bottom: 16px; }
}

@media (max-width: 480px) {
    .hero        { min-height: 75vh; }
    .hero-heading{ font-size: clamp(1.6rem, 8vw, 2.4rem); }
}

/* ================================================================
   5. PLANNING SECTION (index.html)
   Progressive disclosure: show 3 cards, "View All Services" CTA
   Cards: hover overlay → always-visible content on mobile
================================================================ */

@media (max-width: 768px) {
    .planning {
        padding: 60px var(--mob-pad) 50px;
    }

    /* Single column */
    .planning__grid {
        grid-template-columns: 1fr;
        gap: var(--mob-gap);
    }

    /* ── Progressive disclosure: hide 4th card ──────────────── */
    .planning__card:nth-child(4) { display: none; }

    /* ── Card: restructure from overlay to stacked layout ────── */
    /*
       On desktop: fixed-height card with absolute overlay revealed on hover.
       On mobile:  auto-height card with image top, content always visible below.
    */
    .planning__card {
        height        : auto !important;
        min-height    : 0;
        border-radius : var(--card-r);
        overflow      : hidden;
        cursor        : default;
        position      : relative;
        display       : flex;
        flex-direction: column;
        box-shadow    : 0 4px 20px rgba(0,0,0,.35);
        border        : 1px solid rgba(255,215,0,.1);
    }

    /* Remove hover lift (not meaningful on touch) */
    .planning__card:hover {
        transform : none;
        box-shadow: 0 4px 20px rgba(0,0,0,.35);
    }

    /* Background image block (top of card) */
    .planning__img {
        position        : relative;
        height          : 190px;
        flex-shrink     : 0;
        background-size : cover;
        background-pos  : center;
        border-radius   : var(--card-r) var(--card-r) 0 0;
        /* Remove absolute positioning used on desktop */
        inset           : unset;
        transition      : transform .4s ease;
    }

    /* Keep subtle zoom on tap-hold / focus for touch feel */
    .planning__card:active .planning__img {
        transform: scale(1.04);
    }

    /* Gold border: remove pseudo — replaced by border on card */
    .planning__card::before { display: none; }

    /* Overlay: convert from absolute cover to static content block */
    .planning__overlay {
        position  : static !important;
        background: var(--black-soft);
        padding   : 18px 18px 20px;
        display   : flex;
        flex-direction: column;
        gap       : 8px;
        /* Remove gradient */
        background-image: none;
    }

    .planning__overlay h3 {
        font-size    : 1.15rem;
        margin-bottom: 4px;
        color        : var(--gold);
    }

    .planning__overlay p {
        font-size    : .8rem;
        line-height  : 1.6;
        margin-bottom: 10px;
        color        : rgba(255,255,255,.78);
    }

    /* CTA link — pill button */
    .planning__overlay a {
        display         : inline-flex;
        align-items     : center;
        gap             : 6px;
        color           : var(--white);
        background      : rgba(255,215,0,.08);
        border          : 1px solid rgba(255,215,0,.22);
        border-radius   : 50px;
        padding         : 10px 18px;
        font-size       : .76rem;
        font-weight     : 600;
        min-height      : 40px;
        align-self      : flex-start;
        text-decoration : none;
        transition      : background .2s ease, color .2s ease;
    }

    .planning__overlay a::after { content: "→"; transition: none; }
    .planning__overlay a:active {
        background: rgba(255,215,0,.18);
        color     : var(--gold);
    }
}

/* ── "View All Services" button — shown on mobile below 3 cards ─ */
/* The button is injected by JS; this CSS styles it. */
.planning-view-all {
    display        : none; /* hidden on desktop */
    justify-content: center;
    margin-top     : 20px;
}

@media (max-width: 768px) {
    .planning-view-all { display: flex; }

    .planning-view-all a {
        display         : inline-flex;
        align-items     : center;
        gap             : 8px;
        background      : linear-gradient(135deg, var(--gold), var(--gold-soft));
        color           : #000;
        font-weight     : 700;
        font-size       : .8rem;
        letter-spacing  : .5px;
        padding         : 14px 28px;
        border-radius   : 50px;
        min-height      : var(--touch-target);
        text-decoration : none;
        box-shadow      : 0 4px 18px rgba(255,215,0,.28);
        transition      : transform .2s ease, box-shadow .2s ease;
    }

    .planning-view-all a:active {
        transform : scale(.97);
        box-shadow: 0 2px 10px rgba(255,215,0,.2);
    }
}

/* On desktop make sure 4th card is always visible */
@media (min-width: 769px) {
    .planning__card:nth-child(4) { display: block !important; }
    .planning-view-all            { display: none !important; }
}

/* ================================================================
   6. PURPOSE SECTION (index.html)
================================================================ */

@media (max-width: 768px) {
    .purpose { padding: 60px var(--mob-pad); }

    .purpose__grid {
        grid-template-columns: 1fr;
        gap      : var(--mob-gap);
        max-width: 420px;
        margin   : 0 auto;
    }

    /* Remove fixed height so text never clips */
    .purpose__card {
        height : auto !important;
        padding: 30px 24px;
    }

    /* Disable hover lift on touch */
    .purpose__card:hover { transform: none; }
}

/* ================================================================
   7. WHY CHOOSE US (index.html)
   Cards: hover-only overlay → always-visible stacked layout
================================================================ */

@media (max-width: 768px) {
    .why-choose { padding: 60px var(--mob-pad); }

    .why-grid {
        grid-template-columns: 1fr;
        gap      : var(--mob-gap);
        max-width: 480px;
        margin   : 0 auto;
    }

    /* ── Card restructure ─────────────────────────────────────── */
    .why-card {
        width         : 100% !important;
        max-width     : 100% !important;
        height        : auto !important;
        min-height    : 0;
        border-radius : var(--card-r);
        overflow      : hidden;
        display       : flex;
        flex-direction: column;
        cursor        : default;
        transition    : none;
        border        : 1px solid rgba(255,215,0,.1);
    }

    .why-card:hover  { transform: none !important; box-shadow: none; }
    .why-card::after { display: none !important; } /* disable mouse glow */

    /* Image block */
    .why-image {
        position         : relative !important;
        inset            : unset;
        height           : 180px;
        flex-shrink      : 0;
        background-size  : cover;
        background-position: center;
        border-radius    : var(--card-r) var(--card-r) 0 0;
        transition       : transform .4s ease;
    }

    .why-card:active .why-image { transform: scale(1.04); }

    /* Gold border pseudo: replaced by card border */
    .why-card::before { display: none !important; }

    /* Overlay: static content block */
    .why-overlay {
        position  : static !important;
        background: var(--black-soft);
        padding   : 18px 18px 20px;
        display   : flex;
        flex-direction: column;
        gap       : 6px;
        border    : none;
        border-radius: 0 0 var(--card-r) var(--card-r);
    }

    .why-number {
        position  : static !important;
        font-size : 1.5rem;
        color     : rgba(255,215,0,.45);
        top       : unset; left: unset;
    }

    .why-overlay h3 {
        color    : var(--white);
        font-size: 1rem;
    }

    .why-overlay p {
        color    : var(--gray);
        font-size: .8rem;
        line-height: 1.6;
    }

    .why-overlay a {
        display        : inline-flex;
        align-items    : center;
        gap            : 6px;
        color          : var(--gold);
        font-size      : .76rem;
        font-weight    : 600;
        text-decoration: none;
        min-height     : 36px;
    }
}

/* ================================================================
   8. SERVICES PAGE — HERO
================================================================ */

@media (max-width: 768px) {
    .services-hero {
        min-height: 75vh;
        padding   : 0;
    }

    .services-hero__content {
        text-align: center;
        max-width : 100%;
        padding   : 100px 5% 60px;
    }

    .services-hero__title {
        font-size  : clamp(2rem, 9vw, 3.5rem);
        line-height: 1.1;
        word-break : break-word;
    }

    .services-hero__desc {
        font-size : .85rem;
        line-height: 1.7;
        max-width : 100%;
    }

    .services-hero__actions {
        flex-direction: column;
        align-items   : center;
        gap           : 10px;
        margin-top    : 26px;
    }

    .services-hero__actions .btn-primary,
    .services-hero__actions .btn-secondary {
        width          : 100%;
        max-width      : 300px;
        min-height     : var(--touch-target);
        justify-content: center;
    }

    /* Disable grain — performance on mobile */
    .services-hero__grain { display: none; }
}

/* ================================================================
   9. SERVICE NAV CARDS (services.html)
   Remove magnetic hover; ensure 44px tap targets
================================================================ */

@media (max-width: 768px) {
    .service-nav { padding: 50px var(--mob-pad) 40px; }

    .service-nav__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .service-nav__card {
        padding      : 0 18px;
        min-height   : 64px;
        border-radius: 12px;
        display      : flex;
        align-items  : center;
        gap          : 14px;
        /* Disable magnetic transform from services.js */
        transform    : none !important;
    }

    .service-nav__card:active {
        background: rgba(255,215,0,.05);
    }

    .service-nav__card-icon {
        width      : 44px;
        height     : 44px;
        flex-shrink: 0;
    }

    .service-nav__card-body h3  { font-size: .88rem; }
    .service-nav__card-body span{ font-size: .72rem; }
}

/* ================================================================
   10. SHOWCASE SECTIONS (services.html)
   Stack image above content on mobile; disable parallax
================================================================ */

@media (max-width: 900px) {
    .showcase {
        flex-direction: column !important;
        min-height    : auto;
        padding       : 60px 5% !important;
        gap           : 0 !important;
    }

    .showcase__image-col {
        width     : 100% !important;
        max-height: 280px;
        flex-shrink: 0;
    }

    .showcase__image-wrap {
        height       : 280px;
        border-radius: var(--card-r) var(--card-r) 0 0;
        overflow     : hidden;
    }

    /* Disable JS parallax on mobile */
    .showcase__image { transform: none !important; }

    .showcase__content-col {
        width        : 100% !important;
        padding      : 30px 0 0 !important;
    }

    .showcase__title {
        font-size  : clamp(1.6rem, 7vw, 2.6rem);
        word-break : break-word;
    }

    .showcase__desc { font-size: .84rem; line-height: 1.7; }

    .showcase__include-list {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .showcase__include-item { min-height: var(--touch-target); }

    .showcase .btn-primary {
        width          : 100%;
        max-width      : 300px;
        min-height     : var(--touch-target);
        justify-content: center;
        margin-top     : 6px;
    }

    /* Decorative large number — reduce size */
    .showcase__number {
        font-size: 5rem;
        opacity  : 0.4;
    }
}

/* ================================================================
   11. MENU PAGE
   Tab nav: scrollable; categories: collapsible; cards: always-visible
================================================================ */

/* ── 11a. Sticky tab nav ──────────────────────────────────────── */
@media (max-width: 768px) {
    .menu-nav {
        top: 68px; /* align with navbar height */
    }

    .menu-nav__container {
        gap           : 0;
        padding       : 0 4%;
        justify-content: flex-start;
        overflow-x    : auto;
        scrollbar-width: none;
    }

    .menu-nav__container::-webkit-scrollbar { display: none; }

    .menu-nav__link {
        padding   : 0 14px;
        font-size : .72rem;
        min-height: var(--touch-target);
        display   : flex;
        align-items: center;
        white-space: nowrap;
    }
}

/* ── 11b. Category section padding ───────────────────────────── */
@media (max-width: 768px) {
    .menu-category-section {
        padding      : 28px var(--mob-pad) 40px;
        border-bottom: 1px solid rgba(255,215,0,.06);
    }

    .menu-category-section h1.section-title {
        font-size : clamp(1.5rem, 6.5vw, 2.2rem);
        word-break: break-word;
    }
}

/* ── 11c. Collapsible category header ────────────────────────── */
/*
   menu.js will add/remove .collapsed class.
   This CSS handles the transition.
*/
@media (max-width: 768px) {
    .menu-category-header {
        display        : flex;
        align-items    : center;
        justify-content: space-between;
        cursor         : pointer;
        padding        : 14px 0;
        user-select    : none;
        -webkit-user-select: none;
    }

    /* Chevron indicator */
    .menu-category-header .menu-collapse-icon {
        display      : inline-flex;
        align-items  : center;
        justify-content: center;
        width        : 28px;
        height       : 28px;
        border-radius: 50%;
        border       : 1px solid rgba(255,215,0,.2);
        flex-shrink  : 0;
        transition   : transform .3s ease, border-color .3s ease;
    }

    .menu-category-header .menu-collapse-icon svg {
        width : 14px;
        height: 14px;
        color : var(--gold);
        transition: transform .3s ease;
    }

    .menu-category-section.collapsed .menu-collapse-icon { border-color: rgba(255,215,0,.12); }
    .menu-category-section.collapsed .menu-collapse-icon svg { transform: rotate(-90deg); }

    /* Collapsible body */
    .menu-collapsible-body {
        overflow  : hidden;
        max-height: 9999px;
        opacity   : 1;
        transition: max-height .4s ease, opacity .3s ease;
    }

    .menu-category-section.collapsed .menu-collapsible-body {
        max-height: 0 !important;
        opacity   : 0;
    }
}

/* ── 11d. Menu grid — single column ──────────────────────────── */
@media (max-width: 768px) {
    .menu-grid,
    .menu-grid--small {
        grid-template-columns: 1fr;
        gap: var(--mob-gap);
    }
}

/* ── 11e. Menu card — always-visible layout ───────────────────── */
@media (max-width: 768px) {
    .menu-card {
        display       : flex !important;
        flex-direction: column;
        height        : auto !important;
        min-height    : 0;
        border-radius : var(--card-r);
        overflow      : hidden;
        border        : 1px solid rgba(255,215,0,.09);
        background    : var(--black-soft);
    }

    .menu-card__image {
        height    : 200px;
        flex-shrink: 0;
        overflow  : hidden;
    }

    .menu-card__image img {
        width        : 100%;
        height       : 100%;
        object-fit   : cover;
        display      : block;
        transition   : transform .4s ease;
    }

    .menu-card:active .menu-card__image img { transform: scale(1.04); }

    .menu-card__content {
        padding: 16px 16px 18px;
        display: flex;
        flex-direction: column;
        gap    : 8px;
        flex   : 1;
    }

    .menu-card__content h3,
    .menu-card__content h4 {
        font-size    : .9rem;
        color        : var(--white);
        margin       : 0;
        line-height  : 1.4;
    }

    .menu-card__content p {
        font-size  : .78rem;
        color      : var(--gray);
        line-height: 1.6;
        margin     : 0;
    }

    /* Explore button — permanently visible on mobile */
    .menu-card__btn {
        display     : inline-flex !important;
        align-items : center;
        gap         : 6px;
        margin-top  : 6px;
        padding     : 9px 16px;
        background  : rgba(255,215,0,.07);
        border      : 1px solid rgba(255,215,0,.2);
        border-radius: 50px;
        color       : var(--gold);
        font-size   : .74rem;
        font-weight : 600;
        cursor      : pointer;
        font-family : inherit;
        min-height  : 40px;
        align-self  : flex-start;
        transition  : background .2s ease, color .2s ease;
    }

    .menu-card__btn:active {
        background: rgba(255,215,0,.16);
        color     : #fff;
    }
}

/* ── 11f. Menu modal — bottom sheet on mobile ────────────────── */
@media (max-width: 768px) {
    .menu-modal-overlay {
        align-items: flex-end !important;
        padding    : 0 !important;
    }

    .menu-modal {
        width        : 100% !important;
        max-width    : 100% !important;
        border-radius: 20px 20px 0 0 !important;
        position     : relative;
        max-height   : 90vh;
        overflow-y   : auto;
        transform    : translateY(30px);
        transition   : transform .32s ease;
    }

    .menu-modal-overlay.open .menu-modal {
        transform: translateY(0);
    }

    .menu-modal__image-wrap {
        height        : 220px;
        border-radius : 20px 20px 0 0;
        overflow      : hidden;
    }

    .menu-modal__image {
        width     : 100%;
        height    : 100%;
        object-fit: cover;
    }

    .menu-modal__body   { padding: 20px 18px 32px; }
    .menu-modal__title  { font-size: 1.3rem; }

    .menu-modal__close {
        top   : 12px;
        right : 12px;
        width : 40px;
        height: 40px;
    }
}

/* ================================================================
   12. GALLERY PAGE
   Progressive disclosure: show 8 images, "Load More" button
   Layout: 2-col square grid (touch-friendly masonry feel)
================================================================ */

@media (max-width: 768px) {
    /* ── 12a. Intro section ───────────────────────────────────── */
    .gallery-intro {
        padding   : 40px var(--mob-pad) 28px;
        min-height: auto;
    }

    .gallery-intro__content h2 {
        font-size : clamp(1.4rem, 6vw, 2.2rem);
        word-break: break-word;
    }

    /* ── 12b. Grid section ────────────────────────────────────── */
    .gallery-grid-section {
        padding: 10px var(--mob-pad) 40px;
    }

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

    /* ── 12c. Progressive disclosure — hide images 9+ ─────────── */
    .gallery-card:nth-child(n+9) { display: none; }

    /* ── 12d. Gallery card — square, no hover overlay ──────────── */
    .gallery-card {
        aspect-ratio : 1 / 1;
        border-radius: 10px;
        overflow     : hidden;
        border       : 1px solid rgba(255,215,0,.07);
        transition   : none;
    }

    /* Disable hover effects (no hover on touch) */
    .gallery-card:hover {
        transform    : none !important;
        border-color : rgba(255,215,0,.07) !important;
    }

    .gallery-card img {
        width     : 100%;
        height    : 100%;
        object-fit: cover;
        display   : block;
        transition: transform .4s ease;
    }

    .gallery-card:active img { transform: scale(1.06); }

    /* ── 12e. Gallery CTA ─────────────────────────────────────── */
    .gallery-cta {
        min-height: auto;
        padding   : 70px var(--mob-pad);
    }

    .gallery-cta h2 {
        font-size : clamp(1.5rem, 6.5vw, 2.4rem);
        word-break: break-word;
    }

    .gallery-cta .btn-primary {
        width          : 100%;
        max-width      : 300px;
        min-height     : var(--touch-target);
        justify-content: center;
    }
}

/* Desktop: show all gallery cards */
@media (min-width: 769px) {
    .gallery-card:nth-child(n+9) { display: block !important; }
    .gallery-load-more             { display: none !important; }
}

/* ── "Load More" button (injected by JS) ─────────────────────── */
.gallery-load-more {
    display: none; /* hidden on desktop */
}

@media (max-width: 768px) {
    .gallery-load-more {
        display        : flex;
        justify-content: center;
        margin-top     : 20px;
    }

    .gallery-load-more-btn {
        display     : inline-flex;
        align-items : center;
        gap         : 8px;
        background  : transparent;
        border      : 1px solid rgba(255,215,0,.28);
        border-radius: 50px;
        color       : var(--white);
        font-family : inherit;
        font-size   : .8rem;
        font-weight : 600;
        padding     : 0 28px;
        min-height  : var(--touch-target);
        cursor      : pointer;
        letter-spacing: .4px;
        transition  : border-color .2s ease, color .2s ease, background .2s ease;
    }

    .gallery-load-more-btn:active {
        background  : rgba(255,215,0,.06);
        border-color: var(--gold);
        color       : var(--gold);
    }
}

/* ── Gallery hero section ─────────────────────────────────────── */
@media (max-width: 768px) {
    .gallery-hero__actions {
        flex-direction: column;
        align-items   : center;
        gap           : 10px;
        margin-top    : 22px;
    }

    .gallery-hero__actions a {
        width          : 100%;
        max-width      : 300px;
        min-height     : var(--touch-target);
        display        : flex;
        align-items    : center;
        justify-content: center;
        gap            : 8px;
    }

    .static-service {
        font-size : clamp(1.3rem, 5vw, 2.4rem);
        word-break: break-word;
        padding   : 0 10px;
        text-align: center;
    }
}

/* ================================================================
   13. ABOUT PAGE
================================================================ */

@media (max-width: 768px) {
    /* Hero */
    .about-hero {
        min-height: 72vh;
        padding   : 100px 5% 60px;
    }

    .about-hero__actions {
        flex-direction: column;
        align-items   : center;
        gap           : 10px;
        margin-top    : 22px;
    }

    .about-hero__actions a {
        width          : 100%;
        max-width      : 300px;
        min-height     : var(--touch-target);
        display        : flex;
        align-items    : center;
        justify-content: center;
    }

    /* Our story image */
    .our-story { padding: 60px var(--mob-pad); }

    .our-story__container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .our-story__image img {
        height    : auto !important;
        max-height: 280px;
        width     : 100%;
        object-fit: cover;
    }

    /* Values grid */
    .about-values { padding: 60px var(--mob-pad); }

    .about-values__grid {
        grid-template-columns: 1fr;
        gap      : var(--mob-gap);
        max-width: 420px;
        margin   : 0 auto;
    }

    .value-card {
        max-width : 100% !important;
        max-height: none !important;
        padding   : 26px 22px;
    }

    .value-card:hover { transform: none; }

    /* Why about */
    .why-about { padding: 60px var(--mob-pad); }

    .why-about__grid {
        grid-template-columns: 1fr;
        gap      : var(--mob-gap);
        max-width: 420px;
        margin   : 0 auto;
    }

    /* about's .why-card (different from index why-card) */
    .why-about .why-card {
        max-width : 100% !important;
        max-height: none !important;
        padding   : 22px 20px;
    }

    /* How we work */
    .how-we-work { padding: 60px var(--mob-pad); }

    .how-we-work__grid {
        grid-template-columns: 1fr;
        gap      : var(--mob-gap);
        max-width: 420px;
        margin   : 0 auto;
    }

    .work-step {
        max-width : 100% !important;
        max-height: none !important;
        padding   : 24px 20px;
    }

    /* About CTA */
    .about-cta {
        min-height: auto;
        padding   : 80px 5%;
    }

    .about-cta h2 {
        font-size : clamp(1.6rem, 6.5vw, 2.6rem);
        word-break: break-word;
    }

    .about-cta .btn-primary {
        width          : 100%;
        max-width      : 300px;
        min-height     : var(--touch-target);
        display        : flex;
        align-items    : center;
        justify-content: center;
        margin: 0 auto;
    }
}

/* ================================================================
   14. CONTACT PAGE
================================================================ */

@media (max-width: 768px) {
    .contact-section { padding: 52px var(--mob-pad); }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Remove sticky positioning on mobile (causes scroll issues) */
    .contact-info { position: static !important; }

    .contact-info h2 {
        font-size : clamp(1.5rem, 6vw, 2rem);
        word-break: break-word;
    }

    .contact-intro { font-size: .86rem; }

    .contact-card { max-width: 100%; }

    .contact-item {
        padding   : 14px 16px;
        min-height: 52px;
        flex-wrap : wrap;
        gap       : 10px;
    }

    /* Form */
    .contact-form-wrapper {
        padding  : 22px 18px;
        max-width: 100%;
    }

    .contact-form {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .form-group--full { grid-column: auto; }

    /* Inputs: font-size 16px prevents iOS zoom */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size : 16px;
        min-height: var(--touch-target);
        padding   : 12px 14px;
    }

    .form-group textarea { min-height: 110px; }

    .form-group label { font-size: .82rem; }

    .contact-form .btn-primary {
        grid-column    : auto;
        width          : 100%;
        min-height     : var(--touch-target);
        justify-content: center;
    }

    /* CTA */
    .contact-cta { padding: 60px var(--mob-pad); }

    .contact-cta h2 {
        font-size : clamp(1.6rem, 6vw, 2.4rem);
        word-break: break-word;
    }

    .contact-cta .btn-primary {
        width          : 100%;
        max-width      : 300px;
        min-height     : var(--touch-target);
        display        : flex;
        align-items    : center;
        justify-content: center;
        margin         : 0 auto;
    }
}

/* ── Confirmation modal — bottom sheet ───────────────────────── */
@media (max-width: 768px) {
    .confirm-overlay {
        align-items: flex-end !important;
        padding    : 0 !important;
    }

    .confirm-modal {
        border-radius: 20px 20px 0 0 !important;
        max-height   : 90vh;
        padding      : 24px 18px 30px !important;
        width        : 100%;
        transform    : translateY(30px) scale(1) !important;
        transition   : transform .32s ease !important;
    }

    .confirm-overlay.open .confirm-modal {
        transform: translateY(0) scale(1) !important;
    }

    .confirm-actions { flex-direction: column; gap: 10px; }

    .confirm-btn-edit,
    .confirm-btn-whatsapp {
        flex      : unset;
        width     : 100%;
        min-height: var(--touch-target);
        font-size : .78rem;
    }
}

/* ================================================================
   15. FOOTER — single column on mobile
================================================================ */

@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap    : 32px;
        padding: 50px var(--mob-pad) 36px;
        width  : 100%;
    }

    .footer-brand       { grid-column: auto; }
    .footer-brand__desc { max-width: 100%; }

    .footer-socials {
        flex-direction: column;
        gap           : 10px;
    }

    .footer-social-pill {
        width          : 100%;
        max-width      : 280px;
        justify-content: center;
        min-height     : 44px;
    }

    .footer-cta-btn {
        width          : 100%;
        max-width      : 280px;
        justify-content: center;
        min-height     : var(--touch-target);
    }

    .footer-col__links a {
        min-height: 38px;
        display   : flex;
        align-items: center;
    }

    .footer-bottom {
        flex-direction: column;
        text-align    : center;
        gap           : 6px;
        padding       : 16px var(--mob-pad);
    }
}

/* ================================================================
   16. SECTION TITLES & EYEBROWS — global overflow prevention
================================================================ */

@media (max-width: 480px) {
    .section-title {
        font-size    : clamp(1.4rem, 6.5vw, 2rem) !important;
        word-break   : break-word;
        overflow-wrap: break-word;
    }

    .section-eyebrow {
        font-size    : .62rem;
        letter-spacing: 2px;
    }

    .section-subtitle {
        font-size  : .82rem;
        line-height: 1.7;
    }

    .ornament__line { width: 36px; }
}

/* ================================================================
   17. VERY SMALL SCREENS (≤380px)
================================================================ */

@media (max-width: 380px) {
    .scroll-indicator     { display: none; }
    .contact-form-wrapper { padding: 18px 14px; }
    .contact-form         { gap: 11px; }

    .brand-name   { font-size: 1rem; }
    .brand-tagline{ font-size: .5rem; }
    .logo         { width: 38px; height: 38px; }
    .nav-container{ gap: 8px; }

    .planning__img { height: 160px; }
}

/* ================================================================
   18. PREFERS-REDUCED-MOTION — accessibility
================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration     : 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration    : 0.01ms !important;
    }

    .services-hero__grain { display: none !important; }
    .hero::before         { display: none !important; }
}