/* ==========================================================
   Mobile-only design enhancements.
   Every rule here is scoped under @media (max-width: 768px) so
   desktop layouts are never touched.
   ========================================================== */

@media (max-width: 768px) {

    /* "Who We Are" mosaic — taller box + larger background scale so the
       "Building Websites. Expanding Reach." text baked into the source
       photo doesn't get cropped/overlapping across the sliced cells. */
    #about-mosaic {
        min-height: 480px !important;
    }
    #about-mosaic .mosaic-panel {
        background-size: 340% 230% !important;
    }

    /* Caption backdrop — push the gradient higher and darker so the quote
       always sits on a solid dark area instead of a busy image cell. */
    #about-mosaic-fade {
        background: linear-gradient(to top, rgba(17,29,51,0.97) 0%, rgba(17,29,51,0.85) 38%, rgba(17,29,51,0.25) 70%, transparent 100%) !important;
    }
    #about-mosaic-quote {
        font-size: 1rem !important;
        line-height: 1.55 !important;
    }
    #about-mosaic-caption {
        padding: 22px 18px 26px !important;
    }

    /* Breathing room between the subtitle, mosaic, and Mission/Vision cards */
    #about-subtitle {
        margin-bottom: 0.5rem !important;
    }
    #about-mosaic-wrap {
        margin-bottom: 4px !important;
    }
    #about-mosaic-grid {
        gap: 2.5rem !important;
    }

    /* Tighten the gap between the subtitle and the mosaic image */
    #about-intro {
        margin-bottom: 2rem !important;
    }

    /* Mission/Vision icon circles — bigger with a colored ring accent so
       they read as intentional rather than small/flat against the cards */
    #mission-icon {
        width: 56px !important;
        height: 56px !important;
        border: 2px solid rgba(201,168,76,0.35) !important;
        box-shadow: 0 0 0 4px rgba(201,168,76,0.08) !important;
    }
    #vision-icon {
        width: 56px !important;
        height: 56px !important;
        border: 2px solid rgba(42,157,143,0.35) !important;
        box-shadow: 0 0 0 4px rgba(42,157,143,0.08) !important;
    }

    /* Mobile nav dropdown — thin dividers between links so each item reads
       as a distinct row instead of loosely stacked text. */
    #mobile-menu-links .mobile-menu-link:not(:last-of-type) {
        border-bottom: 1px solid rgba(47,58,69,0.07) !important;
    }

    /* Get Started CTA — clearer separation from the links above it, and a
       stronger shadow so it doesn't look like it's clipping the panel edge. */
    #mobile-menu-cta {
        margin-top: 14px !important;
        box-shadow: 0 10px 24px rgba(201,168,76,0.4) !important;
    }
    #mobile-menu-links {
        padding-bottom: 16px !important;
    }

    /* Parallax dividers — background-attachment:fixed is broken/ignored on
       iOS (Safari and any other iOS browser, since they all run WebKit), so
       the dramatic bridge-photo dividers render flat there. Chrome on
       desktop/Android and DevTools mobile emulation handle fixed attachment
       fine, so this fallback is scoped to real iOS only via the
       `ios-fixed-broken` class mobile-design.js adds — everywhere else keeps
       the native fixed background, same as the footer.

       On iOS, mobile-design.js replaces the CSS background with a separate
       oversized `.ios-parallax-layer` div behind the text, translated via
       scroll-linked JS — a background-position pan can't decouple the photo
       from the text since both live in the same scrolling box, but a
       transformed layer can move at its own rate. */
    .ios-parallax-layer {
        position: absolute;
        inset: -48% 0;
        background-size: cover;
        background-repeat: no-repeat;
        will-change: transform;
        z-index: 0;
    }

    /* Hero ambient orbs — the radial gradients are tuned for large desktop
       canvases and read as almost invisible on small, bright phone screens.
       Boost intensity rather than position (repositioning risks clipping
       differently across phone sizes). */
    .hero-orb {
        filter: brightness(1.45) saturate(1.3);
        transform: scale(1.3);
    }

    /* Hero trust avatars — fade in as one flat block on every breakpoint via
       the existing GSAP heroTl; on mobile give them an individual pop-in
       stagger instead so the row feels alive. Triggered by mobile-design.js
       once heroTl reveals #hero-trust. */
    @keyframes hero-avatar-pop {
        0%   { transform: scale(0.3); opacity: 0; }
        60%  { transform: scale(1.15); opacity: 1; }
        100% { transform: scale(1); opacity: 1; }
    }
    #hero-avatars.avatars-pop > div {
        animation: hero-avatar-pop 0.45s cubic-bezier(.34,1.56,.64,1) both;
    }
    #hero-avatars.avatars-pop > div:nth-child(1) { animation-delay: 0s; }
    #hero-avatars.avatars-pop > div:nth-child(2) { animation-delay: 0.1s; }
    #hero-avatars.avatars-pop > div:nth-child(3) { animation-delay: 0.2s; }
    #hero-avatars.avatars-pop > div:nth-child(4) { animation-delay: 0.3s; }

    /* Hero primary CTA — its shimmer/glow only fires on :hover, which never
       triggers on touch, so on mobile the button just sits flat. Give it a
       passive autoplay shimmer (reusing the sitewide btn-shine keyframe) and
       a tap/active press-down on both hero buttons for touch feedback. */
    .hero-btn-primary::before {
        content: '';
        position: absolute;
        top: -50%; left: -80%;
        width: 48%; height: 200%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
        transform: skewX(-18deg);
        pointer-events: none;
        animation: btn-shine 3.2s ease-in-out infinite 1.2s;
    }
    .hero-btn-primary:active,
    .hero-btn-secondary:active {
        transform: scale(0.96);
    }

    /* Mobile nav dropdown — wow-factor pass: icon per link, dim backdrop
       behind the panel, and a staggered slide-in for the links/CTA when the
       menu opens. The backdrop element and menu-opening/is-visible classes
       are added by mobile-design.js. */
    #mobile-menu {
        position: relative;
        z-index: 41;
    }
    #mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(21,32,44,0.42);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        transition: opacity 0.25s ease;
        z-index: 45;
    }
    #mobile-menu-backdrop.is-visible {
        opacity: 1;
    }

    #mobile-menu-links .mobile-menu-link {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }
    #mobile-menu-links .mobile-menu-link::before {
        content: '';
        display: inline-block;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0.85;
    }
    #mobile-menu-links a:nth-child(1)::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Ccircle cx='12' cy='8' r='1' fill='%23C9A84C'/%3E%3C/svg%3E");
    }
    #mobile-menu-links a:nth-child(2)::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
    }
    #mobile-menu-links a:nth-child(3)::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='2'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cline x1='8' y1='8' x2='16' y2='8'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3Cline x1='8' y1='16' x2='13' y2='16'/%3E%3C/svg%3E");
    }
    #mobile-menu-links a:nth-child(4)::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5' fill='%23C9A84C'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
    }
    #mobile-menu-links a:nth-child(5)::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
    }

    @keyframes mobile-menu-link-in {
        0%   { opacity: 0; transform: translateX(-14px); }
        100% { opacity: 1; transform: translateX(0); }
    }
    #mobile-menu.menu-opening #mobile-menu-links > a {
        animation: mobile-menu-link-in 0.35s ease both;
    }
    #mobile-menu.menu-opening #mobile-menu-links > a:nth-child(1) { animation-delay: 0.03s; }
    #mobile-menu.menu-opening #mobile-menu-links > a:nth-child(2) { animation-delay: 0.08s; }
    #mobile-menu.menu-opening #mobile-menu-links > a:nth-child(3) { animation-delay: 0.13s; }
    #mobile-menu.menu-opening #mobile-menu-links > a:nth-child(4) { animation-delay: 0.18s; }
    #mobile-menu.menu-opening #mobile-menu-links > a:nth-child(5) { animation-delay: 0.23s; }
    #mobile-menu.menu-opening #mobile-menu-links > a:nth-child(6) { animation-delay: 0.28s; }

    /* Hamburger → X morph. menu-btn is already md:hidden (mobile/tablet
       only), so no extra media-query gating is needed for the button itself —
       this block just lives here to keep all mobile-only rules in one file. */
    #menu-btn {
        width: 24px;
        height: 24px;
    }
    #menu-btn .hamburger-bar {
        position: absolute;
        left: 0;
        width: 24px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
    }
    #menu-btn .hamburger-bar:nth-child(1) { top: 6px; }
    #menu-btn .hamburger-bar:nth-child(2) { top: 11px; }
    #menu-btn .hamburger-bar:nth-child(3) { top: 16px; }
    #menu-btn.is-open .hamburger-bar:nth-child(1) { top: 11px; transform: rotate(45deg); }
    #menu-btn.is-open .hamburger-bar:nth-child(2) { opacity: 0; }
    #menu-btn.is-open .hamburger-bar:nth-child(3) { top: 11px; transform: rotate(-45deg); }

    /* Sticky floating "Get Started" pill — surfaces the CTA while scrolling
       through content sections, hidden over the hero (which already has its
       own CTA) and over the contact section (which has the real form). */
    #mobile-sticky-cta {
        position: fixed;
        left: 50%;
        bottom: 18px;
        transform: translate(-50%, 24px) scale(0.9);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.55s cubic-bezier(.34,1.56,.64,1);
        background: linear-gradient(135deg, #C9A84C 0%, #E6C878 50%, #C9A84C 100%);
        color: #15202C;
        font-weight: 700;
        font-size: 0.95rem;
        padding: 14px 30px;
        border-radius: 999px;
        box-shadow: 0 10px 28px rgba(201,168,76,0.45);
        z-index: 39;
        white-space: nowrap;
    }
    #mobile-sticky-cta.is-visible {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
        pointer-events: auto;
        animation: mobile-sticky-cta-idle-bounce 2.6s ease-in-out 0.6s infinite;
    }
    #mobile-sticky-cta:active {
        animation-play-state: paused;
        transform: translate(-50%, 0) scale(0.92) !important;
        transition: transform 0.15s ease;
    }
    @keyframes mobile-sticky-cta-idle-bounce {
        0%, 100% { transform: translate(-50%, 0) scale(1); }
        50%      { transform: translate(-50%, -6px) scale(1.03); }
    }
    /* Hide it while the dropdown menu is open so it doesn't peek through
       the dim backdrop. */
    body.mobile-menu-is-open #mobile-sticky-cta {
        opacity: 0 !important;
        pointer-events: none !important;
        animation: none !important;
    }

    /* Top scroll-progress bar — mobile has no equivalent of the desktop
       #section-rail dot nav, so this gives scroll feedback in its place.
       Sits above the nav (z-index higher than #navbar) with a glow so it
       reads clearly against both light and dark section backgrounds. */
    #mobile-scroll-progress {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 4px;
        background: rgba(47,58,69,0.10);
        z-index: 70;
    }
    #mobile-scroll-progress-fill {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, #FFFFFF, #C9A84C);
        box-shadow: 0 0 10px rgba(201,168,76,0.85), 0 0 6px rgba(255,255,255,0.85);
        transition: width 0.12s linear;
    }

    /* Core Values / Services / Portfolio cards — their hover effects (image
       scale, shimmer sweep, arrow reveal) are :hover/group-hover driven and
       never fire on touch, so tapping a card currently gives zero feedback.
       Gold ring + press-down on :active gives touch users a response.
       Requires the touchstart-unlock listener in mobile-design.js for iOS
       Safari to actually trigger :active on non-link elements. */
    .value-card-outer:active .value-card,
    .services-card:active,
    .portfolio-card:active {
        transform: scale(0.97);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        box-shadow: 0 0 0 2px rgba(201,168,76,0.45), 0 8px 20px rgba(21,32,44,0.12) !important;
    }

    /* Services card photos — blur-up placeholder while the lazy-loaded
       image fetches, instead of popping in abruptly on slower connections.
       .is-loaded is added by mobile-design.js once the image fires `load`. */
    .services-card img {
        opacity: 0;
        filter: blur(8px);
        transition: opacity 0.45s ease, filter 0.45s ease;
    }
    .services-card img.is-loaded {
        opacity: 1;
        filter: blur(0);
    }

    /* Section entrance bounce — a soft overshoot settle on each major
       section as it first scrolls into view, layered underneath the
       existing per-card GSAP reveals (which target the cards inside, not
       the section wrapper itself), giving scrolling a more tactile feel. */
    @keyframes mobile-section-bounce-in {
        0%   { opacity: 0; transform: translateY(36px) scale(0.98); }
        60%  { opacity: 1; transform: translateY(-5px) scale(1.004); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    #about.mobile-section-bounce-in,
    #services.mobile-section-bounce-in,
    #why.mobile-section-bounce-in,
    #plans.mobile-section-bounce-in,
    #portfolio.mobile-section-bounce-in,
    #partnership.mobile-section-bounce-in,
    #contact.mobile-section-bounce-in {
        animation: mobile-section-bounce-in 0.7s cubic-bezier(.22,1,.36,1) both;
    }

    /* Inner-card staggered reveal — pairs with the inner-card reveal JS.
       .mobile-reveal-pending is only ever added by JS right before the
       IntersectionObserver starts watching, so if JS fails to run the
       cards simply stay visible (no permanently-hidden content). */
    .mobile-reveal-pending {
        opacity: 0;
        transform: translateY(28px);
    }
    .mobile-reveal-in {
        animation: mobile-card-reveal-in 0.6s cubic-bezier(.22,1,.36,1) both;
    }
    @keyframes mobile-card-reveal-in {
        0%   { opacity: 0; transform: translateY(28px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    /* ── iOS "Liquid Glass" pass — targeted accents ──
       Frosted, translucent panels with larger continuous corner radii and a
       soft inner highlight border, applied to cards/buttons/nav only.
       Section backgrounds are left untouched. */

    .value-card,
    .services-card,
    .portfolio-card,
    .plan-card-panel {
        background: rgba(255,255,255,0.82) !important;
        backdrop-filter: blur(14px) saturate(120%);
        -webkit-backdrop-filter: blur(14px) saturate(120%);
        border: 1px solid rgba(255,255,255,0.7) !important;
        border-radius: 24px !important;
        box-shadow: 0 8px 32px rgba(21,32,44,0.10), inset 0 1px 0 rgba(255,255,255,0.8) !important;
    }
    .value-card-photo,
    .services-card img {
        border-radius: 18px;
    }

    #mobile-menu {
        border-radius: 26px !important;
    }
    #mobile-menu-cta,
    #mobile-sticky-cta {
        border-radius: 999px !important;
        background: linear-gradient(135deg, rgba(201,168,76,0.85) 0%, rgba(230,200,120,0.85) 50%, rgba(201,168,76,0.85) 100%) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.45) !important;
    }
    .hero-btn-primary,
    .contact-submit-btn,
    .plan-cta-btn,
    #nav-cta {
        border-radius: 999px !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.4) !important;
    }
    .hero-btn-secondary {
        border-radius: 999px !important;
    }
    #svc-toggle-btn {
        border-radius: 999px !important;
        background: rgba(47,58,69,0.65) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* ── Liquid Glass pass 2 — extend to section panels, the floating
       navbar, and the Contact form, on top of the card/button accents
       already in place above. */

    #portfolio-panel {
        background: rgba(255,255,255,0.8) !important;
        backdrop-filter: blur(16px) saturate(120%);
        -webkit-backdrop-filter: blur(16px) saturate(120%);
        border: 1px solid rgba(255,255,255,0.7) !important;
    }
    #why-quote-card .rounded-3xl {
        background: rgba(255,255,255,0.82) !important;
        backdrop-filter: blur(14px) saturate(120%);
        -webkit-backdrop-filter: blur(14px) saturate(120%);
        border: 1px solid rgba(255,255,255,0.7) !important;
    }
    #why-feature-cards > div {
        background: rgba(255,255,255,0.82) !important;
        backdrop-filter: blur(14px) saturate(120%);
        -webkit-backdrop-filter: blur(14px) saturate(120%);
        border: 1px solid rgba(255,255,255,0.7) !important;
        border-radius: 20px !important;
    }

    /* Navbar grows more glassy + glowy the deeper you scroll. --nav-blur and
       --nav-glow are set continuously in mobile-design.js as a function of
       scroll progress (0 at top, 1 at bottom of page). Box-shadow is left
       out of the inherited transition list so it tracks scroll instantly
       instead of lagging half a second behind the live updates. */
    #nav-inner.nav-pill {
        background: rgba(255,255,255,0.8) !important;
        backdrop-filter: blur(var(--nav-blur, 22px)) saturate(125%) !important;
        -webkit-backdrop-filter: blur(var(--nav-blur, 22px)) saturate(125%) !important;
        box-shadow: 0 8px 36px rgba(47,58,69,0.16), 0 0 0 1px rgba(201,168,76,0.10), var(--nav-glow, 0 0 0 0 transparent) !important;
        transition: background 0.5s ease, border-radius 0.5s ease,
                    max-width 0.55s ease, border-color 0.5s ease,
                    height 0.4s ease, padding 0.4s ease !important;
    }

    #contact-form input,
    #contact-form textarea,
    #service-select-trigger {
        background: rgba(255,255,255,0.8) !important;
        backdrop-filter: blur(12px) saturate(120%);
        -webkit-backdrop-filter: blur(12px) saturate(120%);
        border-radius: 16px !important;
    }

    /* "Who We Are" Mission/Vision cards — same frosted treatment as the
       other card families above. Vision keeps a teal tint (instead of
       plain white) so it doesn't lose its color distinction from Mission. */
    .about-card {
        backdrop-filter: blur(14px) saturate(120%);
        -webkit-backdrop-filter: blur(14px) saturate(120%);
        border: 1px solid rgba(255,255,255,0.7) !important;
        border-radius: 24px !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
    }
    .about-cards .about-card:nth-child(1) {
        background: rgba(255,255,255,0.82) !important;
    }
    .about-cards .about-card:nth-child(2) {
        background: linear-gradient(135deg, rgba(240,250,249,0.85) 0%, rgba(237,250,248,0.8) 100%) !important;
    }
}