/* =====================================================
   LAN-SUTTY SERVICES INT'L LTD
   MAIN STYLESHEET
===================================================== */


/* =====================================================
   ROOT VARIABLES
===================================================== */

:root {

    --royal-blue: #123B82;

    --royal-blue-dark: #0A285A;

    --royal-blue-light: #1B4FA3;

    --brick-red: #7A2E2E;

    --brick-red-dark: #5B2020;

    --white: #FFFFFF;

    --off-white: #F7F8FA;

    --charcoal: #202124;

    --charcoal-light: #303238;

    --gray: #70757D;

    --light-gray: #E8EAED;

    --border: rgba(255,255,255,0.12);

    --shadow:
        0 20px 60px rgba(0,0,0,0.12);

    --transition:
        0.35s ease;

    --radius:
        22px;

    --small-radius:
        14px;

}


/* =====================================================
   RESET
===================================================== */

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


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        'Inter',
        sans-serif;

    background:
        var(--white);

    color:
        var(--charcoal);

    line-height:
        1.6;

    overflow-x:
        hidden;

}


body.loading {
    overflow: hidden;
}


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


button {
    font-family: inherit;
}


img {
    max-width: 100%;
    display: block;
}





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

.website {

    opacity:
        0;

    transition:
        opacity 0.8s ease;

}


.website.show {
    opacity: 1;
}


/* =====================================================
   CONTAINER
===================================================== */

.container {

    width:
        min(1180px, 90%);

    margin:
        auto;

}


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

.header {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

    z-index:
        1000;

    padding:
        18px 0;

    transition:
        var(--transition);

}


.header.scrolled {

    padding:
        10px 0;

    background:
        rgba(255,255,255,0.94);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 8px 30px rgba(0,0,0,0.08);

}


.navbar {

    width:
        min(1280px, 94%);

    margin:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

}


.logo {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.logo-image {

    width:
        45px;

    height:
        45px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    background:
        var(--brick-red);

    color:
        var(--white);

    border-radius:
        12px;

    font-family:
        'Montserrat',
        sans-serif;

    font-weight:
        800;

}


.logo-text {

    display:
        flex;

    flex-direction:
        column;

}


.logo-text strong {

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        0.95rem;

    letter-spacing:
        1px;

}


.logo-text span {

    font-size:
        0.52rem;

    letter-spacing:
        1.8px;

    opacity:
        0.7;

}


.header:not(.scrolled) .logo-text {

    color:
        var(--white);

}


.nav-links {

    display:
        flex;

    align-items:
        center;

    gap:
        28px;

}


.nav-links a {

    position:
        relative;

    color:
        var(--white);

    font-size:
        0.84rem;

    font-weight:
        600;

    transition:
        var(--transition);

}


.header.scrolled .nav-links a {

    color:
        var(--charcoal);

}


.nav-links a::after {

    content:
        '';

    position:
        absolute;

    left:
        0;

    bottom:
        -8px;

    width:
        0;

    height:
        2px;

    background:
        var(--brick-red);

    transition:
        var(--transition);

}


.nav-links a:hover::after,
.nav-links a.active::after {

    width:
        100%;

}


.nav-button {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px 18px;

    border-radius:
        10px;

    background:
        var(--brick-red);

    color:
        var(--white);

    font-size:
        0.8rem;

    font-weight:
        700;

    transition:
        var(--transition);

}


.nav-button:hover {

    background:
        var(--brick-red-dark);

    transform:
        translateY(-2px);

}


.menu-button {

    display:
        none;

    width:
        45px;

    height:
        45px;

    border:
        none;

    border-radius:
        12px;

    background:
        var(--brick-red);

    cursor:
        pointer;

}


.menu-button span {

    display:
        block;

    width:
        20px;

    height:
        2px;

    margin:
        4px auto;

    background:
        var(--white);

    transition:
        var(--transition);

}


/* =====================================================
   HERO
===================================================== */

.hero {

    min-height:
        100vh;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    background:
        var(--royal-blue-dark);

    overflow:
        hidden;

}


.hero-background {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            120deg,
            rgba(8,30,70,0.98),
            rgba(18,59,130,0.72)
        );

}


.hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(122,46,46,0.28),
            transparent 35%
        );

}


.hero-container {

    position:
        relative;

    z-index:
        2;

    width:
        min(1180px, 90%);

    margin:
        auto;

    padding-top:
        100px;

    display:
        grid;

    grid-template-columns:
        1.4fr 0.6fr;

    align-items:
        center;

    gap:
        70px;

}


.hero-content {

    color:
        var(--white);

}


.hero-label {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        22px;

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        2px;

    color:
        rgba(255,255,255,0.7);

}


.hero-label span {

    width:
        30px;

    height:
        2px;

    background:
        var(--brick-red);

}


.hero h1 {

    max-width:
        750px;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        clamp(3rem, 6vw, 5.7rem);

    line-height:
        1.02;

    letter-spacing:
        -3px;

}


.hero h1 span {

    color:
        rgba(255,255,255,0.5);

}


.hero h1 strong {

    color:
        var(--brick-red);

}


.hero-description {

    max-width:
        620px;

    margin:
        28px 0;

    color:
        rgba(255,255,255,0.72);

    font-size:
        1rem;

}


.hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

}


.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    padding:
        15px 22px;

    border-radius:
        12px;

    font-size:
        0.82rem;

    font-weight:
        700;

    transition:
        var(--transition);

}


.btn-primary {

    background:
        var(--brick-red);

    color:
        var(--white);

}


.btn-primary:hover {

    background:
        var(--brick-red-dark);

    transform:
        translateY(-3px);

}


.btn-outline {

    border:
        1px solid rgba(255,255,255,0.35);

    color:
        var(--white);

}


.btn-outline:hover {

    background:
        var(--white);

    color:
        var(--royal-blue);

}


.hero-trust {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        40px;

}


.trust-icon {

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        rgba(255,255,255,0.1);

    color:
        var(--white);

}


.hero-trust div:last-child {

    display:
        flex;

    flex-direction:
        column;

}


.hero-trust strong {

    font-size:
        0.78rem;

}


.hero-trust span {

    font-size:
        0.68rem;

    opacity:
        0.55;

}


/* HERO CARD */

.hero-card {

    padding:
        30px;

    border:
        1px solid rgba(255,255,255,0.16);

    border-radius:
        var(--radius);

    background:
        rgba(255,255,255,0.08);

    backdrop-filter:
        blur(20px);

    color:
        var(--white);

    box-shadow:
        0 30px 80px rgba(0,0,0,0.25);

}


.hero-card-top {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        35px;

}


.hero-card-top span {

    font-size:
        0.62rem;

    letter-spacing:
        2px;

    opacity:
        0.6;

}


.hero-card-top i {

    color:
        var(--brick-red);

}


.hero-card h3 {

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.5rem;

    line-height:
        1.25;

}


.hero-card p {

    margin:
        18px 0;

    color:
        rgba(255,255,255,0.62);

    font-size:
        0.78rem;

}


.hero-card-bottom {

    padding-top:
        20px;

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

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.hero-card-bottom span {

    font-size:
        0.68rem;

    color:
        rgba(255,255,255,0.7);

}


.hero-card-bottom i {

    color:
        var(--brick-red);

}


.hero-scroll {

    position:
        absolute;

    bottom:
        30px;

    left:
        5%;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    color:
        rgba(255,255,255,0.5);

    font-size:
        0.58rem;

    letter-spacing:
        2px;

}


.scroll-line {

    width:
        60px;

    height:
        1px;

    background:
        rgba(255,255,255,0.35);

}


/* =====================================================
   SECTIONS
===================================================== */

.section {

    padding:
        110px 0;

}


.section-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        40px;

    margin-bottom:
        55px;

}


.section-heading.centered {

    display:
        block;

    max-width:
        700px;

    margin:
        0 auto 55px;

    text-align:
        center;

}


.eyebrow {

    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--brick-red);

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.section-heading h2,
.why-content h2 {

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        clamp(2rem, 4vw, 3.3rem);

    line-height:
        1.15;

}


.section-heading h2 span,
.why-content h2 span {

    color:
        var(--royal-blue);

}


.section-heading p {

    margin-top:
        18px;

    color:
        var(--gray);

}


.section-link {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--white);

    font-size:
        0.78rem;

    font-weight:
        700;

}


.section-link:hover i {

    transform:
        translateX(5px);

}


/* =====================================================
   ABOUT
===================================================== */

.about-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        80px;

    align-items:
        center;

}


.about-image {

    position:
        relative;

}


.image-placeholder {

    min-height:
        500px;

    border-radius:
        var(--radius);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    background:
        linear-gradient(
            135deg,
            var(--royal-blue-dark),
            var(--royal-blue)
        );

    color:
        rgba(255,255,255,0.7);

}


.image-placeholder i {

    font-size:
        5rem;

    margin-bottom:
        20px;

    opacity:
        0.4;

}


.image-placeholder span {

    letter-spacing:
        4px;

    font-weight:
        700;

    font-size:
        0.8rem;

}


.experience-card {

    position:
        absolute;

    right:
        -25px;

    bottom:
        35px;

    width:
        150px;

    padding:
        22px;

    border-radius:
        18px;

    background:
        var(--brick-red);

    color:
        var(--white);

    box-shadow:
        var(--shadow);

}


.experience-card strong {

    display:
        block;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        2rem;

}


.experience-card span {

    font-size:
        0.7rem;

    opacity:
        0.8;

}


.about-content .large-text {

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.45rem;

    line-height:
        1.5;

}


.about-content > p:not(.large-text) {

    margin:
        20px 0;

    color:
        var(--gray);

}


.about-features {

    display:
        grid;

    gap:
        12px;

    margin:
        30px 0;

}


.about-features div {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    font-size:
        0.85rem;

    font-weight:
        600;

}


.about-features i {

    width:
        26px;

    height:
        26px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(18,59,130,0.1);

    color:
        var(--royal-blue);

    font-size:
        0.7rem;

}


.text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    color:
        var(--royal-blue);

    font-weight:
        700;

    font-size:
        0.8rem;

}


.text-link i {

    transition:
        var(--transition);

}


.text-link:hover i {

    transform:
        translateX(5px);

}


/* =====================================================
   DARK SECTIONS
===================================================== */

.dark-section {

    background:
        var(--charcoal);

    color:
        var(--white);

}


.section-heading.light h2 {

    color:
        var(--white);

}


.section-heading.light h2 span {

    color:
        rgba(255,255,255,0.45);

}


/* =====================================================
   SERVICES
===================================================== */

.services-grid {

    display:
        grid;

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

    gap:
        15px;

}


.service-card {

    min-height:
        350px;

    padding:
        30px;

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    border:
        1px solid rgba(255,255,255,0.1);

    border-radius:
        var(--radius);

    background:
        rgba(255,255,255,0.035);

    transition:
        var(--transition);

}


.service-card:hover {

    transform:
        translateY(-10px);

    border-color:
        var(--brick-red);

}


.service-card.featured {

    background:
        var(--royal-blue);

}


.service-number {

    position:
        absolute;

    top:
        25px;

    right:
        25px;

    font-size:
        0.65rem;

    opacity:
        0.35;

}


.service-icon {

    width:
        55px;

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        35px;

    border-radius:
        14px;

    background:
        rgba(255,255,255,0.08);

    color:
        var(--brick-red);

    font-size:
        1.3rem;

}


.service-card h3 {

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.05rem;

}


.service-card p {

    margin:
        15px 0;

    color:
        rgba(255,255,255,0.55);

    font-size:
        0.75rem;

}


.service-card a {

    margin-top:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--white);

    font-size:
        0.7rem;

    font-weight:
        700;

}


/* =====================================================
   SOLUTIONS
===================================================== */

.solutions-grid {

    display:
        grid;

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

    gap:
        15px;

}


.solution-card {

    min-height:
        280px;

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        var(--radius);

    background:
        linear-gradient(
            135deg,
            var(--royal-blue-dark),
            var(--royal-blue)
        );

    color:
        var(--white);

    transition:
        var(--transition);

}


.solution-card:nth-child(2),
.solution-card:nth-child(4) {

    background:
        var(--charcoal);

}


.solution-card:hover {

    transform:
        translateY(-8px);

}


.solution-card.large {

    grid-row:
        span 2;

    min-height:
        575px;

}


.solution-content {

    position:
        absolute;

    inset:
        auto 0 0 0;

    padding:
        30px;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,0.8)
        );

}


.solution-content > span {

    font-size:
        0.65rem;

    opacity:
        0.5;

}


.solution-content h3 {

    margin:
        10px 0;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.2rem;

}


.solution-content p {

    color:
        rgba(255,255,255,0.65);

    font-size:
        0.73rem;

}


.solution-arrow {

    position:
        absolute;

    right:
        25px;

    bottom:
        25px;

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255,255,255,0.2);

    border-radius:
        50%;

}


/* =====================================================
   WHY US
===================================================== */

.why-grid {

    display:
        grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap:
        90px;

    align-items:
        center;

}


.why-content > p {

    margin:
        25px 0;

    max-width:
        500px;

    color:
        var(--gray);

}


.btn-dark {

    background:
        var(--charcoal);

    color:
        var(--white);

}


.btn-dark:hover {

    background:
        var(--royal-blue);

}


.why-cards {

    display:
        grid;

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

    gap:
        15px;

}


.why-card {

    display:
        flex;

    gap:
        18px;

    padding:
        25px;

    border:
        1px solid var(--light-gray);

    border-radius:
        var(--radius);

    transition:
        var(--transition);

}


.why-card:hover {

    border-color:
        var(--royal-blue);

    transform:
        translateY(-5px);

}


.why-icon {

    min-width:
        45px;

    height:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        rgba(18,59,130,0.08);

    color:
        var(--royal-blue);

}


.why-card h3 {

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        0.95rem;

}


.why-card p {

    margin-top:
        8px;

    color:
        var(--gray);

    font-size:
        0.72rem;

}


/* =====================================================
   PROJECTS
===================================================== */

.projects-grid {

    display:
        grid;

    grid-template-columns:
        1.4fr 0.8fr 0.8fr;

    gap:
        15px;

}


.project-card {

    min-height:
        360px;

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        var(--radius);

    background:
        var(--royal-blue-dark);

}


.project-large {

    min-height:
        500px;

}


.project-placeholder {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            var(--royal-blue),
            var(--charcoal)
        );

    color:
        rgba(255,255,255,0.35);

    transition:
        var(--transition);

}


.project-placeholder i {

    font-size:
        4rem;

    margin-bottom:
        15px;

}


.project-placeholder span {

    font-size:
        0.65rem;

    letter-spacing:
        2px;

}


.project-card:hover .project-placeholder {

    transform:
        scale(1.05);

}


.project-info {

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    padding:
        25px;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,0.9)
        );

}


.project-info span {

    font-size:
        0.58rem;

    color:
        rgba(255,255,255,0.5);

    letter-spacing:
        1px;

}


.project-info h3 {

    margin-top:
        5px;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1rem;

}


/* =====================================================
   STATS
===================================================== */

.stats {

    background:
        var(--royal-blue);

    color:
        var(--white);

}


.stats-grid {

    display:
        grid;

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

}


.stat {

    padding:
        20px;

    text-align:
        center;

    border-right:
        1px solid rgba(255,255,255,0.15);

}


.stat:last-child {

    border-right:
        none;

}


.stat strong {

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        3rem;

}


.stat span {

    font-size:
        1.3rem;

    color:
        var(--brick-red);

    font-weight:
        800;

}


.stat p {

    margin-top:
        5px;

    font-size:
        0.7rem;

    opacity:
        0.65;

}


/* =====================================================
   TESTIMONIALS
===================================================== */

.testimonial-slider {

    overflow:
        hidden;

}


.testimonial-track {

    display:
        flex;

    transition:
        transform 0.6s ease;

}


.testimonial {

    min-width:
        100%;

    padding:
        50px;

    border:
        1px solid var(--light-gray);

    border-radius:
        var(--radius);

    text-align:
        center;

}


.quote-icon {

    color:
        var(--brick-red);

    font-size:
        2rem;

}


.testimonial > p {

    max-width:
        750px;

    margin:
        25px auto;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.35rem;

}


.testimonial-person {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        12px;

}


.person-avatar {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--royal-blue);

    color:
        var(--white);

    font-size:
        0.65rem;

    font-weight:
        800;

}


.testimonial-person div:last-child {

    display:
        flex;

    flex-direction:
        column;

    text-align:
        left;

}


.testimonial-person strong {

    font-size:
        0.75rem;

}


.testimonial-person span {

    font-size:
        0.62rem;

    color:
        var(--gray);

}


.slider-dots {

    display:
        flex;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        25px;

}


.dot {

    width:
        8px;

    height:
        8px;

    padding:
        0;

    border:
        none;

    border-radius:
        50%;

    background:
        var(--light-gray);

    cursor:
        pointer;

}


.dot.active {

    width:
        25px;

    border-radius:
        10px;

    background:
        var(--brick-red);

}


/* =====================================================
   CONTACT CTA
===================================================== */

.contact-cta {

    position:
        relative;

    padding:
        120px 0;

    background:
        linear-gradient(
            135deg,
            var(--royal-blue-dark),
            var(--royal-blue)
        );

    color:
        var(--white);

    overflow:
        hidden;

}


.contact-cta::before {

    content:
        '';

    position:
        absolute;

    width:
        450px;

    height:
        450px;

    right:
        -150px;

    top:
        -150px;

    border:
        70px solid rgba(255,255,255,0.04);

    border-radius:
        50%;

}


.cta-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        750px;

}


.cta-content h2 {

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        clamp(2.3rem, 5vw, 4.5rem);

    line-height:
        1.1;

}


.cta-content h2 span {

    color:
        rgba(255,255,255,0.45);

}


.cta-content p {

    max-width:
        600px;

    margin:
        20px 0 30px;

    color:
        rgba(255,255,255,0.65);

}


.btn-red {

    background:
        var(--brick-red);

    color:
        var(--white);

}


.btn-red:hover {

    background:
        var(--brick-red-dark);

    transform:
        translateY(-3px);

}


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

.footer {

    padding:
        75px 0 25px;

    background:
        #151619;

    color:
        var(--white);

}


.footer-grid {

    display:
        grid;

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

    gap:
        50px;

    padding-bottom:
        60px;

}


.footer-brand p {

    max-width:
        350px;

    margin:
        22px 0;

    color:
        rgba(255,255,255,0.45);

    font-size:
        0.75rem;

}


.footer-logo .logo-text {

    color:
        var(--white);

}


.social-links {

    display:
        flex;

    gap:
        8px;

}


.social-links a {

    width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255,255,255,0.15);

    border-radius:
        9px;

    color:
        rgba(255,255,255,0.7);

    transition:
        var(--transition);

}


.social-links a:hover {

    background:
        var(--brick-red);

    border-color:
        var(--brick-red);

    color:
        var(--white);

}


.footer-column {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}


.footer-column h3 {

    margin-bottom:
        8px;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        0.8rem;

}


.footer-column a,
.footer-column span {

    color:
        rgba(255,255,255,0.48);

    font-size:
        0.7rem;

    transition:
        var(--transition);

}


.footer-column a:hover {

    color:
        var(--white);

}


.footer-column i {

    width:
        18px;

    color:
        var(--brick-red);

}


.footer-bottom {

    padding-top:
        22px;

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

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

}


.footer-bottom p,
.footer-bottom a {

    color:
        rgba(255,255,255,0.35);

    font-size:
        0.62rem;

}


.footer-bottom div {

    display:
        flex;

    gap:
        20px;

}


/* =====================================================
   REVEAL ANIMATION
===================================================== */

.reveal {

    opacity:
        0;

    transform:
        translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;

}


.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1050px) {

    .nav-links {
        gap: 15px;
    }

    .hero-container {
        grid-template-columns: 1fr;
    }

    .hero-card {
        max-width: 450px;
    }

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

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

}


@media (max-width: 800px) {

    .nav-links {

        position:
            fixed;

        top:
            80px;

        right:
            -100%;

        width:
            min(320px, 90%);

        padding:
            30px;

        flex-direction:
            column;

        align-items:
            flex-start;

        background:
            var(--charcoal);

        border-radius:
            20px;

        box-shadow:
            0 20px 50px rgba(0,0,0,0.3);

        transition:
            var(--transition);

    }


    .nav-links.active {
        right: 5%;
    }


    .nav-links a {
        color:
            var(--white) !important;

        font-size:
            0.9rem;

    }


    .nav-button {
        display:
            none;
    }


    .menu-button {
        display:
            block;
    }


    .about-grid,
    .why-grid {
        grid-template-columns:
            1fr;

        gap:
            50px;
    }


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


    .solution-card.large {
        grid-row:
            span 1;

        min-height:
            300px;
    }


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


    .project-large {
        grid-column:
            span 2;
    }


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


    .stat:nth-child(2) {
        border-right:
            none;
    }

}


@media (max-width: 600px) {

    .section {
        padding:
            80px 0;
    }


    .hero-container {
        padding-top:
            120px;
    }


    .hero h1 {
        font-size:
            clamp(2.7rem, 14vw, 4rem);

        letter-spacing:
            -2px;
    }


    .hero-description {
        font-size:
            0.85rem;
    }


    .hero-buttons {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .btn {
        width:
            100%;
    }


    .hero-card {
        display:
            none;
    }


    .hero-scroll {
        display:
            none;
    }


    .section-heading {
        display:
            block;
    }


    .section-heading h2 {
        font-size:
            2rem;
    }


    .section-link {
        margin-top:
            20px;
    }


    .services-grid,
    .solutions-grid,
    .why-cards,
    .projects-grid {
        grid-template-columns:
            1fr;
    }


    .project-large {
        grid-column:
            auto;
    }


    .experience-card {
        right:
            15px;
    }


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


    .stat {
        border-bottom:
            1px solid rgba(255,255,255,0.15);
    }


    .stat strong {
        font-size:
            2.2rem;
    }


    .testimonial {
        padding:
            30px 20px;
    }


    .testimonial > p {
        font-size:
            1rem;
    }


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


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


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

        gap:
            8px;
    }

}

/* =====================================================
   ABOUT PAGE
===================================================== */


/* =====================================================
   PAGE HERO
===================================================== */

.page-hero {

    min-height:
        65vh;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    background:
        linear-gradient(
            135deg,
            var(--royal-blue-dark),
            var(--royal-blue)
        );

    color:
        var(--white);

    overflow:
        hidden;

}


.page-hero::before {

    content:
        '';

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    right:
        -180px;

    top:
        -180px;

    border:
        80px solid rgba(255,255,255,0.035);

    border-radius:
        50%;

}


.page-hero::after {

    content:
        '';

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    left:
        -150px;

    bottom:
        -150px;

    border:
        50px solid rgba(122,46,46,0.2);

    border-radius:
        50%;

}


.page-hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 70% 60%,
            rgba(122,46,46,0.25),
            transparent 35%
        );

}


.page-hero .container {

    position:
        relative;

    z-index:
        2;

    padding-top:
        80px;

}


.page-hero-content {

    max-width:
        800px;

}


.page-hero-content h1 {

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        clamp(3rem, 6vw, 5rem);

    line-height:
        1.05;

    letter-spacing:
        -2px;

}


.page-hero-content h1 span {

    display:
        block;

    color:
        rgba(255,255,255,0.45);

}


.page-hero-content p {

    max-width:
        600px;

    margin:
        25px 0;

    color:
        rgba(255,255,255,0.65);

}


.breadcrumb {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        30px;

    font-size:
        0.7rem;

}


.breadcrumb a {

    color:
        rgba(255,255,255,0.55);

}


.breadcrumb i {

    font-size:
        0.55rem;

    color:
        var(--brick-red);

}


.breadcrumb span {

    color:
        var(--white);

}


/* =====================================================
   COMPANY INTRO
===================================================== */

.about-company-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        90px;

}


.about-company-image {

    position:
        relative;
    object-fit: cover;
    border-radius: 16px

}


.about-image-main {

    min-height:
        550px;

    border-radius:
        var(--radius);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            145deg,
            var(--royal-blue-dark),
            var(--royal-blue)
        );

    color:
        rgba(255,255,255,0.55);

    box-shadow:
        var(--shadow);

}


.about-image-main i {

    font-size:
        6rem;

    opacity:
        0.3;

    margin-bottom:
        20px;

}


.about-image-main span {

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        0.75rem;

    letter-spacing:
        4px;

}


.floating-badge {

    position:
        absolute;

    right:
        -30px;

    bottom:
        35px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        20px;

    min-width:
        180px;

    border-radius:
        18px;

    background:
        var(--brick-red);

    color:
        var(--white);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.2);

}


.floating-badge > i {

    font-size:
        1.5rem;

}


.floating-badge div {

    display:
        flex;

    flex-direction:
        column;

}


.floating-badge strong {

    font-family:
        'Montserrat',
        sans-serif;

}


.floating-badge span {

    font-size:
        0.65rem;

    opacity:
        0.7;

}


.about-company-content h2 {

    margin-bottom:
        25px;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        clamp(2rem, 4vw, 3.3rem);

    line-height:
        1.15;

}


.about-company-content h2 span {

    display:
        block;

    color:
        var(--royal-blue);

}


.about-company-content p {

    color:
        var(--gray);

}


.about-company-content .lead {

    margin-bottom:
        20px;

    font-size:
        1.05rem;

    color:
        var(--charcoal);

}


.company-points {

    display:
        grid;

    gap:
        13px;

    margin-top:
        30px;

}


.company-points div {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    font-size:
        0.8rem;

    font-weight:
        600;

}


.company-points i {

    color:
        var(--brick-red);

}


/* =====================================================
   MISSION
===================================================== */

.mission-section {

    background:
        var(--off-white);

}


.mission-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;

}


.mission-card {

    padding:
        45px;

    border-radius:
        var(--radius);

    background:
        var(--white);

    border:
        1px solid var(--light-gray);

    transition:
        var(--transition);

}


.mission-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        var(--shadow);

}


.mission-card.vision {

    background:
        var(--royal-blue);

    color:
        var(--white);

    border:
        none;

}


.mission-icon {

    width:
        60px;

    height:
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        30px;

    border-radius:
        15px;

    background:
        rgba(122,46,46,0.1);

    color:
        var(--brick-red);

    font-size:
        1.3rem;

}


.mission-card.vision .mission-icon {

    background:
        rgba(255,255,255,0.1);

}


.mission-card > span {

    font-size:
        0.62rem;

    letter-spacing:
        2px;

    font-weight:
        800;

    color:
        var(--brick-red);

}


.mission-card.vision > span {

    color:
        rgba(255,255,255,0.5);

}


.mission-card h3 {

    max-width:
        500px;

    margin:
        12px 0 18px;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.6rem;

}


.mission-card p {

    color:
        var(--gray);

    font-size:
        0.8rem;

}


.mission-card.vision p {

    color:
        rgba(255,255,255,0.6);

}


/* =====================================================
   VALUES
===================================================== */

.values-grid {

    display:
        grid;

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

    gap:
        15px;

}


.value-card {

    position:
        relative;

    min-height:
        280px;

    padding:
        30px;

    border:
        1px solid rgba(255,255,255,0.1);

    border-radius:
        var(--radius);

    background:
        rgba(255,255,255,0.035);

    transition:
        var(--transition);

}


.value-card:hover {

    transform:
        translateY(-8px);

    background:
        rgba(18,59,130,0.4);

    border-color:
        rgba(255,255,255,0.2);

}


.value-number {

    position:
        absolute;

    top:
        25px;

    right:
        25px;

    color:
        rgba(255,255,255,0.2);

    font-size:
        0.65rem;

    font-weight:
        700;

}


.value-icon {

    width:
        55px;

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        35px;

    border-radius:
        14px;

    background:
        rgba(122,46,46,0.2);

    color:
        #C75B5B;

}


.value-card h3 {

    margin-bottom:
        12px;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.05rem;

}


.value-card p {

    color:
        rgba(255,255,255,0.5);

    font-size:
        0.75rem;

}


/* =====================================================
   PROCESS
===================================================== */

.process-grid {

    display:
        grid;

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

    gap:
        20px;

}


.process-item {

    position:
        relative;

    padding:
        20px;

}


.process-number {

    margin-bottom:
        25px;

    color:
        var(--brick-red);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        0.75rem;

    font-weight:
        800;

}


.process-line {

    position:
        absolute;

    top:
        25px;

    left:
        65px;

    width:
        calc(100% - 50px);

    height:
        1px;

    background:
        var(--light-gray);

}


.process-item:last-child .process-line {

    display:
        none;

}


.process-item > i {

    width:
        60px;

    height:
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        25px;

    border-radius:
        16px;

    background:
        rgba(18,59,130,0.08);

    color:
        var(--royal-blue);

    font-size:
        1.25rem;

}


.process-item h3 {

    margin-bottom:
        10px;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1rem;

}


.process-item p {

    color:
        var(--gray);

    font-size:
        0.73rem;

}


/* =====================================================
   ABOUT STATS
===================================================== */

.about-stats {

    padding:
        70px 0;

    background:
        var(--royal-blue);

    color:
        var(--white);

}


.about-stats-grid {

    display:
        grid;

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

}


.about-stat {

    padding:
        20px;

    text-align:
        center;

    border-right:
        1px solid rgba(255,255,255,0.15);

}


.about-stat:last-child {

    border-right:
        none;

}


.about-stat strong {

    display:
        block;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        2.8rem;

}


.about-stat span {

    color:
        rgba(255,255,255,0.5);

    font-size:
        0.7rem;

}


.about-stat p {

    margin-top:
        5px;

    font-size:
        0.65rem;

    opacity:
        0.55;

}


/* =====================================================
   INNER CTA
===================================================== */

.inner-cta {

    padding:
        80px 0;

    background:
        var(--off-white);

}


.inner-cta-content {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    padding:
        55px;

    border-radius:
        var(--radius);

    background:
        var(--charcoal);

    color:
        var(--white);

}


.inner-cta-content h2 {

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        clamp(1.8rem, 4vw, 3rem);

    line-height:
        1.15;

}


.inner-cta-content h2 span {

    color:
        rgba(255,255,255,0.4);

}


@media (max-width: 900px) {

    .about-company-grid {

        grid-template-columns:
            1fr;

    }


    .mission-grid {

        grid-template-columns:
            1fr;

    }


    .values-grid {

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

    }


    .process-grid {

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

    }


    .process-line {

        display:
            none;

    }

}


@media (max-width: 600px) {

    .page-hero {

        min-height:
            58vh;

    }


    .page-hero-content h1 {

        font-size:
            2.8rem;

    }


    .about-image-main {

        min-height:
            400px;

    }


    .floating-badge {

        right:
            15px;

        bottom:
            20px;

    }


    .mission-card {

        padding:
            30px;

    }


    .values-grid,
    .process-grid {

        grid-template-columns:
            1fr;

    }


    .about-stats-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .about-stat {

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

    }


    .about-stat:nth-child(2) {

        border-right:
            none;

    }


    .inner-cta-content {

        padding:
            35px 25px;

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}

/* =====================================================
   SERVICES PAGE
===================================================== */


/* =====================================================
   SERVICES INTRO
===================================================== */

.services-intro {
    background: var(--white);
}

.services-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

.services-intro-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.15;
    margin-bottom: 25px;
}

.services-intro-content h2 span {
    display: block;
    color: var(--royal-blue);
}

.services-intro-content p {
    color: var(--gray);
}

.services-intro-content .lead {
    color: var(--charcoal);
    font-size: 1.05rem;
    margin-bottom: 18px;
}

.services-intro-content .btn {
    margin-top: 25px;
}


/* =====================================================
   ELEVATOR VISUAL
===================================================== */

.service-visual-box {
    min-height: 500px;
    border-radius: var(--radius);
    background:
        linear-gradient(
            145deg,
            var(--royal-blue-dark),
            var(--royal-blue)
        );
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-visual-box::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border: 60px solid rgba(255,255,255,0.035);
    border-radius: 50%;
}

.elevator-illustration {
    position: relative;
    z-index: 2;
}

.elevator-frame {
    width: 180px;
    height: 300px;
    border: 8px solid rgba(255,255,255,0.7);
    position: relative;
    display: flex;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
}

.elevator-door {
    width: 50%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.18),
            rgba(255,255,255,0.04)
        );
    border-right: 1px solid rgba(255,255,255,0.2);
}

.elevator-door.right {
    border-right: none;
}

.elevator-light {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 65px;
    height: 30px;
    background: var(--brick-red);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px 5px 0 0;
    color: white;
}

.elevator-light i {
    font-size: 0.8rem;
}

.floor-lines {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
}

.floor-lines span {
    display: block;
    height: 1px;
    background: rgba(255,255,255,0.15);
    margin-top: 15px;
}

.visual-label {
    position: absolute;
    bottom: 30px;
    left: 35px;
    display: flex;
    flex-direction: column;
}

.visual-label span {
    color: rgba(255,255,255,0.4);
    font-size: 0.65rem;
    letter-spacing: 3px;
}

.visual-label strong {
    color: white;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;
}


/* =====================================================
   MAIN SERVICES
===================================================== */

.main-services {
    background: var(--charcoal);
}

.services-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.service-large-card {
    position: relative;
    padding: 40px;
    min-height: 430px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.035);
    overflow: hidden;
    transition: var(--transition);
}

.service-large-card::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    bottom: -70px;
    border-radius: 50%;
    background: rgba(18,59,130,0.25);
    transition: var(--transition);
}

.service-large-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255,255,255,0.18);
}

.service-large-card:hover::after {
    transform: scale(1.5);
}

.service-number {
    position: absolute;
    top: 25px;
    right: 30px;
    color: rgba(255,255,255,0.15);
    font-size: 0.7rem;
    font-weight: 800;
}

.service-large-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 35px;
    border-radius: 17px;
    background: rgba(122,46,46,0.18);
    color: #D06464;
    font-size: 1.4rem;
}

.service-large-content {
    position: relative;
    z-index: 2;
}

.service-large-content > span {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.4);
}

.service-large-content h3 {
    margin: 10px 0 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    color: white;
}

.service-large-content p {
    max-width: 550px;
    color: rgba(255,255,255,0.5);
    font-size: 0.78rem;
    line-height: 1.8;
}

.service-large-content ul {
    list-style: none;
    margin: 25px 0;
    display: grid;
    gap: 10px;
}

.service-large-content li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.65);
    font-size: 0.7rem;
}

.service-large-content li i {
    color: #C75B5B;
    font-size: 0.65rem;
}

.service-large-content > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
}

.service-large-content > a i {
    color: #C75B5B;
    transition: var(--transition);
}

.service-large-content > a:hover i {
    transform: translateX(5px);
}


/* =====================================================
   SERVICE PROCESS
===================================================== */

.service-process {
    background: var(--off-white);
}

.service-process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.service-process-card {
    position: relative;
    padding: 30px 20px;
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: var(--radius);
    transition: var(--transition);
}

.service-process-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow);
}

.service-process-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 14px;
    background: rgba(18,59,130,0.08);
    color: var(--royal-blue);
}

.service-process-card > span {
    position: absolute;
    top: 20px;
    right: 20px;
    color: var(--brick-red);
    font-size: 0.6rem;
    font-weight: 800;
}

.service-process-card h3 {
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
}

.service-process-card p {
    color: var(--gray);
    font-size: 0.7rem;
    line-height: 1.7;
}


/* =====================================================
   SERVICE BENEFITS
===================================================== */

.service-benefits {
    background: var(--royal-blue-dark);
}

.service-benefits-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 90px;
    align-items: center;
}

.service-benefits-content h2 {
    margin: 15px 0 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.15;
    color: white;
}

.service-benefits-content h2 span {
    display: block;
    color: rgba(255,255,255,0.4);
}

.service-benefits-content p {
    margin-bottom: 30px;
    color: rgba(255,255,255,0.55);
    line-height: 1.8;
}

.benefits-list {
    display: grid;
    gap: 15px;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background: rgba(255,255,255,0.035);
    transition: var(--transition);
}

.benefit-item:hover {
    background: rgba(255,255,255,0.07);
    transform: translateX(6px);
}

.benefit-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(122,46,46,0.2);
    color: #D06464;
}

.benefit-item h3 {
    margin-bottom: 6px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
}

.benefit-item p {
    margin: 0;
    color: rgba(255,255,255,0.45);
    font-size: 0.7rem;
    line-height: 1.7;
}


/* =====================================================
   SERVICES RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .service-process-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .service-benefits-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

}


@media (max-width: 850px) {

    .services-intro-grid {
        grid-template-columns: 1fr;
    }

    .services-list {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .service-visual-box {
        min-height: 400px;
    }

    .services-list {
        gap: 12px;
    }

    .service-large-card {
        padding: 30px 25px;
        min-height: auto;
    }

    .service-process-grid {
        grid-template-columns: 1fr;
    }

    .service-process-card {
        padding: 25px;
    }

    .benefit-item {
        padding: 20px;
    }

}

/* =====================================================
   SOLUTIONS PAGE
===================================================== */

.solutions-intro {
    background: var(--white);
}

.solutions-intro-grid {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    align-items: center;
    gap: 100px;
}

.solutions-intro-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.15;
    margin-bottom: 25px;
}

.solutions-intro-content h2 span {
    display: block;
    color: var(--royal-blue);
}

.solutions-intro-content p {
    color: var(--gray);
}

.solutions-intro-content .lead {
    color: var(--charcoal);
    font-size: 1rem;
    margin-bottom: 18px;
}

.solutions-intro-stat {
    min-height: 330px;
    padding: 45px;
    border-radius: var(--radius);
    background: var(--royal-blue);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.solutions-intro-stat::after {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    right: -130px;
    bottom: -130px;
    border: 50px solid rgba(255,255,255,0.05);
    border-radius: 50%;
}

.big-number {
    position: relative;
    z-index: 2;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 800;
    line-height: 1;
}

.solutions-intro-stat > span {
    position: relative;
    z-index: 2;
    margin-top: 15px;
    font-size: 0.65rem;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.55);
}

.solutions-intro-stat p {
    position: relative;
    z-index: 2;
    max-width: 280px;
    margin-top: 15px;
    color: rgba(255,255,255,0.65);
    font-size: 0.75rem;
}


/* =====================================================
   SOLUTION GRID
===================================================== */

.solution-categories {
    background: var(--charcoal);
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.solution-card {
    border-radius: var(--radius);
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: var(--transition);
}

.solution-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255,255,255,0.2);
}

.solution-card-visual {
    height: 280px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.passenger-visual {
    background:
        linear-gradient(
            145deg,
            #0A2D62,
            #123B82
        );
}

.freight-visual {
    background:
        linear-gradient(
            145deg,
            #292D32,
            #41464C
        );
}

.glass-visual {
    background:
        linear-gradient(
            145deg,
            #123B82,
            #315D9D
        );
}

.home-visual {
    background:
        linear-gradient(
            145deg,
            #3A1F24,
            #7A2E2E
        );
}

.hospital-visual {
    background:
        linear-gradient(
            145deg,
            #153A4D,
            #24617A
        );
}

.custom-visual {
    background:
        linear-gradient(
            145deg,
            #22262B,
            #123B82
        );
}


/* PASSENGER ILLUSTRATION */

.solution-elevator {
    position: relative;
    width: 170px;
    height: 220px;
    border: 7px solid rgba(255,255,255,0.7);
    display: flex;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
}

.solution-door {
    width: 50%;
    height: 100%;
    border-right: 1px solid rgba(255,255,255,0.2);
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.15),
            rgba(255,255,255,0.03)
        );
}

.solution-floor-indicator {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brick-red);
    color: white;
    padding: 8px 18px;
    font-size: 0.65rem;
}


/* FREIGHT */

.solution-box {
    width: 160px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid rgba(255,255,255,0.35);
    color: rgba(255,255,255,0.5);
    font-size: 3rem;
    transform: perspective(500px) rotateX(10deg);
}


/* GLASS */

.glass-elevator {
    width: 160px;
    height: 230px;
    display: flex;
    gap: 5px;
    padding: 8px;
    border: 4px solid rgba(255,255,255,0.7);
    transform: perspective(600px) rotateY(-12deg);
}

.glass-elevator div {
    flex: 1;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
}


/* HOME */

.home-elevator {
    width: 180px;
    height: 180px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid rgba(255,255,255,0.6);
}

.home-elevator > i {
    position: absolute;
    top: -45px;
    color: rgba(255,255,255,0.7);
    font-size: 1.7rem;
}

.home-lift {
    width: 75px;
    height: 110px;
    border: 3px solid rgba(255,255,255,0.5);
}


/* HOSPITAL */

.hospital-symbol {
    width: 110px;
    height: 110px;
    border: 2px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 4rem;
}


/* CUSTOM */

.custom-symbol {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    color: white;
    font-size: 2.5rem;
}


/* CARD CONTENT */

.solution-card-content {
    padding: 35px;
}

.solution-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.solution-card-top span {
    color: rgba(255,255,255,0.4);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.solution-card-top > i {
    color: #C75B5B;
}

.solution-card h3 {
    margin: 15px 0;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.35rem;
}

.solution-card-content > p {
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
    line-height: 1.8;
}

.solution-card-content ul {
    list-style: none;
    display: grid;
    gap: 9px;
    margin: 22px 0;
}

.solution-card-content li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,0.6);
    font-size: 0.68rem;
}

.solution-card-content li i {
    color: #C75B5B;
    font-size: 0.55rem;
}

.solution-card-content > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
}

.solution-card-content > a i {
    color: #C75B5B;
    transition: var(--transition);
}

.solution-card-content > a:hover i {
    transform: translateX(5px);
}


/* =====================================================
   SELECTION GUIDE
===================================================== */

.selection-section {
    background: var(--off-white);
}

.selection-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 100px;
    align-items: center;
}

.selection-content h2 {
    margin: 15px 0 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.15;
}

.selection-content h2 span {
    display: block;
    color: var(--royal-blue);
}

.selection-content p {
    color: var(--gray);
    line-height: 1.8;
    margin-bottom: 25px;
}

.selection-list {
    display: grid;
    gap: 12px;
}

.selection-item {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 22px;
    background: white;
    border: 1px solid var(--light-gray);
    border-radius: 16px;
    transition: var(--transition);
}

.selection-item:hover {
    transform: translateX(7px);
    box-shadow: var(--shadow);
}

.selection-item > span {
    color: var(--brick-red);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
}

.selection-item strong {
    display: block;
    margin-bottom: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
}

.selection-item p {
    margin: 0;
    color: var(--gray);
    font-size: 0.68rem;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 900px) {

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

    .selection-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

}


@media (max-width: 750px) {

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

}


@media (max-width: 550px) {

    .solution-card-visual {
        height: 230px;
    }

    .solution-card-content {
        padding: 28px 24px;
    }

    .solutions-intro-stat {
        min-height: 270px;
        padding: 35px;
    }

    .selection-item {
        padding: 18px;
        gap: 17px;
    }

}

/* =====================================================
   PROJECTS PAGE
===================================================== */

.projects-intro {
    background: var(--white);
}

.projects-intro-grid {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 90px;
    align-items: center;
}

.projects-intro-content h2 {
    margin: 15px 0 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.15;
}

.projects-intro-content h2 span {
    display: block;
    color: var(--royal-blue);
}

.projects-intro-content p {
    color: var(--gray);
}

.projects-intro-content .lead {
    color: var(--charcoal);
    font-size: 1rem;
    margin-bottom: 18px;
}


/* =====================================================
   PROJECT HIGHLIGHT
===================================================== */

.project-highlight {
    min-height: 330px;
    padding: 45px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--royal-blue);
    color: white;
}

.project-highlight::before {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    right: -170px;
    top: -170px;
    border: 55px solid rgba(255,255,255,0.04);
    border-radius: 50%;
}

.project-highlight-icon {
    position: relative;
    z-index: 2;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 35px;
    border-radius: 15px;
    background: rgba(255,255,255,0.1);
    font-size: 1.4rem;
}

.project-highlight strong {
    position: relative;
    z-index: 2;
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    line-height: 1.1;
}

.project-highlight strong span {
    display: block;
    color: rgba(255,255,255,0.35);
}

.project-highlight p {
    position: relative;
    z-index: 2;
    max-width: 300px;
    margin-top: 15px;
    color: rgba(255,255,255,0.6);
    font-size: 0.75rem;
}

.project-highlight-line {
    width: 60px;
    height: 3px;
    margin-top: 25px;
    background: var(--brick-red);
}


/* =====================================================
   PORTFOLIO
===================================================== */

.portfolio-section {
    background: var(--charcoal);
}

.project-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 35px;
}

.filter-btn {
    padding: 11px 20px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50px;
    background: transparent;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    transition: var(--transition);
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--brick-red);
    border-color: var(--brick-red);
    color: white;
}

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

.project-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.035);
    transition: var(--transition);
}

.project-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255,255,255,0.18);
}

.project-card.hide {
    display: none;
}


/* =====================================================
   PROJECT VISUALS
===================================================== */

.project-image {
    height: 270px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-image::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 240px;
    border: 7px solid rgba(255,255,255,0.18);
    border-bottom: none;
    transform: perspective(500px) rotateY(-8deg);
}

.project-image-one {
    background: linear-gradient(
        145deg,
        #0B2C60,
        #16458F
    );
}

.project-image-two {
    background: linear-gradient(
        145deg,
        #5A262C,
        #7A2E2E
    );
}

.project-image-three {
    background: linear-gradient(
        145deg,
        #25292E,
        #41474D
    );
}

.project-image-four {
    background: linear-gradient(
        145deg,
        #102E55,
        #123B82
    );
}

.project-image-five {
    background: linear-gradient(
        145deg,
        #234A5C,
        #346F82
    );
}

.project-image-six {
    background: linear-gradient(
        145deg,
        #3A2528,
        #654045
    );
}

.project-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.55),
            transparent 60%
        );
}

.project-type {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 8px 12px;
    border-radius: 50px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.75);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.project-image-icon {
    position: relative;
    z-index: 2;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.65);
    font-size: 1.7rem;
    backdrop-filter: blur(8px);
}

.project-view {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brick-red);
    color: white;
    font-size: 0.7rem;
    transition: var(--transition);
}

.project-card:hover .project-view {
    transform: rotate(45deg);
}


/* =====================================================
   PROJECT CONTENT
===================================================== */

.project-card-content {
    padding: 28px;
}

.project-card-content > span {
    color: #C75B5B;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.project-card-content h3 {
    margin: 10px 0;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
}

.project-card-content > p {
    min-height: 45px;
    color: rgba(255,255,255,0.45);
    font-size: 0.68rem;
    line-height: 1.7;
}

.project-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.project-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.35);
    font-size: 0.58rem;
}

.project-meta i {
    color: #C75B5B;

}


/* =====================================================
   PROJECT APPROACH
===================================================== */

.project-approach {
    background: var(--off-white);
}

.approach-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.approach-card {
    position: relative;
    padding: 35px 25px;
    border: 1px solid var(--light-gray);
    border-radius: var(--radius);
    background: white;
    transition: var(--transition);
}

.approach-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow);
}

.approach-number {
    position: absolute;
    top: 20px;
    right: 20px;
    color: var(--brick-red);
    font-size: 0.6rem;
    font-weight: 800;
}

.approach-card > i {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 14px;
    background: rgba(18,59,130,0.08);
    color: var(--royal-blue);
}

.approach-card h3 {
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
}

.approach-card p {
    color: var(--gray);
    font-size: 0.68rem;
    line-height: 1.7;
}


/* =====================================================
   PROJECT CTA
===================================================== */

.project-cta {
    padding: 80px 0;
    background: var(--white);
}

.project-cta-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 35px;
    padding: 50px;
    border-radius: var(--radius);
    background: var(--royal-blue);
    color: white;
    position: relative;
    overflow: hidden;
}

.project-cta-inner::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    right: -130px;
    bottom: -170px;
    border: 50px solid rgba(255,255,255,0.04);
    border-radius: 50%;
}

.project-cta-icon {
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: var(--brick-red);
    color: white;
    font-size: 1.5rem;
}

.project-cta-inner h2 {
    margin: 8px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.project-cta-inner h2 span {
    color: rgba(255,255,255,0.4);
}

.project-cta-inner p {
    color: rgba(255,255,255,0.55);
    font-size: 0.75rem;
}

.project-cta-inner > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
}

.project-cta-inner > a i {
    color: #C75B5B;
    transition: var(--transition);
}

.project-cta-inner > a:hover i {
    transform: translateX(4px);
}


/* =====================================================
   PROJECT RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

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

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

    .projects-intro-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

}

@media (max-width: 700px) {

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

    .project-image {
        height: 240px;
    }

    .project-cta-inner {
        grid-template-columns: 1fr;
        padding: 35px 25px;
    }

}

@media (max-width: 550px) {

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

    .project-filter {
        gap: 6px;
    }

    .filter-btn {
        padding: 9px 14px;
        font-size: 0.6rem;
    }

    .project-card-content {
        padding: 24px;
    }

}

/* =====================================================
   CONTACT PAGE
===================================================== */

.contact-main {
    background: var(--white);
}

.contact-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 80px;
    align-items: start;
}


/* =====================================================
   CONTACT INFORMATION
===================================================== */

.contact-information {
    padding-top: 15px;
}

.contact-information h2 {
    margin: 15px 0 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.15;
}

.contact-information h2 span {
    display: block;
    color: var(--royal-blue);
}

.contact-lead {
    max-width: 500px;
    color: var(--gray);
    font-size: 0.85rem;
    line-height: 1.9;
}

.contact-details {
    display: grid;
    gap: 12px;
    margin-top: 35px;
}

.contact-detail {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--light-gray);
    border-radius: 15px;
    background: var(--off-white);
    transition: var(--transition);
}

.contact-detail:hover {
    transform: translateX(6px);
    box-shadow: var(--shadow);
}

.contact-detail-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(18,59,130,0.08);
    color: var(--royal-blue);
}

.contact-detail span {
    display: block;
    margin-bottom: 5px;
    color: var(--gray);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.contact-detail strong {
    color: var(--charcoal);
    font-size: 0.78rem;
}


/* =====================================================
   QUICK CONTACT
===================================================== */

.quick-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 25px;
    padding: 25px;
    border-radius: 16px;
    background: var(--charcoal);
    color: white;
}

.quick-contact span {
    display: block;
    margin-bottom: 6px;
    color: rgba(255,255,255,0.4);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.quick-contact strong {
    color: white;
    font-size: 0.75rem;
}

.quick-contact-button {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brick-red);
    color: white;
    transition: var(--transition);
}

.quick-contact-button:hover {
    transform: translateY(5px);
}


/* =====================================================
   QUOTE CARD
===================================================== */

.quote-card {
    padding: 45px;
    border-radius: var(--radius);
    background: var(--off-white);
    border: 1px solid var(--light-gray);
    box-shadow: var(--shadow);
}

.quote-card-header {
    margin-bottom: 30px;
}

.quote-card-header h2 {
    margin: 10px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
}

.quote-card-header p {
    color: var(--gray);
    font-size: 0.72rem;
}

.quote-card form {
    display: grid;
    gap: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    color: var(--charcoal);
    font-size: 0.62rem;
    font-weight: 700;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid #DDE1E6;
    outline: none;
    border-radius: 10px;
    background: white;
    color: var(--charcoal);
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    transition: var(--transition);
}

.form-group textarea {
    resize: vertical;
    min-height: 130px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #A8ADB4;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--royal-blue);
    box-shadow: 0 0 0 3px rgba(18,59,130,0.08);
}

.form-consent {
    margin-top: 3px;
}

.form-consent label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--gray);
    font-size: 0.58rem;
    line-height: 1.5;
    cursor: pointer;
}

.form-consent input {
    margin-top: 2px;
    accent-color: var(--royal-blue);
}

.form-submit {
    width: 100%;
    justify-content: center;
    border: none;
    cursor: pointer;
    margin-top: 5px;
}

.form-message {
    display: none;
    padding: 12px 15px;
    border-radius: 9px;
    background: rgba(18,59,130,0.08);
    color: var(--royal-blue);
    font-size: 0.65rem;
}

.form-message.show {
    display: block;
}


/* =====================================================
   CONTACT SERVICES
===================================================== */

.contact-services {
    padding: 100px 0;
    background: var(--charcoal);
}

.contact-services-heading {
    margin-bottom: 40px;
}

.contact-services-heading h2 {
    margin-top: 15px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
}

.contact-services-heading h2 span {
    display: block;
    color: rgba(255,255,255,0.35);
}

.contact-service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.contact-service-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 25px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 17px;
    background: rgba(255,255,255,0.035);
    color: white;
    transition: var(--transition);
}

.contact-service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.06);
}

.contact-service-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--brick-red);
    color: white;
}

.contact-service-card > div:nth-child(2) > span {
    color: rgba(255,255,255,0.3);
    font-size: 0.55rem;
    font-weight: 800;
}

.contact-service-card h3 {
    margin: 4px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
}

.contact-service-card p {
    color: rgba(255,255,255,0.4);
    font-size: 0.62rem;
}

.contact-service-card > i {
    color: #C75B5B;
    transition: var(--transition);
}

.contact-service-card:hover > i {
    transform: translateX(5px);
}


/* =====================================================
   FAQ
===================================================== */

.faq-section {
    background: var(--off-white);
}

.faq-list {
    max-width: 850px;
    margin: 45px auto 0;
}

.faq-item {
    border-bottom: 1px solid var(--light-gray);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 23px 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--charcoal);
    cursor: pointer;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
}

.faq-question i {
    color: var(--brick-red);
    transition: var(--transition);
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: 0.35s ease;
}

.faq-answer p {
    overflow: hidden;
    color: var(--gray);
    font-size: 0.7rem;
    line-height: 1.8;
}

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}

.faq-item.active .faq-answer p {
    padding-bottom: 23px;
}


/* =====================================================
   FINAL CONTACT CTA
===================================================== */

.contact-final-cta {
    padding: 80px 0;
    background: white;
}

.contact-final-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 30px;
    padding: 50px;
    border-radius: var(--radius);
    background: var(--royal-blue);
    color: white;
    position: relative;
    overflow: hidden;
}

.contact-final-inner::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    right: -130px;
    bottom: -160px;
    border: 50px solid rgba(255,255,255,0.04);
    border-radius: 50%;
}

.contact-final-icon {
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: var(--brick-red);
    font-size: 1.5rem;
}

.contact-final-inner h2 {
    margin: 8px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.contact-final-inner h2 span {
    color: rgba(255,255,255,0.35);
}

.contact-final-inner p {
    color: rgba(255,255,255,0.5);
    font-size: 0.7rem;
}


/* =====================================================
   CONTACT RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

}

@media (max-width: 750px) {

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

    .contact-final-inner {
        grid-template-columns: 1fr;
        padding: 35px 25px;
    }

}

@media (max-width: 550px) {

    .quote-card {
        padding: 28px 20px;
    }

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

    .contact-service-card {
        grid-template-columns: auto 1fr;
    }

    .contact-service-card > i {
        display: none;
    }

    .quick-contact {
        align-items: flex-start;
    }

}

/* =====================================================
   HOME PAGE
===================================================== */


/* =====================================================
   HERO
===================================================== */

.home-hero {
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--charcoal);
    color: white;
}

.hero-background {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 75% 40%,
            rgba(18,59,130,0.55),
            transparent 38%
        ),
        linear-gradient(
            110deg,
            #101318 0%,
            #151A20 45%,
            #0C1F40 100%
        );
}

.hero-grid {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image:
        linear-gradient(
            rgba(255,255,255,0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.05) 1px,
            transparent 1px
        );
    background-size: 70px 70px;
    mask-image: linear-gradient(
        to right,
        black,
        transparent
    );
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 900px;
    padding-top: 80px;
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    color: rgba(255,255,255,0.55);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.hero-eyebrow span {
    width: 35px;
    height: 2px;
    background: var(--brick-red);
}

.hero-content h1 {
    max-width: 900px;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3rem, 8vw, 7rem);
    line-height: 0.98;
    letter-spacing: -4px;
}

.hero-content h1 span {
    display: block;
    color: rgba(255,255,255,0.3);
}

.hero-content > p {
    max-width: 600px;
    margin: 30px 0;
    color: rgba(255,255,255,0.55);
    font-size: 0.85rem;
    line-height: 1.9;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-outline-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    transition: var(--transition);
}

.hero-outline-button:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.35);
}

.hero-outline-button i {
    transform: rotate(45deg);
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 45px;
    margin-top: 65px;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.hero-trust strong {
    display: block;
    margin-bottom: 5px;
    color: rgba(255,255,255,0.75);
    font-size: 0.6rem;
    letter-spacing: 1px;
}

.hero-trust span {
    color: rgba(255,255,255,0.3);
    font-size: 0.58rem;
}

.hero-scroll {
    position: absolute;
    right: 40px;
    bottom: 35px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.35);
    font-size: 0.5rem;
    letter-spacing: 1.5px;
}

.hero-scroll i {
    color: var(--brick-red);
}


/* =====================================================
   HOME INTRO
===================================================== */

.home-intro {
    background: white;
}

.home-intro-grid {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 100px;
    align-items: center;
}

.home-intro h2 {
    margin-top: 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.08;
}

.home-intro h2 span {
    display: block;
    color: var(--royal-blue);
}

.home-intro-copy p {
    color: var(--gray);
    font-size: 0.8rem;
    line-height: 1.9;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
    color: var(--royal-blue);
    font-size: 0.65rem;
    font-weight: 800;
}

.text-link i {
    transition: var(--transition);
}

.text-link:hover i {
    transform: translateX(5px);
}


/* =====================================================
   VIDEO SECTION
===================================================== */

.home-video-section {
    padding: 110px 0;
    background: var(--off-white);
}

.video-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 50px;
    margin-bottom: 45px;
}

.video-heading h2 {
    margin-top: 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.1;
}

.video-heading h2 span {
    display: block;
    color: var(--royal-blue);
}

.video-heading > p {
    max-width: 350px;
    color: var(--gray);
    font-size: 0.7rem;
    line-height: 1.8;
}


/* VIDEO */

.elevator-video {
    height: min(650px, 65vw);
    min-height: 400px;
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    background: #101318;
    box-shadow: 0 30px 70px rgba(0,0,0,0.18);
}

.elevator-video-element {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.75),
            rgba(0,0,0,0.05) 65%
        );
}

.video-content {
    position: absolute;
    left: 40px;
    bottom: 45px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    color: white;
}

.video-play-indicator {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
}

.video-play-indicator i {
    color: white;
}

.video-content span {
    color: rgba(255,255,255,0.5);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.video-content h3 {
    margin-top: 7px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.3rem, 3vw, 2.3rem);
}

.video-content h3 strong {
    color: rgba(255,255,255,0.4);
}

.video-status {
    position: absolute;
    right: 35px;
    bottom: 35px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50px;
    background: rgba(0,0,0,0.25);
    color: rgba(255,255,255,0.5);
    backdrop-filter: blur(8px);
    font-size: 0.5rem;
    letter-spacing: 1px;
}

.video-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brick-red);
}

.elevator-video.playing .video-status-dot {
    animation: videoPulse 1.5s infinite;
}

@keyframes videoPulse {

    0% {
        box-shadow: 0 0 0 0 rgba(139,45,45,0.7);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(139,45,45,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(139,45,45,0);
    }

}

.video-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    height: 3px;
    background: rgba(255,255,255,0.08);
}

.video-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--brick-red);
}


/* =====================================================
   ABOUT PREVIEW
===================================================== */

.home-about-preview {
    background: white;
}

.about-preview-grid {
    display: grid;
    grid-template-columns: 0.9fr 1fr;
    gap: 100px;
    align-items: center;
}

.about-preview-visual {
    min-height: 500px;
    padding: 30px;
}

.about-visual-inner {
    height: 100%;
    min-height: 450px;
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    background:
        linear-gradient(
            145deg,
            var(--royal-blue),
            #071A38
        );
}

.about-visual-inner::before {
    content: '';
    position: absolute;
    width: 260px;
    height: 430px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 8px solid rgba(255,255,255,0.12);
    border-bottom: none;
}

.about-visual-inner::after {
    content: '';
    position: absolute;
    width: 340px;
    height: 340px;
    right: -180px;
    bottom: -180px;
    border: 50px solid rgba(255,255,255,0.04);
    border-radius: 50%;
}

.about-visual-number {
    position: absolute;
    top: 40px;
    left: 40px;
    color: rgba(255,255,255,0.06);
    font-family: 'Montserrat', sans-serif;
    font-size: 7rem;
    font-weight: 800;
}

.about-visual-label {
    position: absolute;
    left: 40px;
    bottom: 40px;
    z-index: 2;
    color: white;
}

.about-visual-label span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255,255,255,0.45);
    font-size: 0.55rem;
    letter-spacing: 2px;
}

.about-visual-label strong {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
}

.about-visual-lines {
    position: absolute;
    right: 45px;
    top: 45px;
    width: 60px;
    height: 60px;
    border-top: 2px solid var(--brick-red);
    border-right: 2px solid var(--brick-red);
}

.about-preview-content h2 {
    margin: 15px 0 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.1;
}

.about-preview-content h2 span {
    display: block;
    color: var(--royal-blue);
}

.about-preview-content p {
    margin-bottom: 15px;
    color: var(--gray);
    font-size: 0.75rem;
    line-height: 1.9;
}

.about-preview-points {
    display: grid;
    gap: 12px;
    margin: 30px 0;
}

.about-preview-points div {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--charcoal);
    font-size: 0.65rem;
    font-weight: 700;
}

.about-preview-points i {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(18,59,130,0.08);
    color: var(--royal-blue);
}


/* =====================================================
   SERVICES
===================================================== */

.home-services {
    background: var(--off-white);
}

.home-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 45px;
}

.home-service-card {
    min-height: 330px;
    position: relative;
    padding: 30px;
    overflow: hidden;
    border: 1px solid var(--light-gray);
    border-radius: 20px;
    background: white;
    transition: var(--transition);
}

.home-service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow);
}

.service-card-number {
    position: absolute;
    top: 25px;
    right: 25px;
    color: #D9DDE2;
    font-size: 0.6rem;
    font-weight: 800;
}

.home-service-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 45px;
    border-radius: 15px;
    background: var(--royal-blue);
    color: white;
}

.home-service-card h3 {
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
}

.home-service-card p {
    color: var(--gray);
    font-size: 0.65rem;
    line-height: 1.8;
}

.service-card-link {
    position: absolute;
    bottom: 25px;
    left: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--brick-red);
    font-size: 0.6rem;
    font-weight: 800;
}

.service-card-link i {
    transition: var(--transition);
}

.home-service-card:hover .service-card-link i {
    transform: translateX(5px);
}

.center-button {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}


/* =====================================================
   SOLUTIONS
===================================================== */

.home-solutions {
    padding: 110px 0;
    background: var(--charcoal);
    color: white;
}

.solutions-preview-header {
    max-width: 700px;
    margin-bottom: 45px;
}

.solutions-preview-header h2 {
    margin: 15px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.1rem, 5vw, 4rem);
    line-height: 1.05;
}

.solutions-preview-header h2 span {
    display: block;
    color: rgba(255,255,255,0.3);
}

.solutions-preview-header p {
    color: rgba(255,255,255,0.45);
    font-size: 0.75rem;
}

.solutions-preview-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    grid-template-rows: 280px 280px;
    gap: 12px;
}

.solution-preview-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: #1A2028;
}

.solution-preview-card.large {
    grid-row: span 2;
}

.solution-preview-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            145deg,
            #0D326D,
            #071A38
        );
    transition: transform 0.7s ease;
}

.solution-preview-card:hover .solution-preview-bg {
    transform: scale(1.08);
}

.solution-bg-two {
    background:
        linear-gradient(
            145deg,
            #642A2E,
            #311A1D
        );
}

.solution-bg-three {
    background:
        linear-gradient(
            145deg,
            #35404B,
            #1A2028
        );
}

.solution-bg-four {
    background:
        linear-gradient(
            145deg,
            #315A70,
            #182E3A
        );
}

.solution-preview-bg::before {
    content: '';
    position: absolute;
    width: 130px;
    height: 210px;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    border: 6px solid rgba(255,255,255,0.12);
    border-bottom: none;
}

.solution-preview-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.75),
            transparent 70%
        );
}

.solution-preview-content > span {
    color: rgba(255,255,255,0.35);
    font-size: 0.55rem;
    font-weight: 800;
}

.solution-preview-content h3 {
    margin: 7px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
}

.solution-preview-content p {
    max-width: 350px;
    color: rgba(255,255,255,0.5);
    font-size: 0.6rem;
    line-height: 1.7;
}

.solution-preview-content > i {
    position: absolute;
    right: 25px;
    bottom: 25px;
    color: #C75B5B;
    transition: var(--transition);
}

.solution-preview-card:hover .solution-preview-content > i {
    transform: translateX(5px);
}

.light-link {
    color: white;
}


/* =====================================================
   PROJECTS
===================================================== */

.home-projects {
    background: white;
}

.project-heading {
    max-width: 700px;
}

.home-project-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 12px;
    margin-top: 45px;
}

.home-project-card {
    min-height: 430px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: var(--charcoal);
}

.home-project-card:hover {
    transform: scale(1.08);
}

.project-card-one {
    background:
        linear-gradient(
            145deg,
            #0D326D,
            #071A38
        );
}


.project-card-two {
    background:
        linear-gradient(
            145deg,
            #6A2C31,
            #351B1E
        );
}

.project-card-three {
    background:
        linear-gradient(
            145deg,
            #3B434A,
            #191E23
        );
}

.home-project-card::before {
    content: '';
    position: absolute;
    width: 170px;
    height: 250px;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    border: 7px solid rgba(255,255,255,0.1);
    border-bottom: none;
}

.home-project-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.8),
            transparent 70%
        );
}

.home-project-content {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 30px;
    z-index: 2;
    color: white;
}

.home-project-content span {
    color: rgba(255,255,255,0.4);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.home-project-content h3 {
    margin: 8px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
}

.home-project-content i {
    color: #C75B5B;
}


/* =====================================================
   WHY LAN-SUTTY
===================================================== */

.home-why {
    padding: 110px 0;
    background: var(--off-white);
}

.why-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 100px;
    align-items: center;
}

.why-content h2 {
    margin: 15px 0 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.1;
}

.why-content h2 span {
    display: block;
    color: var(--royal-blue);
}

.why-content > p {
    color: var(--gray);
    font-size: 0.75rem;
    line-height: 1.9;
    margin-bottom: 30px;
}

.why-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.why-feature {
    display: flex;
    gap: 15px;
    padding: 25px;
    border: 1px solid var(--light-gray);
    border-radius: 17px;
    background: white;
}

.why-feature-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(18,59,130,0.08);
    color: var(--royal-blue);
}

.why-feature h3 {
    margin-bottom: 7px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
}

.why-feature p {
    color: var(--gray);
    font-size: 0.6rem;
    line-height: 1.7;
}


/* =====================================================
   FINAL CTA
===================================================== */

.home-final-cta {
    padding: 80px 0;
    background: white;
}

.home-final-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 30px;
    padding: 55px;
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    background: var(--royal-blue);
    color: white;
}

.home-final-inner::after {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    right: -170px;
    bottom: -180px;
    border: 55px solid rgba(255,255,255,0.04);
    border-radius: 50%;
}

.home-final-icon {
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: var(--brick-red);
    font-size: 1.5rem;
}

.home-final-inner h2 {
    margin: 8px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
}

.home-final-inner h2 span {
    color: rgba(255,255,255,0.35);
}

.home-final-inner p {
    color: rgba(255,255,255,0.5);
    font-size: 0.7rem;
}


/* =====================================================
   HOME RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .home-intro-grid,
    .about-preview-grid,
    .why-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .home-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .solutions-preview-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 300px 250px 250px;
    }

    .solution-preview-card.large {
        grid-row: span 1;
        grid-column: span 2;
    }

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

    .home-project-card:first-child {
        grid-column: span 2;
    }

}

@media (max-width: 700px) {

    .hero-content h1 {
        letter-spacing: -2px;
    }

    .hero-scroll {
        display: none;
    }

    .hero-trust {
        gap: 20px;
    }

    .video-heading {
        display: block;
    }

    .video-heading > p {
        margin-top: 20px;
    }

    .elevator-video {
        min-height: 420px;
        height: 100vw;
    }

    .video-content {
        left: 25px;
        bottom: 35px;
    }

    .video-status {
        right: 20px;
        top: 20px;
        bottom: auto;
    }

    .about-preview-visual {
        padding: 0;
    }

    .about-visual-inner {
        min-height: 400px;
    }

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

    .home-project-card:first-child {
        grid-column: auto;
    }

    .home-final-inner {
        grid-template-columns: 1fr;
        padding: 35px 25px;
    }

}

@media (max-width: 550px) {

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

    .solutions-preview-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 270px);
    }

    .solution-preview-card.large {
        grid-column: auto;
    }

    .why-features {
        grid-template-columns: 1fr;
    }

    .hero-content {
        padding-top: 100px;
    }

    .hero-content h1 {
        font-size: 3rem;
    }

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

    .hero-buttons .btn,
    .hero-outline-button {
        justify-content: center;
    }

}

/* =====================================================
   SOLUTIONS PAGE
===================================================== */

.solutions-intro {
    background: var(--white);
}

.solutions-intro-grid {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    align-items: center;
    gap: 100px;
}

.solutions-intro-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.15;
    margin-bottom: 25px;
}

.solutions-intro-content h2 span {
    display: block;
    color: var(--royal-blue);
}

.solutions-intro-content p {
    color: var(--gray);
}

.solutions-intro-content .lead {
    color: var(--charcoal);
    font-size: 1rem;
    margin-bottom: 18px;
}

.solutions-intro-stat {
    min-height: 330px;
    padding: 45px;
    border-radius: var(--radius);
    background: var(--royal-blue);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.solutions-intro-stat::after {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    right: -130px;
    bottom: -130px;
    border: 50px solid rgba(255,255,255,0.05);
    border-radius: 50%;
}

.big-number {
    position: relative;
    z-index: 2;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 800;
    line-height: 1;
}

.solutions-intro-stat > span {
    position: relative;
    z-index: 2;
    margin-top: 15px;
    font-size: 0.65rem;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.55);
}

.solutions-intro-stat p {
    position: relative;
    z-index: 2;
    max-width: 280px;
    margin-top: 15px;
    color: rgba(255,255,255,0.65);
    font-size: 0.75rem;
}


/* =====================================================
   SOLUTION GRID
===================================================== */

.solution-categories {
    background: var(--charcoal);
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.solution-card {
    border-radius: var(--radius);
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: var(--transition);
}

.solution-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255,255,255,0.2);
}



.solution-card-visual {
    height: 280px;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.passenger-visual {
    width: 100%;
    
    background:
        linear-gradient(
            145deg,
            #0A2D62,
            #123B82
        );
}

.freight-visual {
    background:
        linear-gradient(
            145deg,
            #292D32,
            #41464C
        );
}

.glass-visual {
    background:
        linear-gradient(
            145deg,
            #123B82,
            #315D9D
        );
}

.home-visual {
    background:
        linear-gradient(
            145deg,
            #3A1F24,
            #7A2E2E
        );
}

.hospital-visual {
    background:
        linear-gradient(
            145deg,
            #153A4D,
            #24617A
        );
}

.custom-visual {
    background:
        linear-gradient(
            145deg,
            #22262B,
            #123B82
        );
}


/* PASSENGER ILLUSTRATION */

.solution-elevator {
    position: relative;
    width: 170px;
    height: 220px;
    border: 7px solid rgba(255,255,255,0.7);
    display: flex;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
}

.solution-door {
    width: 50%;
    height: 100%;
    border-right: 1px solid rgba(255,255,255,0.2);
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.15),
            rgba(255,255,255,0.03)
        );
}

.solution-floor-indicator {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brick-red);
    color: white;
    padding: 8px 18px;
    font-size: 0.65rem;
}


/* FREIGHT */

.solution-box {
    width: 160px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid rgba(255,255,255,0.35);
    color: rgba(255,255,255,0.5);
    font-size: 3rem;
    transform: perspective(500px) rotateX(10deg);
}


/* GLASS */

.glass-elevator {
    width: 160px;
    height: 230px;
    display: flex;
    gap: 5px;
    padding: 8px;
    border: 4px solid rgba(255,255,255,0.7);
    transform: perspective(600px) rotateY(-12deg);
}

.glass-elevator div {
    flex: 1;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
}


/* HOME */

.home-elevator {
    width: 180px;
    height: 180px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid rgba(255,255,255,0.6);
}

.home-elevator > i {
    position: absolute;
    top: -45px;
    color: rgba(255,255,255,0.7);
    font-size: 1.7rem;
}

.home-lift {
    width: 75px;
    height: 110px;
    border: 3px solid rgba(255,255,255,0.5);
}


/* HOSPITAL */

.hospital-symbol {
    width: 110px;
    height: 110px;
    border: 2px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 4rem;
}


/* CUSTOM */

.custom-symbol {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    color: white;
    font-size: 2.5rem;
}


/* CARD CONTENT */

.solution-card-content {
    padding: 35px;
}

.solution-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    object-fit: cover;
}

.solution-card-top span {
    color: rgba(255,255,255,0.4);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.solution-card-top > i {
    color: #C75B5B;
}

.solution-card h3 {
    margin: 15px 0;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.35rem;
}

.solution-card-content > p {
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
    line-height: 1.8;
}

.solution-card-content ul {
    list-style: none;
    display: grid;
    gap: 9px;
    margin: 22px 0;
}

.solution-card-content li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,0.6);
    font-size: 0.68rem;
}

.solution-card-content li i {
    color: #C75B5B;
    font-size: 0.55rem;
}

.solution-card-content > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
}

.solution-card-content > a i {
    color: #C75B5B;
    transition: var(--transition);
}

.solution-card-content > a:hover i {
    transform: translateX(5px);
}


/* =====================================================
   SELECTION GUIDE
===================================================== */

.selection-section {
    background: var(--off-white);
}

.selection-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 100px;
    align-items: center;
}

.selection-content h2 {
    margin: 15px 0 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.15;
}

.selection-content h2 span {
    display: block;
    color: var(--royal-blue);
}

.selection-content p {
    color: var(--gray);
    line-height: 1.8;
    margin-bottom: 25px;
}

.selection-list {
    display: grid;
    gap: 12px;
}

.selection-item {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 22px;
    background: white;
    border: 1px solid var(--light-gray);
    border-radius: 16px;
    transition: var(--transition);
}

.selection-item:hover {
    transform: translateX(7px);
    box-shadow: var(--shadow);
}

.selection-item > span {
    color: var(--brick-red);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
}

.selection-item strong {
    display: block;
    margin-bottom: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
}

.selection-item p {
    margin: 0;
    color: var(--gray);
    font-size: 0.68rem;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 900px) {

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

    .selection-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

}


@media (max-width: 750px) {

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

}


@media (max-width: 550px) {

    .solution-card-visual {
        height: 230px;
    }

    .solution-card-content {
        padding: 28px 24px;
    }

    .solutions-intro-stat {
        min-height: 270px;
        padding: 35px;
    }

    .selection-item {
        padding: 18px;
        gap: 17px;
    }

}

/* =====================================================
   LAN-SUTTY SPLASH SCREEN
===================================================== */

.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    overflow: hidden;

    background: var(--charcoal);

    transition:
        opacity 0.9s ease,
        visibility 0.9s ease;
}


/* Hidden state */

.splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =====================================================
   BACKGROUND
===================================================== */

.splash-background {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(18, 59, 130, 0.35),
            transparent 45%
        ),

        linear-gradient(
            135deg,
            #080B10,
            #101820 55%,
            #081A38
        );
}


/* Subtle technical grid */

.splash-grid {
    position: absolute;
    inset: 0;

    opacity: 0.08;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.1) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.1) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 75%
        );
}


/* =====================================================
   CONTENT
===================================================== */

.splash-content {
    position: relative;
    z-index: 5;

    width: min(90%, 700px);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    color: white;
}




/* =====================================================
   ELEVATOR
===================================================== */

.splash-elevator {
    position: relative;
    justify-content: center;
    display: flex;
    align-items: center;

    width: 150px;
    height: 150px;

    margin-bottom: 25px;

    animation:
        splashElevator 9s ease-in-out infinite;
}


.elevator-frame {
    position: relative;

    width: 150px;
    height: 150px;

    margin: auto;

    overflow: hidden;

    border: 2px solid
        rgba(255,255,255,0.75);

    border-radius: 5px;

    background:
        linear-gradient(
            145deg,
            #16233A,
            #080B10
        );

    box-shadow:
        0 0 25px
        rgba(18,59,130,0.3);
}


/* Elevator doors */

.elevator-door {
    position: absolute;

    top: 0;

    width: 50%;
    height: 100%;

    background:
        linear-gradient(
            100deg,
            #1D2C40,
            #0B111A
        );

    transition:
        transform 1s ease;
}


.left-door {
    left: 0;

    border-right:
        1px solid
        rgba(255,255,255,0.12);
}


.right-door {
    right: 0;

    border-left:
        1px solid
        rgba(255,255,255,0.12);
}


/* Opening animation */

.splash-screen.loaded
.left-door {
    transform: translateX(-100%);
}


.splash-screen.loaded
.right-door {
    transform: translateX(100%);
}


/* Light inside elevator */

.elevator-light {
    position: absolute;

    width: 4px;
    height: 35px;

    left: 50%;
    top: 30px;

    transform:
        translateX(-50%);

    background:
        var(--brick-red);

    box-shadow:
        0 0 18px
        rgba(139,45,45,0.8);
}


/* Arrow */

.elevator-arrow {
    position: absolute;

    left: 50%;
    bottom: -15px;

    transform:
        translateX(-50%);

    width: 30px;
    height: 30px;

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

    border-radius: 50%;

    background:
        var(--brick-red);

    color: white;

    font-size: 0.7rem;

    box-shadow:
        0 0 25px
        rgba(139,45,45,0.35);
}


@keyframes splashElevator {

    0%,
    100% {
        transform:
            translateY(8px);
    }

    50% {
        transform:
            translateY(-8px);
    }

}


/* =====================================================
   BRAND
===================================================== */

.splash-brand h1 {

    margin: 0;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        clamp(2.5rem, 7vw, 5rem);

    font-weight: 800;

    letter-spacing:
        -2px;

    line-height: 1;
}


.splash-brand h1 span {
    color:
        var(--brick-red);
}


.splash-line {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 12px;
}


.splash-line span {

    width: 35px;
    height: 1px;

    background:
        rgba(255,255,255,0.35);
}


.splash-line p {

    margin: 0;

    color:
        rgba(255,255,255,0.55);

    font-size:
        0.6rem;

    font-weight: 700;

    letter-spacing:
        3px;
}


/* =====================================================
   TAGLINE
===================================================== */

.splash-tagline {

    margin:
        30px 0 35px;

    color:
        rgba(255,255,255,0.45);

    font-size:
        0.6rem;

    letter-spacing:
        2px;
}


/* =====================================================
   LOADER
===================================================== */

.splash-loader {

    width:
        min(420px, 80vw);
}


.loader-track {

    width: 100%;
    height: 3px;

    overflow: hidden;

    border-radius: 20px;

    background:
        rgba(255,255,255,0.1);
}


.loader-progress {

    width: 0%;
    height: 100%;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--royal-blue),
            var(--brick-red)
        );

    box-shadow:
        0 0 15px
        rgba(139,45,45,0.5);

    transition:
        width 0.15s linear;
}


.loader-info {

    display: flex;

    justify-content: space-between;

    margin-top: 10px;

    color:
        rgba(255,255,255,0.4);

    font-size:
        0.5rem;

    font-weight: 700;

    letter-spacing:
        1.5px;
}


/* =====================================================
   FEATURES
===================================================== */

.splash-features {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0;

    margin-top: 55px;
}


.splash-features div {

    min-width: 100px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    padding:
        0 25px;

    border-right:
        1px solid
        rgba(255,255,255,0.1);
}


.splash-features div:last-child {
    border-right: none;
}


.splash-features i {

    color:
        var(--brick-red);

    font-size:
        0.85rem;
}


.splash-features span {

    color:
        rgba(255,255,255,0.35);

    font-size:
    clamp(1rem, 2vw, 3rem);

    font-weight: 800;
    

    letter-spacing:
        -1px;
}


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

@media (max-width: 600px) {

    .splash-elevator {
        transform: scale(0.85);
        margin-bottom: 20px;
    }


    .splash-brand h1 {
        font-size: 2.7rem;
    }


    .splash-line {
        gap: 8px;
    }


    .splash-line span {
        width: 20px;
    }


    .splash-line p {
        font-size: 0.45rem;
        letter-spacing: 2px;
    }


    .splash-tagline {
        font-size: 0.48rem;
        letter-spacing: 1.5px;
    }


    .splash-features {
        width: 100%;

        margin-top: 40px;
    }


    .splash-features div {
        min-width: auto;

        padding:
            0 12px;
    }


    .splash-features span {
        font-size: 1.8rem;
    }

}