/*
Theme Name: Echoo Premium 2026
Theme URI: https://www.echoowebsitedesign.com/
Description: Custom Echoo Website Design 2026 child theme. Parent: Elementory (not Elementory Agency).
Template: elementory
Version: 2.0.0
Text Domain: echoo-premium
*/
:root{--orange:#ff690b;--orange-light:#ffa15a;--dark:#071018;--navy:#0b1821;--ink:#12171d;--pale:#f5f6f7;--max:1310px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:Inter,Arial,system-ui,sans-serif;line-height:1.65}img{max-width:100%;height:auto}a{color:inherit}button,input,textarea{font:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:4px}.skip-link{position:absolute;left:20px;top:-120px;background:white;z-index:9999;padding:12px}.skip-link:focus{top:15px}.wrap{width:min(calc(100% - 56px),var(--max));margin:auto}.site-header{background:#050c11;color:white;position:relative;z-index:50}.header-inner{display:flex;min-height:91px;align-items:center;gap:26px;justify-content:space-between}.brand{display:inline-flex;flex:none;max-width:190px}.brand img{width:175px;height:auto;max-height:75px;object-fit:contain}.primary-nav{flex:1}.nav-list{display:flex;justify-content:center;gap:clamp(8px,1vw,17px);align-items:center;list-style:none;margin:0;padding:0}.nav-list a{display:block;text-decoration:none;font-size:clamp(.64rem,.8vw,.84rem);font-weight:700;white-space:nowrap}.nav-list a:hover{color:var(--orange)}.btn{display:inline-flex;justify-content:center;align-items:center;text-decoration:none;background:var(--orange);border:2px solid var(--orange);color:white!important;font-weight:800;border-radius:5px;padding:12px 23px;min-height:51px;transition:transform .2s,background .2s}.btn:hover{background:#d94e00;transform:translateY(-2px)}.btn.outline{background:#080f17a8;color:white!important}.header-cta{font-size:.85rem;white-space:nowrap;padding:9px 15px}.nav-toggle{display:none;background:transparent;border:1px solid #ffffff65;border-radius:5px;padding:9px;color:#fff}.nav-toggle span{display:block;width:25px;height:2px;background:currentColor;margin:5px 0}.eyebrow{display:block;text-transform:uppercase;color:var(--orange);font-size:.76rem;font-weight:900;letter-spacing:.12em;margin-bottom:15px}h1,h2,h3{line-height:1.14;letter-spacing:-.035em}h1{font-size:clamp(3.1rem,5vw,5.8rem)}h2{font-size:clamp(2.2rem,3.5vw,3.8rem);margin:0 0 18px}h3{font-size:1.4rem;margin:0 0 10px}h1 em,h2 em{font-style:normal;color:var(--orange)}.section{padding:125px 0}.section-intro{max-width:910px;margin:0 auto 58px}.centered{text-align:center}.section-intro p{margin:0 auto;color:#58616b;font-size:1.1rem}.section-heading-row{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:54px}.section-heading-row p{margin:0}.button-row{display:flex;gap:13px;flex-wrap:wrap}.premium-hero{position:relative;background:linear-gradient(115deg,#050d14e8,#07101870),url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=1800&q=85') center/cover;color:white;overflow:hidden}.hero-layout{min-height:675px;display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.hero-copy{position:relative;z-index:2;padding:90px 0}.hero-copy h1{font-size:clamp(3.1rem,5vw,5.7rem);max-width:760px;margin:0 0 24px}.hero-copy p{font-size:1.14rem;color:#eff2f4;margin:0 0 32px;max-width:640px}.hero-display{display:flex;align-items:center;position:relative;min-height:390px;transform:perspective(900px) rotateY(-7deg)}.device-screen{width:94%;min-height:385px;background:linear-gradient(100deg,#0a111ed9,#0e1a2499),url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1000&q=85') center/cover;border:17px solid #080c13;box-shadow:0 22px 35px #0009;border-radius:13px;padding:65px 37px;display:flex;flex-direction:column;justify-content:center}.device-screen strong{font-size:clamp(2.1rem,3vw,3.6rem);max-width:400px;line-height:1.05}.device-screen strong span{color:var(--orange)}.device-screen small{margin-top:16px}.tiny-label{font-size:.63rem;color:#f2a064;letter-spacing:.2em;margin-bottom:14px}.device-cta{align-self:flex-start;padding:9px 15px;background:var(--orange);font-size:.7rem;margin-top:30px;font-weight:800}.phone-screen{position:absolute;bottom:-35px;right:-15px;border:11px solid #111722;border-radius:24px;width:28%;height:275px;background:linear-gradient(150deg,#253b48,#0e1319 65%,#b4511d);box-shadow:0 16px 35px #0009;display:flex;flex-direction:column;justify-content:center;padding:14px}.phone-screen span{font-size:1.2rem;color:var(--orange)}.phone-screen strong{font-size:1.15rem;line-height:1.13}.services-section{background:#fbfbfb}.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.premium-service{display:grid;grid-template-columns:44% 56%;min-height:245px;border-radius:8px;overflow:hidden;color:#fff;background:#09131d;text-decoration:none;box-shadow:0 10px 24px #0b16251c}.service-image{background-size:cover;background-position:center}.service-content{padding:28px 23px;display:flex;flex-direction:column;justify-content:center}.service-content h3{font-size:1.48rem}.service-content p{font-size:.94rem;color:#e0e4e7;margin:0 0 13px}.service-id{font-size:.76rem;color:var(--orange);font-weight:900;margin-bottom:10px}.learn{color:var(--orange-light);font-weight:800}.premium-service:hover{transform:translateY(-3px);transition:transform .2s}.portfolio-section{background:linear-gradient(110deg,#06121eea,#06131df3),url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1800&q=80') center/cover;color:white;overflow:hidden}.portfolio-section .section-heading-row{margin-bottom:44px}.portfolio-section .section-heading-row p{color:#dce2e7}.project-category{font-weight:800;font-size:1.15rem;padding-bottom:18px;display:flex;justify-content:space-between;gap:12px}.project-category span{color:#9aaebb}.project-category.second{padding-top:40px}.marquee-viewport{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}.marquee-track{display:flex;width:max-content;gap:25px;animation:echoo-marquee 65s linear infinite;padding:0 12px}.marquee-track.reverse{animation-direction:reverse}.marquee-viewport:hover .marquee-track,.marquee-viewport:focus-within .marquee-track{animation-play-state:paused}.project-tile{display:block;flex:none;width:440px;text-decoration:none;color:white;background:#101d28;border:1px solid #768391;border-radius:7px;overflow:hidden}.project-tile img{display:block;width:100%;height:270px;object-fit:cover;object-position:top;background:#d9e0e4}.project-tile>span{display:block;padding:13px 15px;font-weight:800}.project-tile small{display:block;color:#d0d9de;font-weight:400}.marquee-note{color:#a3b6c5;font-size:.85rem;padding-top:26px}@keyframes echoo-marquee{to{transform:translateX(calc(-50% - 12.5px))}}.photo-section{background:#f3f2ef}.video-section{background:#0b1822;color:white}.media-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center;min-height:480px}.media-copy p{font-size:1.15rem;max-width:480px;margin:0 0 30px}.video-section .media-copy p{color:#dde6ea}.media-pictures>img{border-radius:11px;width:100%;height:350px;object-fit:cover;box-shadow:0 18px 45px #0002}.mini-gallery{display:flex;gap:14px;margin-top:15px}.mini-gallery img{width:calc((100% - 28px)/3);height:115px;object-fit:cover;border-radius:5px}.process-section{background:#fafafa}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:center}.steps>div{padding:15px}.steps b{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;font-size:1.4rem;border:2px solid var(--orange);color:var(--orange);border-radius:50%;margin-bottom:22px}.steps p{font-size:.95rem;color:#59636e}.reviews-section{background:#07141d;color:white}.reviews-section p{color:#d1dbe1}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.review-grid article{background:#172530;padding:33px;border-radius:9px;border:1px solid #29404d}.review-grid span{color:var(--orange);font-size:.79rem;font-weight:800}.review-grid h3{margin:16px 0}.faq-section{background:#f5f6f7}.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 25px}.faq-grid details{background:white;border:1px solid #dce1e4;border-radius:7px;padding:21px 24px}.faq-grid summary{cursor:pointer;font-weight:750;padding-right:25px}.faq-grid p{color:#465260;margin:14px 0 0}.enterprise-section{background:linear-gradient(110deg,#07131bee,#07131be6),url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1800&q=85') center/cover;color:white}.enterprise-section>div>p{max-width:800px;color:#dae3e9;font-size:1.16rem}.enterprise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:45px 0}.enterprise-grid div{border-left:3px solid var(--orange);padding:14px 25px;background:#ffffff12}.enterprise-grid strong{font-size:1.35rem;display:block}.enterprise-grid span{color:#d8e0e5}.final-cta{color:white;background:linear-gradient(100deg,#0b1722bc,#381b1480),url('https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=1800&q=85') center/cover}.final-cta p{max-width:640px;font-size:1.15rem}.site-footer{background:#050c11;color:#fff;padding:70px 0 25px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px}.footer-logo{max-width:210px;object-fit:contain}.site-footer h2{font-size:1.2rem}.site-footer p{color:#ccd6db}.footer-links{list-style:none;padding:0}.footer-links li{margin:10px 0}.footer-links a{color:#d3dee3;text-decoration:none}.footer-bottom{border-top:1px solid #ffffff24;margin-top:45px;padding-top:20px;color:#a8b3ba}.page-hero{background:#0c1821;color:white;padding:105px 0}.page-hero h1{font-size:clamp(2.5rem,5vw,4.5rem)}.copy{max-width:880px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}.contact-grid label{display:block}.contact-grid input,.contact-grid textarea{display:block;width:100%;padding:13px;border:1px solid #aaa}.contact-grid textarea{min-height:140px}
@media(max-width:1150px){.header-inner{flex-wrap:wrap;padding:10px 0}.nav-list{gap:12px}.hero-layout{gap:30px}.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.section{padding:85px 0}.nav-toggle{display:block;margin-left:auto}.header-cta{display:none}.primary-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#050c11;padding:18px 28px;max-height:80vh;overflow-y:auto}.primary-nav.is-open{display:block}.nav-list{flex-direction:column;align-items:stretch;gap:0}.nav-list a{font-size:1rem;padding:10px 0}.hero-layout{grid-template-columns:1fr;padding:50px 0 80px}.hero-copy{padding:20px 0}.hero-display{max-width:600px;margin:auto;width:90%}.media-layout{grid-template-columns:1fr;gap:45px}.steps{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.wrap{width:min(calc(100% - 32px),var(--max))}.section{padding:72px 0}.hero-layout{min-height:unset}.hero-copy h1{font-size:clamp(2.6rem,11vw,4rem)}.hero-display{min-height:285px}.device-screen{min-height:270px;padding:22px;border-width:9px}.device-screen strong{font-size:1.9rem}.phone-screen{height:170px;right:0}.phone-screen strong{font-size:.8rem}.services-grid,.faq-grid,.review-grid,.enterprise-grid{grid-template-columns:1fr}.premium-service{min-height:230px}.section-heading-row{display:block}.section-heading-row .btn{margin-top:20px}.project-tile{width:320px}.project-tile img{height:205px}.media-pictures>img{height:260px}.steps{grid-template-columns:1fr 1fr;gap:5px}.footer-grid,.contact-grid{grid-template-columns:1fr}.header-inner{min-height:76px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee-track{animation:none;max-width:100%;overflow-x:auto}*,*:before,*:after{transition-duration:.01ms!important}}
/* ECHOO TRANSPARENT HEADER LOGO */

.site-header .brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-header .brand .site-logo {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    background: transparent;
}

/* Mobile */
@media (max-width: 767px) {
    .site-header .brand .site-logo {
        width: 170px;
        height: auto;
    }
}

/* =========================================
   ECHOO WEBSITE DESIGN - 2026
   TRANSPARENT FOOTER LOGO
========================================= */

.site-footer .footer-logo {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    background: transparent;
}

@media (max-width: 767px) {
    .site-footer .footer-logo {
        width: 180px;
        height: auto;
    }
}
/* =====================================================
   ECHOO WEBSITE DESIGN
   HEADER NAVIGATION FIX — 2026
   Preserve existing homepage design
===================================================== */

/* HEADER */
.site-header {
    position: relative;
    z-index: 9999;
}

/* MAIN HEADER CONTAINER */
.site-header .header-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px 30px;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* LOGO */
.site-header .site-branding {
    flex: 0 0 auto;
}

.site-header .site-logo {
    display: block;
    width: auto;
    max-height: 75px;
    object-fit: contain;
}

/* NAVIGATION AREA */
.site-header .primary-navigation {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

/* MAIN MENU - HORIZONTAL */
.site-header .primary-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: center;

    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 24px;
}

/* MAIN MENU ITEMS */
.site-header .primary-menu > li {
    position: relative;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* MAIN MENU LINKS */
.site-header .primary-menu > li > a {
    display: block;
    padding: 12px 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}

/* HOVER */
.site-header .primary-menu > li > a:hover,
.site-header .primary-menu > li.current-menu-item > a {
    color: #ff7200;
}

/* HIDE DROPDOWNS BY DEFAULT */
.site-header .primary-menu .sub-menu {
    position: absolute !important;
    top: 100%;
    left: 0;

    display: none !important;
    flex-direction: column !important;

    min-width: 275px;
    padding: 10px 0 !important;
    margin: 0 !important;

    background: #101820;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;

    list-style: none !important;
    box-shadow: 0 15px 35px rgba(0,0,0,.35);
    z-index: 99999;
}

/* SHOW DROPDOWN ON HOVER OR KEYBOARD FOCUS */
.site-header .primary-menu li:hover > .sub-menu,
.site-header .primary-menu li:focus-within > .sub-menu {
    display: flex !important;
}

/* DROPDOWN ITEMS */
.site-header .primary-menu .sub-menu li {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.site-header .primary-menu .sub-menu a {
    display: block;
    padding: 12px 18px;
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
    white-space: normal;
}

.site-header .primary-menu .sub-menu a:hover,
.site-header .primary-menu .sub-menu a:focus {
    color: #ff7200;
    background: rgba(255,255,255,.06);
}

/* PHONE BUTTON */
.site-header .header-cta {
    flex: 0 0 auto;
    margin-left: auto;
}

/* REMOVE DEFAULT LIST BULLETS */
.site-header .primary-menu li::marker,
.site-header .sub-menu li::marker {
    content: "";
}

/* =====================================================
   TABLET & MOBILE
===================================================== */

@media (max-width: 1100px) {

    .site-header .header-inner {
        flex-wrap: wrap;
    }

    .site-header .primary-navigation {
        flex-basis: 100%;
        order: 4;
    }

    .site-header .primary-menu {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 900px) {

    .site-header .header-inner {
        display: flex;
        flex-wrap: wrap;
        padding: 15px 20px;
    }

    .site-header .menu-toggle {
        display: flex;
        margin-left: auto;
    }

    .site-header .primary-navigation {
        display: none;
        flex-basis: 100%;
        width: 100%;
        order: 5;
    }

    .site-header .primary-navigation.is-open {
        display: block;
    }

    .site-header .primary-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch;
        width: 100%;
        gap: 0;
    }

    .site-header .primary-menu > li {
        width: 100%;
    }

    .site-header .primary-menu > li > a {
        padding: 14px 10px;
        border-bottom: 1px solid rgba(255,255,255,.1);
    }

    .site-header .primary-menu .sub-menu {
        position: static !important;
        display: flex !important;
        min-width: 100%;
        box-shadow: none;
        border: 0;
        padding-left: 15px !important;
        background: rgba(255,255,255,.04);
    }

    .site-header .header-cta {
        display: none;
    }
}
/* ==========================================================
   ECHOO WEBSITE DESIGN — NAVIGATION FIX V2
   Matches actual child theme HTML classes
   Desktop navigation + dropdown + mobile
========================================================== */

/* HEADER CONTAINER */
.site-header {
    position: relative;
    z-index: 9999;
    background: #050c11;
}

.site-header .header-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px 28px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* LOGO */
.site-header .brand {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.site-header .brand img {
    width: auto;
    max-width: 190px;
    max-height: 80px;
    object-fit: contain;
}

/* NAVIGATION CONTAINER */
.site-header .primary-nav {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

/* MAIN NAVIGATION — HORIZONTAL */
.site-header .primary-nav > .nav-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: auto;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* TOP-LEVEL ITEMS */
.site-header .nav-list > li {
    position: relative;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* TOP-LEVEL LINKS */
.site-header .nav-list > li > a {
    display: block;
    padding: 14px 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
}

.site-header .nav-list > li > a:hover,
.site-header .nav-list > li.current-menu-item > a,
.site-header .nav-list > li.current-menu-ancestor > a {
    color: #ff7200;
}

/* SERVICES DROPDOWN — HIDDEN BY DEFAULT */
.site-header .nav-list .sub-menu {
    display: none !important;
    position: absolute !important;
    top: 100%;
    left: 0;
    z-index: 99999;
    min-width: 275px;
    margin: 0 !important;
    padding: 10px 0 !important;
    background: #101820;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0,0,0,.35);
    list-style: none !important;
}

/* SHOW DROPDOWN ON HOVER OR KEYBOARD FOCUS */
.site-header .nav-list li:hover > .sub-menu,
.site-header .nav-list li:focus-within > .sub-menu {
    display: block !important;
}

/* DROPDOWN LINKS */
.site-header .nav-list .sub-menu li {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.site-header .nav-list .sub-menu a {
    display: block;
    padding: 12px 18px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: normal;
}

.site-header .nav-list .sub-menu a:hover,
.site-header .nav-list .sub-menu a:focus {
    background: rgba(255,255,255,.06);
    color: #ff7200;
}

/* REMOVE MENU BULLETS */
.site-header .nav-list,
.site-header .nav-list li,
.site-header .nav-list .sub-menu {
    list-style-type: none !important;
}

.site-header .nav-list li::marker {
    content: "";
}

/* PHONE CTA */
.site-header .header-cta {
    flex: 0 0 auto;
    margin-left: 0;
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1100px) {

    .site-header .header-inner {
        flex-wrap: wrap;
    }

    .site-header .primary-nav {
        flex: 1 1 100%;
        order: 4;
    }

    .site-header .primary-nav > .nav-list {
        flex-wrap: wrap !important;
        justify-content: center;
    }
}

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

@media (max-width: 900px) {

    .site-header .header-inner {
        flex-wrap: wrap;
        padding: 14px 20px;
    }

    .site-header .nav-toggle {
        display: flex;
        margin-left: auto;
    }

    .site-header .header-cta {
        display: none;
    }

    .site-header .primary-nav {
        display: none;
        width: 100%;
        flex: 1 1 100%;
        order: 5;
    }

    .site-header .primary-nav.is-open,
    .site-header .primary-nav.open {
        display: block;
    }

    .site-header .primary-nav > .nav-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    .site-header .nav-list > li {
        width: 100%;
    }

    .site-header .nav-list > li > a {
        display: block;
        padding: 14px 10px;
        border-bottom: 1px solid rgba(255,255,255,.1);
    }

    /* Submenu accessible on mobile */
    .site-header .nav-list .sub-menu {
        position: static !important;
        display: block !important;
        min-width: 100%;
        padding: 8px 0 8px 15px !important;
        background: rgba(255,255,255,.04);
        border: 0;
        box-shadow: none;
    }

    .site-header .brand img {
        max-width: 160px;
        max-height: 65px;
    }
}