/* =========================================
   MOBILE HOTFIX
   Public frontend only
   ========================================= */

html{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
}

body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

img,
svg,
video,
iframe{
    max-width:100%;
    height:auto;
}

*{
    min-width:0;
}

section[id]{
    scroll-margin-top:85px;
}

.hero h1,
.section-title,
.final-content h2,
.final-copy h2,
.cta-band h3,
.cta-strip h3,
.logo-text,
.logo-title{
    overflow-wrap:break-word;
    word-break:normal;
}

/* Tablet */
@media (max-width:1024px){

    .container{
        width:calc(100% - 32px) !important;
        max-width:none !important;
    }

    .header-inner{
        gap:14px !important;
    }

    .logo{
        min-width:0 !important;
        flex:1 1 auto;
    }

    .logo img{
        max-width:210px !important;
        width:auto !important;
        height:auto !important;
    }

    .nav{
        z-index:150 !important;
    }

    .hero-grid{
        width:100% !important;
    }

    .service-card,
    .faq-item,
    .trust,
    .value{
        min-width:0 !important;
    }
}

/* Phone */
@media (max-width:768px){

    body{
        padding-bottom:calc(78px + env(safe-area-inset-bottom)) !important;
    }

    .container{
        width:calc(100% - 28px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    /* HEADER */

    .site-header,
    .header{
        width:100% !important;
        top:0 !important;
    }

    .header-inner{
        min-height:68px !important;
        height:68px !important;
        padding:0 !important;
        gap:10px !important;
    }

    .logo{
        max-width:calc(100% - 48px) !important;
        overflow:hidden !important;
    }

    .logo-mark{
        flex:0 0 36px !important;
        width:36px !important;
        height:36px !important;
    }

    .logo-title,
    .logo-text{
        display:block !important;
        min-width:0 !important;
        font-size:13px !important;
        line-height:1.1 !important;
        white-space:normal !important;
    }

    .logo-title small,
    .logo-text small{
        font-size:7px !important;
        line-height:1.2 !important;
        letter-spacing:.09em !important;
    }

    .logo img{
        max-width:190px !important;
        max-height:44px !important;
        object-fit:contain !important;
    }

    .menu-btn{
        display:block !important;
        flex:0 0 42px !important;
        width:42px !important;
        height:42px !important;
        padding:0 !important;
        line-height:42px !important;
        text-align:center !important;
        font-size:25px !important;
    }

    .nav{
        position:fixed !important;
        top:68px !important;
        left:0 !important;
        right:0 !important;
        bottom:auto !important;

        width:100% !important;
        max-width:100% !important;
        max-height:calc(100dvh - 68px) !important;

        overflow-y:auto !important;
        overscroll-behavior:contain !important;

        margin:0 !important;
        padding:14px !important;

        background:#fffdf9 !important;
        border-top:1px solid rgba(0,0,0,.06) !important;

        box-shadow:0 18px 45px rgba(20,40,30,.15) !important;
    }

    .nav a{
        width:100% !important;
        min-height:46px !important;
        display:flex !important;
        align-items:center !important;
        padding:10px 13px !important;
        border-radius:12px !important;
    }

    .nav .nav-wa{
        justify-content:center !important;
        margin-top:7px !important;
        color:#fff !important;
    }

    /* HERO */

    .hero{
        min-height:0 !important;
        height:auto !important;
        overflow:hidden !important;
    }

    .hero-grid{
        min-height:0 !important;
        height:auto !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:28px !important;
        padding:34px 0 66px !important;
    }

    .hero-copy{
        width:100% !important;
    }

    .eyebrow{
        font-size:9px !important;
        letter-spacing:.11em !important;
        line-height:1.4 !important;
        gap:8px !important;
    }

    .eyebrow::before{
        width:25px !important;
        flex:0 0 25px !important;
    }

    .hero h1{
        width:100% !important;
        max-width:100% !important;

        margin-top:13px !important;

        font-size:clamp(36px,10.5vw,44px) !important;
        line-height:1.01 !important;
        letter-spacing:-.04em !important;
    }

    .hero-desc,
    .hero-description{
        width:100% !important;
        max-width:100% !important;
        margin-top:18px !important;
        font-size:14px !important;
        line-height:1.65 !important;
    }

    .hero-buttons,
    .hero-actions{
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
        margin-top:22px !important;
    }

    .hero-buttons a,
    .hero-actions a,
    .wa-btn,
    .outline-btn,
    .btn-wa,
    .btn-outline,
    .btn-dark,
    .dark-btn{
        width:100% !important;
        max-width:100% !important;
        min-height:50px !important;
        padding:11px 17px !important;
        text-align:center !important;
        white-space:normal !important;
    }

    .hero-mini,
    .hero-note{
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:10px 12px !important;
        margin-top:23px !important;
    }

    .hero-mini-item,
    .hero-note span{
        min-width:0 !important;
        font-size:11px !important;
        line-height:1.4 !important;
    }

    /* HERO IMAGE */

    .hero-visual{
        position:relative !important;
        width:100% !important;
        min-height:0 !important;
        height:auto !important;
        aspect-ratio:4 / 3 !important;
    }

    .hero-photo{
        inset:0 !important;
        width:100% !important;
        height:100% !important;
    }

    .photo-card{
        left:10px !important;
        right:10px !important;
        bottom:10px !important;

        width:auto !important;
        max-width:none !important;

        padding:12px 13px !important;
        border-radius:14px !important;
    }

    .photo-card-icon{
        width:34px !important;
        height:34px !important;
        flex:0 0 34px !important;
    }

    .photo-card strong{
        font-size:12px !important;
    }

    .photo-card span{
        font-size:10px !important;
    }

    .visual-caption{
        left:10px !important;
        right:10px !important;
        bottom:10px !important;

        width:auto !important;
        max-width:none !important;

        padding:12px 13px !important;
    }

    .visual-caption strong{
        font-size:12px !important;
    }

    .visual-caption span{
        font-size:10px !important;
    }

    .hero-ring,
    .visual-flower{
        display:none !important;
    }

    /* TRUST / VALUE */

    .trust-wrap,
    .value-wrap{
        margin-top:-32px !important;
        width:100% !important;
    }

    .trust-box,
    .value-box{
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        padding:9px !important;
        gap:0 !important;
        border-radius:18px !important;
    }

    .trust,
    .value{
        width:100% !important;
        padding:12px 9px !important;
        border-right:0 !important;
        border-bottom:1px solid #ece3d7 !important;
    }

    .trust:last-child,
    .value:last-child{
        border-bottom:0 !important;
    }

    .trust-icon,
    .value-icon{
        width:38px !important;
        height:38px !important;
        flex:0 0 38px !important;
    }

    /* SECTIONS */

    .section{
        padding:65px 0 !important;
    }

    .section-title{
        width:100% !important;
        max-width:100% !important;

        font-size:clamp(32px,9vw,38px) !important;
        line-height:1.08 !important;

        margin-top:9px !important;
    }

    .section-lead{
        width:100% !important;
        max-width:100% !important;

        margin-bottom:29px !important;

        font-size:13px !important;
        line-height:1.65 !important;
    }

    .kicker{
        font-size:9px !important;
        letter-spacing:.13em !important;
        line-height:1.4 !important;
    }

    /* SERVICES */

    .service-grid{
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:15px !important;
    }

    .service-card{
        width:100% !important;
        border-radius:18px !important;
    }

    .service-img{
        width:100% !important;
        height:auto !important;
        aspect-ratio:16 / 10 !important;
        min-height:0 !important;
    }

    .service-body{
        padding:17px !important;
    }

    .service-body h3{
        font-size:20px !important;
    }

    .service-body p{
        min-height:0 !important;
        height:auto !important;
        font-size:13px !important;
        line-height:1.6 !important;
    }

    /* MID CTA */

    .cta-strip,
    .cta-band{
        padding-bottom:65px !important;
    }

    .cta-strip-box,
    .cta-band-box{
        width:100% !important;
        min-height:0 !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;

        padding:24px 20px !important;
        gap:18px !important;

        border-radius:19px !important;
    }

    .cta-strip h3,
    .cta-band h3{
        font-size:24px !important;
        line-height:1.15 !important;
    }

    .cta-strip p,
    .cta-band p{
        font-size:12px !important;
        line-height:1.6 !important;
    }

    .cta-strip-box a,
    .cta-band-box a{
        width:100% !important;
    }

    /* PROCESS */

    .process{
        padding:68px 0 72px !important;
    }

    .steps{
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:25px !important;
    }

    .step{
        width:100% !important;
        padding:0 !important;
    }

    .step::after{
        display:none !important;
    }

    .step-number,
    .step-no{
        width:56px !important;
        height:56px !important;
        margin-bottom:13px !important;
        font-size:22px !important;
    }

    .step h3{
        font-size:15px !important;
    }

    .step p{
        max-width:320px !important;
        margin-left:auto !important;
        margin-right:auto !important;
        font-size:12px !important;
    }

    /* APPROACH / STANDARDS */

    .approach-grid,
    .standard-grid{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr !important;

        gap:30px !important;
    }

    .approach .section-title,
    .standard-content .section-title{
        text-align:left !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    .approach-copy,
    .standard-copy{
        max-width:100% !important;
        font-size:13px !important;
        line-height:1.65 !important;
    }

    .feature-list,
    .standard-list{
        gap:13px !important;
    }

    .feature,
    .standard{
        gap:11px !important;
    }

    .feature-icon,
    .standard-icon{
        width:38px !important;
        height:38px !important;
        flex:0 0 38px !important;
    }

    .approach-img,
    .standard-image{
        width:100% !important;
        min-height:0 !important;
        height:auto !important;
        aspect-ratio:4 / 3 !important;
    }

    /* REGIONS */

    .regions{
        width:100% !important;
        gap:8px !important;
    }

    .region{
        max-width:100% !important;
        padding:10px 13px !important;
        font-size:11px !important;
        overflow-wrap:anywhere !important;
    }

    /* FAQ */

    .faq-wrap,
    .faq-list{
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
    }

    .faq-q,
    .faq-question{
        min-height:54px !important;
        padding:15px 16px !important;
        font-size:13px !important;
        line-height:1.45 !important;
    }

    .faq-a,
    .faq-answer{
        padding-left:16px !important;
        padding-right:16px !important;
        padding-bottom:16px !important;
        font-size:12px !important;
    }

    /* FINAL CTA */

    .final-cta{
        padding:18px 0 66px !important;
    }

    .final-box{
        width:100% !important;
        min-height:0 !important;
        padding:34px 21px !important;
        border-radius:21px !important;
        background-position:center !important;
    }

    .final-copy,
    .final-content{
        width:100% !important;
        max-width:100% !important;
    }

    .final-copy h2,
    .final-content h2{
        font-size:clamp(30px,9vw,37px) !important;
        line-height:1.08 !important;
    }

    .final-copy p,
    .final-content p{
        font-size:13px !important;
        line-height:1.6 !important;
    }

    .final-box a{
        width:100% !important;
    }

    /* FOOTER */

    .footer{
        padding:50px 0 24px !important;
    }

    .footer-grid{
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:29px !important;
    }

    .footer-grid > div{
        min-width:0 !important;
    }

    .footer p{
        max-width:100% !important;
    }

    .footer a{
        overflow-wrap:anywhere !important;
    }

    .footer-bottom{
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:8px !important;
        line-height:1.5 !important;
    }

    /* WHATSAPP */

    .float-wa{
        display:none !important;
    }

    .mobile-wa{
        display:flex !important;

        left:10px !important;
        right:10px !important;

        width:auto !important;
        max-width:none !important;

        height:54px !important;
        min-height:54px !important;

        bottom:max(
            10px,
            env(safe-area-inset-bottom)
        ) !important;

        padding:0 18px !important;

        border-radius:16px !important;

        font-size:14px !important;
        line-height:1 !important;

        z-index:999 !important;
    }
}

/* Narrow Android / iPhone SE */
@media (max-width:390px){

    .container{
        width:calc(100% - 22px) !important;
    }

    .hero-grid{
        padding-top:28px !important;
    }

    .hero h1{
        font-size:clamp(34px,10.3vw,40px) !important;
    }

    .hero-mini,
    .hero-note{
        grid-template-columns:1fr !important;
    }

    .hero-visual{
        aspect-ratio:1.08 / 1 !important;
    }

    .section-title{
        font-size:32px !important;
    }

    .final-copy h2,
    .final-content h2{
        font-size:30px !important;
    }

    .logo-title,
    .logo-text{
        font-size:12px !important;
    }

    .logo-title small,
    .logo-text small{
        display:none !important;
    }
}

/* Very small screens */
@media (max-width:340px){

    .container{
        width:calc(100% - 18px) !important;
    }

    .hero h1{
        font-size:32px !important;
    }

    .section-title{
        font-size:29px !important;
    }

    .logo-title,
    .logo-text{
        font-size:11px !important;
    }

    .photo-card,
    .visual-caption{
        font-size:10px !important;
    }
}

/* Landscape phone */
@media (max-height:500px) and (orientation:landscape){

    .nav{
        max-height:calc(100dvh - 68px) !important;
    }

    .hero-grid{
        padding-top:25px !important;
    }

    .mobile-wa{
        height:48px !important;
        min-height:48px !important;
    }

    body{
        padding-bottom:66px !important;
    }
}