@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800;900&display=swap');
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}body{font-family:Jost,sans-serif;background:#f8f8f5;color:#101113;line-height:1.55;background-image:radial-gradient(circle at 4% 8%,rgba(36,163,216,.13),transparent 19rem),radial-gradient(circle at 96% 50%,rgba(241,202,3,.12),transparent 23rem)}a{text-decoration:none;color:inherit}.nav{position:sticky;top:0;z-index:10;padding:18px 4%;display:flex;align-items:center;justify-content:space-between;background:rgba(248,248,245,.8);backdrop-filter:blur(18px);border-bottom:1px solid rgba(16,17,19,.08)}.brand{font-size:23px;font-weight:900;letter-spacing:1px}.brand span,.eyebrow{color:#24a3d8}.nav-links{display:flex;gap:25px;align-items:center;font-size:14px;font-weight:600}.nav-links a{transition:.25s}.nav-links a:hover,.nav-links .current{color:#24a3d8}.nav-cta{padding:11px 19px;border-radius:999px;background:#111;color:#fff!important;box-shadow:0 8px 18px rgba(0,0,0,.15)}.nav-cta:hover{background:#24a3d8;transform:translateY(-2px)}.page-hero{min-height:59vh;padding:140px 7% 92px;display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden;background:#111;color:#fff;background-image:linear-gradient(118deg,rgba(0,0,0,.98) 0%,rgba(12,45,57,.94) 52%,rgba(36,163,216,.72)),repeating-linear-gradient(90deg,transparent 0,transparent 69px,rgba(255,255,255,.07) 70px)}.page-hero:before{content:'';position:absolute;width:38vw;height:38vw;right:-9vw;top:-15vw;border:1px solid rgba(241,202,3,.7);border-radius:50%;box-shadow:0 0 0 34px rgba(241,202,3,.08),0 0 0 68px rgba(241,202,3,.05);animation:orbit 14s linear infinite}.page-hero:after{content:'LIVASYS';position:absolute;right:-2%;bottom:-7vw;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);font-size:20vw;font-weight:900;line-height:1;pointer-events:none}.eyebrow{font-size:12px;font-weight:700;letter-spacing:4px;text-transform:uppercase}.page-hero h1{max-width:900px;font-size:clamp(52px,10vw,150px);line-height:.88;margin-top:24px;position:relative;z-index:1;letter-spacing:-.065em}.page-hero h1 em{font-style:normal;color:#f1ca03}.page-hero p{font-size:19px;max-width:600px;margin-top:30px;color:#d1d1d1;position:relative;z-index:1}.content{max-width:1300px;margin:auto;padding:120px 5%;position:relative}.intro{font-size:clamp(30px,4.5vw,65px);line-height:1.1;max-width:1050px;font-weight:700;letter-spacing:-.04em}.intro span{color:#24a3d8}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:70px}.card{padding:35px;border-radius:24px;background:rgba(255,255,255,.88);min-height:250px;box-shadow:0 15px 45px rgba(0,0,0,.06);border:1px solid rgba(16,17,19,.06);transition:transform .35s,background .35s,box-shadow .35s}.card:hover{transform:translateY(-10px) rotate(-1deg);background:#24a3d8;box-shadow:0 27px 55px rgba(36,163,216,.27)}.card .num{color:#24a3d8;font-weight:800;font-size:14px}.card:hover .num,.card:hover p{color:#e8fbff}.card h2{font-size:30px;line-height:1.1;margin:25px 0 12px}.card p{color:#666}.dark{max-width:none;background:#111;color:#fff;background-image:radial-gradient(circle at 85% 10%,rgba(36,163,216,.25),transparent 30rem)}.dark .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}.dark .card:hover{background:#f1ca03;color:#111}.dark .card p{color:#bbb}.dark .intro span{color:#f1ca03}.process-list{margin-top:70px;border-top:1px solid #ddd}.process-row{display:grid;grid-template-columns:100px 1fr 1fr;gap:30px;padding:42px 0;border-bottom:1px solid #ddd;transition:.3s}.process-row:hover{padding-left:24px;background:linear-gradient(90deg,rgba(36,163,216,.1),transparent)}.process-row b{color:#24a3d8;font-size:18px}.process-row h2{font-size:35px;line-height:1;letter-spacing:-.04em}.process-row p{color:#666}.work-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;margin-top:65px}.work{height:440px;border-radius:28px;overflow:hidden;position:relative;background:#222;box-shadow:0 18px 40px rgba(0,0,0,.12)}.work:nth-child(1),.work:nth-child(4){height:540px}.work img{width:100%;height:100%;object-fit:cover;transition:.7s cubic-bezier(.2,.8,.2,1)}.work:hover img{transform:scale(1.1)}.work div{position:absolute;inset:auto 25px 22px;color:#fff;z-index:1;transform:translateY(8px);transition:.35s}.work:hover div{transform:translateY(0)}.work:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 38%,rgba(0,0,0,.8))}.work h2{font-size:32px}.work small{letter-spacing:2px;color:#bdeeff}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:45px}.contact-info{padding:35px 0}.contact-info a{display:block;font-size:clamp(26px,4vw,56px);font-weight:700;margin:14px 0;letter-spacing:-.05em}.contact-info a:hover{color:#24a3d8}.contact-info p{color:#666;margin-top:35px;font-size:18px}.form{display:grid;gap:17px;padding:32px;border-radius:26px;background:#111;box-shadow:0 25px 50px rgba(0,0,0,.18)}.form input,.form textarea{font:inherit;border:1px solid rgba(255,255,255,.18);color:#fff;background:rgba(255,255,255,.07);border-radius:12px;padding:17px}.form textarea{min-height:130px;resize:vertical}.form button,.button{border:0;border-radius:999px;background:#24a3d8;color:#fff;font:inherit;font-weight:700;padding:17px 28px;cursor:pointer;display:inline-block;transition:.3s}.form button:hover,.button:hover{background:#f1ca03;color:#111;transform:translateY(-3px)}.footer{padding:80px 5%;text-align:center;background:#111;color:#fff;position:relative;overflow:hidden}.footer:before{content:'MAKE IT MATTER';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:10vw;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);font-weight:900}.footer>*{position:relative}.footer p{color:#999;margin-top:15px}@keyframes orbit{to{transform:rotate(360deg)}}@media(max-width:800px){.nav-links{display:none}.page-hero{min-height:50vh;padding:110px 7% 70px}.page-hero:before{width:60vw;height:60vw}.content{padding:75px 6%}.grid,.work-grid,.contact-layout{grid-template-columns:1fr}.process-row{grid-template-columns:55px 1fr}.process-row p{grid-column:2}.work,.work:nth-child(1),.work:nth-child(4){height:360px}}
/* Editorial page enhancements */
.page-hero .eyebrow{display:flex;align-items:center;gap:12px}.page-hero .eyebrow:before{content:'';width:42px;height:1px;background:#f1ca03}.page-hero h1:after{content:'↗';display:inline-flex;vertical-align:top;margin-left:.12em;width:.42em;height:.42em;align-items:center;justify-content:center;border:2px solid #24a3d8;border-radius:50%;font-size:.24em;color:#24a3d8;letter-spacing:0}.page-hero p:after{content:'SCROLL TO EXPLORE';display:block;margin-top:44px;color:#f1ca03;font-size:10px;font-weight:800;letter-spacing:3px}.content:before{content:'';position:absolute;top:40px;right:5%;width:100px;height:100px;border:1px solid rgba(36,163,216,.23);border-radius:50%;background:radial-gradient(circle at center,rgba(36,163,216,.12) 0 3px,transparent 4px);background-size:17px 17px}.about-page .page-hero{background-image:linear-gradient(118deg,rgba(0,0,0,.98),rgba(39,16,73,.9) 55%,rgba(139,83,224,.55)),repeating-linear-gradient(90deg,transparent 0,transparent 69px,rgba(255,255,255,.07) 70px)}.about-page .page-hero h1 em,.about-page .intro span{color:#F1CA03}.about-page .card:nth-child(2){transform:translateY(38px)}.about-page .card:nth-child(2):hover{transform:translateY(28px) rotate(-1deg)}.about-page .card:after{content:'✦';position:absolute;right:26px;top:20px;font-size:24px;color:#f1ca03;opacity:.75}.about-page .card{position:relative;overflow:hidden}.services-page .page-hero{background-image:linear-gradient(118deg,rgba(0,0,0,.98),rgba(4,57,51,.94) 52%,rgba(0,191,166,.48)),repeating-linear-gradient(90deg,transparent 0,transparent 69px,rgba(255,255,255,.07) 70px)}.services-page .grid{counter-reset:services}.services-page .card{position:relative;overflow:hidden}.services-page .card:after{counter-increment:services;content:'0' counter(services);position:absolute;right:18px;bottom:-25px;font-size:95px;font-weight:900;color:rgba(36,163,216,.09);line-height:1}.services-page .card:hover:after{color:rgba(17,17,17,.12)}.process-page .page-hero{background-image:linear-gradient(118deg,rgba(0,0,0,.98),rgba(74,37,0,.88) 52%,rgba(241,202,3,.45)),repeating-linear-gradient(90deg,transparent 0,transparent 69px,rgba(255,255,255,.07) 70px)}.process-page .process-row{position:relative}.process-page .process-row:after{content:'→';position:absolute;right:0;top:50%;font-size:34px;color:#f1ca03;opacity:0;transform:translateX(-12px);transition:.3s}.process-page .process-row:hover:after{opacity:1;transform:translateX(0)}.work-page .page-hero{background-image:linear-gradient(118deg,rgba(0,0,0,.98),rgba(3,30,59,.9) 52%,rgba(36,163,216,.64)),repeating-linear-gradient(90deg,transparent 0,transparent 69px,rgba(255,255,255,.07) 70px)}.work-page .work:nth-child(even){transform:translateY(70px)}.work-page .work:before{content:'VIEW CASE STUDY ↗';position:absolute;z-index:2;right:22px;top:20px;transform:translateY(-10px);opacity:0;border:1px solid rgba(255,255,255,.6);padding:7px 12px;border-radius:99px;color:#fff;font-size:10px;font-weight:700;letter-spacing:1px;transition:.3s}.work-page .work:hover:before{opacity:1;transform:translateY(0)}.contact-page .page-hero{background-image:linear-gradient(118deg,rgba(0,0,0,.98),rgba(63,19,48,.9) 52%,rgba(236,89,166,.52)),repeating-linear-gradient(90deg,transparent 0,transparent 69px,rgba(255,255,255,.07) 70px)}.contact-page .contact-info:before{content:'HELLO';display:block;font-size:clamp(60px,10vw,150px);font-weight:900;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(16,17,19,.14);margin-bottom:35px}.contact-page .form{position:relative;overflow:hidden}.contact-page .form:before{content:'NEW PROJECT';position:absolute;right:-20px;top:22px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12);font-size:35px;font-weight:900;transform:rotate(90deg);transform-origin:center;pointer-events:none}.contact-page .form>*{position:relative;z-index:1}@media(max-width:800px){.about-page .card:nth-child(2),.work-page .work:nth-child(even){transform:none}.page-hero p:after{margin-top:28px}.page-hero h1:after{display:none}.content:before{display:none}.process-page .process-row:after{display:none}}
.nav:has(a[href="/about-livasys"].current)~.page-hero{background-image:linear-gradient(118deg,rgba(0,0,0,.98),rgba(39,16,73,.9) 55%,rgba(139,83,224,.55)),repeating-linear-gradient(90deg,transparent 0,transparent 69px,rgba(255,255,255,.07) 70px)}body:has(.nav a[href="/about-livasys"].current) .page-hero h1 em,body:has(.nav a[href="/about-livasys"].current) .intro span{color:#F1CA03}body:has(.nav a[href="/about-livasys"].current) .card:nth-child(2){transform:translateY(38px)}body:has(.nav a[href="/about-livasys"].current) .card:nth-child(2):hover{transform:translateY(28px) rotate(-1deg)}body:has(.nav a[href="/about-livasys"].current) .card:after{content:'*';position:absolute;right:26px;top:20px;font-size:24px;color:#f1ca03;opacity:.75}body:has(.nav a[href="/about-livasys"].current) .card{position:relative;overflow:hidden}.nav:has(a[href="services.html"].current)~.page-hero{background-image:linear-gradient(118deg,rgba(0,0,0,.98),rgba(4,57,51,.94) 52%,rgba(0,191,166,.48)),repeating-linear-gradient(90deg,transparent 0,transparent 69px,rgba(255,255,255,.07) 70px)}body:has(.nav a[href="services.html"].current) .grid{counter-reset:services}body:has(.nav a[href="services.html"].current) .card{position:relative;overflow:hidden}body:has(.nav a[href="services.html"].current) .card:after{counter-increment:services;content:'0' counter(services);position:absolute;right:18px;bottom:-25px;font-size:95px;font-weight:900;color:rgba(36,163,216,.09);line-height:1}.nav:has(a[href="process.html"].current)~.page-hero{background-image:linear-gradient(118deg,rgba(0,0,0,.98),rgba(74,37,0,.88) 52%,rgba(241,202,3,.45)),repeating-linear-gradient(90deg,transparent 0,transparent 69px,rgba(255,255,255,.07) 70px)}body:has(.nav a[href="process.html"].current) .process-row{position:relative}body:has(.nav a[href="process.html"].current) .process-row:after{content:'>';position:absolute;right:0;top:50%;font-size:34px;color:#f1ca03;opacity:0;transform:translateX(-12px);transition:.3s}body:has(.nav a[href="process.html"].current) .process-row:hover:after{opacity:1;transform:translateX(0)}.nav:has(a[href="work.html"].current)~.page-hero{background-image:linear-gradient(118deg,rgba(0,0,0,.98),rgba(3,30,59,.9) 52%,rgba(36,163,216,.64)),repeating-linear-gradient(90deg,transparent 0,transparent 69px,rgba(255,255,255,.07) 70px)}body:has(.nav a[href="work.html"].current) .work:nth-child(even){transform:translateY(70px)}body:has(.nav a[href="work.html"].current) .work:before{content:'VIEW CASE STUDY';position:absolute;z-index:2;right:22px;top:20px;transform:translateY(-10px);opacity:0;border:1px solid rgba(255,255,255,.6);padding:7px 12px;border-radius:99px;color:#fff;font-size:10px;font-weight:700;letter-spacing:1px;transition:.3s}body:has(.nav a[href="work.html"].current) .work:hover:before{opacity:1;transform:translateY(0)}.nav:has(a[href="/contact"].current)~.page-hero{background-image:linear-gradient(118deg,rgba(0,0,0,.98),rgba(63,19,48,.9) 52%,rgba(236,89,166,.52)),repeating-linear-gradient(90deg,transparent 0,transparent 69px,rgba(255,255,255,.07) 70px)}body:has(.nav a[href="/contact"].current) .contact-info:before{content:'HELLO';display:block;font-size:clamp(60px,10vw,150px);font-weight:900;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(16,17,19,.14);margin-bottom:35px}body:has(.nav a[href="/contact"].current) .form{position:relative;overflow:hidden}body:has(.nav a[href="/contact"].current) .form:before{content:'NEW PROJECT';position:absolute;right:-20px;top:22px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12);font-size:35px;font-weight:900;transform:rotate(90deg);transform-origin:center;pointer-events:none}body:has(.nav a[href="/contact"].current) .form>*{position:relative;z-index:1}@media(max-width:800px){body:has(.nav a[href="/about-livasys"].current) .card:nth-child(2),body:has(.nav a[href="work.html"].current) .work:nth-child(even){transform:none}body:has(.nav a[href="process.html"].current) .process-row:after{display:none}}
.page-hero h1:after{content:"\2197"}.process-page .process-row:after,body:has(.nav a[href="process.html"].current) .process-row:after{content:"\2192"}.work-page .work:before,body:has(.nav a[href="work.html"].current) .work:before{content:"VIEW CASE STUDY \2197"}


/* 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 secondary page CSS moved from index2.html */
/* =========================================================

   ROOT

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



:root{

    --yellow:#F1CA03;

    --blue:#24A3D8;

    --pink:#E63875;

    --black:#18262D;

    --text:#637179;

    --muted:#9AA5AA;

    --white:#FFFFFF;

    --cream:#FFFDF5;

    --blue-soft:#F1FAFD;

    --line:#DCE6E9;

}





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

   RESET

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



.digital-page *{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

    overflow-x:hidden;

}



.digital-page{

    margin:0;

    min-height:100vh;

    overflow-x:hidden;

    overflow-y:auto;

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

    color:var(--black);

    background:var(--cream);

}



.digital-page a{

    text-decoration:none;

    color:inherit;

}



.digital-page button, .digital-page input, .digital-page textarea, .digital-page select{

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

}



.digital-page button{

    cursor:pointer;

}



.digital-page ::selection{

    background:var(--yellow);

    color:var(--black);

}





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

   GLOBAL

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



.digital-page .container{

    width:min(1180px,90%);

    margin:auto;

}



.digital-page .section{

    padding:120px 0;

}



.digital-page .heading{

    font-size:40px;

    line-height:1.05;

    letter-spacing:-1.7px;

    font-weight:600;

}



.digital-page .heading span{

    color:var(--blue);

}



.digital-page .eyebrow{

    display:inline-flex;

    align-items:center;

    gap:9px;

    font-size:9px;

    font-weight:700;

    letter-spacing:2px;

    color:var(--blue);

}



.digital-page .eyebrow:before{

    content:"";

    width:26px;

    height:1px;

    background:var(--blue);

}



.digital-page .hand{

    font-family:"Caveat",cursive;

}





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

   CURSOR

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



.digital-page .cursor{

    position:fixed;

    width:9px;

    height:9px;

    background:var(--blue);

    border-radius:50%;

    pointer-events:none;

    z-index:99999;

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

}



.digital-page .cursor-ring{

    position:fixed;

    width:35px;

    height:35px;

    border:1px solid var(--black);

    border-radius:50%;

    pointer-events:none;

    z-index:99998;

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

    transition:.2s;

}



.digital-page body.hovering .cursor-ring{

    width:60px;

    height:60px;

    border-color:var(--yellow);

    background:rgba(241,202,3,.08);

}



@media(max-width:900px){

    .cursor,

    .cursor-ring{

        display:none;

    }

}





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

   TOP STRIP

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



.digital-page .top-strip{

    height:30px;

    background:var(--yellow);

    overflow:hidden;

    white-space:nowrap;

}



.digital-page .top-track{

    display:flex;

    width:max-content;

    animation:topMove 30s linear infinite;

}



.digital-page .top-word{

    padding:7px 28px;

    font-size:8px;

    font-weight:700;

    letter-spacing:1.7px;

}



.digital-page .top-word b{

    color:var(--blue);

    margin-left:20px;

}



@keyframes topMove{

    from{transform:translateX(0)}

    to{transform:translateX(-50%)}

}





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

   HEADER

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



.digital-page header{

    position:sticky;

    top:0;

    z-index:5000;

    height:78px;

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

    backdrop-filter:blur(12px);

    border-bottom:1px solid var(--line);

}



.digital-page .header-inner{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.digital-page .logo{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:19px;

    font-weight:700;

}



.digital-page .logo-mark{

    width:38px;

    height:38px;

    display:grid;

    place-items:center;

    background:var(--yellow);

    border-radius:48% 52% 45% 55%;

    transform:rotate(-7deg);

}



.digital-page .logo-name span{

    color:var(--blue);

}



.digital-page nav{

    display:flex;

    align-items:center;

    gap:28px;

}



.digital-page nav a{

    font-size:10px;

    color:var(--text);

    position:relative;

}



.digital-page nav a:not(.nav-button):after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:1px;

    background:var(--blue);

    transition:.3s;

}



.digital-page nav a:hover:after{

    width:100%;

}



.digital-page .nav-button{

    background:var(--black);

    color:#fff;

    padding:11px 18px;

}



.digital-page .nav-button:hover{

    background:var(--blue);

}



.digital-page .menu{

    display:none;

    width:42px;

    height:42px;

    background:#fff;

    border:1px solid var(--line);

    border-radius:50%;

}



.digital-page .menu span{

    display:block;

    width:17px;

    height:1px;

    background:var(--black);

    margin:4px auto;

}





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

   HERO

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



.digital-page .hero{

    min-height:790px;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    background:

        radial-gradient(circle at 90% 10%,rgba(36,163,216,.13),transparent 22%),

        radial-gradient(circle at 5% 85%,rgba(241,202,3,.16),transparent 25%),

        var(--cream);

}



.digital-page .hero-grid{

    position:absolute;

    inset:0;

    opacity:.35;

    background-image:

        linear-gradient(rgba(24,38,45,.045) 1px,transparent 1px),

        linear-gradient(90deg,rgba(24,38,45,.045) 1px,transparent 1px);

    background-size:70px 70px;

}



.digital-page .hero-content{

    position:relative;

    z-index:5;

}



.digital-page .hero-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.digital-page .location{

    display:inline-flex;

    align-items:center;

    gap:8px;

    border:1px solid var(--line);

    background:#fff;

    padding:8px 12px;

    font-size:8px;

    letter-spacing:1px;

    transform:rotate(-1deg);

}



.digital-page .location i{

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--yellow);

}



.digital-page .hero-side-note{

    color:var(--pink);

    font-size:20px;

    transform:rotate(5deg);

}



.digital-page .hero-main{

    margin-top:25px;

    position:relative;

}



.digital-page .hero-title{

    max-width:1000px;

    font-size:clamp(55px,8vw,108px);

    line-height:.88;

    letter-spacing:-6px;

    font-weight:600;

}



.digital-page .hero-title .yellow-word{

    color:var(--black);

    position:relative;

    display:inline-block;

}



.digital-page .hero-title .yellow-word:after{

    content:"";

    position:absolute;

    left:-4px;

    right:-7px;

    bottom:3px;

    height:14px;

    background:var(--yellow);

    z-index:-1;

    transform:rotate(-1deg);

}



.digital-page .hero-title .blue-word{

    color:var(--blue);

}



.digital-page .hero-subrow{

    margin-top:35px;

    display:grid;

    grid-template-columns:1fr .7fr;

    gap:80px;

    align-items:end;

}



.digital-page .hero-description{

    max-width:500px;

    font-size:14px;

    line-height:1.9;

    color:var(--text);

}



.digital-page .hero-actions{

    display:flex;

    gap:12px;

    align-items:center;

}



.digital-page .button{

    display:inline-flex;

    align-items:center;

    gap:13px;

    padding:14px 20px;

    background:var(--black);

    color:#fff;

    font-size:10px;

    font-weight:600;

    transition:.3s;

}



.digital-page .button:hover{

    background:var(--blue);

    transform:translateY(-3px);

}



.digital-page .button .arrow{

    color:var(--yellow);

}



.digital-page .outline-button{

    padding:12px;

    font-size:10px;

    color:var(--text);

}



.digital-page .outline-button:hover{

    color:var(--blue);

}



.digital-page .hero-bottom{

    margin-top:70px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.digital-page .hero-note{

    color:var(--pink);

    font-size:23px;

    transform:rotate(-4deg);

}



.digital-page .hero-note span{

    display:block;

    font-size:16px;

}



.digital-page .scroll-note{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--muted);

    font-size:8px;

    letter-spacing:1px;

}



.digital-page .scroll-line{

    width:55px;

    height:1px;

    background:var(--line);

}





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

   HERO ORBIT

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



.digital-page .hero-orbit{

    position:absolute;

    right:-70px;

    top:100px;

    width:440px;

    height:440px;

    pointer-events:none;

}



.digital-page .orbit-circle{

    position:absolute;

    left:50%;

    top:50%;

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

    border:1px solid rgba(24,38,45,.16);

    border-radius:50%;

}



.digital-page .orbit-one{

    width:280px;

    height:280px;

}



.digital-page .orbit-two{

    width:370px;

    height:150px;

    transform:translate(-50%,-50%) rotate(35deg);

}



.digital-page .orbit-three{

    width:450px;

    height:190px;

    transform:translate(-50%,-50%) rotate(-25deg);

}



.digital-page .orbit-core{

    position:absolute;

    left:50%;

    top:50%;

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

    width:130px;

    height:130px;

    border-radius:50%;

    background:var(--blue);

    color:#fff;

    display:grid;

    place-items:center;

    text-align:center;

    box-shadow:14px 15px 0 var(--yellow);

}



.digital-page .orbit-core strong{

    display:block;

    font-size:28px;

}



.digital-page .orbit-core small{

    font-size:7px;

    letter-spacing:1.5px;

}



.digital-page .orbit-dot{

    position:absolute;

    width:45px;

    height:45px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#fff;

    border:1px solid var(--black);

    font-size:16px;

    z-index:5;

    animation:float 4s ease-in-out infinite;

}



.digital-page .dot1{left:20px;top:100px}

.digital-page .dot2{right:25px;top:75px;animation-delay:.6s}

.digital-page .dot3{right:15px;bottom:90px;animation-delay:1.2s}

.digital-page .dot4{left:50px;bottom:55px;animation-delay:1.8s}



@keyframes float{

    0%,100%{transform:translateY(0)}

    50%{transform:translateY(-9px)}

}





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

   MARQUEE

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



.digital-page .marquee{

    background:var(--black);

    color:#fff;

    overflow:hidden;

    border-bottom:4px solid var(--yellow);

}



.digital-page .marquee-track{

    display:flex;

    width:max-content;

    animation:marquee 28s linear infinite;

}



.digital-page .marquee-item{

    padding:18px 28px;

    display:flex;

    align-items:center;

    gap:25px;

    white-space:nowrap;

    font-size:11px;

    letter-spacing:1.5px;

}



.digital-page .marquee-item b{

    color:var(--yellow);

    font-size:18px;

}



@keyframes marquee{

    from{transform:translateX(0)}

    to{transform:translateX(-50%)}

}





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

   MANIFESTO

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



.digital-page .manifesto{

    background:#fff;

    padding:130px 0;

}



.digital-page .manifesto-grid{

    display:grid;

    grid-template-columns:.35fr 1.65fr;

    gap:80px;

}



.digital-page .big-number{

    font-size:100px;

    line-height:.8;

    letter-spacing:-7px;

    color:var(--yellow);

    font-weight:600;

}



.digital-page .big-number span{

    color:var(--blue);

    display:block;

    margin-left:35px;

}



.digital-page .manifesto-title{

    font-size:52px;

    line-height:1.03;

    letter-spacing:-2.5px;

    font-weight:600;

    max-width:820px;

}



.digital-page .manifesto-title span{

    color:var(--blue);

}



.digital-page .manifesto-text{

    max-width:650px;

    margin-top:28px;

    font-size:14px;

    line-height:1.9;

    color:var(--text);

}



.digital-page .hand-note{

    color:var(--pink);

    font-size:22px;

    margin-top:24px;

    transform:rotate(-3deg);

}





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

   CREATIVE BREAK

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



.digital-page .creative-break{

    min-height:470px;

    position:relative;

    overflow:hidden;

    background:var(--yellow);

    display:flex;

    align-items:center;

}



.digital-page .break-word{

    position:absolute;

    left:-20px;

    top:50%;

    transform:translateY(-50%) rotate(-4deg);

    font-size:clamp(100px,18vw,260px);

    line-height:.7;

    letter-spacing:-12px;

    font-weight:700;

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

    white-space:nowrap;

}



.digital-page .break-content{

    position:relative;

    z-index:3;

    width:min(1180px,90%);

    margin:auto;

}



.digital-page .break-content h2{

    max-width:700px;

    font-size:58px;

    line-height:.95;

    letter-spacing:-3px;

    font-weight:600;

}



.digital-page .break-content h2 span{

    color:var(--blue);

}



.digital-page .break-content p{

    max-width:450px;

    margin-top:22px;

    color:var(--text);

    font-size:13px;

    line-height:1.8;

}



.digital-page .break-symbol{

    position:absolute;

    right:10%;

    top:50%;

    transform:translateY(-50%);

    width:210px;

    height:210px;

    border:1px solid var(--black);

    border-radius:50%;

    display:grid;

    place-items:center;

    font-size:70px;

    color:var(--blue);

}



.digital-page .break-symbol:before{

    content:"";

    position:absolute;

    width:270px;

    height:80px;

    border:1px dashed var(--black);

    border-radius:50%;

    transform:rotate(25deg);

}





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

   SERVICES

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



.digital-page .services{

    background:var(--blue-soft);

    padding:130px 0;

    border-top:1px solid var(--line);

    border-bottom:1px solid var(--line);

}



.digital-page .services-head{

    display:flex;

    align-items:end;

    justify-content:space-between;

    gap:50px;

}



.digital-page .services-head-copy{

    max-width:700px;

}



.digital-page .services-description{

    max-width:330px;

    font-size:11px;

    line-height:1.8;

    color:var(--text);

}



.digital-page .services-layout{

    margin-top:65px;

    display:grid;

    grid-template-columns:250px 1fr;

    gap:65px;

}



.digital-page .service-nav{

    display:flex;

    flex-direction:column;

}



.digital-page .service-link{

    padding:17px 0;

    border-bottom:1px solid var(--line);

    color:var(--muted);

    font-size:10px;

    cursor:pointer;

    transition:.3s;

}



.digital-page .service-link:first-child{

    border-top:1px solid var(--line);

}



.digital-page .service-link.active{

    color:var(--black);

    padding-left:14px;

    position:relative;

}



.digital-page .service-link.active:before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    width:5px;

    height:5px;

    background:var(--blue);

    border-radius:50%;

    transform:translateY(-50%);

}



.digital-page .service-num{

    color:var(--yellow);

    margin-right:8px;

    font-weight:700;

}



.digital-page .service-display{

    min-height:530px;

    background:#fff;

    border:1px solid var(--line);

    position:relative;

    overflow:hidden;

    padding:55px;

}



.digital-page .service-display:before{

    content:attr(data-number);

    position:absolute;

    right:20px;

    top:-35px;

    font-size:220px;

    font-weight:700;

    color:rgba(36,163,216,.05);

}



.digital-page .service-display-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.digital-page .service-label{

    font-size:8px;

    color:var(--pink);

    letter-spacing:1.5px;

    font-weight:700;

}



.digital-page .service-symbol{

    width:72px;

    height:72px;

    border:1px solid var(--black);

    border-radius:50%;

    display:grid;

    place-items:center;

    color:var(--blue);

    font-size:27px;

    position:relative;

}



.digital-page .service-symbol:before{

    content:"";

    position:absolute;

    width:92px;

    height:31px;

    border:1px solid var(--yellow);

    border-radius:50%;

    transform:rotate(-20deg);

}



.digital-page .service-display h3{

    margin-top:50px;

    font-size:57px;

    line-height:.92;

    letter-spacing:-3px;

    max-width:650px;

    font-weight:600;

}



.digital-page .service-display h3 span{

    color:var(--blue);

}



.digital-page .service-display p{

    max-width:580px;

    margin-top:25px;

    color:var(--text);

    font-size:13px;

    line-height:1.9;

}



.digital-page .tags{

    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin-top:27px;

}



.digital-page .tag{

    padding:7px 10px;

    border:1px solid var(--line);

    font-size:8px;

    color:var(--text);

}



.digital-page .service-bottom{

    position:absolute;

    left:55px;

    right:55px;

    bottom:30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.digital-page .service-counter{

    color:var(--muted);

    font-size:8px;

}



.digital-page .service-buttons{

    display:flex;

    gap:5px;

}



.digital-page .service-arrow{

    width:38px;

    height:31px;

    border:1px solid var(--line);

    background:#fff;

}



.digital-page .service-arrow:hover{

    background:var(--yellow);

    border-color:var(--yellow);

}





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

   EXPERIMENT SECTION

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



.digital-page .experiment{

    padding:130px 0;

    background:#fff;

}



.digital-page .experiment-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:100px;

    align-items:center;

}



.digital-page .experiment-copy p{

    margin-top:25px;

    max-width:500px;

    color:var(--text);

    font-size:13px;

    line-height:1.9;

}



.digital-page .experiment-board{

    height:470px;

    position:relative;

    background:var(--cream);

    border:1px solid var(--black);

    transform:rotate(1.2deg);

    overflow:hidden;

}



.digital-page .board-label{

    position:absolute;

    left:25px;

    top:22px;

    font-size:9px;

    letter-spacing:1px;

}



.digital-page .board-circle{

    position:absolute;

    width:280px;

    height:280px;

    border:1px solid var(--blue);

    border-radius:50%;

    left:50%;

    top:52%;

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

}



.digital-page .board-circle:before{

    content:"";

    position:absolute;

    inset:30px;

    border:1px dashed var(--yellow);

    border-radius:50%;

}



.digital-page .board-core{

    position:absolute;

    left:50%;

    top:50%;

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

    width:115px;

    height:115px;

    border-radius:50%;

    background:var(--blue);

    color:#fff;

    display:grid;

    place-items:center;

    text-align:center;

    font-size:13px;

    font-weight:600;

}



.digital-page .board-card{

    position:absolute;

    background:#fff;

    border:1px solid var(--black);

    padding:15px;

    font-size:10px;

    box-shadow:5px 6px 0 rgba(23,37,44,.08);

}



.digital-page .board-card.one{

    left:25px;

    top:100px;

    transform:rotate(-5deg);

}



.digital-page .board-card.two{

    right:20px;

    top:80px;

    transform:rotate(4deg);

}



.digital-page .board-card.three{

    left:50px;

    bottom:45px;

    transform:rotate(3deg);

}



.digital-page .board-card.four{

    right:45px;

    bottom:55px;

    transform:rotate(-4deg);

}



.digital-page .board-arrow{

    position:absolute;

    color:var(--pink);

    font-size:30px;

}



.digital-page .arrow-one{

    left:45%;

    top:20px;

    transform:rotate(20deg);

}



.digital-page .arrow-two{

    right:10px;

    bottom:10px;

    transform:rotate(-20deg);

}





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

   LOCAL

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



.digital-page .local{

    background:var(--soft-blue);

    padding:130px 0;

}



.digital-page .local-grid{

    display:grid;

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

    gap:90px;

    align-items:center;

}



.digital-page .local-copy p{

    max-width:520px;

    margin-top:25px;

    color:var(--text);

    font-size:13px;

    line-height:1.9;

}



.digital-page .area-list{

    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin-top:27px;

}



.digital-page .area{

    padding:9px 13px;

    border:1px solid var(--line);

    background:#fff;

    font-size:9px;

    color:var(--text);

    transition:.3s;

}



.digital-page .area:hover{

    background:var(--yellow);

    border-color:var(--yellow);

    transform:rotate(-2deg);

}



.digital-page .local-note{

    margin-top:20px;

    color:var(--pink);

    font-size:23px;

    transform:rotate(-4deg);

}



.digital-page .local-map{

    height:470px;

    position:relative;

    border:1px solid var(--black);

    background:#fff;

    overflow:hidden;

}



.digital-page .local-grid-bg{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(23,37,44,.055) 1px,transparent 1px),

        linear-gradient(90deg,rgba(23,37,44,.055) 1px,transparent 1px);

    background-size:35px 35px;

}



.digital-page .route{

    position:absolute;

    border:2px dashed rgba(36,163,216,.35);

    border-radius:50%;

}



.digital-page .route.one{

    width:420px;

    height:220px;

    left:5%;

    top:18%;

    transform:rotate(-17deg);

}



.digital-page .route.two{

    width:270px;

    height:150px;

    left:22%;

    top:32%;

    border-color:rgba(241,202,3,.7);

    transform:rotate(30deg);

}



.digital-page .map-home{

    position:absolute;

    left:50%;

    top:50%;

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

    width:120px;

    height:120px;

    border-radius:50%;

    background:var(--yellow);

    display:grid;

    place-items:center;

    text-align:center;

    z-index:4;

    box-shadow:12px 13px 0 var(--blue);

}



.digital-page .map-home strong{

    display:block;

    font-size:13px;

}



.digital-page .map-home small{

    display:block;

    margin-top:4px;

    color:var(--text);

    font-size:7px;

}



.digital-page .map-point{

    position:absolute;

    width:11px;

    height:11px;

    background:var(--blue);

    border-radius:50%;

    box-shadow:0 0 0 7px rgba(36,163,216,.1);

}



.digital-page .point1{left:16%;top:22%}

.digital-page .point2{right:15%;top:20%}

.digital-page .point3{left:20%;bottom:20%}

.digital-page .point4{right:18%;bottom:24%}



.digital-page .map-text{

    position:absolute;

    font-size:10px;

}



.digital-page .map-text.one{left:9%;top:15%}

.digital-page .map-text.two{right:7%;top:13%}

.digital-page .map-text.three{left:9%;bottom:13%}

.digital-page .map-text.four{right:9%;bottom:16%}





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

   WHY

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



.digital-page .why{

    padding:130px 0;

    background:var(--black);

    color:#fff;

}



.digital-page .why-grid{

    display:grid;

    grid-template-columns:.8fr 1.2fr;

    gap:100px;

}



.digital-page .why .eyebrow{

    color:var(--yellow);

}



.digital-page .why .eyebrow:before{

    background:var(--yellow);

}



.digital-page .why-title{

    margin-top:15px;

    font-size:45px;

    line-height:1;

    letter-spacing:-2px;

    font-weight:600;

}



.digital-page .why-title span{

    color:var(--yellow);

}



.digital-page .why-description{

    margin-top:25px;

    max-width:420px;

    color:#99A5AA;

    font-size:12px;

    line-height:1.8;

}



.digital-page .why-list{

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

}



.digital-page .why-row{

    min-height:105px;

    display:grid;

    grid-template-columns:55px 1fr 30px;

    align-items:center;

    gap:20px;

    border-bottom:1px solid rgba(255,255,255,.13);

}



.digital-page .why-number{

    color:var(--yellow);

    font-size:9px;

}



.digital-page .why-row h3{

    font-size:17px;

    font-weight:500;

}



.digital-page .why-row p{

    margin-top:4px;

    color:#7E8B90;

    font-size:10px;

}



.digital-page .why-icon{

    color:var(--blue);

}





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

   TESTIMONIAL

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



.digital-page .quote{

    padding:130px 0;

    background:var(--yellow);

    overflow:hidden;

    position:relative;

}



.digital-page .quote-mark{

    position:absolute;

    left:3%;

    top:-70px;

    font-family:Georgia,serif;

    font-size:330px;

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

}



.digital-page .quote-inner{

    position:relative;

    z-index:3;

    max-width:900px;

    margin:auto;

    text-align:center;

}



.digital-page .quote-symbol{

    color:var(--blue);

    font-size:28px;

}



.digital-page .quote-text{

    margin-top:20px;

    font-size:37px;

    line-height:1.2;

    letter-spacing:-1px;

}



.digital-page .quote-by{

    margin-top:25px;

    color:var(--text);

    font-size:9px;

    letter-spacing:1.5px;

}





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

   CTA

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



.digital-page .cta{

    padding:130px 0;

    background:#fff;

}



.digital-page .cta-box{

    min-height:480px;

    border:1px solid var(--black);

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}



.digital-page .cta-orbit{

    position:absolute;

    width:500px;

    height:300px;

    border:1px solid rgba(36,163,216,.25);

    border-radius:50%;

    transform:rotate(-20deg);

}



.digital-page .cta-orbit.two{

    width:350px;

    height:500px;

    border-color:rgba(241,202,3,.5);

    transform:rotate(25deg);

}



.digital-page .cta-content{

    position:relative;

    z-index:4;

}



.digital-page .cta-content h2{

    margin-top:15px;

    font-size:60px;

    line-height:.95;

    letter-spacing:-3px;

    font-weight:600;

}



.digital-page .cta-content h2 span{

    color:var(--blue);

}



.digital-page .cta-content p{

    max-width:500px;

    margin:20px auto 27px;

    color:var(--text);

    font-size:12px;

    line-height:1.8;

}



.digital-page .cta-note{

    position:absolute;

    right:8%;

    bottom:25px;

    color:var(--pink);

    font-size:23px;

    transform:rotate(-7deg);

}





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

   CONTACT

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



.digital-page .contact{

    padding:120px 0;

    background:var(--blue-soft);

    border-top:1px solid var(--line);

}



.digital-page .contact-grid{

    display:grid;

    grid-template-columns:.8fr 1.2fr;

    gap:90px;

}



.digital-page .contact-copy p{

    margin-top:20px;

    max-width:430px;

    color:var(--text);

    font-size:13px;

    line-height:1.8;

}



.digital-page .contact-info{

    display:grid;

    gap:10px;

    margin-top:30px;

}



.digital-page .contact-info-item{

    background:#fff;

    border:1px solid var(--line);

    padding:14px;

}



.digital-page .contact-info-item small{

    display:block;

    color:var(--muted);

    font-size:7px;

    letter-spacing:1px;

}



.digital-page .contact-info-item strong{

    display:block;

    margin-top:5px;

    font-size:12px;

}



.digital-page .form{

    display:grid;

    gap:12px;

}



.digital-page .form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

}



.digital-page .form input, .digital-page .form select, .digital-page .form textarea{

    width:100%;

    padding:15px;

    background:#fff;

    border:1px solid var(--line);

    outline:none;

    font-size:11px;

    color:var(--black);

}



.digital-page .form input:focus, .digital-page .form select:focus, .digital-page .form textarea:focus{

    border-color:var(--blue);

}



.digital-page .form textarea{

    min-height:140px;

    resize:vertical;

}



.digital-page .submit{

    padding:15px;

    border:0;

    background:var(--black);

    color:#fff;

    font-size:10px;

    font-weight:600;

}



.digital-page .submit:hover{

    background:var(--blue);

}



.digital-page #formMessage{

    color:var(--blue);

    font-size:10px;

    text-align:center;

}





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

   FOOTER

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



.digital-page footer{

    background:var(--black);

    color:#fff;

    padding:65px 0 25px;

}



.digital-page .footer-grid{

    display:grid;

    grid-template-columns:1.5fr 1fr 1fr 1fr;

    gap:50px;

    padding-bottom:50px;

}



.digital-page .footer-description{

    max-width:280px;

    margin-top:15px;

    color:#879399;

    font-size:10px;

    line-height:1.8;

}



.digital-page .footer-title{

    color:var(--yellow);

    font-size:9px;

    letter-spacing:1.5px;

    margin-bottom:16px;

}



.digital-page .footer-links{

    display:grid;

    gap:9px;

}



.digital-page .footer-links a{

    color:#929DA2;

    font-size:10px;

}



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

    color:#fff;

}



.digital-page .footer-bottom{

    padding-top:20px;

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

    display:flex;

    justify-content:space-between;

    color:#68767B;

    font-size:9px;

}





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

   WHATSAPP

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



.digital-page .whatsapp{

    position:fixed;

    right:20px;

    bottom:20px;

    width:53px;

    height:53px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    z-index:7000;

    font-size:18px;

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

    transition:.3s;

}



.digital-page .whatsapp:hover{

    transform:translateY(-5px) rotate(5deg);

}





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

   REVEAL

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



.digital-page .reveal{

    opacity:0;

    transform:translateY(30px);

    transition:opacity .8s ease,transform .8s ease;

}



.digital-page .reveal.show{

    opacity:1;

    transform:translateY(0);

}





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

   TABLET

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



@media(max-width:1000px){



    .hero{

        min-height:auto;

        padding:100px 0;

    }



    .hero-orbit{

        opacity:.4;

        right:-180px;

    }



    .hero-subrow{

        grid-template-columns:1fr;

        gap:25px;

    }



    .manifesto-grid{

        grid-template-columns:1fr;

        gap:35px;

    }



    .services-layout{

        grid-template-columns:1fr;

    }



    .service-nav{

        display:grid;

        grid-template-columns:repeat(3,1fr);

    }



    .service-link{

        border:1px solid var(--line);

        padding:13px;

    }



    .service-link:first-child{

        border-top:1px solid var(--line);

    }



    .experiment-grid,

    .local-grid,

    .why-grid,

    .contact-grid{

        grid-template-columns:1fr;

        gap:60px;

    }



    .footer-grid{

        grid-template-columns:1fr 1fr;

    }



}





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

   MOBILE

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



@media(max-width:700px){



    .container{

        width:90%;

    }



    .section{

        padding:80px 0;

    }



    nav{

        display:none;

    }



    nav.mobile-open{

        position:absolute;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

        top:78px;

        left:0;

        width:100%;

        padding:25px 5%;

        background:#fff;

        border-bottom:1px solid var(--line);

    }



    .menu{

        display:block;

    }



    .hero{

        padding:80px 0 90px;

    }



    .hero-side-note{

        display:none;

    }



    .hero-title{

        font-size:49px;

        letter-spacing:-2.8px;

    }



    .hero-orbit{

        position:relative;

        right:auto;

        top:auto;

        width:370px;

        height:370px;

        margin:60px auto -40px;

        opacity:1;

    }



    .hero-bottom{

        margin-top:30px;

    }



    .scroll-note{

        display:none;

    }



    .manifesto-title{

        font-size:40px;

    }



    .big-number{

        font-size:70px;

    }



    .creative-break{

        min-height:420px;

    }



    .break-content h2{

        font-size:44px;

    }



    .break-symbol{

        right:-50px;

        opacity:.5;

    }



    .service-nav{

        grid-template-columns:1fr 1fr;

    }



    .service-display{

        min-height:560px;

        padding:35px 25px;

    }



    .service-display h3{

        font-size:41px;

    }



    .service-bottom{

        left:25px;

        right:25px;

    }



    .experiment-board{

        height:390px;

    }



    .local-map{

        height:380px;

    }



    .why-title{

        font-size:40px;

    }



    .quote-text{

        font-size:28px;

    }



    .cta-content h2{

        font-size:43px;

    }



    .form-row{

        grid-template-columns:1fr;

    }



    .footer-grid{

        grid-template-columns:1fr 1fr;

    }



    .footer-bottom{

        flex-direction:column;

        gap:10px;

    }



}





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

   SMALL MOBILE

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



@media(max-width:450px){



    .hero-title{

        font-size:41px;

    }



    .hero-actions{

        flex-direction:column;

        align-items:flex-start;

    }



    .hero-orbit{

        transform:scale(.8);

        margin-left:-10%;

        width:120%;

    }



    .service-nav{

        grid-template-columns:1fr;

    }



    .service-display h3{

        font-size:36px;

    }



    .footer-grid{

        grid-template-columns:1fr;

    }



}


/* 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; } }

/* Contact form actions, select and accessibility helpers */
.form select{font:inherit;border:1px solid rgba(255,255,255,.18);color:#fff;background:#1b1b1b;border-radius:12px;padding:17px;appearance:auto}
.form select option{color:#111;background:#fff}
.form-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-actions button{width:100%}
.form-actions .whatsapp-submit{background:#25d366;color:#061b0d}
.form-actions .whatsapp-submit:hover{background:#dfffe9;color:#061b0d}
.form-status{margin:0;color:#d9d9d9;font-size:14px;line-height:1.5}
.form-status.success{color:#bfffcf}.form-status.error{color:#ffb4b4}
.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:600px){.form-actions{grid-template-columns:1fr}.contact-layout{gap:35px}}

/* Course detail / legal content */
.detail-content{max-width:1150px;margin:auto;padding:95px 6%}
.detail-content .eyebrow{color:#24a3d8}
.detail-content h2{font-size:clamp(28px,4vw,52px);line-height:1;letter-spacing:-.05em;margin:60px 0 18px}
.detail-content h3{font-size:24px;margin:35px 0 10px}
.detail-content p,.detail-content li{font-size:17px;line-height:1.85;color:#555}
.detail-content ul{padding-left:24px}.detail-content li{margin:7px 0}
.detail-callout{margin:45px 0;padding:30px;border-left:4px solid #24a3d8;background:#eefaff;border-radius:0 18px 18px 0}
.detail-cta{margin-top:55px;display:flex;gap:14px;flex-wrap:wrap}
.detail-cta a{padding:14px 22px;border-radius:999px;background:#111;color:#fff;font-weight:700}
.detail-cta a.secondary{background:#24a3d8}
.faq-list{margin-top:30px;border-top:1px solid #ddd}.faq-list details{padding:22px 0;border-bottom:1px solid #ddd}.faq-list summary{cursor:pointer;font-size:20px;font-weight:700}.faq-list p{margin:15px 0 0}
.legal-content h2{margin-top:40px}.legal-content h3{margin-top:28px}

/* =========================================================
   PRIMARY NAVIGATION DROPDOWNS
   ========================================================= */
.navbar > ul > li { position: relative; }
.navbar > ul > li.has-dropdown > a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 2px 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s ease;
}
.navbar > ul > li.has-dropdown:hover > a::before,
.navbar > ul > li.has-dropdown.dropdown-open > a::before { transform: rotate(225deg) translate(-1px,-1px); }
.navbar .dropdown-menu {
    position: absolute;
    left: 50%;
    top: calc(100% + 18px);
    transform: translate(-50%, 10px);
    width: 240px;
    padding: 10px;
    margin: 0;
    display: grid;
    gap: 2px;
    list-style: none;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(16,17,19,.10);
    border-radius: 14px;
    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;
}
.navbar .has-dropdown:hover > .dropdown-menu,
.navbar .has-dropdown:focus-within > .dropdown-menu,
.navbar .has-dropdown.dropdown-open > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
.navbar .dropdown-menu li { margin: 0; }
.navbar .dropdown-menu a {
    display: block;
    padding: 12px 13px;
    border-radius: 9px;
    white-space: normal;
    font-size: 14px;
    line-height: 1.35;
}
.navbar .dropdown-menu a::after { display: none; }
.navbar .dropdown-menu a:hover { background: rgba(36,163,216,.09); }

.mobile-menu .has-dropdown > a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.mobile-menu .has-dropdown > a::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s ease;
}
.mobile-menu .has-dropdown.dropdown-open > a::after { transform: rotate(225deg) translate(-1px,-1px); }
.mobile-menu .dropdown-menu {
    display: none;
    list-style: none;
    padding: 10px 0 2px;
    margin: 0;
}
.mobile-menu .has-dropdown.dropdown-open > .dropdown-menu { display: block; }
.mobile-menu .dropdown-menu li { margin: 8px 0; }
.mobile-menu .dropdown-menu a { font-size: 17px; padding: 5px 10px; opacity: .86; }

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


/* Numeric CAPTCHA */
.captcha-field{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 2px}
.captcha-challenge{min-width:190px;padding:13px 18px;border:1px solid rgba(17,17,17,.14);border-radius:12px;background:#f5f7f8;font-size:20px;font-weight:800;letter-spacing:2px;text-align:center;user-select:none}
.captcha-refresh{width:46px;height:46px;border:1px solid rgba(17,17,17,.14);border-radius:12px;background:#fff;color:#111;cursor:pointer;font-size:20px;display:grid;place-items:center}
.captcha-refresh:hover,.captcha-refresh:focus-visible{background:#111;color:#fff}
.captcha-input{flex:1;min-width:180px}
.captcha-help{width:100%;font-size:12px;color:#777;margin:0}
@media(max-width:600px){.captcha-field{align-items:stretch}.captcha-challenge,.captcha-input{width:100%;flex:1}.captcha-refresh{width:100%}}

/* =========================================================
   UNIFIED INDEX HEADER FOR ALL INNER PAGES
   ========================================================= */
.header.site-header { position:fixed; top:0; left:0; width:100%; z-index:9999; transition:.5s ease; }
.site-header .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; }
.site-header .logo { display:inline-flex; align-items:center; text-decoration:none; font-size:22px; font-weight:800; color:#111; letter-spacing:1px; }
.site-header .logo img { display:block; max-width:160px; height:auto; }
.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:15px; 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:-8px; right:-8px; bottom:-8px; height:10px; z-index:1999; }
.site-header .navbar > ul > li > ul.dropdown-menu { position:absolute; left:50%; top:calc(100% + 1px); transform:translate(-50%,6px); width:min(420px,calc(100vw - 32px)); min-width:300px; max-width:calc(100vw - 28px); 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:13px; 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 { 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; }
.site-header .contact-btn span { position:relative; z-index:2; }
.site-header .contact-btn::before { content:""; position:absolute; inset:0; background:#F1CA03; transform:translateY(100%); transition:.45s ease; }
.site-header .contact-btn:hover::before { transform:translateY(0); }
.site-header .contact-btn:hover { color:#111; transform:translateY(-4px); }
.site-header .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; }
.site-header .menu-btn span { width:22px; height:2px; background:#fff; transition:.4s; }
.site-header .menu-btn.active span:nth-child(1) { transform:translateY(4px) rotate(45deg); }
.site-header .menu-btn.active span:nth-child(2) { transform:translateY(-4px) rotate(-45deg); }
.site-header .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:9998; overflow-y:auto; padding:110px 24px 50px; }
.site-header .mobile-menu.active { opacity:1; visibility:visible; }
.site-header .mobile-menu > ul { list-style:none; text-align:center; width:100%; margin:auto; padding:0; }
.site-header .mobile-menu > ul > li { margin:22px 0; }
.site-header .mobile-menu a { color:#fff; text-decoration:none; font-size:clamp(30px,8vw,42px); font-weight:700; transition:.3s; }
.site-header .mobile-menu a:hover { color:#24A3D8; }
.site-header .mobile-menu .has-dropdown > a { display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.site-header .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; }
.site-header .mobile-menu .has-dropdown.dropdown-open > a::after { transform:rotate(225deg) translate(-1px,-1px); }
.site-header .mobile-menu .dropdown-menu { display:none !important; 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); }
.site-header .mobile-menu .has-dropdown.dropdown-open > .dropdown-menu { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 12px; }
.site-header .mobile-menu .dropdown-menu li { margin:0 !important; }
.site-header .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; }
.site-header .mobile-menu .dropdown-menu a::after { display:none; }
@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:1100px){ .site-header .navbar{display:none}.site-header .menu-btn{display:flex}.site-header .contact-btn{display:none} }
@media (max-width:900px){ .site-header .header-container{width:min(94%,1450px)} }
@media (max-width:600px){ .site-header .header-container{height:70px;padding:0 18px;border-radius:18px}.site-header .logo img{height:34px;max-width:120px}.site-header .menu-btn{width:46px;height:46px}.site-header .mobile-menu .has-dropdown.dropdown-open > .dropdown-menu{grid-template-columns:1fr} }

/* =========================================================
   MASTER SITE HEADER OVERRIDE
   Match the exact rounded/floating header used by index.html/about-livasys.html.
   This override intentionally comes last so pages using pages.css render
   the same header as the homepage instead of the older full-width header.
   ========================================================= */
.header.site-header,
.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:15px;
    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);
}
/* Keep a continuous hover path from the parent link into the dropdown. */
.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 {
    position:absolute;
    left:50%;
    top:calc(100% + 1px);
    transform:translate(-50%,6px);
    width:min(420px,calc(100vw - 32px));
    min-width:300px;
    max-width:calc(100vw - 28px);
    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:13px;
    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 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:14px; }
.site-header .header-right { flex:0 0 auto; }
.site-header .menu-btn {
  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; }
.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); }
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:clamp(21px,6vw,28px); 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:15px !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:13px; }
  .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:45px; }
  .home-page .process-left { position:static; }
  .home-page .timeline { padding-left:30px; }
  .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; }
  .site-header .mobile-menu { padding:94px 18px 30px; }
  .site-header .mobile-menu > ul > li > a { min-height:52px; font-size:22px; }

  .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); }
}

@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}
}

/* Customer reviews page */
.reviews-page-main{background:#f8f8f5}
.reviews-hero{background-image:linear-gradient(118deg,rgba(0,0,0,.98),rgba(8,50,58,.92) 55%,rgba(36,163,216,.55)),repeating-linear-gradient(90deg,transparent 0,transparent 69px,rgba(255,255,255,.07) 70px)}
.reviews-hero h1 em{font-style:normal;color:#F1CA03}
.reviews-content{max-width:1380px}
.reviews-summary{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:28px 32px;margin-bottom:55px;border:1px solid #deded8;border-radius:24px;background:#fff;box-shadow:0 15px 45px rgba(0,0,0,.06)}
.reviews-summary strong{display:block;font-size:clamp(42px,6vw,70px);line-height:.9;letter-spacing:-.07em;margin-top:10px}
.reviews-summary p{margin:10px 0 0;color:#666}
.reviews-label{font:11px 'DM Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:#24A3D8}
.review-source-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:999px;background:#111;color:#fff;font-weight:700}
.review-source-btn:hover{background:#F1CA03;color:#111}
.reviews-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.review-card{background:#fff;border:1px solid #e0e0da;border-radius:24px;padding:30px;min-height:260px;display:flex;flex-direction:column;justify-content:space-between;transition:.3s}
.review-card:hover{transform:translateY(-6px);border-color:#F1CA03;box-shadow:0 18px 45px rgba(0,0,0,.08)}
.review-stars{color:#F1CA03;font-size:19px;letter-spacing:3px}
.review-card blockquote{margin:26px 0;font-size:clamp(20px,2.3vw,29px);line-height:1.3;letter-spacing:-.03em;color:#222}
.review-author{display:flex;flex-direction:column;gap:4px;border-top:1px solid #e5e5e0;padding-top:17px}
.review-author strong{font-size:15px}.review-author span{font-size:12px;color:#777}
.reviews-note{margin-top:35px;padding:20px 24px;border-left:3px solid #F1CA03;background:#fff;color:#666;line-height:1.7;font-size:14px}
.reviews-cta{padding:90px 6%;background:#F1CA03;text-align:center}
.reviews-cta h2{max-width:1000px;margin:0 auto 22px;font-size:clamp(42px,6vw,82px);line-height:.95;letter-spacing:-.07em}
.reviews-cta p{max-width:700px;margin:0 auto 28px;color:#292919}.reviews-cta a{display:inline-flex;padding:14px 22px;border-radius:999px;background:#111;color:#fff;font-weight:700}.reviews-cta a:hover{background:#fff;color:#111}
.testimonial-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.testimonial-view-all{font-size:12px;font-weight:700;border-bottom:1px solid currentColor;padding-bottom:4px}.testimonial-view-all:hover{color:#F1CA03}
@media(max-width:800px){.reviews-grid{grid-template-columns:1fr}.reviews-summary{align-items:flex-start;flex-direction:column}.review-source-btn{width:100%}.testimonial-heading{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.reviews-summary{padding:24px;border-radius:18px}.review-card{padding:24px;border-radius:20px;min-height:0}.review-card blockquote{font-size:21px}.reviews-note{padding:18px}.reviews-cta{padding:65px 6%}}

/* ================= THANK YOU PAGE ================= */
.thankyou-page{min-height:100vh;background:#101010;display:flex;align-items:center;justify-content:center;padding:150px 24px 80px;box-sizing:border-box}
.thankyou-card{width:min(760px,100%);background:#fff;border-radius:28px;padding:64px;text-align:center;box-sizing:border-box;box-shadow:0 30px 80px rgba(0,0,0,.22)}
.thankyou-mark{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 28px;background:#F1CA03;color:#101010;font-size:34px;font-weight:800}
.thankyou-card h1{margin:0 0 18px;font-size:clamp(42px,6vw,76px);line-height:.95;letter-spacing:-.05em;color:#111}
.thankyou-card h1 span{color:#F1CA03}
.thankyou-card p{max-width:580px;margin:0 auto 30px;color:#555;font-size:18px;line-height:1.7}
.thankyou-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.thankyou-actions a{display:inline-flex;align-items:center;justify-content:center;padding:15px 24px;border-radius:999px;text-decoration:none;font-weight:700;font-size:15px}
.thankyou-primary{background:#111;color:#fff}.thankyou-secondary{border:1px solid #ddd;color:#111}
@media(max-width:600px){.thankyou-page{padding:110px 16px 40px}.thankyou-card{padding:40px 22px;border-radius:22px}.thankyou-card p{font-size:16px}.thankyou-actions{flex-direction:column}.thankyou-actions a{width:100%}}

/* 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}