/**
 * Cursor Mobile Fixes
 * 
 * This file is managed by Cursor AI for responsive/mobile fixes.
 * Do not edit in WPCodeBox - edit this file directly.
 * 
 * Last updated: 2025-12-12
 */


/* ========================================
   FLUID BUTTON TYPOGRAPHY
   ======================================== */

/* Override fixed pixel button sizes with fluid clamp() values */
.pe--button.pb--small {
    font-size: clamp(0.75rem, 2vw + 0.25rem, 0.9375rem) !important; /* 12px → 15px */
}

.pe--button.pb--medium {
    font-size: clamp(1rem, 2.5vw + 0.5rem, 1.375rem) !important; /* 16px → 22px */
}

.pe--button.pb--large {
    font-size: clamp(1.25rem, 3vw + 0.5rem, 1.75rem) !important; /* 20px → 28px */
}

.pe--button.pb--xlarge {
    font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem) !important; /* 24px → 36px */
}

/* Ensure button text doesn't wrap on mobile */
.pe--button .pe--button--wrapper,
.pe--button .pe--button--wrapper a {
    white-space: nowrap;
}

/* ========================================
   MOBILE OVERFLOW FIX - Hero Sections
   ======================================== */

/* Fix hero sections with margins that cause overflow on mobile */
@media (max-width: 767px) {
    /* Home page hero section - specific fix */
    .elementor-10606 .elementor-element.elementor-element-08bf41c,
    /* Services page hero */
    .elementor-element.e-con-full.animated-slow {
        width: calc(100vw - (2 * var(--space-m, 1rem))) !important;
        max-width: calc(100vw - (2 * var(--space-m, 1rem))) !important;
        box-sizing: border-box !important;
    }
    
    /* Hero with margin class - ensure mobile compatibility */
    .hero-with-margin {
        width: calc(100vw - (2 * var(--space-m, 1rem))) !important;
        max-width: calc(100vw - (2 * var(--space-m, 1rem))) !important;
    }
    
    /* Global overflow prevention for mobile */
    html {
        overflow-x: hidden !important;
    }
    
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* ========================================
   MOBILE MENU LAYOUT
   ======================================== */

@media (max-width: 767px) {
    /* Fullscreen menu - constraint to viewport with scroll if needed */
    .site--nav.nav--fullscreen .site--menu {
        max-height: 100vh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding-bottom: 1rem !important;
    }
    
    /* Inner container layout */
    .site--nav.nav--fullscreen .site--menu > .elementor,
    .site--nav.nav--fullscreen .site--menu > .elementor > .e-con,
    .site--nav.nav--fullscreen .site--menu > .elementor > .elementor-inner > .e-con {
        display: flex !important;
        flex-direction: column !important;
        min-height: calc(100vh - 2rem) !important;
        min-height: calc(100dvh - 2rem) !important;
        justify-content: space-between !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Menu items container - align to bottom, shrink if needed */
    .site--nav.nav--fullscreen .site--menu ul.menu.menu--vertical {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        text-align: left !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        padding-bottom: 0.75rem !important;
    }
    
    /* Menu items - left aligned */
    .site--nav.nav--fullscreen .site--menu ul.menu.menu--vertical > li {
        text-align: left !important;
    }
    
    /* Nav menu widget - align to bottom */
    .site--nav.nav--fullscreen .site--menu .elementor-widget-penavmenu {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        width: 100% !important;
        flex: 1 !important;
    }
    
    /* Bottom footer area - right aligned, compact */
    .site--nav.nav--fullscreen .site--menu > .elementor > .e-con:last-child,
    .site--nav.nav--fullscreen .site--menu > .elementor > .elementor-inner > .e-con > .e-con:last-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        width: 100% !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }
    
    /* All bottom widgets - right aligned */
    .site--nav.nav--fullscreen .site--menu > .elementor > .e-con:last-child .elementor-widget,
    .site--nav.nav--fullscreen .site--menu > .elementor > .elementor-inner > .e-con > .e-con:last-child .elementor-widget {
        width: auto !important;
        text-align: right !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Contact info - right aligned */
    .site--nav.nav--fullscreen .site--menu a[href^="tel"],
    .site--nav.nav--fullscreen .site--menu a[href^="mailto"] {
        text-align: right !important;
    }
    
    /* Contact wrapper - right aligned */
    .site--nav.nav--fullscreen .site--menu .elementor-widget-petext,
    .site--nav.nav--fullscreen .site--menu .text-wrapper {
        text-align: right !important;
        width: 100% !important;
    }
    
    /* Socials container - right aligned */
    .site--nav.nav--fullscreen .site--menu .elementor-widget-pesocials,
    .site--nav.nav--fullscreen .site--menu .pe--social {
        text-align: right !important;
    }
    
    .site--nav.nav--fullscreen .site--menu .elementor-widget-pesocials ul,
    .site--nav.nav--fullscreen .site--menu .pe--social ul {
        justify-content: flex-end !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }
    
    /* Ensure socials list items are visible */
    .site--nav.nav--fullscreen .site--menu .elementor-widget-pesocials ul li,
    .site--nav.nav--fullscreen .site--menu .pe--social ul li {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ========================================
   FULLSCREEN MENU TYPOGRAPHY
   ======================================== */

.site--nav.nav--fullscreen .site--menu ul.menu.menu--vertical > li,
.site--nav.nav--fullscreen .site--menu ul.menu.menu--vertical > li > a {
    letter-spacing: 0 !important;
}

/* ========================================
   FULLSCREEN MENU CLOSED HIT AREA
   ======================================== */

.site--nav.nav--fullscreen .nav--blocks,
.site--nav.nav--fullscreen .nav--blocks * {
    pointer-events: none !important;
}

body:not(.v1a-fullscreen-menu-open) .site--nav.nav--fullscreen .site--menu,
body:not(.v1a-fullscreen-menu-open) .site--nav.nav--fullscreen .site--menu * {
    pointer-events: none !important;
}

body.v1a-fullscreen-menu-open .site--nav.nav--fullscreen .site--menu,
body.v1a-fullscreen-menu-open .site--nav.nav--fullscreen .site--menu * {
    pointer-events: auto !important;
}

body.v1a-fullscreen-menu-open .site--nav.nav--fullscreen .site--menu {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* ========================================
   CLIENT CAROUSEL - Mobile Sizing
   ======================================== */

@media (max-width: 767px) {
    /* Smaller logos on mobile - fits 3 visible at once */
    .pe--clients--carousel .pe-client {
        width: clamp(80px, 28vw, 150px) !important;
        height: clamp(80px, 28vw, 150px) !important;
    }
    
    /* Add padding inside logo boxes for breathing room */
    .pe--clients--carousel .pe-client a {
        padding: 15% !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
.pe--clients--carousel .pe-client img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }
}

/* ========================================
   VISION PAGE QUOTE SCALE
   ======================================== */

body.page-id-10197 .elementor-10197 .elementor-element.elementor-element-b73c4eb .text-wrapper > * {
    font-size: clamp(2rem, 0.75rem + 4.8vw, 5.5rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.02em !important;
    max-width: 100%;
    text-wrap: balance;
}

/* ========================================
   SERVICES PAGE MARQUEE SCALE
   ======================================== */

@media (max-width: 767px) {
    body.page-id-10302 .elementor-10302 .elementor-element.elementor-element-3b74ccc .pe-marquee *,
    body.page-id-10302 .elementor-10302 .elementor-element.elementor-element-3b74ccc .pe-marquee .seperator {
        font-size: clamp(1.5rem, 0.5rem + 4.5vw, 3.125rem) !important;
        line-height: 0.95 !important;
    }

    body.page-id-10302 .elementor-10302 .elementor-element.elementor-element-3b74ccc .pe-marquee .seperator i {
        font-size: clamp(1.5rem, 0.5rem + 4.5vw, 3.125rem) !important;
    }

    body.page-id-10302 .elementor-10302 .elementor-element.elementor-element-3b74ccc .pe-marquee .seperator svg {
        width: clamp(1.5rem, 0.5rem + 4.5vw, 3.125rem) !important;
    }
}

/* ========================================
   GRAIN EXCLUSION LAYER
   ======================================== */

body.body--grained #bg--noise {
    z-index: 950000 !important;
}

body.body--grained .grain-exclude,
body.body--grained [data-grain-exclude="true"],
body.body--grained .elementor-widget-video,
body.body--grained .pe-video {
    position: relative;
    z-index: 950001 !important;
    isolation: isolate;
}

body.body--grained .v1a-modal-overlay {
    position: fixed !important;
    z-index: 1000001 !important;
}

body.body--grained .v1a-modal-wrapper {
    position: relative;
    z-index: 1000002 !important;
}

body.body--grained .v1a-modal-close {
    z-index: 1000003 !important;
}

/* Fullscreen menu keeps the grain above it, but should not inherit the
   page-content stacking fight while open. Use menu-open state to place
   the menu under grain, but above temporarily demoted exception layers. */
body.body--grained.v1a-fullscreen-menu-open .site-header {
    z-index: 949999 !important;
}

body.body--grained.v1a-fullscreen-menu-open .grain-exclude,
body.body--grained.v1a-fullscreen-menu-open [data-grain-exclude="true"],
body.body--grained.v1a-fullscreen-menu-open .elementor-widget-video,
body.body--grained.v1a-fullscreen-menu-open .pe-video {
    z-index: 949998 !important;
    isolation: auto !important;
}

/* ========================================
   SINGLE PORTFOLIO HERO VIDEO: COVER
   Safari defaults <video> to object-fit: contain.
   ======================================== */

body.single-portfolio .project-featured-image .pe-video video,
body.single-portfolio .project-featured-image .pe-video .plyr__video-wrapper video {
    object-fit: cover;
}

/* ========================================
   SINGLE PORTFOLIO HERO: MATCH HOME HERO RECIPE
   The home hero card (.elementor-10606 .elementor-element-08bf41c) is:
     - height: calc(100vh - var(--space-m))
     - margin-bottom: var(--space-m)        (gap below)
     - margin-inline: var(--space-m)        (gap on sides)
     - border-radius: 0 0 var(--space-m) var(--space-m)  (square top, rounded bottom)
     - overflow: clip                       (clip child media to the card)
   We make the portfolio hero look identical by treating the outer
   Elementor container 8d59c7c as the visual hero card. The project
   media widget (.hero-with-margin) and its inner image fill that card
   100%, and the title / meta block (b4edf2a) is anchored to flex-end
   inside the (now hero-sized) parent so the title sits inside the
   card -- not below it like before.

   The pink gradient overlay stays portfolio-only because it's bound
   to the .hero-with-margin .project-featured-image::before /
   .pe-video::after selectors in wpcodebox/1.css; the home hero
   doesn't carry the .hero-with-margin class so it's unaffected.
   ======================================== */

body.single-portfolio .elementor-element-8d59c7c {
    /* Card geometry mirrors the home hero
       (calc(100vw - 2 * var(--space-m)) wide, calc(100vh - var(--space-m)) tall,
       sitting var(--space-m) above the page background fold). */
    box-sizing: border-box !important;
    width: calc(100vw - 2 * var(--space-m)) !important;
    max-width: calc(100vw - 2 * var(--space-m)) !important;
    height: calc(100vh - var(--space-m)) !important;
    min-height: calc(100vh - var(--space-m)) !important;
    margin: 0 auto var(--space-m) auto !important;
    padding: 0 !important;
    border-radius: 0 0 var(--space-m) var(--space-m) !important;
    overflow: clip !important;
}

body.single-portfolio .hero-with-margin {
    margin: 0 !important;
    height: 100% !important;
    border-radius: 0 !important;
}

body.single-portfolio .hero-with-margin .project-featured-image,
body.single-portfolio .hero-with-margin > .elementor-widget-container {
    height: 100% !important;
    border-radius: 0 !important;
}

body.single-portfolio .elementor-element-b4edf2a {
    padding-top: clamp(2rem, 4vw, 4rem) !important;
    padding-bottom: clamp(1.5rem, 3vw, 3rem) !important;
}

/* (Vision testimonial drag cursor color is now handled globally via Redux
   cursor_text_color / cursor_icon_color = brand red.) */

/* ========================================
   VISION PAGE: TESTIMONIAL NAME SIZE
   The person's name on each testimonial card uses the .use--sec--color
   class (renders in brand red). Bump that text ~50% larger so the
   attribution reads as a stronger anchor under the quote, with a
   responsive clamp so it scales fluidly from mobile to large desktop.
   ======================================== */

body.page-id-10197 .elementor-element-0d28a7a .text-p.use--sec--color {
    font-size: clamp(1.25rem, 0.6rem + 1vw, 1.75rem) !important;
    line-height: 1.15;
}

/* ========================================
   GLOBAL HOVER SCALE NORMALIZATION (1.06)
   All hover-scale interactions site-wide should use scale(1.06) +
   0.15s ease-in-out, matching the global `a:hover` rule from
   wpcodebox/1.css L535-537. This block keeps three sources of scale
   in lock-step:

     - `.pe--list a:hover` (menu overlay social/contact links + footer
        link lists). Originally bumped to 1.15 here for visibility but
        normalized back to 1.06 for consistency.
     - `.scale` system modifiers (.scale.xs/.sm/.md/.lg/.xl from
        wpcodebox/1.css L572-576). These are applied to team-member
        widgets and a few other Elementor blocks via the `.scale .sm`
        class pattern. Force `--scale-size: 1.06` so any modifier
        resolves to the same scale.
     - `.clients_carousel .cr--item` (Vision page testimonial cards).
        No hover rule existed; add one to match.
   ======================================== */

.pe--list a {
    display: inline-block;
    transform-origin: center center;
    transition: transform 0.15s ease-in-out, color 0.15s ease-in-out;
}

.pe--list a:hover {
    transform: scale(1.06) !important;
}

.scale,
.scale.xs,
.scale.sm,
.scale.md,
.scale.lg,
.scale.xl {
    --scale-size: 1.06 !important;
    --scale-duration: 0.15s !important;
    --scale-timing: ease-in-out !important;
}

.clients_carousel .cr--item {
    transform-origin: center center;
    transition: transform 0.15s ease-in-out;
}

.clients_carousel .cr--item:hover {
    transform: scale(1.06);
}


/* ========================================
   SERVICES PAGE: DREAM BIG / WE MAKE IT REALITY
   The container (abb26f1) uses mix-blend-mode: color-dodge against a
   dynamic Unicorn Studio background, plus a JS-driven scroll-scrub
   blur animation, plus opacity 0.5 -- the intentional "blends with
   the background" effect. We do NOT want to override any of those.

   Earlier the wordmark was rendering at color #d9d9d9, which under
   color-dodge math (output = bg / (1 - blend)) drops to near-black
   in the dark phases of the bg animation -> "Dream Big" vanishes.

   Subtle fix: bump the text color to #ebebeb. Bright enough that
   the color-dodge in dark-bg moments produces a visible mid-tone
   (instead of near-black), but not so bright that it always clamps
   to pure white and loses the soft blended look. The scroll-scrub
   blur, the color-dodge blend, and the 0.5 opacity all keep
   working unchanged.
   ======================================== */

body.page-id-10302 .elementor-element-abb26f1 .fit-text {
    color: #ebebeb;
}