/* Global Mobile Hotfixes
   Purpose: prevent text overflow and edge touching on small screens
   Scope: conservative overrides at tablet/mobile breakpoints only
*/

/* -----------------------------------------------------------------
   Unified hero navbar spacing (all pages using viva-figma-hero)
   ----------------------------------------------------------------- */
@media (min-width: 993px) {
    body.site-body--home #homeHeroSec.homeHero--figma,
    body.site-body--inner #homeHeroSec.homeHero--figma {
        margin-top: 24px !important;
        justify-content: flex-start !important;
        min-height: auto !important;
        padding-top: 320px !important;
        padding-bottom: 56px !important;
    }
}

@media (max-width: 992px) {
    body.site-body--home #homeHeroSec.homeHero--figma,
    body.site-body--inner #homeHeroSec.homeHero--figma {
        margin-top: -60px !important;
        padding-top: 232px !important;
    }
}

@media (max-width: 768px) {
    body.site-body--home #homeHeroSec.homeHero--figma,
    body.site-body--inner #homeHeroSec.homeHero--figma {
        margin-top: -60px !important;
        padding-top: 204px !important;
    }
}

@media (max-width: 480px) {
    body.site-body--home #homeHeroSec.homeHero--figma,
    body.site-body--inner #homeHeroSec.homeHero--figma {
        margin-top: -60px !important;
        padding-top: 172px !important;
    }
}

@media (max-width: 1200px) {
    #mainNavbar .mainNavbarMenuBtn {
        white-space: normal;
    }
}

@media (max-width: 992px) {
    /* Normalize section vertical spacing on inner pages only (not home). */
    body.site-body--inner section:not(#homeMarquee):not(#homeMarquee2):not(#homeMarquee3):not(#homeResultsSec),
    body.site-body--inner [id*="Sec"]:not(#homeMarquee):not(#homeMarquee2):not(#homeMarquee3):not(#homeResultsSec) {
        padding-top: clamp(56px, 8vw, 120px) !important;
        padding-bottom: clamp(56px, 8vw, 120px) !important;
    }

    /* Services companies center-heavy grid -> single column */
    #siteMain #servicesCompaniesSec .servicesCompanies__grid {
        grid-template-columns: 1fr !important;
    }

    /* Inner CTA blocks should stack on tablet/mobile */
    body.site-body--inner #homeCtaSec .homeCtaSecInner,
    body.site-body--inner.page-contact #homeCtaSec .homeCtaSecInner {
        grid-template-columns: 1fr !important;
    }

    body.site-body--inner.page-contact #contactInfoSec .contactInfoSecInner {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Resources: blog → guides — global section padding is too tall vs Figma */
    body.page-resources .resBlog {
        padding-top: clamp(28px, 4vw, 40px) !important;
        padding-bottom: clamp(8px, 1.5vw, 16px) !important;
    }

    body.page-resources .resGuides {
        padding-top: clamp(8px, 1.5vw, 16px) !important;
        padding-bottom: clamp(40px, 6vw, 64px) !important;
    }


}

@media (max-width: 768px) {
    /* Prevent hidden horizontal overflow from text/card growth */
    html,
    body,
    main,
    section {
        overflow-x: clip;
    }

    /* Ensure common headings can wrap safely */
    h1,
    h2,
    h3,
    .homeHero__heading,
    .serviceHeroSecHead h2,
    .aboutHeroSecHead h2 {
        overflow-wrap: anywhere;
        word-break: break-word;
    }



    .homeExperts__photoWrap {
        width: 140px;
        height: 140px;
        margin: -70px auto 20px;
    }

    /* Service brand: match overview-scale heading (fluid clamp) */
    body.site-body--inner #serviceBrandSec .serviceBrandSecInnerHead h2 {
        font-size: var(--viva-overview-heading-fs) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.04em !important;
    }

    #servicePortfolioSec .servicePortfolioSecHead h4 {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Blog pages: reduce excessive top/bottom spacing */
    #blogSec {
        padding: clamp(70px, 10vw, 150px) 16px clamp(80px, 12vw, 200px) 16px !important;
    }

    #featuredBlogSec {
        padding: clamp(64px, 10vw, 150px) 16px !important;
    }

    #serviceHeroSec {
        padding-top: 120px !important;
        padding-bottom: 56px !important;
    }

    body.site-body--inner.page-contact #contactInfoSec .contactInfoSecInner {
        grid-template-columns: 1fr !important;
    }

    /* Quote/contact shared box fixed paddings */
    body #homeCtaSec .homeCtaSecInner {
        padding: clamp(20px, 4vw, 50px) clamp(16px, 5vw, 60px) !important;
    }
}

/* -----------------------------------------------------------------
   Site-wide horizontal inset on small viewports
   Keeps sections, grids, and images off the left/right edge (all routes).
   Safe-area aware for notched phones. Does not change layout structure.
   ----------------------------------------------------------------- */
@media (max-width: 992px) {
    #siteMain.site-main {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    #siteMain.site-main {
        padding-left: max(18px, env(safe-area-inset-left, 0px));
        padding-right: max(18px, env(safe-area-inset-right, 0px));
    }
}

/* -----------------------------------------------------------------
   Cross-page mobile rhythm + alignment hardening
   Goal: reduce odd spacing, center CTAs cleanly, keep text balanced
   ----------------------------------------------------------------- */
@media (max-width: 992px) {
    /* Main hero wrappers: keep content centered and visually balanced */
    body.site-body--inner #homeHeroSec.homeHero--figma .homeHero__inner,
    body.site-body--home #homeHeroSec.homeHero--figma .homeHero__inner {
        width: 100%;
        max-width: min(980px, 100%);
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    body.site-body--inner #homeHeroSec.homeHero--figma .homeHero__heading,
    body.site-body--home #homeHeroSec.homeHero--figma .homeHero__heading {
        margin-left: auto;
        margin-right: auto;
        max-width: min(900px, 100%);
        text-wrap: balance;
    }

    body.site-body--inner #homeHeroSec.homeHero--figma .homeHero__desc,
    body.site-body--home #homeHeroSec.homeHero--figma .homeHero__desc {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: min(92vw, 680px) !important;
        text-align: center !important;
        text-wrap: pretty;
    }

    body.site-body--inner #homeHeroSec.homeHero--figma .homeHero__actions,
    body.site-body--home #homeHeroSec.homeHero--figma .homeHero__actions {
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100%;
    }

    /* Section headings: keep consistent side balance */
    #siteMain .homeResults__headBlock,
    #siteMain .homeTrusted__head,
    #siteMain .homeCap__head,
    #siteMain .homeWhy__head,
    #siteMain .homeTestimonials__head,
    #siteMain .homeExperts__head,
    #siteMain .servicesCompanies__head,
    #siteMain .servicesTech__sectionHead,
    #siteMain .serviceDetailSecHead,
    #siteMain .resFeatured__head,
    #siteMain .resBlog__head,
    #siteMain .resLead__head,
    #siteMain .homeFaqContact__head {
        width: 100%;
        max-width: min(980px, 100%);
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 768px) {
    /* CTA buttons: center stack and avoid uneven horizontal drift */
    body.site-body--inner #homeHeroSec.homeHero--figma .homeHero__btn,
    body.site-body--home #homeHeroSec.homeHero--figma .homeHero__btn,
    #siteMain .servicesPromo__btn,
    #siteMain .aboutPromoCta__btn,
    #siteMain .resBottomCta__btn,
    #siteMain .homeFaqContact__submitBtn {
        margin-left: auto;
        margin-right: auto;
    }

    /* Two-column blocks become centered single column with equal side spacing */
    #siteMain .homeResults__inner,
    #siteMain .homeFaqContact__body,
    #siteMain .serviceDetailIntro__inner,
    #siteMain .serviceDetailFocus__inner,
    #siteMain .resBlog__split,
    #siteMain .servicesTech__inner {
        width: 100%;
        max-width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Improve mobile reading rhythm in long descriptive sections */
    #siteMain .homeResults__desc,
    #siteMain .homeWhy__desc,
    #siteMain .serviceDetailIntro__p,
    #siteMain .serviceDetailOutcomes__cardBody,
    #siteMain .servicesTech__intro,
    #siteMain .resBottomCta__text {
        line-height: 1.6 !important;
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }

    /* Card text blocks: headings centered, descriptions left for readability */
    #siteMain .homeWhy__itemTitle,
    #siteMain .servicesCompanies__cardTitle,
    #siteMain .serviceDetailFeatures__cardTitle {
        text-align: center !important;
    }

    #siteMain .homeWhy__itemDesc,
    #siteMain .servicesCompanies__cardDesc,
    #siteMain .serviceDetailFeatures__cardText {
        text-align: center !important;
    }

    /* Keep form labels/fields cleanly aligned on mobile */
    #siteMain .homeFaqContact__form,
    #siteMain .homeFaqContact__formGroup,
    #siteMain .homeFaqContact__formGroup label,
    #siteMain .homeFaqContact__formGroup input,
    #siteMain .homeFaqContact__formGroup select,
    #siteMain .homeFaqContact__formGroup textarea {
        text-align: left !important;
    }

    #siteMain .homeFaqContact__formRow {
        grid-template-columns: 1fr !important;
    }
}

/* -----------------------------------------------------------------
   Remaining inner pages: industries, case studies, contact
   Keeps spacing rhythm and CTA alignment consistent on mobile
   ----------------------------------------------------------------- */
@media (max-width: 992px) {
    body.page-industries #homeIndustriesSec,
    body.page-industries #homeCaseStudiesSec,
    body.page-case-studies #csFeaturedSec,
    body.page-case-studies #csByIndustrySec,
    body.page-case-studies #csTransformSec,
    body.page-case-studies #csResultsSec,
    body.page-contact #contactConnectSec,
    body.page-contact #contactInfoSec,
    body.page-contact #blogSec.contactLocations {
        padding-top: clamp(48px, 7vw, 96px) !important;
        padding-bottom: clamp(48px, 7vw, 96px) !important;
    }

    body.page-contact #contactConnectSec .contactConnectSecInner,
    body.page-case-studies .csFeatured__inner,
    body.page-case-studies .csByIndustry__inner,
    body.page-case-studies .csTransform__inner,
    body.page-case-studies .csResults__inner,
    body.page-industries .indCoreLead__inner,
    body.page-industries .indDetail__inner,
    body.page-industries .indChallenges__inner,
    body.page-industries .indTech__inner {
        width: 100%;
        max-width: min(980px, 100%);
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 768px) {
    body.page-contact #contactConnectSec .contactConnectSecInner,
    body.page-contact #blogSec.contactLocations .blogSecInnerBoxRow,
    body.page-case-studies .csFeatured__grid,
    body.page-case-studies .csByIndustry__grid,
    body.page-case-studies .csTransform__filmstrip,
    body.page-industries .indDetail__inner,
    body.page-industries .indChallenges__row,
    body.page-industries .indTech__row {
        grid-template-columns: 1fr !important;
    }

    body.page-contact #contactConnectSec .contactConnectSecContent h2,
    body.page-contact #contactConnectSec .contactConnectSecContent h4,
    body.page-case-studies .csFeatured__head,
    body.page-case-studies .csByIndustry__head,
    body.page-case-studies .csTransform__head,
    body.page-case-studies .csResults__inner,
    body.page-industries .indCoreLead__title,
    body.page-industries .indChallenges__head,
    body.page-industries .indTech__head {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.page-contact #contactConnectSec .contactConnectSecContent p,
    body.page-contact #contactConnectSec .contactConnectSecList,
    body.page-case-studies .csFeatured__cardExcerpt,
    body.page-case-studies .csByIndustry__intro,
    body.page-case-studies .csTransform__intro,
    body.page-industries .indDetail__desc,
    body.page-industries .indSolutions__intro,
    body.page-industries .indTech__copy {
        text-align: left !important;
        line-height: 1.6 !important;
    }

    body.page-case-studies .csFeatured__ctaRow,
    body.page-case-studies .csTransform__toolbar,
    body.page-industries .homeIndustries__cta,
    body.page-industries .indDetail__cta {
        justify-content: center !important;
    }
}

/* -----------------------------------------------------------------
   Blog pages: mobile responsive hardening
   ----------------------------------------------------------------- */
@media (max-width: 992px) {
    body.page-blog .blogHero,
    body.page-blog-detail #blogContentAreaSec {
        padding-top: clamp(80px, 12vw, 120px) !important;
        padding-bottom: clamp(40px, 6vw, 80px) !important;
    }

    body.page-blog-detail .blogContentAreaSecInnerRow {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

@media (max-width: 768px) {
    body.page-blog .page-blog,
    body.page-blog-detail .page-blog-detail {
        overflow-x: clip;
    }

    body.page-blog-detail .blogDetail__content img,
    body.page-blog-detail .blogDetail__content iframe,
    body.page-blog-detail .blogDetail__content video,
    body.page-blog-detail .blogDetail__content embed {
        max-width: 100% !important;
        height: auto !important;
    }

    body.page-blog-detail .blogDetail__content pre {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        font-size: 14px;
    }

    body.page-blog-detail .blogDetail__content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    body.page-blog .blogGrid {
        gap: 20px !important;
    }

    body.page-blog-detail .blogDetail__main {
        padding: 16px 12px !important;
    }

    body.page-blog-detail .blogDetail__commentForm {
        padding: 16px;
    }

    body.page-blog-detail .blogDetail__commentRow {
        grid-template-columns: 1fr !important;
    }
}

/* -----------------------------------------------------------------
   Service detail hero — force full heading visibility on mobile
   (loads last; wins over home.css nowrap / oversized type)
   ----------------------------------------------------------------- */
@media (max-width: 992px) {
    body.page-service-detail #homeHeroSec.homeHero--figma,
    body.page-services.page-service-detail #homeHeroSec.homeHero--figma {
        overflow: visible !important;
    }

    body.page-service-detail #homeHeroSec.homeHero--figma .homeHero__inner,
    body.page-services.page-service-detail #homeHeroSec.homeHero--figma .homeHero__inner {
        width: 100% !important;
        max-width: min(100%, 420px) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    body.page-service-detail #homeHeroSec.homeHero--figma .homeHero__heading,
    body.page-service-detail #homeHeroSec.homeHero--figma .homeHero__headingBold,
    body.page-service-detail #homeHeroSec.homeHero--figma .homeHero__headingBold--figma,
    body.page-service-detail #homeHeroSec.homeHero--figma .homeHero__headingLine1,
    body.page-service-detail #homeHeroSec.homeHero--figma .homeHero__headingLine2,
    body.page-service-detail #homeHeroSec.homeHero--figma .homeHero__headingLine2--wrap,
    body.page-services.page-service-detail #homeHeroSec.homeHero--figma .homeHero__headingLine2 {
        white-space: normal !important;
        text-wrap: pretty !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    body.page-service-detail #homeHeroSec.homeHero--figma .homeHero__headingLine2,
    body.page-service-detail #homeHeroSec.homeHero--figma .homeHero__headingLine2--wrap,
    body.page-services.page-service-detail #homeHeroSec.homeHero--figma .homeHero__headingLine2 {
        font-size: clamp(22px, 6.4vw, 30px) !important;
        line-height: 1.14 !important;
        letter-spacing: -0.025em !important;
    }
}

/* -----------------------------------------------------------------
   FINAL DESKTOP HERO GAP LOCK (kept at end to win cascade)
   ----------------------------------------------------------------- */
@media (min-width: 993px) {
    body.site-body--home #homeHeroSec.homeHero--figma,
    body.site-body--inner #homeHeroSec.homeHero--figma {
        margin-top: 24px !important;
        padding-top: 320px !important;
        padding-bottom: 56px !important;
        justify-content: flex-start !important;
        min-height: auto !important;
    }

    body.site-body--home #homeHeroSec.homeHero--figma .homeHero__inner,
    body.site-body--inner #homeHeroSec.homeHero--figma .homeHero__inner {
        margin-top: 48px !important;
    }
}

/* -----------------------------------------------------------------
   Brand wordmark (navbar + footer)
   Must load last: beats site.css `* { font-family: ... !important }` which
   was flattening Unbounded/Outfit stacks so the logo looked “unchanged”.
   ----------------------------------------------------------------- */
.brandLogoWordmark__primary,
.brandLogoWordmark__primInner {
    font-family: 'Unbounded', var(--heading-font, serif) !important;
}

.brandLogoWordmark__secondary {
    font-family: 'Outfit', var(--primary-font, sans-serif), sans-serif !important;
}

#mainNavbar .mainNavbarInner,
#mainNavbar .mainNavbarLogo,
.brandLogoWordmark,
.brandLogoWordmark__iGlyph {
    overflow: visible !important;
}

.brandLogoWordmark__accentSvg {
    z-index: 3;
    flex-shrink: 0;
}

/* -----------------------------------------------------------------
   Staff Augmentation CTA color & style lock (wins over any global overrides)
   ----------------------------------------------------------------- */
body.site-body--inner #siteMain a.btn-staff-primary,
body.site-body--inner #siteMain .btn-staff-primary,
.staffAugPage a.btn-staff-primary,
.staffAugPage .btn-staff-primary,
.btn-staff-primary {
    background: #F3124E !important;
    background-color: #F3124E !important;
    color: #ffffff !important;
    border: none !important;
    border-color: #F3124E !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(243, 18, 78, 0.3) !important;
}

body.site-body--inner #siteMain a.btn-staff-primary:hover,
body.site-body--inner #siteMain .btn-staff-primary:hover,
.staffAugPage a.btn-staff-primary:hover,
.staffAugPage .btn-staff-primary:hover,
.btn-staff-primary:hover {
    background: #d9104a !important;
    background-color: #d9104a !important;
    box-shadow: 0 8px 30px rgba(243, 18, 78, 0.3) !important;
    color: #ffffff !important;
}

body.site-body--inner #siteMain a.btn-staff-outline,
body.site-body--inner #siteMain .btn-staff-outline,
.staffAugPage a.btn-staff-outline,
.staffAugPage .btn-staff-outline,
.btn-staff-outline {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.site-body--inner #siteMain a.btn-staff-outline:hover,
body.site-body--inner #siteMain .btn-staff-outline:hover,
.staffAugPage a.btn-staff-outline:hover,
.staffAugPage .btn-staff-outline:hover,
.btn-staff-outline:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* =================================================================
   Logo Centering in Bento Capabilities Circle (All viewports)
   ================================================================= */
.homeCap__logoCircle .brandLogoWordmark {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
}

.homeCap__logoCircle .brandLogoWordmark__primary,
.homeCap__logoCircle .brandLogoWordmark__primInner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
}

.homeCap__logoCircle .brandLogoWordmark__secondary {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding-left: 5px !important; /* Offset letter-spacing on the last character for perfect centering */
}

@media (max-width: 768px) {
    .homeCap__logoCircle {
        margin: -25px auto !important;
        align-self: center !important;
    }
}