/* =========================================================
   EASY WAY — SHARED SITE HEADER
   One source of truth for all pages
   ========================================================= */

.topbar {
    font-size: .69rem !important;
}

.topbar__inner {
    min-height: 34px !important;
}

.site-header .nav-wrap {
    min-height: 70px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.site-header .brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
}

.site-header .brand__mark {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    flex: 0 0 48px !important;

    margin: 0 !important;
}

.site-header .brand__text {
    display: grid !important;
    align-content: center !important;
    gap: 3px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.site-header .brand__text strong {
    display: block !important;
    margin: 0 !important;

    font-size: 1rem !important;
    line-height: 1.1 !important;
}

.site-header .brand__text small {
    display: block !important;
    margin: 0 !important;

    font-size: .68rem !important;
    line-height: 1.2 !important;
}


/* =========================================================
   MOBILE / NARROW WINDOWS
   ========================================================= */

@media (max-width: 760px) {

    .topbar__inner {
        min-height: 29px !important;
    }

    .site-header .nav-wrap {
        min-height: 58px !important;
    }

    .site-header .brand {
        gap: 10px !important;
    }

    .site-header .brand__mark {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        flex: 0 0 38px !important;
    }

    .site-header .brand__text strong {
        font-size: .78rem !important;
    }

    .site-header .brand__text small {
        font-size: .54rem !important;
    }
}


/* === EASYWAY MOBILE NAV SCROLL START === */

@media (max-width: 1240px) {

    /*
       IMPORTANT:
       use BLOCK when open so menu items keep their real height.
       Then #site-nav becomes the single scroll container.
    */
    body #site-nav.is-open {
        display: block !important;

        max-height: calc(100dvh - 120px) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        overscroll-behavior-y: contain !important;

        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: thin;
        scrollbar-gutter: stable;
    }

    body #site-nav.is-open > .nav-item,
    body #site-nav.is-open > .nav-direct,
    body #site-nav.is-open > .button {
        flex-shrink: 0 !important;
    }

    /*
       Root html/body overflow:hidden lock removed (2026-08-31).
       It froze scroll without compensating for the current scroll
       offset, which broke the sticky .site-header (jumped off-screen)
       whenever the menu was opened at a deep scroll position.
       #site-nav.is-open above already provides its own scroll
       container (max-height + overflow-y: auto + overscroll-behavior:
       contain), so no root-level lock is needed.
    */
}


/*
   Phone geometry:
   topbar ≈ 29px
   header ≈ 58px
   menu gap + safe bottom space
*/
@media (max-width: 760px) {

    body #site-nav.is-open {
        max-height: calc(100dvh - 105px) !important;
    }
}

/* === EASYWAY MOBILE NAV SCROLL END === */


/* === APPROVED INDEX HEADER MASTER START ===
   Exact shared shell from the approved Index.
   Do not redefine header geometry inside page CSS.
   ========================================================= */

/* ---------- DESKTOP ---------- */

body .nav-wrap {
    min-height: 70px;
    gap: 22px;
}

body .site-nav {
    gap: 15px;
    font-size: .82rem;
    white-space: nowrap;
}

body .site-nav .nav-direct,
body .site-nav .nav-trigger {
    min-height: 70px;
    font-size: .84rem;
    font-weight: 700;
}

body .brand__mark {
    width: 48px;
    height: 48px;
}

body .brand__text strong {
    font-size: 1rem;
}

body .brand__text small {
    font-size: .68rem;
}

body .topbar__inner {
    min-height: 34px;
}


/* ---------- COMPACT HEADER AFTER SCROLL ---------- */

body .site-header.is-scrolled .nav-wrap {
    min-height: 60px;
}

body .site-header.is-scrolled .site-nav .nav-direct,
body .site-header.is-scrolled .site-nav .nav-trigger {
    min-height: 60px;
}

body .site-header.is-scrolled .brand__mark {
    width: 40px;
    height: 40px;
}

body .site-header.is-scrolled .brand__text strong {
    font-size: .91rem;
}

body .site-header.is-scrolled .brand__text small {
    font-size: .62rem;
}


/* ---------- TABLET / MOBILE NAV ---------- */

@media (max-width: 1240px) {

    /*
       Reinforce sticky positioning on mobile/tablet only.
       Same values as the base .site-header rule in styles.css —
       restated here (this file loads last) so the header and its
       hamburger button reliably stay pinned while scrolling,
       regardless of any later cascade change upstream.
    */
    body .site-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
    }

    body .nav-wrap {
        min-height: 70px;
        gap: 18px;
    }

    body .site-nav {
        gap: 0;
        font-size: .84rem;
        white-space: normal;
    }

    body .site-nav .nav-direct,
    body .site-nav .nav-trigger {
        min-height: auto;
        width: 100%;
        padding: 11px 12px;
    }
}


/* ---------- PHONE ---------- */

@media (max-width: 760px) {

    body .topbar__inner {
        min-height: 29px;
    }

    body .nav-wrap,
    body .site-header.is-scrolled .nav-wrap {
        min-height: 58px;
    }

    body .brand__mark,
    body .site-header.is-scrolled .brand__mark {
        width: 38px;
        height: 38px;
    }

    body .brand__text strong,
    body .site-header.is-scrolled .brand__text strong {
        font-size: .78rem;
    }

    body .brand__text small,
    body .site-header.is-scrolled .brand__text small {
        font-size: .54rem;
    }
}

/* === APPROVED INDEX HEADER MASTER END === */


/* =========================================================
   FLOATING CONTACT — SHARED COMPONENT
   Unscoped copy of the approved home.css component so the
   floating contact renders identically on every page
   (index.html keeps its own .home-page-scoped rules,
   which take precedence there with identical values).
   ========================================================= */

.contact-fab {
    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 120;

    display: grid;
    justify-items: end;

    pointer-events: none;
}


/* =========================================================
   MAIN BUTTON
   ========================================================= */

.contact-fab__button {
    position: relative;

    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #1769e0,
            #0b8f98
        );

    color: #ffffff;

    box-shadow:
        0 14px 34px rgba(7, 29, 51, .24);

    cursor: pointer;

    pointer-events: auto;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.contact-fab__button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 17px 38px rgba(7, 29, 51, .30);
}

.contact-fab__button:focus-visible {
    outline: 3px solid rgba(23, 105, 224, .28);
    outline-offset: 3px;
}

.contact-fab__button-icon,
.contact-fab__button-close {
    position: absolute;

    display: grid;
    place-items: center;

    transition:
        opacity .17s ease,
        transform .17s ease;
}

.contact-fab__button-icon svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-fab__button-close {
    opacity: 0;

    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1;

    transform: rotate(-30deg) scale(.7);
}

.contact-fab.is-open .contact-fab__button-icon {
    opacity: 0;

    transform: rotate(25deg) scale(.7);
}

.contact-fab.is-open .contact-fab__button-close {
    opacity: 1;

    transform: rotate(0) scale(1);
}


/* =========================================================
   CONTACT MENU
   ========================================================= */

.contact-fab__menu {
    display: grid;

    width: min(310px, calc(100vw - 34px));

    gap: 7px;

    margin-bottom: 10px;
    padding: 8px;

    border: 1px solid rgba(18, 70, 101, .11);
    border-radius: 17px;

    background: rgba(255, 255, 255, .985);

    box-shadow:
        0 20px 50px rgba(7, 29, 51, .18);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform: translateY(10px) scale(.97);

    transform-origin: bottom right;

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease;
}

.contact-fab.is-open .contact-fab__menu {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform: translateY(0) scale(1);
}


/* =========================================================
   MENU ITEMS
   ========================================================= */

.contact-fab__item {
    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        18px;

    align-items: center;

    gap: 10px;

    min-height: 58px;

    padding: 9px 10px;

    border: 1px solid transparent;
    border-radius: 12px;

    color: #17344e;

    text-decoration: none;

    transition:
        background .16s ease,
        border-color .16s ease,
        transform .16s ease;
}

.contact-fab__item:hover,
.contact-fab__item:focus-visible {
    border-color: rgba(23, 105, 224, .09);

    background:
        linear-gradient(
            135deg,
            rgba(23, 105, 224, .065),
            rgba(24, 184, 176, .065)
        );

    transform: translateX(-2px);
}

.contact-fab__item:focus-visible {
    outline: none;
}

.contact-fab__item-icon {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    border-radius: 10px;

    background: #edf5fb;

    color: #1769e0;

    font-size: .59rem;
    font-weight: 900;
}

.contact-fab__item--whatsapp
.contact-fab__item-icon {
    background: #e7f8f5;

    color: #07897f;
}

.contact-fab__item--project
.contact-fab__item-icon {
    background: #fff3dc;

    color: #b66b00;
}

.contact-fab__item-copy {
    display: grid;

    gap: 2px;
}

.contact-fab__item-copy strong {
    color: #102f48;

    font-size: .74rem;
    line-height: 1.25;
}

.contact-fab__item-copy small {
    color: #718596;

    font-size: .61rem;
    line-height: 1.35;
}

.contact-fab__arrow {
    color: #7790a2;

    font-size: .77rem;
    font-weight: 850;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .contact-fab {
        right: 14px;
        bottom: 14px;
    }

    .contact-fab__button {
        width: 48px;
        height: 48px;
    }

    .contact-fab__button-icon svg {
        width: 21px;
        height: 21px;
    }

    .contact-fab__menu {
        width: min(294px, calc(100vw - 28px));

        margin-bottom: 8px;

        border-radius: 15px;
    }

    .contact-fab__item {
        grid-template-columns:
            35px
            minmax(0, 1fr)
            16px;

        min-height: 54px;

        padding: 8px 9px;
    }

    .contact-fab__item-icon {
        width: 33px;
        height: 33px;

        border-radius: 9px;
    }

    .contact-fab__item-copy strong {
        font-size: .70rem;
    }

    .contact-fab__item-copy small {
        font-size: .58rem;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .contact-fab__button,
    .contact-fab__button-icon,
    .contact-fab__button-close,
    .contact-fab__menu,
    .contact-fab__item {
        transition: none !important;
    }
}


/* =========================================================
   HEADER ALIGNMENT — SHARED (desktop)
   Unscoped replicas of the approved .home-page header
   refinements so every page renders the identical header.
   ========================================================= */
.site-nav { gap: 15px; font-size: .82rem; white-space: nowrap; color: #29445d; }
.site-nav > a:not(.button) { padding: 25px 0; }
.site-nav > a:not(.button)::after { bottom: 17px; }
.site-header .button--small { min-height: 40px; padding: 9px 14px; }
.site-header .brand__mark { border-radius: 14px 14px 14px 4px; }


/* =========================================================
   BRANDING MARK — SHARED
   Transparent extracted Easy Way mark; no wrapper background.
   ========================================================= */
.site-header .brand__mark,
.brand--footer .brand__mark {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: transparent !important;
}

.site-header .brand__mark > span,
.brand--footer .brand__mark > span {
    display: none !important;
}

.site-header .brand__mark img,
.brand--footer .brand__mark img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    max-width: none !important;
}

/* Footer brand presentation: a light glass badge behind the mark + text,
   so the transparent logo reads on white exactly like the header logo,
   while the badge itself separates the brand from the dark footer. */
.brand--footer {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;

    max-width: 100% !important;

    margin: 0 0 16px !important;
    padding: 12px 18px 12px 12px !important;

    border: 1px solid rgba(23, 105, 224, .14) !important;
    border-radius: 16px !important;

    background:
        radial-gradient(circle at 16% 50%, rgba(24, 184, 176, .07), transparent 52%),
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(238, 246, 251, .92)) !important;

    box-shadow:
        0 12px 28px rgba(3, 14, 24, .30) !important;
}

/* Brand text on the light badge */
.brand--footer .brand__text strong {
    color: #0a2942 !important;
}

.brand--footer .brand__text small {
    color: #4a6278 !important;
}