@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#11120f;--paper:#f4f3ed;--lime:#F1CA03;--cyan:#4fdcf4;--pink:#ff759b;--line:rgba(17,18,15,.16)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}a{color:inherit;text-decoration:none}.mono,.eyebrow{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase}.nav2{position:sticky;z-index:40;top:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 4vw;background:rgba(244,243,237,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.brand2{font-weight:800;font-size:21px;letter-spacing:-1px}.brand2 i{font-style:normal;color:#00a6d2}.nav2-links{display:flex;align-items:center;gap:21px;font-size:12px;font-weight:700}.nav2-links a{transition:.2s}.nav2-links a:hover,.nav2-links .active{color:#007b9e}.nav2-links .contact-link{border:1px solid var(--ink);border-radius:99px;padding:9px 14px}.nav2-links .contact-link:hover{background:var(--ink);color:#fff}.hero2{min-height:78vh;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:110px 7vw 70px;overflow:hidden;background:var(--ink);color:#fff}.hero2:before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,rgba(0,0,0,.3),transparent 60%),repeating-linear-gradient(90deg,transparent 0,transparent 74px,rgba(255,255,255,.08) 75px)}.hero2>*{position:relative;z-index:1}.hero2 .eyebrow{color:var(--lime);display:flex;align-items:center;gap:13px}.hero2 .eyebrow:before{content:'';height:1px;width:46px;background:currentColor}.hero2 h1{margin:28px 0 0;max-width:1050px;font-size:clamp(60px,10.5vw,154px);letter-spacing:-.09em;line-height:.82;font-weight:800}.hero2 h1 em{font-style:normal;color:var(--lime)}.hero2 p{max-width:530px;margin:34px 0 0;color:#c8c9c2;font-size:17px;line-height:1.75}.hero-stamp{position:absolute!important;right:7vw;top:20%;display:grid;place-items:center;width:min(27vw,370px);aspect-ratio:1;border:1px solid rgba(255,255,255,.25);border-radius:50%;font-family:'DM Mono';font-size:11px;letter-spacing:.15em;color:var(--cyan);transform:rotate(-13deg);animation:spin 18s linear infinite}.hero-stamp:before{content:'';width:60%;aspect-ratio:1;border:1px dashed var(--cyan);border-radius:50%}.hero-stamp b{position:absolute;color:#fff;font:800 clamp(30px,4vw,55px)/1 Manrope;letter-spacing:-.1em}.hero-stamp b:after{content:'✦';color:var(--lime);font-size:.4em;vertical-align:top}.page{max-width:1380px;margin:auto;padding:125px 6vw}.lead{font-size:clamp(34px,5.2vw,76px);line-height:1.04;letter-spacing:-.07em;max-width:1100px;font-weight:700}.lead em{font-style:normal;color:#0085aa}.split{display:grid;grid-template-columns:1.03fr .97fr;gap:7vw;align-items:start;margin-top:95px}.label{display:flex;gap:15px;align-items:center;margin-bottom:25px;color:#0085aa}.label:before{content:'';width:38px;height:1px;background:currentColor}.copy{font-size:18px;line-height:1.8;color:#5a5b55}.image-block{position:relative;min-height:580px;border-radius:28px;overflow:hidden;background:#101b18}.image-block img{width:100%;height:100%;position:absolute;object-fit:cover;mix-blend-mode:screen;opacity:.88}.image-block:after{content:'LIVASYS / EST. 2012';position:absolute;left:21px;bottom:19px;padding:8px 11px;background:var(--lime);color:var(--ink);font:10px 'DM Mono';letter-spacing:.12em}.numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:115px;border:1px solid var(--line)}.number{padding:36px 25px;background:var(--paper)}.number b{display:block;font-size:clamp(38px,5vw,68px);letter-spacing:-.08em}.number span{font:11px 'DM Mono';letter-spacing:.1em;color:#73746e}.marquee2{overflow:hidden;background:var(--lime);white-space:nowrap;padding:21px 0;font-size:clamp(31px,5vw,66px);font-weight:800;letter-spacing:-.07em}.marquee2 div{display:inline-block;animation:slide 18s linear infinite}.service-list2{margin-top:70px;border-top:1px solid var(--line)}.service2{display:grid;grid-template-columns:84px 1fr .85fr 45px;gap:25px;align-items:center;padding:31px 0;border-bottom:1px solid var(--line);transition:.35s}.service2:hover{padding-left:22px;padding-right:12px;background:var(--ink);color:#fff}.service2 .num{font:11px 'DM Mono';color:#0085aa}.service2 h2{font-size:clamp(28px,3.3vw,48px);letter-spacing:-.07em;margin:0}.service2 p{margin:0;color:#6a6b66;line-height:1.7;font-size:14px}.service2:hover p{color:#c1c2bc}.service2 .arrow{font-size:32px;color:#0085aa;text-align:right}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:65px}.feature{min-height:270px;padding:28px;border-radius:20px;background:#e2e1dc;display:flex;flex-direction:column;justify-content:space-between;transition:.35s}.feature:nth-child(2){background:var(--cyan)}.feature:nth-child(3){background:var(--pink)}.feature:hover{transform:translateY(-11px) rotate(-1deg);box-shadow:0 20px 35px rgba(0,0,0,.17)}.feature .symbol{font-size:47px;line-height:1;font-weight:500}.feature h3{font-size:24px;line-height:1.1;letter-spacing:-.05em;margin:0}.course-grid2{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:70px}.course2{padding:30px;border:1px solid var(--ink);min-height:480px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;transition:.35s}.course2:before{content:attr(data-no);position:absolute;right:-12px;top:-38px;font-size:140px;font-weight:800;letter-spacing:-.1em;color:rgba(17,18,15,.08)}.course2:hover{background:var(--ink);color:#fff;transform:translateY(-10px)}.course2:hover .course-tag{color:var(--lime)}.course-tag{color:#0085aa;font:11px 'DM Mono';letter-spacing:.12em}.course2 h2{font-size:clamp(31px,3.4vw,49px);line-height:.9;letter-spacing:-.08em;position:relative}.course2 ul{padding:0;margin:0;list-style:none;font-size:14px;line-height:2.1;color:inherit}.course2 li:before{content:'— ';color:#0085aa}.course2 a{font:700 12px 'DM Mono';letter-spacing:.1em;border-bottom:1px solid currentColor;padding-bottom:5px;align-self:flex-start}.logo-grid2{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:65px}.logo2{min-height:180px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:clamp(19px,2.4vw,35px);font-weight:800;letter-spacing:-.08em;transition:.3s}.logo2:nth-child(3n){font-family:'DM Mono';letter-spacing:-.14em}.logo2:hover{background:var(--cyan);transform:scale(.96);border-radius:15px}.case-grid2{display:grid;grid-template-columns:1fr 1.25fr;gap:18px;margin-top:85px}.case{height:480px;position:relative;overflow:hidden;border-radius:23px;background:#222}.case:nth-child(2){height:620px}.case img{height:100%;width:100%;object-fit:cover;filter:saturate(.72);transition:.65s}.case:hover img{transform:scale(1.08);filter:saturate(1)}.case h3{position:absolute;z-index:1;left:22px;bottom:18px;margin:0;color:#fff;font-size:clamp(26px,3vw,43px);letter-spacing:-.07em}.case small{position:absolute;z-index:1;left:22px;top:20px;color:var(--lime);font:10px 'DM Mono';letter-spacing:.13em}.case:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.75))}.quote2{padding:85px 7vw;background:var(--pink);margin-top:110px;position:relative;overflow:hidden}.quote2:after{content:'“';position:absolute;right:5%;top:-24%;font:500 28rem/1 Georgia;color:rgba(255,255,255,.3)}.quote2 blockquote{position:relative;z-index:1;max-width:1050px;margin:0;font-size:clamp(30px,5vw,72px);font-weight:700;line-height:1.05;letter-spacing:-.07em}.quote2 cite{display:block;margin-top:34px;font:11px 'DM Mono';letter-spacing:.14em;font-style:normal}.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:70px}.role2{padding:30px;border:1px solid var(--line);min-height:260px;display:flex;flex-direction:column;justify-content:space-between;transition:.3s}.role2:hover{background:#1b1b18;color:#fff;transform:translateY(-8px)}.role2 h2{font-size:clamp(29px,3.5vw,47px);line-height:.94;letter-spacing:-.08em;margin:0}.role2 small{font:11px 'DM Mono';color:#0085aa;letter-spacing:.12em}.role2 a{font:700 12px 'DM Mono';letter-spacing:.1em;color:#0085aa}.journey{margin-top:100px;background:#191a17;color:#fff;padding:70px 6vw}.journey h2{font-size:clamp(38px,5vw,72px);letter-spacing:-.08em;line-height:.95;margin:0 0 65px}.steps2{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.step2{border-top:1px solid rgba(255,255,255,.25);padding-top:16px}.step2 b{font:11px 'DM Mono';color:var(--lime)}.step2 h3{font-size:26px;margin:25px 0 8px;letter-spacing:-.05em}.step2 p{margin:0;color:#b6b7b0;line-height:1.7;font-size:14px}.cta2{padding:110px 7vw;background:var(--cyan);display:flex;justify-content:space-between;align-items:end;gap:40px}.cta2 h2{max-width:850px;margin:0;font-size:clamp(45px,7vw,105px);line-height:.86;letter-spacing:-.09em}.cta2 a{flex:none;width:130px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff;font:11px 'DM Mono';text-align:center;letter-spacing:.08em;transition:.3s}.cta2 a:hover{background:#fff;color:var(--ink);transform:rotate(12deg)}.footer2{background:#11120f;color:#fff;padding:68px 7vw 35px}.footer2 h2{font-size:clamp(42px,8vw,120px);line-height:.82;letter-spacing:-.1em;margin:22px 0 60px}.footer2 h2 span{color:var(--lime)}.footer2-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.17);padding-top:18px;color:#a5a69f;font:10px 'DM Mono';letter-spacing:.1em}@keyframes spin{to{transform:rotate(347deg)}}@keyframes slide{to{transform:translateX(-50%)}}@media(max-width:1000px){.nav2-links{gap:12px;font-size:11px}.hero-stamp{right:4vw;top:12%;width:260px}.split{grid-template-columns:1fr;gap:45px}.image-block{min-height:410px}.course-grid2{grid-template-columns:1fr 1fr}.logo-grid2{grid-template-columns:repeat(3,1fr)}}@media(max-width:680px){.nav2{padding:14px 5vw}.nav2-links{overflow-x:auto;max-width:72vw;white-space:nowrap;padding-bottom:2px}.nav2-links .contact-link{padding:7px 10px}.hero2{min-height:72vh;padding:100px 6vw 55px}.hero2 h1{font-size:clamp(55px,17vw,94px)}.hero-stamp{opacity:.45;width:210px;top:7%;right:-35px}.page{padding:85px 6vw}.numbers,.feature-grid,.course-grid2,.role-grid{grid-template-columns:1fr}.number{padding:28px}.service2{grid-template-columns:42px 1fr 25px;gap:12px}.service2 p{grid-column:2;grid-row:2}.service2 .arrow{grid-column:3;grid-row:1}.logo-grid2{grid-template-columns:repeat(2,1fr)}.logo2{min-height:125px}.case-grid2{grid-template-columns:1fr}.case,.case:nth-child(2){height:390px}.quote2{margin-top:70px;padding:66px 6vw}.steps2{grid-template-columns:1fr}.cta2{padding:75px 6vw;align-items:flex-start;flex-direction:column}.footer2-bottom{flex-direction:column}.marquee2{font-size:36px}}
.how2{padding:110px 7vw;background:#deddd6}.how2-head{display:flex;justify-content:space-between;gap:25px;align-items:end}.how2 h2{font-size:clamp(45px,7vw,105px);letter-spacing:-.09em;line-height:.85;margin:20px 0 0}.how2>p{max-width:350px;color:#5a5b55;line-height:1.7}.how-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:70px;border-top:1px solid var(--line);border-left:1px solid var(--line)}.how-card{padding:24px;min-height:260px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#deddd6;transition:.3s}.how-card:hover{background:var(--lime);transform:translateY(-8px)}.how-card b{font:11px 'DM Mono';color:#0085aa}.how-card h3{font-size:28px;letter-spacing:-.07em;line-height:.95;margin:52px 0 13px}.how-card p{font-size:14px;line-height:1.7;color:#555750}.service-tags{display:flex;flex-wrap:wrap;gap:11px;margin-top:60px}.service-tags span{padding:13px 18px;border:1px solid var(--ink);border-radius:99px;font:11px 'DM Mono';letter-spacing:.08em;transition:.25s}.service-tags span:hover{background:var(--lime);transform:rotate(-2deg)}.benefits{padding:110px 7vw;background:#11120f;color:#fff}.benefits .lead{max-width:900px}.benefits .lead em{color:var(--lime)}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:70px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.2)}.benefit{min-height:250px;padding:27px;background:#11120f}.benefit b{font:11px 'DM Mono';color:var(--lime)}.benefit h3{font-size:clamp(26px,3vw,43px);letter-spacing:-.07em;line-height:.95;margin:42px 0 12px}.benefit p{margin:0;color:#b7b8b1;font-size:14px;line-height:1.7}.site-map2{padding:70px 7vw 36px;background:#11120f;color:#fff;border-top:1px solid rgba(255,255,255,.15)}.site-map-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:35px;padding-bottom:60px}.site-map-grid h3{font:11px 'DM Mono';letter-spacing:.12em;color:var(--lime);margin:0 0 18px}.site-map-grid p,.site-map-grid a{display:block;margin:0 0 8px;color:#b7b8b1;font-size:14px;line-height:1.6}.site-map-grid a:hover{color:#fff}.site-map-grid .location{font-size:15px;color:#fff;max-width:330px}.site-map-bottom{display:flex;justify-content:space-between;gap:25px;border-top:1px solid rgba(255,255,255,.15);padding-top:18px;font:10px 'DM Mono';letter-spacing:.1em;color:#a5a69f}@media(max-width:780px){.how2{padding:80px 6vw}.how2-head{display:block}.how2>p{margin-top:28px}.how-grid,.benefit-grid{grid-template-columns:1fr}.site-map-grid{grid-template-columns:1fr 1fr}.site-map-bottom{flex-direction:column}.service-tags{gap:8px}.service-tags span{padding:10px 12px}.benefits{padding:80px 6vw}}


/* Livasys shared page styles moved from HTML <style> blocks */
/*=========================================
HEADER (full-length version, matches index.html header)
=========================================*/
        * {
            box-sizing: border-box;
        }

        body {
            font-family: "jost", sans-serif;
        }

        a {
            -webkit-tap-highlight-color: transparent;
        }

        a:focus-visible,
        button:focus-visible {
            outline: 3px solid #24A3D8;
            outline-offset: 3px;
            border-radius: 4px;
        }

        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 9999;
            transition: .5s ease;
        }

        .header-container {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 82px;
            padding: 0 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(255, 255, 255, .85);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(0, 0, 0, .06);
            box-shadow: 0 10px 40px rgba(0, 0, 0, .06);
            transition: height .4s ease;
        }

        .logo {
            font-size: 22px;
            font-weight: 800;
            color: #111;
            text-decoration: none;
            letter-spacing: 1px;
        }

        .logo span {
            color: #24A3D8;
        }

        .navbar ul {
            display: flex;
            gap: 42px;
            list-style: none;
        }

        .navbar a {
            position: relative;
            text-decoration: none;
            color: #111;
            font-size: 15px;
            font-weight: 500;
            transition: .35s;
        }

        .navbar a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -8px;
            width: 0;
            height: 2px;
            background: #24A3D8;
            transition: .35s;
        }

        .navbar a:hover {
            color: #24A3D8;
        }

        .navbar a:hover::after {
            width: 100%;
        }

        .navbar a.active {
            color: #24A3D8;
        }

        .navbar a.active::after {
            width: 100%;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 18px;
        }

        .contact-btn {
            position: relative;
            overflow: hidden;
            width: 170px;
            height: 54px;
            border-radius: 100px;
            background: #111;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            font-weight: 600;
            transition: .4s;
        }

        .contact-btn span {
            position: relative;
            z-index: 2;
        }

        .contact-btn::before {
            content: "";
            position: absolute;
            inset: 0;
            background: #F1CA03;
            transform: translateY(100%);
            transition: .45s ease;
        }

        .contact-btn:hover::before {
            transform: translateY(0);
        }

        .contact-btn:hover {
            color: #111;
            transform: translateY(-4px);
        }

        .menu-btn {
            width: 54px;
            height: 54px;
            border: none;
            border-radius: 50%;
            background: #111;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            flex-shrink: 0;
        }

        .menu-btn span {
            width: 22px;
            height: 2px;
            background: #fff;
            transition: .4s;
        }

        .menu-btn.active span:nth-child(1) {
            transform: translateY(4px) rotate(45deg);
        }

        .menu-btn.active span:nth-child(2) {
            transform: translateY(-4px) rotate(-45deg);
        }

        .mobile-menu {
            position: fixed;
            inset: 0;
            background: #111;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: .5s;
            z-index: 1;
            overflow-y: auto;
            padding: 110px 24px 50px;
        }

        .mobile-menu.active {
            opacity: 1;
            visibility: visible;
        }

        .mobile-menu ul {
            list-style: none;
            text-align: center;
            width: 100%;
            margin: auto;
        }

        .mobile-menu li {
            margin: 22px 0;
        }

        @media(max-height:700px) {
            .mobile-menu {
                padding: 90px 24px 30px;
            }

            .mobile-menu li {
                margin: 14px 0;
            }

            .mobile-menu a {
                font-size: clamp(22px, 7vw, 32px);
            }

            .mobile-menu li:last-child a {
                padding: 10px 26px;
                margin-top: 10px;
                font-size: 16px;
            }
        }

        .mobile-menu a {
            color: #fff;
            text-decoration: none;
            font-size: clamp(30px, 8vw, 42px);
            font-weight: 700;
            transition: .3s;
        }

        .mobile-menu a:hover {
            color: #24A3D8;
        }

        .mobile-menu li:last-child a {
            display: inline-flex;
            margin-top: 20px;
            padding: 14px 32px;
            border-radius: 100px;
            background: #24A3D8;
            font-size: 18px;
        }

        @media(max-width:1100px) {
            .navbar {
                display: none;
            }

            .menu-btn {
                display: flex;
            }

            .contact-btn {
                display: none;
            }
        }

        @media(max-width:560px) {
            .header-container {
                height: 70px;
                padding: 0 18px;
            }

            .logo {
                font-size: 18px;
            }

            .menu-btn {
                width: 46px;
                height: 46px;
            }
        }

        /* push page content below the fixed full-length header */
        .page-offset {
            padding-top: 82px;
        }

        @media(max-width:560px) {
            .page-offset {
                padding-top: 70px;
            }
        }

        /*=========================================
FOOTER (matches index.html footer)
=========================================*/
        .footer {
            background: #111;
            color: #fff;
            padding: 120px 0 50px;
            text-align: center;
            overflow: hidden;
        }

        .footer-tag {
            display: inline-block;
            color: #F1CA03;
            font-size: 13px;
            letter-spacing: 4px;
            font-weight: 600;
        }

        .footer h2 {
            margin-top: 26px;
            font-size: clamp(36px, 8vw, 120px);
            line-height: .95;
            font-weight: 900;
        }

        .footer h2 span {
            display: block;
            color: #24A3D8;
        }

        .footer-logo {
            margin: 90px 0 60px;
            font-size: clamp(56px, 13vw, 220px);
            font-weight: 900;
            color: transparent;
            -webkit-text-stroke: 2px rgba(255, 255, 255, .08);
            letter-spacing: 6px;
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
            margin-bottom: 55px;
            padding: 0 20px;
        }

        .footer-links a {
            text-decoration: none;
            color: #fff;
            font-size: 17px;
            transition: .3s;
        }

        .footer-links a:hover {
            color: #24A3D8;
        }

        .footer-contact {
            display: flex;
            justify-content: center;
            gap: 35px;
            flex-wrap: wrap;
            margin-bottom: 55px;
            padding: 0 20px;
        }

        .footer-contact a,
        .footer-contact span {
            color: #aaa;
            text-decoration: none;
            font-size: 16px;
        }

        .footer-contact a:hover {
            color: #F1CA03;
        }

        .footer-social {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
            margin-bottom: 55px;
            padding: 0 20px;
        }

        .footer-social a {
            color: #fff;
            text-decoration: none;
            font-size: 15px;
            position: relative;
        }

        .footer-social a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 0;
            height: 2px;
            background: #24A3D8;
            transition: .35s;
        }

        .footer-social a:hover::after {
            width: 100%;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, .08);
            padding-top: 30px;
            color: #777;
            font-size: 14px;
        }

        @media(max-width:900px) {
            .footer {
                padding: 100px 0 40px;
            }

            .footer-logo {
                margin: 70px 0 50px;
            }
        }


/* Livasys homepage CSS moved from index.html */
/*=========================================

RESET

=========================================*/

        .home-page *{

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }



        html{

            scroll-behavior: smooth;

        }



        .home-page{

            font-family: "jost", sans-serif;

            background: #F8F8F8;

            overflow-x: hidden;

        }



        .home-page img{

            max-width: 100%;

            display: block;

        }



        .home-page a{

            -webkit-tap-highlight-color: transparent;

        }



        /* Accessible focus ring, respected everywhere */

        .home-page a:focus-visible, .home-page button:focus-visible{

            outline: 3px solid #24A3D8;

            outline-offset: 3px;

            border-radius: 4px;

        }



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

            * {

                animation-duration: .001ms !important;

                animation-iteration-count: 1 !important;

                transition-duration: .001ms !important;

                scroll-behavior: auto !important;

            }

        }



        /*=========================================

HEADER

=========================================*/

        .home-page .header{

            position: fixed;

            top: 20px;

            left: 0;

            width: 100%;

            z-index: 9999;

            display: flex;

            flex-direction: column;

            align-items: center;

            transition: .5s ease;

        }



        .home-page .header-container{

            position: relative;

            z-index: 2;

            width: min(94%, 1450px);

            height: 82px;

            padding: 0 28px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            border-radius: 22px;

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

            backdrop-filter: blur(14px);

            -webkit-backdrop-filter: blur(14px);

            border: 1px solid rgba(255, 255, 255, .35);

            box-shadow: 0 10px 40px rgba(0, 0, 0, .08);

            transition: height .4s ease;

        }



       



        .home-page .logo img{

            height: 68px;

            width: auto;

            max-width: 170px;

            object-fit: contain;

            display: block;

            transition: height .4s ease;

        }



        @media(max-width:560px) {

            .logo img {

                height: 34px;

            }

        }



        /*=========================================

NAVIGATION

=========================================*/

        .home-page .navbar ul{

            display: flex;

            gap: 42px;

            list-style: none;

        }



        .home-page .navbar a{

            position: relative;

            text-decoration: none;

            color: #111;

            font-size: 15px;

            font-weight: 500;

            transition: .35s;

        }



        .home-page .navbar a::after{

            content: "";

            position: absolute;

            left: 0;

            bottom: -8px;

            width: 0;

            height: 2px;

            background: #24A3D8;

            transition: .35s;

        }



        .home-page .navbar a:hover{

            color: #24A3D8;

        }



        .home-page .navbar a:hover::after{

            width: 100%;

        }



        .home-page .navbar a.active{

            color: #24A3D8;

        }



        .home-page .navbar a.active::after{

            width: 100%;

        }



        /*=========================================

HEADER RIGHT / BUTTON

=========================================*/

        .home-page .header-right{

            display: flex;

            align-items: center;

            gap: 18px;

        }



        .home-page .contact-btn{

            position: relative;

            overflow: hidden;

            width: 170px;

            height: 54px;

            border-radius: 100px;

            background: #111;

            color: #fff;

            display: flex;

            justify-content: center;

            align-items: center;

            text-decoration: none;

            font-weight: 600;

            transition: .4s;

        }



        .home-page .contact-btn span{

            position: relative;

            z-index: 2;

        }



        .home-page .contact-btn::before{

            content: "";

            position: absolute;

            inset: 0;

            background: #F1CA03;

            transform: translateY(100%);

            transition: .45s ease;

        }



        .home-page .contact-btn:hover::before{

            transform: translateY(0);

        }



        .home-page .contact-btn:hover{

            color: #111;

            transform: translateY(-4px);

        }



        /*=========================================

MOBILE MENU BUTTON

=========================================*/

        .home-page .menu-btn{

            width: 54px;

            height: 54px;

            border: none;

            border-radius: 50%;

            background: #111;

            display: none;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            gap: 6px;

            cursor: pointer;

            flex-shrink: 0;

        }



        .home-page .menu-btn span{

            width: 22px;

            height: 2px;

            background: #fff;

            transition: .4s;

        }



        .home-page .menu-btn.active span:nth-child(1){

            transform: translateY(4px) rotate(45deg);

        }



        .home-page .menu-btn.active span:nth-child(2){

            transform: translateY(-4px) rotate(-45deg);

        }



        /*=========================================

MOBILE MENU

NOTE: This is placed OUTSIDE .header-container on purpose.

.header-container has backdrop-filter, and any ancestor with

filter / backdrop-filter / transform creates a new containing

block for descendant position:fixed elements — trapping them

inside that ancestor's box instead of the full viewport. That

was why the menu previously rendered as a tiny black rectangle

instead of a full-screen overlay. Keeping .mobile-menu as a

sibling of .header-container (still inside the filter-free

.header wrapper) fixes it.

=========================================*/

        .home-page .mobile-menu{

            position: fixed;

            inset: 0;

            background: #111;

            display: flex;

            justify-content: flex-start;

            align-items: center;

            opacity: 0;

            visibility: hidden;

            transition: .5s;

            z-index: 1;

            overflow-y: auto;

            padding: 110px 24px 50px;

        }



        .home-page .mobile-menu.active{

            opacity: 1;

            visibility: visible;

        }



        .home-page .mobile-menu ul{

            list-style: none;

            text-align: center;

            width: 100%;

            margin: auto;

        }



        .home-page .mobile-menu li{

            margin: 22px 0;

        }



        /* Short viewports (landscape phones, small screens): tighten spacing so

   every link stays reachable without needing to scroll */

        @media(max-height:700px) {

            .mobile-menu {

                padding: 90px 24px 30px;

            }



            .mobile-menu li {

                margin: 14px 0;

            }



            .mobile-menu a {

                font-size: clamp(22px, 7vw, 32px);

            }



            .mobile-menu li:last-child a {

                padding: 10px 26px;

                margin-top: 10px;

                font-size: 16px;

            }

        }



        .home-page .mobile-menu a{

            color: #fff;

            text-decoration: none;

            font-size: clamp(30px, 8vw, 42px);

            font-weight: 700;

            transition: .3s;

        }



        .home-page .mobile-menu a:hover{

            color: #24A3D8;

        }



        .home-page .mobile-menu li:last-child a{

            display: inline-flex;

            margin-top: 20px;

            padding: 14px 32px;

            border-radius: 100px;

            background: #24A3D8;

            font-size: 18px;

        }



        /*=========================================

RESPONSIVE — HEADER

=========================================*/

        @media(max-width:1100px) {

            .navbar {

                display: none;

            }



            .menu-btn {

                display: flex;

            }



            .contact-btn {

                display: none;

            }

        }



        /*=========================

HERO

=========================*/

        .home-page .hero{

            position: relative;

            min-height: 100vh;

            overflow: hidden;

            background: #F8F8F8;

            display: flex;

            align-items: center;

            padding: 150px 0 100px;

        }



        .home-page .hero-grid{

            position: absolute;

            inset: 0;

            background-image:

                linear-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px),

                linear-gradient(90deg, rgba(0, 0, 0, .05) 1px, transparent 1px);

            background-size: 70px 70px;

            -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);

            mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);

        }



        .home-page .outline-title{

            position: absolute;

            bottom: -40px;

            left: 50%;

            transform: translateX(-50%);

            font-size: 17vw;

            font-weight: 900;

            color: transparent;

            -webkit-text-stroke: 2px rgba(0, 0, 0, .05);

            white-space: nowrap;

            pointer-events: none;

            z-index: 1;

        }



        .home-page .hero-container{

            width: min(92%, 1450px);

            margin: auto;

            display: grid;

            grid-template-columns: 1.1fr .9fr;

            gap: 90px;

            align-items: center;

            position: relative;

            z-index: 5;

        }



        .home-page .hero-tag{

            display: inline-flex;

            align-items: center;

            gap: 15px;

            letter-spacing: 5px;

            font-size: 13px;

            font-weight: 600;

            color: #24A3D8;

        }



        .home-page .hero-tag::before{

            content: "";

            width: 60px;

            height: 2px;

            background: #F1CA03;

        }



        .home-page .hero h1{

            margin-top: 35px;

            font-size: clamp(46px, 8vw, 135px);

            line-height: .95;

            font-weight: 900;

            color: #111;

        }



        .home-page .hero h1 span{

            display: block;

            color: #24A3D8;

        }



        .home-page .hero p{

            max-width: 500px;

            width: 100%;

            margin-top: 35px;

            font-size: clamp(17px, 2vw, 20px);

            line-height: 1.8;

            color: #666;

        }



        .home-page .hero-action{

            display: flex;

            flex-wrap: wrap;

            gap: 25px;

            margin-top: 45px;

        }



        .home-page .start-btn{

            background: #111;

            color: #fff;

            padding: 20px 42px;

            border-radius: 60px;

            text-decoration: none;

            font-weight: 600;

            transition: .4s;

            display: inline-block;

        }



        /*=========================================

PREMIUM CAMERA ZOOM EFFECT

=========================================*/



        .home-page .camera-wrapper{

            position: relative;

            width: 100%;

            height: 100%;

            perspective: 2500px;

            overflow: visible;

        }



        .home-page .zoom-target{

            position: relative;

            cursor: pointer;

            transform-origin: center center;

            will-change: transform;

            transition: none;

            z-index: 20;

        }



        /* Overlay */



        .home-page .zoom-overlay{

            position: absolute;

            inset: 0;

            background: linear-gradient(180deg,

                    rgba(0, 0, 0, .05),

                    rgba(0, 0, 0, .35));

            z-index: 2;

            pointer-events: none;

        }



        /* Image */



        .home-page .zoom-target img{

            width: 100%;

            height: 100%;

            object-fit: cover;

            display: block;

        }



        /* Fullscreen Mode */



        .home-page .zoom-target.fullscreen{



            position: fixed;



            top: 0;

            left: 0;



            width: 100vw;

            height: 100vh;



            margin: 0;



            border-radius: 0;



            z-index: 999999;



            overflow: hidden;



            box-shadow: none;



            transform: none;



        }



        /* Premium Shadow */



        .home-page .zoom-target{



            box-shadow:



                0 35px 90px rgba(0, 0, 0, .18),



                0 15px 40px rgba(0, 0, 0, .08);



        }



        /* Hover */



        .home-page .zoom-target:hover{



            box-shadow:



                0 60px 140px rgba(0, 0, 0, .22),



                0 25px 60px rgba(0, 0, 0, .12);



        }



        /* Smooth Border Radius */



        .home-page .zoom-target, .home-page .zoom-target img{



            border-radius: 28px;



        }



        /* Background Fade */



        .home-page .hero-transition{



            position: fixed;



            inset: 0;



            background: #000;



            opacity: 0;



            pointer-events: none;



            z-index: 999990;



        }



        /* Hero Fade */



        .home-page .hero-fade{



            transition: opacity .6s ease,



                transform .6s ease;



        }



        /* Hide During Animation */



        .home-page .hero-hidden{



            opacity: 0;



            transform: translateY(-60px);



            pointer-events: none;



        }



        /* Disable Clicking */



        .home-page .zooming{



            pointer-events: none;



        }



        /* Improve GPU Rendering */



        .home-page .zoom-target, .home-page .camera-wrapper, .home-page .hero-content, .home-page .hero-grid, .home-page .scroll-down{



            transform: translateZ(0);



            backface-visibility: hidden;



        }



        /* Better Performance */



        .home-page .hero{



            isolation: isolate;



        }



        /* Cursor */



        .home-page .zoom-target{



            cursor: zoom-in;



        }



        .home-page .zoom-target:active{



            cursor: grabbing;



        }



        /* Mobile */



        @media(max-width:768px) {



            .zoom-target {



                border-radius: 20px;



            }



            .zoom-target img {



                border-radius: 20px;



            }



        }





        .home-page .start-btn:hover{

            background: #24A3D8;

            transform: translateY(-4px);

        }



        .home-page .watch-btn{

            color: #111;

            text-decoration: none;

            font-weight: 600;

            display: inline-flex;

            align-items: center;

            gap: 10px;

            transition: .3s;

        }



        .home-page .watch-btn::before{

            content: "▶";

            display: inline-flex;

            align-items: center;

            justify-content: center;

            width: 44px;

            height: 44px;

            border-radius: 50%;

            border: 2px solid #111;

            font-size: 13px;

            transition: .3s;

        }



        .home-page .watch-btn:hover::before{

            background: #111;

            color: #fff;

        }



        .home-page .hero-visual{

            position: relative;

        }



        .home-page .hero-showcase{

            position: relative;

            display: block;

            height: min(620px, 68vh);

            overflow: hidden;

            border-radius: 32px;

            transform: rotate(-4deg);

            box-shadow: 0 40px 80px rgba(0, 0, 0, .18);

            background: #111;

            isolation: isolate;

        }



        .home-page .hero-showcase::before, .home-page .hero-showcase::after{

            content: "";

            position: absolute;

            z-index: 3;

            left: 0;

            width: 100%;

            height: 20%;

            pointer-events: none;

        }



        .home-page .hero-showcase::before{

            top: 0;

            background: linear-gradient(#111, transparent);

        }



        .home-page .hero-showcase::after{

            bottom: 0;

            background: linear-gradient(transparent, #111);

        }



        .home-page .visual-track{

            display: flex;

            flex-direction: column;

            gap: 16px;

            padding: 16px;

            animation: galleryScroll 20s linear infinite;

        }



        .home-page .hero-showcase:hover .visual-track, .home-page .hero-showcase:focus-within .visual-track{

            animation-play-state: paused;

        }



        .home-page .visual-card{

            position: relative;

            display: block;

            overflow: hidden;

            border-radius: 20px;

            height: 260px;

            flex: none;

            text-decoration: none;

            color: #fff;

        }



        .home-page .visual-card img{

            width: 100%;

            height: 100%;

            object-fit: cover;

            transition: transform .55s ease;

        }



        .home-page .visual-card::after{

            content: "";

            position: absolute;

            inset: 0;

            background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, .8));

        }



        .home-page .visual-card span{

            position: absolute;

            z-index: 2;

            left: 20px;

            bottom: 17px;

            font-size: 17px;

            font-weight: 700;

            letter-spacing: .04em;

        }



        .home-page .visual-card small{

            display: block;

            margin-top: 2px;

            color: #d5f4ff;

            font-size: 11px;

            letter-spacing: .18em;

        }



        .home-page .visual-card:hover img{

            transform: scale(1.08);

        }



        .home-page .gallery-note{

            position: absolute;

            z-index: 4;

            right: 18px;

            top: 18px;

            border-radius: 100px;

            padding: 9px 14px;

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

            color: #111;

            font-size: 11px;

            font-weight: 700;

            letter-spacing: .1em;

        }



        @keyframes galleryScroll {

            from {

                transform: translateY(0)

            }



            to {

                transform: translateY(calc(-50% - 8px))

            }

        }



        .home-page .image-card{

            position: relative;

            border-radius: 28px;

            overflow: hidden;

            aspect-ratio: 4/5;

            background: linear-gradient(155deg, #24A3D8, #111 70%);

            transform: rotate(-5deg);

            box-shadow: 0 40px 80px rgba(0, 0, 0, .18);

            transition: transform .1s ease-out;

        }



        .home-page .image-card img{

            width: 100%;

            height: 100%;

            object-fit: cover;

        }



        .home-page .badge{

            position: absolute;

            background: #fff;

            color: #111;

            font-size: 13px;

            font-weight: 700;

            padding: 12px 22px;

            border-radius: 100px;

            box-shadow: 0 15px 35px rgba(0, 0, 0, .15);

        }



        .home-page .badge.top{

            top: 26px;

            left: -18px;

        }



        .home-page .badge.bottom{

            bottom: 26px;

            right: -18px;

            background: #F1CA03;

        }



        .home-page .scroll-down{

            position: absolute;

            left: 50%;

            bottom: 36px;

            transform: translateX(-50%);

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 10px;

            font-size: 12px;

            letter-spacing: 3px;

            color: #999;

            z-index: 5;

        }



        .home-page .scroll-down span{

            width: 1px;

            height: 36px;

            background: linear-gradient(#999, transparent);

            animation: scrollPulse 1.8s ease-in-out infinite;

        }



        @keyframes scrollPulse {

            0% {

                opacity: 0;

                transform: scaleY(0);

                transform-origin: top;

            }



            50% {

                opacity: 1;

                transform: scaleY(1);

                transform-origin: top;

            }



            100% {

                opacity: 0;

                transform: scaleY(1);

                transform-origin: bottom;

            }

        }



        /*======================================

SERVICES

======================================*/

        .home-page .services{

            padding: 140px 0;

            background: #fff;

        }



        .home-page .services-header{

            width: min(92%, 1400px);

            margin: 0 auto 90px;

        }



        .home-page .section-tag{

            display: inline-block;

            font-size: 13px;

            letter-spacing: 4px;

            color: #24A3D8;

            font-weight: 600;

            text-transform: uppercase;

        }



        .home-page .section-title{

            margin-top: 20px;

            font-size: clamp(38px, 6vw, 90px);

            line-height: 1.05;

            font-weight: 800;

            color: #111;

        }



        .home-page .section-title span{

            display: block;

            color: #F1CA03;

        }



        .home-page .services-list{

            width: min(92%, 1400px);

            margin: auto;

        }



        .home-page .service-item{

            position: relative;

            display: grid;

            grid-template-columns: 70px 1fr 220px 50px;

            align-items: center;

            gap: 30px;

            padding: 38px 0;

            border-top: 1px solid #ddd;

            cursor: pointer;

            transition: .45s;

            text-decoration: none;

            color: inherit;

        }



        .home-page .service-item:last-child{

            border-bottom: 1px solid #ddd;

        }



        .home-page .service-number{

            font-size: 20px;

            font-weight: 700;

            color: #999;

            transition: .45s;

        }



        .home-page .service-content h3{

            font-size: clamp(26px, 3.4vw, 46px);

            font-weight: 700;

            color: #111;

            margin-bottom: 8px;

            transition: .45s;

        }



        .home-page .service-content p{

            max-width: 420px;

            color: #666;

            line-height: 1.8;

            font-size: 18px;

        }



        .home-page .service-image{

            width: clamp(250px, 20vw, 320px);

            height: clamp(155px, 12vw, 200px);

            border-radius: 18px;

            overflow: hidden;

            transform: scale(.86);

            transform-origin: center right;

            opacity: 0;

            transition: opacity .4s ease, transform .5s ease;

            justify-self: end;

            background: linear-gradient(135deg, #24A3D8, #111);

            box-shadow: 0 18px 40px rgba(0,0,0,.16);

        }



        .home-page .service-image img{

            width: 100%;

            height: 100%;

            object-fit: cover;

            transition: .5s;

        }



        .home-page .service-arrow{

            font-size: 38px;

            color: #111;

            transition: .4s;

            text-align: right;

        }



        .home-page .service-item:hover{

            background: #111;

            padding-left: 30px;

            padding-right: 10px;

        }



        .home-page .service-item:hover .service-number{

            color: #F1CA03;

        }



        .home-page .service-item:hover h3{

            color: #fff;

        }



        .home-page .service-item:hover p{

            color: #ddd;

        }



        .home-page .service-item:hover .service-image{

            opacity: 1;

            transform: scale(1);

            box-shadow: 0 24px 50px rgba(0,0,0,.24);

        }



        .home-page .service-item:hover .service-image img{

            transform: scale(1.08);

        }



        .home-page .service-item:hover .service-arrow{

            color: #24A3D8;

            transform: translateX(15px) rotate(-45deg);

        }



        /*=====================================

ABOUT

=====================================*/

        .home-page .about{

            padding: 140px 0;

            background: #F8F8F8;

        }



        .home-page .about-grid{

            width: min(92%, 1450px);

            margin: auto;

            display: grid;

            grid-template-columns: 1fr 460px 260px;

            gap: 60px;

            align-items: center;

        }



        .home-page .about-tag{

            display: inline-block;

            color: #24A3D8;

            font-size: 13px;

            font-weight: 600;

            letter-spacing: 4px;

            margin-bottom: 25px;

        }



        .home-page .about-left h2{

            font-size: clamp(34px, 5vw, 78px);

            line-height: 1.05;

            font-weight: 800;

            color: #111;

        }



        .home-page .about-left h2 span{

            display: block;

            color: #F1CA03;

        }



        .home-page .about-left p{

            margin-top: 35px;

            font-size: clamp(16px, 2vw, 19px);

            line-height: 1.9;

            color: #666;

            max-width: 520px;

        }



        .home-page .about-btn{

            margin-top: 45px;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            width: 170px;

            height: 58px;

            border-radius: 50px;

            text-decoration: none;

            background: #111;

            color: #fff;

            font-weight: 600;

            transition: .4s;

        }



        .home-page .about-btn:hover{

            background: #24A3D8;

        }



        .home-page .about-image{

            position: relative;

        }



        .home-page .about-image .img-fill{

            width: 100%;

            aspect-ratio: 3/4;

            border-radius: 35px;

            display: block;

            background: linear-gradient(160deg, #24A3D8, #111 75%);

        }



        .home-page .experience-card{

            position: absolute;

            bottom: 35px;

            left: -30px;

            background: #fff;

            padding: 26px 30px;

            border-radius: 22px;

            box-shadow: 0 25px 60px rgba(0, 0, 0, .12);

        }



        .home-page .experience-card h3{

            font-size: 48px;

            color: #24A3D8;

        }



        .home-page .experience-card span{

            color: #666;

            font-size: 14px;

        }



        .home-page .about-right{

            display: flex;

            flex-direction: column;

            gap: 28px;

        }



        .home-page .stat{

            padding: 30px;

            background: #fff;

            border-radius: 22px;

            transition: .35s;

        }



        .home-page .stat h2{

            font-size: 44px;

            color: #111;

        }



        .home-page .stat p{

            margin-top: 8px;

            color: #666;

            line-height: 1.6;

            font-size: 15px;

        }



        .home-page .stat:hover{

            transform: translateX(15px);

            background: #111;

        }



        .home-page .stat:hover h2{

            color: #F1CA03;

        }



        .home-page .stat:hover p{

            color: #fff;

        }



        /*==================================

PROCESS — SCROLL STORY

==================================*/

        .home-page .process{
            position: relative;
            min-height: 400vh;
            background: #111;
            color: #fff;
            padding: 0;
            overflow: visible;
        }

        .home-page .process-container{
            position: sticky;
            top: 0;
            width: min(92%, 1400px);
            height: 100vh;
            min-height: 680px;
            margin: 0 auto;
            padding: 120px 0 70px;
            box-sizing: border-box;
            display: grid;
            grid-template-columns: 380px minmax(0, 1fr);
            gap: 80px;
            align-items: center;
        }

        .home-page .process-left{
            position: relative;
            top: auto;
            height: max-content;
            align-self: center;
        }

        .home-page .process-left h2{
            font-size: clamp(38px, 4.5vw, 70px);
            line-height: .98;
            margin: 20px 0 60px;
        }

        .home-page .process-left h2 span{
            color: #F1CA03;
        }

        .home-page .timeline{
            position: relative;
            padding-left: 35px;
        }

        .home-page .timeline-line{
            position: absolute;
            left: 16px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: rgba(255, 255, 255, .15);
        }

        .home-page .timeline-item{
            position: relative;
            margin-bottom: 45px;
            cursor: default;
        }

        .home-page .timeline-item:last-child{
            margin-bottom: 0;
        }

        .home-page .timeline-item::before{
            content: "";
            position: absolute;
            left: -27px;
            top: 8px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #555;
            transition: transform .45s ease, background-color .45s ease, box-shadow .45s ease;
        }

        .home-page .timeline-item.active::before{
            background: #F1CA03;
            transform: scale(1.5);
            box-shadow: 0 0 0 7px rgba(241, 202, 3, .10);
        }

        .home-page .timeline-item span{
            font-size: 20px;
            color: #777;
            transition: color .35s ease, transform .35s ease;
            display: inline-block;
        }

        .home-page .timeline-item.active span{
            color: #fff;
            transform: translateX(3px);
        }

        .home-page .process-right{
            position: relative;
            min-width: 0;
            height: min(72vh, 700px);
            align-self: center;
        }

        .home-page .step{
            position: absolute;
            inset: 0;
            min-height: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translate3d(0, 34px, 0);
            transition: opacity .55s ease, transform .65s cubic-bezier(.22,.61,.36,1), visibility 0s linear .55s;
        }

        .home-page .step.is-active{
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translate3d(0, 0, 0);
            transition-delay: 0s;
        }

        .home-page .step h3{
            font-size: clamp(38px, 6vw, 90px);
            line-height: .98;
            margin-bottom: 22px;
        }

        .home-page .step p{
            max-width: 620px;
            font-size: clamp(17px, 2vw, 22px);
            line-height: 1.9;
            color: #bbb;
        }

        @media (max-width: 1100px) and (min-width: 901px){
            .home-page .process-container{
                grid-template-columns: 300px minmax(0, 1fr);
                gap: 50px;
            }
            .home-page .process-right{
                height: 68vh;
            }
        }

        @media (max-width: 900px){
            .home-page .process{
                min-height: auto;
                padding: 90px 0 80px;
                overflow: visible;
            }

            .home-page .process-container{
                position: relative;
                top: auto;
                width: min(92%, 760px);
                height: auto;
                min-height: 0;
                padding: 0;
                display: block;
            }

            .home-page .process-left{
                position: relative;
                margin-bottom: 45px;
            }

            .home-page .process-left h2{
                margin-bottom: 35px;
            }

            .home-page .timeline{
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 10px;
                padding: 0;
            }

            .home-page .timeline-line{
                left: 8%;
                right: 8%;
                top: 8px;
                bottom: auto;
                width: auto;
                height: 2px;
            }

            .home-page .timeline-item{
                margin: 0;
                text-align: center;
            }

            .home-page .timeline-item::before{
                left: 50%;
                top: 0;
                transform: translateX(-50%);
                width: 14px;
                height: 14px;
            }

            .home-page .timeline-item.active::before{
                transform: translateX(-50%) scale(1.45);
            }

            .home-page .timeline-item span{
                padding-top: 26px;
                font-size: 16px;
            }

            .home-page .timeline-item.active span{
                transform: none;
            }

            .home-page .process-right{
                height: auto;
                display: block;
            }

            .home-page .step,
            .home-page .step.is-active{
                position: relative;
                inset: auto;
                min-height: 68vh;
                padding: 55px 0;
                opacity: .42;
                visibility: visible;
                pointer-events: auto;
                transform: none;
                transition: opacity .45s ease;
            }

            .home-page .step.is-active{
                opacity: 1;
            }
        }

        @media (max-width: 560px){
            .home-page .process{
                padding: 75px 0 60px;
            }

            .home-page .process-left h2{
                margin: 16px 0 30px;
            }

            .home-page .step,
            .home-page .step.is-active{
                min-height: 60vh;
                padding: 45px 0;
            }

            .home-page .step h3{
                font-size: clamp(42px, 14vw, 66px);
            }

            .home-page .step p{
                font-size: 17px;
                line-height: 1.65;
            }
        }

        @media (max-width: 380px){
            .home-page .timeline{
                gap: 4px;
            }
            .home-page .timeline-item span{
                font-size: 14px;
            }
        }

        /*====================================

CLIENTS

====================================*/

        .home-page .clients{

            padding: 140px 0;

            background: #fafafa;

            overflow: hidden;

        }



        .home-page .clients-header{

            width: min(92%, 1400px);

            margin: 0 auto 60px;

        }



        .home-page .clients-header h2{

            font-size: clamp(36px, 6vw, 90px);

            font-weight: 800;

            line-height: 1.05;

        }



        .home-page .clients-header h2 span{

            color: #24A3D8;

        }



        .home-page .marquee{

            overflow: hidden;

            margin: 30px 0;

        }



        .home-page .marquee-track{

            display: flex;

            width: max-content;

            animation: scrollLeft 28s linear infinite;

        }



        .home-page .reverse .marquee-track{

            animation: scrollRight 28s linear infinite;

        }



        .home-page .marquee:hover .marquee-track{

            animation-play-state: paused;

        }



        .home-page .logo-item{

            font-size: clamp(38px, 7vw, 90px);

            font-weight: 800;

            color: #111;

            margin-right: 80px;

            transition: .4s;

            cursor: pointer;

        }



        .home-page .logo-item:hover{

            color: #24A3D8;

            transform: scale(1.08);

        }



        @keyframes scrollLeft {

            from {

                transform: translateX(0);

            }



            to {

                transform: translateX(-50%);

            }

        }



        @keyframes scrollRight {

            from {

                transform: translateX(-50%);

            }



            to {

                transform: translateX(0);

            }

        }



        /*==================================

TESTIMONIAL

==================================*/

        .home-page .testimonial{

            position: relative;

            padding: 140px 0;

            background: #111;

            color: #fff;

            overflow: hidden;

        }



        .home-page .quote-icon{

            position: absolute;

            top: 20px;

            left: 50%;

            transform: translateX(-50%);

            font-size: min(18rem, 32vw);

            color: rgba(255, 255, 255, .05);

            font-weight: 700;

            pointer-events: none;

        }



        .home-page .testimonial-slider{

            width: min(90%, 1100px);

            margin: auto;

            position: relative;

        }



        .home-page .testimonial-item{

            display: none;

            text-align: center;

        }



        .home-page .testimonial-item.active{

            display: block;

        }



        .home-page .testimonial-item h2{

            font-size: clamp(26px, 4vw, 68px);

            line-height: 1.3;

            font-weight: 600;

        }



        .home-page .author{

            margin-top: 55px;

            display: flex;

            justify-content: center;

            align-items: center;

            gap: 16px;

        }



        .home-page .author-avatar{

            width: 60px;

            height: 60px;

            border-radius: 50%;

            background: linear-gradient(135deg, #24A3D8, #F1CA03);

            flex-shrink: 0;

        }



        .home-page .author h4{

            font-size: 19px;

        }



        .home-page .author span{

            color: #999;

            font-size: 14px;

        }



        .home-page .testimonial-nav{

            display: flex;

            justify-content: center;

            gap: 16px;

            margin-top: 60px;

        }



        .home-page .dot{

            width: 12px;

            height: 12px;

            border-radius: 50%;

            background: #555;

            cursor: pointer;

            transition: .4s;

            border: none;

            padding: 0;

        }



        .home-page .dot.active{

            background: #F1CA03;

            transform: scale(1.4);

        }



        /*==================================

CTA

==================================*/

        .home-page .cta{

            position: relative;

            padding: 160px 0;

            background: #F8F8F8;

            overflow: hidden;

        }



        .home-page .cta-background{

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%, -50%);

            font-size: 18vw;

            font-weight: 900;

            color: transparent;

            -webkit-text-stroke: 2px rgba(0, 0, 0, .05);

            white-space: nowrap;

            pointer-events: none;

        }



        .home-page .cta-content{

            width: min(90%, 1000px);

            margin: auto;

            text-align: center;

            position: relative;

            z-index: 5;

        }



        .home-page .cta h2{

            margin-top: 30px;

            font-size: clamp(42px, 8vw, 140px);

            line-height: .9;

            font-weight: 900;

            color: #111;

        }



        .home-page .cta h2 span{

            display: block;

            color: #24A3D8;

        }



        .home-page .cta p{

            width: min(700px, 90%);

            margin: 35px auto;

            font-size: clamp(16px, 2vw, 21px);

            line-height: 1.8;

            color: #666;

        }



        .home-page .cta-circle{

            width: 150px;

            height: 150px;

            margin: 60px auto;

            border-radius: 50%;

            display: flex;

            justify-content: center;

            align-items: center;

            background: #111;

            color: #fff;

            text-decoration: none;

            font-weight: 600;

            text-align: center;

            transition: .45s;

        }



        .home-page .cta-circle:hover{

            background: #F1CA03;

            color: #111;

            transform: translateY(-10px) scale(1.05);

        }



        .home-page .cta-email{

            display: inline-block;

            margin-top: 20px;

            font-size: clamp(17px, 2.4vw, 22px);

            text-decoration: none;

            color: #24A3D8;

            transition: .3s;

            word-break: break-word;

        }



        .home-page .cta-email:hover{

            letter-spacing: 2px;

        }



        /*=====================================

FOOTER

=====================================*/

        .home-page .footer{

            background: #111;

            color: #fff;

            padding: 120px 0 50px;

            text-align: center;

            overflow: hidden;

        }



        .home-page .footer-tag{

            display: inline-block;

            color: #F1CA03;

            font-size: 13px;

            letter-spacing: 4px;

            font-weight: 600;

        }



        .home-page .footer h2{

            margin-top: 26px;

            font-size: clamp(36px, 8vw, 120px);

            line-height: .95;

            font-weight: 900;

        }



        .home-page .footer h2 span{

            display: block;

            color: #24A3D8;

        }



        .home-page .footer-logo{

            margin: 90px 0 60px;

            font-size: clamp(56px, 13vw, 220px);

            font-weight: 900;

            color: transparent;

            -webkit-text-stroke: 2px rgba(255, 255, 255, .08);

            letter-spacing: 6px;

        }



        .home-page .footer-links{

            display: flex;

            justify-content: center;

            gap: 40px;

            flex-wrap: wrap;

            margin-bottom: 55px;

            padding: 0 20px;

        }



        .home-page .footer-links a{

            text-decoration: none;

            color: #fff;

            font-size: 17px;

            transition: .3s;

        }



        .home-page .footer-links a:hover{

            color: #24A3D8;

        }



        .home-page .footer-contact{

            display: flex;

            justify-content: center;

            gap: 35px;

            flex-wrap: wrap;

            margin-bottom: 55px;

            padding: 0 20px;

        }



        .home-page .footer-contact a, .home-page .footer-contact span{

            color: #aaa;

            text-decoration: none;

            font-size: 16px;

        }



        .home-page .footer-contact a:hover{

            color: #F1CA03;

        }



        .home-page .footer-social{

            display: flex;

            justify-content: center;

            gap: 30px;

            flex-wrap: wrap;

            margin-bottom: 55px;

            padding: 0 20px;

        }



        .home-page .footer-social a{

            color: #fff;

            text-decoration: none;

            font-size: 15px;

            position: relative;

        }



        .home-page .footer-social a::after{

            content: "";

            position: absolute;

            left: 0;

            bottom: -6px;

            width: 0;

            height: 2px;

            background: #24A3D8;

            transition: .35s;

        }



        .home-page .footer-social a:hover::after{

            width: 100%;

        }



        .home-page .footer-bottom{

            border-top: 1px solid rgba(255, 255, 255, .08);

            padding-top: 30px;

            color: #777;

            font-size: 14px;

        }



        /*=========================================

RESPONSIVE — GLOBAL BREAKPOINTS

=========================================*/



        /* Large tablets / small laptops */

        @media(max-width:1200px) {

            .about-grid {

                grid-template-columns: 1fr 1fr;

                grid-template-areas: "left left" "image stats";

            }



            .about-left {

                grid-area: left;

            }



            .about-image {

                grid-area: image;

            }



            .about-right {

                grid-area: stats;

                flex-direction: row;

                flex-wrap: wrap;

            }



            .about-right .stat {

                flex: 1 1 150px;

            }



            .process-container {

                grid-template-columns: 320px 1fr;

                gap: 50px;

            }

        }



        /* Tablets */

        @media(max-width:900px) {

            .hero {

                padding: 140px 0 80px;

            }



            .hero-container {

                grid-template-columns: 1fr;

                gap: 60px;

            }



            .hero-visual {

                max-width: 420px;

                margin: 0 auto;

                width: 100%;

            }



            .hero-showcase {

                height: 500px;

                transform: rotate(-2deg);

            }



            .hero p {

                max-width: 100%;

            }



            .services {

                padding: 100px 0;

            }



            .services-header {

                margin-bottom: 60px;

            }



            .service-item {

                grid-template-columns: 50px 1fr auto;

                grid-template-areas: "num title arrow" "num text arrow";

                column-gap: 20px;

                row-gap: 6px;

            }



            .service-number {

                grid-area: num;

            }



            .service-content {

                grid-area: title / title / text / text;

            }



            .service-content p {

                max-width: 100%;

            }



            .service-image {

                display: none;

            }



            .service-arrow {

                grid-area: arrow;

                align-self: center;

                font-size: 28px;

            }



            .about {

                padding: 100px 0;

            }



            .about-grid {

                grid-template-columns: 1fr;

                grid-template-areas: "left" "image" "stats";

                gap: 40px;

            }



            .about-image {

                max-width: 420px;

                margin: 0 auto;

                width: 100%;

            }



            .about-right {

                flex-direction: row;

            }



            .experience-card {

                left: 16px;

                bottom: 16px;

                padding: 18px 20px;

            }



            .experience-card h3 {

                font-size: 34px;

            }



            .process {

                padding: 100px 0;

            }



            .process-container {

                grid-template-columns: 1fr;

                gap: 40px;

            }



            .process-left {

                position: static;

            }



            .timeline {

                display: flex;

                gap: 22px;

                padding-left: 0;

                overflow-x: auto;

                padding-bottom: 10px;

            }



            .timeline-line {

                display: none;

            }



            .timeline-item {

                margin-bottom: 0;

            }



            .timeline-item::before {

                position: static;

                display: inline-flex;

                margin-right: 8px;

                vertical-align: middle;

            }



            .process-right {

                gap: 70px;

            }



            .step {

                min-height: auto;

            }



            .clients {

                padding: 100px 0;

            }



            .testimonial {

                padding: 100px 0;

            }



            .cta {

                padding: 120px 0;

            }



            .footer {

                padding: 100px 0 40px;

            }



            .footer-logo {

                margin: 70px 0 50px;

            }

        }



        /* Phones */

        @media(max-width:560px) {

            .header {

                top: 12px;

            }



            .header-container {

                height: 70px;

                padding: 0 18px;

                border-radius: 18px;

            }



            .logo {

                font-size: 18px;

            }



            .menu-btn {

                width: 46px;

                height: 46px;

            }



            .hero {

                padding: 120px 0 60px;

            }



            .hero-action {

                flex-direction: column;

                align-items: flex-start;

                gap: 18px;

            }



            .start-btn {

                width: 100%;

                text-align: center;

            }



            .outline-title {

                display: none;

            }



            .badge {

                font-size: 11px;

                padding: 9px 16px;

            }



            .badge.top {

                left: -8px;

                top: 16px;

            }



            .badge.bottom {

                right: -8px;

                bottom: 16px;

            }



            .services-list .service-item {

                padding: 28px 0;

            }



            .service-content h3 {

                font-size: 24px;

            }



            .about-right {

                flex-direction: column;

            }



            .experience-card {

                position: static;

                margin-top: 20px;

                display: inline-block;

            }



            .cta-circle {

                width: 120px;

                height: 120px;

                font-size: 14px;

            }



            .footer-links,

            .footer-contact,

            .footer-social {

                gap: 22px;

            }

        }



        /*==================================

FAQ

==================================*/

        .home-page .faq{

            padding: 140px 0;

            background: #fff;

        }



        .home-page .faq-wrap{

            width: min(92%, 1180px);

            margin: auto;

            display: grid;

            grid-template-columns: .75fr 1.25fr;

            gap: 80px;

            align-items: start;

        }



        .home-page .faq-intro{

            position: sticky;

            top: 140px;

        }



        .home-page .faq-intro h2{

            font-size: clamp(42px, 5vw, 76px);

            line-height: .95;

            margin-top: 20px;

        }



        .home-page .faq-intro h2 span{

            color: #24A3D8;

        }



        .home-page .faq-list{

            border-top: 1px solid #ddd;

        }



        .home-page .faq-item{

            border-bottom: 1px solid #ddd;

            padding: 0;

        }



        .home-page .faq-item summary{

            list-style: none;

            cursor: pointer;

            padding: 27px 42px 27px 0;

            font-size: clamp(20px, 2.2vw, 27px);

            font-weight: 650;

            position: relative;

        }



        .home-page .faq-item summary::-webkit-details-marker{

            display: none;

        }



        .home-page .faq-item summary::after{

            content: "+";

            position: absolute;

            right: 2px;

            top: 19px;

            font-size: 35px;

            font-weight: 300;

            color: #24A3D8;

            transition: .3s;

        }



        .home-page .faq-item[open] summary::after{

            transform: rotate(45deg);

            color: #F1CA03;

        }



        .home-page .faq-item p{

            padding: 0 45px 28px 0;

            color: #666;

            font-size: 17px;

            line-height: 1.8;

        }



        .home-page .faq-item[open]{

            background: linear-gradient(90deg, rgba(36, 163, 216, .08), transparent);

            padding-left: 22px;

        }



        @media(max-width:900px) {

            .faq {

                padding: 100px 0;

            }



            .faq-wrap {

                grid-template-columns: 1fr;

                gap: 38px;

            }



            .faq-intro {

                position: static;

            }



            .faq-item summary {

                font-size: 20px;

            }



            .faq-item p {

                padding-right: 15px;

            }

        }


/* Livasys alignment + contact consistency pass */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
button, input, textarea, select { max-width: 100%; }
.contact-layout { align-items: start; }
.contact-info { min-width: 0; }
.contact-heading { margin: 22px 0 30px; font-size: clamp(42px, 6vw, 80px); line-height: .95; letter-spacing: -.06em; }
.contact-offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.contact-office { padding: 24px; border: 1px solid rgba(16,17,19,.12); border-radius: 18px; background: rgba(255,255,255,.55); min-width: 0; }
.contact-office h2 { margin: 0 0 12px; font-size: 20px; line-height: 1.15; }
.contact-office h2 span { display: block; font-size: 12px; font-weight: 600; opacity: .65; margin-top: 5px; }
.contact-office p { margin: 0 0 12px; color: #666; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.contact-office a { display: block; font-size: 17px; font-weight: 700; margin: 6px 0 0; overflow-wrap: anywhere; }
.contact-email-office a { font-size: 16px; }
.footer-contact-grid { position: relative; z-index: 1; max-width: 1200px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; text-align: left; }
.footer-contact-grid > div { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.footer-contact-grid strong { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #24a3d8; }
.footer-contact-grid span, .footer-contact-grid a { color: inherit; overflow-wrap: anywhere; line-height: 1.5; }
.footer-contact-grid span { color: #999; font-size: 13px; }
.footer-contact-grid a { font-size: 14px; font-weight: 700; }
@media (max-width: 1000px) { .contact-offices { grid-template-columns: 1fr 1fr; } .footer-contact-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { .contact-offices { grid-template-columns: 1fr; } .footer-contact-grid { grid-template-columns: 1fr; } .contact-office { padding: 20px; } }

/* =========================================================
   SERVICE DETAIL PAGES
   ========================================================= */
.service-detail-page{max-width:1100px;margin:0 auto;padding-bottom:20px}
.service-detail-section{padding:56px 0;border-top:1px solid rgba(0,0,0,.12)}
.service-detail-section h2{max-width:780px;margin:0 0 18px;font-size:clamp(28px,4vw,48px);line-height:1.08}
.service-detail-section p{max-width:820px;font-size:18px;line-height:1.8;margin:0}
.service-faq details{border-top:1px solid rgba(0,0,0,.12);padding:20px 0}
.service-faq details:last-child{border-bottom:1px solid rgba(0,0,0,.12)}
.service-faq summary{cursor:pointer;font-size:20px;font-weight:600}
.service-faq details p{font-size:16px;margin-top:14px}
.service-related{padding:50px 0 10px}
.service-related p{font-size:18px;line-height:1.7}
.service-related a{font-weight:600;text-decoration:underline}
.service2 h2 a{color:inherit;text-decoration:none}
@media(max-width:700px){.service-detail-section{padding:38px 0}.service-detail-section p,.service-related p{font-size:16px;line-height:1.7}.service-faq summary{font-size:18px}}

.header-container.header-scrolled{height:66px}
.menu-open{overflow:hidden}
.contact-btn{transform:translate(var(--mag-x,0),var(--mag-y,0));}
@media(max-width:560px){.header-container.header-scrolled{height:58px}.header-container{height:70px}}

/* =========================================================
   PRIMARY NAVIGATION DROPDOWNS — RESPONSIVE / ALIGNED
   ========================================================= */
/* Keep the top-level navigation horizontal while explicitly resetting nested lists.
   The earlier generic `.home-page .navbar ul` rule also matched submenu <ul> elements,
   which caused submenu items to render in a cramped horizontal row. */
.home-page .navbar > ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.4vw, 42px);
    list-style: none;
    margin: 0;
    padding: 0;
}
.home-page .navbar > ul > li {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}
.home-page .navbar > ul > li > a {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.home-page .navbar > ul > li.has-dropdown > a::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 0 3px 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .22s ease;
    order: 2;
    flex: 0 0 auto;
}
.home-page .navbar > ul > li.has-dropdown:hover > a::before,
.home-page .navbar > ul > li.has-dropdown:focus-within > a::before,
.home-page .navbar > ul > li.has-dropdown.dropdown-open > a::before {
    transform: rotate(225deg) translate(-1px,-1px);
}

/* Desktop dropdowns: centered directly below their parent, with a clean 2-column grid. */
.home-page .navbar > ul > li > ul.dropdown-menu {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translate(-50%, 8px);
    width: min(420px, calc(100vw - 32px));
    min-width: 320px;
    padding: 10px;
    margin: 0;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    align-items: stretch;
    list-style: none;
    background: rgba(255,255,255,.985);
    border: 1px solid rgba(16,17,19,.10);
    border-radius: 16px;
    box-shadow: 0 22px 45px rgba(0,0,0,.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 2000;
}
/* Invisible hover bridge prevents the menu from closing while the cursor moves from the
   parent item to the dropdown across the small visual gap. */
.home-page .navbar > ul > li.has-dropdown::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -13px;
    width: 110px;
    height: 14px;
    transform: translateX(-50%);
}
.home-page .navbar > ul > li.has-dropdown:hover > ul.dropdown-menu,
.home-page .navbar > ul > li.has-dropdown:focus-within > ul.dropdown-menu,
.home-page .navbar > ul > li.has-dropdown.dropdown-open > ul.dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
.home-page .navbar > ul > li > ul.dropdown-menu > li {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}
.home-page .navbar > ul > li > ul.dropdown-menu > li > a {
    display: flex;
    align-items: center;
    min-height: 52px;
    width: 100%;
    padding: 10px 13px;
    border-radius: 10px;
    white-space: normal;
    font-size: 13px;
    line-height: 1.35;
    color: #111;
}
.home-page .navbar > ul > li > ul.dropdown-menu > li > a::after {
    display: none;
}
.home-page .navbar > ul > li > ul.dropdown-menu > li > a:hover,
.home-page .navbar > ul > li > ul.dropdown-menu > li > a:focus-visible {
    background: rgba(36,163,216,.09);
    color: #111;
}

/* Mobile: the desktop dropdown is disabled completely; submenus become accessible
   accordions inside the full-screen mobile navigation. */
.mobile-menu .has-dropdown > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.mobile-menu .has-dropdown > a::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .22s ease;
}
.mobile-menu .has-dropdown.dropdown-open > a::after {
    transform: rotate(225deg) translate(-1px,-1px);
}
.mobile-menu .dropdown-menu {
    display: none;
    width: min(92vw, 430px);
    list-style: none;
    padding: 10px 12px 4px;
    margin: 4px auto 0;
    border-left: 1px solid rgba(255,255,255,.18);
    border-right: 1px solid rgba(255,255,255,.18);
}
.mobile-menu .has-dropdown.dropdown-open > .dropdown-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
}
.mobile-menu .dropdown-menu li {
    margin: 0 !important;
}
.mobile-menu .dropdown-menu a {
    display: block;
    padding: 8px 10px;
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1.3;
    text-align: left;
    opacity: .9;
}
.mobile-menu .dropdown-menu a::after {
    display: none;
}

@media (min-width: 901px) and (max-width: 1180px) {
    .home-page .header-container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .home-page .logo img { max-width: 145px; }
    .home-page .navbar > ul { gap: 16px; }
    .home-page .navbar a { font-size: 16px; }
    .home-page .contact-btn { width: 145px; height: 50px; }
}

@media (max-width: 900px) {
    .navbar { display: none; }
}

@media (max-width: 560px) {
    .mobile-menu .has-dropdown.dropdown-open > .dropdown-menu {
        grid-template-columns: 1fr;
        width: 100%;
    }
}


/* =========================================================
   SITE-WIDE HEADER — same visual header as homepage
   ========================================================= */
.site-header {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: .5s ease;
}
.site-header .header-container {
    position: relative;
    z-index: 2;
    width: min(94%, 1450px);
    height: 82px;
    padding: 0 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 22px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 10px 40px rgba(0,0,0,.08);
    transition: height .4s ease;
}
.site-header .logo { display:block; flex:0 0 auto; }
.site-header .logo img {
    height: 68px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    display: block;
}
.site-header .navbar > ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px,2.4vw,42px);
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-header .navbar > ul > li { position:relative; display:flex; align-items:center; height:100%; }
.site-header .navbar > ul > li > a {
    position:relative;
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    text-decoration:none;
    color:#111;
    font-size:16px;
    font-weight:500;
    transition:.35s;
}
.site-header .navbar > ul > li > a::after {
    content:""; position:absolute; left:0; bottom:-8px; width:0; height:2px;
    background:#24A3D8; transition:.35s;
}
.site-header .navbar > ul > li > a:hover,
.site-header .navbar > ul > li > a.active { color:#24A3D8; }
.site-header .navbar > ul > li > a:hover::after,
.site-header .navbar > ul > li > a.active::after { width:100%; }
.site-header .navbar > ul > li.has-dropdown > a::before {
    content:""; display:inline-block; width:7px; height:7px; margin:0 0 3px 8px;
    border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:rotate(45deg); transition:transform .22s ease; order:2; flex:0 0 auto;
}
.site-header .navbar > ul > li.has-dropdown:hover > a::before,
.site-header .navbar > ul > li.has-dropdown:focus-within > a::before,
.site-header .navbar > ul > li.has-dropdown.dropdown-open > a::before { transform:rotate(225deg) translate(-1px,-1px); }
.site-header .navbar > ul > li.has-dropdown::after {
    content:""; position:absolute; left:50%; bottom:-13px; width:110px; height:14px; transform:translateX(-50%);
}
.site-header .navbar > ul > li > ul.dropdown-menu {
    position:absolute; left:50%; top:calc(100% + 12px); transform:translate(-50%,8px);
    width:min(420px,calc(100vw - 32px)); min-width:320px; padding:10px; margin:0;
    display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px;
    align-items:stretch; list-style:none; background:rgba(255,255,255,.985);
    border:1px solid rgba(16,17,19,.10); border-radius:16px; box-shadow:0 22px 45px rgba(0,0,0,.14);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease; z-index:2000;
}
.site-header .navbar > ul > li.has-dropdown:hover > ul.dropdown-menu,
.site-header .navbar > ul > li.has-dropdown:focus-within > ul.dropdown-menu,
.site-header .navbar > ul > li.has-dropdown.dropdown-open > ul.dropdown-menu {
    opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}
.site-header .navbar > ul > li > ul.dropdown-menu > li { display:block; width:auto; margin:0; padding:0; list-style:none; }
.site-header .navbar > ul > li > ul.dropdown-menu > li > a {
    display:flex; align-items:center; min-height:52px; width:100%; padding:10px 13px;
    border-radius:10px; white-space:normal; font-size:16px; line-height:1.35; color:#111;
}
.site-header .navbar > ul > li > ul.dropdown-menu > li > a::after { display:none; }
.site-header .navbar > ul > li > ul.dropdown-menu > li > a:hover,
.site-header .navbar > ul > li > ul.dropdown-menu > li > a:focus-visible { background:rgba(36,163,216,.09); color:#111; }
.site-header .header-right { display:flex; align-items:center; gap:18px; }
.site-header .contact-btn { width:170px; height:54px; border-radius:100px; background:#111; color:#fff; display:flex; justify-content:center; align-items:center; font-weight:600; }
.site-header .contact-btn span { position:relative; z-index:2; }
@media (min-width:901px) and (max-width:1180px){
    .site-header .header-container{padding-left:20px;padding-right:20px}
    .site-header .logo img{max-width:145px}
    .site-header .navbar > ul{gap:16px}
    .site-header .navbar > ul > li > a{font-size:13px}
    .site-header .contact-btn{width:145px;height:50px}
}
@media (max-width:900px){
    .site-header .header-container{width:min(94%,1450px)}
}
@media (max-width:560px){
    .site-header{top:12px}
    .site-header .header-container{height:70px;padding:0 18px;border-radius:18px}
    .site-header .logo img{height:34px;max-width:120px}
    .site-header .contact-btn{width:46px;height:46px;padding:0;font-size:0}
    .site-header .contact-btn span{display:none}
}

/* =========================================================
   CONTACT PAGE ALIGNMENT
   ========================================================= */
.contact-layout{grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);gap:56px;align-items:stretch}
.contact-layout>.contact-info,.contact-layout>.form{height:100%}
.contact-info{padding:0;display:flex;flex-direction:column}
.contact-heading{margin:0 0 26px}
.contact-offices{margin-top:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.contact-office{height:100%;display:flex;flex-direction:column;justify-content:flex-start}
.contact-office a:last-child{margin-bottom:0}
.contact-layout>.form{align-self:stretch;display:flex;flex-direction:column;justify-content:center;margin:0;padding:34px}
.contact-layout>.form .form-actions{margin-top:4px}
.contact-layout>.form .form-status{margin:0}
@media(max-width:1050px){.contact-layout{grid-template-columns:1fr;gap:38px}.contact-layout>.form{min-height:0}.contact-offices{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.contact-layout{gap:28px}.contact-offices{grid-template-columns:1fr}.contact-layout>.form{padding:24px}}


/* Contact form textarea enhancement */
.contact-page .form textarea { width:100%; min-height:150px; resize:vertical; font:inherit; border:1px solid rgba(255,255,255,.18); color:#fff; background:#1b1b1b; border-radius:12px; padding:17px; line-height:1.6; }
.contact-page .form textarea::placeholder { color:rgba(255,255,255,.65); }
.contact-page .form textarea:focus { outline:2px solid #24A3D8; outline-offset:2px; }
@media(max-width:600px){ .contact-page .form textarea{min-height:130px;} }


/* Featured images for service detail pages */
.service-featured-image{margin:0 0 54px;border-radius:28px;overflow:hidden;background:#f2f4f5;box-shadow:0 22px 55px rgba(0,0,0,.10);aspect-ratio:16/7}
.service-featured-image img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.service-featured-image{margin-bottom:36px;border-radius:20px;aspect-ratio:16/9}.service-featured-image img{min-height:220px}}


/* Final shared navigation dropdown fix */
.site-header .navbar > ul > li.has-dropdown { position:relative; }
.site-header .navbar > ul > li.has-dropdown::after {
    content:""; position:absolute; left:-8px; right:-8px; bottom:-8px; height:10px; width:auto;
    transform:none; z-index:1999;
}
.site-header .navbar > ul > li > ul.dropdown-menu {
    top:calc(100% + 1px); transform:translate(-50%,6px);
    min-width:300px; max-width:calc(100vw - 28px); z-index:2000;
}
.site-header .navbar > ul > li.has-dropdown:hover > ul.dropdown-menu,
.site-header .navbar > ul > li.has-dropdown:focus-within > ul.dropdown-menu,
.site-header .navbar > ul > li.has-dropdown.dropdown-open > ul.dropdown-menu {
    transform:translate(-50%,0);
}
@media (min-width:901px) and (max-width:1100px) {
    .site-header .navbar > ul { gap:12px; }
    .site-header .navbar > ul > li > a { font-size:12px; }
    .site-header .navbar > ul > li > ul.dropdown-menu { min-width:290px; width:min(390px,calc(100vw - 24px)); }
}
@media (max-width:900px) {
    .site-header .navbar > ul > li.has-dropdown::after { display:none; }
}
@media (max-width:600px) {
    .site-header .navbar > ul > li > ul.dropdown-menu { min-width:0; width:100%; grid-template-columns:1fr; }
}

/* Simple 5-character alphanumeric CAPTCHA */
.captcha-challenge {
    display:inline-flex; align-items:center; justify-content:center; min-width:130px; min-height:46px;
    padding:8px 16px; border:1px dashed rgba(17,18,15,.35); border-radius:10px;
    background:#f4f3ed; color:#111; font:800 22px/1 'DM Mono',monospace;
    letter-spacing:.22em; user-select:none;
}
.captcha-input { text-transform:uppercase; letter-spacing:.12em; }


/* Contact CTA buttons: compact, title-case labels */
.form-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
.form-actions button,.form button#email-submit,.form button.whatsapp-submit{font-size:13px;line-height:1.2;font-weight:700;letter-spacing:0;text-transform:none;padding:13px 18px;min-height:46px;white-space:nowrap}
.form button#email-submit{background:#24A3D8;color:#fff}
.form button.whatsapp-submit{background:#F1CA03;color:#111}
.form button#email-submit:hover{background:#F1CA03;color:#111}
.form button.whatsapp-submit:hover{background:#111;color:#fff}
@media(max-width:600px){.form-actions{grid-template-columns:1fr}.form-actions button,.form button#email-submit,.form button.whatsapp-submit{font-size:12px;padding:12px 16px}}

/* Lead-generation landing pages */
.landing-page{background:#f8f8f5;color:#101113}
.landing-hero{padding:145px 5% 80px;background:#111;color:#fff;position:relative;overflow:hidden}
.landing-hero:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 82% 15%,rgba(36,163,216,.28),transparent 28rem),radial-gradient(circle at 20% 100%,rgba(241,202,3,.16),transparent 24rem),repeating-linear-gradient(90deg,transparent 0,transparent 69px,rgba(255,255,255,.06) 70px)}
.landing-hero-inner{max-width:1280px;margin:auto;position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.68fr);gap:55px;align-items:center}
.landing-kicker{display:flex;align-items:center;gap:12px;color:#F1CA03;font:700 12px/1.2 'DM Mono',monospace;letter-spacing:.18em;text-transform:uppercase}
.landing-kicker:before{content:'';width:42px;height:1px;background:#F1CA03}
.landing-hero h1{font-size:clamp(48px,7.2vw,104px);line-height:.91;letter-spacing:-.07em;margin:22px 0 22px;max-width:900px}
.landing-hero h1 em{font-style:normal;color:#F1CA03}
.landing-hero p{max-width:700px;color:#d7d8d3;font-size:18px;line-height:1.7;margin:0}
.landing-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.landing-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:14px 22px;font-size:14px;font-weight:750;transition:.25s;border:1px solid transparent}
.landing-btn-primary{background:#F1CA03;color:#111}.landing-btn-primary:hover{transform:translateY(-3px);background:#fff}
.landing-btn-secondary{border-color:rgba(255,255,255,.3);color:#fff}.landing-btn-secondary:hover{border-color:#F1CA03;color:#F1CA03}
.landing-hero-card{background:rgba(255,255,255,.96);color:#111;border-radius:24px;padding:26px;box-shadow:0 25px 70px rgba(0,0,0,.24)}
.landing-hero-card h2{font-size:30px;line-height:1.05;margin:0 0 8px;letter-spacing:-.04em}.landing-hero-card p{font-size:13px;color:#666;margin:0 0 18px;line-height:1.55}
.landing-form{display:grid;gap:10px}.landing-form input,.landing-form select,.landing-form textarea{width:100%;border:1px solid #ddd;background:#fff;color:#111;border-radius:11px;padding:13px 14px;font:inherit;font-size:14px;outline:none}.landing-form textarea{min-height:100px;resize:vertical}.landing-form input:focus,.landing-form select:focus,.landing-form textarea:focus{border-color:#24A3D8;box-shadow:0 0 0 3px rgba(36,163,216,.12)}
.landing-form .captcha-field{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}.landing-form .captcha-challenge{background:#111;color:#F1CA03;border-radius:9px;padding:11px 14px;font:800 16px/1 'DM Mono',monospace;letter-spacing:.16em}.landing-form .captcha-refresh{border:1px solid #ddd;background:#fff;border-radius:9px;height:42px;padding:0 12px;cursor:pointer}.landing-form .captcha-help{grid-column:1/-1;font-size:11px;color:#777}.landing-form .form-actions{margin-top:3px}
.landing-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#ddd;border:1px solid #ddd;margin-top:0}.landing-proof-item{background:#fff;padding:28px 22px}.landing-proof-item strong{display:block;font-size:clamp(28px,3.2vw,46px);letter-spacing:-.06em}.landing-proof-item span{font:10px 'DM Mono',monospace;letter-spacing:.12em;color:#777;text-transform:uppercase}
.landing-section{max-width:1280px;margin:auto;padding:95px 5%}.landing-section-head{max-width:850px}.landing-section-head .label{color:#24A3D8;margin-bottom:18px}.landing-section-head h2{font-size:clamp(38px,5vw,72px);line-height:.98;letter-spacing:-.06em;margin:0}.landing-section-head h2 em{font-style:normal;color:#F1CA03}.landing-section-head p{font-size:17px;line-height:1.8;color:#666;margin-top:22px}.landing-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}.landing-card{background:#fff;border:1px solid #e3e3df;border-radius:22px;padding:28px;min-height:230px;transition:.3s}.landing-card:hover{transform:translateY(-7px);box-shadow:0 18px 45px rgba(0,0,0,.08);border-color:#F1CA03}.landing-card .num{font:11px 'DM Mono',monospace;color:#24A3D8;letter-spacing:.12em}.landing-card h3{font-size:25px;line-height:1.08;letter-spacing:-.04em;margin:30px 0 10px}.landing-card p{color:#666;line-height:1.65;font-size:14px}.landing-split{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.landing-image{border-radius:28px;overflow:hidden;min-height:470px;background:#111}.landing-image img{width:100%;height:100%;min-height:470px;display:block;object-fit:cover}.landing-list{display:grid;gap:14px;margin-top:28px}.landing-list-item{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid #ddd}.landing-list-item b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#F1CA03;color:#111;font-size:12px}.landing-list-item h3{margin:0 0 4px;font-size:18px}.landing-list-item p{margin:0;color:#666;font-size:14px;line-height:1.6}.landing-dark{background:#111;color:#fff;max-width:none}.landing-dark-inner{max-width:1280px;margin:auto}.landing-dark .landing-section-head p{color:#b9bbb6}.landing-dark .landing-card{background:#191a17;border-color:rgba(255,255,255,.1);color:#fff}.landing-dark .landing-card p{color:#b8b9b3}.landing-dark .landing-card:hover{border-color:#F1CA03}.landing-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}.landing-faq-list{border-top:1px solid #ddd}.landing-faq-list details{border-bottom:1px solid #ddd;padding:0}.landing-faq-list summary{cursor:pointer;list-style:none;padding:20px 45px 20px 0;font-size:18px;font-weight:750;position:relative}.landing-faq-list summary::-webkit-details-marker{display:none}.landing-faq-list summary:after{content:'+';position:absolute;right:0;top:14px;font-size:26px;color:#24A3D8}.landing-faq-list details[open] summary:after{content:'−';color:#F1CA03}.landing-faq-list p{color:#666;line-height:1.7;padding:0 0 20px;margin:0;font-size:14px}.landing-bottom-cta{background:#F1CA03;padding:75px 5%;text-align:center}.landing-bottom-cta h2{font-size:clamp(40px,6vw,80px);line-height:.95;letter-spacing:-.07em;max-width:1000px;margin:0 auto 28px}.landing-bottom-cta p{max-width:700px;margin:0 auto 24px;color:#292919}.landing-bottom-cta .landing-btn{background:#111;color:#fff}.landing-bottom-cta .landing-btn:hover{background:#fff;color:#111}
@media(max-width:900px){.landing-hero-inner,.landing-split,.landing-faq{grid-template-columns:1fr}.landing-hero{padding:125px 6% 65px}.landing-hero-card{max-width:650px}.landing-cards{grid-template-columns:1fr 1fr}.landing-proof{grid-template-columns:1fr 1fr}.landing-image,.landing-image img{min-height:360px}}
@media(max-width:600px){.landing-hero h1{font-size:clamp(44px,14vw,72px)}.landing-cards,.landing-proof{grid-template-columns:1fr}.landing-section{padding:70px 6%}.landing-hero-actions{flex-direction:column;align-items:stretch}.landing-btn{width:100%}.landing-form .captcha-field{grid-template-columns:1fr 1fr}.landing-form .captcha-challenge{grid-column:1}.landing-form .captcha-refresh{grid-column:2}.landing-form .captcha-input{grid-column:1/-1}}



.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.landing-label-yellow{color:#F1CA03!important}.landing-label-yellow:before{background:#F1CA03!important}


/* =========================================================
   Livasys — final all-device responsive system
   Keeps the existing design/content and improves mobile/tablet
   behavior without changing the desktop visual language.
   ========================================================= */
html, body { max-width:100%; overflow-x:hidden; }
img, video, iframe { max-width:100%; }
button, input, select, textarea { max-width:100%; }

/* Shared floating header */
.site-header { top:20px; left:0; width:100%; }
.site-header .header-container {
  width:min(94%,1270px); margin:0 auto; height:82px; padding:0 28px;
  border-radius:22px; gap:18px;
}
.site-header .logo img { width:auto; max-width:155px; height:auto; }
.site-header .navbar { min-width:0; }
.site-header .navbar > ul { gap:clamp(14px,2vw,32px); }
.site-header .navbar > ul > li > a { font-size:16px; }
.site-header .header-right { flex:0 0 auto; }
.site-header .menu-btn {
  position:relative;
  z-index:10001;
  width:48px; height:48px; border:0; border-radius:14px; background:#111;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; cursor:pointer; padding:0; flex:0 0 auto;
}
.site-header .menu-btn span { display:block; width:21px; height:2px; background:#fff; border-radius:2px; transition:.25s; transform-origin:center; }
.site-header .menu-btn.active span:first-child { transform:translateY(4px) rotate(45deg); }
.site-header .menu-btn.active span:last-child { transform:translateY(-4px) rotate(-45deg); }
.site-header .menu-btn.active { background:#F1CA03; }
.site-header .menu-btn.active span { background:#111; }
body.menu-open { overflow:hidden; }

/* Mobile navigation is a true full-screen panel, never trapped by the header */
.site-header .mobile-menu {
  position:fixed; inset:0; width:100vw; height:100dvh; min-height:100vh;
  z-index:9998; background:#111; color:#fff; overflow-y:auto; overflow-x:hidden;
  padding:112px 22px 40px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
  display:block;
}
.site-header .mobile-menu.active { opacity:1; visibility:visible; pointer-events:auto; }
.site-header .mobile-menu > ul { width:min(100%,520px); margin:0 auto; padding:0; list-style:none; text-align:center; }
.site-header .mobile-menu > ul > li { margin:0; border-bottom:1px solid rgba(255,255,255,.11); }
.site-header .mobile-menu > ul > li > a {
  min-height:58px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px; font-weight:700; line-height:1.2;
  padding:14px 8px;
}
.site-header .mobile-menu > ul > li > a.active { color:#F1CA03; }
.site-header .mobile-menu .has-dropdown > a { gap:12px; }
.site-header .mobile-menu .dropdown-menu {
  width:100%; margin:0; padding:0 0 10px; border:0; background:transparent;
  box-shadow:none; display:none !important; grid-template-columns:1fr !important;
}
.site-header .mobile-menu .has-dropdown.dropdown-open > .dropdown-menu { display:grid !important; }
.site-header .mobile-menu .dropdown-menu li { margin:0 !important; }
.site-header .mobile-menu .dropdown-menu a {
  display:block; color:#cfd0cb; padding:10px 8px; font-size:16px !important;
  line-height:1.35; text-align:center; opacity:1;
}
.site-header .mobile-menu .dropdown-menu a:hover,
.site-header .mobile-menu .dropdown-menu a:focus-visible { color:#F1CA03; background:transparent; }

/* Prevent oversized decorative text from creating horizontal overflow */
.home-page .outline-title, .page-hero:after, .content:before, .cta-background { max-width:100vw; overflow:hidden; }

/* Homepage */
@media (max-width:1100px) {
  .site-header .navbar > ul { gap:14px; }
  .site-header .navbar > ul > li > a { font-size:16px; }
  .site-header .contact-btn { width:145px; height:50px; }
  .home-page .hero-container { gap:45px; }
  .home-page .about-grid { grid-template-columns:1fr 1fr; gap:35px; }
  .home-page .about-right { grid-column:1/-1; }
  .home-page .process-container { grid-template-columns:300px 1fr; gap:45px; }
}

@media (max-width:900px) {
  .site-header { top:12px; }
  .site-header .header-container { width:min(94%,1270px); height:70px; padding:0 18px; border-radius:18px; }
  .site-header .navbar { display:none !important; }
  .site-header .contact-btn { display:none !important; }
  .site-header .menu-btn { display:flex !important; }
  .site-header .logo img { max-width:132px; max-height:42px; }

  .home-page .hero { min-height:auto; padding:130px 0 70px; }
  .home-page .hero-container { width:min(92%,720px); grid-template-columns:1fr; gap:42px; }
  .home-page .hero-content { max-width:680px; }
  .home-page .hero h1 { font-size:clamp(52px,12vw,92px); margin-top:24px; line-height:.92; }
  .home-page .hero p { max-width:620px; font-size:17px; line-height:1.65; }
  .home-page .hero-visual { width:min(100%,560px); margin:0 auto; }
  .home-page .hero-showcase { width:100%; }
  .home-page .hero-showcase img { width:100%; height:auto; max-height:520px; object-fit:cover; }
  .home-page .outline-title { font-size:27vw; bottom:0; }

  .home-page .services, .home-page .about, .home-page .clients,
  .home-page .faq, .home-page .testimonial { padding:90px 0; }
  .home-page .services-header, .home-page .services-list,
  .home-page .clients-header, .home-page .faq-wrap,
  .home-page .testimonial-slider { width:min(92%,720px); }
  .home-page .section-title { font-size:clamp(40px,9vw,70px); }
  .home-page .service-item { grid-template-columns:52px 1fr 34px; gap:14px; padding:28px 0; }
  .home-page .service-item p { grid-column:2; grid-row:2; margin-top:5px; }
  .home-page .service-item .service-image { grid-column:2; grid-row:3; width:100%; max-width:430px; margin-top:14px; }
  .home-page .service-item .arrow { grid-column:3; grid-row:1; }

  .home-page .about-grid { width:min(92%,720px); grid-template-columns:1fr; }
  .home-page .about-right { grid-column:auto; }
  .home-page .process-container { width:min(92%,720px); grid-template-columns:1fr; gap:35px; }
  .home-page .process-left { position:sticky; top:86px; z-index:3; background:#111; padding:8px 0 18px; }
  .home-page .process-left h2 { margin-bottom:28px; }
  .home-page .timeline { padding-left:0; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .home-page .timeline-line { left:0; right:0; top:50%; bottom:auto; width:auto; height:2px; }
  .home-page .timeline-item { margin:0; padding:10px 0; }
  .home-page .timeline-item::before { left:50%; top:50%; transform:translate(-50%,-50%); }
  .home-page .timeline-item.active::before { transform:translate(-50%,-50%) scale(1.35); }
  .home-page .timeline-item span { position:relative; z-index:1; display:block; padding-top:22px; font-size:16px; }
  .home-page .process-right { gap:0; }
  .home-page .step { min-height:72vh; padding:7vh 0; }
  .home-page .faq-wrap { grid-template-columns:1fr; gap:45px; }
  .home-page .faq-intro { position:static; }
  .home-page .testimonial-item h2 { font-size:clamp(25px,6vw,48px); }
  .home-page .cta { padding:100px 0; }
  .home-page .cta-content { width:min(92%,720px); }
  .home-page .cta h2 { font-size:clamp(48px,12vw,88px); }

  .page { padding:100px 6%; }
  .hero2 { min-height:auto; padding:135px 6% 70px; }
  .hero2 h1 { font-size:clamp(54px,13vw,100px); }
  .hero-stamp { opacity:.45; width:220px; right:-35px; top:8%; }
  .split, .case-grid2, .role-grid, .course-grid2, .feature-grid { grid-template-columns:1fr; }
  .image-block { min-height:380px; }
  .numbers, .logo-grid2 { grid-template-columns:repeat(2,1fr); }
  .service2 { grid-template-columns:48px 1fr 30px; gap:12px; }
  .service2 p { grid-column:2; grid-row:2; }
  .service2 .arrow { grid-column:3; grid-row:1; }
  .steps2 { grid-template-columns:1fr; }

  /* Pages stylesheet layouts */
  .page-hero { min-height:auto; padding:135px 7% 75px; }
  .page-hero h1 { font-size:clamp(52px,12vw,100px); max-width:850px; }
  .content { padding:85px 6%; }
  .grid, .work-grid, .contact-layout { grid-template-columns:1fr; }
  .process-row { grid-template-columns:65px 1fr; gap:18px; }
  .process-row p { grid-column:2; }
  .work, .work:nth-child(1), .work:nth-child(4) { height:390px; }
  .contact-layout { gap:40px; }
  .contact-info a { font-size:clamp(28px,8vw,48px); overflow-wrap:anywhere; }
  .digital-page .hero-subrow, .digital-page .manifesto-grid,
  .digital-page .services-layout, .digital-page .experiment-grid,
  .digital-page .local-grid, .digital-page .why-grid,
  .digital-page .contact-grid, .digital-page .footer-grid { grid-template-columns:1fr; }
  .digital-page .form-row { grid-template-columns:1fr; }
  .footer-grid, .footer-contact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }

  .landing-hero { padding:130px 6% 65px; }
  .landing-hero-inner, .landing-split, .landing-faq { grid-template-columns:1fr; }
  .landing-hero-card { max-width:700px; width:100%; }
  .landing-cards, .landing-proof { grid-template-columns:1fr 1fr; }
  .landing-image, .landing-image img { min-height:360px; }
}

@media (max-width:600px) {
  .site-header { top:10px; }
  .site-header .header-container { height:64px; padding:0 14px; border-radius:16px; }
  .site-header .logo img { max-width:112px; max-height:36px; }
  .site-header .menu-btn { width:44px; height:44px; border-radius:12px; z-index:10001; }
  .site-header .mobile-menu { padding:94px 18px 30px; }
  .site-header .mobile-menu > ul > li > a { min-height:52px; font-size:16px; }

  .home-page .hero { padding-top:105px; padding-bottom:55px; }
  .home-page .hero-container { width:90%; gap:32px; }
  .home-page .hero-tag { font-size:10px; letter-spacing:3px; gap:9px; }
  .home-page .hero-tag::before { width:38px; }
  .home-page .hero h1 { font-size:clamp(48px,14vw,72px); line-height:.94; }
  .home-page .hero p { font-size:15px; margin-top:22px; }
  .home-page .hero-action { flex-wrap:wrap; gap:10px; }
  .home-page .hero-action a { min-height:46px; padding:12px 16px; }
  .home-page .hero-visual { width:100%; }
  .home-page .hero-showcase { min-height:250px; }
  .home-page .hero-showcase img { max-height:360px; }
  .home-page .outline-title { font-size:31vw; bottom:-4px; }

  .home-page .services, .home-page .about, .home-page .clients,
  .home-page .faq, .home-page .testimonial { padding:70px 0; }
  .home-page .services-header, .home-page .services-list,
  .home-page .clients-header, .home-page .faq-wrap,
  .home-page .testimonial-slider { width:90%; }
  .home-page .section-tag { font-size:10px; letter-spacing:3px; }
  .home-page .section-title { font-size:clamp(36px,11vw,56px); }
  .home-page .service-item { grid-template-columns:32px 1fr 24px; gap:10px; padding:23px 0; }
  .home-page .service-item h3 { font-size:25px; }
  .home-page .service-item p { font-size:13px; line-height:1.6; }
  .home-page .service-item .service-image { max-width:none; }
  .home-page .about-grid, .home-page .process-container { width:90%; }
  .home-page .about-left h2 { font-size:clamp(36px,11vw,58px); }
  .home-page .about-left p { font-size:15px; line-height:1.7; }
  .home-page .numbers { grid-template-columns:1fr; }
  .home-page .numbers .number { padding:22px; }
  .home-page .timeline-item { margin-bottom:32px; }
  .home-page .faq-item summary { font-size:18px; padding:20px 34px 20px 0; }
  .home-page .author { flex-wrap:wrap; margin-top:35px; }
  .home-page .cta { padding:75px 0; }
  .home-page .cta h2 { font-size:clamp(45px,13vw,70px); }

  .hero2 { padding:112px 6% 55px; }
  .hero2 h1 { font-size:clamp(48px,14vw,78px); }
  .hero2 p { font-size:15px; margin-top:24px; }
  .hero-stamp { width:160px; right:-55px; top:4%; }
  .page { padding:78px 6%; }
  .lead { font-size:clamp(32px,10vw,54px); }
  .numbers, .logo-grid2 { grid-template-columns:1fr; }
  .number { padding:24px 20px; }
  .logo2 { min-height:105px; }
  .service2 { grid-template-columns:34px 1fr 22px; padding:24px 0; }
  .service2 h2 { font-size:clamp(25px,8vw,38px); }
  .service2 p { font-size:13px; }
  .case, .case:nth-child(2) { height:310px; }
  .quote2 { padding:55px 6%; margin-top:55px; }
  .cta2 { padding:65px 6%; }
  .cta2 h2 { font-size:clamp(42px,12vw,70px); }
  .footer2 { padding:55px 6% 28px; }
  .footer2-bottom { flex-direction:column; align-items:flex-start; }

  .page-hero { padding:112px 7% 60px; }
  .page-hero h1 { font-size:clamp(48px,14vw,76px); line-height:.92; }
  .page-hero p { font-size:15px; line-height:1.65; }
  .content { padding:65px 6%; }
  .intro { font-size:clamp(30px,9vw,50px); }
  .grid { gap:14px; margin-top:45px; }
  .card { padding:25px; min-height:0; }
  .card h2 { font-size:26px; }
  .process-list, .work-grid { margin-top:45px; }
  .process-row { grid-template-columns:45px 1fr; gap:12px; padding:28px 0; }
  .process-row h2 { font-size:28px; }
  .work, .work:nth-child(1), .work:nth-child(4) { height:290px; border-radius:20px; }
  .contact-layout { gap:30px; }
  .contact-info { padding:10px 0; }
  .contact-info:before { font-size:26vw !important; }
  .contact-info p { font-size:15px; line-height:1.7; }
  .form { padding:22px; border-radius:20px; }
  .form input, .form textarea, .form select { padding:14px; font-size:14px; }
  .form-actions { grid-template-columns:1fr; }
  .form-actions button, .form button#email-submit, .form button.whatsapp-submit { width:100%; font-size:12px; min-height:44px; padding:11px 14px; }
  .captcha-field { display:grid; grid-template-columns:1fr auto; gap:8px; }
  .captcha-challenge { min-width:0; width:100%; font-size:18px; }
  .captcha-input { min-width:0; width:100%; }
  .captcha-refresh { width:46px; }
  .footer-grid, .footer-contact-grid { grid-template-columns:1fr; }
  .footer { padding:60px 6%; }

  .landing-hero { padding:105px 5% 55px; }
  .landing-hero h1 { font-size:clamp(42px,13vw,68px); }
  .landing-hero p { font-size:15px; }
  .landing-hero-actions { flex-direction:column; align-items:stretch; }
  .landing-btn { width:100%; }
  .landing-hero-card { padding:20px; border-radius:18px; }
  .landing-hero-card h2 { font-size:25px; }
  .landing-cards, .landing-proof { grid-template-columns:1fr; }
  .landing-section { padding:65px 6%; }
  .landing-section-head h2 { font-size:clamp(34px,10vw,54px); }
  .landing-section-head p { font-size:15px; }
  .landing-image, .landing-image img { min-height:260px; }
  .landing-list-item { grid-template-columns:32px 1fr; }
  .landing-faq { gap:35px; }
  .landing-faq-list summary { font-size:16px; }
  .landing-bottom-cta { padding:60px 6%; }
  .landing-bottom-cta h2 { font-size:clamp(38px,11vw,62px); }
}

/* Final mobile menu control fix: keep the open/close button above the full-screen menu */
@media (max-width:900px) {
  .site-header .menu-btn {
    position: fixed !important;
    top: 22px;
    right: max(18px, calc((100vw - 94%) / 2 + 14px));
    z-index: 10050 !important;
    display: flex !important;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #111;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 28px rgba(0,0,0,.24);
  }
  .site-header .menu-btn.active {
    background: #F1CA03;
    border-color: #F1CA03;
  }
  .site-header .menu-btn span {
    width: 22px;
    height: 2px;
    background: #fff;
  }
  .site-header .menu-btn.active span {
    background: #111;
  }
  .site-header .mobile-menu {
    z-index: 10000;
  }
  .site-header .mobile-menu .dropdown-menu a {
    font-size: 16px !important;
  }
  .site-header .navbar > ul > li > ul.dropdown-menu > li > a {
    font-size: 16px;
  }
}

@media (max-width:380px) {
  .site-header .header-container { padding:0 11px; }
  .site-header .logo img { max-width:100px; }
  .site-header .menu-btn { width:42px; height:42px; }
  .home-page .hero h1 { font-size:46px; }
  .home-page .hero-action { flex-direction:column; align-items:stretch; }
  .home-page .hero-action a { width:100%; justify-content:center; }
  .form { padding:18px; }
  .captcha-field { grid-template-columns:1fr; }
  .captcha-refresh { width:100%; }
}

/* Landing-page form containment and responsive fixes */
.landing-hero-inner{min-width:0}
.landing-hero-inner > *{min-width:0}
.landing-hero-card{width:100%;min-width:0;overflow:hidden}
.landing-hero-card .landing-form.form{display:grid;width:100%;min-width:0;box-sizing:border-box;gap:10px;padding:18px;background:#111;border-radius:18px;box-shadow:none}
.landing-hero-card .landing-form.form > *{min-width:0;max-width:100%;box-sizing:border-box}
.landing-hero-card .landing-form.form input,.landing-hero-card .landing-form.form select,.landing-hero-card .landing-form.form textarea{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:13px 14px;margin:0}
.landing-hero-card .landing-form.form textarea{min-height:105px}
.landing-hero-card .landing-form.form .captcha-field{width:100%;min-width:0;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto}
.landing-hero-card .landing-form.form .captcha-challenge{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.landing-hero-card .landing-form.form .captcha-input{min-width:0}
.landing-hero-card .landing-form.form .form-actions{width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.landing-hero-card .landing-form.form .form-actions button{width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:12px;padding:11px 10px}
@media(max-width:900px){
  .landing-hero-inner{grid-template-columns:1fr}
  .landing-hero-card{justify-self:start;max-width:720px}
}
@media(max-width:600px){
  .landing-hero{padding:105px 5% 55px}
  .landing-hero-card{padding:18px;border-radius:18px}
  .landing-hero-card .landing-form.form{padding:14px}
  .landing-hero-card .landing-form.form .captcha-field{grid-template-columns:minmax(0,1fr) auto}
  .landing-hero-card .landing-form.form .captcha-challenge{grid-column:1}
  .landing-hero-card .landing-form.form .captcha-refresh{grid-column:2;width:44px}
  .landing-hero-card .landing-form.form .captcha-input{grid-column:1/-1}
  .landing-hero-card .landing-form.form .form-actions{grid-template-columns:1fr}
}
@media(max-width:380px){
  .landing-hero-card{padding:14px}
  .landing-hero-card .landing-form.form{padding:12px}
  .landing-hero-card .landing-form.form input,.landing-hero-card .landing-form.form select,.landing-hero-card .landing-form.form textarea{font-size:13px;padding:12px}
}

/* ================= AUTHORITATIVE HOMEPAGE PROCESS SCROLL STORY ================= */
.home-page #process { position:relative; min-height:400vh; height:auto; padding:0; overflow:visible; background:#111; color:#fff; }
.home-page #process .process-container { position:-webkit-sticky; position:sticky; top:0; width:min(92%,1400px); height:100vh; min-height:680px; margin:0 auto; padding:120px 0 70px; box-sizing:border-box; display:grid; grid-template-columns:380px minmax(0,1fr); gap:80px; align-items:center; }
.home-page #process .process-left { position:relative; top:auto; align-self:center; z-index:2; }
.home-page #process .process-left h2 { font-size:clamp(38px,4.5vw,70px); line-height:.98; margin:20px 0 60px; }
.home-page #process .process-left h2 span { color:#F1CA03; }
.home-page #process .timeline { position:relative; padding-left:35px; }
.home-page #process .timeline-line { position:absolute; left:16px; top:0; bottom:0; width:2px; background:rgba(255,255,255,.15); }
.home-page #process .timeline-item { position:relative; margin-bottom:45px; cursor:default; }
.home-page #process .timeline-item:last-child { margin-bottom:0; }
.home-page #process .timeline-item::before { content:""; position:absolute; left:-27px; top:8px; width:16px; height:16px; border-radius:50%; background:#555; transition:transform .45s ease,background-color .45s ease,box-shadow .45s ease; }
.home-page #process .timeline-item.active::before { background:#F1CA03; transform:scale(1.5); box-shadow:0 0 0 7px rgba(241,202,3,.10); }
.home-page #process .timeline-item span { display:inline-block; font-size:20px; color:#777; transition:color .35s ease,transform .35s ease; }
.home-page #process .timeline-item.active span { color:#fff; transform:translateX(3px); }
.home-page #process .process-right { position:relative; min-width:0; height:min(72vh,700px); align-self:center; }
.home-page #process .step { position:absolute; inset:0; min-height:0; padding:0; display:flex; flex-direction:column; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transform:translate3d(0,34px,0); transition:opacity .55s ease,transform .65s cubic-bezier(.22,.61,.36,1),visibility 0s linear .55s; }
.home-page #process .step.is-active { opacity:1; visibility:visible; pointer-events:auto; transform:translate3d(0,0,0); transition-delay:0s; }
.home-page #process .step h3 { font-size:clamp(38px,6vw,90px); line-height:.98; margin-bottom:22px; }
.home-page #process .step p { max-width:620px; font-size:clamp(17px,2vw,22px); line-height:1.9; color:#bbb; }
@media (max-width:1100px) and (min-width:901px){ .home-page #process .process-container{grid-template-columns:300px minmax(0,1fr);gap:50px;} .home-page #process .process-right{height:68vh;} }
@media (max-width:900px){
  .home-page #process{min-height:auto;padding:90px 0 80px;overflow:visible;}
  .home-page #process .process-container{position:relative;top:auto;width:min(92%,760px);height:auto;min-height:0;padding:0;display:block;}
  .home-page #process .process-left{margin-bottom:45px;}
  .home-page #process .process-left h2{margin-bottom:35px;}
  .home-page #process .timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0;}
  .home-page #process .timeline-line{left:8%;right:8%;top:8px;bottom:auto;width:auto;height:2px;}
  .home-page #process .timeline-item{margin:0;min-height:28px;padding-top:26px;text-align:center;}
  .home-page #process .timeline-item::before{left:50%;top:0;transform:translateX(-50%);width:14px;height:14px;}
  .home-page #process .timeline-item.active::before{transform:translateX(-50%) scale(1.45);}
  .home-page #process .timeline-item span{font-size:16px;transform:none;}
  .home-page #process .timeline-item.active span{transform:none;}
  .home-page #process .process-right{height:auto;display:block;}
  .home-page #process .step,.home-page #process .step.is-active{position:relative;inset:auto;min-height:68vh;padding:55px 0;opacity:.42;visibility:visible;pointer-events:auto;transform:none;transition:opacity .45s ease;}
  .home-page #process .step.is-active{opacity:1;}
}
@media (max-width:560px){ .home-page #process{padding:75px 0 60px;} .home-page #process .process-left h2{margin:16px 0 30px;} .home-page #process .step,.home-page #process .step.is-active{min-height:60vh;padding:45px 0;} .home-page #process .step h3{font-size:clamp(42px,14vw,66px);} .home-page #process .step p{font-size:17px;line-height:1.65;} }
@media (max-width:380px){ .home-page #process .timeline{gap:4px;} .home-page #process .timeline-item span{font-size:14px;} }


/* =========================================================
   PROCESS SCROLL STORY — AUTHORITATIVE FINAL IMPLEMENTATION
   ========================================================= */
.home-page #process.process {
  position: relative !important;
  min-height: 400vh !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  background: #111 !important;
  color: #fff !important;
}

.home-page #process.process .process-container {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  width: min(92%, 1400px) !important;
  height: 100vh !important;
  min-height: 680px !important;
  margin: 0 auto !important;
  padding: 120px 0 70px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 380px minmax(0, 1fr) !important;
  gap: 80px !important;
  align-items: center !important;
  z-index: 2 !important;
}

.home-page #process.process .process-left {
  position: relative !important;
  top: auto !important;
  align-self: center !important;
  z-index: 3 !important;
}

.home-page #process.process .process-right {
  position: relative !important;
  min-width: 0 !important;
  height: min(72vh, 700px) !important;
  align-self: center !important;
}

.home-page #process.process .step {
  position: absolute !important;
  inset: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, 34px, 0) !important;
  transition: opacity .55s ease, transform .65s cubic-bezier(.22,.61,.36,1), visibility 0s linear .55s !important;
}

.home-page #process.process .step.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
  transition-delay: 0s !important;
}

.home-page #process.process .process-scroll-track {
  position: absolute !important;
  inset: 0 !important;
  width: 1px !important;
  height: 100% !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.home-page #process.process .process-trigger {
  position: absolute !important;
  left: 0 !important;
  width: 1px !important;
  height: 25% !important;
}

.home-page #process.process .process-trigger:nth-child(1) { top: 0; }
.home-page #process.process .process-trigger:nth-child(2) { top: 25%; }
.home-page #process.process .process-trigger:nth-child(3) { top: 50%; }
.home-page #process.process .process-trigger:nth-child(4) { top: 75%; }

@media (max-width: 1100px) and (min-width: 901px) {
  .home-page #process.process .process-container {
    grid-template-columns: 300px minmax(0, 1fr) !important;
    gap: 50px !important;
  }
  .home-page #process.process .process-right {
    height: 68vh !important;
  }
}

@media (max-width: 900px) {
  .home-page #process.process {
    min-height: auto !important;
    padding: 90px 0 80px !important;
  }

  .home-page #process.process .process-container {
    position: relative !important;
    top: auto !important;
    width: min(92%, 760px) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  .home-page #process.process .process-left {
    position: sticky !important;
    top: 86px !important;
    margin-bottom: 45px !important;
    background: #111 !important;
    padding: 8px 0 18px !important;
    z-index: 5 !important;
  }

  .home-page #process.process .timeline {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .home-page #process.process .timeline-line {
    left: 8% !important;
    right: 8% !important;
    top: 8px !important;
    bottom: auto !important;
    width: auto !important;
    height: 2px !important;
  }

  .home-page #process.process .timeline-item {
    margin: 0 !important;
    min-height: 28px !important;
    padding-top: 26px !important;
    text-align: center !important;
  }

  .home-page #process.process .timeline-item::before {
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    width: 14px !important;
    height: 14px !important;
  }

  .home-page #process.process .timeline-item.active::before {
    transform: translateX(-50%) scale(1.45) !important;
  }

  .home-page #process.process .process-right {
    height: auto !important;
    display: block !important;
  }

  .home-page #process.process .step,
  .home-page #process.process .step.is-active {
    position: relative !important;
    inset: auto !important;
    min-height: 68vh !important;
    padding: 55px 0 !important;
    opacity: .42 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: opacity .45s ease !important;
  }

  .home-page #process.process .step.is-active {
    opacity: 1 !important;
  }

  .home-page #process.process .process-scroll-track {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .home-page #process.process {
    padding: 75px 0 60px !important;
  }

  .home-page #process.process .process-left {
    top: 72px !important;
    margin-bottom: 35px !important;
  }

  .home-page #process.process .step,
  .home-page #process.process .step.is-active {
    min-height: 60vh !important;
    padding: 45px 0 !important;
  }

  .home-page #process.process .step h3 {
    font-size: clamp(42px, 14vw, 66px) !important;
  }

  .home-page #process.process .step p {
    font-size: 17px !important;
    line-height: 1.65 !important;
  }
}

@media (max-width: 380px) {
  .home-page #process.process .timeline {
    gap: 4px !important;
  }

  .home-page #process.process .timeline-item span {
    font-size: 14px !important;
  }
}


/* PROCESS REFERENCE EXACT WORKING IMPLEMENTATION */
.home-page #process.process {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    background: #111 !important;
    color: #fff !important;
    padding: 140px 0 !important;
    overflow: visible !important;
}
.home-page #process .process-container {
    position: relative !important;
    width: min(92%, 1400px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 380px 1fr !important;
    gap: 80px !important;
    align-items: stretch !important;
}
.home-page #process .process-left {
    position: sticky !important;
    top: 130px !important;
    height: max-content !important;
    align-self: start !important;
}
.home-page #process .process-left h2 {
    font-size: clamp(38px, 4.5vw, 70px) !important;
    line-height: .98 !important;
    margin: 20px 0 60px !important;
}
.home-page #process .process-left h2 span { color: #F1CA03 !important; }
.home-page #process .timeline {
    position: relative !important;
    padding-left: 35px !important;
}
.home-page #process .timeline-line {
    position: absolute !important;
    left: 16px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    height: auto !important;
    background: rgba(255,255,255,.15) !important;
}
.home-page #process .timeline-item {
    position: relative !important;
    margin-bottom: 45px !important;
    min-height: 0 !important;
    padding: 0 !important;
}
.home-page #process .timeline-item:last-child { margin-bottom: 0 !important; }
.home-page #process .timeline-item::before {
    content: "" !important;
    position: absolute !important;
    left: -27px !important;
    top: 8px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #555 !important;
    transform: none !important;
    transition: .4s !important;
}
.home-page #process .timeline-item.active::before {
    background: #F1CA03 !important;
    transform: scale(1.5) !important;
}
.home-page #process .timeline-item span {
    font-size: 20px !important;
    color: #888 !important;
    display: inline !important;
    transform: none !important;
}
.home-page #process .timeline-item.active span {
    color: #fff !important;
    transform: none !important;
}
.home-page #process .process-right {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 120px !important;
    height: auto !important;
    min-width: 0 !important;
    align-self: stretch !important;
}
.home-page #process .step,
.home-page #process .step.is-active {
    position: relative !important;
    inset: auto !important;
    min-height: 50vh !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
}
.home-page #process .step h3 {
    font-size: clamp(38px, 6vw, 90px) !important;
    line-height: normal !important;
    margin-bottom: 22px !important;
}
.home-page #process .step p {
    max-width: 620px !important;
    font-size: clamp(17px, 2vw, 22px) !important;
    line-height: 1.9 !important;
    color: #bbb !important;
}
@media (max-width:1200px) and (min-width:901px) {
    .home-page #process .process-container {
        grid-template-columns: 320px 1fr !important;
        gap: 50px !important;
    }
}
@media (max-width:900px) {
    .home-page #process.process {
        min-height: 0 !important;
        padding: 100px 0 !important;
    }
    .home-page #process .process-container {
        position: relative !important;
        width: min(92%, 760px) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .home-page #process .process-left {
        position: static !important;
        top: auto !important;
    }
    .home-page #process .timeline {
        display: flex !important;
        gap: 22px !important;
        padding-left: 0 !important;
        overflow-x: auto !important;
        padding-bottom: 10px !important;
        scrollbar-width: thin !important;
    }
    .home-page #process .timeline-line { display: none !important; }
    .home-page #process .timeline-item {
        margin-bottom: 0 !important;
        white-space: nowrap !important;
    }
    .home-page #process .timeline-item::before {
        position: static !important;
        display: inline-flex !important;
        margin-right: 8px !important;
        vertical-align: middle !important;
        transform: none !important;
    }
    .home-page #process .timeline-item.active::before {
        transform: scale(1.5) !important;
    }
    .home-page #process .process-right {
        gap: 70px !important;
    }
    .home-page #process .step,
    .home-page #process .step.is-active {
        min-height: auto !important;
        padding: 35px 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}
@media (max-width:560px) {
    .home-page #process.process { padding: 75px 0 60px !important; }
    .home-page #process .process-left h2 { margin: 16px 0 30px !important; }
    .home-page #process .step,
    .home-page #process .step.is-active {
        min-height: 60vh !important;
        padding: 45px 0 !important;
    }
    .home-page #process .step h3 { font-size: clamp(42px,14vw,66px) !important; }
    .home-page #process .step p { font-size: 17px !important; line-height: 1.65 !important; }
}
/* Final mobile menu control fix: keep the open/close button above the full-screen menu */
@media (max-width:900px) {
  .site-header .menu-btn {
    position: fixed !important;
    top: 22px;
    right: max(18px, calc((100vw - 94%) / 2 + 14px));
    z-index: 10050 !important;
    display: flex !important;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #111;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 28px rgba(0,0,0,.24);
  }
  .site-header .menu-btn.active {
    background: #F1CA03;
    border-color: #F1CA03;
  }
  .site-header .menu-btn span {
    width: 22px;
    height: 2px;
    background: #fff;
  }
  .site-header .menu-btn.active span {
    background: #111;
  }
  .site-header .mobile-menu {
    z-index: 10000;
  }
  .site-header .mobile-menu .dropdown-menu a {
    font-size: 16px !important;
  }
  .site-header .navbar > ul > li > ul.dropdown-menu > li > a {
    font-size: 16px;
  }
}

@media (max-width:380px) {
    .home-page #process .timeline { gap: 4px !important; }
    .home-page #process .timeline-item span { font-size: 14px !important; }
}


/* =========================================================
   PROCESS — FINAL VISUAL POLISH
   Keeps the working scroll behavior intact while improving
   spacing, active-state clarity and responsive presentation.
   ========================================================= */
.home-page .process .process-container{
    box-sizing:border-box;
}

.home-page .process .process-left{
    z-index:2;
}

.home-page .process .timeline-item{
    transition:margin-bottom .35s ease;
}

.home-page .process .timeline-item span{
    font-size:clamp(18px,1.7vw,24px);
    font-weight:600;
    letter-spacing:.02em;
}

.home-page .process .timeline-item.active span{
    color:#F1CA03;
    transform:translateX(4px) scale(1.04);
}

.home-page .process .timeline-item.active::before{
    box-shadow:0 0 0 6px rgba(241,202,3,.12),0 0 18px rgba(241,202,3,.22);
    transform:scale(1.08);
}

.home-page .process .step{
    padding-right:clamp(0px,3vw,48px);
}

.home-page .process .step h3{
    letter-spacing:-.045em;
}

.home-page .process .step p{
    max-width:650px;
}

@media (max-width:900px){
    .home-page .process{
        min-height:auto;
        padding:90px 0;
    }

    .home-page .process-container{
        position:relative;
        top:auto;
        height:auto;
        min-height:0;
        padding:0;
        display:grid;
    }

    .home-page .process-right{
        height:auto;
    }

    .home-page .step{
        position:relative;
        inset:auto;
        min-height:300px;
        padding:35px 0;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:none;
    }

    .home-page .step:not(.is-active){
        opacity:1;
    }

    .home-page .timeline-item.active span{
        color:#F1CA03;
    }
}

@media (max-width:600px){
    .home-page .process{
        padding:75px 0;
    }

    .home-page .process-left h2{
        margin-bottom:35px;
        font-size:clamp(38px,12vw,58px);
    }

    .home-page .timeline{
        padding-left:0;
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap:8px;
    }

    .home-page .timeline-line{
        left:6%;
        right:6%;
        top:8px;
        bottom:auto;
        width:auto;
        height:2px;
    }

    .home-page .timeline-item,
    .home-page .timeline-item:last-child{
        margin:0;
        flex:1;
        text-align:center;
    }

    .home-page .timeline-item::before{
        left:50%;
        top:1px;
        transform:translateX(-50%);
    }

    .home-page .timeline-item.active::before{
        transform:translateX(-50%) scale(1.08);
    }

    .home-page .timeline-item span{
        display:block;
        padding-top:28px;
        font-size:16px;
    }

    .home-page .timeline-item.active span{
        transform:none;
    }

    .home-page .process-right{
        margin-top:15px;
    }

    .home-page .step{
        min-height:260px;
        padding:30px 0;
    }

    .home-page .step h3{
        font-size:clamp(36px,11vw,54px);
    }

    .home-page .step p{
        font-size:17px;
        line-height:1.7;
    }
}

/* =========================================================
   HOMEPAGE CUSTOMER REVIEWS HEADING
   ========================================================= */
.home-page .testimonial .testimonial-heading{
    position:relative;
    width:min(90%,1100px);
    margin:0 auto 42px;
    min-height:34px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.home-page .testimonial .testimonial-heading .section-tag{
    display:block;
    margin:0;
    font-size:clamp(18px,2vw,25px);
    line-height:1.2;
    font-weight:700;
    letter-spacing:.12em;
    text-align:center;
}

.home-page .testimonial .testimonial-view-all{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    white-space:nowrap;
}

@media (max-width:700px){
    .home-page .testimonial .testimonial-heading{
        width:min(92%,720px);
        flex-direction:column;
        gap:16px;
        min-height:0;
        margin-bottom:32px;
    }

    .home-page .testimonial .testimonial-heading .section-tag{
        font-size:18px;
    }

    .home-page .testimonial .testimonial-view-all{
        position:static;
        transform:none;
        font-size:12px;
    }
}

/* Course / internship featured imagery */
.detail-feature-image{width:min(1180px,calc(100% - 48px));margin:0 auto 56px;overflow:hidden;border-radius:28px;border:1px solid rgba(255,255,255,.12);background:#151515;box-shadow:0 24px 70px rgba(0,0,0,.18)}
.detail-feature-image img{display:block;width:100%;height:clamp(260px,42vw,560px);object-fit:cover}
/* Blog */
.blog-page,.blog-article-page{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:0 0 100px}.blog-hero{padding:110px 0 64px;max-width:860px}.blog-hero h1{font-size:clamp(52px,8vw,110px);line-height:.92;letter-spacing:-.055em;margin:18px 0}.blog-hero h1 em{font-style:normal;color:#F1CA03}.blog-hero p{font-size:20px;line-height:1.7;max-width:720px;color:rgba(255,255,255,.72)}.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.blog-card{background:#171717;border:1px solid rgba(255,255,255,.1);border-radius:24px;overflow:hidden;display:flex;flex-direction:column}.blog-card-image{display:block;aspect-ratio:16/10;overflow:hidden}.blog-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.blog-card:hover .blog-card-image img{transform:scale(1.04)}.blog-card-body{padding:28px}.blog-category{display:inline-block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#F1CA03;font-weight:700}.blog-card h2{font-size:clamp(26px,3vw,38px);line-height:1.05;margin:12px 0}.blog-card h2 a,.insight-card h3 a{color:inherit;text-decoration:none}.blog-card p,.insight-card p{color:rgba(255,255,255,.68);line-height:1.7;margin-bottom:20px}.text-link{color:#F1CA03;text-decoration:none;font-weight:700}.blog-cta{margin-top:64px;padding:48px;border-radius:28px;background:#F1CA03;color:#111}.blog-cta h2{font-size:clamp(34px,5vw,60px);margin:0 0 10px}.blog-cta p{max-width:680px;line-height:1.6}.blog-cta .contact-btn{display:inline-flex;margin-top:16px;background:#111;color:#fff}.blog-article-page{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;padding-top:100px}.blog-article{min-width:0}.blog-article-head h1{font-size:clamp(48px,6vw,88px);line-height:.96;letter-spacing:-.05em;margin:14px 0 20px}.blog-article-head>p{font-size:20px;line-height:1.7;color:rgba(255,255,255,.7);max-width:780px}.blog-feature-image{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:26px;margin:38px 0}.blog-article-content{font-size:18px;line-height:1.85;color:rgba(255,255,255,.78)}.blog-article-content h2{font-size:34px;line-height:1.1;color:#fff;margin:44px 0 14px}.blog-article-content p{margin:0 0 22px}.related-posts{position:sticky;top:130px;height:max-content}.related-posts h2{margin-top:0}.related-post{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;font-weight:700;line-height:1.3}.related-post img{width:78px;height:60px;object-fit:cover;border-radius:10px;flex:none}.latest-insights{width:min(1180px,calc(100% - 48px));margin:100px auto;padding:20px 0 0}.latest-insights .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px}.latest-insights .section-head h2{font-size:clamp(40px,6vw,76px);line-height:.95;margin:12px 0 0;letter-spacing:-.045em}.latest-insights .section-head h2 span{color:#F1CA03}.insight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.insight-card{display:grid;grid-template-columns:42% 1fr;gap:22px;padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:#171717}.insight-image{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:16px}.insight-image img{width:100%;height:100%;object-fit:cover}.insight-card h3{font-size:25px;line-height:1.1;margin:10px 0}.insight-card p{font-size:15px;margin:0 0 12px}
@media (max-width:900px){.detail-feature-image{width:min(100% - 32px,1180px);margin-bottom:42px}.blog-grid,.insight-grid{grid-template-columns:1fr}.blog-article-page{grid-template-columns:1fr;padding-top:70px}.related-posts{position:static}.latest-insights{width:min(100% - 32px,1180px)}.latest-insights .section-head{align-items:flex-start;flex-direction:column}.blog-page{width:min(100% - 32px,1180px)}}
@media (max-width:600px){.detail-feature-image{width:calc(100% - 24px);border-radius:18px}.detail-feature-image img{height:230px}.blog-hero{padding:72px 0 44px}.blog-hero h1{font-size:clamp(42px,13vw,64px)}.blog-hero p{font-size:17px}.blog-card-body{padding:22px}.blog-card h2{font-size:28px}.blog-article-page{width:calc(100% - 24px);padding-top:52px}.blog-article-head h1{font-size:clamp(40px,12vw,60px)}.blog-article-head>p{font-size:17px}.blog-article-content{font-size:16px}.blog-article-content h2{font-size:28px}.blog-feature-image{border-radius:18px;margin:26px 0}.blog-cta{padding:32px 24px;border-radius:22px}.latest-insights .section-head h2{font-size:42px}.insight-card{grid-template-columns:1fr}.insight-card h3{font-size:27px}}


/* Typewriter effect for the existing homepage hero heading */
.home-page .hero h1.hero-typewriter{
    display:block;
}

.home-page .hero h1.hero-typewriter .hero-type-line{
    display:block;
    min-height:1em;
    width:max-content;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    color:#111;
}

.home-page .hero h1.hero-typewriter .hero-type-rotating{
    display:block;
    min-height:1.9em;
}

.home-page .hero h1.hero-typewriter .hero-type-line--accent{
    color:#24A3D8;
}

.home-page .hero h1.hero-typewriter .hero-type-line.is-typing::after{
    content:"";
    display:inline-block;
    width:.045em;
    height:.78em;
    margin-left:.08em;
    vertical-align:-.06em;
    background:currentColor;
    animation:heroTypeCursor .7s steps(1,end) infinite;
}

@keyframes heroTypeCursor{
    0%,49%{opacity:1}
    50%,100%{opacity:0}
}

@media (prefers-reduced-motion:reduce){
    .home-page .hero h1.hero-typewriter .hero-type-line.is-typing::after{
        animation:none;
        opacity:1;
    }
}

/* Expanded service navigation and detail pages */
.service2-link{display:block;text-decoration:none;color:inherit}
.service2-link:hover{text-decoration:none}
.service-feature-image{margin:0 auto 44px;max-width:1100px;overflow:hidden;border-radius:24px}
.service-feature-image img{width:100%;display:block;aspect-ratio:16/7;object-fit:cover}
@media (max-width:700px){.service-feature-image{margin-bottom:28px;border-radius:18px}.service-feature-image img{aspect-ratio:16/9}.service-list2{grid-template-columns:1fr}.service2-link{min-height:auto}}

.services-view-all{display:inline-flex;align-items:center;gap:.4rem;color:#F1CA03;text-decoration:none;font-weight:600;margin-top:16px}.services-view-all:hover{text-decoration:underline}

/* FINAL MOBILE HEADER REPAIR
   Keep the hamburger/close control outside the backdrop-filtered header container
   so it remains above the full-screen mobile navigation on real mobile browsers. */
@media (max-width: 900px) {
  .site-header { z-index: 10020 !important; }
  .site-header .header-container { z-index: 2; }
  .site-header > .menu-btn {
    position: fixed !important;
    top: 22px;
    right: 18px;
    z-index: 10050 !important;
    display: flex !important;
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    background: #111;
    color: #fff;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
    appearance: none;
    -webkit-appearance: none;
  }
  .site-header > .menu-btn span {
    width: 22px;
    height: 2px;
    margin: 0;
    display: block;
    background: #fff;
    border-radius: 2px;
    transform-origin: center;
    transition: transform .22s ease, background-color .22s ease, opacity .22s ease;
  }
  .site-header > .menu-btn.active {
    background: #F1CA03;
    border-color: #F1CA03;
  }
  .site-header > .menu-btn.active span { background: #111; }
  .site-header > .menu-btn.active span:first-child { transform: translateY(4px) rotate(45deg); }
  .site-header > .menu-btn.active span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .site-header .mobile-menu {
    z-index: 10000 !important;
    padding-top: 112px !important;
  }
}
@media (max-width: 600px) {
  .site-header > .menu-btn { top: 20px; right: 16px; width: 46px; height: 46px; border-radius: 12px; }
  .site-header .mobile-menu { padding-top: 94px !important; }
}
@media (max-width: 380px) {
  .site-header > .menu-btn { top: 18px; right: 12px; width: 44px; height: 44px; }
}


/* Service hover image visibility refinement */
@media (max-width: 1100px) and (min-width: 701px) {
  .home-page .service-item {
    grid-template-columns: 55px minmax(0, 1fr) 240px 40px;
    gap: 18px;
  }
  .home-page .service-image {
    width: 235px;
    height: 150px;
  }
}

@media (max-width: 700px) {
  .home-page .service-item {
    grid-template-columns: 44px minmax(0, 1fr) 28px;
    gap: 14px;
  }
  .home-page .service-image {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: start;
    width: min(100%, 320px);
    height: auto;
    aspect-ratio: 16 / 10;
    margin-top: 18px;
    transform: none;
    opacity: 1;
    box-shadow: none;
  }
  .home-page .service-item:hover .service-image {
    transform: none;
    box-shadow: none;
  }
  .home-page .service-content p {
    font-size: 16px;
  }
}