*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    width:100%;
    min-width:0;
    background:#b9b9b9;
}

body{
    width:100%;
    min-width:0;
    min-height:100vh;
    margin:0;
    padding:0;

    background:#b9b9b9;
    color:#111;

    font-family:Arial,Helvetica,sans-serif;

    overflow-x:auto;
    overflow-y:auto;
}

button,
a{
    font-family:Arial,Helvetica,sans-serif;
}


/* =====================================================
   DESKTOP ARTBOARD
   REFERENCE = 1536 x 1024 = 3:2
===================================================== */

.page-frame{
    position:relative;

    width:calc(100vw - 30px);
    max-width:none;

    aspect-ratio:3 / 2;

    margin:15px;

    padding:14px;

    background:#d0d0d0;

    border:1px solid #b7b7b7;

    border-radius:14px;

    box-shadow:
        0 5px 18px rgba(0,0,0,.18),
        inset 0 0 0 1px rgba(255,255,255,.65);
}


/* =====================================================
   INNER WEBSITE
===================================================== */

.website{
    position:relative;

    width:100%;
    height:100%;

    min-height:0;

    overflow:hidden;

    background:#f8f8f7;

    border:1px solid #e7e7e5;

    border-radius:5px;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.9);
}


/* =====================================================
   HEADER
===================================================== */

.header{
    position:absolute;

    z-index:50;

    left:28px;
    right:28px;
    top:14px;

    height:74px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}


/* LOGO */

.logo{
    display:flex;

    align-items:center;

    gap:9px;

    width:220px;
}

.logo strong{
    font-size:18px;

    font-weight:500;

    letter-spacing:-.5px;
}


/* PIXEL LOGO */

.logo-icon{
    width:28px;
    height:28px;

    display:grid;

    grid-template-columns:repeat(3,7px);
    grid-template-rows:repeat(3,7px);

    gap:2px;
}

.logo-icon span{
    display:block;

    background:#e10600;
}

.logo-icon span:nth-child(5){
    background:transparent;
}


/* NAV */

.nav{
    height:48px;

    display:flex;

    align-items:center;

    gap:0;

    padding:5px;

    background:#d4d4d4;

    border-radius:8px;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.10),
        0 1px 2px rgba(0,0,0,.08);
}

.nav a{
    height:38px;

    padding:0 17px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:5px;

    color:#f7f7f7;

    text-decoration:none;

    font-size:13px;

    white-space:nowrap;

    border-radius:7px;
}

.nav a b{
    font-size:11px;
    font-weight:400;
}

.nav .active{
    background:#858585;

    box-shadow:
        inset 0 1px rgba(255,255,255,.25),
        0 2px 4px rgba(0,0,0,.10);
}


/* LOGIN */

.login{
    width:150px;
    height:52px;

    border:0;

    border-radius:8px;

    background:#050505;

    color:#fff;

    font-size:13px;

    cursor:pointer;
}


/* =====================================================
   HERO
   EVERYTHING SCALES WITH THE 3:2 CANVAS
===================================================== */

.hero{
    position:absolute;

    z-index:10;

    left:38px;
    right:38px;

    top:130px;

    height:53%;

    display:grid;

    grid-template-columns:30% 45% 25%;
}


/* =====================================================
   LEFT HEADLINE
===================================================== */

.left-content{
    position:relative;

    z-index:20;
}

.counter{
    margin-bottom:17px;

    font-size:12px;

    letter-spacing:.4px;

    color:#222;
}

.left-content h1{
    margin:0;

    font-size:51px;

    line-height:.98;

    font-weight:400;

    letter-spacing:-2.5px;
}


/* =====================================================
   CENTER AREA
===================================================== */

.center-content{
    position:relative;

    height:100%;
}


/* ORBITS */

.orbit{
    position:absolute;

    left:50%;
    top:50%;

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

    border:1px dashed rgba(255,105,0,.38);

    border-radius:50%;
}

.orbit-one{
    width:475px;
    height:475px;
}

.orbit-two{
    width:335px;
    height:335px;
}

.orbit-dot{
    position:absolute;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#e39a63;

    z-index:4;
}

.dot-1{
    left:5%;
    top:50%;
}

.dot-2{
    right:5%;
    top:50%;
}

.dot-3{
    left:50%;
    top:0;

    transform:translateX(-50%);
}

.dot-4{
    left:50%;
    bottom:0;

    transform:translateX(-50%);
}


/* =====================================================
   DASHBOARD
===================================================== */

.dashboard{
    position:absolute;

    z-index:10;

    left:50%;
    top:68px;

    transform:translateX(-50%);

    width:345px;
    height:365px;

    background:#fff;

    border:1px solid #e1e1e1;

    border-radius:15px;

    overflow:hidden;

    box-shadow:
        0 16px 32px rgba(0,0,0,.12),
        0 2px 8px rgba(0,0,0,.06);
}


/* DASHBOARD HEADER */

.dashboard-header{
    height:75px;

    padding:16px 17px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-bottom:1px solid #e7e7e7;
}

.dashboard-header small{
    display:block;

    margin-bottom:6px;

    font-size:8px;

    color:#888;
}

.dashboard-header h2{
    font-size:17px;

    font-weight:600;
}

.dashboard-header button{
    padding:8px 10px;

    border:1px solid #ddd;

    border-radius:6px;

    background:#fff;

    font-size:9px;
}


/* DASHBOARD BODY */

.dashboard-body{
    height:98px;

    padding:17px 20px;

    display:flex;

    justify-content:space-between;
}

.revenue small{
    display:block;

    margin-bottom:5px;

    font-size:10px;
}

.revenue strong{
    display:block;

    font-size:27px;

    font-weight:500;
}

.revenue span{
    display:block;

    margin-top:7px;

    font-size:9px;

    color:#777;
}

.mini-growth{
    margin-top:24px;

    display:flex;

    flex-direction:column;

    font-size:10px;
}

.mini-growth b{
    font-weight:600;
}

.mini-growth span{
    margin-top:5px;

    color:#666;
}


/* CHART */

.chart{
    position:relative;

    height:143px;

    margin:0 17px;
}

.grid-line{
    position:absolute;

    left:0;
    right:0;

    border-top:1px dashed #ddd;
}

.line-1{top:5px}
.line-2{top:40px}
.line-3{top:75px}
.line-4{top:110px}

.chart svg{
    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:143px;
}

.area{
    fill:url(#chartFill);
}

.line{
    fill:none;

    stroke:#e10600;

    stroke-width:4;

    stroke-linecap:round;
}

.chart circle{
    fill:#e10600;

    stroke:#fff;

    stroke-width:3;
}

.months{
    display:flex;

    justify-content:space-between;

    padding:4px 18px 0;

    font-size:9px;

    color:#444;
}


/* =====================================================
   STAT CARDS
===================================================== */

.stat-card{
    position:absolute;

    z-index:15;

    width:110px;
    height:135px;

    padding:16px;

    background:#fff;

    border:1px solid #eee;

    border-radius:12px;

    box-shadow:
        0 12px 25px rgba(0,0,0,.10),
        0 2px 5px rgba(0,0,0,.05);
}

.stat-card small{
    display:block;

    margin-top:12px;

    font-size:9px;

    color:#444;
}

.stat-card strong{
    display:block;

    margin-top:7px;

    font-size:21px;

    font-weight:500;
}

.orange-icon{
    width:34px;
    height:34px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:8px;

    background:#e10600;

    color:#fff;

    font-size:20px;
}

.card-growth{
    left:0;
    top:25px;
}

.card-client{
    right:0;
    top:25px;
}


/* LEADS */

.card-leads{
    left:0;
    bottom:25px;
}

.orange-bars{
    height:34px;

    display:flex;

    align-items:end;

    gap:3px;

    padding-left:4px;
}

.orange-bars i{
    width:7px;

    background:#e10600;

    border-radius:2px 2px 0 0;
}

.orange-bars i:nth-child(1){
    height:12px;
}

.orange-bars i:nth-child(2){
    height:22px;
}

.orange-bars i:nth-child(3){
    height:30px;
}


/* CONVERSION */

.card-conversion{
    right:0;
    bottom:22px;
}

.progress-ring{
    position:relative;

    width:47px;
    height:47px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        conic-gradient(
            #e10600 0deg 281deg,
            #e7e7e7 281deg 360deg
        );
}

.progress-ring:after{
    content:"";

    position:absolute;

    width:35px;
    height:35px;

    background:#fff;

    border-radius:50%;
}

.progress-ring span{
    position:relative;

    z-index:2;

    font-size:11px;

    font-weight:600;
}


/* =====================================================
   RIGHT GROWTH
===================================================== */

.right-content{
    position:relative;

    z-index:20;

    padding-top:4px;

    text-align:center;
}

.growth-heading{
    display:flex;

    align-items:baseline;

    justify-content:center;

    white-space:nowrap;
}

.growth-heading span{
    font-size:55px;

    font-weight:300;

    color:#777;
}

.growth-heading strong{
    font-size:51px;

    font-weight:500;

    letter-spacing:-3px;
}

.growth-heading small{
    margin-left:7px;

    font-size:19px;

    color:#333;
}

.right-content p{
    width:285px;

    margin:15px auto;

    font-size:12px;

    line-height:1.45;

    color:#555;
}


/* =====================================================
   IMPORTANT:
   GIANT SELL / MEK
   NOW FIXED TO LOWER HERO AREA
===================================================== */

.giant{
    position:absolute;

    z-index:2;

    color:#fff;

    font-family:
        "Courier New",
        "Lucida Console",
        monospace;

    font-size:185px;

    line-height:.70;

    font-weight:700;

    letter-spacing:-15px;

    white-space:nowrap;

    opacity:.97;

    pointer-events:none;

    user-select:none;
}


/*
   SELL is intentionally ABOVE the bottom controls.
   This removes the giant blank gap.
*/

.giant-sell{
    left:28px;

    bottom:122px;
}


/*
   MEK is on the lower-right,
   exactly opposite SELL.
*/

.giant-mek{
    right:28px;

    bottom:28px;
}


/* =====================================================
   BOTTOM LEFT CONTENT
===================================================== */

.bottom-left{
    position:absolute;

    z-index:25;

    left:38px;

    bottom:34px;

    width:430px;
}

.bottom-left p{
    width:420px;

    font-size:12px;

    line-height:1.42;

    color:#444;
}

/* =====================================================
   HERO CTA BUTTONS
   These are real links layered over the hero banner.
   Book a Meeting -> booking.php
   Contact Us     -> contact.php
===================================================== */

.hero-cta-buttons{
    position:relative;
    z-index:60;

    display:flex;
    gap:16px;
    margin-top:17px;
    pointer-events:auto;
}

.hero-cta{
    width:159px;
    height:49px;

    border:0;
    border-radius:8px;

    font-size:14px;
    font-weight:600;

    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;
    box-sizing:border-box;

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

.hero-cta:hover{
    transform:translateY(-2px);
    opacity:.94;
}

.hero-cta:focus-visible{
    outline:3px solid rgba(255,255,255,.9);
    outline-offset:3px;
}

.hero-cta-book{
    background:#e10600;
    color:#fff !important;
}

.hero-cta-contact{
    background:#bdbdbd;
    color:#fff !important;
}


/* =====================================================
   BOTTOM RIGHT
===================================================== */

.bottom-right{
    position:absolute;

    z-index:25;

    right:34px;

    bottom:92px;

    width:310px;

    text-align:center;
}

.bottom-right p{
    color:#555;

    font-size:12px;

    line-height:1.45;
}


/* =====================================================
   SOCIAL
===================================================== */

.social{
    position:absolute;

    z-index:40;

    right:28px;

    top:350px;

    width:57px;

    background:#e4e4e4;

    border-radius:9px;

    overflow:hidden;

    box-shadow:
        0 2px 5px rgba(0,0,0,.07);
}

.social .social-item{
    width:57px;
    height:55px;

    display:flex;

    align-items:center;
    justify-content:center;

    color:#777;

    text-decoration:none;

    font-size:21px;

    transition:
        transform .3s ease,
        background .3s ease;
}

.social .social-item span{
    display:none;
}

.social .social-item:hover{
    background:#dcdcdc;

    color:#111;
}


/* =====================================================
   SCROLL SHAPE
   IMPORTANT: BOTTOM CENTER
===================================================== */

.scroll{
    position:absolute;

    z-index:45;

    left:50%;

    bottom:-1px;

    transform:translateX(-50%);

    width:330px;

    height:72px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:1px;

    background:#dededc;

    color:#555;

    font-size:11px;

    text-align:center;

    border-radius:
        100px 100px 0 0;
}


/* left organic extension */

.scroll:before{
    content:"";

    position:absolute;

    z-index:-1;

    left:-80px;

    bottom:0;

    width:110px;

    height:45px;

    background:#dededc;

    border-radius:
        100% 0 0 0;
}


/* right organic extension */

.scroll:after{
    content:"";

    position:absolute;

    z-index:-1;

    right:-80px;

    bottom:0;

    width:110px;

    height:45px;

    background:#dededc;

    border-radius:
        0 100% 0 0;
}

.mouse{
    position:relative;

    z-index:3;

    font-size:18px;

    margin-bottom:1px;
}

.scroll span{
    position:relative;

    z-index:3;
}


/* =====================================================
   LARGE DESKTOP
===================================================== */

@media (min-width:1450px){

    .left-content h1{
        font-size:59px;
    }

    .giant{
        font-size:205px;

        letter-spacing:-17px;
    }

    .giant-sell{
        bottom:122px;
    }

    .giant-mek{
        bottom:27px;
    }
}


/* =====================================================
   VERY LARGE DESKTOP
===================================================== */

@media (min-width:1750px){

    .left-content h1{
        font-size:65px;
    }

    .giant{
        font-size:225px;

        letter-spacing:-18px;
    }
}


/* =====================================================
   PHONE + DESKTOP MODE
   DO NOT CREATE A TALL PORTRAIT WEBSITE
===================================================== */

@media (max-width:900px){

    body{
        min-width:0;

        overflow-x:auto;
    }

    .page-frame{
        width:calc(100vw - 20px);

        margin:10px;

        padding:10px;

        aspect-ratio:3 / 2;

        border-radius:11px;
    }

    .website{
        width:100%;
        height:100%;
    }

    .header{
        left:20px;
        right:20px;
        top:10px;

        height:56px;
    }

    .logo{
        width:auto;

        gap:5px;
    }

    .logo strong{
        font-size:11px;
    }

    .logo-icon{
        width:19px;
        height:19px;

        grid-template-columns:repeat(3,5px);
        grid-template-rows:repeat(3,5px);

        gap:2px;
    }

    .nav{
        height:34px;

        padding:3px;

        border-radius:6px;
    }

    .nav a{
        height:28px;

        padding:0 9px;

        font-size:8px;

        border-radius:5px;
    }

    .login{
        width:80px;
        height:34px;

        border-radius:5px;

        font-size:8px;
    }

    .hero{
        left:20px;
        right:20px;

        top:82px;

        height:54%;
    }

    .counter{
        margin-bottom:10px;

        font-size:7px;
    }

    .left-content h1{
        font-size:29px;

        line-height:.98;

        letter-spacing:-1.4px;
    }

    .orbit-one{
        width:230px;
        height:230px;
    }

    .orbit-two{
        width:165px;
        height:165px;
    }

    .dashboard{
        width:180px;
        height:190px;

        top:35px;

        border-radius:8px;
    }

    .dashboard-header{
        height:39px;

        padding:8px;
    }

    .dashboard-header small{
        margin-bottom:2px;

        font-size:4px;
    }

    .dashboard-header h2{
        font-size:9px;
    }

    .dashboard-header button{
        padding:4px 5px;

        font-size:5px;
    }

    .dashboard-body{
        height:51px;

        padding:8px 10px;
    }

    .revenue small{
        margin-bottom:2px;

        font-size:5px;
    }

    .revenue strong{
        font-size:14px;
    }

    .revenue span{
        margin-top:2px;

        font-size:4px;
    }

    .mini-growth{
        margin-top:12px;

        font-size:5px;
    }

    .mini-growth span{
        margin-top:2px;
    }

    .chart{
        height:73px;

        margin:0 9px;
    }

    .chart svg{
        height:73px;
    }

    .months{
        padding:2px 9px 0;

        font-size:4px;
    }

    .stat-card{
        width:58px;
        height:71px;

        padding:8px;

        border-radius:7px;
    }

    .stat-card small{
        margin-top:6px;

        font-size:5px;
    }

    .stat-card strong{
        margin-top:3px;

        font-size:11px;
    }

    .orange-icon{
        width:18px;
        height:18px;

        border-radius:4px;

        font-size:10px;
    }

    .card-growth{
        top:13px;
    }

    .card-client{
        top:13px;
    }

    .card-leads{
        bottom:13px;
    }

    .card-conversion{
        bottom:12px;
    }

    .progress-ring{
        width:25px;
        height:25px;
    }

    .progress-ring:after{
        width:19px;
        height:19px;
    }

    .progress-ring span{
        font-size:6px;
    }

    .right-content{
        padding-top:0;
    }

    .growth-heading span{
        font-size:28px;
    }

    .growth-heading strong{
        font-size:27px;

        letter-spacing:-1px;
    }

    .growth-heading small{
        margin-left:3px;

        font-size:9px;
    }

    .right-content p{
        width:145px;

        margin:7px auto;

        font-size:6px;

        line-height:1.4;
    }

    .giant{
        font-size:90px;

        letter-spacing:-8px;

        line-height:.72;
    }

    .giant-sell{
        left:18px;

        bottom:69px;
    }

    .giant-mek{
        right:18px;

        bottom:16px;
    }

    .bottom-left{
        left:20px;

        bottom:18px;

        width:205px;
    }

    .bottom-left p{
        width:200px;

        font-size:6px;

        line-height:1.4;
    }

    .buttons{
        gap:7px;

        margin-top:8px;
    }

    .buttons button{
        width:88px;
        height:27px;

        border-radius:5px;

        font-size:7px;
    }

    .bottom-right{
        right:20px;

        bottom:48px;

        width:150px;
    }

    .bottom-right p{
        font-size:6px;

        line-height:1.4;
    }

    .social{
        right:14px;

        top:210px;

        width:30px;

        border-radius:5px;
    }

    .social .social-item{
        width:30px;
        height:30px;

        font-size:11px;
    }

    .scroll{
        width:170px;

        height:38px;

        font-size:6px;
    }

    .scroll:before,
    .scroll:after{
        width:55px;
        height:24px;
    }

    .scroll:before{
        left:-40px;
    }

    .scroll:after{
        right:-40px;
    }

    .mouse{
        font-size:10px;
    }
}


/* =====================================================
   IMAGE REFERENCE UPDATES — ADDITIVE ONLY
   Existing Sell Mek design remains unchanged
===================================================== */

/* Extra dashboard background circles */
.center-content::before,
.center-content::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    pointer-events:none;
    z-index:1;
}

.center-content::before{
    width:590px;
    height:590px;
    border:1px dashed rgba(255,105,0,.18);
}

.center-content::after{
    width:420px;
    height:420px;
    border:1px dashed rgba(255,105,0,.22);
}

/* Make the existing orbit circles feel softer and layered */
.orbit{
    z-index:2;
    box-shadow:0 0 0 1px rgba(255,255,255,.15);
}

.orbit-one{
    animation:orbitPulse 5s ease-in-out infinite;
}

.orbit-two{
    animation:orbitPulse 5s ease-in-out infinite 1.2s;
}

@keyframes orbitPulse{
    0%,100%{
        opacity:.55;
        transform:translate(-50%,-50%) scale(1);
    }
    50%{
        opacity:1;
        transform:translate(-50%,-50%) scale(1.025);
    }
}

/* Smooth chart entrance */
.chart .line{
    stroke-dasharray:700;
    stroke-dashoffset:700;
    animation:drawGrowthLine 2.1s ease forwards .3s;
}

@keyframes drawGrowthLine{
    to{stroke-dashoffset:0;}
}

/* Sell Mek logo refinement — no HTML structure changed */
.logo strong{
    font-size:20px;
    font-weight:700;
    letter-spacing:-1px;
}

.logo strong::first-letter{
    color:#e10600;
}

.logo-icon{
    transform:rotate(-3deg);
    transition:transform .35s ease;
}

.logo:hover .logo-icon{
    transform:rotate(0deg) scale(1.06);
}

/* Social viewport: only one/two icons visible while scrolling */
.social{
    height:165px;
    background:linear-gradient(180deg,#e7e7e7,#dddddd);
}

.social::before,
.social::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:22px;
    z-index:3;
    pointer-events:none;
}

.social::before{
    top:0;
    background:linear-gradient(#e7e7e7,transparent);
}

.social::after{
    bottom:0;
    background:linear-gradient(transparent,#dddddd);
}

.social .social-item{
    position:relative;
    z-index:1;
    transition:color .25s ease, background .25s ease;
}

/* Mobile sizes */
@media (max-width:900px){
    .center-content::before{
        width:480px;
        height:480px;
    }

    .center-content::after{
        width:360px;
        height:360px;
    }
}


/* =====================================================
   REAL SOCIAL MEDIA ICONS
===================================================== */

.social .social-item i{
    font-size:20px;
    line-height:1;
    pointer-events:none;
}

.social .instagram:hover i{ color:#e1306c; }
.social .facebook:hover i{ color:#1877f2; }
.social .x-social:hover i{ color:#111; }
.social .telegram:hover i{ color:#229ed9; }


/* =====================================================
   FOOTER
===================================================== */

.site-footer{
    position:relative;
    z-index:60;
    margin-top:100vh;
    padding:55px 38px 22px;
    background:#111;
    color:#fff;
    overflow:hidden;
}

.footer-main{
    max-width:1400px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.35fr 1fr 1fr;
    gap:60px;
    padding-bottom:48px;
}

.footer-logo{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
}

.footer-logo .logo-icon{
    flex:0 0 auto;
}

.footer-logo strong{
    font-size:22px;
    letter-spacing:-1px;
}

.footer-brand p{
    max-width:360px;
    color:#aaa;
    font-size:13px;
    line-height:1.7;
}

.footer-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.site-footer h4{
    margin:0 0 17px;
    color:#fff;
    font-size:13px;
    font-weight:600;
}

.footer-links a{
    display:block;
    width:max-content;
    margin-bottom:11px;
    color:#999;
    text-decoration:none;
    font-size:13px;
    transition:color .25s ease;
}

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

.footer-contact{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.footer-contact > a{
    color:#e10600;
    text-decoration:none;
    font-size:15px;
    margin-bottom:20px;
}

.footer-cta{
    border:0;
    border-radius:7px;
    padding:13px 18px;
    background:#e10600;
    color:#fff;
    font-size:13px;
    cursor:pointer;
}

.footer-cta span{
    margin-left:7px;
    font-size:16px;
}

.footer-bottom{
    max-width:1400px;
    margin:0 auto;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.12);
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:#777;
    font-size:11px;
}


/* FOOTER MOBILE */
@media(max-width:900px){
    .site-footer{
        margin-top:40px;
        padding:45px 25px 20px;
    }

    .footer-main{
        grid-template-columns:1fr;
        gap:38px;
    }
}

@media(max-width:560px){
    .footer-links{
        grid-template-columns:1fr 1fr;
    }

    .footer-bottom{
        flex-direction:column;
    }
}


/* =====================================================
   RESULTS + CUSTOMER REVIEWS SECTION
===================================================== */

.results-section,
.reviews-section{
    position:relative;
    z-index:70;
    background:#f7f7f5;
    padding:105px 38px;
}

.results-section{
    margin-top:100vh;
}

.section-intro{
    max-width:720px;
    margin:0 auto 55px;
    text-align:center;
}

.section-tag{
    display:inline-block;
    margin-bottom:15px;
    color:#e10600;
    font-size:10px;
    font-weight:700;
    letter-spacing:2px;
}

.section-intro h2{
    margin:0;
    color:#111;
    font-size:clamp(48px,7vw,105px);
    line-height:.9;
    font-weight:500;
    letter-spacing:-5px;
}

.section-intro p{
    max-width:480px;
    margin:24px auto 0;
    color:#666;
    font-size:14px;
    line-height:1.65;
}

.results-grid{
    max-width:1250px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.result-card{
    position:relative;
    min-height:270px;
    padding:25px;
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:15px;
    box-shadow:0 14px 35px rgba(0,0,0,.06);
    overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;
}

.result-card:hover{
    transform:translateY(-7px);
    box-shadow:0 22px 45px rgba(0,0,0,.10);
}

.result-card::after{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    right:-80px;
    bottom:-85px;
    border:1px dashed rgba(255,105,0,.22);
    border-radius:50%;
}

.result-icon{
    width:42px;
    height:42px;
    margin-bottom:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#e10600;
    color:#fff;
    font-size:22px;
}

.result-card small{
    display:block;
    color:#777;
    font-size:11px;
}

.result-card strong{
    display:block;
    margin:8px 0 12px;
    color:#111;
    font-size:42px;
    line-height:1;
    font-weight:500;
    letter-spacing:-2px;
}

.result-card p{
    position:relative;
    z-index:2;
    margin:0;
    color:#777;
    font-size:11px;
    line-height:1.55;
}


/* CUSTOMER REVIEWS */

.reviews-section{
    padding-top:45px;
    padding-bottom:105px;
}

.reviews-intro{
    margin-bottom:45px;
}

.reviews-stage{
    position:relative;
    width:min(100%,700px);
    height:350px;
    margin:0 auto;
    overflow:hidden;
}

.review-track{
    position:relative;
    width:100%;
    height:100%;
}

.review-card{
    position:absolute;
    inset:0;
    padding:42px 50px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#111;
    color:#fff;
    border-radius:18px;
    box-shadow:0 25px 60px rgba(0,0,0,.16);
    opacity:0;
    transform:translateY(110%);
    transition:
        transform .8s cubic-bezier(.22,.8,.25,1),
        opacity .65s ease;
}

.review-card.active{
    opacity:1;
    transform:translateY(0);
}

.review-card.exit{
    opacity:0;
    transform:translateY(-110%);
}

.review-quote{
    position:absolute;
    top:15px;
    right:28px;
    color:#e10600;
    font-size:100px;
    line-height:1;
    font-family:Georgia,serif;
    opacity:.8;
}

.review-stars{
    margin-bottom:18px;
    color:#e10600;
    font-size:13px;
    letter-spacing:3px;
}

.review-card > p{
    position:relative;
    z-index:2;
    max-width:560px;
    margin:0;
    font-size:19px;
    line-height:1.6;
    letter-spacing:-.3px;
}

.review-person{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:25px;
}

.review-avatar{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#e10600;
    color:#fff;
    font-weight:600;
}

.review-person strong,
.review-person small{
    display:block;
}

.review-person strong{
    font-size:12px;
    font-weight:600;
}

.review-person small{
    margin-top:4px;
    color:#999;
    font-size:10px;
}

.review-indicators{
    position:absolute;
    left:50%;
    bottom:12px;
    z-index:10;
    display:flex;
    gap:7px;
    transform:translateX(-50%);
}

.review-indicators span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(255,255,255,.35);
    transition:all .3s ease;
}

.review-indicators span.active{
    width:22px;
    border-radius:10px;
    background:#e10600;
}


/* RESPONSIVE RESULTS + REVIEWS */

@media(max-width:1000px){
    .results-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:900px){
    .results-section{
        margin-top:40px;
        padding:75px 25px;
    }

    .reviews-section{
        padding:35px 25px 75px;
    }
}

@media(max-width:600px){
    .section-intro h2{
        letter-spacing:-2.5px;
    }

    .results-grid{
        grid-template-columns:1fr;
    }

    .result-card{
        min-height:220px;
    }

    .reviews-stage{
        height:400px;
    }

    .review-card{
        padding:35px 28px;
    }

    .review-card > p{
        font-size:16px;
    }
}

/* =====================================================
   MOBILE VIEWPORT FIX
   Desktop design logic remains unchanged.
===================================================== */

@media (max-width: 900px){

    html,
    body{
        width:100%;
        min-width:0;
        margin:0;
        padding:0;
        overflow-x:hidden;
    }

    /* Remove mobile outer gap */
    .page-frame{
        width:100vw;
        max-width:none;
        margin:0;
        padding:0;
        border:0;
        border-radius:0;
        box-shadow:none;
        aspect-ratio:3 / 2;
    }

    .website{
        width:100%;
        height:100%;
        min-width:0;
        border-radius:0;
        border:0;
        overflow:hidden;
    }

    /* Keep existing desktop composition logic,
       but make it use the complete mobile viewport */
    .header{
        left:20px;
        right:20px;
    }

    .hero{
        left:20px;
        right:20px;
    }

    .social{
        right:14px;
    }

    .bottom-left{
        left:20px;
    }

    .bottom-right{
        right:20px;
    }

    .scroll{
        left:50%;
    }
}


/* Very small phones */
@media (max-width: 560px){

    html,
    body{
        width:100vw;
        overflow-x:hidden;
    }

    .page-frame,
    .website{
        width:100vw;
    }
}


/* =====================================================
   MOBILE GAP FIX
   Keep desktop layout/design logic unchanged.
===================================================== */

@media (max-width:900px){

    .site-footer{
        margin-top:40px !important;
    }

    .reviews-section{
        margin-top:0 !important;
    }

}


/* =====================================================
   UPDATED: PROVEN RESULTS + CLIENT REVIEWS SIDE BY SIDE
   This block is placed at the end to override old styles.
===================================================== */

/* Old sections are no longer used */
.results-section,
.reviews-section{
    display:none !important;
}

.proof-section{
    position:relative;
    z-index:10;
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    margin:0;
    padding:0;
    overflow:hidden;
}

/* LEFT: RESULTS */
.proof-results{
    padding:72px 5.5vw 78px;
    background:#e10600;
    color:#fff;
}

.proof-heading{
    margin-bottom:38px;
}

.proof-tag{
    display:inline-block;
    position:relative;
    padding-left:28px;
    margin-bottom:16px;
    font-size:10px;
    font-weight:700;
    letter-spacing:3px;
    color:rgba(255,255,255,.72);
}

.proof-tag::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:19px;
    height:2px;
    background:#e10600;
    transform:translateY(-50%);
}

.proof-heading h2{
    margin:0;
    font-size:clamp(34px,3.6vw,58px);
    line-height:1.08;
    font-weight:700;
    letter-spacing:-2px;
}

.proof-heading > p{
    margin:15px 0 0;
    font-size:14px;
    line-height:1.6;
    color:rgba(255,255,255,.72);
}

.case-results{
    display:grid;
    gap:20px;
}

.case-card{
    padding:29px 30px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:18px;
    background:rgba(255,255,255,.07);
    box-shadow:0 14px 35px rgba(0,0,0,.12);
}

.case-label{
    display:block;
    margin-bottom:16px;
    color:#f2b277;
    font-size:9px;
    font-weight:700;
    letter-spacing:2.3px;
}

.case-card h3{
    margin:0 0 14px;
    color:#fff;
    font-size:clamp(18px,1.8vw,25px);
    line-height:1.35;
}

.case-card > p{
    margin:0;
    color:rgba(255,255,255,.67);
    font-size:13px;
    line-height:1.75;
}

.case-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:25px;
}

.case-stats strong{
    display:block;
    color:#fff;
    font-size:clamp(21px,2vw,31px);
    line-height:1;
}

.case-stats span{
    display:block;
    margin-top:7px;
    color:rgba(255,255,255,.58);
    font-size:9px;
    line-height:1.35;
}

/* RIGHT: REVIEWS */
.proof-reviews{
    padding:72px 5.5vw 78px;
    background:#f6f6f4;
}

.proof-reviews .proof-tag{
    color:#747474;
}

.proof-reviews .proof-heading h2{
    color:#161616;
}

.proof-reviews .proof-heading h2 span{
    color:#e10600;
}

.client-review-list{
    display:grid;
    gap:17px;
}

.client-review-card{
    padding:24px 27px;
    border:1px solid #e7e7e7;
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 28px rgba(0,0,0,.055);
    transition:transform .3s ease,box-shadow .3s ease;
}

.client-review-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 38px rgba(0,0,0,.09);
}

.stars{
    margin-bottom:13px;
    color:#f0a12a;
    font-size:13px;
    letter-spacing:3px;
}

.client-review-card > p{
    margin:0;
    color:#565656;
    font-size:13px;
    font-style:italic;
    line-height:1.7;
}

.client-person{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:18px;
}

.client-avatar{
    width:43px;
    height:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 43px;
    border-radius:50%;
    background:#e10600;
    color:#fff;
    font-size:11px;
    font-weight:700;
}

.client-person strong,
.client-person span{
    display:block;
}

.client-person strong{
    color:#202020;
    font-size:13px;
}

.client-person span{
    margin-top:4px;
    color:#888;
    font-size:10px;
}

/* IMPORTANT: remove the large desktop-mode gap before footer */
.site-footer{
    margin-top:0 !important;
    min-height:auto !important;
}

/* Tablet: still side-by-side, with tighter spacing */
@media (max-width:1100px){
    .proof-results,
    .proof-reviews{
        padding:58px 4vw 62px;
    }

    .case-card{
        padding:24px;
    }

    .client-review-card{
        padding:21px;
    }
}

/* Small screens: stack safely */
@media (max-width:800px){
    .proof-section{
        grid-template-columns:1fr;
    }

    .proof-results,
    .proof-reviews{
        padding:55px 7vw;
    }
}

@media (max-width:520px){
    .proof-results,
    .proof-reviews{
        padding:48px 20px;
    }

    .proof-heading h2{
        letter-spacing:-1px;
    }

    .case-card,
    .client-review-card{
        padding:22px 20px;
    }

    .case-stats{
        grid-template-columns:1fr;
        gap:16px;
    }
}


/* =====================================================
   FINAL DARK BLUE FULL-PAGE THEME
   Inspired by the reference background
===================================================== */

:root{
    --dark-bg:#061426;
    --dark-bg-2:#081a31;
    --dark-panel:#0b203b;
    --blue:#e10600;
    --blue-bright:#4d7fe0;
    --text-light:#ffffff;
    --muted-light:#8fa2bd;
}

/* Full page background */
html,
body{
    background:var(--dark-bg) !important;
    color:var(--text-light);
}

body{
    background-image:
        radial-gradient(circle at 20% 0%, rgba(49,84,155,.20), transparent 32%),
        radial-gradient(circle at 85% 20%, rgba(32,79,156,.12), transparent 30%) !important;
}

.page-frame{
    background:var(--dark-bg) !important;
    border-color:rgba(88,132,204,.16) !important;
    box-shadow:
        0 10px 30px rgba(0,0,0,.25),
        inset 0 0 0 1px rgba(72,115,183,.06) !important;
}

.website{
    background-color:var(--dark-bg) !important;
    background-image:
        linear-gradient(rgba(69,103,160,.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(69,103,160,.09) 1px, transparent 1px),
        radial-gradient(circle at 72% 25%, rgba(31,74,145,.16), transparent 34%) !important;
    background-size:58px 58px, 58px 58px, auto !important;
    border-color:rgba(76,117,180,.14) !important;
    box-shadow:inset 0 0 0 1px rgba(86,128,195,.05) !important;
}

/* Header + hero text for dark background */
.logo strong,
.nav a,
.counter,
.left-content h1{
    color:var(--text-light) !important;
}

.nav{
    background:rgba(10,28,53,.86) !important;
    border:1px solid rgba(92,135,204,.18);
    box-shadow:0 10px 30px rgba(0,0,0,.18) !important;
}

.nav a.active{
    background:rgba(49,84,155,.65) !important;
    color:#fff !important;
}

.login{
    background:rgba(49,84,155,.95) !important;
    color:#fff !important;
}

.right-content p,
.bottom-left p,
.bottom-right p{
    color:var(--muted-light) !important;
}

.giant{
    color:rgba(255,255,255,.045) !important;
    opacity:1 !important;
}

.contact{
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.13) !important;
}

.dashboard,
.stat-card{
    background:rgba(255,255,255,.93);
}

.social{
    background:rgba(7,20,38,.82) !important;
    border-color:rgba(84,127,198,.22) !important;
}

.scroll{
    color:var(--muted-light) !important;
}

/* Footer directly after content */
.site-footer{
    margin-top:0 !important;
    background:#050e1c !important;
    border-top:1px solid rgba(85,125,185,.18);
}


/* =====================================================
   RESULTS + REVIEWS: VERTICAL PAGE FLOW
===================================================== */

.results-section,
.reviews-section,
.proof-section{
    display:none !important;
}

.results-reviews-section{
    position:relative;
    width:100%;
    margin:0;
    padding:0;
    color:var(--text-light);
    background:
        linear-gradient(rgba(69,103,160,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(69,103,160,.08) 1px, transparent 1px),
        linear-gradient(180deg, var(--dark-bg), var(--dark-bg-2));
    background-size:58px 58px, 58px 58px, auto;
    overflow:hidden;
}

.results-reviews-section::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    right:-350px;
    top:100px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(49,84,155,.18), transparent 68%);
    pointer-events:none;
}

.our-results-wrap,
.proven-results-wrap,
.reviews-wrap{
    position:relative;
    z-index:1;
    width:min(1240px, calc(100% - 64px));
    margin:0 auto;
}

.our-results-wrap{
    padding:85px 0 55px;
}

.proven-results-wrap{
    padding:35px 0 70px;
}

.reviews-wrap{
    padding:70px 0 90px;
    border-top:1px solid rgba(103,141,200,.14);
}

.dark-section-heading{
    max-width:760px;
    margin-bottom:38px;
}

.dark-section-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:15px;
    color:#83a6e8;
    font-size:10px;
    font-weight:700;
    letter-spacing:3px;
}

.dark-section-tag::before{
    content:"";
    width:22px;
    height:2px;
    background:#4d7fe0;
    box-shadow:0 0 12px rgba(77,127,224,.7);
}

.dark-section-heading h2{
    margin:0;
    color:#fff;
    font-size:clamp(38px, 5vw, 68px);
    line-height:1.03;
    letter-spacing:-2.5px;
    font-weight:700;
}

.dark-section-heading h2 span{
    color:#7ca4ed;
}

.dark-section-heading p{
    margin:18px 0 0;
    color:var(--muted-light);
    font-size:15px;
    line-height:1.7;
}


/* TOP COUNTERS */
.results-counter-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
}

.dark-result-card{
    min-height:170px;
    padding:30px 25px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    border:1px solid rgba(112,150,209,.16);
    border-radius:18px;
    background:
        linear-gradient(135deg, rgba(34,69,123,.45), rgba(8,25,48,.78));
    box-shadow:0 20px 50px rgba(0,0,0,.15);
    transition:transform .3s ease, border-color .3s ease;
}

.dark-result-card:hover{
    transform:translateY(-6px);
    border-color:rgba(113,159,235,.42);
}

.result-number{
    display:block;
    color:#fff;
    font-size:clamp(34px, 4vw, 58px);
    line-height:1;
    font-weight:700;
    letter-spacing:-2px;
}

.result-label{
    display:block;
    margin-top:13px;
    color:#8093ae;
    font-size:11px;
    font-weight:600;
    letter-spacing:.4px;
}


/* CASE STUDIES BELOW OUR RESULTS */
.compact-heading h2{
    font-size:clamp(34px, 4vw, 56px);
}

.new-case-results{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.new-case-results .case-card{
    padding:36px;
    background:linear-gradient(145deg, rgba(16,42,76,.96), rgba(8,25,48,.96));
    border:1px solid rgba(102,143,204,.16);
    border-radius:20px;
    box-shadow:0 20px 45px rgba(0,0,0,.16);
}

.new-case-results .case-label{
    color:#82a8ee;
}

.new-case-results .case-card h3{
    color:#fff;
}

.new-case-results .case-card > p{
    color:#8ea1ba;
}

.new-case-results .case-stats{
    border-top:1px solid rgba(113,151,207,.13);
    padding-top:24px;
}

.new-case-results .case-stats strong{
    color:#fff;
}

.new-case-results .case-stats span{
    color:#7589a5;
}


/* REVIEWS: ONE UNDER ANOTHER */
.reviews-heading-new{
    margin-bottom:34px;
}

.vertical-reviews{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    max-width:980px;
}

.vertical-reviews .client-review-card{
    padding:30px 34px;
    background:linear-gradient(135deg, rgba(17,43,77,.88), rgba(7,21,40,.94));
    border:1px solid rgba(104,146,210,.16);
    border-radius:18px;
    box-shadow:0 18px 40px rgba(0,0,0,.14);
}

.vertical-reviews .client-review-card:hover{
    transform:translateX(6px);
    border-color:rgba(112,157,231,.34);
}

.vertical-reviews .stars{
    color:#ffb14a;
}

.vertical-reviews .client-review-card > p{
    max-width:820px;
    color:#c0cce0;
    font-size:15px;
    line-height:1.8;
}

.vertical-reviews .client-avatar{
    background:linear-gradient(135deg, #e10600, #5f8ee4);
    box-shadow:0 8px 20px rgba(49,84,155,.35);
}

.vertical-reviews .client-person strong{
    color:#fff;
}

.vertical-reviews .client-person span{
    color:#7f94b0;
}


/* RESPONSIVE */
@media(max-width:900px){
    .results-counter-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .new-case-results{
        grid-template-columns:1fr;
    }

    .our-results-wrap,
    .proven-results-wrap,
    .reviews-wrap{
        width:min(100% - 44px, 1240px);
    }

    .our-results-wrap{
        padding-top:65px;
    }
}

@media(max-width:560px){
    .results-counter-grid{
        grid-template-columns:1fr;
    }

    .dark-result-card{
        min-height:135px;
    }

    .our-results-wrap,
    .proven-results-wrap,
    .reviews-wrap{
        width:calc(100% - 32px);
    }

    .dark-section-heading h2{
        letter-spacing:-1.5px;
    }

    .new-case-results .case-card,
    .vertical-reviews .client-review-card{
        padding:24px 20px;
    }

    .case-stats{
        grid-template-columns:1fr;
    }
}


/* =====================================================
   RESULTS + REVIEWS COLOR UPDATE: WHITE + ORANGE
===================================================== */
.results-reviews-section{
    background:
        linear-gradient(rgba(255,101,0,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,101,0,.07) 1px, transparent 1px),
        linear-gradient(180deg, var(--dark-bg), var(--dark-bg-2));
}
.results-reviews-section::before{
    background:radial-gradient(circle, rgba(255,101,0,.16), transparent 68%);
}
.reviews-wrap{border-top-color:rgba(255,101,0,.18);}
.dark-section-tag{color:#ff9a5a;}
.dark-section-tag::before{
    background:var(--orange);
    box-shadow:0 0 12px rgba(255,101,0,.65);
}
.dark-section-heading h2 span{color:var(--orange);}
.dark-result-card{
    border-color:rgba(255,101,0,.16);
    background:linear-gradient(135deg, rgba(75,38,18,.48), rgba(20,20,20,.92));
}
.dark-result-card:hover{border-color:rgba(255,101,0,.48);}
.result-label{color:#d0b09b;}
.vertical-reviews .client-review-card{
    background:linear-gradient(135deg, rgba(62,35,20,.88), rgba(20,20,20,.96));
    border-color:rgba(255,101,0,.18);
}
.vertical-reviews .client-review-card:hover{border-color:rgba(255,101,0,.42);}
.vertical-reviews .client-avatar{
    background:linear-gradient(135deg, var(--orange), #ff9a5a);
    box-shadow:0 8px 20px rgba(255,101,0,.3);
}

/* WHY WE ARE TRUSTED – enhanced cards */
.results-counter-grid .dark-result-card{
    position:relative;
    overflow:hidden;
    justify-content:center;
    isolation:isolate;
    border:1px solid rgba(255,101,0,.28);
    background:linear-gradient(145deg,#fff 0%,#fff8f3 100%);
    box-shadow:0 18px 45px rgba(255,101,0,.10);
    animation:trustedCardReveal .7s cubic-bezier(.2,.8,.2,1) both;
}
.results-counter-grid .dark-result-card:nth-child(2){animation-delay:.10s}
.results-counter-grid .dark-result-card:nth-child(3){animation-delay:.20s}
.results-counter-grid .dark-result-card:nth-child(4){animation-delay:.30s}
.results-counter-grid .dark-result-card::before{
    content:""; position:absolute; inset:0 auto auto 0; width:100%; height:4px;
    background:linear-gradient(90deg,var(--orange),#ff9b52); z-index:-1;
}
.results-counter-grid .dark-result-card::after{
    content:""; position:absolute; width:120px; height:120px; border-radius:50%;
    right:-45px; bottom:-55px; background:rgba(255,101,0,.07); transition:transform .45s ease;
}
.results-counter-grid .dark-result-card:hover{transform:translateY(-10px) scale(1.02);border-color:rgba(255,101,0,.75);box-shadow:0 25px 55px rgba(255,101,0,.20)}
.results-counter-grid .dark-result-card:hover::after{transform:scale(1.8)}
.results-counter-grid .result-number{color:var(--orange);text-shadow:0 8px 22px rgba(255,101,0,.12)}
.results-counter-grid .result-label{color:#333;font-size:12px;letter-spacing:1px;text-transform:uppercase}
@keyframes trustedCardReveal{from{opacity:0;transform:translateY(35px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){.results-counter-grid .dark-result-card{animation:none;transition:none}}

/* =====================================================
   FINAL PAGE FLOW + TRUSTED SECTION POLISH
===================================================== */
html, body{min-height:100%;}
body{overflow-x:hidden;}

/* The hero is the first screen; everything below is a natural page flow. */
.page-frame{
    width:100%;
    height:100vh;
    min-height:680px;
    aspect-ratio:auto;
    margin:0;
    padding:14px;
    border-radius:0;
}
.website{
    height:100%;
    min-height:0;
    overflow:hidden;
}

/* No decorative background behind the scroll prompt. */
.scroll{
    background:transparent !important;
    color:rgba(255,255,255,.72) !important;
    width:auto;
    min-width:150px;
    height:auto;
    padding:10px 0 14px;
}
.scroll:before,
.scroll:after{display:none !important;content:none !important;}

/* Headings sit in the middle and animate into view. */
.dark-section-heading{
    max-width:900px;
    margin:0 auto 42px;
    text-align:center;
    opacity:0;
    transform:translateY(28px);
    transition:opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1);
}
.dark-section-heading.heading-visible{
    opacity:1;
    transform:translateY(0);
}
.dark-section-heading h2{color:#fff;}
.dark-section-heading h2 span{color:var(--orange);}
.dark-section-heading p{margin-left:auto;margin-right:auto;}

/* Cards enter from the right, one after another. The next card starts as soon as
   the previous card finishes — no fixed animation-delay is used. */
.results-counter-grid .dark-result-card{
    opacity:0;
    transform:translateX(110px) scale(.97);
    animation:none !important;
    will-change:transform,opacity;
    transition:opacity .58s ease, transform .58s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.results-counter-grid .dark-result-card.card-visible{
    opacity:1;
    transform:translateX(0) scale(1);
}
.results-counter-grid .dark-result-card:nth-child(n){animation-delay:0s !important;}
.results-counter-grid .dark-result-card.card-visible:hover{
    transform:translateY(-10px) scale(1.02);
}

/* Keep the reviews area clean until reviews are added. */
.vertical-reviews:empty{display:none;}
.reviews-wrap{padding-bottom:80px;}

/* Footer is the true end of the page — no empty background after it. */
.site-footer{
    margin:0 !important;
    width:100%;
    position:relative;
}
body > .site-footer:last-child{margin-bottom:0;}

@media (max-width:900px){
    .page-frame{
        width:100%;
        height:auto;
        min-height:560px;
        margin:0;
        padding:0;
        aspect-ratio:auto;
    }
    .website{
        height:560px;
        min-height:560px;
        border-radius:0;
    }
    .results-reviews-section{min-height:0;}
    .our-results-wrap{padding-top:62px;}
    .reviews-wrap{padding:62px 0 70px;}
}

@media (min-width:901px){
    .page-frame{min-height:680px;}
}

@media (prefers-reduced-motion:reduce){
    .dark-section-heading,
    .results-counter-grid .dark-result-card{transition:none !important;}
}


/* =====================================================
   FINAL MOBILE DESKTOP-MODE + HERO MIXED COLOR FIX
   Keeps the desktop composition intact without blank space.
===================================================== */
html, body{
    width:100%;
    min-height:100%;
    margin:0;
}
body{
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden !important;
}

/* The hero and the sections use their natural desktop flow.
   If a browser's desktop mode has extra viewport height, the footer itself
   extends to the bottom instead of leaving the dark page background visible. */
.page-frame,
.results-reviews-section,
.site-footer{
    flex:0 0 auto;
}
.site-footer{
    flex-grow:1;
    margin:0 !important;
    padding-bottom:max(28px, env(safe-area-inset-bottom));
}

/* Preserve the complete desktop canvas when mobile browsers request desktop mode. */
@media (min-width:901px){
    .page-frame{
        width:100%;
        height:100vh;
        min-height:680px;
        margin:0;
        padding:14px;
        border-radius:0;
        aspect-ratio:auto;
    }
    .website{
        width:100%;
        height:100%;
        min-height:0;
        border-radius:0;
    }
}

/* Mixed white + orange hero typography */
.left-content h1 .hero-line{
    display:block;
    white-space:nowrap;
}
.left-content h1 .hero-line-white{
    color:var(--text-light) !important;
}
.left-content h1 .hero-line-orange{
    color:var(--orange) !important;
    text-shadow:0 0 22px rgba(255,101,0,.12);
}
.left-content h1 .hero-line-mixed{
    color:var(--text-light) !important;
}
.left-content h1 .hero-line-mixed em{
    color:var(--orange) !important;
    font-style:normal;
}

/* Desktop-mode browsers on phones should never create horizontal gaps/overflow. */
@media (max-width:900px){
    body{overflow-x:hidden !important;}
    .page-frame{
        margin:0;
        width:100%;
    }
}

/* =====================================================
   HERO TEXT SLIDER + TWO-COLOR TYPOGRAPHY
   Only white and orange are used for visible typography.
===================================================== */
.hero-slider{
    position:relative;
    width:100%;
    min-height:220px;
    overflow:hidden;
}

.hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transform:translateY(34px);
    pointer-events:none;
    transition:opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1);
}

.hero-slide.is-active{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.hero-slide h1{
    margin:0;
}

.left-content h1 .hero-line,
.left-content h1 .hero-line-white,
.left-content h1 .hero-line-mixed{
    color:#fff !important;
}

.left-content h1 .hero-line-orange,
.left-content h1 .hero-line-mixed em{
    color:#e10600 !important;
    text-shadow:0 0 22px rgba(255,105,0,.12);
}

/* Two-color system for the complete website typography */
body,
body p,
body small,
body span,
body strong,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body a,
body button,
body label,
body li{
    color:#fff;
}

body .count,
body .result-number,
body .growth-heading strong,
body .footer-contact > a,
body .footer-links a:hover,
body .dark-section-heading h2 span,
body .orange-icon,
body .orange-bars i,
body .hero-line-orange,
body .hero-line-mixed em{
    color:#e10600 !important;
}

/* Dark panels keep white text readable instead of introducing a third text color. */
.stat-card,
.dashboard,
.results-counter-grid .dark-result-card{
    background:rgba(7,20,38,.92) !important;
    border-color:rgba(255,105,0,.22) !important;
}

.results-counter-grid .result-label,
.footer-brand p,
.footer-links a,
.footer-bottom,
.right-content p,
.bottom-left p,
.bottom-right p,
.dark-section-heading p{
    color:rgba(255,255,255,.82) !important;
}

.footer-links a:hover{color:#e10600 !important;}
.social .social-item i{color:#fff !important;}
.social .social-item:hover i{color:#e10600 !important;}

@media (max-width:900px){
    .hero-slider{min-height:145px;}
}

@media (prefers-reduced-motion:reduce){
    .hero-slide{transition:none;}
}

/* =====================================================
   ENTERPRISE HERO TYPOGRAPHY + SLOWER SLIDER
   ===================================================== */
.hero-slider{
    min-height:clamp(235px, 22vw, 320px);
    perspective:900px;
}

.hero-slide{
    display:flex;
    align-items:flex-start;
    transform:translate3d(0,42px,0) scale(.985);
    filter:blur(3px);
    transition:
        opacity 1s cubic-bezier(.22,1,.36,1),
        transform 1.05s cubic-bezier(.22,1,.36,1),
        filter 1s ease;
}

.hero-slide.is-active{
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
}

.hero-slide h1{
    font-family:Arial Black, Arial, Helvetica, sans-serif;
    font-weight:900;
    font-size:clamp(40px, 5vw, 76px);
    line-height:.88;
    letter-spacing:-4px;
    text-transform:uppercase;
    text-wrap:balance;
    text-shadow:0 10px 30px rgba(0,0,0,.16);
}

.hero-slide .hero-line{
    position:relative;
    width:max-content;
    max-width:100%;
    overflow:hidden;
    padding-right:7px;
    clip-path:inset(0 100% 0 0);
    transition:clip-path .95s cubic-bezier(.77,0,.18,1);
}

.hero-slide.is-active .hero-line{
    clip-path:inset(0 0 0 0);
}

.hero-slide.is-active .hero-line:nth-child(1){transition-delay:.05s}
.hero-slide.is-active .hero-line:nth-child(2){transition-delay:.13s}
.hero-slide.is-active .hero-line:nth-child(3){transition-delay:.21s}
.hero-slide.is-active .hero-line:nth-child(4){transition-delay:.29s}

.hero-slide .hero-line-orange,
.hero-slide .hero-line-mixed em{
    text-shadow:0 0 26px rgba(255,105,0,.2);
}

@media(max-width:900px){
    .hero-slider{min-height:165px;}
    .hero-slide h1{
        font-size:clamp(31px, 9vw, 56px);
        letter-spacing:-2.5px;
    }
}

/* =====================================================
   CLIENT REVIEWS — SPEECH BUBBLE / ONE-BY-ONE FLOW
   Three reviews cycle continuously and slowly.
   ===================================================== */
.vertical-reviews{
    position:relative;
    display:block;
    width:min(980px,100%);
    max-width:980px;
    min-height:300px;
    margin:0 auto;
    overflow:hidden;
    isolation:isolate;
}

.vertical-reviews .review-slide{
    position:absolute;
    inset:0;
    width:100%;
    max-width:920px;
    margin:0 auto;
    padding:20px 0 42px;
    opacity:0;
    visibility:hidden;
    transform:translate3d(115%,35px,0) scale(.92);
    filter:blur(5px);
    pointer-events:none;
    transition:
        opacity 1.05s cubic-bezier(.22,1,.36,1),
        transform 1.25s cubic-bezier(.22,1,.36,1),
        filter 1s ease,
        visibility 0s linear 1.25s;
}

.vertical-reviews .review-slide.is-active{
    opacity:1;
    visibility:visible;
    transform:translate3d(0,-8px,0) scale(1);
    filter:blur(0);
    pointer-events:auto;
    transition:
        opacity 1.05s cubic-bezier(.22,1,.36,1),
        transform 1.25s cubic-bezier(.22,1,.36,1),
        filter 1s ease;
}

.vertical-reviews .review-slide.is-exiting{
    opacity:0;
    visibility:visible;
    transform:translate3d(-115%,-2px,0) scale(.94);
    filter:blur(4px);
    transition:
        opacity 1.1s ease,
        transform 1.2s cubic-bezier(.65,0,.84,.16),
        filter 1s ease;
}

.review-bubble{
    position:relative;
    width:calc(100% - 70px);
    margin:0 auto;
    padding:38px 48px 32px;
    border:1px solid rgba(255,105,0,.22);
    border-radius:28px;
    background:linear-gradient(145deg,#fff 0%,#fffaf7 100%);
    box-shadow:
        0 28px 70px rgba(0,0,0,.20),
        0 0 0 1px rgba(255,255,255,.7) inset;
    color:#111;
}

.review-bubble::after{
    content:"";
    position:absolute;
    left:72px;
    bottom:-30px;
    width:58px;
    height:58px;
    background:#fffaf7;
    border-right:1px solid rgba(255,105,0,.16);
    border-bottom:1px solid rgba(255,105,0,.16);
    transform:skewX(-20deg) rotate(45deg);
    z-index:-1;
}

.review-bubble::before{
    content:"“";
    position:absolute;
    top:8px;
    right:28px;
    color:rgba(255,105,0,.16);
    font-family:Georgia,serif;
    font-size:100px;
    line-height:1;
}

.vertical-reviews .stars{
    margin:0 0 18px;
    color:#e10600 !important;
    font-size:18px;
    letter-spacing:5px;
}

.vertical-reviews .review-bubble > p{
    max-width:790px;
    margin:0;
    color:#202020 !important;
    font-size:clamp(16px,1.5vw,20px);
    font-style:normal;
    font-weight:500;
    line-height:1.7;
    letter-spacing:-.15px;
}

.vertical-reviews .client-person{
    margin-top:25px;
    gap:14px;
}

.vertical-reviews .client-avatar{
    width:52px;
    height:52px;
    flex-basis:52px;
    border:3px solid #fff;
    background:linear-gradient(135deg,#e10600,#ff9b55) !important;
    color:#fff !important;
    box-shadow:0 8px 22px rgba(255,105,0,.24);
}

.vertical-reviews .client-person strong{
    color:#111 !important;
    font-size:15px;
    font-weight:800;
}

.vertical-reviews .client-person span{
    color:#e10600 !important;
    font-size:11px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
}

@media(max-width:900px){
    .vertical-reviews{min-height:370px;}
    .vertical-reviews .review-slide{padding:18px 0 40px;}
    .review-bubble{
        width:calc(100% - 28px);
        padding:30px 24px 27px;
        border-radius:22px;
    }
    .review-bubble::after{left:48px;}
    .vertical-reviews .review-bubble > p{font-size:15px;line-height:1.65;}
    .vertical-reviews .stars{font-size:15px;letter-spacing:3px;}
}

@media(prefers-reduced-motion:reduce){
    .hero-slide,
    .hero-slide .hero-line,
    .vertical-reviews .review-slide{transition:none !important;}
}

/* =====================================================
   FINAL POLISH — NAVIGATION + HERO FIT + REVIEW TRAIL
===================================================== */
.nav{
    background:#e10600 !important;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 8px 22px rgba(255,105,0,.22);
}
.nav a,
.nav a:visited{
    color:#fff !important;
}
.nav a:hover,
.nav a.active{
    background:#fff !important;
    color:#e10600 !important;
    box-shadow:0 3px 9px rgba(0,0,0,.16);
}
.nav a:hover b,
.nav a.active b{color:#e10600 !important;}

/* Never crop a headline just because one enterprise phrase is wider. */
.hero-slider{
    overflow:visible !important;
    min-height:clamp(250px,24vw,335px) !important;
}
.hero-slide{
    overflow:visible !important;
    width:100% !important;
}
.hero-slide h1{
    width:100% !important;
    max-width:100% !important;
    font-size:clamp(34px,4.35vw,68px) !important;
    line-height:.9 !important;
    letter-spacing:-3px !important;
}
.hero-slide .hero-line{
    width:auto !important;
    max-width:100% !important;
    overflow:visible !important;
    padding-right:0 !important;
}
@media(max-width:900px){
    .hero-slider{min-height:185px !important;}
    .hero-slide h1{
        font-size:clamp(29px,8.1vw,52px) !important;
        letter-spacing:-2px !important;
        line-height:.93 !important;
    }
}

/* Three-card conveyor: newest comes from right, highlights, then remains in the trail. */
.vertical-reviews{
    min-height:500px !important;
    overflow:hidden !important;
    width:min(1120px,100%) !important;
    margin:0 auto !important;
}
.vertical-reviews .review-slide{
    position:absolute !important;
    top:20px !important;
    left:0 !important;
    width:360px !important;
    max-width:none !important;
    padding:0 0 46px !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    transform:translate3d(1180px,0,0) scale(.94) !important;
    transition:transform 1.5s cubic-bezier(.22,1,.36,1), opacity 1.25s ease, filter 1.25s ease !important;
}
.vertical-reviews .review-slide.review-pos-0{
    transform:translate3d(0,24px,0) scale(.92) !important;
    z-index:2;
}
.vertical-reviews .review-slide.review-pos-1{
    transform:translate3d(380px,10px,0) scale(.96) !important;
    z-index:3;
}
.vertical-reviews .review-slide.review-pos-2{
    transform:translate3d(760px,-18px,0) scale(1) !important;
    z-index:5;
}
.vertical-reviews .review-slide.review-entering{
    transform:translate3d(1180px,-18px,0) scale(.92) !important;
    opacity:.25 !important;
    filter:blur(3px) !important;
}
.vertical-reviews .review-slide.review-leaving{
    transform:translate3d(-430px,36px,0) scale(.88) !important;
    opacity:0 !important;
    z-index:1;
}
.vertical-reviews .review-slide.is-active .review-bubble{
    border-color:#e10600 !important;
    box-shadow:0 28px 65px rgba(255,105,0,.20), 0 0 0 2px rgba(255,105,0,.10) !important;
}
.review-bubble{
    width:100% !important;
    min-height:245px !important;
    margin:0 !important;
    padding:30px 28px 24px !important;
    border-radius:24px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    background:#fff !important;
}
.review-bubble::after{
    left:46px !important;
    bottom:-25px !important;
    width:48px !important;
    height:48px !important;
    background:#fff !important;
}
.vertical-reviews .review-bubble > p{
    max-width:none !important;
    color:#171717 !important;
    font-size:15px !important;
    line-height:1.62 !important;
    text-align:left !important;
}
.vertical-reviews .stars{
    margin:20px 0 0 !important;
    color:#e10600 !important;
    font-size:17px !important;
    letter-spacing:4px !important;
}
.vertical-reviews .client-person{
    margin:24px 0 0 22px !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
}
.vertical-reviews .client-avatar{
    width:58px !important;
    height:58px !important;
    flex:0 0 58px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    border:3px solid #e10600 !important;
    background:#e10600 !important;
    color:#fff !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-weight:800 !important;
}
.vertical-reviews .avatar-initials{
    font-size:14px !important;
}
.vertical-reviews .client-person strong{
    display:block !important;
    color:#fff !important;
    font-size:15px !important;
}
.vertical-reviews .client-person span{
    display:block !important;
    margin-top:3px !important;
    color:#e10600 !important;
    font-size:10px !important;
    font-weight:700 !important;
}
@media(max-width:1100px){
    .vertical-reviews .review-slide{width:310px !important;}
    .vertical-reviews .review-slide.review-pos-1{transform:translate3d(330px,10px,0) scale(.94) !important;}
    .vertical-reviews .review-slide.review-pos-2{transform:translate3d(660px,-18px,0) scale(.97) !important;}
}
@media(max-width:900px){
    .vertical-reviews{min-height:560px !important; overflow:hidden !important;}
    .vertical-reviews .review-slide{width:min(300px,82vw) !important;}
    .vertical-reviews .review-slide.review-pos-0{transform:translate3d(-10px,24px,0) scale(.88) !important;}
    .vertical-reviews .review-slide.review-pos-1{transform:translate3d(35px,10px,0) scale(.92) !important;}
    .vertical-reviews .review-slide.review-pos-2{transform:translate3d(90px,-12px,0) scale(.98) !important;}
    .vertical-reviews .review-slide.review-entering{transform:translate3d(100vw,-12px,0) scale(.90) !important;}
    .vertical-reviews .review-slide.review-leaving{transform:translate3d(-100vw,35px,0) scale(.85) !important;}
    .review-bubble{min-height:260px !important;padding:26px 22px 22px !important;}
}

/* Shared navigation pages */
.inner-page{background:#0b1422 !important;color:#fff !important;}
.inner-frame{min-height:100vh !important;height:100vh !important;aspect-ratio:auto !important;margin:0 !important;padding:14px !important;background:#0b1422 !important;border:0 !important;box-shadow:none !important;}
.inner-website{min-height:calc(100vh - 28px) !important;height:100% !important;background:#0b1422 !important;border-color:rgba(255,255,255,.08) !important;}
.inner-website .header{position:absolute;}
.inner-content{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:140px clamp(28px,8vw,120px) 90px;max-width:1150px;}
.inner-kicker{color:#e10600;font-size:12px;font-weight:800;letter-spacing:3px;margin-bottom:22px;}
.inner-content h1{max-width:900px;color:#fff !important;font-size:clamp(42px,6vw,86px);line-height:.94;letter-spacing:-4px;margin-bottom:28px;}
.inner-content p{max-width:720px;color:rgba(255,255,255,.82) !important;font-size:clamp(17px,2vw,22px);line-height:1.65;}
.inner-feature-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;max-width:640px;}
.inner-feature-list li{display:flex;align-items:flex-start;gap:12px;color:rgba(255,255,255,.85);font-size:15px;line-height:1.55;}
.inner-feature-list li i{color:var(--brand-red,#e10600);margin-top:3px;flex:0 0 auto;}
.inner-actions{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap;}
.inner-actions a{padding:13px 19px;border-radius:8px;text-decoration:none;font-weight:700;color:#fff !important;background:#e10600;}
.inner-actions a:first-child{background:#fff;color:#e10600 !important;}
@media(max-width:900px){.inner-frame{padding:0 !important;}.inner-website{min-height:100vh !important;}.inner-content{padding:130px 26px 60px;}.inner-content h1{letter-spacing:-2px;}}


/* =====================================================
   FINAL UPDATE — RED PILL NAV + CLEAN SLOW REVIEW CONVEYOR
   ===================================================== */
:root{--brand-red:#e10600;}

.nav{
    background:var(--brand-red) !important;
    border:1px solid rgba(255,255,255,.20) !important;
    border-radius:999px !important;
    box-shadow:0 10px 26px rgba(225,6,0,.22) !important;
    overflow:hidden !important;
    padding:5px !important;
}
.nav a,
.nav a:visited{
    color:#fff !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    white-space:nowrap !important;
}
.nav a i{
    color:currentColor !important;
    font-size:12px !important;
}
.nav a:hover,
.nav a.active,
.nav a:focus-visible{
    background:#fff !important;
    color:var(--brand-red) !important;
}
.nav a:hover i,
.nav a.active i,
.nav a:focus-visible i{color:var(--brand-red) !important;}

/* Clean review presentation: no section panel/background or heading. */
.reviews-wrap{
    background:transparent !important;
    border-top:0 !important;
    box-shadow:none !important;
}
.reviews-heading-new{display:none !important;}
.results-reviews-section::before{display:none !important;}
.vertical-reviews{
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
    min-height:360px !important;
    width:min(1180px,100%) !important;
    overflow:hidden !important;
    padding:24px 0 50px !important;
}
.vertical-reviews .review-slide{
    width:340px !important;
    top:28px !important;
    padding:0 0 58px !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    pointer-events:auto !important;
    transition:transform 1.8s cubic-bezier(.22,1,.36,1), opacity 1.35s ease, filter 1.35s ease !important;
}
.vertical-reviews .review-slide.review-pos-0{
    transform:translate3d(0,30px,0) scale(.91) !important;
    opacity:.84 !important;
    z-index:2 !important;
}
.vertical-reviews .review-slide.review-pos-1{
    transform:translate3d(380px,14px,0) scale(.95) !important;
    opacity:.93 !important;
    z-index:3 !important;
}
.vertical-reviews .review-slide.review-pos-2{
    transform:translate3d(760px,-10px,0) scale(1) !important;
    opacity:1 !important;
    z-index:5 !important;
}
.vertical-reviews .review-slide.review-entering{
    transform:translate3d(1180px,-10px,0) scale(.92) !important;
    opacity:.15 !important;
    filter:blur(2px) !important;
}
.vertical-reviews .review-slide.review-leaving{
    transform:translate3d(-430px,36px,0) scale(.88) !important;
    opacity:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
}
.vertical-reviews .review-slide.is-active .review-bubble{
    border-color:var(--brand-red) !important;
    box-shadow:0 24px 58px rgba(225,6,0,.22),0 0 0 2px rgba(225,6,0,.09) !important;
}
.review-bubble{
    width:100% !important;
    min-height:235px !important;
    padding:30px 28px 24px !important;
    border:1px solid rgba(0,0,0,.10) !important;
    border-radius:25px !important;
    background:#fff !important;
    box-shadow:0 18px 45px rgba(0,0,0,.14) !important;
}
.review-bubble::after{
    background:#fff !important;
    border-color:rgba(0,0,0,.10) !important;
}
.vertical-reviews .review-bubble > p{
    color:#171717 !important;
    font-size:15px !important;
    line-height:1.62 !important;
}
.vertical-reviews .stars{
    color:var(--brand-red) !important;
    margin:18px 0 0 !important;
}
.vertical-reviews .client-person{
    margin:22px 0 0 18px !important;
}
.vertical-reviews .client-avatar{
    border-color:var(--brand-red) !important;
    background:var(--brand-red) !important;
}
.vertical-reviews .client-person strong{
    color:#111 !important;
}
.vertical-reviews .client-person span{display:none !important;}

@media(max-width:1100px){
    .vertical-reviews .review-slide{width:300px !important;}
    .vertical-reviews .review-slide.review-pos-1{transform:translate3d(325px,14px,0) scale(.94) !important;}
    .vertical-reviews .review-slide.review-pos-2{transform:translate3d(650px,-10px,0) scale(.98) !important;}
    .vertical-reviews .review-slide.review-entering{transform:translate3d(105vw,-10px,0) scale(.90) !important;}
}
@media(max-width:900px){
    .nav{border-radius:24px !important;overflow-x:auto !important;justify-content:flex-start !important;}
    .nav a{flex:0 0 auto !important;}
    .vertical-reviews{min-height:420px !important;padding-bottom:35px !important;}
    .vertical-reviews .review-slide{width:min(285px,78vw) !important;}
    .vertical-reviews .review-slide.review-pos-0{transform:translate3d(-8px,28px,0) scale(.88) !important;}
    .vertical-reviews .review-slide.review-pos-1{transform:translate3d(24px,12px,0) scale(.93) !important;}
    .vertical-reviews .review-slide.review-pos-2{transform:translate3d(58px,-8px,0) scale(.98) !important;}
    .vertical-reviews .review-slide.review-entering{transform:translate3d(105vw,-8px,0) scale(.90) !important;}
    .vertical-reviews .review-slide.review-leaving{transform:translate3d(-105vw,32px,0) scale(.86) !important;}
    .review-bubble{min-height:245px !important;padding:26px 21px 22px !important;}
}

/* Remove the section background from the reviews area while keeping the
   results block visually intact. */
.results-reviews-section{
    background:transparent !important;
}
.results-reviews-section::before{display:none !important;}
.our-results-wrap{
    background:
        linear-gradient(rgba(255,101,0,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,101,0,.07) 1px, transparent 1px),
        linear-gradient(180deg, var(--dark-bg), var(--dark-bg-2)) !important;
    background-size:58px 58px,58px 58px,auto !important;
}
.reviews-wrap{
    border-top:0 !important;
    background:transparent !important;
}

/* =====================================================
   CLIENT REVIEWS — SLOW CONTINUOUS RIGHT → LEFT MARQUEE
   No three-card staging. Reviews continuously scroll as one
   horizontal stream and pause completely on hover.
===================================================== */
.reviews-wrap{
    background:transparent !important;
    border-top:0 !important;
    box-shadow:none !important;
}
.reviews-wrap::before,
.reviews-wrap::after{display:none !important;}

.vertical-reviews{
    position:relative;
    display:block;
    width:100%;
    max-width:none;
    min-height:0;
    margin:24px 0 0;
    overflow:hidden;
    isolation:isolate;
}

.vertical-reviews .review-track{
    display:flex;
    align-items:flex-start;
    width:max-content;
    gap:46px;
    padding:18px 0 48px;
    will-change:transform;
    animation:reviewMarquee 42s linear infinite;
}

.vertical-reviews .review-slide{
    position:relative;
    inset:auto;
    flex:0 0 520px;
    width:520px;
    max-width:none;
    margin:0;
    padding:0 0 42px;
    opacity:1;
    visibility:visible;
    transform:none;
    filter:none;
    pointer-events:auto;
    transition:transform .35s ease, filter .35s ease;
}

/* The card itself is the only visible review surface. */
.vertical-reviews .review-bubble{
    width:100%;
    min-height:210px;
    box-sizing:border-box;
    margin:0;
    padding:34px 38px 30px;
    border:1px solid rgba(255,105,0,.20);
    border-radius:28px;
    background:#fff !important;
    color:#111 !important;
    box-shadow:0 20px 45px rgba(0,0,0,.13);
}
.vertical-reviews .review-bubble::before{display:none;}
.vertical-reviews .review-bubble::after{display:block;}
.vertical-reviews .stars{
    margin-top:22px;
    margin-bottom:0;
    color:#e10600 !important;
}
.vertical-reviews .review-bubble > p{
    color:#202020 !important;
    font-size:17px;
    line-height:1.65;
}
.vertical-reviews .client-person{
    margin:20px 0 0 26px;
    gap:12px;
}
.vertical-reviews .client-avatar{
    width:54px;
    height:54px;
    flex-basis:54px;
    border:3px solid #fff;
    background:#fff !important;
    object-fit:cover;
    box-shadow:0 7px 18px rgba(0,0,0,.16);
}
.vertical-reviews .client-person strong{
    color:#fff !important;
    font-size:15px;
    font-weight:800;
}

/* Hover pauses the entire continuous stream. */
.vertical-reviews:hover .review-track,
.vertical-reviews:focus-within .review-track{
    animation-play-state:paused;
}

@keyframes reviewMarquee{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(calc(-50% - 23px),0,0);}
}

@media(max-width:900px){
    .vertical-reviews .review-track{gap:24px;animation-duration:48s;padding-top:10px;}
    .vertical-reviews .review-slide{flex-basis:min(82vw,430px);width:min(82vw,430px);padding-bottom:36px;}
    .vertical-reviews .review-bubble{min-height:190px;padding:27px 24px 25px;border-radius:22px;}
    .vertical-reviews .review-bubble > p{font-size:15px;line-height:1.6;}
    .vertical-reviews .client-person{margin-left:22px;}
}

@media(prefers-reduced-motion:reduce){
    .vertical-reviews .review-track{animation:none !important;transform:none !important;}
}


/* =====================================================
   ABOUT PAGE — CLIENT REVIEW MARQUEE (red/white theme)
   Scoped to #about-stats only; does not touch the shared
   .dark-section-heading / .our-results-wrap used on index.html.
===================================================== */
#about-stats .about-reviews-heading h2 span{color:var(--brand-red,#e10600) !important;}
#about-stats .about-reviews-heading p{color:rgba(255,255,255,.72) !important;}

.about-reviews-viewport{
    width:100%;
    overflow:hidden;
    isolation:isolate;
    margin-top:10px;
}
.about-reviews-track{
    display:flex;
    align-items:flex-start;
    gap:26px;
    width:max-content;
    padding:6px 4px 30px;
    will-change:transform;
    animation:aboutReviewsScroll 38s linear infinite;
}
.about-reviews-viewport:hover .about-reviews-track,
.about-reviews-viewport:focus-within .about-reviews-track{
    animation-play-state:paused;
}
@keyframes aboutReviewsScroll{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(calc(-50% - 13px),0,0);}
}
.about-review-card{
    flex:0 0 380px;
    width:380px;
}
.about-review-bubble{
    position:relative;
    background:#fff;
    border-radius:22px;
    padding:30px 28px 26px;
    min-height:180px;
    box-shadow:0 20px 45px rgba(0,0,0,.25);
}
.about-review-bubble::after{
    content:"";
    position:absolute;
    left:42px;
    bottom:-14px;
    width:26px;
    height:26px;
    background:#fff;
    clip-path:polygon(0 0, 100% 0, 0 100%);
    border-radius:0 0 0 6px;
}
.about-review-stars{
    color:var(--brand-red,#e10600);
    letter-spacing:3px;
    font-size:16px;
    margin-bottom:14px;
}
.about-review-bubble p{
    margin:0;
    color:#1a1a1a;
    font-size:15px;
    line-height:1.65;
}
.about-review-person{
    display:flex;
    align-items:center;
    gap:12px;
    margin:24px 0 0 14px;
}
.about-review-avatar{
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--brand-red,#e10600);
    color:#fff;
    font-size:14px;
    font-weight:800;
    border:2px solid #fff;
    box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.about-review-person strong{
    display:block;
    color:#fff;
    font-size:14px;
    font-weight:800;
}
.about-review-person span{
    display:block;
    color:rgba(255,255,255,.65);
    font-size:12px;
    margin-top:2px;
}
@media(max-width:900px){
    .about-review-card{flex:0 0 300px;width:300px;}
    .about-reviews-track{animation-duration:26s;}
}
@media(prefers-reduced-motion:reduce){
    .about-reviews-track{animation:none !important;transform:none !important;}
}

/* =====================================================
   HOME UPDATE — PREMIUM NAV + 7-STEP AGENCY PROCESS
   Reviews are intentionally removed from the home page.
===================================================== */
:root{
    --premium-nav:#151923;
    --premium-nav-2:#252b38;
    --process-red:#e10600;
}

/* Premium neutral navigation: quieter and more enterprise than bright red. */
.nav{
    background:linear-gradient(135deg,var(--premium-nav),var(--premium-nav-2)) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:999px !important;
    box-shadow:0 12px 30px rgba(5,10,20,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.nav a,.nav a:visited{color:#fff !important;}
.nav a:hover,.nav a.active,.nav a:focus-visible{
    background:#fff !important;
    color:var(--process-red) !important;
}
.nav a:hover i,.nav a.active i,.nav a:focus-visible i{color:var(--process-red) !important;}

/* Keep the home page compact: no client-review area. */
.results-reviews-section{background:transparent !important;}

/* =====================================================
   SEVEN-STEP PROCESS — visual language inspired by the
   supplied circular process reference, but branded for a
   premium digital growth agency.
===================================================== */
.agency-process{
    position:relative;
    padding:96px clamp(22px,5vw,78px) 105px;
    background:#f7f7f5;
    color:#121722;
    overflow:hidden;
    isolation:isolate;
}
.agency-process::before{
    content:"";
    position:absolute;
    width:560px;height:560px;
    left:-300px;top:140px;
    border:1px solid rgba(18,23,34,.08);
    border-radius:50%;
    box-shadow:0 0 0 90px rgba(18,23,34,.025),0 0 0 180px rgba(18,23,34,.018);
    z-index:-1;
}
.agency-process::after{
    content:"";
    position:absolute;
    width:760px;height:1px;
    right:-130px;top:50%;
    background:linear-gradient(90deg,transparent,rgba(225,6,0,.20),transparent);
    transform:rotate(-13deg);
    z-index:-1;
}
.process-heading{text-align:center;max-width:760px;margin:0 auto 70px;}
.process-kicker{
    display:inline-flex;align-items:center;justify-content:center;
    padding:9px 17px;border:1px solid rgba(18,23,34,.10);border-radius:999px;
    background:#fff;box-shadow:0 8px 24px rgba(18,23,34,.06);
    color:var(--process-red);font-size:10px;font-weight:900;letter-spacing:2.8px;
}
.process-heading h2{
    margin:18px 0 15px;color:#111827;font-size:clamp(38px,5vw,64px);
    line-height:.98;letter-spacing:-3px;font-weight:900;
}
.process-heading h2 span{color:var(--process-red);}
.process-heading p{margin:0;color:#687080;font-size:clamp(15px,1.6vw,18px);line-height:1.7;}

.process-flow{
    position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
    gap:clamp(12px,1.5vw,28px);max-width:1420px;margin:0 auto;align-items:center;
}
.process-line{
    position:absolute;left:4%;right:4%;top:50%;height:1px;
    background:repeating-linear-gradient(90deg,rgba(18,23,34,.18) 0 6px,transparent 6px 13px);
    z-index:0;
}
.process-line::before,.process-line::after{
    content:"";position:absolute;top:50%;width:10px;height:10px;border:2px solid #111827;
    background:#f7f7f5;border-radius:50%;transform:translateY(-50%);
}
.process-line::before{left:-1px}.process-line::after{right:-1px}
.process-step{position:relative;z-index:1;text-align:center;min-width:0;}
.process-step-up{transform:translateY(-18px);}
.process-step-down{transform:translateY(22px);}
.process-orbit{
    position:relative;width:clamp(120px,10.8vw,158px);height:clamp(120px,10.8vw,158px);
    margin:0 auto 22px;border:1.5px solid rgba(18,23,34,.26);border-radius:50%;
    background:rgba(255,255,255,.86);display:flex;align-items:center;justify-content:center;
    box-shadow:0 18px 40px rgba(18,23,34,.07),inset 0 0 0 10px rgba(18,23,34,.025);
    transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.process-orbit::before{
    content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed rgba(18,23,34,.10);
}
.process-orbit i{font-size:clamp(24px,2.2vw,34px);color:#111827;opacity:.86;}
.process-number{
    position:absolute;right:-8px;top:-9px;width:46px;height:46px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;background:var(--process-red);color:#fff;
    font-size:12px;font-weight:900;letter-spacing:.5px;box-shadow:0 10px 24px rgba(225,6,0,.28);
}
.process-copy{max-width:185px;margin:0 auto;}
.process-copy h3{margin:0 0 9px;font-size:17px;letter-spacing:-.3px;font-weight:900;color:#111827;}
.process-copy p{margin:0;color:#727987;font-size:12px;line-height:1.62;}
.process-step:hover .process-orbit{
    transform:translateY(-7px) scale(1.03);border-color:rgba(225,6,0,.42);
    box-shadow:0 25px 55px rgba(18,23,34,.11),0 0 0 7px rgba(225,6,0,.06);
}

@media(max-width:1100px){
    .agency-process{padding:80px 24px 88px;}
    .process-flow{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:70px;}
    .process-line{display:none;}
    .process-step-up,.process-step-down{transform:none;}
}
@media(max-width:700px){
    .agency-process{padding:68px 18px 74px;}
    .process-heading{margin-bottom:48px;}
    .process-heading h2{letter-spacing:-2px;}
    .process-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 18px;}
    .process-orbit{width:132px;height:132px;}
    .process-copy{max-width:170px;}
    .process-copy p{font-size:12px;}
}
@media(max-width:430px){
    .process-flow{grid-template-columns:1fr;gap:52px;}
    .process-orbit{width:145px;height:145px;}
}


/* =====================================================
   REFERENCE IMAGE THEME — GRAY / RED / CHARCOAL
   Home flow: Hero -> Why We Are Trusted -> 3-step Process -> Footer
===================================================== */
:root{
    --reference-bg:#bcbcbc;
    --reference-red:#c83a2f;
    --reference-dark:#1f1f1f;
    --reference-line:#a7a7a7;
}

html,
body{
    background:var(--reference-bg) !important;
    color:var(--reference-dark) !important;
}

body{
    background-image:none !important;
}

.page-frame{
    background:var(--reference-bg) !important;
    border:0 !important;
    box-shadow:none !important;
}

.website{
    background:var(--reference-bg) !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
}

/* Two-color typography across the visible website. */
body,
body p,
body small,
body span,
body strong,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body a,
body button,
body label,
body li{
    color:var(--reference-dark);
}

body .count,
body .result-number,
body .growth-heading strong,
body .footer-contact > a,
body .footer-links a:hover,
body .hero-line-orange,
body .hero-line-mixed em,
body .reference-process-heading h2 span,
body .reference-process-number,
body .logo-icon span:not(:nth-child(5)){
    color:var(--reference-red) !important;
}

.logo strong{color:var(--reference-dark) !important;}
.logo-icon span{background:var(--reference-red) !important;}
.logo-icon span:nth-child(5){background:transparent !important;}

/* Premium charcoal pill navbar on the gray reference background. */
.nav{
    background:#242424 !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:999px !important;
    padding:5px !important;
    box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
}
.nav a{
    color:#f2f2f2 !important;
    border-radius:999px !important;
}
.nav a.active,
.nav a:hover{
    background:var(--reference-red) !important;
    color:#fff !important;
}
.nav a i{color:inherit !important;}
.login{
    background:var(--reference-dark) !important;
    color:#fff !important;
    border-radius:999px !important;
}

/* Hero typography uses the same red + charcoal pair as the reference. */
.left-content h1 .hero-line,
.left-content h1 .hero-line-white,
.left-content h1 .hero-line-mixed{
    color:var(--reference-dark) !important;
}
.left-content h1 .hero-line-orange,
.left-content h1 .hero-line-mixed em{
    color:var(--reference-red) !important;
    text-shadow:none !important;
}
.counter{color:var(--reference-dark) !important;}
.right-content p,
.bottom-left p,
.bottom-right p{color:var(--reference-dark) !important;}

/* Remove the previous 7-step process completely. */
.agency-process{display:none !important;}

/* =====================================================
   EXACT-STYLE 3 STEP PROCESS FROM USER REFERENCE
===================================================== */
.reference-process{
    position:relative;
    width:100%;
    min-height:560px;
    padding:72px 5.5% 92px;
    overflow:hidden;
    background:var(--reference-bg);
    color:var(--reference-dark);
}

.reference-process-heading{
    position:relative;
    z-index:3;
    max-width:650px;
    margin:0 auto 42px;
    text-align:center;
}

.reference-process-kicker{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:150px;
    height:34px;
    padding:0 22px;
    margin-bottom:22px;
    border-radius:999px;
    background:#c8c8c8;
    color:#333 !important;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.8px;
    text-transform:uppercase;
    box-shadow:0 5px 14px rgba(0,0,0,.06);
}

.reference-process-heading h2{
    margin:0 0 14px;
    font-size:clamp(36px,4vw,58px);
    line-height:.98;
    letter-spacing:-2.6px;
    font-weight:800;
    color:var(--reference-dark) !important;
}
.reference-process-heading h2 span{color:var(--reference-red) !important;}
.reference-process-heading p{
    max-width:620px;
    margin:0 auto;
    color:#666 !important;
    font-size:14px;
    line-height:1.55;
}

.reference-process-flow{
    position:relative;
    width:min(1380px,100%);
    height:330px;
    margin:0 auto;
}

.reference-process-path{
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:2px;
    transform:translateY(-50%);
    pointer-events:none;
}
.reference-process-path .path-start{
    position:absolute;
    left:0;
    top:50%;
    width:22px;
    height:22px;
    transform:translate(-1px,-50%);
    border:4px solid #555;
    border-radius:50%;
    background:var(--reference-bg);
}
.reference-process-path .path-segment{
    position:absolute;
    top:50%;
    height:1px;
    border-top:1px dashed #aaa;
    transform-origin:left center;
}
.reference-process-path .path-segment-1{left:15px;width:31%;transform:rotate(-24deg);}
.reference-process-path .path-segment-2{left:34%;width:29%;transform:rotate(22deg);}
.reference-process-path .path-segment-3{left:63%;width:31%;transform:rotate(-24deg);}
.reference-process-path .path-arrow{
    position:absolute;
    right:0;
    top:50%;
    transform:translate(0,-50%) rotate(-12deg);
    color:var(--reference-dark) !important;
    font-size:34px;
    line-height:1;
}

.reference-process-card{
    position:absolute;
    width:260px;
    height:260px;
    border:2px solid #999;
    border-radius:50%;
    background:rgba(188,188,188,.34);
    box-shadow:0 8px 20px rgba(0,0,0,.04), inset 0 0 0 1px rgba(255,255,255,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.reference-process-card::after{
    content:"";
    position:absolute;
    inset:-13px;
    border:1px solid rgba(255,255,255,.42);
    border-radius:50%;
    pointer-events:none;
}
.process-card-1{left:13%;top:8px;}
.process-card-2{left:40%;top:70px;}
.process-card-3{right:12%;top:8px;}

.reference-process-circle{
    position:relative;
    width:100%;
    padding:0 35px;
}
.reference-process-number{
    position:absolute;
    right:7px;
    top:-34px;
    width:62px;
    height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--reference-red);
    color:#fff !important;
    font-size:21px;
    font-weight:800;
    box-shadow:0 7px 14px rgba(200,58,47,.18);
}
.reference-process-card h3{
    margin:0 0 17px;
    color:var(--reference-dark) !important;
    font-size:17px;
    font-weight:800;
}
.reference-process-card p{
    margin:0;
    color:#666 !important;
    font-size:12px;
    line-height:1.55;
}

@media(max-width:900px){
    .reference-process{padding:58px 18px 75px;min-height:auto;}
    .reference-process-flow{
        height:auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:55px;
        padding:25px 0;
    }
    .reference-process-path{display:none;}
    .reference-process-card{
        position:relative;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        width:min(270px,78vw);
        height:min(270px,78vw);
    }
    .process-card-2{transform:translateX(22px);}
    .reference-process-number{right:2px;top:-28px;width:56px;height:56px;font-size:18px;}
}

/* Final reference palette pass: no blue/orange theme remains on the Home page. */
.results-reviews-section{
    background:var(--reference-bg) !important;
    color:var(--reference-dark) !important;
}
.results-counter-grid .dark-result-card{
    background:#c7c7c7 !important;
    border:1px solid #9f9f9f !important;
    box-shadow:0 10px 24px rgba(0,0,0,.06) !important;
}
.results-counter-grid .dark-result-card::before{background:var(--reference-red) !important;}
.results-counter-grid .dark-result-card::after{background:rgba(31,31,31,.05) !important;}
.results-counter-grid .result-number{color:var(--reference-red) !important;text-shadow:none !important;}
.results-counter-grid .result-label{color:var(--reference-dark) !important;}
.dark-section-heading h2{color:var(--reference-dark) !important;}
.dark-section-heading h2 span{color:var(--reference-red) !important;}
.dark-section-heading p{color:var(--reference-dark) !important;}

.site-footer{
    background:var(--reference-bg) !important;
    color:var(--reference-dark) !important;
    border-top:1px solid #a7a7a7 !important;
}
.footer-brand p,
.footer-links a,
.footer-bottom,
.footer-contact h4,
.footer-contact > a{color:var(--reference-dark) !important;}
.footer-links a:hover{color:var(--reference-red) !important;}
.footer-cta{background:var(--reference-red) !important;color:#fff !important;border-color:var(--reference-red) !important;}
.footer-logo strong{color:var(--reference-dark) !important;}

/* Reference section text is strictly the same two colors: charcoal + red. */
.reference-process-heading p,
.reference-process-card p{color:var(--reference-dark) !important;}

/* Remove leftover blue/orange decorative elements from the home background. */
.orbit{border-color:rgba(31,31,31,.25) !important;}
.orbit-dot{background:var(--reference-red) !important;}
.dashboard,
.stat-card{border-color:#a7a7a7 !important;}

@media(max-width:900px){
    .results-reviews-section{background:var(--reference-bg) !important;}
    .our-results-wrap{background:var(--reference-bg) !important;}
}


/* =====================================================================
   FINAL BRAND REFRESH — DARK NAVY THEME (matches the reference photo)
   + WHITE/RED HERO TYPOGRAPHY + IMAGE LOGO + HERO BANNER SLIDER
   This section is intentionally last so it wins over earlier passes.
===================================================================== */

:root{
    --nv-bg:#070707;
    --nv-bg-2:#0d0d0d;
    --nv-panel:#111111;
    --nv-line:rgba(225,6,0,.20);
    --nv-blue:#e10600;
    --nv-blue-soft:#ffffff;
    --nv-text:#ffffff;
    --nv-muted:#b3b3b3;
    --nv-red:#e10600;
}

/* ---------- Page background ---------- */
html,
body{
    background:var(--nv-bg) !important;
    color:var(--nv-text) !important;
}

body{
    background-image:
        radial-gradient(circle at 20% 0%, rgba(225,6,0,.20), transparent 32%),
        radial-gradient(circle at 85% 20%, rgba(225,6,0,.12), transparent 30%) !important;
}

.page-frame{
    background:var(--nv-bg) !important;
    border-color:rgba(225,6,0,.18) !important;
    box-shadow:
        0 10px 30px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(225,6,0,.06) !important;
}

.website,
.inner-website{
    background-color:var(--nv-bg) !important;
    background-image:
        linear-gradient(rgba(225,6,0,.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(225,6,0,.09) 1px, transparent 1px),
        radial-gradient(circle at 72% 25%, rgba(225,6,0,.14), transparent 34%) !important;
    background-size:58px 58px, 58px 58px, auto !important;
    border-color:rgba(225,6,0,.14) !important;
}

body,
body p,
body small,
body span,
body strong,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body a,
body button,
body label,
body li{
    color:var(--nv-text);
}

/* ---------- Logo (uploaded artwork) ---------- */
.logo{
    text-decoration:none;
}
.site-logo{
    display:block;
    height:58px;
    width:auto;
    border-radius:8px;
    background:#f2f0ec;
    padding:7px 16px;
    box-shadow:0 6px 16px rgba(0,0,0,.28);
}
.footer-logo .site-logo{
    height:44px;
    margin-bottom:4px;
}
@media (max-width:900px){
    .site-logo{height:42px;padding:5px 12px;}
}

/* ---------- Nav + login ---------- */
.nav{
    background:rgba(10,22,42,.86) !important;
    border:1px solid rgba(225,6,0,.22) !important;
    border-radius:999px !important;
    box-shadow:0 10px 28px rgba(0,0,0,.25) !important;
}
.nav a,
.nav a:visited{
    color:var(--nv-text) !important;
}
.nav a.active,
.nav a:hover,
.nav a:focus-visible{
    background:var(--nv-blue) !important;
    color:#fff !important;
    box-shadow:none !important;
}
.nav a.active i,
.nav a:hover i,
.nav a:focus-visible i{
    color:#fff !important;
}
.login{
    background:var(--nv-blue) !important;
    color:#fff !important;
    border-radius:999px !important;
}

/* ---------- Hero: text unchanged, colors white + red only ---------- */
.counter{color:var(--nv-text) !important;}

.left-content h1 .hero-line,
.left-content h1 .hero-line-white,
.left-content h1 .hero-line-mixed,
.hero-slide .hero-line,
.hero-slide .hero-line-white,
.hero-slide .hero-line-mixed{
    color:var(--nv-text) !important;
    text-shadow:none !important;
}

.left-content h1 .hero-line-orange,
.left-content h1 .hero-line-mixed em,
.hero-slide .hero-line-orange,
.hero-slide .hero-line-mixed em{
    color:var(--nv-red) !important;
    text-shadow:0 0 26px rgba(255,59,48,.30) !important;
}

body .orange-icon,
body .orange-bars i,
body .count,
body .result-number,
body .growth-heading strong,
body .footer-contact > a,
body .footer-links a:hover,
body .dark-section-heading h2 span{
    color:var(--nv-blue-soft) !important;
}

body .hero-line-orange,
body .hero-line-mixed em{
    color:var(--nv-red) !important;
}

.right-content p,
.bottom-left p,
.bottom-right p{color:var(--nv-muted) !important;}

/* ---------- Dashboard / stat cards / chart accent ---------- */
.dashboard,
.stat-card{
    background:rgba(255,255,255,.96) !important;
    border-color:rgba(225,6,0,.25) !important;
}
.orbit{border-color:rgba(225,6,0,.35) !important;}
.orbit-dot{background:var(--nv-blue) !important;}
.orange-icon{background:var(--nv-blue) !important;}
.orange-bars i{background:var(--nv-blue) !important;}
.chart .line{stroke:var(--nv-blue) !important;}
.chart circle{fill:var(--nv-blue) !important;}
.progress-ring{
    background:conic-gradient(var(--nv-blue) 0deg 281deg, #e7e7e7 281deg 360deg) !important;
}
.start{background:var(--nv-blue) !important;}

/* ---------- Why We Are Trusted + Process sections ---------- */
/* Same background color/pattern as the full website (.website), so this
   section blends seamlessly instead of showing its own distinct bg. */
.results-reviews-section{
    background-color:var(--nv-bg) !important;
    background-image:
        linear-gradient(rgba(225,6,0,.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(225,6,0,.09) 1px, transparent 1px),
        radial-gradient(circle at 72% 25%, rgba(225,6,0,.14), transparent 34%) !important;
    background-size:58px 58px, 58px 58px, auto !important;
    color:var(--nv-text) !important;
}
.results-reviews-section::before{
    display:none !important;
}
.dark-section-heading h2{color:var(--nv-text) !important;}
.dark-section-heading h2 span{color:var(--nv-blue-soft) !important;}
.dark-section-heading p{color:var(--nv-muted) !important;}

.results-counter-grid .dark-result-card{
    background:var(--nv-panel) !important;
    border:1px solid rgba(225,6,0,.28) !important;
    box-shadow:0 18px 40px rgba(0,0,0,.25) !important;
}
.results-counter-grid .dark-result-card::before{background:var(--nv-blue) !important;}
.results-counter-grid .dark-result-card::after{background:rgba(225,6,0,.08) !important;}
.results-counter-grid .dark-result-card:hover{border-color:rgba(225,6,0,.6) !important;}
.results-counter-grid .result-number{color:var(--nv-blue-soft) !important;text-shadow:none !important;}
.results-counter-grid .result-label{color:var(--nv-muted) !important;}

.reference-process-heading h2{color:var(--nv-text) !important;}
.reference-process-heading h2 span{color:var(--nv-blue-soft) !important;}
.reference-process-heading p,
.reference-process-card p{color:var(--nv-muted) !important;}
.reference-process-kicker{color:var(--nv-blue-soft) !important;}
.reference-process-card{
    background:var(--nv-panel) !important;
    border:1px solid rgba(225,6,0,.25) !important;
}
.reference-process-card h3{color:var(--nv-text) !important;}
.reference-process-number{
    background:var(--nv-blue) !important;
    color:#fff !important;
}
.reference-process-path .path-start,
.reference-process-path .path-segment{
    background:rgba(225,6,0,.45) !important;
}
.reference-process-path .path-arrow{color:var(--nv-blue-soft) !important;}

/* ---------- Footer ---------- */
.site-footer{
    background:#040a15 !important;
    border-top:1px solid rgba(225,6,0,.2) !important;
    color:var(--nv-text) !important;
}
.footer-brand p,
.footer-links a,
.footer-bottom,
.footer-contact h4,
.footer-contact > a{color:var(--nv-muted) !important;}
.footer-links a:hover{color:var(--nv-blue-soft) !important;}
.footer-cta{
    background:var(--nv-blue) !important;
    color:#fff !important;
    border-color:var(--nv-blue) !important;
}
.footer-logo strong{color:var(--nv-text) !important;}

/* =====================================================================
   HERO BANNER SLIDER — photo -> growth dashboard -> promo banner
   Hero headline text (left column) is untouched by this slider.
===================================================================== */
.banner-slider{
    position:relative;
    width:100%;
    height:100%;
}

.banner-slide{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity:0;
    z-index:1;
    pointer-events:none;
    transition:opacity .7s ease;
}

.banner-slide.is-active{
    opacity:1;
    z-index:2;
    pointer-events:auto;
}

/* Slide 1: photo — FULL BLEED (fills the entire slide area, unlike the
   growth dashboard which stays boxed in the middle) */
.photo-banner{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 46px rgba(0,0,0,.38), 0 0 0 1px rgba(225,6,0,.20);
}
.photo-banner-img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 20%;
}

/* Slide 3: promo banner — FULL BLEED */
.promo-banner{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:14px;
    padding:clamp(24px,5vw,42px);
    border-radius:20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(225,6,0,.28), transparent 55%),
        linear-gradient(150deg, var(--nv-panel), var(--nv-bg-2));
    border:1px solid rgba(225,6,0,.30);
    box-shadow:0 20px 46px rgba(0,0,0,.38);
}
.promo-kicker{
    font-size:11px;
    font-weight:700;
    letter-spacing:2.5px;
    color:var(--nv-blue-soft);
}
.promo-banner h3{
    margin:0;
    font-size:clamp(22px,2.6vw,28px);
    line-height:1.15;
    font-weight:600;
    letter-spacing:-.5px;
    color:var(--nv-text);
}
.promo-banner h3 em{
    font-style:normal;
    color:var(--nv-blue-soft);
}
.promo-banner p{
    margin:0;
    max-width:360px;
    font-size:13px;
    line-height:1.6;
    color:var(--nv-muted);
}

/* Slide 4: services banner — FULL BLEED */
.services-banner{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:16px;
    padding:clamp(24px,5vw,42px);
    border-radius:20px;
    background:
        radial-gradient(circle at 0% 100%, rgba(255,59,48,.20), transparent 55%),
        linear-gradient(160deg, var(--nv-panel), var(--nv-bg-2));
    border:1px solid rgba(225,6,0,.30);
    box-shadow:0 20px 46px rgba(0,0,0,.38);
}
.services-banner .promo-kicker{color:var(--nv-blue-soft);}
.services-banner h3{
    margin:0;
    font-size:clamp(22px,2.6vw,28px);
    line-height:1.15;
    font-weight:600;
    letter-spacing:-.5px;
    color:var(--nv-text);
}
.services-banner h3 em{font-style:normal;color:var(--nv-red);}
.services-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:2px 0 0;
    padding:0;
    max-width:400px;
}
.services-list li{
    list-style:none;
    display:flex;
    align-items:center;
    gap:9px;
    font-size:12.5px;
    font-weight:600;
    color:var(--nv-text);
    background:rgba(255,255,255,.04);
    border:1px solid rgba(225,6,0,.22);
    padding:11px 12px;
    border-radius:10px;
}
.services-list li i{color:var(--nv-blue-soft);font-size:13px;}

/* Slide 5: case study / results banner — FULL BLEED */
.case-banner{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:14px;
    padding:clamp(24px,5vw,42px);
    border-radius:20px;
    background:
        radial-gradient(circle at 100% 100%, rgba(255,59,48,.22), transparent 55%),
        linear-gradient(160deg, var(--nv-bg-2), var(--nv-panel));
    border:1px solid rgba(225,6,0,.30);
    box-shadow:0 20px 46px rgba(0,0,0,.38);
}
.case-banner .promo-kicker{color:var(--nv-red);}
.case-banner h3{
    margin:0;
    font-size:clamp(22px,2.6vw,28px);
    line-height:1.15;
    font-weight:600;
    letter-spacing:-.5px;
    color:var(--nv-text);
}
.case-stat{display:flex;align-items:baseline;gap:12px;margin-top:2px;}
.case-stat strong{
    font-size:clamp(40px,5.5vw,58px);
    font-weight:700;
    color:var(--nv-blue-soft);
    line-height:1;
}
.case-stat span{font-size:13px;color:var(--nv-muted);max-width:180px;line-height:1.4;}
.case-quote{
    max-width:380px;
    font-size:13px;
    line-height:1.6;
    color:var(--nv-muted);
    font-style:italic;
    border-left:2px solid var(--nv-blue);
    padding-left:14px;
}

@media (max-width:900px){
    .services-list{grid-template-columns:1fr;max-width:none;}
    .case-stat strong{font-size:clamp(32px,9vw,44px);}
}
.promo-cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    align-self:flex-start;
    padding:12px 20px;
    border-radius:999px;
    background:var(--nv-blue);
    color:#fff;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    box-shadow:0 12px 26px rgba(225,6,0,.35);
}
.promo-stats{
    display:flex;
    gap:24px;
    margin-top:8px;
}
.promo-stats strong{
    display:block;
    font-size:19px;
    font-weight:600;
    color:var(--nv-text);
}
.promo-stats span{
    display:block;
    margin-top:3px;
    font-size:10px;
    letter-spacing:.4px;
    color:var(--nv-muted);
}

@media (max-width:900px){
    .promo-banner p{display:none;}
    .promo-stats{gap:16px;}
}

/* =====================================================================
   ABOUT PAGE — STANDALONE FULL PAGE
   Natural-scroll page (not the letterboxed hero artboard): header,
   hero (photo collage + content), stats, values, CTA, footer.
===================================================================== */
.about-page{
    position:relative;
    width:100%;
    min-height:100vh;
    background-color:var(--nv-bg);
    background-image:
        linear-gradient(rgba(225,6,0,.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(225,6,0,.09) 1px, transparent 1px),
        radial-gradient(circle at 72% 20%, rgba(225,6,0,.16), transparent 36%);
    background-size:58px 58px, 58px 58px, auto;
    overflow-x:hidden;
}

.about-page .header{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    height:auto;
    padding:26px clamp(20px,4vw,48px) 0;
}
/* Center the nav bar in the middle of the header instead of the side. */
.about-page .header .nav{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
@media(max-width:900px){
    .about-page .header .nav{
        position:static;
        left:auto;
        transform:none;
        margin-top:14px;
        max-width:100%;
        overflow-x:auto;
        justify-content:flex-start;
    }
    .about-page .header{display:flex;flex-wrap:wrap;}
}

/* ---------- HERO ---------- */
.about-hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(30px,5vw,64px);
    align-items:center;
    max-width:1360px;
    margin:0 auto;
    padding:clamp(46px,8vw,92px) clamp(20px,4vw,48px) clamp(60px,8vw,100px);
}

/* Left: photo collage */
.about-photo-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1.35fr 1fr;
    gap:16px;
    height:clamp(360px,42vw,520px);
}
.about-photo-main{
    grid-column:1/3;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 20px 46px rgba(0,0,0,.38), 0 0 0 1px rgba(225,6,0,.20);
}
.about-photo-main img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%;}

.about-stat-card{
    grid-column:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-align:center;
    border-radius:16px;
    background:linear-gradient(160deg, #34c777, #1f9c5a);
    box-shadow:0 16px 34px rgba(31,156,90,.30);
    padding:14px;
}
.about-stat-check{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.22);
    color:#fff;
    font-size:15px;
}
.about-stat-card strong{font-size:clamp(20px,2.4vw,26px);font-weight:700;color:#fff !important;}
.about-stat-card span{font-size:11px;color:rgba(255,255,255,.9) !important;line-height:1.4;}

.about-photo-secondary{
    grid-column:2;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 16px 34px rgba(0,0,0,.32), 0 0 0 1px rgba(225,6,0,.18);
}
.about-photo-secondary img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 65%;}

/* Right: content */
.about-content{display:flex;flex-direction:column;gap:18px;}
.about-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:2.5px;
    color:var(--nv-blue-soft) !important;
}
.about-kicker i{font-size:7px;}
.about-content h1{
    margin:0;
    font-size:clamp(30px,4vw,44px);
    line-height:1.12;
    font-weight:600;
    letter-spacing:-1px;
    color:var(--nv-text) !important;
}
.about-content > p{
    max-width:520px;
    font-size:clamp(14px,1.4vw,16px);
    line-height:1.7;
    color:var(--nv-muted) !important;
}

.about-cta-row{
    display:flex;
    align-items:center;
    gap:22px;
    margin-top:4px;
    flex-wrap:wrap;
}
.about-cta-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 24px;
    border-radius:999px;
    background:var(--nv-blue);
    color:#fff !important;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    box-shadow:0 14px 30px rgba(225,6,0,.35);
    border:none;
    cursor:pointer;
}
.about-cta-btn span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:rgba(255,255,255,.22);
    font-size:10px;
}
.about-founder{display:flex;align-items:center;gap:10px;}
.about-founder-avatar{
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:var(--nv-panel);
    border:1px solid rgba(225,6,0,.35);
    color:var(--nv-blue-soft);
    font-size:16px;
    flex-shrink:0;
}
.about-founder-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 30%;
}
.about-founder strong{display:block;font-size:13px;font-weight:600;color:var(--nv-text) !important;}
.about-founder small{display:block;font-size:11px;color:var(--nv-muted) !important;}

.about-info-row{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:14px;
    margin-top:8px;
}
.about-rating-card,
.about-skills-card{
    border-radius:16px;
    padding:16px 18px;
    background:var(--nv-panel);
    border:1px solid rgba(225,6,0,.25);
}
.about-rating-stars{color:#ffb020;font-size:13px;letter-spacing:2px;margin-bottom:8px;}
.about-rating-card strong{font-size:26px;font-weight:700;color:var(--nv-text) !important;}
.about-rating-card strong small{font-size:13px;font-weight:500;color:var(--nv-muted) !important;}
.about-rating-card span{display:block;margin-top:4px;font-size:11px;color:var(--nv-muted) !important;}

.about-skills-card h4{margin:0 0 10px;font-size:11px;letter-spacing:1.5px;color:var(--nv-blue-soft) !important;font-weight:700;text-transform:uppercase;}
.about-skills-tags{display:flex;flex-wrap:wrap;gap:8px;}
.about-skills-tags span{
    display:inline-block;
    font-size:11px;
    font-weight:600;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(225,6,0,.14);
    border:1px solid rgba(225,6,0,.3);
    color:var(--nv-text) !important;
}

/* ---------- VALUES ---------- */
.about-values{
    padding:0 clamp(20px,4vw,48px) 100px;
    max-width:1200px;
    margin:0 auto;
}
.about-values-heading{max-width:650px;margin:0 auto 46px;text-align:center;}
.about-values-heading h2{font-size:clamp(26px,3.4vw,38px);color:var(--nv-text) !important;font-weight:600;}
.about-values-heading h2 span{color:var(--nv-blue-soft) !important;}
.about-values-heading p{margin-top:10px;color:var(--nv-muted) !important;font-size:15px;}
.about-values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.about-value-card{background:var(--nv-panel);border:1px solid rgba(225,6,0,.25);border-radius:16px;padding:26px 22px;text-align:left;}
.about-value-icon{width:42px;height:42px;border-radius:12px;background:var(--nv-blue);display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;margin-bottom:16px;}
.about-value-card h3{font-size:16px;color:var(--nv-text) !important;margin-bottom:8px;font-weight:600;}
.about-value-card p{font-size:13px;line-height:1.6;color:var(--nv-muted) !important;}

/* ---------- CTA ---------- */
.about-cta{
    max-width:1312px;
    margin:0 auto 90px;
    padding:clamp(36px,6vw,60px);
    border-radius:24px;
    background:linear-gradient(135deg, var(--nv-panel), var(--nv-bg-2));
    border:1px solid rgba(225,6,0,.3);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    flex-wrap:wrap;
}
.about-cta h2{font-size:clamp(22px,2.8vw,30px);color:var(--nv-text) !important;font-weight:600;max-width:520px;margin:0;}
.about-cta p{color:var(--nv-muted) !important;margin-top:8px;font-size:14px;max-width:480px;}

@media (max-width:900px){
    .about-hero{grid-template-columns:1fr;padding-top:110px;}
    .about-photo-grid{order:2;height:340px;}
    .about-content{order:1;}
    .about-info-row{grid-template-columns:1fr;}
    .about-values-grid{grid-template-columns:1fr 1fr;}
    .about-cta{flex-direction:column;align-items:flex-start;}
}

@media (max-width:560px){
    .about-values-grid{grid-template-columns:1fr;}
}


/* =====================================================
   USER UPDATE — FULL HERO BANNER + WHITE/RED BRAND COLORS
===================================================== */

:root{
    --site-red:#e10600;
    --site-white:#ffffff;
    --site-bg:#070707;
}

/* The rotating visual banner now fills the complete hero canvas.
   Hero copy, stats and action buttons remain above it. */
.hero{
    position:absolute;
    overflow:hidden;
    border-radius:20px;
}

.center-content{
    position:static !important;
    height:100%;
}

.banner-slider{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    z-index:1 !important;
    border-radius:20px;
    overflow:hidden;
}

.banner-slide{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
}

.photo-banner,
.promo-banner,
.services-banner,
.case-banner{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    border-radius:20px !important;
}

/* Keep the existing hero content and buttons visible over the banner. */
.left-content,
.right-content,
.bottom-left,
.bottom-right,
.social,
.scroll{
    position:relative;
    z-index:20 !important;
}

.bottom-left{
    position:absolute;
}
.bottom-right{
    position:absolute;
}
.social,
.scroll{
    position:absolute;
}

/* Banner buttons are removed; the original hero buttons remain untouched. */
.banner-slider .promo-cta{
    display:none !important;
}

/* White + red typography only across the website. */
html,
body,
.website,
.inner-website{
    color:var(--site-white) !important;
}

body p,
body small,
body span,
body strong,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body a,
body button,
body label,
body li,
body dt,
body dd,
body blockquote,
body figcaption,
body th,
body td,
body .reference-process-card h3,
body .reference-process-card p,
body .reference-process-heading p,
body .dark-section-heading p,
body .result-label{
    color:var(--site-white) !important;
}

/* Red is the only secondary text color. */
body .hero-line-orange,
body .hero-line-mixed em,
body .count,
body .result-number,
body .growth-heading strong,
body .reference-process-kicker,
body .reference-process-number,
body .reference-process-heading h2 span,
body .dark-section-heading h2 span,
body .promo-kicker,
body .promo-banner h3 em,
body .services-banner h3 em,
body .case-banner h3 em,
body .footer-links a:hover,
body .footer-contact > a{
    color:var(--site-red) !important;
}

/* Process section uses the same website background — never white. */
.reference-process{
    background:var(--site-bg) !important;
    color:var(--site-white) !important;
}

.reference-process-card{
    background:rgba(14,26,48,.78) !important;
    border-color:rgba(255,255,255,.22) !important;
    box-shadow:0 8px 25px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.reference-process-card::after{
    border-color:rgba(255,255,255,.12) !important;
}

.reference-process-card h3,
.reference-process-card p{
    color:var(--site-white) !important;
}

.reference-process-path .path-start{
    background:var(--site-bg) !important;
    border-color:var(--site-red) !important;
}

.reference-process-path .path-segment{
    border-color:rgba(255,255,255,.28) !important;
}

.reference-process-path .path-arrow{
    color:var(--site-red) !important;
}

/* Home trust/results area follows the same dark website background. */
.results-reviews-section,
.our-results-wrap{
    background:var(--site-bg) !important;
    color:var(--site-white) !important;
}

.results-counter-grid .dark-result-card{
    background:rgba(14,26,48,.78) !important;
    border-color:rgba(255,255,255,.16) !important;
}

.dark-section-heading h2,
.dark-section-heading p,
.result-label{
    color:var(--site-white) !important;
}

.dark-section-heading h2 span,
.result-number{
    color:var(--site-red) !important;
}

/* Remove the About-page values and CTA blocks from display. */
.about-values,
.about-cta{
    display:none !important;
}

/* Remove remaining blue/gray text overrides from banner components. */
.promo-banner h3,
.promo-banner p,
.services-banner h3,
.services-list li,
.case-banner h3,
.case-banner p,
.case-stat span{
    color:var(--site-white) !important;
}

.promo-banner h3 em,
.services-banner h3 em,
.case-banner h3 em,
.promo-kicker{
    color:var(--site-red) !important;
}

/* Preserve the original hero action buttons. */
.buttons .start,
.buttons .contact{
    color:var(--site-white) !important;
}

@media (max-width:900px){
    .hero{
        border-radius:0;
    }
    .banner-slider,
    .banner-slide,
    .photo-banner,
    .promo-banner,
    .services-banner,
    .case-banner{
        border-radius:0 !important;
    }
}

/* =====================================================
   FINAL USER UPDATE — STATIC DASHBOARD + DYNAMIC BUTTONS
   + WHITE NAV + REFERENCE-STYLE SERVICES
===================================================== */

:root{
    /* All normal buttons derive their accent from the site background.
       Change --nv-bg once and the button color follows automatically. */
    --dynamic-button:color-mix(in srgb, var(--nv-bg) 72%, #ffffff 28%);
    --dynamic-button-hover:color-mix(in srgb, var(--nv-bg) 58%, #ffffff 42%);
    --dynamic-button-border:color-mix(in srgb, var(--nv-bg) 45%, #ffffff 55%);

    /* Colors sampled/approximated from the supplied service-card reference. */
    --service-bg:#bdbcb7;
    --service-light:#f1f1ec;
    --service-green:#9cda58;
    --service-green-deep:#78b844;
    --service-teal:#063332;
    --service-ink:#173437;
}

/* ---------- 1. Static hero dashboard: no rotating banner ---------- */
.banner-slider,
.banner-slide,
.photo-banner,
.promo-banner,
.services-banner,
.case-banner{
    display:none !important;
}

.center-content{
    position:relative !important;
    height:100% !important;
}

.center-content > .orbit,
.center-content > .orbit-dot,
.center-content > .dashboard{
    display:block !important;
}

/* Keep the original growth dashboard centered after the banner wrapper is removed. */
.center-content > .dashboard{
    position:absolute !important;
    left:50% !important;
    top:68px !important;
    transform:translateX(-50%) !important;
    z-index:10 !important;
}

/* ---------- 2. White navigation bar ---------- */
.nav{
    background:#fff !important;
    border:1px solid rgba(6,13,26,.12) !important;
    border-radius:999px !important;
    box-shadow:0 8px 22px rgba(6,13,26,.13) !important;
    padding:5px !important;
}
.nav a,
.nav a:visited{
    color:var(--nv-bg) !important;
    border-radius:999px !important;
}
.nav a i,
.nav a span{color:inherit !important;}
.nav a.active,
.nav a:hover,
.nav a:focus-visible{
    background:var(--dynamic-button) !important;
    color:#fff !important;
    box-shadow:none !important;
}
.nav a.active i,
.nav a:hover i,
.nav a:focus-visible i{color:#fff !important;}

/* ---------- 3. Dynamic site buttons ---------- */
body button,
body .login,
body .buttons button,
body .about-cta-btn,
body .inner-actions a,
body .footer-cta{
    background:var(--dynamic-button) !important;
    color:#fff !important;
    border-color:var(--dynamic-button-border) !important;
    box-shadow:0 10px 24px color-mix(in srgb, var(--nv-bg) 45%, transparent) !important;
}
body button:hover,
body .login:hover,
body .buttons button:hover,
body .about-cta-btn:hover,
body .inner-actions a:hover,
body .footer-cta:hover{
    background:var(--dynamic-button-hover) !important;
    color:#fff !important;
}

/* Dashboard's small filter button also follows the same dynamic rule. */
.dashboard-header button{
    background:var(--dynamic-button) !important;
    color:#fff !important;
    border-color:var(--dynamic-button-border) !important;
}

/* About page: remove the top-right button that sits after the nav. */
.about-page .header .login{display:none !important;}

/* ---------- 4. Services page — same 3-card visual language as supplied image ---------- */
/* Section chrome now matches the rest of the website's navy background;
   only the three reference cards keep their own light/green/teal colors. */
.services-page,
.services-page html{
    background:var(--nv-bg) !important;
}
.services-page .services-frame{
    width:100vw !important;
    min-height:100vh !important;
    height:100vh !important;
    aspect-ratio:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:var(--nv-bg) !important;
    border:0 !important;
    box-shadow:none !important;
}
.services-page .services-website{
    width:100% !important;
    min-height:100vh !important;
    height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    background-color:var(--nv-bg) !important;
    background-image:
        linear-gradient(rgba(225,6,0,.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(225,6,0,.09) 1px, transparent 1px),
        radial-gradient(circle at 72% 15%, rgba(225,6,0,.16), transparent 36%) !important;
    background-size:58px 58px, 58px 58px, auto !important;
    border:0 !important;
    box-shadow:none !important;
}
.services-page .header{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    height:88px !important;
    padding:15px 4vw 0 !important;
}
.services-page .services-reference{
    min-height:calc(100vh - 88px);
    padding:clamp(24px,5vw,56px) clamp(24px,6vw,90px) 70px;
    background:transparent;
    color:var(--nv-text);
}
.services-reference-heading{
    max-width:780px;
    margin:0 auto clamp(28px,4vw,48px);
    text-align:center;
}
.services-reference-kicker{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:0 17px;
    border-radius:999px;
    background:rgba(225,6,0,.16);
    border:1px solid rgba(225,6,0,.36);
    color:#fff !important;
    font-size:10px;
    font-weight:800;
    letter-spacing:2.4px;
}
.services-reference-heading h1{
    margin:13px 0 9px;
    color:#fff !important;
    font-size:clamp(38px,5vw,66px);
    line-height:.98;
    letter-spacing:-3px;
    font-weight:800;
}
.services-reference-heading h1 span{color:var(--brand-red,#e10600) !important;}
.services-reference-heading p{
    margin:0 auto;
    max-width:620px;
    color:rgba(255,255,255,.72) !important;
    font-size:14px;
    line-height:1.55;
}

/* ===== AUTO-SCROLLING SERVICES MARQUEE (right -> left, pauses on hover) ===== */
.services-reference-viewport{
    width:min(1320px,100%);
    margin:0 auto;
    overflow:hidden;
    isolation:isolate;
}
.services-reference-track{
    display:flex;
    align-items:stretch;
    gap:22px;
    width:max-content;
    padding:4px 4px 34px;
    will-change:transform;
    animation:servicesTrackScroll 32s linear infinite;
}
.services-reference-viewport:hover .services-reference-track,
.services-reference-viewport:focus-within .services-reference-track{
    animation-play-state:paused;
}
.services-reference-track .service-reference-card{
    flex:0 0 380px;
    width:380px;
}
@keyframes servicesTrackScroll{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(calc(-50% - 11px),0,0);}
}
@media(max-width:900px){
    .services-reference-track .service-reference-card{flex:0 0 300px;width:300px;}
    .services-reference-track{animation-duration:24s;}
}
@media(prefers-reduced-motion:reduce){
    .services-reference-track{animation:none !important;transform:none !important;}
}
.service-reference-card{
    position:relative;
    min-height:390px;
    padding:38px 38px 70px;
    border-radius:20px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:0 12px 26px rgba(20,30,25,.10);
}
.service-reference-card::after{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    right:-55px;
    bottom:-58px;
    border-radius:50%;
    background:rgba(0,0,0,.055);
}
.service-card-light{background:var(--service-light);color:var(--service-ink);}
.service-card-green{background:var(--service-green);color:#1f3d25;}
.service-card-teal{background:var(--service-teal);color:#eaf7ed;}
.service-reference-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    font-size:30px;
    position:relative;
    z-index:2;
    margin-bottom:25px;
}
.service-card-light .service-reference-icon{color:#294144;}
.service-card-green .service-reference-icon{color:#254b2b;}
.service-card-teal .service-reference-icon{color:#9bd65b;}
.service-reference-copy{position:relative;z-index:2;}
.service-reference-copy h2{
    margin:0 0 21px;
    font-size:clamp(23px,2.2vw,31px);
    line-height:1.03;
    letter-spacing:-1px;
    font-weight:800;
}
.service-card-light .service-reference-copy h2{color:var(--service-ink) !important;}
.service-card-green .service-reference-copy h2{color:#29462a !important;}
.service-card-teal .service-reference-copy h2{color:#f0f7f0 !important;}
.service-reference-copy p{
    max-width:330px;
    margin:0;
    font-size:13px;
    line-height:1.65;
}
.service-card-light .service-reference-copy p{color:rgba(23,52,55,.72) !important;}
.service-card-green .service-reference-copy p{color:rgba(34,67,37,.82) !important;}
.service-card-teal .service-reference-copy p{color:rgba(231,245,236,.74) !important;}
.service-reference-button{
    position:absolute;
    z-index:3;
    left:38px;
    bottom:22px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 15px;
    border-radius:999px;
    text-decoration:none;
    font-size:11px;
    font-weight:800;
    transition:transform .2s ease,background .2s ease;
}
.service-reference-button span{font-size:17px;line-height:10px;}
.service-card-light .service-reference-button{
    background:#dfe1db;
    color:var(--service-ink) !important;
}
.service-card-green .service-reference-button{
    background:#76bb40;
    color:#183c20 !important;
}
.service-card-teal .service-reference-button{
    background:#062826;
    color:#f1f8f2 !important;
}
.service-reference-button:hover{transform:translateY(-2px);}

@media(max-width:900px){
    .services-page .header{height:auto !important;padding:14px 18px 0 !important;}
    .services-page .nav{max-width:100%;overflow-x:auto;justify-content:flex-start;}
    .services-page .nav a{flex:0 0 auto;}
    .services-page .services-reference{padding:32px 18px 55px;}
    .services-reference-grid{grid-template-columns:1fr;max-width:520px;}
    .service-reference-card{min-height:340px;padding:30px 28px 66px;}
    .service-reference-button{left:28px;}
}

@media(max-width:560px){
    .services-page .header .login{display:none !important;}
    .services-page .header{justify-content:center;}
    .services-page .header .logo{display:none;}
    .services-page .nav a{padding:0 13px;font-size:11px;}
    .services-reference-heading h1{letter-spacing:-2px;}
}

/* =====================================================
   PAGE-TRANSITION LOADER
   A short full-screen loading animation plays whenever the
   visitor moves between pages via the nav bar, logo, or any
   internal link — instead of a plain instant page swap.
===================================================== */
.page-loader{
    position:fixed;
    inset:0;
    z-index:99999;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--nv-bg, #070707);
    background-image:
        radial-gradient(circle at 50% 45%, rgba(225,6,0,.20), transparent 60%);

    opacity:1;
    visibility:visible;
    transition:opacity .32s ease;
}
.page-loader.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
.page-loader-mark{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
}
.page-loader-ring{
    width:46px;
    height:46px;
    border-radius:50%;
    border:3px solid rgba(225,6,0,.25);
    border-top-color:var(--nv-blue, #e10600);
    animation:page-loader-spin .75s linear infinite;
}
.page-loader-label{
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:3px;
    color:var(--nv-muted, #b3b3b3);
    text-transform:uppercase;
}
@keyframes page-loader-spin{
    to{transform:rotate(360deg);}
}
@media (prefers-reduced-motion:reduce){
    .page-loader-ring{animation-duration:1.4s;}
}

/* =====================================================
   PROCESS PATH — SVG CONNECTOR (JS-drawn)
   Replaces the old fixed-angle dashed segments; the line is
   redrawn in script.js to match each circle's real position,
   so it stays perfectly connected at any screen width.
===================================================== */
/* The path wrapper now spans the full flow area (instead of the old
   2px centered strip) so the JS-measured coordinates in script.js
   line up exactly with the circles regardless of screen width. */
.reference-process-path{
    top:0 !important;
    height:100% !important;
    transform:none !important;
}
.process-path-line{
    stroke:rgba(255,255,255,.32);
    stroke-width:2;
    stroke-dasharray:7 7;
}
.process-path-start-dot{
    fill:var(--site-bg, #070707);
    stroke:var(--site-red, #e10600);
    stroke-width:4;
}


/* =====================================================
   BOOKING PAGE — COMPLETE FORM LAYOUT
===================================================== */
.booking-page{
    min-height:100vh;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 84% 18%, rgba(225,6,0,.10), transparent 28%),
        linear-gradient(180deg,#f7f7f5 0%,#ececea 100%);
    color:#151515;
    padding-top:112px;
}
.booking-page .header{
    position:absolute;
    top:18px;
}
.booking-page .site-logo{display:block;width:148px;height:auto;}
.booking-hero,
.booking-layout{
    width:min(1240px,calc(100% - 64px));
    margin-left:auto;
    margin-right:auto;
}
.booking-hero{
    padding:42px 0 28px;
    max-width:1240px;
}
.booking-hero .detail-kicker{
    display:inline-block;
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
    color:#e10600;
    margin-bottom:12px;
}
.booking-hero .detail-title{
    font-size:clamp(42px,5vw,76px);
    line-height:.95;
    letter-spacing:-3px;
    margin:0 0 16px;
    font-weight:800;
}
.booking-hero .detail-title span{color:#e10600;}
.booking-hero .detail-intro{
    max-width:690px;
    color:#555;
    font-size:17px;
    line-height:1.65;
    margin:0;
}
.booking-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:34px;
    align-items:start;
    padding:20px 0 90px;
}
.booking-form-card{
    position:relative;
    background:#fff;
    border:1px solid #dedede;
    border-radius:22px;
    padding:34px;
    box-shadow:0 20px 55px rgba(0,0,0,.10);
}
#booking-form{display:block;}
.booking-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:19px;
}
.booking-field{display:flex;flex-direction:column;gap:8px;margin-bottom:19px;}
.booking-form-row .booking-field{margin-bottom:0;}
.booking-field label{
    font-size:13px;
    font-weight:700;
    color:#222;
}
.booking-field label small{font-weight:500;color:#888;}
.booking-field input,
.booking-field select,
.booking-field textarea{
    width:100%;
    border:1px solid #d9d9d9;
    background:#fafafa;
    border-radius:9px;
    outline:none;
    color:#191919;
    font:inherit;
    font-size:14px;
    padding:13px 14px;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.booking-field input,
.booking-field select{height:48px;}
.booking-field textarea{height:118px;resize:vertical;line-height:1.5;}
.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus{
    border-color:#e10600;
    background:#fff;
    box-shadow:0 0 0 4px rgba(225,6,0,.09);
}
.booking-submit{
    width:100%;
    min-height:52px;
    border:0;
    border-radius:10px;
    cursor:pointer;
    font-weight:800;
    font-size:15px;
}
.booking-note{
    margin:15px 0 0;
    color:#777;
    font-size:13px;
    line-height:1.5;
}
.booking-side{display:grid;gap:18px;}
.booking-side-card{
    background:#111827;
    color:#fff;
    padding:28px 25px;
    border-radius:20px;
    box-shadow:0 18px 45px rgba(0,0,0,.16);
}
.booking-side-card h3{font-size:20px;margin:0 0 20px;}
.booking-side-list{list-style:none;margin:0;padding:0;display:grid;gap:18px;}
.booking-side-list li{display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,.75);font-size:13px;line-height:1.5;}
.booking-side-list i{color:#ff3b30;margin-top:3px;}
.booking-success{
    position:absolute;
    inset:0;
    z-index:5;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:38px;
    border-radius:22px;
    background:rgba(255,255,255,.98);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:scale(.98);
    transition:opacity .3s ease,transform .3s ease,visibility .3s ease;
}
.booking-success.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:scale(1);
}
.booking-success-check{width:76px;height:76px;margin-bottom:18px;}
.booking-success-check circle{fill:none;stroke:#e10600;stroke-width:4;}
.booking-success-check path{fill:none;stroke:#e10600;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}
.booking-success h2{font-size:30px;margin:0 0 12px;}
.booking-success p{max-width:570px;color:#666;line-height:1.6;margin:0;}
.booking-success-actions{display:flex;gap:12px;margin-top:25px;justify-content:center;}
.booking-success-actions a,
.booking-success-actions button{
    min-height:46px;
    padding:0 18px;
    border-radius:9px;
    font:inherit;
    font-weight:700;
    text-decoration:none;
    cursor:pointer;
}
.booking-success-actions .cta-red-btn{
    background:#e10600;color:#fff;border:0;display:inline-flex;align-items:center;
}
.cta-ghost-btn{background:#fff;border:1px solid #ccc;color:#222;}

@media(max-width:900px){
    .booking-page{padding-top:76px;}
    .booking-page .header{
        position:relative;
        left:0;right:0;top:0;
        width:calc(100% - 24px);
        margin:0 auto;
        padding:8px 0;
    }
    .booking-page .nav{display:none;}
    .booking-page .site-logo{width:115px;}
    .booking-page .login{width:auto;padding:0 15px;height:38px;font-size:11px;}
    .booking-hero,.booking-layout{width:calc(100% - 28px);}
    .booking-hero{padding:28px 0 20px;}
    .booking-hero .detail-title{font-size:42px;letter-spacing:-2px;}
    .booking-hero .detail-intro{font-size:14px;}
    .booking-layout{grid-template-columns:1fr;gap:22px;padding-bottom:55px;}
    .booking-form-card{padding:20px 16px;border-radius:16px;}
    .booking-form-row{grid-template-columns:1fr;gap:18px;margin-bottom:18px;}
    .booking-form-row .booking-field{margin-bottom:0;}
    .booking-success{padding:24px 16px;}
    .booking-success h2{font-size:24px;}
}
@media(max-width:480px){
    .booking-success-actions{flex-direction:column;width:100%;}
    .booking-success-actions a,.booking-success-actions button{width:100%;justify-content:center;}
}

/* ABOUT REVIEWS — FORCE SMOOTH RIGHT-TO-LEFT MARQUEE */
.about-reviews-viewport{overflow:hidden !important;}
.about-reviews-track{
    animation:aboutReviewsScroll 32s linear infinite !important;
    transform:translate3d(0,0,0);
}
@keyframes aboutReviewsScroll{
    0%{transform:translate3d(0,0,0);}
    100%{transform:translate3d(calc(-50% - 13px),0,0);}
}

/* =====================================================
   SELL MEK — ABOUT GROWTH BANNER SLIDER
===================================================== */
.about-growth-slider{position:relative;min-height:570px;border-radius:30px;overflow:hidden;background:#0d1930;border:1px solid rgba(255,255,255,.13);box-shadow:0 24px 65px rgba(0,0,0,.3)}
.growth-banner-track{height:570px;display:flex;transition:transform .75s cubic-bezier(.22,.8,.25,1);will-change:transform}
.growth-banner{position:relative;flex:0 0 100%;min-width:100%;padding:60px 54px;color:#fff;overflow:hidden;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 82% 18%,rgba(225,6,0,.34),transparent 26%),linear-gradient(135deg,#111f3a,#071120)}
.growth-banner-two{background:radial-gradient(circle at 18% 20%,rgba(255,255,255,.11),transparent 22%),linear-gradient(135deg,#23131a,#071120)}
.growth-banner-three{background:radial-gradient(circle at 80% 20%,rgba(255,74,74,.23),transparent 24%),linear-gradient(135deg,#0b2630,#071120)}
.growth-banner-four{background:radial-gradient(circle at 20% 75%,rgba(225,6,0,.28),transparent 27%),linear-gradient(135deg,#24131a,#081222)}
.growth-banner-glow{position:absolute;width:240px;height:240px;border:1px solid rgba(255,255,255,.18);border-radius:50%;right:-50px;bottom:45px;box-shadow:0 0 0 48px rgba(255,255,255,.025),0 0 0 96px rgba(255,255,255,.018)}
.growth-banner-tag{display:inline-flex;width:max-content;padding:8px 13px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.06);font-size:10px;font-weight:800;letter-spacing:1.8px;color:#fff !important;margin-bottom:22px}
.growth-banner h2{position:relative;max-width:530px;margin:0 0 17px;font-size:clamp(42px,4vw,68px);line-height:.98;letter-spacing:-3px;color:#fff !important}.growth-banner h2 em{color:var(--site-red,#e10600) !important;font-style:normal}.growth-banner p{position:relative;max-width:500px;font-size:16px;line-height:1.65;color:rgba(255,255,255,.76) !important}
.growth-metrics{position:relative;display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.growth-metrics span{padding:12px 15px;border-radius:13px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:12px;color:#fff !important}.growth-metrics b{display:block;font-size:20px;color:#fff !important}.growth-banner-icon{position:absolute;right:52px;bottom:52px;font-size:120px;color:rgba(255,255,255,.08) !important;transform:rotate(-12deg)}
.growth-slider-controls{position:absolute;z-index:3;left:30px;right:30px;bottom:24px;display:flex;align-items:center;justify-content:space-between}.growth-slide-btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(5,12,25,.45);color:#fff;cursor:pointer;transition:.25s}.growth-slide-btn:hover{background:var(--site-red,#e10600);transform:scale(1.08)}.growth-slider-dots{display:flex;gap:7px}.growth-slider-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.35);cursor:pointer;transition:.3s}.growth-slider-dots button.active{width:28px;background:var(--site-red,#e10600)}
/* About review stream now moves continuously from left to right. */
.about-reviews-track{animation:aboutReviewsScrollLTR 36s linear infinite !important}.about-reviews-track:hover{animation-play-state:paused}@keyframes aboutReviewsScrollLTR{from{transform:translate3d(calc(-50% - 13px),0,0)}to{transform:translate3d(0,0,0)}}

/* =====================================================
   MEETING HISTORY + BOOKING BRAND THEME
===================================================== */
.meeting-badge{display:none;min-width:17px;height:17px;padding:0 5px;border-radius:99px;background:var(--site-red,#e10600);color:#fff !important;font-size:9px;line-height:17px;text-align:center;box-shadow:0 0 0 2px rgba(6,13,26,.65)}.meeting-badge.is-visible{display:inline-block}.history-nav-link{position:relative}
.booking-page{background:radial-gradient(circle at 80% 16%,rgba(225,6,0,.15),transparent 25%),linear-gradient(180deg,#0d0d0d,#070707) !important;color:#fff !important}.booking-page .header{background:transparent !important}.booking-hero .detail-title,.booking-hero .detail-intro,.booking-field label,.booking-note{color:#fff !important}.booking-hero .detail-intro,.booking-note{color:rgba(255,255,255,.68) !important}.booking-form-card{background:rgba(17,17,17,.92) !important;border-color:rgba(255,255,255,.13) !important;box-shadow:0 24px 60px rgba(0,0,0,.28) !important}.booking-field input,.booking-field select,.booking-field textarea{background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.14) !important;color:#fff !important}.booking-field option{background:#111111;color:#fff}.booking-success{background:rgba(10,10,10,.98) !important}.booking-success h2,.booking-success p{color:#fff !important}.booking-success p{color:rgba(255,255,255,.72) !important}.cta-ghost-btn{background:transparent !important;border-color:rgba(255,255,255,.25) !important;color:#fff !important}
.history-page{min-height:100vh;background:radial-gradient(circle at 82% 14%,rgba(225,6,0,.14),transparent 25%),#070707;color:#fff;padding-top:110px}.history-main{width:min(1120px,calc(100% - 48px));margin:auto;padding:42px 0 80px}.history-hero{text-align:center;margin-bottom:40px}.history-kicker{display:inline-block;padding:8px 13px;border-radius:99px;background:rgba(225,6,0,.14);border:1px solid rgba(225,6,0,.35);font-size:10px;font-weight:800;letter-spacing:2px}.history-hero h1{font-size:clamp(48px,6vw,76px);letter-spacing:-3px;margin:16px 0 12px;color:#fff !important}.history-hero h1 span{color:var(--site-red,#e10600) !important}.history-hero p{max-width:600px;margin:auto;color:rgba(255,255,255,.7) !important}.meeting-history-list{display:grid;gap:20px}.meeting-history-card{position:relative;padding:30px;border-radius:24px;background:rgba(14,26,48,.85);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.2);animation:meetingCardIn .6s both}.meeting-history-card:nth-child(2){animation-delay:.1s}.meeting-history-card:nth-child(3){animation-delay:.2s}@keyframes meetingCardIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}.meeting-status{position:absolute;top:22px;right:24px;padding:7px 11px;border-radius:99px;background:rgba(225,6,0,.14);color:#fff !important;border:1px solid rgba(225,6,0,.3);font-size:10px;font-weight:800}.meeting-history-card h2{margin:0 0 6px;font-size:26px;color:#fff !important}.meeting-meta{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0;color:rgba(255,255,255,.7) !important;font-size:13px}.meeting-meta span i{color:var(--site-red,#e10600);margin-right:6px}.meeting-countdown{display:flex;gap:10px;margin-top:22px}.countdown-unit{min-width:78px;padding:12px 9px;text-align:center;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}.countdown-unit b{display:block;font-size:26px;color:#fff !important}.countdown-unit small{font-size:9px;letter-spacing:1px;color:rgba(255,255,255,.55) !important}.meeting-empty{text-align:center;padding:60px 20px;border:1px dashed rgba(255,255,255,.2);border-radius:24px;color:rgba(255,255,255,.7) !important}.meeting-empty a{color:var(--site-red,#e10600) !important;font-weight:800}

/* Desktop services: large cards and manual left/right sliding. */
.services-slider-shell{position:relative;width:min(1540px,100%);margin:auto}.services-reference-viewport{width:100% !important}.services-reference-track{animation:none !important;transition:transform .65s cubic-bezier(.22,.8,.25,1);gap:30px}.services-reference-track .service-reference-card{flex:0 0 min(42vw,560px) !important;width:min(42vw,560px) !important;min-height:510px !important;padding:52px 48px 88px !important}.services-slide-control{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:52px;height:52px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:#0d1930;color:#fff;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.25);transition:.25s}.services-slide-control:hover{background:var(--site-red,#e10600);transform:translateY(-50%) scale(1.08)}.services-prev{left:-26px}.services-next{right:-26px}
@media(max-width:900px){.about-growth-slider,.growth-banner-track{min-height:480px;height:480px}.growth-banner{padding:45px 30px}.growth-banner-icon{font-size:82px;right:25px;bottom:70px}.services-slider-shell{width:100%}.services-slide-control{display:none}.services-reference-track{animation:servicesTrackScroll 30s linear infinite !important}.services-reference-track .service-reference-card{flex:0 0 300px !important;width:300px !important;min-height:390px !important;padding:38px 38px 70px !important}.history-page{padding-top:76px}.history-main{width:calc(100% - 28px)}.meeting-history-card{padding:24px 18px}.meeting-status{position:static;display:inline-block;margin-bottom:14px}.countdown-unit{min-width:0;flex:1}.countdown-unit b{font-size:20px}}


/* =====================================================================
   AGENCY UPDATE PACK — appended below
   1) Nav overflow safeguard (Our Tools / Contact Us added)
   2) About page banner grid + white review text
   3) Service detail pages — centered heading, nicer points, FAQ
   4) Booking form polish
   5) Meeting history — enterprise upgrade
   6) Contact Us page
   7) Our Tools page
===================================================================== */

/* ---------- 1) NAV OVERFLOW SAFEGUARD ---------- */
.header .nav{flex:1 1 auto !important;min-width:0 !important;overflow-x:auto !important;scrollbar-width:none !important;-ms-overflow-style:none !important;}
.header .nav::-webkit-scrollbar{display:none !important;}
.nav a{padding:0 12px !important;}

/* ---------- 2) ABOUT PAGE — BANNER GRID (replaces slider) ---------- */
.about-banner-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    gap:16px;
    min-height:570px;
}
.about-banner-photo{
    position:relative;
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.13);
    box-shadow:0 20px 50px rgba(0,0,0,.28);
    min-height:190px;
    background:#0d1930;
}
.about-banner-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.about-banner-photo-main{grid-column:1 / -1;min-height:300px;}
.about-banner-stat{
    grid-column:1 / 2;
    border-radius:24px;
    padding:28px 24px;
    background:linear-gradient(135deg,#18b25a,#0d8f3f);
    color:#fff !important;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    box-shadow:0 20px 45px rgba(15,120,60,.35);
}
.about-banner-stat-icon{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;margin-bottom:6px;color:#fff;font-size:14px;}
.about-banner-stat strong{font-size:38px;letter-spacing:-1px;color:#fff !important;}
.about-banner-stat span{font-size:13px;font-weight:700;opacity:.95;color:#fff !important;}
.about-banner-photo-secondary{grid-column:2 / 3;min-height:150px;}
@media(max-width:900px){
    .about-banner-grid{grid-template-columns:1fr;grid-template-rows:auto;min-height:0;}
    .about-banner-photo-main,.about-banner-stat,.about-banner-photo-secondary{grid-column:1 / -1;}
}

/* Reviews — dark card with white text (was white card / dark text) */
#about-stats .about-review-bubble{background:var(--dark-panel,#0b203b) !important;border:1px solid rgba(255,255,255,.12);}
#about-stats .about-review-bubble::after{background:var(--dark-panel,#0b203b) !important;}
#about-stats .about-review-bubble p{color:#fff !important;}
#about-stats .about-review-stars{color:#e10600 !important;}

/* ---------- 3) SERVICE DETAIL PAGES ("Explore More") ---------- */
.service-detail .inner-content{align-items:center;text-align:center;}
.service-detail .inner-kicker{margin-left:auto;margin-right:auto;}
.service-detail .inner-content h1{max-width:820px;margin-left:auto;margin-right:auto;}
.service-detail .inner-content > p{margin-left:auto;margin-right:auto;}
.service-detail .inner-feature-list{max-width:820px;margin:32px auto 0;grid-template-columns:1fr 1fr;text-align:left;}
.service-detail .inner-feature-list li{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
    padding:16px 18px;
    transition:transform .2s ease,background .2s ease;
}
.service-detail .inner-feature-list li:hover{background:rgba(255,255,255,.09);transform:translateY(-2px);}
.service-detail .inner-feature-list li i{font-size:17px;}
.service-detail .inner-actions{justify-content:center;}
@media(max-width:760px){.service-detail .inner-feature-list{grid-template-columns:1fr;}}

.service-faq{width:100%;max-width:820px;margin:56px auto 0;text-align:left;}
.service-faq-heading{text-align:center;margin-bottom:26px;}
.service-faq-heading span{display:inline-block;font-size:11px;font-weight:800;letter-spacing:2px;color:#e10600;margin-bottom:8px;}
.service-faq-heading h2{font-size:clamp(24px,3vw,32px);color:#fff !important;margin:0 0 8px;letter-spacing:-1px;}
.service-faq-heading p{color:rgba(255,255,255,.62);margin:0;font-size:14px;}
.faq-item{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:4px 22px;margin-bottom:12px;}
.faq-item summary{cursor:pointer;list-style:none;padding:16px 34px 16px 0;font-weight:700;font-size:15px;color:#fff;position:relative;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";position:absolute;right:2px;top:12px;font-size:22px;color:#e10600;font-weight:400;}
.faq-item[open] summary::after{content:"\2013";}
.faq-item p{margin:0 0 18px;color:rgba(255,255,255,.72);font-size:14px;line-height:1.6;}

/* ---------- 4) BOOKING FORM POLISH ---------- */
.booking-field-hint{display:block;margin-top:2px;font-size:11.5px;color:#888;}
.booking-side-card.booking-side-trust{background:linear-gradient(135deg,#0d1930,#111827);border:1px solid rgba(255,140,0,.22);}
.booking-side-kicker{display:block;font-size:10px;font-weight:800;letter-spacing:2px;color:#e10600;margin-bottom:10px;}
.booking-side-card h3 small{display:block;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.55);margin-top:6px;}

/* ---------- 5) MEETING HISTORY — ENTERPRISE UPGRADE ---------- */
.history-summary-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:34px;}
.history-summary-card{background:rgba(14,26,48,.85);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:20px 22px;display:flex;align-items:center;gap:14px;}
.history-summary-icon{width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:rgba(225,6,0,.15);color:var(--site-red,#e10600);display:flex;align-items:center;justify-content:center;font-size:17px;}
.history-summary-text span{display:block;font-size:10.5px;letter-spacing:1.5px;color:rgba(255,255,255,.5);font-weight:800;margin-bottom:6px;text-transform:uppercase;}
.history-summary-text strong{font-size:24px;color:#fff;}
.meeting-history-card{border-radius:20px;}
.meeting-history-card .meeting-ref{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:1.5px;color:rgba(255,255,255,.4);margin-bottom:10px;text-transform:uppercase;}
.meeting-link-row{margin-top:10px;}
.meeting-link-row a{color:#e10600 !important;font-weight:700;font-size:12.5px;text-decoration:none;}
.meeting-link-row a:hover{text-decoration:underline;}
@media(max-width:900px){.history-summary-bar{grid-template-columns:1fr;}}

/* ---------- 6) CONTACT US PAGE ---------- */
.contact-page{
    min-height:100vh;position:relative;overflow:hidden;
    background:radial-gradient(circle at 84% 12%, rgba(225,6,0,.14), transparent 28%),linear-gradient(180deg,#091426,#070707);
    color:#fff;padding-top:112px;
}
.contact-page .header{position:absolute;top:18px;}
.contact-page .site-logo{display:block;width:148px;height:auto;}
.contact-hero{width:min(900px,calc(100% - 48px));margin:0 auto;text-align:center;padding:30px 0 34px;}
.contact-hero .detail-kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:2px;color:#ff3b30;margin-bottom:12px;}
.contact-hero .detail-title{font-size:clamp(38px,5vw,64px);line-height:.98;letter-spacing:-2px;margin:0 0 16px;font-weight:800;color:#fff;}
.contact-hero .detail-title span{color:#e10600;}
.contact-hero .detail-intro{max-width:640px;margin:0 auto;color:rgba(255,255,255,.68);font-size:16px;line-height:1.6;}

.contact-highlight-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:26px;}
.contact-highlight-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:12px;background:#e10600;color:#fff !important;font-weight:800;font-size:14.5px;text-decoration:none;box-shadow:0 14px 30px rgba(255,105,0,.28);transition:transform .2s ease;}
.contact-highlight-btn:hover{transform:translateY(-2px);}
.contact-highlight-btn.is-outline{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);box-shadow:none;}

.contact-direct-grid{width:min(1000px,calc(100% - 48px));margin:44px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.contact-direct-card{background:rgba(14,26,48,.85);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:28px;text-align:center;}
.contact-direct-card h3{margin:0 0 6px;font-size:17px;color:#fff !important;}
.contact-direct-card h3 span{color:#e10600;}
.contact-direct-card p{margin:0 0 18px;color:rgba(255,255,255,.6);font-size:13px;}
.contact-direct-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:10px;font-weight:700;font-size:13.5px;text-decoration:none;color:#fff !important;}
.contact-direct-btn.fb{background:#1877f2;}
.contact-direct-btn.wa{background:#25d366;}

.contact-layout{width:min(1100px,calc(100% - 48px));margin:52px auto 90px;display:grid;grid-template-columns:0.85fr 1.15fr;gap:34px;align-items:start;}
.contact-info-card{background:rgba(14,26,48,.85);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:32px;}
.contact-info-card h3{margin:0 0 18px;font-size:19px;color:#fff !important;}
.contact-info-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:16px;}
.contact-info-list li{display:flex;gap:14px;align-items:flex-start;font-size:13.5px;color:rgba(255,255,255,.75);}
.contact-info-list a{color:rgba(255,255,255,.85);text-decoration:none;}
.contact-info-list a:hover{color:#e10600;}
.contact-info-list i{width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:rgba(255,105,0,.14);color:#e10600;display:flex;align-items:center;justify-content:center;}
.contact-social-row{display:flex;gap:10px;flex-wrap:wrap;}
.contact-social-row a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:.2s;}
.contact-social-row a:hover{background:#e10600;border-color:#e10600;}

.contact-form-card{background:#fff;color:#151515;border-radius:22px;padding:34px;box-shadow:0 20px 55px rgba(0,0,0,.25);}
.contact-form-card h3{margin:0 0 20px;font-size:19px;color:#151515;}
.contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:19px;}
.contact-field{display:flex;flex-direction:column;gap:8px;margin-bottom:19px;}
.contact-form-row .contact-field{margin-bottom:0;}
.contact-field label{font-size:13px;font-weight:700;color:#222;}
.contact-field input,.contact-field textarea{width:100%;border:1px solid #d9d9d9;background:#fafafa;border-radius:9px;outline:none;color:#191919;font:inherit;font-size:14px;padding:13px 14px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;}
.contact-field input{height:48px;}
.contact-field textarea{height:130px;resize:vertical;line-height:1.5;}
.contact-field input:focus,.contact-field textarea:focus{border-color:#e10600;background:#fff;box-shadow:0 0 0 4px rgba(255,105,0,.12);}
.contact-submit{width:100%;min-height:52px;border:0;border-radius:10px;cursor:pointer;font-weight:800;font-size:15px;background:#e10600;color:#fff;}
.contact-form-note{margin:14px 0 0;font-size:12.5px;color:#777;text-align:center;}
.contact-form-success{margin-top:14px;font-size:13px;color:#0d8f3f;font-weight:700;text-align:center;display:none;}
.contact-form-success.is-visible{display:block;}

@media(max-width:900px){
    .contact-direct-grid,.contact-layout{grid-template-columns:1fr;}
    .contact-form-row{grid-template-columns:1fr;}
    .contact-page{padding-top:76px;}
}

/* ---------- 7) OUR TOOLS PAGE ---------- */
.tools-page{
    min-height:100vh;position:relative;overflow:hidden;
    background:radial-gradient(circle at 84% 12%, rgba(225,6,0,.14), transparent 28%),linear-gradient(180deg,#091426,#070707);
    color:#fff;padding-top:112px;
}
.tools-page .header{position:absolute;top:18px;}
.tools-page .site-logo{display:block;width:148px;height:auto;}
.tools-hero{width:min(900px,calc(100% - 48px));margin:0 auto;text-align:center;padding:30px 0 40px;}
.tools-hero .detail-kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:2px;color:#ff3b30;margin-bottom:12px;}
.tools-hero .detail-title{font-size:clamp(38px,5vw,64px);line-height:.98;letter-spacing:-2px;margin:0 0 16px;font-weight:800;color:#fff;}
.tools-hero .detail-title span{color:#e10600;}
.tools-hero .detail-intro{max-width:640px;margin:0 auto;color:rgba(255,255,255,.68);font-size:16px;line-height:1.6;}
.tools-grid{width:min(1100px,calc(100% - 48px));margin:0 auto 90px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.tool-card{background:rgba(14,26,48,.85);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:30px 26px;transition:transform .2s ease,border-color .2s ease;}
.tool-card:hover{transform:translateY(-4px);border-color:rgba(255,105,0,.4);}
.tool-card-icon{width:52px;height:52px;border-radius:14px;background:rgba(255,105,0,.14);color:#e10600;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px;}
.tool-card h3{margin:0 0 10px;font-size:18px;color:#fff;}
.tool-card p{margin:0 0 18px;color:rgba(255,255,255,.65);font-size:13.5px;line-height:1.6;}
.tool-card a{color:#e10600;font-weight:700;font-size:13px;text-decoration:none;}
.tool-card a:hover{text-decoration:underline;}
@media(max-width:900px){.tools-grid{grid-template-columns:1fr;}.tools-page{padding-top:76px;}}

/* =====================================================
   2026 ENTERPRISE POLISH — NAV / PROFILE / SIGNALS
===================================================== */
:root{--sm-red:#e10600;--sm-orange:#e10600;--sm-ink:#081321;--sm-muted:rgba(255,255,255,.68);}
.header{gap:18px;}
.header .nav{flex:1;min-width:0;justify-content:flex-start;overflow-x:auto;overflow-y:visible;scrollbar-width:none;background:rgba(9,22,38,.86);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px;box-shadow:0 16px 38px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.header .nav::-webkit-scrollbar{display:none}
.header .nav .nav-brand{width:auto;display:flex;align-items:center;flex:0 0 auto;padding:0 20px 0 10px;margin-right:4px;border-right:1px solid rgba(255,255,255,.1)}
.header .nav .nav-brand .site-logo{display:block;width:122px;height:auto;max-height:34px;object-fit:contain}
.header .nav a{height:38px;border-radius:999px;padding:0 15px;color:rgba(255,255,255,.74);font-size:12px;gap:7px;transition:background .25s ease,color .25s ease,transform .25s ease;}
.header .nav a i{font-size:11px;opacity:.8}.header .nav a:hover{color:#fff;background:rgba(255,255,255,.07);transform:translateY(-1px)}
.header .nav .active{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.12)}
.header .nav .meeting-badge{display:none;min-width:17px;height:17px;padding:0 5px;align-items:center;justify-content:center;border-radius:999px;background:var(--sm-orange);color:#fff;font-size:9px;line-height:17px;box-shadow:0 4px 12px rgba(255,105,0,.3)}
.header .nav .meeting-badge.is-visible{display:inline-flex}
.header .login{flex:0 0 auto;border:1px solid rgba(255,255,255,.16);background:#fff;color:#101820!important;text-decoration:none;border-radius:999px;height:44px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);transition:.25s}
.header .login:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.2)}
.profile-trigger{position:relative}.profile-menu{position:fixed;z-index:9999;width:220px;padding:8px;background:rgba(9,20,34,.96);border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.32);backdrop-filter:blur(18px);display:none}.profile-menu.is-open{display:block;animation:profileIn .18s ease}@keyframes profileIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}.profile-menu .profile-name{padding:10px 12px 12px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:5px}.profile-menu .profile-name small{display:block;color:rgba(255,255,255,.45);font-size:9px;letter-spacing:1.5px;text-transform:uppercase}.profile-menu .profile-name strong{display:block;color:#fff;font-size:14px;margin-top:4px}.profile-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:rgba(255,255,255,.8);text-decoration:none;font-size:12px}.profile-menu a:hover{background:rgba(255,255,255,.08);color:#fff}.profile-menu a i{width:16px;color:var(--sm-orange)}

.enterprise-signal{display:grid;grid-template-columns:1.15fr 2fr;gap:30px;align-items:center;padding:28px clamp(28px,5vw,76px);background:linear-gradient(135deg,#081321,#102238);color:#fff;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}.signal-intro span,.case-preview-heading>span,.service-objectives-heading>span{display:block;color:var(--sm-orange);font-size:10px;font-weight:800;letter-spacing:2px;margin-bottom:8px}.signal-intro strong{font-size:clamp(20px,2.5vw,30px);line-height:1.08;letter-spacing:-1px}.signal-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.signal-metrics div{padding:14px;border-left:1px solid rgba(255,255,255,.1)}.signal-metrics b{display:block;font-size:22px;letter-spacing:-1px}.signal-metrics span{display:block;margin-top:3px;color:rgba(255,255,255,.5);font-size:10px;text-transform:uppercase;letter-spacing:1px}
.case-preview{padding:78px clamp(28px,5vw,76px);background:#f7f7f5}.case-preview-heading{max-width:700px;margin-bottom:30px}.case-preview-heading h2{font-size:clamp(34px,5vw,58px);letter-spacing:-3px;line-height:.98;margin:0 0 12px;color:#111}.case-preview-heading h2 em{font-style:normal;color:var(--sm-red)}.case-preview-heading p{color:#666;line-height:1.6}.case-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.case-preview-grid article{min-height:240px;padding:25px;border:1px solid #deded8;border-radius:20px;background:#fff;box-shadow:0 12px 35px rgba(20,30,30,.06);transition:.25s}.case-preview-grid article:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(20,30,30,.1)}.case-preview-grid span{font-size:9px;letter-spacing:1.8px;font-weight:800;color:#888}.case-preview-grid h3{font-size:21px;margin:18px 0 8px;color:#111}.case-preview-grid p{font-size:13px;color:#666;line-height:1.55;margin-bottom:25px}.case-preview-grid strong{font-size:29px;color:var(--sm-red)}.case-preview-grid small{font-size:10px;color:#888;font-weight:500}
.service-objectives{margin-top:60px;padding:46px 0 20px;border-top:1px solid rgba(255,255,255,.1)}.service-objectives-heading{text-align:center;margin-bottom:25px}.service-objectives-heading h2{font-size:clamp(28px,4vw,42px);color:#fff;margin:0 0 8px;letter-spacing:-1.5px}.service-objectives-heading p{color:rgba(255,255,255,.6);font-size:14px}.service-objective-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.service-objective-grid a{display:block;padding:20px;border:1px solid rgba(255,255,255,.1);border-radius:17px;background:rgba(255,255,255,.04);color:#fff;text-decoration:none;transition:.25s}.service-objective-grid a:hover{transform:translateY(-4px);border-color:rgba(255,105,0,.45);background:rgba(255,105,0,.07)}.service-objective-grid i{color:var(--sm-orange);font-size:18px}.service-objective-grid span{display:block;margin-top:14px;font-weight:800;font-size:14px}.service-objective-grid small{display:block;color:rgba(255,255,255,.5);margin-top:4px;font-size:11px}

/* Solution experience */
.solution-page{background:#050b14;color:#fff}.solution-shell{padding:125px clamp(24px,6vw,86px) 80px;max-width:1450px;margin:auto}.solution-hero{max-width:950px}.solution-kicker{display:inline-block;padding:7px 11px;border:1px solid rgba(255,105,0,.3);background:rgba(255,105,0,.08);border-radius:999px;color:var(--sm-orange);font-size:9px;font-weight:800;letter-spacing:2px}.solution-hero h1{font-size:clamp(48px,7vw,92px);line-height:.93;letter-spacing:-5px;margin:22px 0 20px}.solution-hero h1 span{color:var(--sm-orange)}.solution-hero p{max-width:700px;color:rgba(255,255,255,.64);font-size:17px;line-height:1.65}.solution-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}.solution-actions a,.solution-command a{display:inline-flex;align-items:center;gap:9px;padding:13px 19px;border-radius:999px;text-decoration:none;font-size:12px;font-weight:800}.solution-primary{background:var(--sm-orange);color:#fff;box-shadow:0 14px 35px rgba(255,105,0,.2)}.solution-secondary{border:1px solid rgba(255,255,255,.16);color:#fff;background:rgba(255,255,255,.04)}.solution-marquee{margin:70px 0 68px;overflow:hidden;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09);padding:17px 0;white-space:nowrap}.solution-marquee-track{display:inline-flex;align-items:center;gap:28px;min-width:max-content;animation:solutionMarquee 28s linear infinite}.solution-marquee span{font-size:12px;letter-spacing:2.5px;font-weight:800;color:rgba(255,255,255,.58)}.solution-marquee b{color:var(--sm-orange)}@keyframes solutionMarquee{to{transform:translateX(-50%)}}
.solution-section-heading{max-width:720px;margin-bottom:28px}.solution-section-heading>span{color:var(--sm-orange);font-size:9px;letter-spacing:2px;font-weight:800}.solution-section-heading h2{font-size:clamp(32px,5vw,58px);letter-spacing:-3px;line-height:1;margin:10px 0}.solution-section-heading p{color:rgba(255,255,255,.55)}.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.solution-card{min-height:270px;padding:25px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));transition:transform .3s ease,border-color .3s ease,background .3s ease}.solution-card:hover{transform:translateY(-7px);border-color:rgba(255,105,0,.45);background:linear-gradient(145deg,rgba(255,105,0,.1),rgba(255,255,255,.025))}.solution-card-icon{width:45px;height:45px;border-radius:13px;background:rgba(255,105,0,.12);color:var(--sm-orange);display:flex;align-items:center;justify-content:center;margin-bottom:20px}.solution-card>span{font-size:9px;color:rgba(255,255,255,.38);letter-spacing:1.7px;font-weight:800}.solution-card h3{font-size:21px;margin:8px 0}.solution-card p{font-size:13px;line-height:1.55;color:rgba(255,255,255,.58);margin-bottom:20px}.solution-card a{font-size:11px;color:#fff;text-decoration:none;font-weight:800}.solution-card a i{color:var(--sm-orange);margin-left:5px}.solution-command{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:65px;padding:28px;border:1px solid rgba(255,255,255,.11);border-radius:22px;background:linear-gradient(110deg,#0d1a2d,#111d2b)}.solution-command span{font-size:9px;color:var(--sm-orange);letter-spacing:2px;font-weight:800}.solution-command h2{font-size:clamp(22px,3vw,32px);letter-spacing:-1px;margin:8px 0}.solution-command p{margin:0;color:rgba(255,255,255,.55);font-size:13px}.solution-command a{background:#fff;color:#0b1420;white-space:nowrap}

@media(max-width:1100px){.header .nav a{padding:0 10px}.header .nav a span{display:none}.header .nav .nav-brand{padding-right:12px}.enterprise-signal{grid-template-columns:1fr}.signal-metrics{grid-template-columns:repeat(4,1fr)}.case-preview-grid{grid-template-columns:1fr 1fr}.service-objective-grid{grid-template-columns:1fr 1fr}.solution-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.header{left:12px!important;right:12px!important;top:10px!important;height:60px!important}.header .login{display:none}.header .nav{width:100%;height:48px}.header .nav .nav-brand .site-logo{width:98px}.enterprise-signal{padding:25px 20px}.signal-metrics{grid-template-columns:1fr 1fr}.case-preview{padding:55px 20px}.case-preview-grid{grid-template-columns:1fr}.solution-shell{padding:95px 18px 55px}.solution-hero h1{letter-spacing:-3px}.solution-grid{grid-template-columns:1fr}.solution-command{flex-direction:column;align-items:flex-start}.solution-command a{width:100%;justify-content:center}.service-objectives{margin-top:40px;padding-top:35px}.service-objective-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.header .nav .nav-brand{padding-left:6px;padding-right:10px}.header .nav .nav-brand .site-logo{width:84px}.header .nav a{padding:0 11px}.header .nav a i{font-size:12px}.signal-metrics b{font-size:19px}.case-preview-grid article{min-height:210px}.service-objective-grid{grid-template-columns:1fr}.solution-marquee{margin:45px 0}.solution-hero h1{font-size:48px}}
@media(prefers-reduced-motion:reduce){.solution-marquee-track{animation:none}.case-preview-grid article,.solution-card{transition:none}}

/* =====================================================
   SELLMEK HERO — FULL-CANVAS 3-STAGE VISUAL ROTATION
   Stage 1: Banner -> Stage 2: Growth Dashboard -> Stage 3: Banner
   Existing hero copy and original CTA buttons remain unchanged.
===================================================== */
.hero{overflow:hidden !important;}

.hero-visual-slider{
    position:absolute;
    inset:0;
    z-index:2;
    overflow:hidden;
    pointer-events:none;
    background:#07111f;
}

.hero-visual-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transform:scale(1.035);
    transition:opacity 1s ease, transform 8s ease, visibility 0s linear 1s;
    overflow:hidden;
}
.hero-visual-slide.is-active{
    opacity:1;
    visibility:visible;
    transform:scale(1);
    transition:opacity 1s ease, transform 8s ease;
}

.hero-visual-slide::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(90deg, rgba(4,10,20,.84) 0%, rgba(4,10,20,.48) 42%, rgba(4,10,20,.22) 100%),
      linear-gradient(180deg, rgba(4,10,20,.24), rgba(4,10,20,.58));
    z-index:2;
}

/* Stage 1 / 3: full-bleed premium banners */
.hero-stage-banner{
    background-image:
      radial-gradient(circle at 78% 24%, rgba(225,6,0,.42), transparent 28%),
      radial-gradient(circle at 70% 78%, rgba(52,128,255,.26), transparent 30%),
      linear-gradient(135deg, rgba(6,13,26,.18), rgba(6,13,26,.72)),
      url('assets/images/hero-banner-photo.jpg');
    background-size:cover;
    background-position:center;
}

.hero-stage-banner.stage-three{
    background-image:
      radial-gradient(circle at 75% 25%, rgba(225,6,0,.48), transparent 25%),
      radial-gradient(circle at 30% 70%, rgba(130,210,255,.18), transparent 28%),
      linear-gradient(135deg, rgba(6,13,26,.34), rgba(6,13,26,.82)),
      url('assets/images/hero-banner-photo.jpg');
    background-position:center 58%;
}

.hero-banner-copy{
    position:absolute;
    right:7%;
    top:50%;
    transform:translateY(-50%);
    width:min(420px,34vw);
    z-index:3;
    text-align:right;
}
.hero-banner-copy .eyebrow{
    display:inline-block;
    margin-bottom:14px;
    padding:7px 12px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    font-size:10px;
    letter-spacing:1.7px;
    text-transform:uppercase;
    color:#fff;
}
.hero-banner-copy h2{
    margin:0;
    color:#fff;
    font-size:clamp(34px,4.2vw,70px);
    line-height:.94;
    letter-spacing:-3px;
    font-weight:500;
}
.hero-banner-copy h2 em{color:#e10600;font-style:normal;}
.hero-banner-copy p{
    margin:18px 0 0 auto;
    max-width:380px;
    color:rgba(255,255,255,.78);
    font-size:14px;
    line-height:1.6;
}

/* Stage 2: the existing real dashboard becomes the hero's focal visual */
.hero-stage-dashboard{
    display:flex;
    align-items:center;
    justify-content:center;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), transparent 28%),
      radial-gradient(circle at 72% 25%, rgba(225,6,0,.30), transparent 25%),
      linear-gradient(135deg,#07111f,#10223a 52%,#06101d);
}
.hero-stage-dashboard::before{
    content:"";
    position:absolute;
    width:min(68vw,900px);
    height:min(68vw,900px);
    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
    box-shadow:0 0 0 70px rgba(255,255,255,.018), 0 0 0 140px rgba(255,255,255,.012);
}
.hero-stage-dashboard .dashboard-stage-glow{
    position:absolute;
    width:440px;
    height:440px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(225,6,0,.22),transparent 68%);
    filter:blur(8px);
}
.hero-stage-dashboard .dashboard{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    width:min(390px,34vw) !important;
    height:min(410px,36vw) !important;
    z-index:5 !important;
    box-shadow:0 30px 90px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.14);
}

/* Readability layer: hero text/buttons always stay above the visual */
.hero > .left-content,
.hero > .right-content,
.hero > .center-content,
.hero > .hero-visual-slider{
    pointer-events:none;
}
.hero > .left-content,
.hero > .right-content,
.hero > .center-content{
    z-index:20 !important;
}
.hero .buttons,
.hero .buttons a,
.hero a,
.hero button{
    pointer-events:auto;
}
.hero > .center-content{
    position:static !important;
}
.hero > .center-content > .dashboard,
.hero > .center-content > .orbit,
.hero > .center-content > .orbit-dot{
    display:none !important;
}

/* Stronger glass treatment over the full background */
.hero > .left-content .counter,
.hero > .right-content p,
.hero > .right-content .growth-heading,
.hero > .bottom-left,
.hero > .bottom-right{
    text-shadow:0 2px 18px rgba(0,0,0,.45);
}

@media (min-width:901px){
    .hero{
        left:0 !important;
        right:0 !important;
        top:0 !important;
        height:100vh !important;
        min-height:680px;
        border-radius:0 !important;
    }
    .hero-visual-slider{border-radius:0;}
    .header{position:relative;z-index:50;}
    .left-content{padding-top:150px; padding-left:38px;}
    .hero > .right-content{padding-top:155px; padding-right:38px;}
}

@media (max-width:900px){
    .hero-visual-slider{border-radius:0;}
    .hero-banner-copy{right:7%;width:48%;}
    .hero-banner-copy h2{font-size:clamp(28px,7vw,46px);letter-spacing:-1.8px;}
    .hero-banner-copy p{font-size:12px;}
    .hero-stage-dashboard .dashboard{width:min(350px,58vw) !important;height:365px !important;}
}

@media (max-width:560px){
    .hero-banner-copy{right:6%;top:62%;width:58%;}
    .hero-banner-copy h2{font-size:30px;}
    .hero-banner-copy p{font-size:11px;}
    .hero-stage-dashboard .dashboard{width:310px !important;height:345px !important;transform:scale(.88) !important;}
}

@media (prefers-reduced-motion:reduce){
    .hero-visual-slide{transition:none !important;transform:none !important;}
}


/* =====================================================
   SELL MEK FINAL UPDATE — CLEAN 3-STAGE HERO
   1) supplied banner -> 2) growth dashboard -> 3) supplied banner
   No headline/copy is placed over the supplied images.
===================================================== */
.hero{
    display:block !important;
    background:#070707 !important;
}
.hero-visual-slider{
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;
    background:#070707 !important;
}
.hero-visual-slide{
    display:block !important;
}
.hero-visual-slide::after{
    display:none !important;
}
.hero-stage-image{
    background:#000 !important;
}
.hero-stage-image img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
}
.hero-stage-image.stage-three img{
    object-position:center center;
}
.hero > .center-content{
    display:none !important;
}
.hero > .left-content,
.hero > .right-content,
.hero > .bottom-left,
.hero > .bottom-right,
.hero > .social,
.hero > .scroll,
.hero > .giant{
    display:none !important;
}
/* Dashboard is moved into the middle visual slide by JS. */
.hero-stage-dashboard .dashboard{
    display:block !important;
    width:min(430px,42vw) !important;
    height:min(445px,43vw) !important;
}
.hero-stage-dashboard{
    background:
        radial-gradient(circle at 50% 50%,rgba(225,6,0,.16),transparent 32%),
        linear-gradient(135deg,#070707,#0d1b31 55%,#070707) !important;
}
.hero-stage-dashboard .dashboard-stage-glow{
    display:block !important;
}
@media(max-width:900px){
    .hero-stage-dashboard .dashboard{
        width:min(360px,72vw) !important;
        height:370px !important;
    }
}
@media(max-width:560px){
    .hero-stage-dashboard .dashboard{
        width:310px !important;
        height:345px !important;
    }
}

/* =====================================================
   HOME FLOW — POST-HERO SECTIONS SHARE ONE CONTINUOUS BG
===================================================== */
body:not(.services-page):not(.tools-page):not(.booking-page){
    background:var(--nv-bg) !important;
}
body > .page-frame > .website{
    background:var(--nv-bg) !important;
}
.enterprise-signal,
.case-preview,
.results-reviews-section,
.site-footer{
    background-color:var(--nv-bg) !important;
    background-image:
        linear-gradient(rgba(225,6,0,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(225,6,0,.07) 1px,transparent 1px),
        radial-gradient(circle at 72% 25%,rgba(225,6,0,.10),transparent 34%) !important;
    background-size:58px 58px,58px 58px,auto !important;
}
.enterprise-signal{
    border-top:1px solid rgba(225,6,0,.14) !important;
    border-bottom:1px solid rgba(225,6,0,.14) !important;
}
.case-preview{
    border:0 !important;
}
.case-preview-heading h2{color:var(--nv-text) !important;}
.case-preview-heading p{color:var(--nv-muted) !important;}
.case-preview-heading h2 em{color:var(--nv-blue-soft) !important;}
.case-preview-grid article{
    background:var(--nv-panel) !important;
    border-color:rgba(225,6,0,.22) !important;
}
.case-preview-grid h3{color:var(--nv-text) !important;}
.case-preview-grid p{color:var(--nv-muted) !important;}
.case-preview-grid strong{color:var(--nv-blue-soft) !important;}
.case-preview-grid small{color:var(--nv-muted) !important;}
.site-footer{
    border-top:1px solid rgba(225,6,0,.16) !important;
}

/* =====================================================
   SERVICES — SEARCH / AUTOCOMPLETE
===================================================== */
.service-search{
    position:relative;
    max-width:760px;
    margin:0 auto 28px;
    z-index:30;
}
.service-search > i{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:var(--nv-blue-soft);
    font-size:14px;
    pointer-events:none;
}
#service-search-input{
    width:100%;
    height:54px;
    padding:0 52px 0 46px;
    border:1px solid rgba(225,6,0,.30);
    border-radius:16px;
    outline:none;
    background:rgba(14,26,48,.88);
    color:var(--nv-text);
    box-shadow:0 14px 35px rgba(0,0,0,.18);
    font-size:14px;
}
#service-search-input::placeholder{color:rgba(255,255,255,.72);}
#service-search-input:focus{
    border-color:rgba(92,142,240,.72);
    box-shadow:0 0 0 4px rgba(225,6,0,.10),0 18px 42px rgba(0,0,0,.22);
}
#service-search-clear{
    position:absolute;
    right:10px;
    top:9px;
    width:36px;
    height:36px;
    border:0;
    border-radius:10px;
    background:rgba(255,255,255,.07);
    color:var(--nv-muted);
    cursor:pointer;
}
#service-search-clear:hover{background:rgba(255,255,255,.12);color:#fff;}
.service-search-results{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 8px);
    display:none;
    padding:7px;
    border:1px solid rgba(225,6,0,.28);
    border-radius:16px;
    background:rgba(6,13,26,.97);
    box-shadow:0 24px 55px rgba(0,0,0,.38);
    backdrop-filter:blur(18px);
}
.service-search-results.is-open{display:block;}
.service-search-item{
    display:grid;
    grid-template-columns:38px 1fr 18px;
    align-items:center;
    gap:11px;
    padding:11px;
    border-radius:12px;
    color:var(--nv-text) !important;
    text-decoration:none;
}
.service-search-item:hover{background:rgba(225,6,0,.12);}
.service-search-item-icon{
    width:38px;height:38px;border-radius:11px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(225,6,0,.12);
    color:var(--nv-blue-soft);
}
.service-search-item strong{display:block;font-size:13px;}
.service-search-item small{
    display:block;
    margin-top:3px;
    color:var(--nv-muted) !important;
    font-size:10px;
    line-height:1.35;
}
.service-search-item > i{color:var(--nv-muted);font-size:11px;}
.service-search-empty{
    padding:15px 13px;
    color:var(--nv-muted);
    font-size:12px;
}
@media(max-width:600px){
    .service-search{margin-bottom:20px;}
    #service-search-input{height:50px;font-size:13px;}
    .service-search-item small{display:none;}
}

/* =====================================================
   AGENCY LOADER — BRAND MARK + PROGRESS
===================================================== */
.page-loader{
    background:
        radial-gradient(circle at 50% 42%,rgba(225,6,0,.18),transparent 38%),
        #070707 !important;
}
.page-loader-mark{
    width:min(300px,78vw);
    gap:14px !important;
}
.page-loader-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
}
.page-loader-brand img{
    width:min(170px,55vw);
    height:auto;
    padding:7px 13px;
    border-radius:10px;
    background:#f2f0ec;
    box-shadow:0 14px 35px rgba(0,0,0,.28);
    animation:loaderBrandPulse 1.5s ease-in-out infinite;
}
.page-loader-label{
    color:var(--nv-text) !important;
    font-size:10px !important;
    letter-spacing:2.5px !important;
}
.page-loader-sub{
    color:var(--nv-muted);
    font-size:9px;
    letter-spacing:1.6px;
    text-transform:uppercase;
}
.page-loader-progress{
    width:100%;
    height:3px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.10);
}
.page-loader-progress::after{
    content:"";
    display:block;
    width:42%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,var(--nv-blue),var(--nv-blue-soft));
    animation:loaderProgress 1.25s ease-in-out infinite;
}
@keyframes loaderBrandPulse{
    0%,100%{transform:scale(.98);opacity:.82}
    50%{transform:scale(1.02);opacity:1}
}
@keyframes loaderProgress{
    0%{transform:translateX(-110%)}
    100%{transform:translateX(270%)}
}

/* Profile now contains only Language + Log out. */
.profile-menu{
    width:205px !important;
}
.profile-menu .profile-name{
    padding-bottom:10px !important;
}
@media(prefers-reduced-motion:reduce){
    .page-loader-brand img,.page-loader-progress::after{animation:none;}
}

/* =====================================================
   SELL MEK HERO — RESTORE ORIGINAL HERO COPY / CONTROLS
   The supplied image slides remain clean: no banner-specific copy.
   Original 1/8 counter, rotating headline, right growth copy,
   giant background words, CTA buttons, social and scroll controls
   are restored on top of the hero as before.
===================================================== */
.hero > .left-content,
.hero > .right-content,
.hero > .bottom-left,
.hero > .bottom-right,
.hero > .social,
.hero > .scroll,
.hero > .giant{
    display:block !important;
}

.hero > .left-content,
.hero > .right-content,
.hero > .bottom-left,
.hero > .bottom-right,
.hero > .social,
.hero > .scroll,
.hero > .giant{
    z-index:30 !important;
}

.hero > .left-content{
    position:absolute !important;
    left:38px !important;
    top:150px !important;
    padding:0 !important;
    width:30% !important;
}

.hero > .right-content{
    position:absolute !important;
    right:38px !important;
    top:155px !important;
    padding:0 !important;
    width:25% !important;
}

.hero > .left-content .counter{
    color:var(--nv-text, #fff) !important;
    text-shadow:0 2px 12px rgba(0,0,0,.45) !important;
}

.hero > .left-content h1 .hero-line,
.hero > .left-content h1 .hero-line-white,
.hero > .left-content h1 .hero-line-mixed{
    color:var(--nv-text, #fff) !important;
    text-shadow:0 2px 18px rgba(0,0,0,.5) !important;
}

.hero > .left-content h1 .hero-line-orange,
.hero > .left-content h1 .hero-line-mixed em{
    color:var(--nv-red, #ff3b30) !important;
    text-shadow:0 0 26px rgba(255,59,48,.30) !important;
}

.hero > .right-content p,
.hero > .bottom-left p,
.hero > .bottom-right p{
    color:var(--nv-muted, rgba(255,255,255,.72)) !important;
    text-shadow:0 2px 18px rgba(0,0,0,.55) !important;
}

.hero > .right-content .growth-heading strong{
    color:var(--nv-blue-soft, #7ca4ed) !important;
}
.hero > .right-content .growth-heading span,
.hero > .right-content .growth-heading small{
    color:var(--nv-muted, rgba(255,255,255,.72)) !important;
}

.hero > .bottom-left{
    left:38px !important;
    bottom:34px !important;
    width:430px !important;
}

.hero > .bottom-right{
    right:38px !important;
    bottom:34px !important;
}

.hero > .bottom-left .buttons{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
}

.hero > .bottom-left .buttons .start{
    background:var(--nv-blue, #e10600) !important;
    color:#fff !important;
}

.hero > .bottom-left .buttons .contact{
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.13) !important;
    color:#fff !important;
}

/* Dashboard: exactly centered inside the middle hero stage. */
.hero-stage-dashboard{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}
.hero-stage-dashboard .dashboard{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    margin:0 !important;
    transform:none !important;
    flex:0 0 auto !important;
}

/* Keep supplied image slides visually clean — only the original site UI
   sits above them; there is no hero-banner-copy. */
.hero-stage-image .hero-banner-copy{
    display:none !important;
}

@media(max-width:900px){
    .hero > .left-content{
        left:22px !important;
        top:115px !important;
        width:43% !important;
    }
    .hero > .right-content{
        right:22px !important;
        top:120px !important;
        width:34% !important;
    }
    .hero > .bottom-left{
        left:22px !important;
        bottom:22px !important;
        width:52% !important;
    }
    .hero > .bottom-right{
        right:22px !important;
        bottom:22px !important;
        width:34% !important;
    }
    .hero-stage-dashboard .dashboard{
        width:min(360px,72vw) !important;
        height:370px !important;
    }
}

@media(max-width:560px){
    .hero > .left-content{
        left:16px !important;
        top:92px !important;
        width:48% !important;
    }
    .hero > .right-content{
        right:16px !important;
        top:95px !important;
        width:40% !important;
    }
    .hero > .bottom-left{
        left:16px !important;
        bottom:16px !important;
        width:58% !important;
    }
    .hero > .bottom-right{
        right:16px !important;
        bottom:16px !important;
        width:38% !important;
    }
    .hero > .bottom-left p,
    .hero > .bottom-right p{
        font-size:10px !important;
    }
    .hero-stage-dashboard .dashboard{
        width:310px !important;
        height:345px !important;
    }
}

/* =====================================================
   FINAL FIX — SINGLE HERO DASHBOARD + CENTERED STAGE
===================================================== */
.hero-visual-slider .hero-stage-dashboard{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}
.hero-visual-slider .hero-stage-dashboard .dashboard{
    left:auto !important;
    top:auto !important;
    margin:0 !important;
    transform:none !important;
}
/* The dashboard lives only inside the visual slider. */
.hero > .center-content > .dashboard{
    display:none !important;
}


/* =====================================================
   FINAL LAYOUT FIX — EDGE-TO-EDGE DESKTOP + BOTTOM FOOTER
   Requested: no outer gaps, shorter menu, profile removed,
   desktop-mode on phones, full-width desktop pages.
===================================================== */

html, body{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
}

body{
    min-height:100vh !important;
    min-height:100dvh !important;
    display:flex !important;
    flex-direction:column !important;
    overflow-x:hidden !important;
}

/* Remove the old grey/14px artboard gap on desktop. */
@media (min-width:901px){
    .page-frame,
    .inner-frame{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        aspect-ratio:auto !important;
    }

    .page-frame{
        min-height:100vh !important;
        height:auto !important;
    }

    .website,
    .inner-website{
        width:100% !important;
        min-width:0 !important;
        border-radius:0 !important;
    }

    /* Full-screen inner pages without leaving a strip underneath. */
    .inner-frame{
        min-height:calc(100vh - 210px) !important;
        height:auto !important;
        flex:0 0 auto !important;
    }

    .inner-website{
        min-height:calc(100vh - 210px) !important;
        height:auto !important;
    }
}

/* All existing page shells can push their footer to the bottom. */
.about-page,
.booking-page,
.tools-page,
.contact-page,
.history-page,
.services-page,
.solution-page{
    min-height:100vh !important;
    min-height:100dvh !important;
    display:flex !important;
    flex-direction:column !important;
}

.about-page .site-footer,
.booking-page .site-footer,
.tools-page .site-footer,
.contact-page .site-footer,
.history-page .site-footer,
.services-page .site-footer,
.solution-page .site-footer,
body > .site-footer{
    margin-top:auto !important;
    width:100% !important;
    flex:0 0 auto !important;
}

/* The inner pages have their footer as a body-level element. */
body.inner-page{
    min-height:100vh !important;
    min-height:100dvh !important;
}
body.inner-page > .site-footer{
    margin-top:auto !important;
}

/* Shorter, cleaner top navigation. Removing Profile also frees space. */
.header{
    min-width:0 !important;
    gap:12px !important;
}

.header .nav{
    height:42px !important;
    min-height:42px !important;
    max-width:calc(100% - 280px) !important;
    padding:4px !important;
    gap:0 !important;
}

.header .nav a{
    height:32px !important;
    min-height:32px !important;
    padding:0 11px !important;
    font-size:11px !important;
    gap:5px !important;
}

.header .nav a i{
    font-size:10px !important;
}

.header .login{
    width:132px !important;
    min-width:132px !important;
    height:42px !important;
    font-size:12px !important;
}

/* Hero photo: keep the subject's head away from the upper crop. */
.photo-banner{
    top:10px !important;
    bottom:10px !important;
    height:auto !important;
    border-radius:18px !important;
}
.photo-banner-img{
    object-position:center top !important;
}

/* On desktop-mode phones, keep the desktop canvas rather than breaking it
   into the narrow mobile composition. */
@media (max-width:900px){
    .header .nav{
        max-width:none !important;
        height:42px !important;
    }
    .header .nav a{
        padding:0 10px !important;
    }

    .page-frame{
        width:100% !important;
        margin:0 !important;
        padding:0 !important;
    }

    /* If the browser exposes a desktop-style viewport, this media query
       is bypassed naturally because its CSS viewport is wider than 900px. */
}

/* Prevent any accidental final background strip after the footer. */
body > .site-footer:last-child{
    margin-bottom:0 !important;
}

/* =====================================================
   HOTFIX — RESTORE HOME PAGE CANVAS
   The previous edge-to-edge rule removed the fixed canvas height,
   which caused the home hero (position:absolute) to collapse on desktop.
===================================================== */
@media (min-width:901px){
  body:has(> .page-frame){
    display:block !important;
    min-height:100vh !important;
    background:#070707 !important;
  }

  body:has(> .page-frame) .page-frame{
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:100vh !important;
    margin:0 !important;
    padding:0 !important;
    aspect-ratio:auto !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  body:has(> .page-frame) .page-frame > .website{
    width:100% !important;
    height:auto !important;
    min-height:100vh !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  body:has(> .page-frame) .page-frame > .website > .hero{
    position:relative !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    width:100% !important;
    height:clamp(540px, 53vw, 820px) !important;
    min-height:540px !important;
    margin:0 !important;
    margin-top:150px !important; /* clearance below the fixed nav/menu bar */
  }

  body:has(> .page-frame) .page-frame > .website > .hero > .hero-visual-slider{
    position:absolute !important;
    inset:0 !important;
  }
}

/* Older browsers without :has(): the home page always has .page-frame. */
@media (min-width:901px){
  .page-frame .website{
    height:auto !important;
    min-height:100vh !important;
    overflow:visible !important;
  }
  .page-frame .website > .hero{
    position:relative !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    width:100% !important;
    height:clamp(540px, 53vw, 820px) !important;
    min-height:540px !important;
    margin:0 !important;
    margin-top:150px !important; /* clearance below the fixed nav/menu bar */
  }
}


/* =========================================================
   SELL MEK — FINAL USER REQUEST PATCH (2026-09-03)
   Bengali ticker + red/white system + full desktop pages
   + 2 extra image banners + stacked service cards.
========================================================= */

:root{
  --sm-red:#e10600;
  --sm-bg:#070707;
  --sm-panel:#111111;
  --sm-white:#ffffff;
  --sm-muted:rgba(255,255,255,.76);
}

/* ---------- GLOBAL RED / WHITE VISUAL SYSTEM ---------- */
html, body{
  background:var(--sm-bg) !important;
  color:var(--sm-white) !important;
}

body{
  background-image:
    radial-gradient(circle at 15% 0%, rgba(225,6,0,.13), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(225,6,0,.08), transparent 30%) !important;
}

.page-frame,
.website,
.inner-website,
.inner-frame{
  background:var(--sm-bg) !important;
  border-color:rgba(255,255,255,.10) !important;
}

body p,
body small,
body span,
body strong,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body a,
body button,
body label,
body li,
body dt,
body dd,
body blockquote,
body figcaption,
body th,
body td{
  color:var(--sm-white) !important;
}

/* Red accent — keep ordinary text white and use red for emphasis. */
body .hero-line-orange,
body .hero-line-mixed em,
body .count,
body .result-number,
body .growth-heading strong,
body .reference-process-kicker,
body .reference-process-number,
body .reference-process-heading h2 span,
body .dark-section-heading h2 span,
body .case-preview-heading h2 em,
body .case-preview-grid strong,
body .enterprise-signal b,
body .footer-contact > a,
body .services-reference-heading h1 span,
body .services-reference-kicker,
body .detail-kicker,
body .detail-title span,
body .solution-kicker,
body .solution-hero h1 span{
  color:var(--sm-red) !important;
}

/* ---------- MOVING BENGALI HEADING ABOVE THE MENU ---------- */
.header{
  top:58px !important;
}

.header::before{
  content:"সেল মেকে স্বাগতম  •  ডিজিটাল মার্কেটিং  •  ওয়েবসাইট ডিজাইন  •  ব্র্যান্ডিং  •  সোশ্যাল মিডিয়া  •  গ্রোথ কনসাল্টিং  •  আপনার ব্যবসার ডিজিটাল সমাধান  •  ";
  position:absolute;
  left:0;
  right:0;
  top:-38px;
  height:27px;
  display:flex;
  align-items:center;
  overflow:hidden;
  white-space:nowrap;
  padding:0 18px;
  color:#fff !important;
  background:var(--sm-red);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  box-shadow:0 8px 24px rgba(225,6,0,.24);
  font-family:"Noto Sans Bengali","Noto Sans",Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1;
  animation:smTicker 24s linear infinite;
}

@keyframes smTicker{
  0%{transform:translateX(18%);}
  100%{transform:translateX(-105%);}
}

/* ---------- NAV ---------- */
.header .nav{
  background:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.25) !important;
}

.header .nav a,
.header .nav a:visited{
  color:#111 !important;
}

.header .nav a i,
.header .nav a span{
  color:inherit !important;
}

.header .nav a.active,
.header .nav a:hover,
.header .nav a:focus-visible{
  background:var(--sm-red) !important;
  color:#fff !important;
}

.header .nav a.active i,
.header .nav a:hover i,
.header .nav a:focus-visible i{
  color:#fff !important;
}

.header .login{
  background:var(--sm-red) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 10px 25px rgba(225,6,0,.22) !important;
}

/* ---------- HERO: 5 visual stages, including 2 new photo banners ---------- */
.hero{
  background:#000 !important;
}

.hero-visual-slider{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  overflow:hidden !important;
  background:#000 !important;
}

.hero-visual-slide{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  overflow:hidden !important;
}

.hero-visual-slide::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.30) 55%,rgba(0,0,0,.62)),
    linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.66)) !important;
}

.hero-stage-image img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  filter:saturate(.86) contrast(1.02) !important;
}

.hero-stage-image.stage-four img{
  object-position:center 20% !important;
}

.hero-stage-image.stage-five img{
  object-position:center 72% !important;
}

.hero > .left-content,
.hero > .right-content,
.hero > .bottom-left,
.hero > .bottom-right,
.hero > .social,
.hero > .scroll,
.hero > .giant{
  display:block !important;
  z-index:30 !important;
}

/* Restore a readable 1/8 counter and make the complete headline visible. */
.hero > .left-content{
  left:42px !important;
  top:155px !important;
  width:min(390px,31vw) !important;
  max-width:390px !important;
  overflow:visible !important;
}

.hero > .left-content .counter{
  margin-bottom:15px !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}

.hero > .left-content h1{
  width:100% !important;
  max-width:none !important;
  overflow:visible !important;
  font-size:clamp(35px,3.45vw,56px) !important;
  line-height:.97 !important;
  letter-spacing:-2px !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

.hero > .left-content .hero-slide{
  width:100% !important;
  overflow:visible !important;
}

.hero > .left-content .hero-line{
  display:block !important;
  width:max-content !important;
  max-width:100% !important;
  white-space:nowrap !important;
}

.hero > .left-content h1 .hero-line-white,
.hero > .left-content h1 .hero-line-mixed{
  color:#fff !important;
}

.hero > .left-content h1 .hero-line-orange,
.hero > .left-content h1 .hero-line-mixed em{
  color:var(--sm-red) !important;
}

.hero > .right-content{
  right:42px !important;
  top:158px !important;
  width:min(310px,23vw) !important;
}

.hero > .right-content p,
.hero > .bottom-left p,
.hero > .bottom-right p{
  color:rgba(255,255,255,.82) !important;
}

.hero > .right-content .growth-heading strong{
  color:var(--sm-red) !important;
}

.hero > .bottom-left .buttons .start{
  background:var(--sm-red) !important;
  color:#fff !important;
}

.hero > .bottom-left .buttons .contact{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.30) !important;
  color:#fff !important;
}

/* No text is added inside the new photo banners themselves. */
.hero-stage-image.stage-four .hero-banner-copy,
.hero-stage-image.stage-five .hero-banner-copy{
  display:none !important;
}

/* Dashboard stage remains available as one of the existing hero slides. */
.hero-stage-dashboard{
  background:
    radial-gradient(circle at 50% 50%,rgba(225,6,0,.18),transparent 32%),
    linear-gradient(135deg,#050505,#151515 55%,#050505) !important;
}

/* ---------- HERO OVERLAYS / STATS: red + white ---------- */
.hero .stat-card{
  background:rgba(10,10,10,.88) !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.30) !important;
}
.hero .stat-card small{color:rgba(255,255,255,.68) !important;}
.hero .stat-card strong{color:#fff !important;}
.hero .orange-icon,
.hero .orange-bars i{
  background:var(--sm-red) !important;
}
.hero .progress-ring{
  background:conic-gradient(var(--sm-red) 0deg 281deg,#333 281deg 360deg) !important;
}
.hero .progress-ring::after{background:#111 !important;}
.hero .orbit{border-color:rgba(225,6,0,.50) !important;}
.hero .orbit-dot{background:var(--sm-red) !important;}

/* ---------- HOME SECTIONS BETWEEN HERO AND TRUST: SAME TRUST STYLE ---------- */
.enterprise-signal,
.case-preview,
.results-reviews-section,
.our-results-wrap,
.reference-process,
.site-footer{
  background-color:var(--sm-bg) !important;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    radial-gradient(circle at 75% 25%,rgba(225,6,0,.09),transparent 34%) !important;
  background-size:58px 58px,58px 58px,auto !important;
}

.enterprise-signal{
  border-top:1px solid rgba(255,255,255,.10) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}

.case-preview-heading,
.dark-section-heading,
.reference-process-heading,
.services-reference-heading,
.service-objectives-heading{
  text-align:center !important;
}

.case-preview-heading h2,
.case-preview-heading p,
.enterprise-signal,
.case-preview-grid h3,
.case-preview-grid p,
.dark-section-heading h2,
.dark-section-heading p,
.result-label,
.reference-process-heading h2,
.reference-process-heading p{
  color:#fff !important;
}

.case-preview-heading h2 em,
.case-preview-grid strong,
.dark-section-heading h2 span,
.result-number{
  color:var(--sm-red) !important;
}

.case-preview-grid article,
.results-counter-grid .dark-result-card,
.reference-process-card{
  background:rgba(17,17,17,.88) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.22) !important;
}

.reference-process-card h3,
.reference-process-card p{
  color:#fff !important;
}

.reference-process-circle{
  border-color:rgba(255,255,255,.14) !important;
}

.reference-process-number{
  color:var(--sm-red) !important;
}

.reference-process-path .path-segment{
  border-color:rgba(255,255,255,.24) !important;
}
.reference-process-path .path-arrow{
  color:var(--sm-red) !important;
}

/* ---------- SERVICES: CARDS STACKED VERTICALLY ---------- */
.services-page .services-reference{
  background:var(--sm-bg) !important;
  color:#fff !important;
}

.services-reference-viewport{
  width:min(900px,100%) !important;
  margin:0 auto !important;
  overflow:visible !important;
}

.services-reference-track{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:24px !important;
  padding:4px 0 30px !important;
  animation:none !important;
  transform:none !important;
}

.services-reference-track .service-reference-card{
  width:100% !important;
  flex:0 0 auto !important;
  min-height:300px !important;
  border-radius:20px !important;
}


.services-slider-shell{
  display:block !important;
}

.services-slide-control{
  display:none !important;
}

.service-reference-card{
  background:#111 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.25) !important;
}

.service-reference-copy h2,
.service-reference-copy p{
  color:#fff !important;
}

.service-reference-button{
  background:var(--sm-red) !important;
  color:#fff !important;
  border-color:var(--sm-red) !important;
}

.service-card-light,
.service-card-green,
.service-card-teal{
  background:#111 !important;
  color:#fff !important;
}

.service-card-light .service-reference-icon,
.service-card-green .service-reference-icon,
.service-card-teal .service-reference-icon{
  color:var(--sm-red) !important;
}

.service-card-light .service-reference-copy h2,
.service-card-green .service-reference-copy h2,
.service-card-teal .service-reference-copy h2,
.service-card-light .service-reference-copy p,
.service-card-green .service-reference-copy p,
.service-card-teal .service-reference-copy p{
  color:#fff !important;
}

.service-objectives{
  background:var(--sm-bg) !important;
}
.service-objectives-heading h2,
.service-objectives-heading p,
.service-objective-grid span,
.service-objective-grid small{
  color:#fff !important;
}
.service-objective-grid a i{
  color:var(--sm-red) !important;
}

/* ---------- FULL DESKTOP INNER PAGES / FOOTER ---------- */
@media (min-width:901px){
  html,body{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  body{
    min-height:100vh !important;
    display:flex !important;
    flex-direction:column !important;
    overflow-x:hidden !important;
  }

  body > .page-frame,
  body > .inner-frame{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    aspect-ratio:auto !important;
  }

  body > .page-frame > .website,
  body > .inner-frame > .inner-website{
    width:100% !important;
    min-width:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  body.inner-page > .inner-frame,
  body.inner-page > .page-frame{
    flex:1 0 auto !important;
    min-height:calc(100vh - 220px) !important;
  }

  body.inner-page > .inner-frame > .inner-website,
  body.inner-page > .page-frame > .website{
    min-height:calc(100vh - 220px) !important;
    height:auto !important;
  }

  body > .site-footer{
    width:100% !important;
    flex:0 0 auto !important;
    margin-top:auto !important;
  }

  .inner-content,
  .solution-shell,
  .contact-hero,
  .contact-direct-grid,
  .contact-layout,
  .about-hero,
  .services-reference{
    max-width:1400px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .inner-content{
    padding-top:170px !important;
    padding-bottom:80px !important;
  }

  .services-page .services-reference{
    min-height:auto !important;
  }
}

/* ---------- MOBILE / SMALL VIEW: ticker stays above nav ---------- */
@media (max-width:900px){
  .header{
    top:60px !important;
  }

  .header::before{
    top:-39px;
    font-size:10px;
    height:26px;
  }

  .hero > .left-content{
    left:20px !important;
    top:120px !important;
    width:47% !important;
    max-width:47% !important;
  }

  .hero > .left-content h1{
    font-size:clamp(28px,5vw,42px) !important;
  }

  .hero > .left-content .hero-line{
    width:auto !important;
    max-width:100% !important;
    white-space:normal !important;
  }

  .hero > .right-content{
    right:20px !important;
    top:124px !important;
    width:35% !important;
  }

  .services-reference-track .service-reference-card{
    min-height:290px !important;
  }
}

@media (max-width:560px){
  .header{
    top:56px !important;
  }

  .header::before{
    top:-35px;
    font-size:9px;
  }

  .hero > .left-content{
    left:14px !important;
    top:105px !important;
    width:51% !important;
    max-width:51% !important;
  }

  .hero > .left-content h1{
    font-size:clamp(24px,6vw,34px) !important;
    letter-spacing:-1px !important;
  }

  .hero > .right-content{
    right:14px !important;
    top:108px !important;
    width:39% !important;
  }

  .hero > .bottom-left{
    left:14px !important;
    bottom:14px !important;
    width:58% !important;
  }

  .hero > .bottom-right{
    right:14px !important;
    bottom:14px !important;
    width:36% !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .header::before{animation:none !important;transform:none !important;}
}


/* Final portrait-banner treatment: show the supplied person cleanly without text baked into the banner. */
.hero-stage-image.stage-four,
.hero-stage-image.stage-five{
  background:
    radial-gradient(circle at 50% 50%,rgba(225,6,0,.10),transparent 34%),
    #080808 !important;
}
.hero-stage-image.stage-four img,
.hero-stage-image.stage-five img{
  object-fit:contain !important;
  object-position:center bottom !important;
  padding:0 !important;
  filter:none !important;
}
.hero-stage-image.stage-four::after,
.hero-stage-image.stage-five::after{
  background:
    linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.10) 48%,rgba(0,0,0,.70)),
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.64)) !important;
}
.hero-slider{
  overflow:visible !important;
  min-height:300px !important;
}
@media(max-width:900px){
  .hero-slider{min-height:235px !important;}
}
@media(max-width:560px){
  .hero-slider{min-height:205px !important;}
}

/* =========================================================
   SELL MEK — USER REQUEST PATCH (2026-09-04, round 2)
   1) Full-width desktop inner pages (remove side letterboxing)
   2) Services cards: 3-column side-by-side static grid
   3) Site-wide red/white text — fix remaining blue accents
========================================================= */

/* ---- 0. Re-point leftover blue/orange variables to the red system ---- */
:root{
  --nv-blue:var(--sm-red);
  --nv-blue-soft:#ffffff;
  --sm-orange:var(--sm-red);
}

/* ---- 1. FULL-WIDTH DESKTOP INNER PAGES ---- */
@media (min-width:901px){
  .inner-content,
  .solution-shell,
  .contact-hero,
  .contact-direct-grid,
  .contact-layout,
  .about-hero,
  .services-reference{
    max-width:1800px !important;
  }
  .services-page .services-reference{
    padding-left:clamp(24px,3.5vw,60px) !important;
    padding-right:clamp(24px,3.5vw,60px) !important;
  }
}

/* ---- 2. SERVICES: 3 CARDS SIDE BY SIDE (static grid, no marquee/stack) ---- */
.services-slide-control{ display:none !important; }
.services-slider-shell{ display:block !important; }
.services-reference-viewport{
  width:100% !important;
  overflow:visible !important;
}
.services-reference-track{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  width:100% !important;
  gap:26px !important;
  padding:4px 0 30px !important;
  animation:none !important;
  transform:none !important;
}
.services-reference-track .service-reference-card{
  width:100% !important;
  flex:none !important;
  min-height:340px !important;
  padding:36px !important;
}
.service-reference-icon{
  width:56px !important;
  height:56px !important;
  border-radius:14px !important;
  background:rgba(225,6,0,.16) !important;
  justify-content:center !important;
  align-items:center !important;
  font-size:22px !important;
}
@media(max-width:1100px){
  .services-reference-track{grid-template-columns:repeat(2,1fr) !important;}
}
@media(max-width:700px){
  .services-reference-track{grid-template-columns:1fr !important;}
}

/* ---- 3. FIX REMAINING BLUE BITS -> RED / WHITE ---- */
#service-search-input{
  background:var(--sm-panel) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#fff !important;
}
#service-search-input::placeholder{ color:rgba(255,255,255,.5) !important; }
.service-search > i{ color:var(--sm-red) !important; }
.footer-links a{ color:#fff !important; }
.footer-links a:hover{ color:var(--sm-red) !important; }
.footer-brand p{ color:rgba(255,255,255,.72) !important; }

/* =========================================================
   SELL MEK — USER REQUEST PATCH (round 3)
   Fix header overlapping hero content on inner pages that
   still used position:absolute (contact, solution, tools,
   pricing, language, service-detail pages, booking).
========================================================= */
.contact-page .header,
.solution-page .header,
.tools-page .header,
.inner-page .header,
body:not([class]) .header{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  height:auto !important;
  margin:18px auto 0 !important;
  padding:0 clamp(20px,4vw,48px) !important;
  max-width:1800px !important;
}
.contact-page .contact-hero,
body:not([class]) .booking-hero{
  padding-top:56px !important;
}


/* =====================================================
   SELL MEK — MOVING HEADER MARKETING TICKER
===================================================== */
.header-announcement{
    position:absolute;
    left:50%;
    top:-2px;
    transform:translateX(-50%);
    width:min(560px,42vw);
    height:24px;
    overflow:hidden;
    pointer-events:none;
    z-index:60;
    background:rgba(5,5,5,.94);
    border-radius:999px;
    color:#fff;
    font-size:9px;
    letter-spacing:1.2px;
    font-weight:700;
    line-height:24px;
    white-space:nowrap;
}
.header-announcement-track{
    display:inline-flex;
    align-items:center;
    gap:13px;
    min-width:max-content;
    animation:sellmekHeaderTicker 22s linear infinite;
    padding-right:13px;
}
.header-announcement-track b{
    color:#e10600;
    font-size:10px;
}
@keyframes sellmekHeaderTicker{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}
@media(max-width:900px){
    .header-announcement{
        width:55vw;
        top:1px;
        font-size:8px;
    }
}

/* Center the heading above the Why We Are Trusted results */
.dark-section-heading{
    text-align:center !important;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.dark-section-heading h2,
.dark-section-heading p{
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
}

/* Booking page back arrow */
.booking-back{
    position:absolute;
    top:98px;
    left:max(32px,calc((100% - 1240px)/2));
    z-index:20;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 13px;
    border:1px solid rgba(20,20,20,.14);
    border-radius:999px;
    background:#fff;
    color:#151515;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
    transition:transform .2s ease, background .2s ease;
}
.booking-back:hover{
    transform:translateX(-3px);
    background:#f0f0ee;
}
.booking-back i{font-size:11px;}
@media(max-width:700px){
    .booking-back{
        top:92px;
        left:20px;
    }
}

/* =====================================================
   FINAL USER PATCH — TOP RED MARKETING HEADLINE
   The moving marketing text belongs above the navigation,
   inside the red announcement bar. Keep it English and
   service-focused.
===================================================== */
.header::before{
  content:none !important;
  display:none !important;
}

.header-announcement{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:-42px !important;
  transform:none !important;
  width:100% !important;
  height:32px !important;
  display:flex !important;
  align-items:center !important;
  overflow:hidden !important;
  pointer-events:none !important;
  z-index:80 !important;
  background:var(--sm-red,#e10600) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  border-radius:0 !important;
  color:#fff !important;
  font-size:13px !important;
  letter-spacing:1.15px !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-shadow:0 7px 20px rgba(225,6,0,.2) !important;
}

.header-announcement-track{
  display:inline-flex !important;
  align-items:center !important;
  gap:18px !important;
  min-width:max-content !important;
  padding:0 22px !important;
  animation:sellmekTopHeadline 24s linear infinite !important;
}

.header-announcement-track span{
  display:inline-block !important;
  color:#fff !important;
  font-size:inherit !important;
  font-weight:800 !important;
  letter-spacing:inherit !important;
  text-transform:uppercase !important;
}

.header-announcement-track b{
  color:#fff !important;
  font-size:12px !important;
}

@keyframes sellmekTopHeadline{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Replace the old short ticker copy with the requested welcome + services. */
.header-announcement-track span:nth-of-type(1),
.header-announcement-track span:nth-of-type(7){font-weight:900 !important;}

/* Make the 1/8 indicator compact so the complete hero copy has room. */
.hero > .left-content .counter{
  font-size:8px !important;
  line-height:1.1 !important;
  letter-spacing:.6px !important;
  margin-bottom:12px !important;
  white-space:nowrap !important;
}

/* Built around business outcomes — centered heading block. */
.case-preview-heading{
  width:min(100%,900px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}
.case-preview-heading h2,
.case-preview-heading p{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media(max-width:900px){
  .header-announcement{
    top:-40px !important;
    height:29px !important;
    font-size:10px !important;
    letter-spacing:.85px !important;
  }
  .header-announcement-track{gap:13px !important;padding:0 16px !important;}
  .header-announcement-track b{font-size:9px !important;}
  .hero > .left-content .counter{
    font-size:7px !important;
    letter-spacing:.45px !important;
    margin-bottom:9px !important;
  }
}

@media(max-width:560px){
  .header-announcement{
    top:-36px !important;
    height:26px !important;
    font-size:8px !important;
    letter-spacing:.65px !important;
  }
  .header-announcement-track{gap:10px !important;padding:0 12px !important;}
  .header-announcement-track b{font-size:8px !important;}
  .hero > .left-content .counter{
    font-size:6.5px !important;
    margin-bottom:7px !important;
  }
}


/* =====================================================
   FINAL UI FIX — HEADER TICKER / INNER PAGE NAV / BOOKING BACK
===================================================== */
/* Use the real English ticker element. Do not place text in a
   pseudo-element that can be clipped above the viewport. */
.header::before{content:none !important;display:none !important;}
.header-announcement{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:-34px !important;
  transform:none !important;
  width:100% !important;
  height:28px !important;
  display:flex !important;
  align-items:center !important;
  overflow:hidden !important;
  z-index:100 !important;
  pointer-events:none !important;
  background:var(--sm-red,#e10600) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:0 !important;
  box-shadow:0 6px 18px rgba(225,6,0,.24) !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:28px !important;
  letter-spacing:.9px !important;
  white-space:nowrap !important;
}
.header-announcement-track{
  display:inline-flex !important;
  align-items:center !important;
  gap:16px !important;
  min-width:max-content !important;
  padding:0 18px !important;
  animation:sellmekTopHeadline 24s linear infinite !important;
}
.header-announcement-track span{color:#fff !important;font-weight:800 !important;}
.header-announcement-track b{color:#fff !important;font-size:11px !important;}
@keyframes sellmekTopHeadline{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* The home header keeps the ticker directly above the navigation. */
body > .page-frame > .website > .header{
  top:58px !important;
  z-index:100 !important;
}

/* About: keep the navigation visible on every viewport. */
.about-page .header{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:0 !important;
  width:100% !important;
  min-height:96px !important;
  height:auto !important;
  margin:0 !important;
  padding:40px 20px 10px !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  z-index:100 !important;
}
.about-page .header .nav{
  position:static !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  margin:0 auto !important;
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:101 !important;
  max-width:100% !important;
  overflow-x:auto !important;
}
.about-page .header .logo{display:none !important;}
.about-page .header-announcement{top:6px !important;}

/* Booking: the back control belongs immediately BELOW the menu. */
.booking-page .header{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:0 !important;
  width:100% !important;
  min-height:96px !important;
  height:auto !important;
  margin:0 !important;
  padding:40px 20px 10px !important;
  z-index:100 !important;
}
.booking-page .header-announcement{top:6px !important;}
.booking-page .nav{display:flex !important;visibility:visible !important;opacity:1 !important;max-width:100% !important;overflow-x:auto !important;}
.booking-page .booking-back{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  z-index:20 !important;
  width:max-content !important;
  margin:6px 20px 0 !important;
  align-self:flex-start !important;
}
.booking-page{padding-top:0 !important;}
.booking-page .booking-hero{padding-top:24px !important;}

/* Small screens: ticker first, menu directly underneath. */
@media(max-width:900px){
  .header-announcement{
    top:-32px !important;
    height:26px !important;
    font-size:9px !important;
    line-height:26px !important;
    letter-spacing:.7px !important;
  }
  body > .page-frame > .website > .header{
    top:58px !important;
    height:60px !important;
  }
  .about-page .header,
  .booking-page .header{
    min-height:96px !important;
    padding:38px 12px 8px !important;
  }
  .about-page .header-announcement,
  .booking-page .header-announcement{top:4px !important;}
  .about-page .header .nav,
  .booking-page .header .nav{
    width:100% !important;
    height:48px !important;
    min-height:48px !important;
    justify-content:flex-start !important;
  }
  .about-page .header .nav a,
  .booking-page .header .nav a{
    flex:0 0 auto !important;
  }
  .booking-page .booking-back{margin:5px 14px 0 !important;}
  .booking-page .booking-hero{padding-top:22px !important;}
}

@media(max-width:560px){
  .header-announcement{font-size:8px !important;letter-spacing:.55px !important;}
  .about-page .header,
  .booking-page .header{padding-top:36px !important;}
  .about-page .header-announcement,
  .booking-page .header-announcement{top:3px !important;}
}

/* Hero counter: compact but still readable. */
.hero > .left-content .counter{
  font-size:6px !important;
  line-height:1 !important;
  letter-spacing:.35px !important;
  margin-bottom:7px !important;
}
@media(max-width:900px){.hero > .left-content .counter{font-size:5.5px !important;margin-bottom:6px !important;}}
@media(max-width:560px){.hero > .left-content .counter{font-size:5px !important;margin-bottom:5px !important;}}

/* Required centered case heading. */
.case-preview-heading,
.case-preview-heading h2,
.case-preview-heading p{text-align:center !important;margin-left:auto !important;margin-right:auto !important;}

/* The hero no longer shows the Scroll for more prompt. */
.hero > .scroll{display:none !important;}


/* =====================================================
   FINAL USER UPDATE — 2026-09-04
   Navy reference background + centered fixed compact nav +
   hero CTA placement + trusted icons + heading alignment.
===================================================== */
:root{
  --ref-navy:#06101e;
  --ref-navy-2:#07172b;
  --ref-blue:#2f68d8;
  --ref-blue-soft:#78a8ff;
  --ref-text:#f5f8ff;
  --ref-muted:#8fa3bd;
}

html,body{
  background:var(--ref-navy) !important;
  color:var(--ref-text) !important;
}
body{
  background-image:
    linear-gradient(rgba(51,91,150,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51,91,150,.055) 1px, transparent 1px),
    radial-gradient(circle at 72% 15%, rgba(27,73,143,.18), transparent 36%) !important;
  background-size:56px 56px,56px 56px,auto !important;
}
.page-frame,
.website,
.inner-frame,
.inner-website{
  background-color:var(--ref-navy) !important;
  border-color:rgba(82,124,184,.12) !important;
}
.website,
.inner-website{
  background-image:
    linear-gradient(rgba(51,91,150,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51,91,150,.055) 1px, transparent 1px),
    radial-gradient(circle at 72% 18%, rgba(27,73,143,.14), transparent 36%) !important;
  background-size:56px 56px,56px 56px,auto !important;
}
.enterprise-signal,
.case-preview,
.results-reviews-section,
.reference-process,
.site-footer{
  background:transparent !important;
  color:var(--ref-text) !important;
}
.enterprise-signal{
  border-color:rgba(88,132,204,.14) !important;
  background:linear-gradient(180deg,rgba(7,23,43,.62),rgba(6,16,30,.15)) !important;
}
.case-preview{
  border-top:1px solid rgba(88,132,204,.10) !important;
}
.case-preview-heading{
  max-width:780px !important;
  margin:0 0 34px 0 !important;
  text-align:left !important;
}
.case-preview-heading h2,
.case-preview-heading p{
  text-align:left !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.case-preview-heading h2{
  color:var(--ref-text) !important;
}
.case-preview-heading h2 em{
  color:var(--ref-blue-soft) !important;
}
.case-preview-heading p{
  color:var(--ref-muted) !important;
}
.case-preview-grid article{
  background:linear-gradient(145deg,rgba(15,39,70,.72),rgba(5,17,32,.92)) !important;
  border-color:rgba(93,137,201,.16) !important;
}
.case-preview-grid h3{color:#fff !important;}
.case-preview-grid p,.case-preview-grid small{color:var(--ref-muted) !important;}
.case-preview-grid strong{color:var(--ref-blue-soft) !important;}

/* Fixed, compact, truly centered menu on every page. */
.nav{
  position:fixed !important;
  z-index:1000 !important;
  left:50% !important;
  top:72px !important;
  transform:translateX(-50%) !important;
  width:max-content !important;
  max-width:calc(100vw - 32px) !important;
  height:46px !important;
  min-height:46px !important;
  padding:4px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none !important;
  border-radius:999px !important;
  background:rgba(2,9,18,.94) !important;
  border:1px solid rgba(112,151,209,.20) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter:blur(14px) !important;
}
.nav::-webkit-scrollbar{display:none !important;}
.nav a,
.nav a:visited{
  flex:0 0 auto !important;
  height:36px !important;
  padding:0 10px !important;
  gap:6px !important;
  font-size:10px !important;
  color:#eaf1ff !important;
  border-radius:999px !important;
}
.nav a i{font-size:10px !important;}
.nav a:hover,
.nav a.active,
.nav a:focus-visible{
  background:var(--ref-blue) !important;
  color:#fff !important;
}
.nav .nav-brand{
  flex:0 0 auto !important;
  width:auto !important;
  padding:0 8px 0 7px !important;
}
.nav .nav-brand .site-logo{width:72px !important;height:auto !important;}
.nav .nav-brand + a{padding-left:9px !important;}

/* Keep the ticker above the fixed menu. */
.header-announcement{
  z-index:1001 !important;
}
body > .page-frame > .website > .header .header-announcement{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  top:34px !important;
  width:100vw !important;
}
.header .login{
  position:fixed !important;
  z-index:1002 !important;
  right:28px !important;
  top:68px !important;
  width:118px !important;
  height:42px !important;
  border-radius:999px !important;
  background:rgba(47,104,216,.95) !important;
  border:1px solid rgba(137,177,255,.25) !important;
  box-shadow:0 10px 28px rgba(20,66,145,.28) !important;
}
/* Only the home page has Login / Register in the header. */
body:not(:has(> .page-frame)) .header .login{display:none !important;}

/* Home hero: extend the dark hero down to the CTA row and put the buttons on top. */
body > .page-frame > .website > .hero{
  top:0 !important;
  height:clamp(650px, 62vw, 900px) !important;
  min-height:650px !important;
  background:var(--ref-navy) !important;
}
.hero > .hero-visual-slider{
  background:var(--ref-navy) !important;
}
.hero > .left-content .counter{
  font-size:11px !important;
  line-height:1.2 !important;
  letter-spacing:1.2px !important;
  margin-bottom:14px !important;
  color:rgba(229,239,255,.75) !important;
}
.hero > .left-content .counter-label{
  color:var(--ref-blue-soft) !important;
  font-weight:800 !important;
}
.hero > .left-content .counter-separator{color:rgba(255,255,255,.45) !important;}
.hero > .left-content h1{
  margin-top:0 !important;
}
.hero-cta-overlay{
  position:absolute !important;
  left:42px !important;
  bottom:28px !important;
  z-index:80 !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
.hero-cta-overlay a{
  min-width:160px !important;
  height:48px !important;
  padding:0 20px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:10px !important;
  text-decoration:none !important;
  font-size:12px !important;
  font-weight:800 !important;
}
.hero-cta-overlay .start{
  background:var(--ref-blue) !important;
  color:#fff !important;
  box-shadow:0 12px 30px rgba(35,91,194,.28) !important;
}
.hero-cta-overlay .contact{
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(145,176,221,.28) !important;
  color:#fff !important;
}
.hero > .bottom-left{
  left:42px !important;
  bottom:92px !important;
  z-index:70 !important;
}
.hero > .bottom-left p{color:rgba(205,220,242,.70) !important;}

/* Trusted block heading is on the far right; process heading returns to the left. */
.our-results-wrap .dark-section-heading{
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:0 !important;
  text-align:right !important;
}
.our-results-wrap .dark-section-heading h2,
.our-results-wrap .dark-section-heading p{
  text-align:right !important;
}
.our-results-wrap .dark-section-heading h2 span{color:var(--ref-blue-soft) !important;}
.reference-process-heading{
  max-width:760px !important;
  margin-left:0 !important;
  margin-right:auto !important;
  text-align:left !important;
}
.reference-process-heading h2,
.reference-process-heading p{text-align:left !important;}
.reference-process-heading h2{color:#fff !important;}
.reference-process-heading h2 span{color:var(--ref-blue-soft) !important;}
.reference-process-heading p{color:var(--ref-muted) !important;}
.reference-process-kicker{color:var(--ref-blue-soft) !important;background:rgba(47,104,216,.10) !important;border:1px solid rgba(120,168,255,.15) !important;}
.reference-process-card{background:rgba(7,23,43,.55) !important;border-color:rgba(113,151,205,.32) !important;}
.reference-process-card h3{color:#fff !important;}
.reference-process-card p{color:var(--ref-muted) !important;}
.reference-process-number{background:var(--ref-blue) !important;}
.reference-process-path .path-segment{border-color:rgba(115,151,203,.35) !important;}
.reference-process-path .path-start{border-color:var(--ref-blue-soft) !important;background:var(--ref-navy) !important;}
.reference-process-path .path-arrow{color:var(--ref-blue-soft) !important;}

/* Trusted cards: icons + counting animation remain visible. */
.results-counter-grid .dark-result-card{
  position:relative !important;
  min-height:190px !important;
  padding:24px !important;
  justify-content:flex-end !important;
  background:linear-gradient(145deg,rgba(14,40,73,.78),rgba(5,18,34,.96)) !important;
  border-color:rgba(100,143,208,.18) !important;
}
.trusted-card-icon{
  width:44px !important;
  height:44px !important;
  margin-bottom:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:13px !important;
  color:#8db7ff !important;
  background:rgba(47,104,216,.13) !important;
  border:1px solid rgba(120,168,255,.16) !important;
  box-shadow:0 8px 22px rgba(21,63,133,.20) !important;
}
.trusted-card-icon i{font-size:18px !important;color:inherit !important;}
.results-counter-grid .result-number{color:#fff !important;}
.results-counter-grid .result-label{color:#8fa3bd !important;}

/* All common page sections share the reference navy instead of gray/white. */
.inner-content,
.services-reference,
.solution-shell,
.contact-hero,
.contact-direct-grid,
.contact-layout,
.booking-hero,
.booking-layout,
.tools-shell,
.history-shell{
  background:transparent !important;
}
.inner-content h1,
.services-reference h1,
.solution-hero h1,
.detail-title{color:#fff !important;}
.inner-content p,
.detail-intro{color:rgba(213,226,245,.76) !important;}

@media(max-width:1100px){
  .nav a{padding-left:8px !important;padding-right:8px !important;}
  .nav .nav-brand .site-logo{width:66px !important;}
  .header .login{right:18px !important;width:108px !important;}
  .our-results-wrap .dark-section-heading{margin-left:auto !important;margin-right:0 !important;}
}
@media(max-width:900px){
  .nav{
    top:62px !important;
    height:44px !important;
    min-height:44px !important;
    max-width:calc(100vw - 18px) !important;
    justify-content:flex-start !important;
  }
  .nav a{height:34px !important;padding:0 9px !important;font-size:9px !important;}
  .nav .nav-brand{padding:0 7px !important;}
  .nav .nav-brand .site-logo{width:60px !important;}
  body > .page-frame > .website > .header .header-announcement{top:28px !important;}
  .header .login{display:none !important;}
  body > .page-frame > .website > .hero{
    height:clamp(620px, 86vw, 760px) !important;
    min-height:620px !important;
  }
  .hero-cta-overlay{left:20px !important;bottom:24px !important;}
  .hero-cta-overlay a{min-width:138px !important;height:44px !important;font-size:11px !important;}
  .hero > .bottom-left{left:20px !important;bottom:82px !important;width:52% !important;}
  .our-results-wrap .dark-section-heading,
  .our-results-wrap .dark-section-heading h2,
  .our-results-wrap .dark-section-heading p,
  .reference-process-heading,
  .reference-process-heading h2,
  .reference-process-heading p{text-align:left !important;}
  .our-results-wrap .dark-section-heading{margin-left:0 !important;margin-right:auto !important;}
}
@media(max-width:560px){
  .nav{top:56px !important;}
  body > .page-frame > .website > .header .header-announcement{top:24px !important;}
  .hero > .left-content .counter{font-size:9px !important;}
  .hero-cta-overlay{left:14px !important;right:14px !important;gap:8px !important;}
  .hero-cta-overlay a{flex:1 1 0 !important;min-width:0 !important;padding:0 10px !important;}
  .hero > .bottom-left{left:14px !important;bottom:76px !important;width:62% !important;}
  .trusted-card-icon{width:40px !important;height:40px !important;}
}


/* =========================================================
   FINAL USER UPDATE — BLUE REFERENCE + RESTORE ORIGINAL HEADINGS/CTA
   ========================================================= */
:root{
  --sm-red:#2f68d8;
  --sm-bg:#061426;
  --sm-panel:#0b203b;
  --sm-white:#ffffff;
  --sm-muted:rgba(255,255,255,.74);
  --site-red:#2f68d8;
  --site-bg:#061426;
  --reference-bg:#061426;
  --reference-red:#2f68d8;
  --nv-blue:#2f68d8;
  --nv-blue-soft:#78a8ff;
  --nv-red:#2f68d8;
  --brand-red:#2f68d8;
  --sm-orange:#2f68d8;
}

/* Site-wide navy background + blue accent, matching the supplied blue reference. */
html,body,.page-frame,.website,.inner-frame,.inner-website,
.about-page,.history-page,.inner-page{
  background-color:#061426 !important;
  color:#f5f8ff !important;
}
body{
  background-image:
    linear-gradient(rgba(75,125,205,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(75,125,205,.055) 1px,transparent 1px),
    radial-gradient(circle at 78% 10%,rgba(47,104,216,.18),transparent 35%) !important;
  background-size:58px 58px,58px 58px,auto !important;
}

/* The ticker/header strip above the menu: red -> blue. */
.header::before{background:#2f68d8 !important;box-shadow:0 8px 24px rgba(47,104,216,.28) !important;}
.header-announcement{background:#2f68d8 !important;border-color:rgba(120,168,255,.25) !important;}
.header-announcement-track b{color:#bcd3ff !important;}

/* Compact centered fixed menu. */
.header .nav{
  background:rgba(8,25,47,.94) !important;
  border:1px solid rgba(120,168,255,.20) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.34) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}
.header .nav a,.header .nav a:visited{color:rgba(245,248,255,.78) !important;}
.header .nav a.active,.header .nav a:hover,.header .nav a:focus-visible{
  background:#2f68d8 !important;color:#fff !important;
}
.header .nav a.active i,.header .nav a:hover i,.header .nav a:focus-visible i{color:#fff !important;}
.header .login{background:#2f68d8 !important;color:#fff !important;border-color:rgba(120,168,255,.25) !important;box-shadow:0 10px 25px rgba(47,104,216,.24) !important;}

/* Restore the original heading alignment/layout. */
.case-preview-heading{max-width:700px !important;margin-left:0 !important;margin-right:auto !important;text-align:left !important;}
.case-preview-heading h2,.case-preview-heading p{text-align:left !important;}
.our-results-wrap .dark-section-heading{max-width:760px !important;margin-left:auto !important;margin-right:auto !important;text-align:center !important;}
.our-results-wrap .dark-section-heading h2,.our-results-wrap .dark-section-heading p{text-align:center !important;}
.reference-process-heading{max-width:650px !important;margin-left:auto !important;margin-right:auto !important;text-align:center !important;}
.reference-process-heading h2,.reference-process-heading p{text-align:center !important;}

/* Restore Book a Meeting / Contact Us to the normal hero button position. */
.hero-cta-overlay{position:static !important;display:none !important;}
.hero > .left-content > .buttons{
  position:relative !important;
  display:flex !important;
  gap:16px !important;
  margin-top:17px !important;
  z-index:50 !important;
}
.hero > .left-content > .buttons a{display:inline-flex !important;}
.hero > .left-content > .buttons .start{background:#2f68d8 !important;color:#fff !important;}
.hero > .left-content > .buttons .contact{background:rgba(255,255,255,.05) !important;border:1px solid rgba(120,168,255,.28) !important;color:#fff !important;}

/* Blue accent throughout common sections/components. */
.start,.footer-cta,.about-cta-btn,.inner-actions a:first-child,
.services-slide-control:hover,.growth-slide-btn:hover{background:#2f68d8 !important;color:#fff !important;}
.orbit{border-color:rgba(120,168,255,.38) !important;}
.orbit-dot,.orange-icon,.orange-bars i{background:#2f68d8 !important;}
.progress-ring{background:conic-gradient(#2f68d8 0deg 281deg,#243752 281deg 360deg) !important;}

.enterprise-signal,.case-preview,.results-reviews-section,.our-results-wrap,.reference-process,.site-footer,
.services-reference,.solution-shell,.contact-hero,.contact-direct-grid,.contact-layout,.booking-hero,.booking-layout,.tools-shell,.history-shell{
  background-color:#061426 !important;
  background-image:
    linear-gradient(rgba(75,125,205,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(75,125,205,.045) 1px,transparent 1px) !important;
  background-size:58px 58px !important;
}
.case-preview-grid article,.results-counter-grid .dark-result-card,.meeting-history-card,
.reference-process-card{background:rgba(8,28,53,.78) !important;border-color:rgba(120,168,255,.18) !important;}
.case-preview-heading h2 em,.case-preview-grid strong,.dark-section-heading h2 span,.result-number,
.reference-process-heading h2 span,.growth-banner h2 em,.history-hero h1 span{color:#78a8ff !important;}

/* Remove lingering red literals from prominent UI accents. */
.hero-stage-dashboard{background:radial-gradient(circle at 50% 50%,rgba(47,104,216,.18),transparent 32%),linear-gradient(135deg,#061426,#0b203b 55%,#061426) !important;}
.footer-contact > a,.footer-links a:hover,.meeting-meta span i,.meeting-empty a{color:#78a8ff !important;}
.promo-banner h3 em,.services-banner h3 em,.case-banner h3 em,.promo-kicker{color:#78a8ff !important;}

@media(max-width:900px){
  .hero > .left-content > .buttons{margin-top:14px !important;}
  .our-results-wrap .dark-section-heading,.our-results-wrap .dark-section-heading h2,.our-results-wrap .dark-section-heading p,
  .reference-process-heading,.reference-process-heading h2,.reference-process-heading p{text-align:center !important;}
}


/* =====================================================
   REQUESTED UPDATE — HOME / ABOUT / TOOLS ONLY
===================================================== */
/* Keep the hero banners flush with the Strategy / Creative / Technology strip. */
body > .page-frame > .website > .hero{
    margin-bottom:0 !important;
}
body > .page-frame > .website > .enterprise-signal{
    margin-top:0 !important;
}

/* Our Popular Services — one large service card at a time. */
.popular-services-preview{overflow:hidden;}
.popular-services-viewport{
    width:min(760px,100%);
    margin:0 auto;
    overflow:hidden;
}
.popular-services-track{
    display:flex;
    width:100%;
    transition:transform .8s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
}
.popular-service-card{
    flex:0 0 100%;
    min-height:390px !important;
    box-sizing:border-box;
    padding:42px !important;
    border-radius:24px !important;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.popular-service-card .service-reference-icon{
    width:64px;
    height:64px;
    font-size:27px;
}
.popular-service-card .service-reference-copy h2{
    font-size:clamp(30px,5vw,48px);
    line-height:1.02;
}
.popular-service-card .service-reference-copy p{
    max-width:560px;
    font-size:15px;
    line-height:1.65;
}
@media(max-width:600px){
    .popular-service-card{min-height:330px !important;padding:28px !important;}
}

/* About — sliding marketing copy + location card. */
.about-marketing-slider{
    height:88px;
    overflow:hidden;
    position:relative;
}
.about-marketing-track{
    height:100%;
    transition:transform .75s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
}
.about-marketing-track p{
    height:100%;
    display:flex;
    align-items:center;
    margin:0 !important;
    font-size:15px;
    line-height:1.6;
}
.about-location-content{
    display:flex;
    align-items:center;
    gap:13px;
}
.about-location-content > i{
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(225,6,0,.14);
    color:var(--sm-red,#e10600);
    font-size:18px;
}
.about-location-content strong{
    display:block;
    color:var(--nv-text) !important;
    font-size:15px;
}
.about-location-content span{
    display:block;
    margin-top:4px;
    color:var(--nv-muted) !important;
    font-size:10px;
}

/* Tools — intentionally empty state. */
.tools-page .no-tools-state{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:360px;
}
.tools-page .no-tools-card{
    width:min(680px,100%);
    box-sizing:border-box;
    text-align:center;
    padding:55px 30px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:24px;
    background:rgba(14,26,48,.85);
}
.no-tools-icon{
    width:70px;
    height:70px;
    margin:0 auto 18px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,105,0,.14);
    color:#e10600;
    font-size:28px;
}
.no-tools-card h2{margin:0 0 10px;color:#fff;font-size:30px;}
.no-tools-card p{margin:0;color:rgba(255,255,255,.62);line-height:1.6;}

/* =========================================================
   FINAL FIX — SCROLLING HEADER + FULL HERO FLOW + PREMIUM
   POPULAR SERVICES
   The menu/ticker are intentionally NOT fixed: they scroll away
   with the page on every page of the site.
========================================================= */

/* Header itself participates in normal page flow on inner pages. */
.contact-page .header,
.tools-page .header,
.solution-page .header,
.booking-page .header,
.history-page .header,
.about-page .header,
.inner-page .header{
    position:relative !important;
}

/* Navigation is anchored to its header, not to the viewport. */
.nav{
    position:absolute !important;
    left:50% !important;
    top:14px !important;
    transform:translateX(-50%) !important;
    z-index:1000 !important;
}

/* Moving marketing headline also scrolls away with the header. */
.header-announcement,
body > .page-frame > .website > .header .header-announcement{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:-28px !important;
    width:100% !important;
    z-index:1001 !important;
}

/* Login follows the menu instead of staying pinned to the viewport. */
.header .login{
    position:absolute !important;
    right:0 !important;
    top:16px !important;
    z-index:1002 !important;
}

/* HOME: the hero is a real flow section, so its banner ends exactly
   where the Strategy / Creative / Technology strip begins. */
body > .page-frame{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
}
body > .page-frame > .website{
    height:auto !important;
    min-height:100vh !important;
    overflow:visible !important;
}
body > .page-frame > .website > .header{
    position:absolute !important;
    left:28px !important;
    right:28px !important;
    top:58px !important;
    height:74px !important;
    margin:0 !important;
    padding:0 !important;
    z-index:100 !important;
}
body > .page-frame > .website > .hero{
    position:relative !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    width:100% !important;
    height:clamp(760px,62vw,900px) !important;
    min-height:760px !important;
    margin:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
}
body > .page-frame > .website > .enterprise-signal{
    position:relative !important;
    margin:0 !important;
    clear:both !important;
}

/* All home section headings start from the RIGHT, matching the
   requested Popular Services heading direction. */
body > .page-frame > .website > .enterprise-signal .signal-intro,
body > .page-frame > .website > .case-preview .case-preview-heading,
body > .page-frame > .website > .our-results-wrap .dark-section-heading,
body > .page-frame > .website > .reference-process .reference-process-heading{
    margin-left:auto !important;
    margin-right:0 !important;
    text-align:right !important;
}
body > .page-frame > .website > .enterprise-signal .signal-intro strong,
body > .page-frame > .website > .enterprise-signal .signal-intro span,
body > .page-frame > .website > .case-preview .case-preview-heading h2,
body > .page-frame > .website > .case-preview .case-preview-heading p,
body > .page-frame > .website > .our-results-wrap .dark-section-heading h2,
body > .page-frame > .website > .our-results-wrap .dark-section-heading p,
body > .page-frame > .website > .reference-process .reference-process-heading h2,
body > .page-frame > .website > .reference-process .reference-process-heading p{
    text-align:right !important;
}

/* Popular Services: one premium, oversized card at a time. */
.popular-services-preview{
    overflow:hidden !important;
}
.popular-services-viewport{
    width:min(860px,100%) !important;
    margin:0 0 0 auto !important;
    overflow:hidden !important;
    border-radius:30px !important;
}
.popular-services-track{
    display:flex !important;
    width:100% !important;
    transition:transform .8s cubic-bezier(.22,.61,.36,1) !important;
}
.popular-service-card{
    position:relative !important;
    flex:0 0 100% !important;
    min-height:440px !important;
    padding:48px 48px 92px !important;
    border-radius:30px !important;
    justify-content:flex-start !important;
    box-shadow:0 30px 80px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.12) !important;
    border:1px solid rgba(255,255,255,.12) !important;
}
.popular-service-card::before{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:29px;
    pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 38%,rgba(0,0,0,.08));
}
.popular-service-card .service-reference-icon{
    position:relative !important;
    z-index:2 !important;
    width:68px !important;
    height:68px !important;
    margin-bottom:28px !important;
    border-radius:20px !important;
    background:rgba(255,255,255,.16) !important;
    box-shadow:0 12px 30px rgba(0,0,0,.14) !important;
    justify-content:center !important;
}
.popular-service-card .service-reference-copy{
    position:relative !important;
    z-index:2 !important;
    max-width:650px !important;
}
.popular-service-card .service-reference-copy h2{
    margin:0 0 18px !important;
    font-size:clamp(34px,4.3vw,54px) !important;
    line-height:1 !important;
    letter-spacing:-2px !important;
}
.popular-service-card .service-reference-copy p{
    max-width:600px !important;
    margin:0 !important;
    font-size:15px !important;
    line-height:1.7 !important;
}
.popular-service-card .service-reference-button{
    left:48px !important;
    bottom:28px !important;
    z-index:5 !important;
    min-height:42px !important;
    padding:0 18px !important;
    background:rgba(255,255,255,.16) !important;
    border:1px solid rgba(255,255,255,.22) !important;
    box-shadow:0 10px 25px rgba(0,0,0,.15) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
}
.popular-service-card .service-reference-button span{font-size:19px !important;}

@media(max-width:900px){
    body > .page-frame > .website > .header{
        left:12px !important;
        right:12px !important;
        top:58px !important;
    }
    body > .page-frame > .website > .hero{
        height:clamp(620px,86vw,760px) !important;
        min-height:620px !important;
    }
    .nav{
        top:14px !important;
        max-width:calc(100vw - 18px) !important;
    }
    .header .login{display:none !important;}
    .header-announcement,
    body > .page-frame > .website > .header .header-announcement{
        top:-30px !important;
        height:26px !important;
    }
    .popular-services-viewport{width:100% !important;}
    .popular-service-card{
        min-height:380px !important;
        padding:34px 30px 88px !important;
        border-radius:24px !important;
    }
    .popular-service-card .service-reference-button{left:30px !important;bottom:25px !important;}
    body > .page-frame > .website > .enterprise-signal .signal-intro,
    body > .page-frame > .website > .case-preview .case-preview-heading,
    body > .page-frame > .website > .our-results-wrap .dark-section-heading,
    body > .page-frame > .website > .reference-process .reference-process-heading{
        margin-left:auto !important;
        margin-right:0 !important;
        text-align:right !important;
    }
    body > .page-frame > .website > .enterprise-signal .signal-intro strong,
    body > .page-frame > .website > .enterprise-signal .signal-intro span,
    body > .page-frame > .website > .case-preview .case-preview-heading h2,
    body > .page-frame > .website > .case-preview .case-preview-heading p,
    body > .page-frame > .website > .our-results-wrap .dark-section-heading h2,
    body > .page-frame > .website > .our-results-wrap .dark-section-heading p,
    body > .page-frame > .website > .reference-process .reference-process-heading h2,
    body > .page-frame > .website > .reference-process .reference-process-heading p{
        text-align:right !important;
    }
}

@media(max-width:560px){
    .popular-service-card{min-height:350px !important;padding:30px 24px 82px !important;}
    .popular-service-card .service-reference-icon{width:58px !important;height:58px !important;margin-bottom:22px !important;}
    .popular-service-card .service-reference-copy h2{font-size:32px !important;letter-spacing:-1.2px !important;}
    .popular-service-card .service-reference-copy p{font-size:13px !important;}
    .popular-service-card .service-reference-button{left:24px !important;bottom:22px !important;}
}

/* =========================================================
   FINAL USER FIX — POPULAR SERVICES CENTER + HERO CTA + INNER NAV
========================================================= */

/* 1) Popular Services card stays large and centered on the page. */
.popular-services-viewport{
    width:min(860px, calc(100% - 40px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* 2) Home hero CTA buttons sit lower, with a cleaner premium treatment. */
body > .page-frame > .website > .hero > .left-content > .buttons{
    margin-top:48px !important;
    gap:14px !important;
    align-items:center !important;
}
body > .page-frame > .website > .hero > .left-content > .buttons a{
    min-height:48px !important;
    padding:0 22px !important;
    border-radius:12px !important;
    box-sizing:border-box !important;
    box-shadow:0 12px 28px rgba(0,0,0,.22) !important;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
body > .page-frame > .website > .hero > .left-content > .buttons a:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 16px 34px rgba(0,0,0,.28) !important;
}
body > .page-frame > .website > .hero > .left-content > .buttons .start{
    background:#2f68d8 !important;
    border:1px solid rgba(120,168,255,.38) !important;
    color:#fff !important;
}
body > .page-frame > .website > .hero > .left-content > .buttons .contact{
    background:rgba(8,25,47,.72) !important;
    border:1px solid rgba(120,168,255,.30) !important;
    color:#fff !important;
}

/* 3) Our Tools + Contact Us: header/menu is always visible and scrolls
      naturally with the page (never fixed to the viewport). */
.tools-page,
.contact-page{
    overflow-x:hidden !important;
    overflow-y:auto !important;
}
.tools-page .header,
.contact-page .header{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    min-height:88px !important;
    height:88px !important;
    box-sizing:border-box !important;
    display:block !important;
    z-index:5000 !important;
    padding:0 24px !important;
}
.tools-page .header .logo,
.contact-page .header .logo{
    position:absolute !important;
    left:24px !important;
    top:20px !important;
    z-index:5002 !important;
}
.tools-page .header .nav,
.contact-page .header .nav{
    position:absolute !important;
    left:50% !important;
    top:20px !important;
    transform:translateX(-50%) !important;
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:5003 !important;
    width:max-content !important;
    max-width:calc(100% - 48px) !important;
}
.tools-page .header .login,
.contact-page .header .login{
    position:absolute !important;
    right:24px !important;
    top:18px !important;
    z-index:5004 !important;
}
.tools-page .header-announcement,
.contact-page .header-announcement{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:-28px !important;
    width:100% !important;
    z-index:5005 !important;
}

@media(max-width:900px){
    body > .page-frame > .website > .hero > .left-content > .buttons{
        margin-top:36px !important;
    }
    .popular-services-viewport{
        width:calc(100% - 24px) !important;
    }
    .tools-page .header,
    .contact-page .header{
        min-height:72px !important;
        height:72px !important;
        padding:0 10px !important;
    }
    .tools-page .header .logo,
    .contact-page .header .logo{
        left:10px !important;
        top:16px !important;
    }
    .tools-page .header .nav,
    .contact-page .header .nav{
        left:50% !important;
        top:12px !important;
        max-width:calc(100% - 20px) !important;
    }
    .tools-page .header .login,
    .contact-page .header .login{
        display:none !important;
    }
    .tools-page .header-announcement,
    .contact-page .header-announcement{
        top:-26px !important;
    }
}


/* =========================================================
   FINAL USER FIX — WHY TRUSTED + PROCESS HEADINGS
   Left aligned and kept on one line on the Home page only.
========================================================= */
body > .page-frame > .website > .our-results-wrap .dark-section-heading,
body > .page-frame > .website > .reference-process .reference-process-heading{
    margin-left:0 !important;
    margin-right:auto !important;
    text-align:left !important;
}
body > .page-frame > .website > .our-results-wrap .dark-section-heading h2,
body > .page-frame > .website > .reference-process .reference-process-heading h2{
    text-align:left !important;
    white-space:nowrap !important;
}
@media(max-width:560px){
    body > .page-frame > .website > .our-results-wrap .dark-section-heading h2,
    body > .page-frame > .website > .reference-process .reference-process-heading h2{
        font-size:clamp(24px, 7vw, 34px) !important;
        white-space:nowrap !important;
    }
}


/* =========================================================
   FINAL USER UPDATE — 2026-09-05
   Logo stays independent on the far left, menu stays clean,
   CTA gets more breathing room, and Explore pages get a fuller
   service value / deliverables presentation.
========================================================= */
.header .logo{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    z-index:1004 !important;
}
.header .logo .site-logo{
    height:72px !important;
    width:auto !important;
    padding:8px 18px !important;
    border-radius:10px !important;
}
.nav .nav-brand{display:none !important;}

/* Give the menu a little more vertical separation from page headings. */
body > .page-frame > .website > .hero > .left-content{
    padding-top:72px !important;
}
.inner-page .inner-content,
.service-detail .inner-content{
    padding-top:220px !important;
}

/* Book a Meeting: one line, larger, lower and visually stronger. */
body > .page-frame > .website > .hero > .left-content > .buttons{
    margin-top:66px !important;
    gap:16px !important;
}
body > .page-frame > .website > .hero > .left-content > .buttons .start{
    min-height:58px !important;
    min-width:184px !important;
    padding:0 28px !important;
    white-space:nowrap !important;
    font-size:15px !important;
    font-weight:800 !important;
    letter-spacing:.1px !important;
}
body > .page-frame > .website > .hero > .left-content > .buttons .contact{
    min-height:58px !important;
    padding:0 24px !important;
    white-space:nowrap !important;
    font-size:14px !important;
}

/* Home trust/process titles: left aligned and comfortably below the menu. */
body > .page-frame > .website > .our-results-wrap .dark-section-heading,
body > .page-frame > .website > .reference-process .reference-process-heading{
    width:100% !important;
    max-width:820px !important;
    margin:58px 0 30px !important;
    text-align:left !important;
}
body > .page-frame > .website > .our-results-wrap .dark-section-heading h2,
body > .page-frame > .website > .reference-process .reference-process-heading h2{
    text-align:left !important;
    white-space:nowrap !important;
}

/* -------- Explore More / Service Detail presentation -------- */
.service-detail .inner-content{
    align-items:stretch !important;
    text-align:left !important;
    max-width:1180px !important;
    margin:0 auto !important;
}
.service-detail .inner-kicker,
.service-detail .inner-content h1,
.service-detail .inner-content > p{
    margin-left:0 !important;
    margin-right:auto !important;
}
.service-detail .inner-content h1{max-width:980px !important;}
.service-detail .inner-content > p{max-width:820px !important;}
.service-detail .inner-feature-list{
    max-width:920px !important;
    margin:30px 0 0 !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.service-value-section{
    width:100% !important;
    margin-top:68px !important;
    padding-top:54px !important;
    border-top:1px solid rgba(120,168,255,.14) !important;
}
.service-section-heading{
    max-width:820px !important;
    margin-bottom:30px !important;
}
.service-section-heading.compact{
    max-width:760px !important;
    margin-top:0 !important;
}
.service-section-heading > span{
    display:inline-block !important;
    margin-bottom:10px !important;
    color:#78a8ff !important;
    font-size:11px !important;
    font-weight:800 !important;
    letter-spacing:2px !important;
}
.service-section-heading h2{
    margin:0 0 12px !important;
    color:#fff !important;
    font-size:clamp(28px,4vw,48px) !important;
    line-height:1.02 !important;
    letter-spacing:-1.8px !important;
}
.service-section-heading p{
    margin:0 !important;
    color:rgba(255,255,255,.66) !important;
    font-size:15px !important;
    line-height:1.7 !important;
}
.service-benefits-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:16px !important;
}
.service-benefit-card{
    position:relative !important;
    min-height:210px !important;
    padding:22px !important;
    border:1px solid rgba(120,168,255,.14) !important;
    border-radius:20px !important;
    background:linear-gradient(145deg,rgba(11,35,63,.82),rgba(7,20,36,.92)) !important;
    box-shadow:0 18px 42px rgba(0,0,0,.18) !important;
}
.service-benefit-number{
    display:block !important;
    margin-bottom:34px !important;
    color:rgba(120,168,255,.76) !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:2px !important;
}
.service-benefit-card h3{
    margin:0 0 10px !important;
    color:#fff !important;
    font-size:18px !important;
    line-height:1.2 !important;
}
.service-benefit-card p{
    margin:0 !important;
    color:rgba(255,255,255,.62) !important;
    font-size:13px !important;
    line-height:1.65 !important;
}
.service-delivery-block{
    margin-top:64px !important;
    padding:42px 0 8px !important;
    border-top:1px solid rgba(120,168,255,.10) !important;
}
.service-steps-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:16px !important;
}
.service-step-card{
    padding:24px !important;
    border-radius:20px !important;
    border:1px solid rgba(120,168,255,.14) !important;
    background:rgba(8,28,53,.72) !important;
}
.service-step-card > span{
    display:inline-flex !important;
    width:44px !important;
    height:44px !important;
    align-items:center !important;
    justify-content:center !important;
    margin-bottom:22px !important;
    border-radius:14px !important;
    background:rgba(47,104,216,.18) !important;
    color:#78a8ff !important;
    font-size:12px !important;
    font-weight:900 !important;
}
.service-step-card h3{
    margin:0 0 8px !important;
    font-size:20px !important;
    color:#fff !important;
}
.service-step-card p{
    margin:0 !important;
    font-size:13px !important;
    line-height:1.65 !important;
    color:rgba(255,255,255,.62) !important;
}
.service-detail .inner-actions{
    justify-content:flex-start !important;
    margin-top:42px !important;
}
.service-detail .service-faq{
    max-width:920px !important;
    margin:64px 0 0 !important;
}
.service-detail .service-faq-heading{
    text-align:left !important;
    margin-left:0 !important;
}
.service-detail .service-faq-heading h2,
.service-detail .service-faq-heading p{text-align:left !important;}

@media(max-width:900px){
    .header .logo{left:8px !important;top:6px !important;}
    .header .logo .site-logo{height:58px !important;padding:6px 13px !important;}
    .inner-page .inner-content,
    .service-detail .inner-content{padding-top:160px !important;}
    body > .page-frame > .website > .hero > .left-content{padding-top:62px !important;}
    body > .page-frame > .website > .hero > .left-content > .buttons{margin-top:52px !important;}
    body > .page-frame > .website > .hero > .left-content > .buttons .start{min-width:170px !important;min-height:54px !important;font-size:14px !important;padding:0 20px !important;}
    body > .page-frame > .website > .our-results-wrap .dark-section-heading,
    body > .page-frame > .website > .reference-process .reference-process-heading{margin:46px 0 24px !important;}
    .service-benefits-grid{grid-template-columns:1fr 1fr !important;}
    .service-steps-grid{grid-template-columns:1fr !important;}
    .service-detail .inner-feature-list{grid-template-columns:1fr !important;}
}

@media(max-width:560px){
    .header .logo .site-logo{height:50px !important;padding:5px 11px !important;}
    body > .page-frame > .website > .hero > .left-content > .buttons{width:100% !important;align-items:stretch !important;margin-top:44px !important;}
    body > .page-frame > .website > .hero > .left-content > .buttons a{flex:1 1 auto !important;justify-content:center !important;}
    body > .page-frame > .website > .hero > .left-content > .buttons .start{min-width:0 !important;}
    .service-benefits-grid{grid-template-columns:1fr !important;}
    .service-benefit-card{min-height:0 !important;}
    .service-value-section{margin-top:50px !important;padding-top:38px !important;}
    .service-section-heading h2{font-size:31px !important;}
    .service-detail .inner-content h1{font-size:clamp(38px,10vw,58px) !important;}
}


/* =====================================================
   HOME UPDATE — VIDEO SHOWCASE
   Added above Our Popular Services.
===================================================== */
.video-showcase{
    padding:78px clamp(28px,5vw,76px) 70px;
    background:#fff;
}
.video-showcase-heading{
    max-width:700px;
    margin:0 0 30px;
    text-align:left;
}
.video-showcase-heading > span{
    display:block;
    color:var(--sm-orange,#e39a63);
    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
    margin-bottom:8px;
}
.video-showcase-heading h2{
    margin:0 0 12px;
    color:#111;
    font-size:clamp(34px,5vw,58px);
    line-height:.98;
    letter-spacing:-3px;
}
.video-showcase-heading h2 em{
    font-style:normal;
    color:var(--sm-red,#e10600);
}
.video-showcase-heading p{
    margin:0;
    color:#666;
    line-height:1.6;
}
.video-showcase-frame{
    position:relative;
    width:min(100%,1080px);
    margin:0 auto;
    min-height:420px;
    overflow:hidden;
    border-radius:24px;
    background:#111;
    box-shadow:0 20px 55px rgba(0,0,0,.14);
}
.sellmek-video{
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    height:auto;
    min-height:420px;
    object-fit:cover;
    background:#111;
}
.video-showcase-fallback{
    position:absolute;
    inset:0;
    z-index:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:30px;
    text-align:center;
    color:#fff;
    pointer-events:none;
}
.video-showcase-fallback i{font-size:54px;opacity:.9}
.video-showcase-fallback strong{font-size:22px}
.video-showcase-fallback span{
    max-width:520px;
    color:rgba(255,255,255,.68);
    font-size:12px;
    line-height:1.5;
}
.video-showcase-fallback code{color:#fff}

/* Why We Are Trusted / Process We Follow headings:
   left aligned like Our Popular Services. */
.results-reviews-section .our-results-wrap > .dark-section-heading,
.reference-process-heading{
    margin-left:0 !important;
    margin-right:auto !important;
    text-align:left !important;
}
.reference-process-heading p{
    margin-left:0 !important;
    margin-right:auto !important;
}

/* Meeting history — Join button hidden until countdown ends. */
.join-meeting-btn{
    display:none;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:max-content;
    min-width:170px;
    margin-top:18px;
    padding:13px 20px;
    border-radius:12px;
    background:var(--site-red,#e10600);
    color:#fff !important;
    text-decoration:none !important;
    font-size:13px;
    font-weight:800;
    box-shadow:0 10px 24px rgba(225,6,0,.22);
    transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;
}
.join-meeting-btn.is-visible{
    display:inline-flex;
    animation:joinMeetingIn .35s ease both;
}
.join-meeting-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 28px rgba(225,6,0,.28);
}
.join-meeting-btn.is-disabled{opacity:.55;cursor:not-allowed}
@keyframes joinMeetingIn{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
}

@media(max-width:600px){
    .video-showcase{padding:58px 22px 52px}
    .video-showcase-frame,.sellmek-video{min-height:260px}
    .video-showcase-fallback{padding:20px}
    .video-showcase-fallback i{font-size:42px}
    .video-showcase-fallback strong{font-size:18px}
    .join-meeting-btn{width:100%}
}


/* =====================================================
   SELL MEK — EXTENDED HOME INFORMATION
   ===================================================== */
.home-growth-story,.home-process-story,.home-final-cta,.home-image-grid{
  width:min(1240px,calc(100% - 80px));margin:0 auto;
}
.home-growth-story{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:110px 0 80px}
.home-story-copy h2,.home-process-story h2{font-size:clamp(38px,5vw,72px);line-height:.98;letter-spacing:-2px;margin:12px 0 22px}
.home-story-copy h2 span,.home-process-story h2 span,.home-final-cta h2 span{color:var(--orange,#ff6500)}
.home-story-copy>p{max-width:620px;font-size:18px;line-height:1.8;color:#555}
.home-story-image{border-radius:28px;overflow:hidden;min-height:460px}
.home-story-image img{width:100%;height:100%;min-height:460px;object-fit:cover;display:block}
.home-story-points{margin-top:30px;display:grid;gap:14px}
.home-story-points div{display:flex;gap:18px;align-items:flex-start;padding:15px 0;border-top:1px solid rgba(20,20,20,.12)}
.home-story-points strong{font-size:13px;color:#ff6500;letter-spacing:1px}
.home-story-points span{font-weight:650;color:#222}
.home-image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:40px 0 110px}
.home-image-grid article{position:relative;min-height:470px;border-radius:24px;overflow:hidden;background:#141414;color:#fff}
.home-image-grid img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;opacity:.72;transition:transform .6s ease}
.home-image-grid article:hover img{transform:scale(1.06)}
.home-image-grid article>div{position:absolute;inset:auto 0 0;padding:30px;background:linear-gradient(transparent,rgba(0,0,0,.9))}
.home-image-grid span{font-size:11px;letter-spacing:2px;color:#ff6500;font-weight:800}
.home-image-grid h3{font-size:28px;margin:8px 0}
.home-image-grid p{color:rgba(255,255,255,.75);line-height:1.6}
.home-process-story{padding:90px 0 100px}
.home-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.home-process-grid>div{padding:28px;border:1px solid rgba(20,20,20,.12);border-radius:20px;min-height:210px}
.home-process-grid b{color:#ff6500;font-size:13px;letter-spacing:1px}
.home-process-grid h3{font-size:24px;margin:35px 0 8px}
.home-process-grid p{color:#666;line-height:1.6}
.home-final-cta{margin-bottom:100px;padding:65px;border-radius:30px;background:#141414;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:30px}
.home-final-cta h2{font-size:clamp(38px,5vw,68px);line-height:1;margin:10px 0}
.home-final-cta p{color:#aaa;max-width:600px}
.home-final-cta a{flex:0 0 auto;background:#ff6500;color:#fff;padding:17px 24px;border-radius:999px;font-weight:800}
@media(max-width:900px){
 .home-growth-story{grid-template-columns:1fr;gap:35px}.home-image-grid{grid-template-columns:1fr}.home-process-grid{grid-template-columns:1fr 1fr}.home-final-cta{flex-direction:column;align-items:flex-start}.home-growth-story,.home-process-story,.home-final-cta,.home-image-grid{width:min(100% - 32px,1240px)}
}
@media(max-width:560px){.home-process-grid{grid-template-columns:1fr}.home-final-cta{padding:35px 25px}}
/* Dynamic tools cards */
.tools-grid .tool-card{background:#fff;border:1px solid rgba(20,20,20,.1);border-radius:20px;padding:28px;display:flex;flex-direction:column;min-height:250px}
.tools-grid .tool-icon{width:52px;height:52px;border-radius:15px;background:#ff6500;color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:25px}
.tools-grid .tool-card h2{font-size:24px;margin-bottom:10px}.tools-grid .tool-card p{color:#666;line-height:1.65}
.tools-grid .tool-card a{margin-top:auto;color:#ff6500;font-weight:800}

.home-pricing-story{width:min(1240px,calc(100% - 80px));margin:0 auto;padding:40px 0 110px}
.home-pricing-heading{max-width:720px;margin-bottom:38px}.home-pricing-heading h2{font-size:clamp(38px,5vw,70px);line-height:1;margin:10px 0 16px}.home-pricing-heading h2 span{color:#ff6500}.home-pricing-heading p{color:#666;line-height:1.7}
.home-pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.home-price-card{position:relative;border:1px solid rgba(20,20,20,.12);border-radius:24px;padding:30px;background:#fff}.home-price-card.is-popular{border:2px solid #ff6500}.home-price-badge{position:absolute;right:20px;top:20px;background:#ff6500;color:#fff;font-size:10px;font-weight:800;padding:6px 9px;border-radius:99px}.home-price-card h3{font-size:28px}.home-price-card p{color:#666;min-height:50px}.home-price-value{font-size:48px;font-weight:900;margin:25px 0}.home-price-value small{font-size:14px;font-weight:600;color:#777}.home-price-card ul{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:11px}.home-price-card li{color:#444}.home-price-card li i{color:#ff6500;margin-right:9px}.home-price-card>a{display:block;text-align:center;background:#141414;color:#fff;padding:13px;border-radius:999px;font-weight:800}.home-price-card.is-popular>a{background:#ff6500}
@media(max-width:900px){.home-pricing-grid{grid-template-columns:1fr}.home-pricing-story{width:min(100% - 32px,1240px)}}

.account-page{margin:0;background:#f4f2ed;color:#141414;min-height:100vh;font-family:Inter,Arial,sans-serif}
.account-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:50px 20px;position:relative;overflow:hidden}
.account-brand{position:absolute;left:35px;top:30px;z-index:3}.account-brand img{width:150px;max-height:45px;object-fit:contain}
.account-card{width:min(100%,520px);background:rgba(255,255,255,.9);backdrop-filter:blur(16px);border:1px solid rgba(20,20,20,.1);border-radius:30px;padding:42px;position:relative;z-index:2;box-shadow:0 30px 90px rgba(20,20,20,.12)}
.account-heading>span{font-size:10px;letter-spacing:2px;color:#ff6500;font-weight:900}.account-heading h1{font-size:48px;line-height:1;margin:10px 0}.account-heading h1 em{font-style:normal;color:#ff6500}.account-heading p{color:#666;line-height:1.7}
.account-tabs{display:grid;grid-template-columns:1fr 1fr;background:#f0eee9;padding:5px;border-radius:13px;margin:28px 0 20px}.account-tabs button{border:0;background:transparent;padding:11px;border-radius:10px;font-weight:800;cursor:pointer}.account-tabs button.active{background:#141414;color:#fff}
.account-form{display:grid;gap:16px}.account-form label{font-size:12px;font-weight:800;display:grid;gap:7px}.account-form input{border:1px solid #ddd;border-radius:12px;padding:14px 15px;font:inherit;outline:none;background:#fff}.account-form input:focus{border-color:#ff6500;box-shadow:0 0 0 3px rgba(255,101,0,.12)}
.account-password{position:relative}.account-password input{width:100%;padding-right:65px}.show-pass{position:absolute;right:9px;top:8px;border:0;background:#f1efeb;padding:7px 9px;border-radius:8px;font-weight:700;cursor:pointer}
.account-submit{margin-top:5px;border:0;background:#ff6500;color:#fff;border-radius:12px;padding:15px;font-weight:900;font-size:14px;cursor:pointer}.account-submit span{float:right}.account-back{text-align:center;margin:25px 0 0}.account-back a{color:#555;font-weight:700}.account-error{padding:11px 13px;border-radius:10px;background:#fff0ed;color:#b93824;font-size:13px;margin-bottom:15px}
.account-orbit{position:absolute;border:1px dashed rgba(255,101,0,.35);border-radius:50%;width:430px;height:430px;right:-220px;top:10%;}.account-orbit.two{width:280px;height:280px;left:-150px;bottom:-80px}
@media(max-width:600px){.account-card{padding:28px 22px}.account-heading h1{font-size:40px}.account-brand{left:20px;top:20px}}

/* ===== Update: homepage media, spacing and academy ===== */
.video-showcase{background:#f8f8f7 !important;}
.video-showcase-heading,.case-preview-heading,.media-showcase-heading{padding-top:8px;}
.achievements-section,.success-story-section{padding:78px clamp(28px,5vw,76px);background:#f8f8f7;}
.media-showcase-heading{max-width:760px;margin:0 0 30px;}
.media-showcase-heading>span{display:block;color:var(--sm-orange,#e39a63);font-size:10px;font-weight:800;letter-spacing:2px;margin-bottom:8px;}
.media-showcase-heading h2{margin:0 0 12px;color:#111;font-size:clamp(34px,5vw,58px);line-height:.98;letter-spacing:-3px;}
.media-showcase-heading h2 em{font-style:normal;color:var(--sm-red,#e10600);}
.media-showcase-heading p{margin:0;color:#666;line-height:1.6;}
.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1200px;margin:0 auto;}
.sm-media-card{min-width:0;background:#fff;border:1px solid #e2e2de;border-radius:22px;padding:12px;box-shadow:0 12px 35px rgba(20,30,30,.06);}
.sm-media-video{width:100%;aspect-ratio:9/16;overflow:hidden;border-radius:16px;background:#111;}
.sm-media-video video{width:100%;height:100%;object-fit:cover;display:block;}
.sm-media-card h3{margin:14px 8px 5px;font-size:18px;color:#111;}
.sm-media-card p{margin:0 8px 8px;color:#666;font-size:14px;}
.success-video-large{max-width:1120px;margin:0 auto;display:grid;gap:22px;}
.success-video-large .sm-media-card{padding:14px;}
.success-video-large .sm-media-video{aspect-ratio:16/9;border-radius:20px;}
.success-video-large .sm-media-video video{object-fit:cover;}
.academy-empty{min-height:700px;}
.nav{gap:3px !important;}
.nav a{margin:0 1px !important;}
/* Keep headings visually separated from the navigation pill. */
body:not(.home) .inner-content, body.services-page .services-content, body.tools-page .tools-content{padding-top:165px;}
@media(max-width:900px){
 .media-grid{grid-template-columns:1fr 1fr;}
 .success-video-large .sm-media-video{aspect-ratio:16/10;}
}
@media(max-width:620px){.media-grid{grid-template-columns:1fr;}.achievements-section,.success-story-section{padding:58px 20px;}}

/* Heading separation from navigation */
.services-page .services-reference{padding-top:clamp(58px,7vw,86px) !important;}
.tools-page .tools-hero{padding-top:clamp(58px,7vw,86px) !important;}

/* =========================================================
   FINAL UI FIX — TEXT ACHIEVEMENTS + LOGIN/REGISTER REFERENCE
   ========================================================= */
.achievements-section,.success-story-section{background:#f8f8f7 !important;}
.text-story-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.sm-text-story-card{position:relative;display:grid;grid-template-columns:56px 1fr 28px;gap:18px;align-items:start;min-height:190px;padding:28px;background:#fff;border:1px solid #e0e0dc;border-radius:22px;box-shadow:0 12px 35px rgba(20,30,30,.06);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;overflow:hidden;}
.sm-text-story-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--sm-red,#e10600);}
.sm-text-story-card:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(20,30,30,.1);border-color:#d2d2cc;}
.sm-text-story-number{font-size:13px;font-weight:900;letter-spacing:1px;color:var(--sm-red,#e10600);padding-top:3px;}
.sm-text-story-content h3{margin:0 0 10px;color:#111;font-size:22px;line-height:1.15;}
.sm-text-story-content p{margin:0;color:#666;font-size:14px;line-height:1.7;}
.sm-text-story-arrow{font-size:20px;color:#111;font-weight:800;opacity:.55;}
.sm-text-story-empty{grid-column:1/-1;padding:38px 24px;border:1px dashed #cfcfc9;border-radius:20px;text-align:center;color:#777;background:#fff;}

.account-page{margin:0;min-height:100vh;background:#08758a;color:#202020;font-family:Arial,Helvetica,sans-serif;}
.account-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:95px 18px 70px;position:relative;overflow:hidden;background:#08758a;}
.account-shell:before,.account-shell:after{content:"";position:absolute;left:0;right:0;height:28vh;background:#55585c;z-index:0;}
.account-shell:before{top:0;transform:translateY(-82%);}
.account-shell:after{bottom:0;transform:translateY(82%);}
.account-brand{position:absolute;left:28px;top:22px;z-index:4;display:block;}
.account-brand img{width:150px;max-height:44px;object-fit:contain;}
.account-card{width:min(100%,635px);background:#e9e9e9;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:72px 70px 58px;position:relative;z-index:2;box-shadow:0 10px 28px rgba(0,0,0,.12);}
.account-heading{text-align:center;margin:0 0 22px;}
.account-heading h1{margin:0;color:#333;font-size:40px;font-weight:400;line-height:1.15;letter-spacing:0;}
.account-form{display:grid;gap:16px;}
.account-form label{display:grid;gap:7px;font-size:17px;font-weight:400;color:#222;}
.account-form input[type="email"],.account-form input[type="password"],.account-form input[type="text"]{width:100%;height:88px;box-sizing:border-box;border:1px solid #c9c9c9;border-radius:0;padding:0 31px;font:400 18px Arial,Helvetica,sans-serif;outline:none;background:#ededed;color:#333;}
.account-form input::placeholder{color:#777;opacity:1;}
.account-form input:focus{border-color:#999;box-shadow:none;}
.account-password{position:relative;}
.show-password-row{display:flex !important;grid-template-columns:none !important;align-items:center;gap:6px !important;font-size:16px !important;color:#444 !important;margin-top:0;}
.show-password-row input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color:#076d83;}
.account-submit{width:100%;height:77px;margin-top:10px;border:0;border-radius:0;background:#086b82;color:#fff;font:400 17px Arial,Helvetica,sans-serif;cursor:pointer;letter-spacing:.2px;}
.account-submit:hover{background:#075f74;}
.account-links{text-align:center;margin-top:22px;color:#444;font-size:17px;line-height:1.9;}
.account-links p{margin:0;}
.account-links a{color:#076b82;text-decoration:none;font-weight:500;}
.account-links a:hover{text-decoration:underline;}
.account-error{padding:11px 13px;border-radius:4px;background:#fff0ed;color:#b93824;font-size:14px;margin-bottom:15px;}
@media(max-width:700px){
 .text-story-grid{grid-template-columns:1fr;}
 .account-shell{padding:80px 29px 70px;}
 .account-brand{left:20px;top:18px;}
 .account-brand img{width:120px;}
 .account-card{padding:78px 69px 62px;border-radius:14px;}
 .account-heading h1{font-size:38px;}
 .account-form label{font-size:16px;}
 .account-form input[type="email"],.account-form input[type="password"],.account-form input[type="text"]{height:88px;padding:0 30px;font-size:17px;}
 .account-submit{height:76px;font-size:16px;}
 .account-links{font-size:16px;}
}
@media(max-width:460px){
 .account-shell{padding-left:18px;padding-right:18px;}
 .account-card{padding:58px 28px 42px;}
 .account-heading h1{font-size:36px;}
 .account-form input[type="email"],.account-form input[type="password"],.account-form input[type="text"]{height:70px;padding:0 22px;}
 .account-submit{height:64px;}
}

/* =========================================================
   VIDEO FIX — ACHIEVEMENTS + SUCCESS STORY
   These sections use the real uploaded videos, displayed large.
   ========================================================= */
.achievements-section .media-grid,.success-story-section .media-grid{max-width:1180px;margin:0 auto;grid-template-columns:1fr;gap:30px;}
.achievements-section .sm-media-card,.success-story-section .sm-media-card{padding:16px;border-radius:24px;}
.achievements-section .sm-media-video,.success-story-section .sm-media-video{aspect-ratio:16/9;min-height:0;border-radius:18px;background:#111;}
.achievements-section .sm-media-video video,.success-story-section .sm-media-video video{width:100%;height:100%;display:block;object-fit:contain;background:#111;}
.achievements-section .sm-media-card h3,.success-story-section .sm-media-card h3{font-size:24px;margin:18px 10px 7px;}
.achievements-section .sm-media-card p,.success-story-section .sm-media-card p{font-size:15px;line-height:1.7;margin:0 10px 10px;}
@media(max-width:700px){
 .achievements-section .media-grid,.success-story-section .media-grid{gap:20px;}
 .achievements-section .sm-media-card,.success-story-section .sm-media-card{padding:10px;border-radius:18px;}
 .achievements-section .sm-media-video,.success-story-section .sm-media-video{aspect-ratio:16/9;border-radius:13px;}
 .achievements-section .sm-media-card h3,.success-story-section .sm-media-card h3{font-size:20px;}
}


/* SellMek desktop video sections */
.achievement-video,
.success-story-video,
.achievement-video video,
.success-story-video video,
.achievements-section video,
.success-story-section video,
#achievements video,
#success-story video {
  width: 100%;
  max-width: 1180px;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 14px;
}

.achievement-video,
.success-story-video {
  width: min(1180px, 100%);
  margin: 24px auto 36px;
}

.achievements-section .video-card,
.success-story-section .video-card {
  width: min(1180px, 100%);
  margin: 0 auto 32px;
}

@media (min-width: 769px) {
  .achievement-video video,
  .success-story-video video {
    min-height: 520px;
  }
}



/* =========================================================
   FINAL REQUEST PATCH — PREMIUM ACCOUNT + CONTINUOUS HOME
   ========================================================= */

/* One continuous Sell Mek background across the Home page. */
body:has(> .page-frame) .website,
body:has(> .page-frame) .website > section,
body:has(> .page-frame) .website > footer{
  background-color:#061426 !important;
  background-image:
    linear-gradient(rgba(75,125,205,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(75,125,205,.045) 1px,transparent 1px),
    radial-gradient(circle at 78% 10%,rgba(47,104,216,.12),transparent 35%) !important;
  background-size:58px 58px,58px 58px,auto !important;
  background-attachment:local !important;
}

/* Remove the white blocks between homepage sections. */
body:has(> .page-frame) .video-showcase,
body:has(> .page-frame) .case-preview,
body:has(> .page-frame) .achievements-section,
body:has(> .page-frame) .success-story-section,
body:has(> .page-frame) .home-growth-story,
body:has(> .page-frame) .home-image-grid,
body:has(> .page-frame) .home-process-story,
body:has(> .page-frame) .home-pricing-story,
body:has(> .page-frame) .home-final-cta{
  background:transparent !important;
  color:#f5f8ff !important;
}

/* Section typography on the shared dark canvas. */
body:has(> .page-frame) .video-showcase-heading h2,
body:has(> .page-frame) .media-showcase-heading h2,
body:has(> .page-frame) .case-preview-heading h2,
body:has(> .page-frame) .home-pricing-heading h2,
body:has(> .page-frame) .home-story-copy h2,
body:has(> .page-frame) .home-process-story h2{
  color:#f5f8ff !important;
}
body:has(> .page-frame) .video-showcase-heading p,
body:has(> .page-frame) .media-showcase-heading p,
body:has(> .page-frame) .case-preview-heading p,
body:has(> .page-frame) .home-pricing-heading p,
body:has(> .page-frame) .home-story-copy>p,
body:has(> .page-frame) .home-process-grid p{
  color:rgba(245,248,255,.70) !important;
}
body:has(> .page-frame) .video-showcase-heading h2 em,
body:has(> .page-frame) .media-showcase-heading h2 em,
body:has(> .page-frame) .case-preview-heading h2 em,
body:has(> .page-frame) .home-pricing-heading h2 span,
body:has(> .page-frame) .home-story-copy h2 span,
body:has(> .page-frame) .home-process-story h2 span{
  color:#78a8ff !important;
}

/* Achievements + Success Story: large real videos on the site canvas. */
body:has(> .page-frame) .achievements-section .media-grid,
body:has(> .page-frame) .success-story-section .media-grid{
  max-width:1180px !important;
  margin:0 auto !important;
  grid-template-columns:1fr !important;
  gap:28px !important;
}
body:has(> .page-frame) .achievements-section .sm-media-card,
body:has(> .page-frame) .success-story-section .sm-media-card{
  background:rgba(8,28,53,.78) !important;
  border:1px solid rgba(120,168,255,.18) !important;
  box-shadow:0 20px 55px rgba(0,0,0,.28) !important;
}
body:has(> .page-frame) .achievements-section .sm-media-video,
body:has(> .page-frame) .success-story-section .sm-media-video{
  aspect-ratio:16/9 !important;
  background:#000 !important;
}
body:has(> .page-frame) .achievements-section .sm-media-video video,
body:has(> .page-frame) .success-story-section .sm-media-video video{
  width:100% !important;height:100% !important;object-fit:contain !important;background:#000 !important;
}
body:has(> .page-frame) .sm-media-card h3{color:#fff !important;}
body:has(> .page-frame) .sm-media-card p{color:rgba(245,248,255,.68) !important;}

/* Video showcase is now the Achievements section. */
body:has(> .page-frame) .achievements-section{
  padding:78px clamp(28px,5vw,76px) 78px !important;
}
body:has(> .page-frame) .success-story-section{
  padding:78px clamp(28px,5vw,76px) 90px !important;
}

/* Pricing cards: make every value, heading and feature clearly readable. */
body:has(> .page-frame) .home-pricing-story{padding-top:72px !important;}
body:has(> .page-frame) .home-price-card{
  background:linear-gradient(145deg,rgba(15,39,70,.96),rgba(5,17,32,.98)) !important;
  color:#fff !important;
  border:1px solid rgba(120,168,255,.20) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.25) !important;
}
body:has(> .page-frame) .home-price-card.is-popular{border:2px solid #2f68d8 !important;}
body:has(> .page-frame) .home-price-card h3,
body:has(> .page-frame) .home-price-value{color:#fff !important;}
body:has(> .page-frame) .home-price-card p,
body:has(> .page-frame) .home-price-value small,
body:has(> .page-frame) .home-price-card li{color:rgba(255,255,255,.78) !important;}
body:has(> .page-frame) .home-price-card li i{color:#78a8ff !important;}
body:has(> .page-frame) .home-price-card>a{background:#2f68d8 !important;color:#fff !important;}
body:has(> .page-frame) .home-price-badge{background:#2f68d8 !important;color:#fff !important;}

/* Let's build... follows Process and uses the same canvas. */
body:has(> .page-frame) .home-final-cta{
  margin-top:0 !important;
  margin-bottom:70px !important;
  padding:70px 0 !important;
  border-radius:0 !important;
  border-top:1px solid rgba(120,168,255,.10);
  border-bottom:1px solid rgba(120,168,255,.10);
}
body:has(> .page-frame) .home-final-cta h2,
body:has(> .page-frame) .home-final-cta p{color:#fff !important;}
body:has(> .page-frame) .home-final-cta h2 span{color:#78a8ff !important;}

/* Desktop-mode / narrow-browser continuous canvas: no artificial 3:2 gap. */
@media (max-width:900px){
  body:has(> .page-frame) .page-frame{
    width:100vw !important;
    max-width:none !important;
    height:auto !important;
    min-height:100vh !important;
    aspect-ratio:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }
  body:has(> .page-frame) .page-frame > .website{
    width:100% !important;
    height:auto !important;
    min-height:100vh !important;
    aspect-ratio:auto !important;
    overflow:visible !important;
  }
  body:has(> .page-frame) .page-frame > .website > .hero{
    position:relative !important;
    left:0 !important;right:0 !important;top:0 !important;
    width:100% !important;
    height:clamp(540px,82vw,760px) !important;
    min-height:540px !important;
    margin:0 !important;
    margin-top:130px !important; /* clearance below the mobile nav/menu bar */
  }
}

/* Premium separate Login / Register pages. */
.account-page{
  min-height:100vh !important;
  margin:0 !important;
  color:#f5f8ff !important;
  background:#061426 !important;
  background-image:
    linear-gradient(rgba(75,125,205,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(75,125,205,.045) 1px,transparent 1px),
    radial-gradient(circle at 78% 10%,rgba(47,104,216,.18),transparent 35%) !important;
  background-size:58px 58px,58px 58px,auto !important;
}
.account-shell{
  min-height:100vh !important;
  padding:110px 20px 70px !important;
  background:transparent !important;
}
.account-shell:before,.account-shell:after{display:none !important;}
.account-brand{left:28px !important;top:22px !important;}
.account-brand img{width:150px !important;max-height:48px !important;}
.account-single-card{
  width:min(100%,560px) !important;
  background:linear-gradient(145deg,rgba(15,39,70,.97),rgba(5,17,32,.99)) !important;
  border:1px solid rgba(120,168,255,.22) !important;
  border-radius:26px !important;
  padding:48px !important;
  box-shadow:0 30px 80px rgba(0,0,0,.42),0 0 0 1px rgba(47,104,216,.05) inset !important;
}
.account-heading{text-align:center !important;margin-bottom:28px !important;}
.account-heading>span{display:block;color:#78a8ff !important;font-size:10px !important;font-weight:900 !important;letter-spacing:2px !important;}
.account-heading h1{color:#fff !important;font-size:44px !important;font-weight:800 !important;margin:8px 0 10px !important;}
.account-heading p{color:rgba(245,248,255,.66) !important;font-size:14px !important;}
.account-form label{color:#fff !important;font-size:13px !important;font-weight:700 !important;}
.account-form input[type="email"],
.account-form input[type="password"],
.account-form input[type="text"]{
  height:58px !important;
  padding:0 16px !important;
  border:1px solid rgba(120,168,255,.18) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.055) !important;
  color:#fff !important;
  font-size:15px !important;
}
.account-form input::placeholder{color:rgba(245,248,255,.42) !important;}
.account-form input:focus{border-color:#2f68d8 !important;box-shadow:0 0 0 3px rgba(47,104,216,.16) !important;}
.show-password-row{color:rgba(245,248,255,.72) !important;}
.show-password-row input[type="checkbox"]{accent-color:#2f68d8 !important;}
.account-submit{
  height:56px !important;
  margin-top:8px !important;
  border-radius:12px !important;
  background:#2f68d8 !important;
  color:#fff !important;
  font-weight:800 !important;
  box-shadow:0 12px 28px rgba(47,104,216,.25) !important;
}
.account-submit:hover{background:#3a75e8 !important;}
.account-links{color:rgba(245,248,255,.60) !important;font-size:13px !important;line-height:1.8 !important;}
.account-links a{color:#78a8ff !important;}
.account-error{background:rgba(225,80,80,.12) !important;color:#ffb3b3 !important;border:1px solid rgba(225,80,80,.2) !important;}
@media(max-width:600px){
 .account-shell{padding:92px 18px 50px !important;}
 .account-brand{left:18px !important;top:18px !important;}
 .account-brand img{width:120px !important;}
 .account-single-card{padding:32px 22px !important;border-radius:22px !important;}
 .account-heading h1{font-size:38px !important;}
}
.academy-coming-soon{
  width:min(900px,100%);
  margin:0 auto;
  min-height:55vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.academy-coming-soon span{color:#78a8ff;font-size:11px;font-weight:800;letter-spacing:2px;}
.academy-coming-soon h1{margin:12px 0;font-size:clamp(44px,7vw,78px);color:#fff;}
.academy-coming-soon p{max-width:600px;color:rgba(245,248,255,.68);line-height:1.7;}


/* ==========================================================
   SELL MEK V3 — TEAM / SERVICE MEDIA / ACADEMY
   ========================================================== */
.service-reference-media{position:relative;width:100%;height:180px;border-radius:22px;overflow:hidden;margin-bottom:24px;background:rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center}
.service-reference-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.service-reference-card:hover .service-reference-media img{transform:scale(1.045)}
.service-reference-media .service-reference-icon{margin:0;width:78px;height:78px}
.sm-team-section{padding:110px 6vw 120px;background:#f4f1eb}
.sm-team-heading{max-width:780px;margin:0 auto 48px;text-align:center}
.sm-team-kicker{font-size:11px;font-weight:900;letter-spacing:2.8px;color:#ff6500}
.sm-team-heading h2{font-size:clamp(44px,6vw,78px);line-height:.95;margin:12px 0 18px;color:#151515;letter-spacing:-2px}
.sm-team-heading h2 em{font-style:normal;color:#ff6500}
.sm-team-heading p{color:#666;line-height:1.75}
.sm-team-grid{width:min(1240px,100%);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sm-team-card{position:relative;overflow:hidden;border-radius:28px;background:#111;color:#fff;min-height:520px;box-shadow:0 25px 70px rgba(0,0,0,.12);transition:transform .35s ease,box-shadow .35s ease}
.sm-team-card:hover{transform:translateY(-8px);box-shadow:0 35px 90px rgba(0,0,0,.18)}
.sm-team-photo{height:310px;background:linear-gradient(135deg,#272727,#0e0e0e);overflow:hidden}
.sm-team-photo img{width:100%;height:100%;object-fit:cover;display:block}
.sm-team-placeholder{display:grid;place-items:center;font-size:72px;color:#777}
.sm-team-body{padding:27px 28px 30px}
.sm-team-role{font-size:10px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:#ff7a1a}
.sm-team-body h3{font-size:30px;line-height:1.05;margin:9px 0 12px}
.sm-team-expertise{font-weight:800;line-height:1.55;margin:0 0 11px}
.sm-team-bio{font-size:13px;line-height:1.7;color:rgba(255,255,255,.64);margin:0}
.sm-team-empty{grid-column:1/-1;text-align:center;padding:70px 20px;background:#fff;border:1px dashed #ccc;border-radius:24px;color:#666}
.sm-academy-grid{min-height:calc(100vh - 180px);display:grid;grid-template-columns:1fr 1fr}
.sm-academy-card{min-height:calc(100vh - 180px);padding:clamp(38px,6vw,90px);display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;position:relative;overflow:hidden;transition:transform .35s ease}
.sm-academy-card:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-130px;top:-130px;background:rgba(255,255,255,.08);filter:blur(2px)}
.sm-academy-card-paid{background:#111;color:#fff}.sm-academy-card-free{background:#ff6500;color:#fff}
.sm-academy-card-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}.sm-academy-card-top span{font-size:11px;font-weight:900;letter-spacing:2.5px}.sm-academy-card-top i{font-size:34px}
.sm-academy-card small{font-size:13px;font-weight:800;letter-spacing:1px;opacity:.65;position:relative;z-index:1}.sm-academy-card h2{font-size:clamp(54px,7vw,110px);letter-spacing:-4px;line-height:.88;margin:14px 0 22px;position:relative;z-index:1}.sm-academy-card p{max-width:560px;font-size:16px;line-height:1.75;opacity:.72;position:relative;z-index:1}.sm-academy-card-cta{align-self:flex-start;border:1px solid rgba(255,255,255,.4);background:transparent;color:inherit;border-radius:999px;padding:15px 23px;font-weight:900;cursor:pointer;position:relative;z-index:1}.sm-academy-card:hover{transform:scale(.99)}
.sm-coming-soon-overlay{position:fixed;inset:0;z-index:9999;background:rgba(9,9,9,.72);backdrop-filter:blur(14px);display:grid;place-items:center;padding:20px}.sm-coming-soon-box{max-width:620px;width:100%;background:#fff;border-radius:28px;padding:46px;text-align:center;box-shadow:0 35px 100px rgba(0,0,0,.3)}.sm-coming-soon-box span{font-size:11px;letter-spacing:2px;font-weight:900;color:#ff6500}.sm-coming-soon-box h2{font-size:52px;margin:12px 0}.sm-coming-soon-box p{color:#666;line-height:1.7}.sm-coming-soon-box button{margin-top:22px;border:0;background:#111;color:#fff;border-radius:999px;padding:13px 24px;font-weight:800;cursor:pointer}
@media(max-width:900px){.sm-team-grid{grid-template-columns:1fr}.sm-team-card{min-height:0}.sm-team-photo{height:300px}.sm-academy-grid{grid-template-columns:1fr}.sm-academy-card{min-height:48vh}.sm-academy-card h2{font-size:clamp(48px,15vw,84px);letter-spacing:-3px}}


/* ==========================================================
   SELL MEK V3 FINAL FIX — TEAM / ACADEMY / SERVICES CARDS
   Visual-only correction. Existing desktop/mobile design logic,
   API routes and content structure remain intact.
   ========================================================== */

/* ---------- ABOUT: premium Our Team section ---------- */
.sm-team-section{
  position:relative !important;
  padding:88px clamp(20px,6vw,90px) 96px !important;
  background:#061426 !important;
  background-image:
    linear-gradient(rgba(75,125,205,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(75,125,205,.045) 1px,transparent 1px) !important;
  background-size:58px 58px !important;
  color:#fff !important;
  border-top:1px solid rgba(120,168,255,.12) !important;
  border-bottom:1px solid rgba(120,168,255,.12) !important;
}
.sm-team-heading{
  width:min(780px,100%) !important;
  margin:0 auto 42px !important;
  text-align:center !important;
}
.sm-team-kicker{
  display:inline-block !important;
  color:#78a8ff !important;
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:2.4px !important;
  text-transform:uppercase !important;
}
.sm-team-heading h2{
  margin:10px 0 12px !important;
  color:#fff !important;
  font-size:clamp(40px,5vw,64px) !important;
  line-height:1 !important;
  letter-spacing:-2.8px !important;
  font-weight:800 !important;
}
.sm-team-heading h2 em{
  font-style:normal !important;
  color:#78a8ff !important;
}
.sm-team-heading p{
  margin:0 auto !important;
  max-width:650px !important;
  color:rgba(245,248,255,.66) !important;
  font-size:13px !important;
  line-height:1.7 !important;
}
.sm-team-grid{
  width:min(1180px,100%) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) !important;
  gap:20px !important;
}
.sm-team-card{
  position:relative !important;
  min-height:360px !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-columns:minmax(220px,34%) 1fr !important;
  align-items:stretch !important;
  border-radius:24px !important;
  background:linear-gradient(145deg,rgba(13,35,64,.96),rgba(7,20,37,.98)) !important;
  color:#fff !important;
  border:1px solid rgba(120,168,255,.18) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.30),0 0 0 1px rgba(47,104,216,.05) inset !important;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease !important;
}
.sm-team-card:hover{
  transform:translateY(-6px) !important;
  border-color:rgba(120,168,255,.35) !important;
  box-shadow:0 30px 80px rgba(0,0,0,.38),0 0 35px rgba(47,104,216,.08) !important;
}
.sm-team-card:first-child:last-child{
  width:min(900px,100%) !important;
  margin:0 auto !important;
}
.sm-team-photo{
  height:100% !important;
  min-height:360px !important;
  background:linear-gradient(135deg,#0c2543,#071321) !important;
  overflow:hidden !important;
  position:relative !important;
}
.sm-team-photo::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(90deg,transparent 55%,rgba(6,20,38,.88)) !important;
  pointer-events:none !important;
}
.sm-team-photo img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center top !important;
  display:block !important;
}
.sm-team-body{
  align-self:center !important;
  padding:38px 40px !important;
}
.sm-team-role{
  display:block !important;
  color:#78a8ff !important;
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
}
.sm-team-body h3{
  margin:10px 0 12px !important;
  color:#fff !important;
  font-size:clamp(25px,3vw,36px) !important;
  line-height:1.05 !important;
  letter-spacing:-1px !important;
}
.sm-team-expertise{
  margin:0 0 13px !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:750 !important;
  line-height:1.6 !important;
}
.sm-team-bio{
  margin:0 !important;
  color:rgba(245,248,255,.62) !important;
  font-size:13px !important;
  line-height:1.75 !important;
}
.sm-team-empty{
  grid-column:1/-1 !important;
  padding:55px 20px !important;
  background:rgba(8,28,53,.72) !important;
  border:1px dashed rgba(120,168,255,.25) !important;
  border-radius:20px !important;
  color:rgba(245,248,255,.65) !important;
}

/* ---------- ACADEMY: restore the two premium course cards ---------- */
.academy-page main{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}
.sm-academy-grid{
  width:100% !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:0 !important;
  margin:0 !important;
}
.sm-academy-card{
  position:relative !important;
  min-width:0 !important;
  min-height:560px !important;
  padding:clamp(42px,6vw,82px) clamp(28px,5vw,72px) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#fff !important;
}
.sm-academy-card-paid{
  background:radial-gradient(circle at 82% 20%,rgba(47,104,216,.28),transparent 34%),linear-gradient(145deg,#0b203b,#061426 72%) !important;
}
.sm-academy-card-free{
  background:radial-gradient(circle at 82% 20%,rgba(120,168,255,.22),transparent 34%),linear-gradient(145deg,#153b70,#2f68d8 120%) !important;
}
.sm-academy-card::before{
  content:"" !important;
  position:absolute !important;
  width:460px !important;
  height:460px !important;
  right:-170px !important;
  top:-180px !important;
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.045) !important;
  filter:none !important;
}
.sm-academy-card::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:1px !important;
  background:rgba(255,255,255,.14) !important;
}
.sm-academy-card-top{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:20px !important;
}
.sm-academy-card-top span{
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:2.5px !important;
  color:rgba(255,255,255,.82) !important;
}
.sm-academy-card-top i{font-size:28px !important;color:#fff !important;}
.sm-academy-card>div:nth-child(2){position:relative !important;z-index:2 !important;}
.sm-academy-card small{
  color:rgba(255,255,255,.65) !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:1px !important;
}
.sm-academy-card h2{
  margin:13px 0 18px !important;
  color:#fff !important;
  font-size:clamp(46px,6vw,86px) !important;
  line-height:.9 !important;
  letter-spacing:-3.5px !important;
  font-weight:850 !important;
}
.sm-academy-card p{
  max-width:560px !important;
  margin:0 !important;
  color:rgba(255,255,255,.72) !important;
  font-size:14px !important;
  line-height:1.75 !important;
}
.sm-academy-card-cta{
  align-self:flex-start !important;
  position:relative !important;
  z-index:2 !important;
  margin-top:30px !important;
  padding:13px 20px !important;
  border:1px solid rgba(255,255,255,.30) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.07) !important;
  color:#fff !important;
  font-weight:800 !important;
  cursor:pointer !important;
}
.sm-academy-card-cta:hover{background:rgba(255,255,255,.14) !important;}

/* ---------- SERVICES: fixed image area + premium card proportions ---------- */
.services-reference-viewport{
  width:min(1320px,100%) !important;
  margin:0 auto !important;
  overflow:hidden !important;
}
.services-reference-track{
  align-items:stretch !important;
}
.services-reference-track .service-reference-card{
  position:relative !important;
  flex:0 0 min(380px,86vw) !important;
  width:min(380px,86vw) !important;
  min-height:0 !important;
  height:500px !important;
  padding:0 0 22px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
  border-radius:24px !important;
  background:linear-gradient(145deg,#0d2747,#071526) !important;
  color:#fff !important;
  border:1px solid rgba(120,168,255,.18) !important;
  box-shadow:0 22px 55px rgba(0,0,0,.30) !important;
}
.service-reference-card::after{background:rgba(47,104,216,.08) !important;}
.service-reference-media{
  position:relative !important;
  width:100% !important;
  height:205px !important;
  min-height:205px !important;
  flex:0 0 205px !important;
  margin:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
  background:linear-gradient(135deg,#0a1d34,#061426) !important;
}
.service-reference-media img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}
.service-reference-media::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg,rgba(6,20,38,0) 48%,rgba(6,20,38,.70) 100%) !important;
  pointer-events:none !important;
}
.service-reference-copy{
  position:relative !important;
  z-index:2 !important;
  padding:25px 26px 0 !important;
}
.service-reference-copy h2{
  margin:0 0 10px !important;
  color:#fff !important;
  font-size:26px !important;
  line-height:1.05 !important;
  letter-spacing:-1px !important;
}
.service-reference-copy p{
  margin:0 !important;
  color:rgba(245,248,255,.66) !important;
  font-size:12.5px !important;
  line-height:1.7 !important;
}
.service-reference-button{
  position:absolute !important;
  left:26px !important;
  bottom:22px !important;
  z-index:3 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:10px 15px !important;
  border-radius:999px !important;
  background:#2f68d8 !important;
  color:#fff !important;
  border:1px solid rgba(120,168,255,.24) !important;
  font-size:11px !important;
  font-weight:800 !important;
  text-decoration:none !important;
}

@media(max-width:900px){
  .sm-team-section{padding:64px 18px 76px !important;}
  .sm-team-heading{margin-bottom:28px !important;}
  .sm-team-card,
  .sm-team-card:first-child:last-child{
    width:100% !important;
    max-width:none !important;
    grid-template-columns:1fr !important;
  }
  .sm-team-photo{height:300px !important;min-height:300px !important;}
  .sm-team-photo::after{background:linear-gradient(180deg,transparent 45%,rgba(6,20,38,.88)) !important;}
  .sm-team-body{padding:24px 24px 28px !important;}
  .sm-academy-grid{grid-template-columns:1fr !important;}
  .sm-academy-card{min-height:430px !important;padding:38px 26px !important;}
  .sm-academy-card h2{font-size:clamp(44px,14vw,72px) !important;}
  .services-reference-track .service-reference-card{
    flex:0 0 min(340px,84vw) !important;
    width:min(340px,84vw) !important;
    height:470px !important;
  }
  .service-reference-media{height:190px !important;min-height:190px !important;flex-basis:190px !important;}
}

@media(max-width:560px){
  .sm-team-heading h2{font-size:40px !important;}
  .sm-team-card{border-radius:20px !important;}
  .sm-team-photo{height:270px !important;min-height:270px !important;}
  .sm-academy-card{min-height:400px !important;padding:34px 22px !important;}
  .sm-academy-card h2{letter-spacing:-2.5px !important;}
  .services-reference-track .service-reference-card{
    flex-basis:calc(100vw - 36px) !important;
    width:calc(100vw - 36px) !important;
    height:455px !important;
  }
  .service-reference-media{height:175px !important;min-height:175px !important;flex-basis:175px !important;}
  .service-reference-copy{padding:22px 22px 0 !important;}
  .service-reference-button{left:22px !important;bottom:20px !important;}
}

/* ==========================================================
   V4 ACCOUNT / REVIEWS / EMPTY-CONTENT FIXES
========================================================== */
.account-widget{position:relative;display:inline-flex;align-items:center}.account-avatar{width:42px;height:42px;border-radius:50%;border:1px solid rgba(120,168,255,.35);background:#0d2747;color:#fff;font-weight:900;font-size:16px;cursor:pointer;display:grid;place-items:center}.account-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:190px;padding:12px;background:#fff;color:#111;border:1px solid rgba(0,0,0,.08);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.18);display:none;z-index:10000}.account-widget.is-open .account-menu{display:flex;flex-direction:column;gap:9px}.account-menu strong{font-size:13px}.account-menu a,.account-menu button{border:0;background:none;text-align:left;padding:7px 4px;color:#222;text-decoration:none;cursor:pointer;font:inherit}.account-menu button{color:#c33;font-weight:800}.sm-auth-modal{position:fixed;inset:0;z-index:100000;background:rgba(4,12,22,.72);backdrop-filter:blur(10px);display:none;place-items:center;padding:20px}.sm-auth-modal.is-visible{display:grid}.sm-auth-box{position:relative;width:min(430px,100%);background:#fff;color:#111;border-radius:24px;padding:34px;box-shadow:0 30px 100px rgba(0,0,0,.35)}.sm-auth-box>span{font-size:10px;letter-spacing:2px;font-weight:900;color:#2f68d8}.sm-auth-box h2{margin:9px 0}.sm-auth-box p{color:#666;line-height:1.6}.sm-auth-box form{display:grid;gap:10px}.sm-auth-box input{padding:13px;border:1px solid #ddd;border-radius:10px}.sm-auth-box form button{padding:13px;border:0;border-radius:10px;background:#111;color:#fff;font-weight:900;cursor:pointer}.sm-auth-close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:28px;cursor:pointer}.sm-auth-error{color:#c33!important;font-size:13px}.customer-review-box{margin:35px auto 0;max-width:900px;display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:28px;border:1px solid rgba(120,168,255,.2);border-radius:22px;background:rgba(6,20,38,.55);color:#fff}.customer-review-box h3{font-size:30px;margin:8px 0}.customer-review-box label{display:grid;gap:7px;font-size:12px;font-weight:800}.customer-review-box select,.customer-review-box textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:#fff;color:#111}.customer-review-box textarea{min-height:110px;resize:vertical}.customer-review-box form{display:grid;gap:12px}.customer-review-box form button{border:0;border-radius:999px;padding:13px 18px;background:#2f68d8;color:#fff;font-weight:900;cursor:pointer}.customer-review-box form p{margin:0;color:#9ec0ff;font-size:12px}@media(max-width:700px){.customer-review-box{grid-template-columns:1fr}.account-avatar{width:38px;height:38px}}
/* Empty admin content must remain empty on the public site. */
.popular-services-preview .popular-services-track:empty{display:none}


/* =========================================================
   FINAL FIXES — HEADER, REVIEWS, TEAM MEDIA, ACADEMY, ADMIN
========================================================= */
/* Put announcement bar at the absolute top of the page viewport and the menu immediately below it. */
.header-announcement,
body > .page-frame > .website > .header .header-announcement{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100vw !important;
  height:28px !important;
  z-index:10001 !important;
}
.nav{
  top:34px !important;
  z-index:10000 !important;
}
.header .login{top:32px !important;z-index:10002 !important;}
@media(max-width:900px){
  .header-announcement,
  body > .page-frame > .website > .header .header-announcement{top:0 !important;height:26px !important;}
  .nav{top:30px !important;height:46px !important;min-height:46px !important;}
  .header .login{top:30px !important;}
}

/* About reviews: always render clean cards and keep the stream readable on mobile. */
#about-stats .about-reviews-viewport{min-height:230px !important;}
#about-stats .about-reviews-track{min-height:205px !important;align-items:flex-start !important;}
#about-stats .about-review-card{flex:0 0 min(380px,82vw) !important;width:min(380px,82vw) !important;}
#about-stats .about-review-bubble{min-height:160px !important;}
@media(max-width:700px){
  #about-stats .about-reviews-viewport{min-height:210px !important;}
  #about-stats .about-reviews-track{gap:16px !important;}
  #about-stats .about-review-card{flex-basis:300px !important;width:300px !important;}
}

/* Academy begins after the fixed announcement + menu, never underneath them. */
.academy-page main{padding-top:100px !important;}
.sm-academy-card{min-height:620px !important;padding-top:26px !important;}
.sm-academy-card-image{position:relative !important;z-index:2 !important;height:190px !important;margin:-2px 0 18px !important;border-radius:20px !important;overflow:hidden !important;border:1px solid rgba(255,255,255,.16) !important;background:#071321 !important;}
.sm-academy-card-image img{width:100% !important;height:100% !important;display:block !important;object-fit:cover !important;object-position:center !important;}
@media(max-width:900px){.academy-page main{padding-top:88px !important;}.sm-academy-card{min-height:540px !important;padding-top:22px !important;}.sm-academy-card-image{height:170px !important;}}

/* Admin: collapse/expand control belongs at the top, not the bottom. */
.sm-brand{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important;}
.sm-brand-main{display:flex !important;align-items:center !important;gap:10px !important;min-width:0 !important;}
.sm-collapse-top{flex:0 0 auto !important;margin:0 !important;}
.sm-sidebar-foot .sm-collapse-toggle{display:none !important;}
.sm-sidebar.is-collapsed .sm-brand-main{justify-content:center !important;}
.sm-sidebar.is-collapsed .sm-brand{flex-direction:column !important;gap:8px !important;}
.sm-sidebar.is-collapsed .sm-collapse-top{width:42px !important;padding:10px 0 !important;}

/* Admin text/banner editors are clearly separate navigation sections. */
.sm-nav .sm-nav-label{margin-top:14px !important;}

/* Achievement videos use the same premium media treatment as success videos. */
.achievements-section .achievements-text-list{display:grid !important;grid-template-columns:1fr !important;gap:22px !important;max-width:1180px !important;margin:0 auto !important;}
.achievements-section .sm-media-card{padding:16px !important;border-radius:24px !important;background:linear-gradient(145deg,rgba(15,39,70,.72),rgba(5,17,32,.92)) !important;border:1px solid rgba(93,137,201,.16) !important;}
.achievements-section .sm-media-video{aspect-ratio:16/9 !important;min-height:0 !important;border-radius:18px !important;overflow:hidden !important;background:#050b14 !important;}
.achievements-section .sm-media-video video{width:100% !important;height:100% !important;display:block !important;object-fit:contain !important;background:#050b14 !important;}
.achievements-section .sm-media-card h3{color:#fff !important;margin:16px 10px 6px !important;}
.achievements-section .sm-media-card p{color:rgba(245,248,255,.68) !important;margin:0 10px 10px !important;}


/* Logged-in profile icon is visible on every page, including pages without the old Login link. */
.account-widget{position:fixed !important;right:14px !important;top:32px !important;z-index:10003 !important;display:inline-flex !important;}
.account-avatar{position:relative !important;width:42px !important;height:42px !important;border-radius:50% !important;border:1px solid rgba(120,168,255,.45) !important;background:#0d2747 !important;color:#fff !important;display:grid !important;place-items:center !important;cursor:pointer !important;box-shadow:0 8px 24px rgba(0,0,0,.28) !important;}
.account-avatar i{display:none !important;}
.account-avatar span{position:static !important;inset:auto !important;display:block !important;place-items:initial !important;font-size:15px !important;line-height:40px !important;font-weight:900 !important;color:#fff !important;text-align:center !important;}
.account-menu{top:calc(100% + 8px) !important;right:0 !important;background:#fff !important;color:#111 !important;opacity:1 !important;visibility:visible !important;}
.account-menu strong{display:block !important;color:#111 !important;background:transparent !important;}
.account-menu a,.account-menu a:visited{display:flex !important;align-items:center !important;gap:9px !important;color:#222 !important;background:transparent !important;opacity:1 !important;}
.account-menu a:hover{color:#111 !important;background:#f3f5f8 !important;}
.account-menu a i{display:inline-block !important;color:#2f68d8 !important;}
.account-menu button{display:flex !important;align-items:center !important;gap:9px !important;color:#b42318 !important;background:transparent !important;opacity:1 !important;}
.account-menu button i{color:#b42318 !important;}
@media(max-width:900px){
  .account-widget{top:30px !important;right:10px !important;}
  .account-avatar{width:38px !important;height:38px !important;}
  .nav{max-width:calc(100vw - 62px) !important;}
}


/* =========================================================
   AUTH + HEADER FINAL PATCH — 2026-09-10
   Announcement and menu live in one top header area.
   The hero/content starts below the menu; nothing sits on top of it.
========================================================= */
.header{
  position:relative !important;
  left:0 !important; right:0 !important; top:0 !important;
  width:100% !important;
  height:94px !important;
  min-height:94px !important;
  padding:0 28px !important;
  z-index:10000 !important;
}
.header-announcement,
body > .page-frame > .website > .header .header-announcement{
  position:absolute !important;
  left:0 !important; right:0 !important; top:0 !important;
  width:100% !important; height:28px !important;
  z-index:10003 !important;
}
.header-announcement-track{height:28px !important;display:flex !important;align-items:center !important;}
.nav{
  position:absolute !important;
  left:50% !important; top:38px !important;
  transform:translateX(-50%) !important;
  z-index:10002 !important;
  max-width:calc(100% - 170px) !important;
}
.header .login{
  position:absolute !important;
  right:28px !important; top:38px !important;
  z-index:10004 !important;
  width:auto !important; min-width:110px !important; height:42px !important;
}
.account-widget{
  position:absolute !important;
  right:28px !important; top:38px !important;
  z-index:10005 !important;
}
.account-widget .account-menu{right:0 !important;}

/* Home: header consumes real space, so the hero can never begin behind the menu. */
body > .page-frame > .website > .header + .hero,
body > .page-frame > .website > .hero{
  margin-top:0 !important;
}
body > .page-frame > .website > .hero{
  position:relative !important;
  top:auto !important; left:0 !important; right:0 !important;
  width:100% !important;
}
/* Remove any old fixed/absolute menu treatment on inner pages too. */
.inner-website > .header + .inner-content,
.inner-website > .header + main{margin-top:0 !important;}

/* Profile page */
.profile-shell{min-height:calc(100vh - 94px);display:grid;place-items:center;padding:45px 24px 80px;}
.profile-card{width:min(720px,100%);padding:42px;border:1px solid rgba(120,168,255,.18);border-radius:28px;background:linear-gradient(145deg,rgba(15,39,70,.78),rgba(5,17,32,.96));box-shadow:0 25px 70px rgba(0,0,0,.28);}
.profile-card h1{font-size:clamp(42px,7vw,76px);line-height:.95;margin:8px 0 28px;color:#fff !important;}
.profile-card h1 span{color:#5f91e8 !important;}
.profile-avatar-large{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:#0d2747;border:1px solid rgba(120,168,255,.35);color:#fff;font-size:28px;margin-bottom:28px;}
.profile-details{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.profile-details>div{padding:18px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);}
.profile-details small{display:block;font-size:10px;letter-spacing:1.5px;color:#9ebcf0;margin-bottom:7px;font-weight:800;}
.profile-details strong{display:block;color:#fff;font-size:16px;word-break:break-word;}
.profile-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;}
.profile-actions a,.profile-actions button{border:0;border-radius:999px;padding:13px 18px;text-decoration:none;font-weight:800;cursor:pointer;background:#2f68d8 !important;color:#fff !important;}
.profile-actions button{background:#9b3030 !important;}
@media(max-width:900px){
  .header{height:82px !important;min-height:82px !important;padding:0 10px !important;}
  .nav{top:32px !important;max-width:calc(100% - 58px) !important;width:auto !important;}
  .header .login{top:31px !important;right:10px !important;min-width:0 !important;width:42px !important;font-size:0 !important;padding:0 !important;}
  .account-widget{top:31px !important;right:8px !important;}
  .account-avatar{width:40px !important;height:40px !important;}
  .profile-shell{min-height:calc(100vh - 82px);padding:35px 18px 60px;}
  .profile-card{padding:28px 20px;}
  .profile-details{grid-template-columns:1fr;}
}


/* =========================================================
   FINAL ENTERPRISE UPDATE — 2026-09-10
========================================================= */
body{padding-top:94px !important;}.header{position:fixed !important;left:0 !important;right:0 !important;top:0 !important;width:100% !important;height:94px !important;min-height:94px !important;padding:0 28px !important;background:rgba(6,20,38,.92) !important;backdrop-filter:blur(16px) !important;-webkit-backdrop-filter:blur(16px) !important;}.header .logo{top:38px !important;left:28px !important;}.header .logo .site-logo{height:42px !important;padding:5px 12px !important;}.header-announcement,body > .page-frame > .website > .header .header-announcement{position:absolute !important;top:0 !important;left:0 !important;right:0 !important;width:100% !important;height:28px !important;}.nav{position:absolute !important;top:34px !important;left:50% !important;transform:translateX(-50%) !important;max-width:calc(100% - 280px) !important;z-index:10002 !important;}.header .login{top:34px !important;right:28px !important;}.account-widget{position:absolute !important;top:34px !important;right:28px !important;}.nav-coming-soon{font-size:7px !important;letter-spacing:.5px !important;text-transform:uppercase !important;opacity:.55 !important;margin-left:2px !important;}.nav-students-link{position:relative !important;}.inner-page .inner-content,.service-detail .inner-content{padding-top:110px !important;}.about-page{padding-top:0 !important;}.about-page .header,.tools-page .header,.contact-page .header,.history-page .header,.booking-page .header,.inner-page .header{position:fixed !important;top:0 !important;}.about-hero{padding-top:120px !important;}.tools-page,.contact-page,.history-page,.booking-page{padding-top:0 !important;}.tools-hero{padding-top:35px !important;}.contact-hero{padding-top:35px !important;}.history-page .history-main{padding-top:38px !important;}.booking-page .booking-hero{padding-top:35px !important;}.academy-page main{padding-top:28px !important;}
.page-loader{background:#061426 !important;background-image:radial-gradient(circle at 50% 50%,rgba(47,104,216,.16),transparent 42%) !important;}.page-loader-mark{gap:0 !important;}.page-loader-ring{width:58px !important;height:58px !important;border-radius:50% !important;border:3px solid rgba(255,255,255,.12) !important;border-top-color:#2f68d8 !important;border-right-color:#78a8ff !important;animation:page-loader-spin .8s linear infinite !important;}.page-loader-label{display:none !important;}
.customer-review-box{max-width:980px !important;margin:48px auto 0 !important;padding:34px !important;border-radius:28px !important;background:linear-gradient(145deg,rgba(14,39,70,.90),rgba(5,17,32,.96)) !important;border:1px solid rgba(120,168,255,.25) !important;box-shadow:0 28px 80px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08) !important;position:relative !important;overflow:hidden !important;}.customer-review-box::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 90% 10%,rgba(47,104,216,.22),transparent 32%);}.customer-review-box>div,.customer-review-box>form{position:relative !important;z-index:1 !important;}.customer-review-box h3{font-size:clamp(28px,4vw,42px) !important;letter-spacing:-1.5px !important;}.customer-review-box label{color:rgba(255,255,255,.72) !important;}.customer-review-box select,.customer-review-box textarea{background:rgba(255,255,255,.06) !important;color:#fff !important;border-color:rgba(255,255,255,.14) !important;}.customer-review-box select option{background:#0b1727 !important;color:#fff !important;}.customer-review-box form button{background:#2f68d8 !important;box-shadow:0 12px 28px rgba(47,104,216,.24) !important;}
.booking-success{border:1px solid rgba(120,168,255,.24) !important;border-radius:28px !important;box-shadow:0 30px 100px rgba(0,0,0,.42) !important;background:linear-gradient(145deg,rgba(9,25,45,.98),rgba(3,12,23,.99)) !important;}.booking-success-check circle{stroke:#2f68d8 !important;}.booking-success-check path{stroke:#78a8ff !important;}.booking-success h2{font-size:clamp(28px,4vw,42px) !important;letter-spacing:-1.5px !important;color:#fff !important;}.booking-success p{color:rgba(245,248,255,.72) !important;}.booking-success p strong{color:#78a8ff !important;}
.floating-meeting-countdown{position:fixed;right:20px;bottom:20px;z-index:9000;width:min(330px,calc(100vw - 32px));border:1px solid rgba(120,168,255,.25);border-radius:22px;background:linear-gradient(145deg,rgba(9,28,52,.96),rgba(4,14,27,.98));box-shadow:0 24px 70px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.03);backdrop-filter:blur(18px);overflow:hidden;animation:floatingMeetingIn .45s cubic-bezier(.2,.8,.2,1);}.floating-meeting-link{display:block;padding:18px 18px 16px;text-decoration:none !important;color:#fff !important;}.floating-meeting-kicker{display:block;font-size:9px;letter-spacing:1.5px;font-weight:900;color:#78a8ff !important;margin-bottom:7px;}.floating-meeting-link strong{display:block;color:#fff !important;font-size:15px;margin-bottom:4px;}.floating-meeting-link small{display:block;color:rgba(255,255,255,.58) !important;font-size:11px;}.floating-count-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:13px;}.floating-count-grid b{display:flex;align-items:baseline;justify-content:center;gap:2px;padding:9px 3px;border-radius:10px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);color:#fff !important;font-size:18px;}.floating-count-grid em{font-style:normal;font-size:8px;color:rgba(255,255,255,.42) !important;}.floating-meeting-close{position:absolute;right:9px;top:7px;width:25px;height:25px;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:rgba(255,255,255,.7);cursor:pointer;line-height:25px;}@keyframes floatingMeetingIn{from{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:none}}
.history-page{background-color:#061426 !important;background-image:linear-gradient(rgba(75,125,205,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(75,125,205,.045) 1px,transparent 1px),radial-gradient(circle at 78% 10%,rgba(47,104,216,.12),transparent 35%) !important;background-size:58px 58px,58px 58px,auto !important;}.meeting-history-card{background:linear-gradient(145deg,rgba(15,39,70,.94),rgba(5,17,32,.98)) !important;border:1px solid rgba(120,168,255,.18) !important;border-radius:28px !important;box-shadow:0 28px 70px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.05) !important;padding:32px !important;}.meeting-history-card:hover{transform:translateY(-3px);border-color:rgba(120,168,255,.32);}.meeting-ref{color:rgba(255,255,255,.4) !important;letter-spacing:1px;font-size:10px;font-weight:800;}.meeting-status{background:rgba(47,104,216,.13) !important;border-color:rgba(120,168,255,.25) !important;color:#fff !important;}.meeting-status.status-confirmed{background:rgba(34,197,94,.12) !important;border-color:rgba(34,197,94,.25) !important;color:#7ee2a2 !important;}.meeting-status.status-cancelled{background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.12) !important;color:rgba(255,255,255,.5) !important;}.meeting-status.status-pending{color:#9ec0ff !important;}.cancel-meeting-btn{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:11px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);color:#fff;cursor:pointer;font-weight:800;font-size:11px;}.cancel-meeting-btn:hover{background:rgba(225,6,0,.16);border-color:rgba(225,6,0,.3);}
.contact-page{background:#061426 !important;background-image:linear-gradient(rgba(75,125,205,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(75,125,205,.045) 1px,transparent 1px),radial-gradient(circle at 78% 10%,rgba(47,104,216,.12),transparent 35%) !important;background-size:58px 58px,58px 58px,auto !important;}.contact-image-card{border-radius:24px;overflow:hidden;background:linear-gradient(145deg,rgba(15,39,70,.94),rgba(5,17,32,.98));border:1px solid rgba(120,168,255,.18);box-shadow:0 28px 70px rgba(0,0,0,.30);}.contact-image-wrap{height:300px;overflow:hidden;background:#071321;}.contact-image-wrap img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;}.contact-image-caption{padding:24px 26px 26px;}.contact-image-caption>span{font-size:9px;letter-spacing:2px;font-weight:900;color:#78a8ff !important;}.contact-image-caption h3{font-size:25px;margin:8px 0;color:#fff !important;}.contact-image-caption h3 em{font-style:normal;color:#78a8ff !important;}.contact-image-caption p{font-size:13px;line-height:1.65;color:rgba(255,255,255,.62) !important;margin-bottom:16px;}.contact-image-links{display:flex;gap:8px;flex-wrap:wrap;}.contact-image-links a{display:inline-flex;align-items:center;gap:7px;padding:10px 13px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff !important;text-decoration:none;font-size:11px;font-weight:800;}.contact-image-links a:hover{background:#2f68d8;}
.public-search{position:relative;width:min(760px,calc(100% - 48px));margin:0 auto 28px;display:flex;align-items:center;gap:10px;padding:0 13px;height:54px;border:1px solid rgba(120,168,255,.18);border-radius:16px;background:rgba(8,28,53,.72);box-shadow:0 16px 40px rgba(0,0,0,.18);}.public-search>i{color:#78a8ff;font-size:14px;}.public-search input{flex:1;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:13px;min-width:0;}.public-search input::placeholder{color:rgba(255,255,255,.42);}.public-search button{width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:#fff;cursor:pointer;}.public-search-empty{text-align:center;color:rgba(255,255,255,.55);font-size:13px;margin:-5px auto 28px;}.tools-search{margin-bottom:30px;}.academy-public-heading{width:min(900px,calc(100% - 48px));margin:0 auto 26px;text-align:center;padding-top:0;}.academy-public-heading h1{font-size:clamp(42px,6vw,72px);letter-spacing:-3px;margin:8px 0;color:#fff !important;}.academy-public-heading h1 span{color:#78a8ff !important;}.academy-public-heading p{color:rgba(255,255,255,.62);max-width:620px;margin:auto;line-height:1.6;}.sm-academy-card[hidden],.tool-card[hidden]{display:none !important;}.sm-media-thumb-preview{display:block;width:150px;height:90px;object-fit:cover;border-radius:12px;margin-bottom:10px;border:1px solid rgba(255,255,255,.12);}
.account-avatar{overflow:hidden !important;position:relative !important;isolation:isolate !important;}.account-avatar span{display:flex !important;align-items:center !important;justify-content:center !important;width:100% !important;height:100% !important;line-height:1 !important;position:absolute !important;inset:0 !important;color:#fff !important;font-size:15px !important;font-weight:900 !important;white-space:nowrap !important;overflow:hidden !important;}.account-menu{z-index:10020 !important;}.sm-success-toast{position:fixed;top:108px;right:20px;z-index:10050;display:flex;align-items:center;gap:12px;width:min(390px,calc(100vw - 32px));padding:14px 15px;border:1px solid rgba(120,168,255,.25);border-radius:17px;background:rgba(8,24,43,.96);box-shadow:0 20px 55px rgba(0,0,0,.35);backdrop-filter:blur(16px);transform:translateY(-14px);opacity:0;pointer-events:none;transition:.3s ease;}.sm-success-toast.is-visible{transform:none;opacity:1;pointer-events:auto;}.sm-toast-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;background:rgba(47,104,216,.16);color:#78a8ff;}.sm-toast-copy{min-width:0;}.sm-toast-copy strong{display:block;color:#fff;font-size:13px;margin-bottom:3px;}.sm-toast-copy span{display:block;color:rgba(255,255,255,.6);font-size:11px;line-height:1.4;}.sm-success-toast>button{margin-left:auto;width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:#fff;cursor:pointer;}
@media(max-width:900px){body{padding-top:82px !important;}.header{height:82px !important;min-height:82px !important;padding:0 10px !important;}.header .logo{left:10px !important;top:31px !important;}.header .logo .site-logo{height:36px !important;padding:4px 9px !important;}.header-announcement,.header-announcement-track{height:26px !important;}.nav{top:30px !important;max-width:calc(100% - 58px) !important;width:auto !important;}.header .login{top:30px !important;right:10px !important;}.account-widget{top:30px !important;right:8px !important;}.about-hero{padding-top:105px !important;}.tools-hero,.contact-hero,.booking-page .booking-hero{padding-top:28px !important;}.history-page .history-main{padding-top:24px !important;}.academy-page main{padding-top:18px !important;}.contact-image-wrap{height:230px;}.contact-layout{margin-top:35px;}.floating-meeting-countdown{right:10px;bottom:10px;width:calc(100vw - 20px);}.customer-review-box{padding:24px 20px !important;}.meeting-history-card{padding:24px 18px !important;}.meeting-status{position:static !important;display:inline-flex !important;margin:10px 0 12px !important;}.public-search,.academy-public-heading{width:calc(100% - 28px);}.public-search{height:50px;}.sm-success-toast{top:92px;right:10px;width:calc(100vw - 20px);}}


/* =========================================================
   V7 FINAL — NORMAL HEADER FLOW + PAGE SPACING
   Notice bar -> menu -> page hero/heading. Nothing is fixed over content.
========================================================= */
body{padding-top:0 !important;}
.header{position:relative !important;left:0 !important;right:auto !important;top:auto !important;width:100% !important;height:94px !important;min-height:94px !important;padding:0 28px !important;background:rgba(6,20,38,.92) !important;backdrop-filter:blur(16px) !important;-webkit-backdrop-filter:blur(16px) !important;z-index:1000 !important;}
.header-announcement,
body > .page-frame > .website > .header .header-announcement{position:absolute !important;left:0 !important;right:0 !important;top:0 !important;width:100% !important;height:28px !important;z-index:1003 !important;}
.header-announcement-track{height:28px !important;display:flex !important;align-items:center !important;}
.nav{position:absolute !important;left:50% !important;top:38px !important;transform:translateX(-50%) !important;z-index:1002 !important;max-width:calc(100% - 170px) !important;}
.header .login,.account-widget{top:38px !important;}
.account-widget{position:absolute !important;right:28px !important;z-index:1005 !important;}
.account-brand .site-logo{display:block !important;}
.site-logo{object-fit:contain !important;}
/* Inner-page headings now start immediately after the real header instead of compensating for a fixed header. */
body:not(.home) .inner-content{padding-top:34px !important;}
.services-page .services-reference{padding-top:34px !important;}
.tools-page .tools-hero{padding-top:34px !important;}
.about-hero{padding-top:34px !important;}
.contact-hero{padding-top:34px !important;}
.booking-page .booking-hero{padding-top:34px !important;}
.history-page .history-main{padding-top:34px !important;}
.academy-page main{padding-top:34px !important;}
.service-detail .inner-content{padding-top:34px !important;}
.students-coming-soon{min-height:calc(100vh - 94px) !important;display:grid !important;place-items:center !important;text-align:center !important;padding:20px !important;}
.students-coming-soon h1{margin:0 !important;font-size:clamp(48px,8vw,92px) !important;}
/* Do not render empty admin-controlled collections as fake cards. */
.services-reference-track:empty:before{content:'No services available yet.';display:block;width:100%;text-align:center;color:rgba(255,255,255,.45);padding:70px 20px;}
.tools-grid:empty:before{content:'No tools available yet.';display:block;width:100%;text-align:center;color:rgba(255,255,255,.45);padding:50px 20px;}
.home-pricing-grid:empty:before{content:'No pricing plans available yet.';display:block;width:100%;text-align:center;color:rgba(255,255,255,.45);padding:50px 20px;}
/* Video upload progress state. */
#media-form.is-uploading{position:relative;}
#media-form.is-uploading:after{content:'Uploading video…';position:absolute;inset:0;display:grid;place-items:center;background:rgba(4,14,27,.78);backdrop-filter:blur(4px);border-radius:18px;color:#fff;font-weight:900;letter-spacing:.4px;z-index:10;}
@media(max-width:900px){
  .header{height:82px !important;min-height:82px !important;padding:0 10px !important;}
  .header-announcement,.header-announcement-track{height:26px !important;}
  .nav{top:30px !important;max-width:calc(100% - 58px) !important;}
  .header .login{top:30px !important;right:10px !important;}
  .account-widget{top:30px !important;right:8px !important;}
  body:not(.home) .inner-content{padding-top:24px !important;}
  .services-page .services-reference,.tools-page .tools-hero,.about-hero,.contact-hero,.booking-page .booking-hero,.history-page .history-main,.academy-page main,.service-detail .inner-content{padding-top:24px !important;}
  .students-coming-soon{min-height:calc(100vh - 82px) !important;}
}

/* =========================================================
   V8 FINAL — CLEAN HEADER FLOW
   Notice -> new menu bar -> page heading/hero. No overlap,
   no fixed header, no artificial top blank area.
========================================================= */
html,body{margin:0 !important;padding:0 !important;}
body{padding-top:0 !important;overflow-x:hidden !important;}

/* Every header now participates in normal document flow. */
.header,
body > .page-frame > .website > .header,
.inner-website .header,
.services-page .header,
.tools-page .header,
.contact-page .header,
.about-page .header,
.booking-page .header,
.history-page .header,
.solution-page .header,
.inner-page .header{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:126px !important;
    min-height:126px !important;
    margin:0 !important;
    padding:0 24px 12px !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    z-index:1000 !important;
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

/* Notice is a real first row, never positioned above/over another element. */
.header-announcement,
body > .page-frame > .website > .header .header-announcement{
    position:absolute !important;
    inset:0 0 auto 0 !important;
    width:100% !important;
    height:30px !important;
    min-height:30px !important;
    margin:0 !important;
    transform:none !important;
    display:flex !important;
    align-items:center !important;
    overflow:hidden !important;
    z-index:1001 !important;
    border-radius:0 !important;
    pointer-events:none !important;
}
.header-announcement-track{height:30px !important;align-items:center !important;}

/* New premium standalone menu row. */
.nav{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    margin:0 auto !important;
    width:max-content !important;
    max-width:calc(100% - 180px) !important;
    height:48px !important;
    min-height:48px !important;
    padding:5px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
    background:linear-gradient(135deg,rgba(10,24,45,.96),rgba(16,38,68,.94)) !important;
    border:1px solid rgba(120,168,255,.24) !important;
    border-radius:18px !important;
    box-shadow:0 12px 32px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.07) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
}
.nav::-webkit-scrollbar{display:none !important;}
.nav a,.nav a:visited{
    height:38px !important;
    flex:0 0 auto !important;
    padding:0 13px !important;
    border-radius:12px !important;
    color:#fff !important;
    background:transparent !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    white-space:nowrap !important;
    font-size:12px !important;
}
.nav a:hover,.nav a.active,.nav a:focus-visible{
    background:#2f68d8 !important;
    color:#fff !important;
    box-shadow:0 6px 18px rgba(47,104,216,.24) !important;
}
.nav a i{font-size:11px !important;color:currentColor !important;}

/* Logo and account remain in the header row, without being inserted into nav. */
.header > .logo,
.header > .account-brand{
    position:absolute !important;
    left:24px !important;
    top:43px !important;
    z-index:1004 !important;
    width:auto !important;
    margin:0 !important;
}
.header > .logo .site-logo,
.header > .account-brand .site-logo{height:44px !important;padding:5px 12px !important;}
.header .login{
    position:absolute !important;
    right:24px !important;
    top:44px !important;
    z-index:1004 !important;
}
.header .account-widget{
    position:absolute !important;
    right:24px !important;
    top:43px !important;
    z-index:1004 !important;
}

/* The header is followed by content; remove old fixed-header compensation. */
.about-hero,.tools-hero,.contact-hero,.booking-page .booking-hero,
.history-page .history-main,.academy-page main,.service-detail .inner-content,
.services-page .services-reference,.solution-shell{
    margin-top:0 !important;
    padding-top:28px !important;
}
.services-page .services-reference-heading,
.academy-public-heading{padding-top:0 !important;}

/* Home hero starts immediately after the header. */
body > .page-frame > .website > .hero{
    margin-top:0 !important;
    top:auto !important;
}

/* Remove legacy artboard top gaps that were only needed for the fixed header. */
body > .page-frame{margin:15px !important;}
body > .page-frame > .website{overflow:visible !important;}

/* Meeting history keeps the same navy system as the main site. */
.history-page{padding-top:0 !important;background-color:#061426 !important;}

@media(max-width:900px){
    .header,
    body > .page-frame > .website > .header,
    .inner-website .header,
    .services-page .header,
    .tools-page .header,
    .contact-page .header,
    .about-page .header,
    .booking-page .header,
    .history-page .header,
    .solution-page .header,
    .inner-page .header{
        height:108px !important;
        min-height:108px !important;
        padding:0 10px 8px !important;
    }
    .header-announcement,.header-announcement-track{height:28px !important;min-height:28px !important;}
    .nav{height:46px !important;min-height:46px !important;max-width:calc(100% - 20px) !important;border-radius:16px !important;}
    .nav a{height:36px !important;padding:0 11px !important;font-size:11px !important;}
    .header > .logo{left:10px !important;top:43px !important;}
    .header > .logo .site-logo{height:34px !important;padding:4px 8px !important;}
    .header .login{right:10px !important;top:43px !important;}
    .header .account-widget{right:8px !important;top:42px !important;}
    .about-hero,.tools-hero,.contact-hero,.booking-page .booking-hero,
    .history-page .history-main,.academy-page main,.service-detail .inner-content,
    .services-page .services-reference,.solution-shell{padding-top:22px !important;}
}

@media(max-width:560px){
    .header{height:104px !important;min-height:104px !important;}
    .nav{max-width:calc(100% - 8px) !important;width:calc(100% - 8px) !important;justify-content:flex-start !important;}
    .nav a{padding:0 10px !important;}
    .header > .logo{display:none !important;}
    .header .login,.header .account-widget{right:8px !important;}
}

/* =========================================================
   V8.1 FINAL — SEPARATE NAVY HEADER + INDEPENDENT HERO
   Notice + menu live inside a dedicated navy header block.
   The hero banner starts only after that header block and never
   sits behind or under the notice/menu.
========================================================= */
.header,
body > .page-frame > .website > .header,
.inner-website .header,
.services-page .header,
.tools-page .header,
.contact-page .header,
.about-page .header,
.booking-page .header,
.history-page .header,
.solution-page .header,
.inner-page .header{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:126px !important;
    min-height:126px !important;
    margin:0 !important;
    padding:0 24px 12px !important;
    background:#061426 !important;
    background-image:linear-gradient(180deg,#081a30 0%,#061426 100%) !important;
    border-bottom:1px solid rgba(120,168,255,.14) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    z-index:1000 !important;
}

/* Keep the notice visually inside the dedicated header area. */
.header-announcement,
body > .page-frame > .website > .header .header-announcement{
    position:absolute !important;
    inset:0 0 auto 0 !important;
    width:100% !important;
    height:30px !important;
    min-height:30px !important;
    background:#0a2342 !important;
    border-bottom:1px solid rgba(120,168,255,.12) !important;
    z-index:1001 !important;
}
.header-announcement-track{height:30px !important;}

/* Standalone menu: it remains inside the navy header, not on the hero. */
.nav{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    margin:0 auto !important;
    z-index:1002 !important;
}

/* The home hero is a separate flow section. */
body > .page-frame > .website > .hero{
    position:relative !important;
    left:0 !important;
    right:auto !important;
    top:auto !important;
    width:100% !important;
    margin:0 !important;
    height:clamp(650px,62vw,900px) !important;
    min-height:650px !important;
    border-radius:0 !important;
    overflow:hidden !important;
    background:#061426 !important;
}

body > .page-frame > .website > .hero > .hero-visual-slider{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    border-radius:0 !important;
}

/* Do not let legacy absolute offsets pull the hero upward. */
@media (min-width:901px){
    body > .page-frame > .website > .hero > .left-content{padding-top:150px !important;}
    body > .page-frame > .website > .hero > .right-content{padding-top:155px !important;}
}

@media(max-width:900px){
    .header,
    body > .page-frame > .website > .header,
    .inner-website .header,
    .services-page .header,
    .tools-page .header,
    .contact-page .header,
    .about-page .header,
    .booking-page .header,
    .history-page .header,
    .solution-page .header,
    .inner-page .header{
        height:108px !important;
        min-height:108px !important;
        padding:0 10px 8px !important;
    }
    .header-announcement,
    body > .page-frame > .website > .header .header-announcement,
    .header-announcement-track{
        height:28px !important;
        min-height:28px !important;
    }
    body > .page-frame > .website > .hero{
        margin-top:0 !important;
        height:clamp(540px,82vw,760px) !important;
        min-height:540px !important;
    }
}

@media(max-width:560px){
    .header{height:104px !important;min-height:104px !important;}
    body > .page-frame > .website > .hero{
        height:clamp(540px,100vw,680px) !important;
        min-height:540px !important;
    }
}

/* =========================================================
   V8.2 FINAL — HEADER IS A REAL TOP BLOCK / CONTENT NEVER UNDER NAV
   Notice -> navy header -> menu -> page content/hero.
   No fixed/absolute header compensation is used.
========================================================= */

html, body{
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  min-height:100% !important;
  overflow-x:hidden !important;
}

body > .page-frame,
body > .inner-frame,
body > .about-page,
body > .services-page,
body > .tools-page,
body > .history-page,
body > .booking-page,
body > .contact-page,
body > .solution-page,
body > .inner-page{
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  max-width:none !important;
  border:0 !important;
}

body > .page-frame > .website,
body > .page-frame > .inner-website,
body > .inner-frame > .inner-website,
.about-page,
.services-page,
.tools-page,
.history-page,
.booking-page,
.contact-page,
.solution-page,
.inner-page{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
}

/* One consistent header block on EVERY page. */
.header,
body > .page-frame > .website > .header,
.inner-website .header,
.about-page .header,
.services-page .header,
.tools-page .header,
.contact-page .header,
.booking-page .header,
.history-page .header,
.solution-page .header,
.inner-page .header{
  position:relative !important;
  inset:auto !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  width:100% !important;
  height:112px !important;
  min-height:112px !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:30px 20px 10px !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  background:#061426 !important;
  background-image:linear-gradient(180deg,#081a30 0%,#061426 100%) !important;
  border:0 !important;
  border-bottom:1px solid rgba(120,168,255,.14) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  z-index:100 !important;
}

/* Notice bar is the first row, fully contained inside the header. */
.header-announcement,
body > .page-frame > .website > .header .header-announcement{
  position:absolute !important;
  inset:0 0 auto 0 !important;
  width:100% !important;
  height:30px !important;
  min-height:30px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  overflow:hidden !important;
  border-radius:0 !important;
  background:#2f68d8 !important;
  z-index:101 !important;
  pointer-events:none !important;
}
.header-announcement-track{
  height:30px !important;
  min-height:30px !important;
  display:flex !important;
  align-items:center !important;
  width:max-content !important;
}

/* Menu is in the second row, not over the hero. */
.header .nav{
  position:relative !important;
  inset:auto !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  margin:0 auto !important;
  width:max-content !important;
  max-width:calc(100% - 180px) !important;
  height:48px !important;
  min-height:48px !important;
  box-sizing:border-box !important;
  flex:0 1 auto !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none !important;
  z-index:102 !important;
}
.header .nav::-webkit-scrollbar{display:none !important;}
.header .nav a{flex:0 0 auto !important;}

/* Logo and account occupy the sides of the menu row. */
.header > .logo,
.header > .account-brand{
  position:absolute !important;
  left:20px !important;
  top:43px !important;
  right:auto !important;
  margin:0 !important;
  width:auto !important;
  z-index:103 !important;
}
.header > .logo .site-logo,
.header > .account-brand .site-logo{
  height:44px !important;
  width:auto !important;
  padding:5px 10px !important;
  box-sizing:border-box !important;
}
.header > .login{
  position:absolute !important;
  top:43px !important;
  right:20px !important;
  z-index:103 !important;
}
.header > .account-widget,
.header .account-widget{
  position:absolute !important;
  top:43px !important;
  right:20px !important;
  z-index:103 !important;
}

/* HOME: hero begins exactly after the header block. */
body > .page-frame > .website > .hero{
  position:relative !important;
  inset:auto !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  width:100% !important;
  margin:0 !important;
  height:clamp(620px,62vw,900px) !important;
  min-height:620px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  border-radius:0 !important;
}
body > .page-frame > .website > .hero > .hero-visual-slider{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

/* Every inner page starts its content AFTER the header. */
.inner-website > .inner-content,
.inner-content,
.services-page .services-reference,
.tools-page .tools-hero,
.about-page .about-hero,
.contact-page .contact-hero,
.booking-page .booking-hero,
.history-page .history-main,
.solution-page .solution-shell,
.service-detail .inner-content,
.academy-page main{
  position:relative !important;
  top:auto !important;
  margin-top:0 !important;
}

.inner-website > .inner-content,
.inner-content{
  min-height:auto !important;
  height:auto !important;
  justify-content:flex-start !important;
  padding:42px clamp(24px,6vw,86px) 70px !important;
  box-sizing:border-box !important;
}
.services-page .services-reference,
.tools-page .tools-hero,
.about-page .about-hero,
.contact-page .contact-hero,
.booking-page .booking-hero,
.history-page .history-main,
.solution-page .solution-shell,
.service-detail .inner-content,
.academy-page main{
  padding-top:42px !important;
}

/* Prevent old fixed-header offsets from hiding headings. */
body:not(.home) .inner-content,
body.services-page .services-content,
body.tools-page .tools-content,
.inner-page .inner-content,
.service-detail .inner-content,
.services-page .services-reference,
.tools-page .tools-hero,
.about-hero,
.contact-hero,
.booking-page .booking-hero,
.history-page .history-main,
.solution-shell,
.academy-page main{
  top:auto !important;
  margin-top:0 !important;
}

@media (max-width:900px){
  .header,
  body > .page-frame > .website > .header,
  .inner-website .header,
  .about-page .header,
  .services-page .header,
  .tools-page .header,
  .contact-page .header,
  .booking-page .header,
  .history-page .header,
  .solution-page .header,
  .inner-page .header{
    height:104px !important;
    min-height:104px !important;
    padding:28px 8px 8px !important;
  }
  .header-announcement,
  body > .page-frame > .website > .header .header-announcement,
  .header-announcement-track{
    height:28px !important;
    min-height:28px !important;
  }
  .header .nav{
    width:calc(100% - 8px) !important;
    max-width:calc(100% - 8px) !important;
    height:46px !important;
    min-height:46px !important;
    justify-content:flex-start !important;
    border-radius:16px !important;
  }
  .header .nav a{
    height:36px !important;
    padding:0 9px !important;
    font-size:9px !important;
  }
  .header > .logo{left:8px !important;top:40px !important;}
  .header > .logo .site-logo{height:36px !important;padding:4px 8px !important;}
  .header > .login{right:8px !important;top:40px !important;}
  .header > .account-widget{right:8px !important;top:40px !important;}

  body > .page-frame > .website > .hero{
    margin:0 !important;
    height:clamp(560px,88vw,760px) !important;
    min-height:560px !important;
  }

  .inner-website > .inner-content,
  .inner-content,
  .services-page .services-reference,
  .tools-page .tools-hero,
  .about-page .about-hero,
  .contact-page .contact-hero,
  .booking-page .booking-hero,
  .history-page .history-main,
  .solution-page .solution-shell,
  .service-detail .inner-content,
  .academy-page main{
    padding-top:30px !important;
  }
}

@media (max-width:560px){
  .header{height:100px !important;min-height:100px !important;}
  .header .nav{width:calc(100% - 4px) !important;max-width:calc(100% - 4px) !important;}
  .header .nav a{padding:0 8px !important;font-size:8px !important;}
  .header > .logo{display:none !important;}
  .header > .login{display:none !important;}
  .header > .account-widget{right:7px !important;top:39px !important;}
  body > .page-frame > .website > .hero{
    height:clamp(520px,102vw,680px) !important;
    min-height:520px !important;
  }
}


/* =========================================================
   V8.3 — LOGO / ACCOUNT ALIGNMENT + SINGLE REVIEW RENDER
   Logo is isolated at the far-left edge; account avatar is
   vertically aligned with the menu on every page/viewport.
========================================================= */
.header > .logo,
.header > .account-brand{
  left:8px !important;
  top:43px !important;
  z-index:103 !important;
  display:flex !important;
  align-items:center !important;
  width:auto !important;
  margin:0 !important;
  pointer-events:auto !important;
}
.header > .logo .site-logo,
.header > .account-brand .site-logo{
  display:block !important;
  height:44px !important;
  width:auto !important;
  max-width:150px !important;
  object-fit:contain !important;
  padding:4px 7px !important;
  margin:0 !important;
}
.header > .account-widget,
.header .account-widget{
  top:43px !important;
  right:8px !important;
  z-index:104 !important;
  transform:none !important;
}

/* Keep the menu centered between the two side controls. */
.header .nav{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Do not duplicate the same approved review just to create a marquee. */
#about-stats .about-reviews-track{
  animation:none !important;
  transform:none !important;
}

@media(max-width:900px){
  .header > .logo,
  .header > .account-brand{left:8px !important;top:40px !important;}
  .header > .logo .site-logo,
  .header > .account-brand .site-logo{height:36px !important;max-width:112px !important;padding:3px 5px !important;}
  .header > .account-widget,
  .header .account-widget{top:40px !important;right:8px !important;}
}

@media(max-width:560px){
  /* Logo remains visible, but is completely outside the menu area. */
  .header{height:100px !important;min-height:100px !important;padding-left:4px !important;padding-right:4px !important;}
  .header > .logo,
  .header > .account-brand{display:flex !important;left:4px !important;top:39px !important;}
  .header > .logo .site-logo,
  .header > .account-brand .site-logo{height:31px !important;max-width:62px !important;padding:2px 3px !important;}
  .header .nav{
    width:calc(100% - 88px) !important;
    max-width:calc(100% - 88px) !important;
    margin-left:44px !important;
    margin-right:44px !important;
    justify-content:flex-start !important;
  }
  .header > .account-widget,
  .header .account-widget{top:38px !important;right:4px !important;}
}


/* V8.4 — restore hero CTA buttons without changing the rest of the hero */
body > .page-frame > .website > .hero > .left-content > .buttons{display:flex !important;visibility:visible !important;opacity:1 !important;position:relative !important;z-index:50 !important;}
body > .page-frame > .website > .hero > .left-content > .buttons a{display:inline-flex !important;visibility:visible !important;opacity:1 !important;}
/* Floating meeting card gently moves while remaining in the fixed corner. */
.floating-meeting-countdown{animation:floatingMeetingIn .45s cubic-bezier(.2,.8,.2,1),floatingMeetingDrift 6s ease-in-out .6s infinite !important;}
@keyframes floatingMeetingDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-7px,-9px,0)}}

/* V8.4.3 — Hero CTA visibility fix
   Keep the two requested buttons visibly anchored inside the hero.
*/
body > .page-frame > .website > .hero > .left-content > .buttons{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  position:absolute !important;
  left:0 !important;
  top:430px !important;
  margin:0 !important;
  width:max-content !important;
  min-height:58px !important;
  z-index:999 !important;
  align-items:center !important;
  gap:16px !important;
}
body > .page-frame > .website > .hero > .left-content > .buttons a{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  pointer-events:auto !important;
}
body > .page-frame > .website > .hero > .left-content > .buttons .start{
  min-width:184px !important;
  min-height:58px !important;
  padding:0 28px !important;
  border-radius:12px !important;
  background:#2f68d8 !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  box-shadow:0 12px 30px rgba(47,104,216,.28) !important;
}
body > .page-frame > .website > .hero > .left-content > .buttons .contact{
  min-width:150px !important;
  min-height:58px !important;
  padding:0 24px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(120,168,255,.38) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}
@media(max-width:900px){
  body > .page-frame > .website > .hero > .left-content > .buttons{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    width:100% !important;
    margin-top:38px !important;
    flex-wrap:wrap !important;
  }
}
@media(max-width:560px){
  body > .page-frame > .website > .hero > .left-content > .buttons{
    gap:10px !important;
    margin-top:30px !important;
  }
  body > .page-frame > .website > .hero > .left-content > .buttons a{
    flex:1 1 140px !important;
    min-width:0 !important;
    min-height:52px !important;
    padding:0 14px !important;
    font-size:13px !important;
  }
}

/* =====================================================
   FINAL HERO CTA POSITION + BLUE BRAND COLORS
   Book a Meeting / Contact Us are the actual .hero-cta-buttons
   links rendered by index.php.
===================================================== */
body > .page-frame > .website > .hero > .left-content > .hero-cta-buttons{
  position:relative !important;
  z-index:999 !important;
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  margin-top:-70px !important;
  gap:16px !important;
  align-items:center !important;
}
body > .page-frame > .website > .hero > .left-content > .hero-cta-buttons .hero-cta{
  min-width:184px !important;
  min-height:54px !important;
  height:54px !important;
  padding:0 24px !important;
  border-radius:10px !important;
  box-sizing:border-box !important;
  font-size:14px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  color:#fff !important;
}
body > .page-frame > .website > .hero > .left-content > .hero-cta-buttons .hero-cta-book{
  background:#2f68d8 !important;
  border:1px solid rgba(120,168,255,.45) !important;
  box-shadow:0 12px 30px rgba(47,104,216,.28) !important;
}
body > .page-frame > .website > .hero > .left-content > .hero-cta-buttons .hero-cta-contact{
  background:#17345d !important;
  border:1px solid rgba(120,168,255,.42) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.20) !important;
}
body > .page-frame > .website > .hero > .left-content > .hero-cta-buttons .hero-cta:hover{
  background:#3b76e6 !important;
  transform:translateY(-2px) !important;
}
@media(max-width:900px){
  body > .page-frame > .website > .hero > .left-content > .hero-cta-buttons{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    width:max-content !important;
    margin-top:-70px !important;
    flex-wrap:nowrap !important;
  }
  body > .page-frame > .website > .hero > .left-content > .hero-cta-buttons .hero-cta{
    min-width:170px !important;
    min-height:52px !important;
    height:52px !important;
    font-size:13px !important;
  }
}
@media(max-width:560px){
  body > .page-frame > .website > .hero > .left-content > .hero-cta-buttons{
    width:100% !important;
    gap:10px !important;
    margin-top:-58px !important;
  }
  body > .page-frame > .website > .hero > .left-content > .hero-cta-buttons .hero-cta{
    flex:1 1 0 !important;
    min-width:0 !important;
    min-height:50px !important;
    height:50px !important;
    padding:0 12px !important;
    font-size:12px !important;
  }
}

/* =========================================================
   HERO CTA FINAL POSITION — directly below the hero slide text/counter
   Keep the buttons inside the banner and above the Strategy section.
========================================================= */
body > .page-frame > .website > .hero > .left-content > .hero-cta-buttons{
  margin-top:-104px !important;
  transform:translateY(-2px) !important;
  position:relative !important;
  z-index:9999 !important;
}
@media(max-width:900px){
  body > .page-frame > .website > .hero > .left-content > .hero-cta-buttons{
    margin-top:-104px !important;
    transform:translateY(-2px) !important;
  }
}
@media(max-width:560px){
  body > .page-frame > .website > .hero > .left-content > .hero-cta-buttons{
    margin-top:-90px !important;
    transform:translateY(-2px) !important;
  }
}

/* Hero copy cleanup — keep the 1/8 counter and CTA buttons intact. */
body > .page-frame > .website > .hero > .right-content:empty,
body > .page-frame > .website > .hero > .bottom-left:empty,
body > .page-frame > .website > .hero > .bottom-right:empty{display:none !important;}

/* =========================================================
   V9 CROSS-BROWSER / AUTH / LAYOUT STABILITY PATCH
========================================================= */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
*,*::before,*::after{box-sizing:border-box;}
img{max-width:100%;height:auto;}
.header{overflow:visible !important;}
.header > .logo{
  width:160px !important;
  height:50px !important;
  display:flex !important;
  align-items:center !important;
  position:absolute !important;
  left:16px !important;
  top:39px !important;
  flex:0 0 160px !important;
}
.header > .logo .site-logo{
  display:block !important;
  width:150px !important;
  height:44px !important;
  max-width:150px !important;
  object-fit:contain !important;
  object-position:left center !important;
  padding:4px 6px !important;
  margin:0 !important;
}
.header > .account-widget{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:absolute !important;
  width:46px !important;
  height:46px !important;
  right:16px !important;
  top:40px !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:10050 !important;
}
.header > .account-widget .account-avatar{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
  visibility:visible !important;
  opacity:1 !important;
  overflow:hidden !important;
}
.header > .account-widget .account-avatar span{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#fff !important;
  font-size:16px !important;
  font-weight:900 !important;
  line-height:44px !important;
}
.site-logo{min-width:0;}

/* Stable navy booking form */
.booking-form-card{
  background:#061a33 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#fff !important;
}
.booking-form-card .booking-field label{color:#fff !important;}
.booking-form-card .booking-field label small{color:rgba(255,255,255,.65) !important;}
.booking-form-card .booking-field input,
.booking-form-card .booking-field select,
.booking-form-card .booking-field textarea{
  background:#fff !important;
  color:#111 !important;
  border-color:rgba(255,255,255,.22) !important;
}
.booking-form-card .booking-field input:focus,
.booking-form-card .booking-field select:focus,
.booking-form-card .booking-field textarea:focus{
  border-color:#ff3b30 !important;
  box-shadow:0 0 0 4px rgba(255,59,48,.16) !important;
}
.booking-form-card .booking-note{color:rgba(255,255,255,.68) !important;}
.booking-form-card .account-error{color:#ffb4ad !important;}

/* One service record = one public service card */
.services-reference-track{will-change:transform;}
.services-reference-track .service-reference-card{flex:0 0 calc(50% - 15px);}
@media(max-width:900px){
  .header > .logo{left:8px !important;top:39px !important;width:130px !important;flex-basis:130px !important;}
  .header > .logo .site-logo{width:120px !important;max-width:120px !important;height:40px !important;}
  .header > .account-widget{right:8px !important;top:39px !important;}
  .services-reference-track .service-reference-card{flex:0 0 100%;}
}
@media(max-width:560px){
  .header > .logo{display:flex !important;left:4px !important;top:38px !important;width:80px !important;flex-basis:80px !important;}
  .header > .logo .site-logo{width:72px !important;max-width:72px !important;height:34px !important;padding:2px !important;}
  .header > .account-widget{right:4px !important;top:37px !important;}
  .header > .account-widget .account-avatar{width:40px !important;height:40px !important;min-width:40px !important;min-height:40px !important;}
  .header > .account-widget .account-avatar span{line-height:40px !important;}
}


/* =====================================================
   FINAL PROFILE AVATAR VISIBILITY FIX — DESKTOP + MOBILE
   Keep the logged-in avatar in its own stacking context and
   make the user icon the reliable visual fallback.
===================================================== */
.header{overflow:visible !important;}
.header > .account-widget{
  position:absolute !important;
  top:38px !important;
  right:14px !important;
  z-index:2147483000 !important;
  display:flex !important;
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  isolation:isolate !important;
}
.header > .account-widget .account-avatar{
  appearance:none !important;
  -webkit-appearance:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:50% !important;
  border:2px solid rgba(255,255,255,.82) !important;
  background:#0b2a4d !important;
  color:#fff !important;
  box-shadow:0 5px 18px rgba(0,0,0,.28) !important;
  overflow:hidden !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:1 !important;
}
.header > .account-widget .account-avatar-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  color:#fff !important;
  font-size:18px !important;
  line-height:1 !important;
  visibility:visible !important;
  opacity:1 !important;
}
.header > .account-widget .account-avatar-initial{display:none !important;}
.header > .account-widget .account-menu{z-index:2147483001 !important;}
@media (max-width:900px){
  .header > .account-widget{right:8px !important;top:37px !important;width:46px !important;height:46px !important;min-width:46px !important;min-height:46px !important;}
  .header > .account-widget .account-avatar{width:42px !important;height:42px !important;min-width:42px !important;min-height:42px !important;}
}
@media (max-width:560px){
  .header > .account-widget{right:6px !important;top:36px !important;width:44px !important;height:44px !important;min-width:44px !important;min-height:44px !important;}
  .header > .account-widget .account-avatar{width:40px !important;height:40px !important;min-width:40px !important;min-height:40px !important;border-width:2px !important;}
  .header > .account-widget .account-avatar-icon{font-size:16px !important;}
}

/* V9 SERVICE MEDIA FIX — show the complete uploaded service image */
.service-reference-media { background:#f5f7fb !important; }
.service-reference-media img { object-fit:contain !important; object-position:center !important; background:#f5f7fb; }

.service-dynamic-image{width:min(100%,900px);margin:28px 0;border-radius:24px;overflow:hidden;background:#f5f7fb;display:flex;justify-content:center;align-items:center;min-height:240px}
.service-dynamic-image img{width:100%;max-height:520px;object-fit:contain;display:block}


/* Uploaded website logo — transparent artwork only; no extra background/padding. */
.site-logo,
.header .logo .site-logo,
.header > .logo .site-logo,
.header > .account-brand .site-logo,
.footer-logo .site-logo,
.account-brand .site-logo{
    background:transparent !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    object-fit:contain !important;
}

/* =========================================================
   FINAL BOOKING / BRANDING POLISH
========================================================= */
.header > .logo{width:200px !important;height:62px !important;left:14px !important;top:34px !important;flex-basis:200px !important;}
.header > .logo .site-logo{width:188px !important;max-width:188px !important;height:56px !important;padding:0 !important;object-fit:contain !important;}
.footer-logo .site-logo{width:190px !important;max-width:190px !important;height:64px !important;object-fit:contain !important;padding:0 !important;}
.booking-social-links{margin:18px 0 8px;padding:18px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(255,255,255,.035);}
.booking-social-title{display:flex;align-items:center;gap:9px;margin:0 0 12px;color:#fff;font-weight:800;font-size:14px;letter-spacing:.2px;}
.booking-social-title i{color:#ff3b30;}
.booking-social-title small{font-weight:500;color:rgba(255,255,255,.6);}
.booking-social-links .booking-form-row{margin-bottom:12px;}
.booking-social-links .booking-form-row:last-child{margin-bottom:0;}
.contact-submit{display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;min-height:54px !important;padding:14px 24px !important;border-radius:12px !important;box-shadow:0 10px 24px rgba(225,6,0,.22) !important;transition:transform .2s ease,box-shadow .2s ease !important;}
.contact-submit:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(225,6,0,.30) !important;}
@media(max-width:900px){
  .header > .logo{width:160px !important;flex-basis:160px !important;left:7px !important;top:36px !important;}
  .header > .logo .site-logo{width:150px !important;max-width:150px !important;height:50px !important;}
  .footer-logo .site-logo{width:165px !important;height:58px !important;}
}
@media(max-width:560px){
  .header > .logo{width:108px !important;flex-basis:108px !important;left:3px !important;top:35px !important;}
  .header > .logo .site-logo{width:102px !important;max-width:102px !important;height:46px !important;}
  .footer-logo .site-logo{width:145px !important;height:52px !important;}
  .booking-social-links{padding:14px;}
}

.meeting-platform-links{display:flex;flex-wrap:wrap;gap:7px;}
.meeting-platform-links a{display:inline-flex;padding:6px 9px;border-radius:8px;background:rgba(255,255,255,.07);text-decoration:none;font-size:12px;font-weight:700;}

/* V2 FINAL FORM POLISH */
.cta-red-btn,
.booking-submit{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  width:100% !important;
  min-height:54px !important;
  padding:14px 24px !important;
  border:0 !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,#e10600,#ff3b30) !important;
  color:#fff !important;
  font-weight:800 !important;
  font-size:15px !important;
  text-decoration:none !important;
  cursor:pointer !important;
  box-shadow:0 12px 28px rgba(225,6,0,.30) !important;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease !important;
}
.cta-red-btn:hover,
.booking-submit:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 16px 34px rgba(225,6,0,.38) !important;}
.booking-links-field{
  padding:18px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.035) !important;
}
.booking-links-field > label{display:block !important;margin-bottom:14px !important;}
.booking-links-field > label i{margin-right:7px;color:#ff3b30;}
.booking-links-grid{grid-template-columns:1fr 1fr;gap:14px !important;margin-bottom:0 !important;}
.booking-links-grid .booking-field{margin-bottom:0 !important;}
.contact-form-card{background:#061a33 !important;color:#fff !important;border:1px solid rgba(255,255,255,.10) !important;box-shadow:0 24px 60px rgba(0,0,0,.28) !important;}
.contact-form-card h3{color:#fff !important;}
.contact-field label{color:#fff !important;}
.contact-field input,.contact-field textarea{background:#fff !important;color:#111 !important;border-color:rgba(255,255,255,.22) !important;}
.contact-field input:focus,.contact-field textarea:focus{border-color:#ff3b30 !important;background:#fff !important;box-shadow:0 0 0 4px rgba(255,59,48,.16) !important;}
.contact-submit{background:linear-gradient(135deg,#e10600,#ff3b30) !important;color:#fff !important;box-shadow:0 12px 28px rgba(225,6,0,.30) !important;}
.contact-form-note{color:rgba(255,255,255,.68) !important;}
@media(max-width:900px){.booking-links-grid{grid-template-columns:1fr;gap:12px !important;}}


/* Sell Mek V-next: Upcoming Projects / Notice + detailed service content */
.home-upcoming-section{padding:78px clamp(28px,5vw,76px);background:#061426;color:#fff;}
.home-upcoming-section .media-showcase-heading h2{color:#fff}.home-upcoming-section .media-showcase-heading p{color:rgba(255,255,255,.68)}
.home-upcoming-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.home-upcoming-card{overflow:hidden;border-radius:24px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.18)}
.home-upcoming-media{aspect-ratio:16/9;background:#020812;overflow:hidden}.home-upcoming-media img,.home-upcoming-media video{width:100%;height:100%;object-fit:cover;display:block}
.home-upcoming-copy{padding:24px 26px 28px}.home-upcoming-meta{display:flex;justify-content:space-between;gap:12px;color:#e39a63;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}.home-upcoming-meta time{color:rgba(255,255,255,.55)}
.home-upcoming-copy h3{margin:12px 0 8px;font-size:25px;color:#fff}.home-upcoming-copy p{margin:0;color:rgba(255,255,255,.7);line-height:1.7}
.home-upcoming-grid:empty::before{content:'Upcoming projects and notices will appear here.';grid-column:1/-1;color:rgba(255,255,255,.55);padding:30px;border:1px dashed rgba(255,255,255,.18);border-radius:18px;text-align:center}
.service-detail-copy{margin:44px 0}.service-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:44px 0}.service-detail-grid article{padding:28px;border:1px solid rgba(6,20,38,.1);border-radius:22px;background:#f8fafc}.service-detail-grid article>span{font-size:11px;font-weight:900;letter-spacing:2px;color:#e10600}.service-detail-grid h3{font-size:24px;margin:10px 0 14px}.service-detail-grid ul{list-style:none;padding:0;margin:0}.service-detail-grid li{display:flex;gap:10px;margin:11px 0;line-height:1.55;color:#515b67}.service-detail-grid li i{color:#e10600;margin-top:4px}.service-faq{margin:46px 0}.service-faq details{border-top:1px solid rgba(6,20,38,.12);padding:18px 0}.service-faq summary{cursor:pointer;font-weight:800;color:#061426}.service-faq details p{color:#5d6671;line-height:1.7;margin:12px 0 0}
@media(max-width:760px){.home-upcoming-grid,.service-detail-grid{grid-template-columns:1fr}.home-upcoming-section{padding:58px 20px}}

/* V13 update: Upcoming and Results use a two-column desktop grid. */
.home-upcoming-grid,
.achievements-section .media-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.achievements-section .media-grid {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 760px) {
  .home-upcoming-grid,
  .achievements-section .media-grid {
    grid-template-columns: 1fr !important;
  }
}


/* V14 FIXES — Process order, readable service cards and 3-column results. */
.service-detail-grid article{
  background:#ffffff !important;
  color:#061426 !important;
}
.service-detail-grid article > span{
  color:#e10600 !important;
}
.service-detail-grid article h3{
  color:#061426 !important;
}
.service-detail-grid article li,
.service-detail-grid article li span{
  color:#515b67 !important;
}
.service-detail-grid article li i{
  color:#e10600 !important;
}

/* Results media: three items per row on desktop, then responsive down. */
.achievements-section .achievements-text-list,
.result-media-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:20px !important;
  max-width:1180px !important;
  margin:0 auto !important;
}
.achievements-section .sm-media-card,
.result-media-grid .sm-media-card{
  min-width:0 !important;
  overflow:hidden !important;
}
.achievements-section .sm-media-video,
.result-media-grid .sm-media-video{
  position:relative !important;
  aspect-ratio:16/10 !important;
  min-height:0 !important;
  border-radius:16px !important;
  overflow:hidden !important;
  cursor:pointer !important;
}
.achievements-section .sm-media-video video,
.result-media-grid .sm-media-video video{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
}
.achievements-section .sm-media-video img,
.result-media-grid .sm-media-video img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
}
.result-media-grid .sm-media-card h3{
  margin:14px 8px 5px !important;
}
.result-media-grid .sm-media-card p{
  margin:0 8px 8px !important;
}

.result-page-main{padding-top:94px !important;min-height:60vh;background:#061426;color:#fff;}
.standalone-results-hero{padding:80px clamp(24px,5vw,76px) 42px;max-width:1280px;margin:0 auto;}
.standalone-results-hero .media-showcase-heading{max-width:820px;}
.standalone-results-hero h1{font-size:clamp(44px,7vw,82px);line-height:1;margin:10px 0 16px;color:#fff;}
.standalone-results-hero h1 em{color:#e10600;font-style:normal;}
.standalone-results-hero p{max-width:760px;color:rgba(255,255,255,.68);line-height:1.7;}
.standalone-results-media{padding:20px clamp(24px,5vw,76px) 90px;background:#061426;}
.result-page .result-media-grid .sm-media-card{padding:12px !important;background:linear-gradient(145deg,rgba(15,39,70,.72),rgba(5,17,32,.92)) !important;border:1px solid rgba(93,137,201,.16) !important;border-radius:22px !important;}
.result-page .result-media-grid .sm-media-card h3{color:#fff !important;}
.result-page .result-media-grid .sm-media-card p{color:rgba(245,248,255,.68) !important;line-height:1.6;}
.result-page .result-media-grid .sm-media-video{background:#050b14 !important;}
.result-page .result-media-grid .sm-media-video video{background:#050b14 !important;object-fit:cover !important;}

@media(max-width:900px){
  .achievements-section .achievements-text-list,
  .result-media-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:620px){
  .achievements-section .achievements-text-list,
  .result-media-grid{grid-template-columns:1fr !important;}
  .standalone-results-hero{padding-top:50px;}
}

.sm-result-lightbox{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;padding:30px;cursor:zoom-out;}
.sm-result-lightbox img{max-width:min(1200px,94vw);max-height:90vh;width:auto;height:auto;border-radius:16px;box-shadow:0 25px 80px rgba(0,0,0,.5);object-fit:contain;}
.sm-result-lightbox button{position:absolute;top:18px;right:24px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#111;font-size:30px;line-height:1;cursor:pointer;}

/* Process We Follow — autoplay video showcase */
.reference-process .process-video-showcase{width:min(1080px,94%);margin:0 auto 34px;}
.reference-process .process-video-frame{position:relative;overflow:hidden;border-radius:24px;border:1px solid rgba(255,255,255,.12);background:#07182f;box-shadow:0 22px 55px rgba(0,0,0,.28);aspect-ratio:16/7;}
.reference-process .process-video-frame video{display:block;width:100%;height:100%;object-fit:cover;background:#07182f;}
.reference-process .process-video-overlay{position:absolute;left:22px;bottom:20px;pointer-events:none;}
.reference-process .process-video-overlay span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(5,18,38,.72);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:11px;font-weight:800;letter-spacing:.12em;backdrop-filter:blur(8px);}
@media(max-width:700px){.reference-process .process-video-showcase{width:100%;margin-bottom:24px;}.reference-process .process-video-frame{aspect-ratio:16/10;border-radius:18px;}.reference-process .process-video-overlay{left:14px;bottom:14px;}}

.process-video-empty{min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:1px dashed rgba(255,255,255,.18);border-radius:20px;background:rgba(255,255,255,.03);color:rgba(255,255,255,.65);font-weight:700}.process-video-empty i{font-size:36px;color:#e10600}

/* Sell Mek V20 process/content alignment + expandable process cards */
.dark-section-heading{
    text-align:left !important;
    margin-left:0 !important;
    margin-right:auto !important;
}
.reference-process-heading{
    text-align:left !important;
    margin-left:0 !important;
    margin-right:auto !important;
}
.reference-process-flow{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:70px 40px;
    height:auto !important;
    padding:45px 0 20px;
}
.reference-process-flow .reference-process-path{
    z-index:0;
}
.reference-process-flow .reference-process-card{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    margin:0 auto;
    z-index:1;
    transform:none !important;
}
@media(max-width:1100px) and (min-width:901px){
    .reference-process-flow{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:900px){
    .reference-process-flow{
        display:flex !important;
        flex-direction:column;
        align-items:center;
        gap:55px;
        padding:25px 0;
    }
    .reference-process-flow .reference-process-card{
        position:relative !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        margin:0;
    }
}