@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --ink: #11120f;
    --paper: #f4f3ed;
    --lime: #F1CA03;
    --cyan: #4fdcf4;
    --pink: #ff759b;
    --line: rgba(17, 18, 15, .16)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Manrope, Arial, sans-serif
}

a {
    color: inherit;
    text-decoration: none
}

.mono,
.eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    letter-spacing: .13em;
    text-transform: uppercase
}

.nav2 {
    position: sticky;
    z-index: 40;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 4vw;
    background: rgba(244, 243, 237, .86);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line)
}

.brand2 {
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -1px
}

.brand2 i {
    font-style: normal;
    color: #00a6d2
}

.nav2-links {
    display: flex;
    align-items: center;
    gap: 21px;
    font-size: 12px;
    font-weight: 700
}

.nav2-links a {
    transition: .2s
}

.nav2-links a:hover,
.nav2-links .active {
    color: #007b9e
}

.nav2-links .contact-link {
    border: 1px solid var(--ink);
    border-radius: 99px;
    padding: 9px 14px
}

.nav2-links .contact-link:hover {
    background: var(--ink);
    color: #fff
}

.hero2 {
    min-height: 78vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 110px 7vw 70px;
    overflow: hidden;
    background: var(--ink);
    color: #fff
}

.hero2:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(0, 0, 0, .3), transparent 60%), repeating-linear-gradient(90deg, transparent 0, transparent 74px, rgba(255, 255, 255, .08) 75px)
}

.hero2>* {
    position: relative;
    z-index: 1
}

.hero2 .eyebrow {
    color: var(--lime);
    display: flex;
    align-items: center;
    gap: 13px
}

.hero2 .eyebrow:before {
    content: '';
    height: 1px;
    width: 46px;
    background: currentColor
}

.hero2 h1 {
    margin: 45px 0  60px  -50px;
    max-width: 1050px;
    font-size: 90px;
    letter-spacing: -.09em;
    line-height: .81;
    font-weight: 800
}

.hero2 h1 em {
    font-style: normal;
    color: var(--lime)
}

.hero2 p {
    max-width: 530px;
    margin: 34px 0 0;
    color: #c8c9c2;
    font-size: 17px;
    line-height: 1.75
}

.hero-stamp {
    position: absolute !important;
    right: 7vw;
    top: 20%;
    display: grid;
    place-items: center;
    width: min(27vw, 370px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    font-family: 'DM Mono';
    font-size: 11px;
    letter-spacing: .15em;
    color: var(--cyan);
    transform: rotate(-13deg);
    animation: spin 18s linear infinite
}

.hero-stamp:before {
    content: '';
    width: 60%;
    aspect-ratio: 1;
    border: 1px dashed var(--cyan);
    border-radius: 50%
}

.hero-stamp b {
    position: absolute;
    color: #fff;
    font: 800 clamp(30px, 4vw, 55px)/1 Manrope;
    letter-spacing: -.1em
}

.hero-stamp b:after {
    content: '✦';
    color: var(--lime);
    font-size: .4em;
    vertical-align: top
}

.page {
    max-width: 1380px;
    margin: auto;
    padding: 125px 6vw
}

.lead {
    font-size: 46px;
    line-height: 1.04;
    letter-spacing: -.07em;
    max-width: 1100px;
    font-weight: 700
}

.lead em {
    font-style: normal;
    color: #0085aa
}

.split {
    display: grid;
    grid-template-columns: 1.03fr .97fr;
    gap: 7vw;
    align-items: start;
    margin-top: 95px
}

.label {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 25px;
    color: #0085aa
}

.label:before {
    content: '';
    width: 38px;
    height: 1px;
    background: currentColor
}

.copy {
    font-size: 18px;
    line-height: 1.8;
    color: #5a5b55
}

.image-block {
    position: relative;
    min-height: 580px;
    border-radius: 28px;
    overflow: hidden;
    background: #101b18
}

.image-block img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    mix-blend-mode: screen;
    opacity: .88
}

.image-block:after {
    content: 'LIVASYS / EST. 2012';
    position: absolute;
    left: 21px;
    bottom: 19px;
    padding: 8px 11px;
    background: var(--lime);
    color: var(--ink);
    font: 10px 'DM Mono';
    letter-spacing: .12em
}

.numbers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    margin-top: 115px;
    border: 1px solid var(--line)
}

.about-numbers {
    grid-template-columns: repeat(4, 1fr);
}

.number {
    padding: 36px 25px;
    background: var(--paper)
}

.number b {
    display: block;
    font-size: clamp(38px, 5vw, 68px);
    letter-spacing: -.08em
}

.number span {
    font: 11px 'DM Mono';
    letter-spacing: .1em;
    color: #73746e
}

.marquee2 {
    overflow: hidden;
    background: var(--lime);
    white-space: nowrap;
    padding: 21px 0;
    font-size: clamp(31px, 5vw, 66px);
    font-weight: 800;
    letter-spacing: -.07em
}

.marquee2 div {
    display: inline-block;
    animation: slide 18s linear infinite
}

.service-list2 {
    margin-top: 70px;
    border-top: 1px solid var(--line)
}

.service2 {
    display: grid;
    grid-template-columns: 84px 1fr .85fr 45px;
    gap: 25px;
    align-items: center;
    padding: 31px 0;
    border-bottom: 1px solid var(--line);
    transition: .35s
}

.service2:hover {
    padding-left: 22px;
    padding-right: 12px;
    background: var(--ink);
    color: #fff
}

.service2 .num {
    font: 11px 'DM Mono';
    color: #0085aa
}

.service2 h2 {
    font-size: 38px;
    letter-spacing: -.07em;
    margin: 0
}

.service2 p {
    margin: 0;
    color: #6a6b66;
    line-height: 1.7;
    font-size: 14px
}

.service2:hover p {
    color: #c1c2bc
}

.service2 .arrow {
    font-size: 32px;
    color: #0085aa;
    text-align: right
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 65px
}

.feature {
    min-height: 270px;
    padding: 28px;
    border-radius: 20px;
    background: #e2e1dc;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: .35s
}

.feature:nth-child(2) {
    background: var(--cyan)
}

.feature:nth-child(3) {
    background: var(--pink)
}

.feature:hover {
    transform: translateY(-11px) rotate(-1deg);
    box-shadow: 0 20px 35px rgba(0, 0, 0, .17)
}

.feature .symbol {
    font-size: 47px;
    line-height: 1;
    font-weight: 500
}

.feature h3 {
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -.05em;
    margin: 0
}

.course-grid2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
    margin-top: 70px
}

.course2 {
    padding: 30px;
    border: 1px solid var(--ink);
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: .35s
}

.course2:before {
    content: attr(data-no);
    position: absolute;
    right: -12px;
    top: -38px;
    font-size: 140px;
    font-weight: 800;
    letter-spacing: -.1em;
    color: rgba(17, 18, 15, .08)
}

.course2:hover {
    background: var(--ink);
    color: #fff;
    transform: translateY(-10px)
}

.course2:hover .course-tag {
    color: var(--lime)
}

.course-tag {
    color: #0085aa;
    font: 11px 'DM Mono';
    letter-spacing: .12em
}

.course2 h2 {
    font-size: clamp(31px, 3.4vw, 49px);
    line-height: .9;
    letter-spacing: -.08em;
    position: relative
}

.course2 ul {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 14px;
    line-height: 2.1;
    color: inherit
}

.course2 li:before {
    content: '— ';
    color: #0085aa
}

.course2 a {
    font: 700 12px 'DM Mono';
    letter-spacing: .1em;
    border-bottom: 1px solid currentColor;
    padding-bottom: 5px;
    align-self: flex-start
}

.logo-grid2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    margin-top: 65px
}

.logo2 {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: clamp(19px, 2.4vw, 35px);
    font-weight: 800;
    letter-spacing: -.08em;
    transition: .3s
}

.logo2:nth-child(3n) {
    font-family: 'DM Mono';
    letter-spacing: -.14em
}

.logo2:hover {
    background: var(--cyan);
    transform: scale(.96);
    border-radius: 15px
}

.case-grid2 {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 18px;
    margin-top: 85px
}

.case {
    height: 480px;
    position: relative;
    overflow: hidden;
    border-radius: 23px;
    background: #222
}

.case:nth-child(2) {
    height: 620px
}

.case img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: saturate(.72);
    transition: .65s
}

.case:hover img {
    transform: scale(1.08);
    filter: saturate(1)
}

.case h3 {
    position: absolute;
    z-index: 1;
    left: 22px;
    bottom: 18px;
    margin: 0;
    color: #fff;
    font-size: clamp(26px, 3vw, 43px);
    letter-spacing: -.07em
}

.case small {
    position: absolute;
    z-index: 1;
    left: 22px;
    top: 20px;
    color: var(--lime);
    font: 10px 'DM Mono';
    letter-spacing: .13em
}

.case:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 45%, rgba(0, 0, 0, .75))
}

.quote2 {
    padding: 85px 7vw;
    background: var(--pink);
    margin-top: 110px;
    position: relative;
    overflow: hidden
}

.quote2:after {
    content: '“';
    position: absolute;
    right: 5%;
    top: -24%;
    font: 500 28rem/1 Georgia;
    color: rgba(255, 255, 255, .3)
}

.quote2 blockquote {
    position: relative;
    z-index: 1;
    max-width: 1050px;
    margin: 0;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.07em
}

.quote2 cite {
    display: block;
    margin-top: 34px;
    font: 11px 'DM Mono';
    letter-spacing: .14em;
    font-style: normal
}

.role-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 70px
}

.role2 {
    padding: 30px;
    border: 1px solid var(--line);
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: .3s
}

.role2:hover {
    background: #1b1b18;
    color: #fff;
    transform: translateY(-8px)
}

.role2 h2 {
    font-size: clamp(29px, 3.5vw, 47px);
    line-height: .94;
    letter-spacing: -.08em;
    margin: 0
}

.role2 small {
    font: 11px 'DM Mono';
    color: #0085aa;
    letter-spacing: .12em
}

.role2 a {
    font: 700 12px 'DM Mono';
    letter-spacing: .1em;
    color: #0085aa
}

.journey {
    margin-top: 100px;
    background: #191a17;
    color: #fff;
    padding: 70px 6vw
}

.journey h2 {
    font-size: clamp(38px, 5vw, 72px);
    letter-spacing: -.08em;
    line-height: .95;
    margin: 0 0 65px
}

.steps2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px
}

.step2 {
    border-top: 1px solid rgba(255, 255, 255, .25);
    padding-top: 16px
}

.step2 b {
    font: 11px 'DM Mono';
    color: var(--lime)
}

.step2 h3 {
    font-size: 26px;
    margin: 25px 0 8px;
    letter-spacing: -.05em
}

.step2 p {
    margin: 0;
    color: #b6b7b0;
    line-height: 1.7;
    font-size: 14px
}

.cta2 {
    padding: 110px 7vw;
    background: var(--cyan);
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px
}

.cta2 h2 {
    max-width: 850px;
    margin: 0;
    font-size: 75px;
    line-height: .86;
    letter-spacing: -.09em
}

.cta2 a {
    flex: none;
    width: 130px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font: 11px 'DM Mono';
    text-align: center;
    letter-spacing: .08em;
    transition: .3s
}

.cta2 a:hover {
    background: #fff;
    color: var(--ink);
    transform: rotate(12deg)
}

.footer2 {
    background: #11120f;
    color: #fff;
    padding: 68px 7vw 35px
}

.footer2 h2 {
    font-size: clamp(42px, 8vw, 120px);
    line-height: .82;
    letter-spacing: -.1em;
    margin: 22px 0 60px
}

.footer2 h2 span {
    color: var(--lime)
}

.footer2-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, .17);
    padding-top: 18px;
    color: #a5a69f;
    font: 10px 'DM Mono';
    letter-spacing: .1em
}

@keyframes spin {
    to {
        transform: rotate(347deg)
    }
}

@keyframes slide {
    to {
        transform: translateX(-50%)
    }
}

@media(max-width:1000px) {
    .nav2-links {
        gap: 12px;
        font-size: 11px
    }

    .hero-stamp {
        right: 4vw;
        top: 12%;
        width: 260px
    }

    .split {
        grid-template-columns: 1fr;
        gap: 45px
    }

    .image-block {
        min-height: 410px
    }

    .course-grid2 {
        grid-template-columns: 1fr 1fr
    }

    .logo-grid2 {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:680px) {
    .nav2 {
        padding: 14px 5vw
    }

    .nav2-links {
        overflow-x: auto;
        max-width: 72vw;
        white-space: nowrap;
        padding-bottom: 2px
    }

    .nav2-links .contact-link {
        padding: 7px 10px
    }

    .hero2 {
        min-height: 72vh;
        padding: 100px 6vw 55px
    }

    .hero2 h1 {
        font-size: clamp(55px, 17vw, 94px)
    }

    .hero-stamp {
        opacity: .45;
        width: 210px;
        top: 7%;
        right: -35px
    }

    .page {
        padding: 85px 6vw
    }

    .numbers,
    .feature-grid,
    .course-grid2,
    .role-grid {
        grid-template-columns: 1fr
    }

    .number {
        padding: 28px
    }

    .service2 {
        grid-template-columns: 42px 1fr 25px;
        gap: 12px
    }

    .service2 p {
        grid-column: 2;
        grid-row: 2
    }

    .service2 .arrow {
        grid-column: 3;
        grid-row: 1
    }

    .logo-grid2 {
        grid-template-columns: repeat(2, 1fr)
    }

    .logo2 {
        min-height: 125px
    }

    .case-grid2 {
        grid-template-columns: 1fr
    }

    .case,
    .case:nth-child(2) {
        height: 390px
    }

    .quote2 {
        margin-top: 70px;
        padding: 66px 6vw
    }

    .steps2 {
        grid-template-columns: 1fr
    }

    .cta2 {
        padding: 75px 6vw;
        align-items: flex-start;
        flex-direction: column
    }

    .footer2-bottom {
        flex-direction: column
    }

    .marquee2 {
        font-size: 36px
    }
}

.how2 {
    padding: 110px 7vw;
    background: #deddd6
}

.how2-head {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    align-items: end
}

.how2 h2 {
    font-size: clamp(45px, 7vw, 105px);
    letter-spacing: -.09em;
    line-height: .85;
    margin: 20px 0 0
}

.how2>p {
    max-width: 350px;
    color: #5a5b55;
    line-height: 1.7
}

.how-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 70px;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line)
}

.how-card {
    padding: 24px;
    min-height: 260px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #deddd6;
    transition: .3s
}

.how-card:hover {
    background: var(--lime);
    transform: translateY(-8px)
}

.how-card b {
    font: 11px 'DM Mono';
    color: #0085aa
}

.how-card h3 {
    font-size: 28px;
    letter-spacing: -.07em;
    line-height: .95;
    margin: 52px 0 13px
}

.how-card p {
    font-size: 14px;
    line-height: 1.7;
    color: #555750
}

.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 60px
}

.service-tags span {
    padding: 13px 18px;
    border: 1px solid var(--ink);
    border-radius: 99px;
    font: 11px 'DM Mono';
    letter-spacing: .08em;
    transition: .25s
}

.service-tags span:hover {
    background: var(--lime);
    transform: rotate(-2deg)
}

.benefits {
    padding: 110px 7vw;
    background: #11120f;
    color: #fff
}

.benefits .lead {
    max-width: 900px
}

.benefits .lead em {
    color: var(--lime)
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 70px;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .2)
}

.benefit {
    min-height: 250px;
    padding: 27px;
    background: #11120f
}

.benefit b {
    font: 11px 'DM Mono';
    color: var(--lime)
}

.benefit h3 {
    font-size: clamp(26px, 3vw, 43px);
    letter-spacing: -.07em;
    line-height: .95;
    margin: 42px 0 12px
}

.benefit p {
    margin: 0;
    color: #b7b8b1;
    font-size: 14px;
    line-height: 1.7
}

.site-map2 {
    padding: 70px 7vw 36px;
    background: #11120f;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, .15)
}

.site-map-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 35px;
    padding-bottom: 60px
}

.site-map-grid h3 {
    font: 11px 'DM Mono';
    letter-spacing: .12em;
    color: var(--lime);
    margin: 0 0 18px
}

.site-map-grid p,
.site-map-grid a {
    display: block;
    margin: 0 0 8px;
    color: #b7b8b1;
    font-size: 14px;
    line-height: 1.6
}

.site-map-grid a:hover {
    color: #fff
}

.site-map-grid .location {
    font-size: 15px;
    color: #fff;
    max-width: 330px
}

.site-map-bottom {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    padding-top: 18px;
    font: 10px 'DM Mono';
    letter-spacing: .1em;
    color: #a5a69f
}

@media(max-width:780px) {
    .how2 {
        padding: 80px 6vw
    }

    .how2-head {
        display: block
    }

    .how2>p {
        margin-top: 28px
    }

    .how-grid,
    .benefit-grid {
        grid-template-columns: 1fr
    }

    .site-map-grid {
        grid-template-columns: 1fr 1fr
    }

    .site-map-bottom {
        flex-direction: column
    }

    .service-tags {
        gap: 8px
    }

    .service-tags span {
        padding: 10px 12px
    }

    .benefits {
        padding: 80px 6vw
    }
}


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

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

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

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

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

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

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

.logo span {
    color: #24A3D8;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .menu-btn {
        display: flex;
    }

    .contact-btn {
        display: none;
    }
}

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

    .logo {
        font-size: 18px;
    }

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

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

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

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

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

.footer h2 {
    margin-top: 26px;
    font-size: 75px;
    line-height: .95;
    font-weight: 900;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

RESET

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

.home-page * {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



.home-page {

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

    background: #F8F8F8;

    overflow-x: hidden;

}



.home-page img {

    max-width: 100%;

    display: block;

}



.home-page a {

    -webkit-tap-highlight-color: transparent;

}



/* Accessible focus ring, respected everywhere */

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

    outline: 3px solid #24A3D8;

    outline-offset: 3px;

    border-radius: 4px;

}



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

    * {

        animation-duration: .001ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .001ms !important;

        scroll-behavior: auto !important;

    }

}



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

HEADER

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

.home-page .header {

    position: fixed;

    top: 20px;

    left: 0;

    width: 100%;

    z-index: 9999;

    display: flex;

    flex-direction: column;

    align-items: center;

    transition: .5s ease;

}



.home-page .header-container {

    position: relative;

    z-index: 2;

    width: min(94%, 1450px);

    height: 82px;

    padding: 0 28px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-radius: 22px;

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

    backdrop-filter: blur(14px);

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

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

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

    transition: height .4s ease;

}







.home-page .logo img {

    height: 68px;

    width: auto;

    max-width: 170px;

    object-fit: contain;

    display: block;

    transition: height .4s ease;

}



@media(max-width:560px) {

    .logo img {

        height: 34px;

    }

}



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

NAVIGATION

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

.home-page .navbar ul {

    display: flex;

    gap: 42px;

    list-style: none;

}



.home-page .navbar a {

    position: relative;

    text-decoration: none;

    color: #111;

    font-size: 15px;

    font-weight: 500;

    transition: .35s;

}



.home-page .navbar a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    background: #24A3D8;

    transition: .35s;

}



.home-page .navbar a:hover {

    color: #24A3D8;

}



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

    width: 100%;

}



.home-page .navbar a.active {

    color: #24A3D8;

}



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

    width: 100%;

}



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

HEADER RIGHT / BUTTON

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

.home-page .header-right {

    display: flex;

    align-items: center;

    gap: 18px;

}



.home-page .contact-btn {

    position: relative;

    overflow: hidden;

    width: 170px;

    height: 54px;

    border-radius: 100px;

    background: #111;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    text-decoration: none;

    font-weight: 600;

    transition: .4s;

}



.home-page .contact-btn span {

    position: relative;

    z-index: 2;

}



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

    content: "";

    position: absolute;

    inset: 0;

    background: #F1CA03;

    transform: translateY(100%);

    transition: .45s ease;

}



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

    transform: translateY(0);

}



.home-page .contact-btn:hover {

    color: #111;

    transform: translateY(-4px);

}



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

MOBILE MENU BUTTON

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

.home-page .menu-btn {

    width: 54px;

    height: 54px;

    border: none;

    border-radius: 50%;

    background: #111;

    display: none;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 6px;

    cursor: pointer;

    flex-shrink: 0;

}



.home-page .menu-btn span {

    width: 22px;

    height: 2px;

    background: #fff;

    transition: .4s;

}



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

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

}



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

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

}



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

MOBILE MENU

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

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

filter / backdrop-filter / transform creates a new containing

block for descendant position:fixed elements — trapping them

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

was why the menu previously rendered as a tiny black rectangle

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

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

.header wrapper) fixes it.

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

.home-page .mobile-menu {

    position: fixed;

    inset: 0;

    background: #111;

    display: flex;

    justify-content: flex-start;

    align-items: center;

    opacity: 0;

    visibility: hidden;

    transition: .5s;

    z-index: 1;

    overflow-y: auto;

    padding: 110px 24px 50px;

}



.home-page .mobile-menu.active {

    opacity: 1;

    visibility: visible;

}



.home-page .mobile-menu ul {

    list-style: none;

    text-align: center;

    width: 100%;

    margin: auto;

}



.home-page .mobile-menu li {

    margin: 22px 0;

}



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

   every link stays reachable without needing to scroll */

@media(max-height:700px) {

    .mobile-menu {

        padding: 90px 24px 30px;

    }



    .mobile-menu li {

        margin: 14px 0;

    }



    .mobile-menu a {

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

    }



    .mobile-menu li:last-child a {

        padding: 10px 26px;

        margin-top: 10px;

        font-size: 16px;

    }

}



.home-page .mobile-menu a {

    color: #fff;

    text-decoration: none;

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

    font-weight: 700;

    transition: .3s;

}



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

    color: #24A3D8;

}



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

    display: inline-flex;

    margin-top: 20px;

    padding: 14px 32px;

    border-radius: 100px;

    background: #24A3D8;

    font-size: 18px;

}



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

RESPONSIVE — HEADER

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

@media(max-width:1100px) {

    .navbar {

        display: none;

    }



    .menu-btn {

        display: flex;

    }



    .contact-btn {

        display: none;

    }

}



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

HERO

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

.home-page .hero {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    background: #F8F8F8;

    display: flex;

    align-items: center;

    padding: 150px 0 100px;

}



.home-page .hero-grid {

    position: absolute;

    inset: 0;

    background-image:

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

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

    background-size: 70px 70px;

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

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

}



.home-page .outline-title {

    position: absolute;

    bottom: -40px;

    left: 50%;

    transform: translateX(-50%);

    font-size: 17vw;

    font-weight: 900;

    color: transparent;

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

    white-space: nowrap;

    pointer-events: none;

    z-index: 1;

}



.home-page .hero-container {

    width: min(92%, 1450px);

    margin: auto;

    display: grid;

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

    gap: 90px;

    align-items: center;

    position: relative;

    z-index: 5;

}



.home-page .hero-tag {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    letter-spacing: 5px;

    font-size: 13px;

    font-weight: 600;

    color: #24A3D8;

}



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

    content: "";

    width: 60px;

    height: 2px;

    background: #F1CA03;

}



.home-page .hero h1 {

    margin-top: 35px;

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

    line-height: .95;

    font-weight: 900;

    color: #111;

}



.home-page .hero h1 span {

    display: block;

    color: #24A3D8;

}



.home-page .hero p {

    max-width: 500px;

    width: 100%;

    margin-top: 35px;

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

    line-height: 1.8;

    color: #666;

}



.home-page .hero-action {

    display: flex;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 45px;

}



.home-page .start-btn {

    background: #111;

    color: #fff;

    padding: 20px 42px;

    border-radius: 60px;

    text-decoration: none;

    font-weight: 600;

    transition: .4s;

    display: inline-block;

}



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

PREMIUM CAMERA ZOOM EFFECT

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



.home-page .camera-wrapper {

    position: relative;

    width: 100%;

    height: 100%;

    perspective: 2500px;

    overflow: visible;

}



.home-page .zoom-target {

    position: relative;

    cursor: pointer;

    transform-origin: center center;

    will-change: transform;

    transition: none;

    z-index: 20;

}



/* Overlay */



.home-page .zoom-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg,

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

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

    z-index: 2;

    pointer-events: none;

}



/* Image */



.home-page .zoom-target img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



/* Fullscreen Mode */



.home-page .zoom-target.fullscreen {



    position: fixed;



    top: 0;

    left: 0;



    width: 100vw;

    height: 100vh;



    margin: 0;



    border-radius: 0;



    z-index: 999999;



    overflow: hidden;



    box-shadow: none;



    transform: none;



}



/* Premium Shadow */



.home-page .zoom-target {



    box-shadow:



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



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



}



/* Hover */



.home-page .zoom-target:hover {



    box-shadow:



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



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



}



/* Smooth Border Radius */



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



    border-radius: 28px;



}



/* Background Fade */



.home-page .hero-transition {



    position: fixed;



    inset: 0;



    background: #000;



    opacity: 0;



    pointer-events: none;



    z-index: 999990;



}



/* Hero Fade */



.home-page .hero-fade {



    transition: opacity .6s ease,



        transform .6s ease;



}



/* Hide During Animation */



.home-page .hero-hidden {



    opacity: 0;



    transform: translateY(-60px);



    pointer-events: none;



}



/* Disable Clicking */



.home-page .zooming {



    pointer-events: none;



}



/* Improve GPU Rendering */



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



    transform: translateZ(0);



    backface-visibility: hidden;



}



/* Better Performance */



.home-page .hero {



    isolation: isolate;



}



/* Cursor */



.home-page .zoom-target {



    cursor: zoom-in;



}



.home-page .zoom-target:active {



    cursor: grabbing;



}



/* Mobile */



@media(max-width:768px) {



    .zoom-target {



        border-radius: 20px;



    }



    .zoom-target img {



        border-radius: 20px;



    }



}





.home-page .start-btn:hover {

    background: #24A3D8;

    transform: translateY(-4px);

}



.home-page .watch-btn {

    color: #111;

    text-decoration: none;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    transition: .3s;

}



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

    content: "▶";

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    border-radius: 50%;

    border: 2px solid #111;

    font-size: 13px;

    transition: .3s;

}



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

    background: #111;

    color: #fff;

}



.home-page .hero-visual {

    position: relative;

}



.home-page .hero-showcase {

    position: relative;

    display: block;

    height: min(620px, 68vh);

    overflow: hidden;

    border-radius: 32px;

    transform: rotate(-4deg);

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

    background: #111;

    isolation: isolate;

}



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

    content: "";

    position: absolute;

    z-index: 3;

    left: 0;

    width: 100%;

    height: 20%;

    pointer-events: none;

}



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

    top: 0;

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

}



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

    bottom: 0;

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

}



.home-page .visual-track {

    display: flex;

    flex-direction: column;

    gap: 16px;

    padding: 16px;

    animation: galleryScroll 20s linear infinite;

}



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

    animation-play-state: paused;

}



.home-page .visual-card {

    position: relative;

    display: block;

    overflow: hidden;

    border-radius: 20px;

    height: 260px;

    flex: none;

    text-decoration: none;

    color: #fff;

}



.home-page .visual-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .55s ease;

}



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

    content: "";

    position: absolute;

    inset: 0;

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

}



.home-page .visual-card span {

    position: absolute;

    z-index: 2;

    left: 20px;

    bottom: 17px;

    font-size: 17px;

    font-weight: 700;

    letter-spacing: .04em;

}



.home-page .visual-card small {

    display: block;

    margin-top: 2px;

    color: #d5f4ff;

    font-size: 11px;

    letter-spacing: .18em;

}



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

    transform: scale(1.08);

}



.home-page .gallery-note {

    position: absolute;

    z-index: 4;

    right: 18px;

    top: 18px;

    border-radius: 100px;

    padding: 9px 14px;

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

    color: #111;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .1em;

}



@keyframes galleryScroll {

    from {

        transform: translateY(0)
    }



    to {

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

}



.home-page .image-card {

    position: relative;

    border-radius: 28px;

    overflow: hidden;

    aspect-ratio: 4/5;

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

    transform: rotate(-5deg);

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

    transition: transform .1s ease-out;

}



.home-page .image-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.home-page .badge {

    position: absolute;

    background: #fff;

    color: #111;

    font-size: 13px;

    font-weight: 700;

    padding: 12px 22px;

    border-radius: 100px;

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

}



.home-page .badge.top {

    top: 26px;

    left: -18px;

}



.home-page .badge.bottom {

    bottom: 26px;

    right: -18px;

    background: #F1CA03;

}



.home-page .scroll-down {

    position: absolute;

    left: 50%;

    bottom: 36px;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    font-size: 10px;

    letter-spacing: 3px;

    color: #999;

    z-index: 5;

}



.home-page .scroll-down span {

    width: 1px;

    height: 36px;

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

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

}



@keyframes scrollPulse {

    0% {

        opacity: 0;

        transform: scaleY(0);

        transform-origin: top;

    }



    50% {

        opacity: 1;

        transform: scaleY(1);

        transform-origin: top;

    }



    100% {

        opacity: 0;

        transform: scaleY(1);

        transform-origin: bottom;

    }

}



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

SERVICES

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

.home-page .services {

    padding: 140px 0;

    background: #fff;

}



.home-page .services-header {

    width: min(92%, 1400px);

    margin: 0 auto 90px;

}



.home-page .section-tag {

    display: inline-block;

    font-size: 13px;

    letter-spacing: 4px;

    color: #24A3D8;

    font-weight: 600;

    text-transform: uppercase;

}



.home-page .section-title {

    margin-top: 20px;

    font-size: 62px;

    line-height: 1.05;

    font-weight: 800;

    color: #111;

}



.home-page .section-title span {

    display: block;

    color: #F1CA03;

}



.home-page .services-list {

    width: min(92%, 1400px);

    margin: auto;

}



.home-page .service-item {

    position: relative;

    display: grid;

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

    align-items: center;

    gap: 30px;

    padding: 38px 0;

    border-top: 1px solid #ddd;

    cursor: pointer;

    transition: .45s;

    text-decoration: none;

    color: inherit;

}



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

    border-bottom: 1px solid #ddd;

}



.home-page .service-number {

    font-size: 20px;

    font-weight: 700;

    color: #999;

    transition: .45s;

}



.home-page .service-content h3 {

    font-size: 36px;

    font-weight: 700;

    color: #111;

    margin-bottom: 8px;

    transition: .45s;

}



.home-page .service-content p {

    max-width: 420px;

    color: #666;

    line-height: 1.8;

    font-size: 18px;

}



.home-page .service-image {

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

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

    border-radius: 18px;

    overflow: hidden;

    transform: scale(.86);

    transform-origin: center right;

    opacity: 0;

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

    justify-self: end;

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

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

}



.home-page .service-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s;

}



.home-page .service-arrow {

    font-size: 38px;

    color: #111;

    transition: .4s;

    text-align: right;

}



.home-page .service-item:hover {

    background: #111;

    padding-left: 30px;

    padding-right: 10px;

}



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

    color: #F1CA03;

}



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

    color: #fff;

}



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

    color: #ddd;

}



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

    opacity: 1;

    transform: scale(1);

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

}



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

    transform: scale(1.08);

}



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

    color: #24A3D8;

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

}



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

ABOUT

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

.home-page .about {

    padding: 140px 0;

    background: #F8F8F8;

}



.home-page .about-grid {

    width: min(92%, 1450px);

    margin: auto;

    display: grid;

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

    gap: 60px;

    align-items: center;

}



.home-page .about-tag {

    display: inline-block;

    color: #24A3D8;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 4px;

    margin-bottom: 25px;

}



.home-page .about-left h2 {

    font-size: 62px;

    line-height: 1.05;

    font-weight: 800;

    color: #111;

}



.home-page .about-left h2 span {

    display: block;

    color: #F1CA03;

}



.home-page .about-left p {

    margin-top: 35px;

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

    line-height: 1.9;

    color: #666;

    max-width: 520px;

}



.home-page .about-btn {

    margin-top: 45px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 170px;

    height: 58px;

    border-radius: 50px;

    text-decoration: none;

    background: #111;

    color: #fff;

    font-weight: 600;

    transition: .4s;

}



.home-page .about-btn:hover {

    background: #24A3D8;

}



.home-page .about-image {

    position: relative;

}



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

    width: 100%;

    aspect-ratio: 3/4;

    border-radius: 35px;

    display: block;

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

}



.home-page .experience-card {

    position: absolute;

    bottom: 35px;

    left: -30px;

    background: #fff;

    padding: 26px 30px;

    border-radius: 22px;

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

}



.home-page .experience-card h3 {

    font-size: 48px;

    color: #24A3D8;

}



.home-page .experience-card span {

    color: #666;

    font-size: 14px;

}



.home-page .about-right {

    display: flex;

    flex-direction: column;

    gap: 28px;

}



.home-page .stat {

    padding: 30px;

    background: #fff;

    border-radius: 22px;

    transition: .35s;

}



.home-page .stat h2 {

    font-size: 40px;

    color: #111;

}



.home-page .stat p {

    margin-top: 8px;

    color: #666;

    line-height: 1.6;

    font-size: 15px;

}



.home-page .stat:hover {

    transform: translateX(15px);

    background: #111;

}



.home-page .stat:hover h2 {

    color: #F1CA03;

}



.home-page .stat:hover p {

    color: #fff;

}



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

PROCESS — SCROLL STORY

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .home-page .process-right {
        height: 68vh;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .home-page .timeline-item span {
        font-size: 14px;
    }
}

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

CLIENTS

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

.home-page .clients {

    padding: 40px 0;

    background: #fafafa;

    overflow: hidden;

}



.home-page .clients-header {

    width: min(92%, 1400px);
    margin: 10px auto 60px;
    text-align: center;

}



.home-page .clients-header h2 {

    font-size: 70px;

    font-weight: 800;

    line-height: 1.05;

}



.home-page .clients-header h2 span {

    color: #24A3D8;

}



.home-page .marquee {

    overflow: hidden;

    margin: 30px 0;

}



.home-page .marquee-track {

    display: flex;

    width: max-content;

    animation: scrollLeft 28s linear infinite;

}



.home-page .reverse .marquee-track {

    animation: scrollRight 28s linear infinite;

}



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

    animation-play-state: paused;

}



.home-page .logo-item {

    font-size: 60px;

    font-weight: 800;

    color: #111;

    margin-right: 80px;

    transition: .4s;

    cursor: pointer;

}



.home-page .logo-item:hover {

    color: #24A3D8;

    transform: scale(1.08);

}



@keyframes scrollLeft {

    from {

        transform: translateX(0);

    }



    to {

        transform: translateX(-50%);

    }

}



@keyframes scrollRight {

    from {

        transform: translateX(-50%);

    }



    to {

        transform: translateX(0);

    }

}



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

TESTIMONIAL

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

.home-page .testimonial {

    position: relative;

    padding: 140px 0;

    background: #111;

    color: #fff;

    overflow: hidden;

}



.home-page .quote-icon {

    position: absolute;

    top: 20px;

    left: 50%;

    transform: translateX(-50%);

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

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

    font-weight: 700;

    pointer-events: none;

}



.home-page .testimonial-slider {

    width: min(90%, 1100px);

    margin: auto;

    position: relative;

}



.home-page .testimonial-item {

    display: none;

    text-align: center;

}



.home-page .testimonial-item.active {

    display: block;

}



.home-page .testimonial-item h2 {

    font-size: 58px;

    line-height: 1.3;

    font-weight: 600;

}



.home-page .author {

    margin-top: 55px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 16px;

}



.home-page .author-avatar {

    width: 60px;

    height: 60px;

    border-radius: 50%;

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

    flex-shrink: 0;

}



.home-page .author h4 {

    font-size: 19px;

}



.home-page .author span {

    color: #999;

    font-size: 14px;

}



.home-page .testimonial-nav {

    display: flex;

    justify-content: center;

    gap: 16px;

    margin-top: 60px;

}



.home-page .dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #555;

    cursor: pointer;

    transition: .4s;

    border: none;

    padding: 0;

}



.home-page .dot.active {

    background: #F1CA03;

    transform: scale(1.4);

}



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

CTA

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

.home-page .cta {

    position: relative;

    padding: 160px 0;

    background: #F8F8F8;

    overflow: hidden;

}



.home-page .cta-background {

    position: absolute;

    left: 50%;

    top: 50%;

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

    font-size: 18vw;

    font-weight: 900;

    color: transparent;

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

    white-space: nowrap;

    pointer-events: none;

}



.home-page .cta-content {

    width: min(90%, 1000px);

    margin: auto;

    text-align: center;

    position: relative;

    z-index: 5;

}



.home-page .cta h2 {

    margin-top: 30px;

    font-size: 70px;

    line-height: .9;

    font-weight: 900;

    color: #111;

}



.home-page .cta h2 span {

    display: block;

    color: #24A3D8;

}



.home-page .cta p {

    width: min(700px, 90%);

    margin: 35px auto;

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

    line-height: 1.8;

    color: #666;

}



.home-page .cta-circle {

    width: 150px;

    height: 150px;

    margin: 60px auto;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #111;

    color: #fff;

    text-decoration: none;

    font-weight: 600;

    text-align: center;

    transition: .45s;

}



.home-page .cta-circle:hover {

    background: #F1CA03;

    color: #111;

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

}



.home-page .cta-email {

    display: inline-block;

    margin-top: 20px;

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

    text-decoration: none;

    color: #24A3D8;

    transition: .3s;

    word-break: break-word;

}



.home-page .cta-email:hover {

    letter-spacing: 2px;

}



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

FOOTER

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

.home-page .footer {

    background: #111;

    color: #999;

    padding: 60px 0 30px;

    text-align: center;

    overflow: hidden;

}



.home-page .footer-tag {

    display: inline-block;

    color: #F1CA03;

    font-size: 13px;

    letter-spacing: 4px;

    font-weight: 600;

}



.home-page .footer h2 {

    margin-top: 26px;

    font-size: 60px;

    line-height: .95;

    font-weight: 900;

}



.home-page .footer h2 span {

    display: block;

    color: #24A3D8;

}



.home-page .footer-logo {

    margin: 90px 0 60px;

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

    font-weight: 900;

    color: transparent;

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

    letter-spacing: 6px;

}



.home-page .footer-links {

    display: flex;

    justify-content: center;

    gap: 40px;

    flex-wrap: wrap;

    margin-bottom: 55px;

    padding: 0 20px;

}



.home-page .footer-links a {

    text-decoration: none;

    color: #fff;

    /*font-size: 25px;*/

    transition: .3s;

}



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

    color: #24A3D8;

}



.home-page .footer-contact {

    display: flex;

    justify-content: center;

    gap: 35px;

    flex-wrap: wrap;

    margin-bottom: 55px;

    padding: 0 20px;

}



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

    color: #aaa;

    text-decoration: none;

    font-size: 16px;

}



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

    color: #F1CA03;

}



.home-page .footer-social {

    display: flex;

    justify-content: center;

    gap: 30px;

    flex-wrap: wrap;
	
	margin-top:30px;

    margin-bottom: 30px;

    padding: 0 20px;

}



.home-page .footer-social a {

    color: #fff;

    text-decoration: none;

    font-size: 15px;

    position: relative;

}



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

    content: "";

    position: absolute;

    left: 0;

    bottom: -6px;

    width: 0;

    height: 2px;

    background: #24A3D8;

    transition: .35s;

}



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

    width: 100%;

}



.home-page .footer-bottom {

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

    padding-top: 30px;

    color: #777;

    font-size: 14px;

}



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

RESPONSIVE — GLOBAL BREAKPOINTS

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



/* Large tablets / small laptops */

@media(max-width:1200px) {

    .about-grid {

        grid-template-columns: 1fr 1fr;

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

    }



    .about-left {

        grid-area: left;

    }



    .about-image {

        grid-area: image;

    }



    .about-right {

        grid-area: stats;

        flex-direction: row;

        flex-wrap: wrap;

    }



    .about-right .stat {

        flex: 1 1 150px;

    }



    .process-container {

        grid-template-columns: 320px 1fr;

        gap: 50px;

    }

}



/* Tablets */

@media(max-width:900px) {

    .hero {

        padding: 140px 0 80px;

    }



    .hero-container {

        grid-template-columns: 1fr;

        gap: 60px;

    }



    .hero-visual {

        max-width: 420px;

        margin: 0 auto;

        width: 100%;

    }



    .hero-showcase {

        height: 500px;

        transform: rotate(-2deg);

    }



    .hero p {

        max-width: 100%;

    }



    .services {

        padding: 100px 0;

    }



    .services-header {

        margin-bottom: 60px;

    }



    .service-item {

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

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

        column-gap: 20px;

        row-gap: 6px;

    }



    .service-number {

        grid-area: num;

    }



    .service-content {

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

    }



    .service-content p {

        max-width: 100%;

    }



    .service-image {

        display: none;

    }



    .service-arrow {

        grid-area: arrow;

        align-self: center;

        font-size: 28px;

    }



    .about {

        padding: 100px 0;

    }



    .about-grid {

        grid-template-columns: 1fr;

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

        gap: 40px;

    }



    .about-image {

        max-width: 420px;

        margin: 0 auto;

        width: 100%;

    }



    .about-right {

        flex-direction: row;

    }



    .experience-card {

        left: 16px;

        bottom: 16px;

        padding: 18px 20px;

    }



    .experience-card h3 {

        font-size: 34px;

    }



    .process {

        padding: 100px 0;

    }



    .process-container {

        grid-template-columns: 1fr;

        gap: 40px;

    }



    .process-left {

        position: static;

    }



    .timeline {

        display: flex;

        gap: 22px;

        padding-left: 0;

        overflow-x: auto;

        padding-bottom: 10px;

    }



    .timeline-line {

        display: none;

    }



    .timeline-item {

        margin-bottom: 0;

    }



    .timeline-item::before {

        position: static;

        display: inline-flex;

        margin-right: 8px;

        vertical-align: middle;

    }



    .process-right {

        gap: 70px;

    }



    .step {

        min-height: auto;

    }



    .clients {

        padding: 100px 0;

    }



    .testimonial {

        padding: 100px 0;

    }



    .cta {

        padding: 120px 0;

    }



    .footer {

        padding: 100px 0 40px;

    }



    .footer-logo {

        margin: 70px 0 50px;

    }

}



/* Phones */

@media(max-width:560px) {

    .header {

        top: 12px;

    }



    .header-container {

        height: 70px;

        padding: 0 18px;

        border-radius: 18px;

    }



    .logo {

        font-size: 18px;

    }



    .menu-btn {

        width: 46px;

        height: 46px;

    }



    .hero {

        padding: 120px 0 60px;

    }



    .hero-action {

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

    }



    .start-btn {

        width: 100%;

        text-align: center;

    }



    .outline-title {

        display: none;

    }



    .badge {

        font-size: 11px;

        padding: 9px 16px;

    }



    .badge.top {

        left: -8px;

        top: 16px;

    }



    .badge.bottom {

        right: -8px;

        bottom: 16px;

    }



    .services-list .service-item {

        padding: 28px 0;

    }



    .service-content h3 {

        font-size: 24px;

    }



    .about-right {

        flex-direction: column;

    }



    .experience-card {

        position: static;

        margin-top: 20px;

        display: inline-block;

    }



    .cta-circle {

        width: 120px;

        height: 120px;

        font-size: 14px;

    }



    .footer-links,

    .footer-contact,

    .footer-social {

        gap: 22px;

    }

}



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

FAQ

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

.home-page .faq {

    padding: 140px 0;

    background: #fff;

}



.home-page .faq-wrap {

    width: min(92%, 1180px);

    margin: auto;

    display: grid;

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

    gap: 80px;

    align-items: start;

}



.home-page .faq-intro {

    position: sticky;

    top: 140px;

}



.home-page .faq-intro h2 {

    font-size: 66px;
    ;

    line-height: .95;

    margin-top: 20px;

}



.home-page .faq-intro h2 span {

    color: #24A3D8;

}



.home-page .faq-list {

    border-top: 1px solid #ddd;

}



.home-page .faq-item {

    border-bottom: 1px solid #ddd;

    padding: 0;

}



.home-page .faq-item summary {

    list-style: none;

    cursor: pointer;

    padding: 27px 42px 27px 0;

    font-size: 20px;

    font-weight: 650;

    position: relative;

}



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

    display: none;

}



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

    content: "+";

    position: absolute;

    right: 2px;

    top: 19px;

    font-size: 35px;

    font-weight: 300;

    color: #24A3D8;

    transition: .3s;

}



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

    transform: rotate(45deg);

    color: #F1CA03;

}



.home-page .faq-item p {

    padding: 0 45px 28px 0;

    color: #666;

    font-size: 17px;

    line-height: 1.8;

}



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

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

    padding-left: 22px;

}



@media(max-width:900px) {

    .faq {

        padding: 100px 0;

    }



    .faq-wrap {

        grid-template-columns: 1fr;

        gap: 38px;

    }



    .faq-intro {

        position: static;

    }



    .faq-item summary {

        font-size: 20px;

    }



    .faq-item p {

        padding-right: 15px;

    }

}


/* Livasys alignment + contact consistency pass */
*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    max-width: 100%;
}

.contact-layout {
    align-items: start;
}

.contact-info {
    min-width: 0;
}

.contact-heading {
    margin: 22px 0 30px;
    font-size: clamp(42px, 6vw, 80px);
    line-height: .95;
    letter-spacing: -.06em;
}

.contact-offices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 28px;
}

.contact-office {
    padding: 24px;
    border: 1px solid rgba(16, 17, 19, .12);
    border-radius: 18px;
    background: rgba(255, 255, 255, .55);
    min-width: 0;
}

.contact-office h2 {
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 1.15;
}

.contact-office h2 span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    opacity: .65;
    margin-top: 5px;
}

.contact-office p {
    margin: 0 0 12px;
    color: #666;
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.contact-office a {
    display: block;
    font-size: 17px;
    font-weight: 700;
    margin: 6px 0 0;
    overflow-wrap: anywhere;
}

.contact-email-office a {
    font-size: 16px;
}

.footer-contact-grid {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 36px auto 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    text-align: left;
}

.footer-contact-grid>div {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.footer-contact-grid strong {
    font-size: 17px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #24a3d8;
}

.footer-contact-grid span,
.footer-contact-grid a {
    color: inherit;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.footer-contact-grid span {
    color: #999;
    font-size: 16px;
}

.footer-contact-grid a {
    font-size: 14px;
    font-weight: 700;
}

@media (max-width: 1000px) {
    .contact-offices {
        grid-template-columns: 1fr 1fr;
    }

    .footer-contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .contact-offices {
        grid-template-columns: 1fr;
    }

    .footer-contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-office {
        padding: 20px;
    }
}

/* =========================================================
   SERVICE DETAIL PAGES
   ========================================================= */
.service-detail-page {
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 20px
}

.service-detail-section {
    padding: 56px 0;
    border-top: 1px solid rgba(0, 0, 0, .12)
}

.service-detail-section h2 {
    max-width: 780px;
    margin: 0 0 18px;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.08
}

.service-detail-section p {
    max-width: 820px;
    font-size: 18px;
    line-height: 1.8;
    margin: 0
}

.service-faq details {
    border-top: 1px solid rgba(0, 0, 0, .12);
    padding: 20px 0
}

.service-faq details:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, .12)
}

.service-faq summary {
    cursor: pointer;
    font-size: 20px;
    font-weight: 600
}

.service-faq details p {
    font-size: 16px;
    margin-top: 14px
}

.service-related {
    padding: 50px 0 10px
}

.service-related p {
    font-size: 18px;
    line-height: 1.7
}

.service-related a {
    font-weight: 600;
    text-decoration: underline
}

.service2 h2 a {
    color: inherit;
    text-decoration: none
}

@media(max-width:700px) {
    .service-detail-section {
        padding: 38px 0
    }

    .service-detail-section p,
    .service-related p {
        font-size: 16px;
        line-height: 1.7
    }

    .service-faq summary {
        font-size: 18px
    }
}

.header-container.header-scrolled {
    height: 66px
}

.menu-open {
    overflow: hidden
}

.contact-btn {
    transform: translate(var(--mag-x, 0), var(--mag-y, 0));
}

@media(max-width:560px) {
    .header-container.header-scrolled {
        height: 58px
    }

    .header-container {
        height: 70px
    }
}

/* =========================================================
   PRIMARY NAVIGATION DROPDOWNS — RESPONSIVE / ALIGNED
   ========================================================= */
/* Keep the top-level navigation horizontal while explicitly resetting nested lists.
   The earlier generic `.home-page .navbar ul` rule also matched submenu <ul> elements,
   which caused submenu items to render in a cramped horizontal row. */
.home-page .navbar>ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.4vw, 42px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-page .navbar>ul>li {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.home-page .navbar>ul>li>a {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.home-page .navbar>ul>li.has-dropdown>a::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 0 3px 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .22s ease;
    order: 2;
    flex: 0 0 auto;
}

.home-page .navbar>ul>li.has-dropdown:hover>a::before,
.home-page .navbar>ul>li.has-dropdown:focus-within>a::before,
.home-page .navbar>ul>li.has-dropdown.dropdown-open>a::before {
    transform: rotate(225deg) translate(-1px, -1px);
}

/* Desktop dropdowns: centered directly below their parent, with a clean 2-column grid. */
.home-page .navbar>ul>li>ul.dropdown-menu {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translate(-50%, 8px);
    width: min(420px, calc(100vw - 32px));
    min-width: 320px;
    padding: 10px;
    margin: 0;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    align-items: stretch;
    list-style: none;
    background: rgba(255, 255, 255, .985);
    border: 1px solid rgba(16, 17, 19, .10);
    border-radius: 16px;
    box-shadow: 0 22px 45px rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 2000;
}

/* Invisible hover bridge prevents the menu from closing while the cursor moves from the
   parent item to the dropdown across the small visual gap. */
.home-page .navbar>ul>li.has-dropdown::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -13px;
    width: 110px;
    height: 14px;
    transform: translateX(-50%);
}

.home-page .navbar>ul>li.has-dropdown:hover>ul.dropdown-menu,
.home-page .navbar>ul>li.has-dropdown:focus-within>ul.dropdown-menu,
.home-page .navbar>ul>li.has-dropdown.dropdown-open>ul.dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.home-page .navbar>ul>li>ul.dropdown-menu>li {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-page .navbar>ul>li>ul.dropdown-menu>li>a {
    display: flex;
    align-items: center;
    min-height: 52px;
    width: 100%;
    padding: 10px 13px;
    border-radius: 10px;
    white-space: normal;
    font-size: 13px;
    line-height: 1.35;
    color: #111;
}

.home-page .navbar>ul>li>ul.dropdown-menu>li>a::after {
    display: none;
}

.home-page .navbar>ul>li>ul.dropdown-menu>li>a:hover,
.home-page .navbar>ul>li>ul.dropdown-menu>li>a:focus-visible {
    background: rgba(36, 163, 216, .09);
    color: #111;
}

/* Mobile: the desktop dropdown is disabled completely; submenus become accessible
   accordions inside the full-screen mobile navigation. */
.mobile-menu .has-dropdown>a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.mobile-menu .has-dropdown>a::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .22s ease;
}

.mobile-menu .has-dropdown.dropdown-open>a::after {
    transform: rotate(225deg) translate(-1px, -1px);
}

.mobile-menu .dropdown-menu {
    display: none;
    width: min(92vw, 430px);
    list-style: none;
    padding: 10px 12px 4px;
    margin: 4px auto 0;
    border-left: 1px solid rgba(255, 255, 255, .18);
    border-right: 1px solid rgba(255, 255, 255, .18);
}

.mobile-menu .has-dropdown.dropdown-open>.dropdown-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
}

.mobile-menu .dropdown-menu li {
    margin: 0 !important;
}

.mobile-menu .dropdown-menu a {
    display: block;
    padding: 8px 10px;
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1.3;
    text-align: left;
    opacity: .9;
}

.mobile-menu .dropdown-menu a::after {
    display: none;
}

@media (min-width: 901px) and (max-width: 1180px) {
    .home-page .header-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .home-page .logo img {
        max-width: 145px;
    }

    .home-page .navbar>ul {
        gap: 16px;
    }

    .home-page .navbar a {
        font-size: 16px;
    }

    .home-page .contact-btn {
        width: 145px;
        height: 50px;
    }
}

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

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


/* =========================================================
   SITE-WIDE HEADER — same visual header as homepage
   ========================================================= */
.site-header {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: .5s ease;
}

.site-header .header-container {
    position: relative;
    z-index: 2;
    width: min(94%, 1450px);
    height: 82px;
    padding: 0 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 22px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
    transition: height .4s ease;
}

.site-header .logo {
    display: block;
    flex: 0 0 auto;
}

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

.site-header .navbar>ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.4vw, 42px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header .navbar>ul>li {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.site-header .navbar>ul>li>a {
    position: relative;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    color: #111;
    font-size: 16px;
    font-weight: 500;
    transition: .35s;
}

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

.site-header .navbar>ul>li>a:hover,
.site-header .navbar>ul>li>a.active {
    color: #24A3D8;
}

.site-header .navbar>ul>li>a:hover::after,
.site-header .navbar>ul>li>a.active::after {
    width: 100%;
}

.site-header .navbar>ul>li.has-dropdown>a::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 0 3px 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .22s ease;
    order: 2;
    flex: 0 0 auto;
}

.site-header .navbar>ul>li.has-dropdown:hover>a::before,
.site-header .navbar>ul>li.has-dropdown:focus-within>a::before,
.site-header .navbar>ul>li.has-dropdown.dropdown-open>a::before {
    transform: rotate(225deg) translate(-1px, -1px);
}

.site-header .navbar>ul>li.has-dropdown::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -13px;
    width: 110px;
    height: 14px;
    transform: translateX(-50%);
}

.site-header .navbar>ul>li>ul.dropdown-menu {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translate(-50%, 8px);
    width: min(420px, calc(100vw - 32px));
    min-width: 320px;
    padding: 10px;
    margin: 0;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    align-items: stretch;
    list-style: none;
    background: rgba(255, 255, 255, .985);
    border: 1px solid rgba(16, 17, 19, .10);
    border-radius: 16px;
    box-shadow: 0 22px 45px rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 2000;
}

.site-header .navbar>ul>li.has-dropdown:hover>ul.dropdown-menu,
.site-header .navbar>ul>li.has-dropdown:focus-within>ul.dropdown-menu,
.site-header .navbar>ul>li.has-dropdown.dropdown-open>ul.dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.site-header .navbar>ul>li>ul.dropdown-menu>li {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header .navbar>ul>li>ul.dropdown-menu>li>a {
    display: flex;
    align-items: center;
    min-height: 52px;
    width: 100%;
    padding: 10px 13px;
    border-radius: 10px;
    white-space: normal;
    font-size: 16px;
    line-height: 1.35;
    color: #111;
}

.site-header .navbar>ul>li>ul.dropdown-menu>li>a::after {
    display: none;
}

.site-header .navbar>ul>li>ul.dropdown-menu>li>a:hover,
.site-header .navbar>ul>li>ul.dropdown-menu>li>a:focus-visible {
    background: rgba(36, 163, 216, .09);
    color: #111;
}

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

.site-header .contact-btn {
    width: 170px;
    height: 54px;
    border-radius: 100px;
    background: #111;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

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

@media (min-width:901px) and (max-width:1180px) {
    .site-header .header-container {
        padding-left: 20px;
        padding-right: 20px
    }

    .site-header .logo img {
        max-width: 145px
    }

    .site-header .navbar>ul {
        gap: 16px
    }

    .site-header .navbar>ul>li>a {
        font-size: 13px
    }

    .site-header .contact-btn {
        width: 145px;
        height: 50px
    }
}

@media (max-width:900px) {
    .site-header .header-container {
        width: min(94%, 1450px)
    }
}

@media (max-width:560px) {
    .site-header {
        top: 12px
    }

    .site-header .header-container {
        height: 70px;
        padding: 0 18px;
        border-radius: 18px
    }

    .site-header .logo img {
        height: 34px;
        max-width: 120px
    }

    .site-header .contact-btn {
        width: 46px;
        height: 46px;
        padding: 0;
        font-size: 0
    }

    .site-header .contact-btn span {
        display: none
    }
}

/* =========================================================
   CONTACT PAGE ALIGNMENT
   ========================================================= */
.contact-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
    gap: 56px;
    align-items: stretch
}

.contact-layout>.contact-info,
.contact-layout>.form {
    height: 100%
}

.contact-info {
    padding: 0;
    display: flex;
    flex-direction: column
}

.contact-heading {
    margin: 0 0 26px
}

.contact-offices {
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch
}

.contact-office {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.contact-office a:last-child {
    margin-bottom: 0
}

.contact-layout>.form {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 34px
}

.contact-layout>.form .form-actions {
    margin-top: 4px
}

.contact-layout>.form .form-status {
    margin: 0
}

@media(max-width:1050px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 38px
    }

    .contact-layout>.form {
        min-height: 0
    }

    .contact-offices {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:700px) {
    .contact-layout {
        gap: 28px
    }

    .contact-offices {
        grid-template-columns: 1fr
    }

    .contact-layout>.form {
        padding: 24px
    }
}


/* Contact form textarea enhancement */
.contact-page .form textarea {
    width: 100%;
    min-height: 150px;
    resize: vertical;
    font: inherit;
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    background: #1b1b1b;
    border-radius: 12px;
    padding: 17px;
    line-height: 1.6;
}

.contact-page .form textarea::placeholder {
    color: rgba(255, 255, 255, .65);
}

.contact-page .form textarea:focus {
    outline: 2px solid #24A3D8;
    outline-offset: 2px;
}

@media(max-width:600px) {
    .contact-page .form textarea {
        min-height: 130px;
    }
}


/* Featured images for service detail pages */
.service-featured-image {
    margin: 0 0 54px;
    border-radius: 28px;
    overflow: hidden;
    background: #f2f4f5;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .10);
    aspect-ratio: 16/7
}

.service-featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media(max-width:700px) {
    .service-featured-image {
        margin-bottom: 36px;
        border-radius: 20px;
        aspect-ratio: 16/9
    }

    .service-featured-image img {
        min-height: 220px
    }
}


/* Final shared navigation dropdown fix */
.site-header .navbar>ul>li.has-dropdown {
    position: relative;
}

.site-header .navbar>ul>li.has-dropdown::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    bottom: -8px;
    height: 10px;
    width: auto;
    transform: none;
    z-index: 1999;
}

.site-header .navbar>ul>li>ul.dropdown-menu {
    top: calc(100% + 1px);
    transform: translate(-50%, 6px);
    min-width: 300px;
    max-width: calc(100vw - 28px);
    z-index: 2000;
}

.site-header .navbar>ul>li.has-dropdown:hover>ul.dropdown-menu,
.site-header .navbar>ul>li.has-dropdown:focus-within>ul.dropdown-menu,
.site-header .navbar>ul>li.has-dropdown.dropdown-open>ul.dropdown-menu {
    transform: translate(-50%, 0);
}

@media (min-width:901px) and (max-width:1100px) {
    .site-header .navbar>ul {
        gap: 12px;
    }

    .site-header .navbar>ul>li>a {
        font-size: 12px;
    }

    .site-header .navbar>ul>li>ul.dropdown-menu {
        min-width: 290px;
        width: min(390px, calc(100vw - 24px));
    }
}

@media (max-width:900px) {
    .site-header .navbar>ul>li.has-dropdown::after {
        display: none;
    }
}

@media (max-width:600px) {
    .site-header .navbar>ul>li>ul.dropdown-menu {
        min-width: 0;
        width: 100%;
        grid-template-columns: 1fr;
    }
}

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

.captcha-input {
    text-transform: uppercase;
    letter-spacing: .12em;
}


/* Contact CTA buttons: compact, title-case labels */
.form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 2px
}

.form-actions button,
.form button#email-submit,
.form button.whatsapp-submit {
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    padding: 13px 18px;
    min-height: 46px;
    white-space: nowrap
}

.form button#email-submit {
    background: #24A3D8;
    color: #fff
}

.form button.whatsapp-submit {
    background: #F1CA03;
    color: #111
}

.form button#email-submit:hover {
    background: #F1CA03;
    color: #111
}

.form button.whatsapp-submit:hover {
    background: #111;
    color: #fff
}

@media(max-width:600px) {
    .form-actions {
        grid-template-columns: 1fr
    }

    .form-actions button,
    .form button#email-submit,
    .form button.whatsapp-submit {
        font-size: 12px;
        padding: 12px 16px
    }
}

/* Lead-generation landing pages */
.landing-page {
    background: #f8f8f5;
    color: #101113
}

.landing-hero {
    padding: 145px 5% 80px;
    background: #111;
    color: #fff;
    position: relative;
    overflow: hidden
}

.landing-hero:before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 82% 15%, rgba(36, 163, 216, .28), transparent 28rem), radial-gradient(circle at 20% 100%, rgba(241, 202, 3, .16), transparent 24rem), repeating-linear-gradient(90deg, transparent 0, transparent 69px, rgba(255, 255, 255, .06) 70px)
}

.landing-hero-inner {
    max-width: 1280px;
    margin: auto;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, .68fr);
    gap: 55px;
    align-items: center
}

.landing-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #F1CA03;
    font: 700 12px/1.2 'DM Mono', monospace;
    letter-spacing: .18em;
    text-transform: uppercase
}

.landing-kicker:before {
    content: '';
    width: 42px;
    height: 1px;
    background: #F1CA03
}

.landing-hero h1 {
    font-size: clamp(48px, 7.2vw, 104px);
    line-height: .91;
    letter-spacing: -.07em;
    margin: 22px 0 22px;
    max-width: 900px
}

.landing-hero h1 em {
    font-style: normal;
    color: #F1CA03
}

.landing-hero p {
    max-width: 700px;
    color: #d7d8d3;
    font-size: 18px;
    line-height: 1.7;
    margin: 0
}

.landing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px
}

.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 750;
    transition: .25s;
    border: 1px solid transparent
}

.landing-btn-primary {
    background: #F1CA03;
    color: #111
}

.landing-btn-primary:hover {
    transform: translateY(-3px);
    background: #fff
}

.landing-btn-secondary {
    border-color: rgba(255, 255, 255, .3);
    color: #fff
}

.landing-btn-secondary:hover {
    border-color: #F1CA03;
    color: #F1CA03
}

.landing-hero-card {
    background: rgba(255, 255, 255, .96);
    color: #111;
    border-radius: 24px;
    padding: 26px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .24)
}

.landing-hero-card h2 {
    font-size: 30px;
    line-height: 1.05;
    margin: 0 0 8px;
    letter-spacing: -.04em
}

.landing-hero-card p {
    font-size: 13px;
    color: #666;
    margin: 0 0 18px;
    line-height: 1.55
}

.landing-form {
    display: grid;
    gap: 10px
}

.landing-form input,
.landing-form select,
.landing-form textarea {
    width: 100%;
    border: 1px solid #ddd;
    background: #fff;
    color: #111;
    border-radius: 11px;
    padding: 13px 14px;
    font: inherit;
    font-size: 14px;
    outline: none
}

.landing-form textarea {
    min-height: 100px;
    resize: vertical
}

.landing-form input:focus,
.landing-form select:focus,
.landing-form textarea:focus {
    border-color: #24A3D8;
    box-shadow: 0 0 0 3px rgba(36, 163, 216, .12)
}

.landing-form .captcha-field {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center
}

.landing-form .captcha-challenge {
    background: #111;
    color: #F1CA03;
    border-radius: 9px;
    padding: 11px 14px;
    font: 800 16px/1 'DM Mono', monospace;
    letter-spacing: .16em
}

.landing-form .captcha-refresh {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 9px;
    height: 42px;
    padding: 0 12px;
    cursor: pointer
}

.landing-form .captcha-help {
    grid-column: 1/-1;
    font-size: 11px;
    color: #777
}

.landing-form .form-actions {
    margin-top: 3px
}

.landing-proof {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #ddd;
    border: 1px solid #ddd;
    margin-top: 0
}

.landing-proof-item {
    background: #fff;
    padding: 28px 22px
}

.landing-proof-item strong {
    display: block;
    font-size: clamp(28px, 3.2vw, 46px);
    letter-spacing: -.06em
}

.landing-proof-item span {
    font: 10px 'DM Mono', monospace;
    letter-spacing: .12em;
    color: #777;
    text-transform: uppercase
}

.landing-section {
    max-width: 1280px;
    margin: auto;
    padding: 95px 5%
}

.landing-section-head {
    max-width: 850px
}

.landing-section-head .label {
    color: #24A3D8;
    margin-bottom: 18px
}

.landing-section-head h2 {
    font-size: clamp(38px, 5vw, 72px);
    line-height: .98;
    letter-spacing: -.06em;
    margin: 0
}

.landing-section-head h2 em {
    font-style: normal;
    color: #F1CA03
}

.landing-section-head p {
    font-size: 17px;
    line-height: 1.8;
    color: #666;
    margin-top: 22px
}

.landing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 48px
}

.landing-card {
    background: #fff;
    border: 1px solid #e3e3df;
    border-radius: 22px;
    padding: 28px;
    min-height: 230px;
    transition: .3s
}

.landing-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
    border-color: #F1CA03
}

.landing-card .num {
    font: 11px 'DM Mono', monospace;
    color: #24A3D8;
    letter-spacing: .12em
}

.landing-card h3 {
    font-size: 25px;
    line-height: 1.08;
    letter-spacing: -.04em;
    margin: 30px 0 10px
}

.landing-card p {
    color: #666;
    line-height: 1.65;
    font-size: 14px
}

.landing-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: center
}

.landing-image {
    border-radius: 28px;
    overflow: hidden;
    min-height: 470px;
    background: #111
}

.landing-image img {
    width: 100%;
    height: 100%;
    min-height: 470px;
    display: block;
    object-fit: cover
}

.landing-list {
    display: grid;
    gap: 14px;
    margin-top: 28px
}

.landing-list-item {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #ddd
}

.landing-list-item b {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #F1CA03;
    color: #111;
    font-size: 12px
}

.landing-list-item h3 {
    margin: 0 0 4px;
    font-size: 18px
}

.landing-list-item p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.6
}

.landing-dark {
    background: #111;
    color: #fff;
    max-width: none
}

.landing-dark-inner {
    max-width: 1280px;
    margin: auto
}

.landing-dark .landing-section-head p {
    color: #b9bbb6
}

.landing-dark .landing-card {
    background: #191a17;
    border-color: rgba(255, 255, 255, .1);
    color: #fff
}

.landing-dark .landing-card p {
    color: #b8b9b3
}

.landing-dark .landing-card:hover {
    border-color: #F1CA03
}

.landing-faq {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px;
    align-items: start
}

.landing-faq-list {
    border-top: 1px solid #ddd
}

.landing-faq-list details {
    border-bottom: 1px solid #ddd;
    padding: 0
}

.landing-faq-list summary {
    cursor: pointer;
    list-style: none;
    padding: 20px 45px 20px 0;
    font-size: 18px;
    font-weight: 750;
    position: relative
}

.landing-faq-list summary::-webkit-details-marker {
    display: none
}

.landing-faq-list summary:after {
    content: '+';
    position: absolute;
    right: 0;
    top: 14px;
    font-size: 26px;
    color: #24A3D8
}

.landing-faq-list details[open] summary:after {
    content: '−';
    color: #F1CA03
}

.landing-faq-list p {
    color: #666;
    line-height: 1.7;
    padding: 0 0 20px;
    margin: 0;
    font-size: 14px
}

.landing-bottom-cta {
    background: #F1CA03;
    padding: 75px 5%;
    text-align: center
}

.landing-bottom-cta h2 {
    font-size: clamp(40px, 6vw, 80px);
    line-height: .95;
    letter-spacing: -.07em;
    max-width: 1000px;
    margin: 0 auto 28px
}

.landing-bottom-cta p {
    max-width: 700px;
    margin: 0 auto 24px;
    color: #292919
}

.landing-bottom-cta .landing-btn {
    background: #111;
    color: #fff
}

.landing-bottom-cta .landing-btn:hover {
    background: #fff;
    color: #111
}

@media(max-width:900px) {

    .landing-hero-inner,
    .landing-split,
    .landing-faq {
        grid-template-columns: 1fr
    }

    .landing-hero {
        padding: 125px 6% 65px
    }

    .landing-hero-card {
        max-width: 650px
    }

    .landing-cards {
        grid-template-columns: 1fr 1fr
    }

    .landing-proof {
        grid-template-columns: 1fr 1fr
    }

    .landing-image,
    .landing-image img {
        min-height: 360px
    }
}

@media(max-width:600px) {
    .landing-hero h1 {
        font-size: clamp(44px, 14vw, 72px)
    }

    .landing-cards,
    .landing-proof {
        grid-template-columns: 1fr
    }

    .landing-section {
        padding: 70px 6%
    }

    .landing-hero-actions {
        flex-direction: column;
        align-items: stretch
    }

    .landing-btn {
        width: 100%
    }

    .landing-form .captcha-field {
        grid-template-columns: 1fr 1fr
    }

    .landing-form .captcha-challenge {
        grid-column: 1
    }

    .landing-form .captcha-refresh {
        grid-column: 2
    }

    .landing-form .captcha-input {
        grid-column: 1/-1
    }
}



.honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important
}

.landing-label-yellow {
    color: #F1CA03 !important
}

.landing-label-yellow:before {
    background: #F1CA03 !important
}


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

img,
video,
iframe {
    max-width: 100%;
}

button,
input,
select,
textarea {
    max-width: 100%;
}

/* Shared floating header */
.site-header {
    top: 20px;
    left: 0;
    width: 100%;
}

.site-header .header-container {
    width: min(94%, 1270px);
    margin: 0 auto;
    height: 82px;
    padding: 0 28px;
    border-radius: 22px;
    gap: 18px;
}

.site-header .logo img {
    width: auto;
    max-width: 155px;
    height: auto;
}

.site-header .navbar {
    min-width: 0;
}

.site-header .navbar>ul {
    gap: clamp(14px, 2vw, 32px);
}

.site-header .navbar>ul>li>a {
    font-size: 16px;
}

.site-header .header-right {
    flex: 0 0 auto;
}

.site-header .menu-btn {
    position: relative;
    z-index: 10001;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 14px;
    background: #111;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
}

.site-header .menu-btn span {
    display: block;
    width: 21px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: .25s;
    transform-origin: center;
}

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

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

.site-header .menu-btn.active {
    background: #F1CA03;
}

.site-header .menu-btn.active span {
    background: #111;
}

body.menu-open {
    overflow: hidden;
}

/* Mobile navigation is a true full-screen panel, never trapped by the header */
.site-header .mobile-menu {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    min-height: 100vh;
    z-index: 9998;
    background: #111;
    color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 112px 22px 40px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
    display: block;
}

.site-header .mobile-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.site-header .mobile-menu>ul {
    width: min(100%, 520px);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: center;
}

.site-header .mobile-menu>ul>li {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .11);
}

.site-header .mobile-menu>ul>li>a {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    padding: 14px 8px;
}

.site-header .mobile-menu>ul>li>a.active {
    color: #F1CA03;
}

.site-header .mobile-menu .has-dropdown>a {
    gap: 12px;
}

.site-header .mobile-menu .dropdown-menu {
    width: 100%;
    margin: 0;
    padding: 0 0 10px;
    border: 0;
    background: transparent;
    box-shadow: none;
    display: none !important;
    grid-template-columns: 1fr !important;
}

.site-header .mobile-menu .has-dropdown.dropdown-open>.dropdown-menu {
    display: grid !important;
}

.site-header .mobile-menu .dropdown-menu li {
    margin: 0 !important;
}

.site-header .mobile-menu .dropdown-menu a {
    display: block;
    color: #cfd0cb;
    padding: 10px 8px;
    font-size: 16px !important;
    line-height: 1.35;
    text-align: center;
    opacity: 1;
}

.site-header .mobile-menu .dropdown-menu a:hover,
.site-header .mobile-menu .dropdown-menu a:focus-visible {
    color: #F1CA03;
    background: transparent;
}

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

/* Homepage */
@media (max-width:1100px) {
    .site-header .navbar>ul {
        gap: 14px;
    }

    .site-header .navbar>ul>li>a {
        font-size: 16px;
    }

    .site-header .contact-btn {
        width: 145px;
        height: 50px;
    }

    .home-page .hero-container {
        gap: 45px;
    }

    .home-page .about-grid {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
    }

    .home-page .about-right {
        grid-column: 1/-1;
    }

    .home-page .process-container {
        grid-template-columns: 300px 1fr;
        gap: 45px;
    }
}

@media (max-width:900px) {
    .site-header {
        top: 12px;
    }

    .site-header .header-container {
        width: min(94%, 1270px);
        height: 70px;
        padding: 0 18px;
        border-radius: 18px;
    }

    .site-header .navbar {
        display: none !important;
    }

    .site-header .contact-btn {
        display: none !important;
    }

    .site-header .menu-btn {
        display: flex !important;
    }

    .site-header .logo img {
        max-width: 132px;
        max-height: 42px;
    }

    .home-page .hero {
        min-height: auto;
        padding: 130px 0 70px;
    }

    .home-page .hero-container {
        width: min(92%, 720px);
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .home-page .hero-content {
        max-width: 680px;
    }

    .home-page .hero h1 {
        font-size: clamp(52px, 12vw, 72px);
        margin-top: 24px;
        line-height: 72px;
    }

    .home-page .hero p {
        max-width: 620px;
        font-size: 17px;
        line-height: 1.65;
    }

    .home-page .hero-visual {
        width: min(100%, 560px);
        margin: 0 auto;
    }

    .home-page .hero-showcase {
        width: 100%;
    }

    .home-page .hero-showcase img {
        width: 100%;
        height: auto;
        max-height: 520px;
        object-fit: cover;
    }

    .home-page .outline-title {
        font-size: 27vw;
        bottom: 0;
    }

    .home-page .services,
    .home-page .about,
    .home-page .clients,
    .home-page .faq,
    .home-page .testimonial {
        padding: 90px 0;
    }

    .home-page .services-header,
    .home-page .services-list,
    .home-page .clients-header,
    .home-page .faq-wrap,
    .home-page .testimonial-slider {
        width: min(92%, 720px);
    }

    .home-page .section-title {
        font-size: clamp(40px, 9vw, 70px);
    }

    .home-page .service-item {
        grid-template-columns: 52px 1fr 34px;
        gap: 14px;
        padding: 28px 0;
    }

    .home-page .service-item p {
        grid-column: 2;
        grid-row: 2;
        margin-top: 5px;
    }

    .home-page .service-item .service-image {
        grid-column: 2;
        grid-row: 3;
        width: 100%;
        max-width: 430px;
        margin-top: 14px;
    }

    .home-page .service-item .arrow {
        grid-column: 3;
        grid-row: 1;
    }

    .home-page .about-grid {
        width: min(92%, 720px);
        grid-template-columns: 1fr;
    }

    .home-page .about-right {
        grid-column: auto;
    }

    .home-page .process-container {
        width: min(92%, 720px);
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .home-page .process-left {
        position: sticky;
        top: 86px;
        z-index: 3;
        background: #111;
        padding: 8px 0 18px;
    }

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

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

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

    .home-page .timeline-item {
        margin: 0;
        padding: 10px 0;
    }

    .home-page .timeline-item::before {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .home-page .timeline-item.active::before {
        transform: translate(-50%, -50%) scale(1.35);
    }

    .home-page .timeline-item span {
        position: relative;
        z-index: 1;
        display: block;
        padding-top: 22px;
        font-size: 16px;
    }

    .home-page .process-right {
        gap: 0;
    }

    .home-page .step {
        min-height: 72vh;
        padding: 7vh 0;
    }

    .home-page .faq-wrap {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .home-page .faq-intro {
        position: static;
    }

    .home-page .testimonial-item h2 {
        font-size: clamp(25px, 6vw, 48px);
    }

    .home-page .cta {
        padding: 100px 0;
    }

    .home-page .cta-content {
        width: min(92%, 720px);
    }

    .home-page .cta h2 {
        font-size: clamp(48px, 12vw, 88px);
    }

    .page {
        padding: 100px 6%;
    }

    .hero2 {
        min-height: auto;
        padding: 135px 6% 70px;
    }

    .hero2 h1 {
        font-size: clamp(54px, 13vw, 100px);
    }

    .hero-stamp {
        opacity: .45;
        width: 220px;
        right: -35px;
        top: 8%;
    }

    .split,
    .case-grid2,
    .role-grid,
    .course-grid2,
    .feature-grid {
        grid-template-columns: 1fr;
    }

    .image-block {
        min-height: 380px;
    }

    .numbers,
    .logo-grid2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .service2 {
        grid-template-columns: 48px 1fr 30px;
        gap: 12px;
    }

    .service2 p {
        grid-column: 2;
        grid-row: 2;
    }

    .service2 .arrow {
        grid-column: 3;
        grid-row: 1;
    }

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

    /* Pages stylesheet layouts */
    .page-hero {
        min-height: auto;
        padding: 135px 7% 75px;
    }

    .page-hero h1 {
        font-size: clamp(52px, 12vw, 100px);
        max-width: 850px;
    }

    .content {
        padding: 85px 6%;
    }

    .grid,
    .work-grid,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .process-row {
        grid-template-columns: 65px 1fr;
        gap: 18px;
    }

    .process-row p {
        grid-column: 2;
    }

    .work,
    .work:nth-child(1),
    .work:nth-child(4) {
        height: 390px;
    }

    .contact-layout {
        gap: 40px;
    }

    .contact-info a {
        font-size: clamp(28px, 8vw, 48px);
        overflow-wrap: anywhere;
    }

    .digital-page .hero-subrow,
    .digital-page .manifesto-grid,
    .digital-page .services-layout,
    .digital-page .experiment-grid,
    .digital-page .local-grid,
    .digital-page .why-grid,
    .digital-page .contact-grid,
    .digital-page .footer-grid {
        grid-template-columns: 1fr;
    }

    .digital-page .form-row {
        grid-template-columns: 1fr;
    }

    .footer-grid,
    .footer-contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-hero {
        padding: 130px 6% 65px;
    }

    .landing-hero-inner,
    .landing-split,
    .landing-faq {
        grid-template-columns: 1fr;
    }

    .landing-hero-card {
        max-width: 700px;
        width: 100%;
    }

    .landing-cards,
    .landing-proof {
        grid-template-columns: 1fr 1fr;
    }

    .landing-image,
    .landing-image img {
        min-height: 360px;
    }
}

@media (max-width:600px) {
    .site-header {
        top: 10px;
    }

    .site-header .header-container {
        height: 64px;
        padding: 0 14px;
        border-radius: 16px;
    }

    .site-header .logo img {
        max-width: 112px;
        max-height: 36px;
    }

    .site-header .menu-btn {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        z-index: 10001;
    }

    .site-header .mobile-menu {
        padding: 94px 18px 30px;
    }

    .site-header .mobile-menu>ul>li>a {
        min-height: 52px;
        font-size: 16px;
    }

    .home-page .hero {
        padding-top: 105px;
        padding-bottom: 55px;
    }

    .home-page .hero-container {
        width: 90%;
        gap: 32px;
    }

    .home-page .hero-tag {
        font-size: 10px;
        letter-spacing: 3px;
        gap: 9px;
    }

    .home-page .hero-tag::before {
        width: 38px;
    }

    .home-page .hero h1 {
        font-size: clamp(48px, 14vw, 72px);
        line-height: .94;
    }

    .home-page .hero p {
        font-size: 15px;
        margin-top: 22px;
    }

    .home-page .hero-action {
        flex-wrap: wrap;
        gap: 10px;
    }

    .home-page .hero-action a {
        min-height: 46px;
        padding: 12px 16px;
    }

    .home-page .hero-visual {
        width: 100%;
    }

    .home-page .hero-showcase {
        min-height: 250px;
    }

    .home-page .hero-showcase img {
        max-height: 360px;
    }

    .home-page .outline-title {
        font-size: 31vw;
        bottom: -4px;
    }

    .home-page .services,
    .home-page .about,
    .home-page .clients,
    .home-page .faq,
    .home-page .testimonial {
        padding: 70px 0;
    }

    .home-page .services-header,
    .home-page .services-list,
    .home-page .clients-header,
    .home-page .faq-wrap,
    .home-page .testimonial-slider {
        width: 90%;
    }

    .home-page .section-tag {
        font-size: 10px;
        letter-spacing: 3px;
    }

    .home-page .section-title {
        font-size: clamp(36px, 11vw, 56px);
    }

    .home-page .service-item {
        grid-template-columns: 32px 1fr 24px;
        gap: 10px;
        padding: 23px 0;
    }

    .home-page .service-item h3 {
        font-size: 25px;
    }

    .home-page .service-item p {
        font-size: 13px;
        line-height: 1.6;
    }

    .home-page .service-item .service-image {
        max-width: none;
    }

    .home-page .about-grid,
    .home-page .process-container {
        width: 90%;
    }

    .home-page .about-left h2 {
        font-size: clamp(36px, 11vw, 58px);
    }

    .home-page .about-left p {
        font-size: 15px;
        line-height: 1.7;
    }

    .home-page .numbers {
        grid-template-columns: 1fr;
    }

    .home-page .numbers .number {
        padding: 22px;
    }

    .home-page .timeline-item {
        margin-bottom: 32px;
    }

    .home-page .faq-item summary {
        font-size: 18px;
        padding: 20px 34px 20px 0;
    }

    .home-page .author {
        flex-wrap: wrap;
        margin-top: 35px;
    }

    .home-page .cta {
        padding: 75px 0;
    }

    .home-page .cta h2 {
        font-size: clamp(45px, 13vw, 70px);
    }

    .hero2 {
        padding: 112px 6% 55px;
    }

    .hero2 h1 {
        font-size: clamp(48px, 14vw, 78px);
    }

    .hero2 p {
        font-size: 15px;
        margin-top: 24px;
    }

    .hero-stamp {
        width: 160px;
        right: -55px;
        top: 4%;
    }

    .page {
        padding: 78px 6%;
    }

    .lead {
        font-size: clamp(32px, 10vw, 54px);
    }

    .numbers,
    .logo-grid2 {
        grid-template-columns: 1fr;
    }

    .number {
        padding: 24px 20px;
    }

    .logo2 {
        min-height: 105px;
    }

    .service2 {
        grid-template-columns: 34px 1fr 22px;
        padding: 24px 0;
    }

    .service2 h2 {
        font-size: clamp(25px, 8vw, 38px);
    }

    .service2 p {
        font-size: 13px;
    }

    .case,
    .case:nth-child(2) {
        height: 310px;
    }

    .quote2 {
        padding: 55px 6%;
        margin-top: 55px;
    }

    .cta2 {
        padding: 65px 6%;
    }

    .cta2 h2 {
        font-size: clamp(42px, 12vw, 70px);
    }

    .footer2 {
        padding: 55px 6% 28px;
    }

    .footer2-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-hero {
        padding: 112px 7% 60px;
    }

    .page-hero h1 {
        font-size: clamp(48px, 14vw, 76px);
        line-height: .92;
    }

    .page-hero p {
        font-size: 15px;
        line-height: 1.65;
    }

    .content {
        padding: 65px 6%;
    }

    .intro {
        font-size: clamp(30px, 9vw, 50px);
    }

    .grid {
        gap: 14px;
        margin-top: 45px;
    }

    .card {
        padding: 25px;
        min-height: 0;
    }

    .card h2 {
        font-size: 26px;
    }

    .process-list,
    .work-grid {
        margin-top: 45px;
    }

    .process-row {
        grid-template-columns: 45px 1fr;
        gap: 12px;
        padding: 28px 0;
    }

    .process-row h2 {
        font-size: 28px;
    }

    .work,
    .work:nth-child(1),
    .work:nth-child(4) {
        height: 290px;
        border-radius: 20px;
    }

    .contact-layout {
        gap: 30px;
    }

    .contact-info {
        padding: 10px 0;
    }

    .contact-info:before {
        font-size: 26vw !important;
    }

    .contact-info p {
        font-size: 15px;
        line-height: 1.7;
    }

    .form {
        padding: 22px;
        border-radius: 20px;
    }

    .form input,
    .form textarea,
    .form select {
        padding: 14px;
        font-size: 14px;
    }

    .form-actions {
        grid-template-columns: 1fr;
    }

    .form-actions button,
    .form button#email-submit,
    .form button.whatsapp-submit {
        width: 100%;
        font-size: 12px;
        min-height: 44px;
        padding: 11px 14px;
    }

    .captcha-field {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
    }

    .captcha-challenge {
        min-width: 0;
        width: 100%;
        font-size: 18px;
    }

    .captcha-input {
        min-width: 0;
        width: 100%;
    }

    .captcha-refresh {
        width: 46px;
    }

    .footer-grid,
    .footer-contact-grid {
        grid-template-columns: 1fr;
    }

    .footer {
        padding: 60px 6%;
    }

    .landing-hero {
        padding: 105px 5% 55px;
    }

    .landing-hero h1 {
        font-size: clamp(42px, 13vw, 68px);
    }

    .landing-hero p {
        font-size: 15px;
    }

    .landing-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .landing-btn {
        width: 100%;
    }

    .landing-hero-card {
        padding: 20px;
        border-radius: 18px;
    }

    .landing-hero-card h2 {
        font-size: 25px;
    }

    .landing-cards,
    .landing-proof {
        grid-template-columns: 1fr;
    }

    .landing-section {
        padding: 65px 6%;
    }

    .landing-section-head h2 {
        font-size: clamp(34px, 10vw, 54px);
    }

    .landing-section-head p {
        font-size: 15px;
    }

    .landing-image,
    .landing-image img {
        min-height: 260px;
    }

    .landing-list-item {
        grid-template-columns: 32px 1fr;
    }

    .landing-faq {
        gap: 35px;
    }

    .landing-faq-list summary {
        font-size: 16px;
    }

    .landing-bottom-cta {
        padding: 60px 6%;
    }

    .landing-bottom-cta h2 {
        font-size: clamp(38px, 11vw, 62px);
    }
}

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

    .site-header .menu-btn.active {
        background: #F1CA03;
        border-color: #F1CA03;
    }

    .site-header .menu-btn span {
        width: 22px;
        height: 2px;
        background: #fff;
    }

    .site-header .menu-btn.active span {
        background: #111;
    }

    .site-header .mobile-menu {
        z-index: 10000;
    }

    .site-header .mobile-menu .dropdown-menu a {
        font-size: 16px !important;
    }

    .site-header .navbar>ul>li>ul.dropdown-menu>li>a {
        font-size: 16px;
    }
}

@media (max-width:380px) {
    .site-header .header-container {
        padding: 0 11px;
    }

    .site-header .logo img {
        max-width: 100px;
    }

    .site-header .menu-btn {
        width: 42px;
        height: 42px;
    }

    .home-page .hero h1 {
        font-size: 46px;
    }

    .home-page .hero-action {
        flex-direction: column;
        align-items: stretch;
    }

    .home-page .hero-action a {
        width: 100%;
        justify-content: center;
    }

    .form {
        padding: 18px;
    }

    .captcha-field {
        grid-template-columns: 1fr;
    }

    .captcha-refresh {
        width: 100%;
    }
}

/* Landing-page form containment and responsive fixes */
.landing-hero-inner {
    min-width: 0
}

.landing-hero-inner>* {
    min-width: 0
}

.landing-hero-card {
    width: 100%;
    min-width: 0;
    overflow: hidden
}

.landing-hero-card .landing-form.form {
    display: grid;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 10px;
    padding: 18px;
    background: #111;
    border-radius: 18px;
    box-shadow: none
}

.landing-hero-card .landing-form.form>* {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box
}

.landing-hero-card .landing-form.form input,
.landing-hero-card .landing-form.form select,
.landing-hero-card .landing-form.form textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 13px 14px;
    margin: 0
}

.landing-hero-card .landing-form.form textarea {
    min-height: 105px
}

.landing-hero-card .landing-form.form .captcha-field {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto
}

.landing-hero-card .landing-form.form .captcha-challenge {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.landing-hero-card .landing-form.form .captcha-input {
    min-width: 0
}

.landing-hero-card .landing-form.form .form-actions {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px
}

.landing-hero-card .landing-form.form .form-actions button {
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 12px;
    padding: 11px 10px
}

@media(max-width:900px) {
    .landing-hero-inner {
        grid-template-columns: 1fr
    }

    .landing-hero-card {
        justify-self: start;
        max-width: 720px
    }
}

@media(max-width:600px) {
    .landing-hero {
        padding: 105px 5% 55px
    }

    .landing-hero-card {
        padding: 18px;
        border-radius: 18px
    }

    .landing-hero-card .landing-form.form {
        padding: 14px
    }

    .landing-hero-card .landing-form.form .captcha-field {
        grid-template-columns: minmax(0, 1fr) auto
    }

    .landing-hero-card .landing-form.form .captcha-challenge {
        grid-column: 1
    }

    .landing-hero-card .landing-form.form .captcha-refresh {
        grid-column: 2;
        width: 44px
    }

    .landing-hero-card .landing-form.form .captcha-input {
        grid-column: 1/-1
    }

    .landing-hero-card .landing-form.form .form-actions {
        grid-template-columns: 1fr
    }
}

@media(max-width:380px) {
    .landing-hero-card {
        padding: 14px
    }

    .landing-hero-card .landing-form.form {
        padding: 12px
    }

    .landing-hero-card .landing-form.form input,
    .landing-hero-card .landing-form.form select,
    .landing-hero-card .landing-form.form textarea {
        font-size: 13px;
        padding: 12px
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .home-page #process .process-right {
        height: 68vh;
    }
}

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

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

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

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

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

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

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

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

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

    .home-page #process .timeline-item span {
        font-size: 16px;
        transform: none;
    }

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

.home-page #process.process .process-trigger:nth-child(1) {
    top: 0;
}

.home-page #process.process .process-trigger:nth-child(2) {
    top: 25%;
}

.home-page #process.process .process-trigger:nth-child(3) {
    top: 50%;
}

.home-page #process.process .process-trigger:nth-child(4) {
    top: 75%;
}

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

    .home-page #process.process .process-right {
        height: 68vh !important;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* PROCESS REFERENCE EXACT WORKING IMPLEMENTATION */
.home-page #process.process {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    background: #111 !important;
    color: #fff !important;
    padding: 140px 0 !important;
    overflow: visible !important;
}

.home-page #process .process-container {
    position: relative !important;
    width: min(92%, 1400px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 380px 1fr !important;
    gap: 80px !important;
    align-items: stretch !important;
}

.home-page #process .process-left {
    position: sticky !important;
    top: 130px !important;
    height: max-content !important;
    align-self: start !important;
}

.home-page #process .process-left h2 {
    font-size: 60px;
    line-height: .98 !important;
    margin: 20px 0 60px !important;
}

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

.home-page #process .timeline {
    position: relative !important;
    padding-left: 35px !important;
}

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

.home-page #process .timeline-item {
    position: relative !important;
    margin-bottom: 45px !important;
    min-height: 0 !important;
    padding: 0 !important;
}

.home-page #process .timeline-item:last-child {
    margin-bottom: 0 !important;
}

.home-page #process .timeline-item::before {
    content: "" !important;
    position: absolute !important;
    left: -27px !important;
    top: 8px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #555 !important;
    transform: none !important;
    transition: .4s !important;
}

.home-page #process .timeline-item.active::before {
    background: #F1CA03 !important;
    transform: scale(1.5) !important;
}

.home-page #process .timeline-item span {
    font-size: 20px !important;
    color: #888 !important;
    display: inline !important;
    transform: none !important;
}

.home-page #process .timeline-item.active span {
    color: #fff !important;
    transform: none !important;
}

.home-page #process .process-right {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 120px !important;
    height: auto !important;
    min-width: 0 !important;
    align-self: stretch !important;
}

.home-page #process .step,
.home-page #process .step.is-active {
    position: relative !important;
    inset: auto !important;
    min-height: 50vh !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
}

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

.home-page #process .step p {
    max-width: 620px !important;
    font-size: 20px;
    line-height: 1.9 !important;
    color: #bbb !important;
}

@media (max-width:1200px) and (min-width:901px) {
    .home-page #process .process-container {
        grid-template-columns: 320px 1fr !important;
        gap: 50px !important;
    }
}

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

    .home-page #process .process-container {
        position: relative !important;
        width: min(92%, 760px) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .home-page #process .process-left {
        position: static !important;
        top: auto !important;
    }

    .home-page #process .timeline {
        display: flex !important;
        gap: 22px !important;
        padding-left: 0 !important;
        overflow-x: auto !important;
        padding-bottom: 10px !important;
        scrollbar-width: thin !important;
    }

    .home-page #process .timeline-line {
        display: none !important;
    }

    .home-page #process .timeline-item {
        margin-bottom: 0 !important;
        white-space: nowrap !important;
    }

    .home-page #process .timeline-item::before {
        position: static !important;
        display: inline-flex !important;
        margin-right: 8px !important;
        vertical-align: middle !important;
        transform: none !important;
    }

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

    .home-page #process .process-right {
        gap: 70px !important;
    }

    .home-page #process .step,
    .home-page #process .step.is-active {
        min-height: auto !important;
        padding: 35px 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}

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

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

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

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

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

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

    .site-header .menu-btn.active {
        background: #F1CA03;
        border-color: #F1CA03;
    }

    .site-header .menu-btn span {
        width: 22px;
        height: 2px;
        background: #fff;
    }

    .site-header .menu-btn.active span {
        background: #111;
    }

    .site-header .mobile-menu {
        z-index: 10000;
    }

    .site-header .mobile-menu .dropdown-menu a {
        font-size: 16px !important;
    }

    .site-header .navbar>ul>li>ul.dropdown-menu>li>a {
        font-size: 16px;
    }
}

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Course / internship featured imagery */
.detail-feature-image {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto 56px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #151515;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .18)
}

.detail-feature-image img {
    display: block;
    width: 100%;
    height: clamp(260px, 42vw, 560px);
    object-fit: cover
}

/* Blog */
.blog-page,
.blog-article-page {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 0 0 100px
}

.blog-hero {
    padding: 110px 0 64px;
    max-width: 860px
}

.blog-hero h1 {
    font-size: 80px;
    line-height: .92;
    letter-spacing: -.055em;
    margin: 18px 0
}

.blog-hero h1 em {
    font-style: normal;
    color: #F1CA03
}

.blog-hero p {
    font-size: 20px;
    line-height: 1.7;
    max-width: 720px;
    color: white
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px
}

.blog-card {
    background: #171717;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.blog-card-image {
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.04)
}

.blog-card-body {
    padding: 28px
}

.blog-category {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #F1CA03;
    font-weight: 700
}

.blog-card h2 {
    font-size: 16px;
    line-height: 1.05;
    margin: 12px 0
}

.blog-card h2 a,
.insight-card h3 a {
    color: white;
    text-decoration: none
}

.blog-card p,
.insight-card p {
    color: #ffffffad;
    line-height: 1.7;
    margin-bottom: 20px
}

.text-link {
    color: #F1CA03;
    text-decoration: none;
    font-weight: 700
}

.blog-cta {
    margin-top: 64px;
    padding: 48px;
    border-radius: 28px;
    background: #F1CA03;
    color: #111
}

.blog-cta h2 {
    font-size: clamp(34px, 5vw, 60px);
    margin: 0 0 10px
}

.blog-cta p {
    max-width: 680px;
    line-height: 1.6
}

.blog-cta .contact-btn {
    display: inline-flex;
    margin-top: 16px;
    background: #111;
    color: #fff
}

.blog-article-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    padding-top: 100px
}

.blog-article {
    min-width: 0
}

.blog-article-head h1 {
    font-size:56px;
    line-height: .99;
    letter-spacing: -.05em;
    margin: 14px 0 20px
}

.blog-article-head>p {
    font-size: 20px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .7);
    max-width: 780px
}

.blog-feature-image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 26px;
    margin: 38px 0
}

.blog-article-content {
    font-size: 18px;
    line-height: 1.85;
    color: rgba(255, 255, 255, .78)
}

.blog-article-content h2 {
    font-size: 34px;
    line-height: 1.1;
    color: #fff;
    margin: 44px 0 14px
}

.blog-article-content p {
    margin: 0 0 22px
}

.related-posts {
    position: sticky;
    top: 130px;
    height: max-content
}

.related-posts h2 {
    margin-top: 0
}

.related-post {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.3
}

.related-post img {
    width: 78px;
    height: 60px;
    object-fit: cover;
    border-radius: 10px;
    flex: none
}

.latest-insights {
    width: min(1180px, calc(100% - 48px));
    margin: 100px auto;
    padding: 20px 0 0
}

.latest-insights .section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 34px
}

.latest-insights .section-head h2 {
    font-size: clamp(40px, 6vw, 76px);
    line-height: .95;
    margin: 12px 0 0;
    letter-spacing: -.045em
}

.latest-insights .section-head h2 span {
    color: #F1CA03
}

.insight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px
}

.insight-card {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 22px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 22px;
    background: #171717
}

.insight-image {
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 16px
}

.insight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.insight-card h3 {
    font-size: 25px;
    line-height: 1.1;
    margin: 10px 0
}

.insight-card p {
    font-size: 15px;
    margin: 0 0 12px
}

@media (max-width:900px) {
    .detail-feature-image {
        width: min(100% - 32px, 1180px);
        margin-bottom: 42px
    }

    .blog-grid,
    .insight-grid {
        grid-template-columns: 1fr
    }

    .blog-article-page {
        grid-template-columns: 1fr;
        padding-top: 70px
    }

    .related-posts {
        position: static
    }

    .latest-insights {
        width: min(100% - 32px, 1180px)
    }

    .latest-insights .section-head {
        align-items: flex-start;
        flex-direction: column
    }

    .blog-page {
        width: min(100% - 32px, 1180px)
    }
}

@media (max-width:600px) {
    .detail-feature-image {
        width: calc(100% - 24px);
        border-radius: 18px
    }

    .detail-feature-image img {
        height: 230px
    }

    .blog-hero {
        padding: 72px 0 44px
    }

    .blog-hero h1 {
        font-size: clamp(42px, 13vw, 64px)
    }

    .blog-hero p {
        font-size: 17px
    }

    .blog-card-body {
        padding: 22px
    }

    .blog-card h2 {
        font-size: 28px
    }

    .blog-article-page {
        width: calc(100% - 24px);
        padding-top: 52px
    }

    .blog-article-head h1 {
        font-size: clamp(40px, 12vw, 60px)
    }

    .blog-article-head>p {
        font-size: 17px
    }

    .blog-article-content {
        font-size: 16px
    }

    .blog-article-content h2 {
        font-size: 28px
    }

    .blog-feature-image {
        border-radius: 18px;
        margin: 26px 0
    }

    .blog-cta {
        padding: 32px 24px;
        border-radius: 22px
    }

    .latest-insights .section-head h2 {
        font-size: 42px
    }

    .insight-card {
        grid-template-columns: 1fr
    }

    .insight-card h3 {
        font-size: 27px
    }
}


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

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

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

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

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

@keyframes heroTypeCursor {

    0%,
    49% {
        opacity: 1
    }

    50%,
    100% {
        opacity: 0
    }
}

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

/* Expanded service navigation and detail pages */
.service2-link {
    display: block;
    text-decoration: none;
    color: inherit
}

.service2-link:hover {
    text-decoration: none
}

.service-feature-image {
    margin: 0 auto 44px;
    max-width: 1100px;
    overflow: hidden;
    border-radius: 24px
}

.service-feature-image img {
    width: 100%;
    display: block;
    aspect-ratio: 16/7;
    object-fit: cover
}

@media (max-width:700px) {
    .service-feature-image {
        margin-bottom: 28px;
        border-radius: 18px
    }

    .service-feature-image img {
        aspect-ratio: 16/9
    }

    .service-list2 {
        grid-template-columns: 1fr
    }

    .service2-link {
        min-height: auto
    }
}

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

.services-view-all:hover {
    text-decoration: underline
}

/* FINAL MOBILE HEADER REPAIR
   Keep the hamburger/close control outside the backdrop-filtered header container
   so it remains above the full-screen mobile navigation on real mobile browsers. */
@media (max-width: 900px) {
    .site-header {
        z-index: 10020 !important;
    }

    .site-header .header-container {
        z-index: 2;
    }

    .site-header>.menu-btn {
        position: fixed !important;
        top: 22px;
        right: 18px;
        z-index: 10050 !important;
        display: flex !important;
        width: 48px;
        height: 48px;
        padding: 0;
        margin: 0;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 14px;
        background: #111;
        color: #fff;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 6px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
        appearance: none;
        -webkit-appearance: none;
    }

    .site-header>.menu-btn span {
        width: 22px;
        height: 2px;
        margin: 0;
        display: block;
        background: #fff;
        border-radius: 2px;
        transform-origin: center;
        transition: transform .22s ease, background-color .22s ease, opacity .22s ease;
    }

    .site-header>.menu-btn.active {
        background: #F1CA03;
        border-color: #F1CA03;
    }

    .site-header>.menu-btn.active span {
        background: #111;
    }

    .site-header>.menu-btn.active span:first-child {
        transform: translateY(4px) rotate(45deg);
    }

    .site-header>.menu-btn.active span:last-child {
        transform: translateY(-4px) rotate(-45deg);
    }

    .site-header .mobile-menu {
        z-index: 10000 !important;
        padding-top: 112px !important;
    }
}

@media (max-width: 600px) {
    .site-header>.menu-btn {
        top: 20px;
        right: 16px;
        width: 46px;
        height: 46px;
        border-radius: 12px;
    }

    .site-header .mobile-menu {
        padding-top: 94px !important;
    }
}

@media (max-width: 380px) {
    .site-header>.menu-btn {
        top: 18px;
        right: 12px;
        width: 44px;
        height: 44px;
    }
}


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

    .home-page .service-image {
        width: 235px;
        height: 150px;
    }
}

@media (max-width: 700px) {
    .home-page .service-item {
        grid-template-columns: 44px minmax(0, 1fr) 28px;
        gap: 14px;
    }

    .home-page .service-image {
        grid-column: 2 / -1;
        grid-row: 2;
        justify-self: start;
        width: min(100%, 320px);
        height: auto;
        aspect-ratio: 16 / 10;
        margin-top: 18px;
        transform: none;
        opacity: 1;
        box-shadow: none;
    }

    .home-page .service-item:hover .service-image {
        transform: none;
        box-shadow: none;
    }

    .home-page .service-content p {
        font-size: 16px;
    }
}