/* =========================================================
   RESPONSIVE.CSS — Mobile / Tablet Overrides (CLEANED)
   - NAV + HERO switch at 960px (per request)
   - Services + Mobile menu blocks also use 960px
   - Keeps your existing behavior, just organized + consistent
   ========================================================= */

/* =========================================================
   1) NAV / HEADER (fixed overlay header)
   ========================================================= */

/* Desktop default: hamburger + panel OFF */
.mobile-only {
    display: none !important;
}

.mobile-panel {
    display: none !important;
}

/* Mobile/Tablet header behavior */
@media (max-width: 960px) {

    /* tighter edge + top spacing on mobile */
    :root {
        --edge-pad: 16px;
        --top-pad: 10px;
    }

    /* overlay header keeps safe-area */
    .site-header {
        padding-top: calc(var(--top-pad) + env(safe-area-inset-top));
        padding-bottom: 10px;
    }

    /* pin cluster with safe-area; allow it to stretch */
    .header-right {
        top: calc(var(--top-pad) + env(safe-area-inset-top));
        right: calc(var(--edge-pad) + env(safe-area-inset-right));
        left: calc(var(--edge-pad) + env(safe-area-inset-left));

        width: auto;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    /* switch: hide desktop pill nav */
    .nav-pill {
        display: none !important;
    }

    /* actions row spacing */
    .header-actions {
        gap: 10px;
    }

    /* CTA shrinks nicely */
    .book-cta {
        padding: 10px 14px;
        font-size: .95rem;
        font-weight: 800;
        box-shadow: 0 18px 45px rgba(0, 0, 0, .45);
    }

    /* switch: show hamburger + allow panel to exist */
    .mobile-only {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, .14);
        background: rgba(10, 10, 10, .42);
        backdrop-filter: blur(16px);
        box-shadow: 0 14px 45px rgba(0, 0, 0, .35);
        color: rgba(255, 255, 255, .92);
        font-size: 1.1rem;
        line-height: 1;
    }

    /* in case .icon-btn has defaults elsewhere */
    .icon-btn.mobile-only {
        padding: 0;
    }

    /* IMPORTANT: allow panel to exist so opacity/transform can animate */
    .mobile-panel {
        display: block !important;
    }
}

/* Extra-small phones: CTA a touch smaller */
@media (max-width: 420px) {
    .book-cta {
        padding: 10px 12px;
        font-size: .9rem;
    }
}


/* =========================================================
   3) SERVICES + STAFF WHEELS
   ========================================================= */
@media (max-width: 960px) {

    .services-tiles {
        padding: 70px 0 84px;
        /* was 90 / 120 */
    }

    .services-tiles::before {
        inset: -110px -90px auto -90px;
        height: 300px;
    }

    .section-head {
        margin-bottom: 20px;
    }

    .tiles-grid {
        gap: 14px;
    }

    .service-tile {
        height: 360px;
        /* was 520 */
        border-radius: 22px;
    }

    .tile-inner {
        padding: 18px;
    }

    /* Mobile has no hover: keep content visible */
    .tile-bottom {
        transform: none;
    }

    .tile-desc {
        max-height: none;
        opacity: 1;
        margin-top: 6px;
    }

    /* avoid hover jumps on tap */
    .service-tile:hover {
        transform: none;
    }

    .service-tile:hover .tile-bg {
        transform: scale(1.05);
    }

    .service-tile:hover .tile-arrow {
        transform: none;
    }

    /* Corner logo: stop pushing off screen */
    .service-tile .tile-corner {
        top: 14px;
        right: 14px;
        width: 120px;
        height: 56px;
        transform: none;
        /* remove translate(50px,-20px) */
        opacity: .95;
    }

    .service-tile .tile-corner-logo {
        filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45));
    }
}

@media (max-width: 420px) {
    .services-tiles {
        padding: 64px 0 76px;
    }

    .service-tile {
        height: 330px;
        border-radius: 20px;
    }

    .tile-inner {
        padding: 16px;
    }

    .service-tile .tile-corner {
        width: 108px;
        height: 52px;
    }
}


/* =========================================================
   4) MOBILE MENU (panel + slide-down card + burger->X)
   ========================================================= */
@media (max-width: 960px) {

    /* overlay */
    .mobile-panel {
        /* break out of .container */
        max-width: none !important;
        width: 100vw !important;
        padding: 0 !important;
        margin: 0 !important;

        position: fixed;
        inset: 0;
        left: 0;
        right: 0;

        z-index: 9998;

        opacity: 0;
        pointer-events: none;
        background: transparent;

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

        transition: opacity 220ms ease;
    }

    .mobile-panel.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* menu card */
    .mobile-menu {
        width: min(560px, calc(100% - (var(--edge-pad) * 2)));
        margin: calc(var(--top-pad) + env(safe-area-inset-top) + 70px) auto 0;

        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, .12);
        background: rgba(10, 10, 10, .78);
        box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
        padding: 14px;

        transform: translateY(-14px);
        opacity: 0;

        transition:
            transform 260ms cubic-bezier(.2, .9, .2, 1),
            opacity 220ms ease;
    }

    .mobile-panel.is-open .mobile-menu {
        transform: translateY(0);
        opacity: 1;
    }

    .mobile-menu-links {
        display: grid;
        gap: 10px;
    }

    .mobile-link {
        display: flex;
        align-items: center;

        min-height: 48px;
        padding: 12px 14px;
        border-radius: 14px;

        border: 1px solid rgba(255, 255, 255, .10);
        background: rgba(255, 255, 255, .03);
        color: rgba(255, 255, 255, .88);
        font-weight: 760;
    }

    .mobile-link.is-active {
        border-color: color-mix(in srgb, var(--accent) 42%, transparent);
        background: color-mix(in srgb, var(--accent) 14%, transparent);
    }

    /* lock scroll when open */
    body.menu-open {
        overflow: hidden;
    }

    /* burger icon */
    #mobileMenuBtn {
        position: relative;
    }

    .burger {
        width: 18px;
        height: 14px;
        display: inline-block;
        position: relative;
    }

    .burger span {
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .9);

        transition:
            transform 260ms cubic-bezier(.2, .9, .2, 1),
            opacity 200ms ease,
            background 220ms ease,
            top 260ms cubic-bezier(.2, .9, .2, 1);
    }

    .burger span:nth-child(1) {
        top: 0;
    }

    .burger span:nth-child(2) {
        top: 6px;
    }

    .burger span:nth-child(3) {
        top: 12px;
    }

    /* open -> X (red) */
    #mobileMenuBtn.is-open .burger span {
        background: #ff4d4d;
    }

    #mobileMenuBtn.is-open .burger span:nth-child(1) {
        top: 6px;
        transform: rotate(45deg);
    }

    #mobileMenuBtn.is-open .burger span:nth-child(2) {
        opacity: 0;
        transform: scaleX(.4);
    }

    #mobileMenuBtn.is-open .burger span:nth-child(3) {
        top: 6px;
        transform: rotate(-45deg);
    }
}


/* =========================================================
   5) SPA MOBILE MENU THEME (light surface)
   ========================================================= */
@media (max-width: 960px) {
    html[data-brand="spa"] .mobile-menu {
        background: rgba(255, 255, 255, .88);
        border-color: rgba(0, 0, 0, .10);
        box-shadow: 0 24px 70px rgba(0, 0, 0, .25);
    }

    html[data-brand="spa"] .mobile-link {
        background: rgba(0, 0, 0, .04);
        border-color: rgba(0, 0, 0, .08);
        color: rgba(0, 0, 0, .78);
    }

    html[data-brand="spa"] .mobile-link.is-active {
        background: rgba(214, 163, 107, .20);
        border-color: rgba(214, 163, 107, .45);
        color: rgba(0, 0, 0, .95);
    }
}