:root{
    --navy:#123b68;
    --navy-2:#0b2d4f;
    --blue:#0878ae;
    --blue-deep:#075886;
    --pale:#eaf4fb;
    --ink:#172b3a;
    --muted:#667085;
    --paper:#f7f9fb;
    --line:#dce4eb;
    --white:#fff;
    --shadow:0 18px 55px rgba(18,59,104,.11);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font:14px/1.7 Manrope,Arial,sans-serif;
    overflow-x:hidden;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
img{max-width:100%;display:block}
h1,h2,h3,p{margin-top:0}
h1,h2{font-weight:700;letter-spacing:-2.8px;line-height:1.1}
h1{font-size:clamp(45px,6.2vw,88px);margin-bottom:25px}
h1 em,h2 em{font-family:"Playfair Display",serif;font-weight:500}
h1 em{color:#b9dbf4}
h2{font-size:clamp(35px,4vw,57px)}
.container{width:min(1180px,88%);margin:auto}

.nav{
    height:88px;
    width:100%;
    display:flex;
    align-items:center;
    padding:0 5.5%;
    gap:30px;
    position:fixed;
    top:0;
    left:0;
    z-index:100;
    background:#fff;
    color:var(--ink);
    border-bottom:1px solid #e5edf2;
    box-shadow:0 5px 22px rgba(7,88,134,.10);
}
.nav .brand{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    width:190px;
}
.nav .brand img{
    width:174px;
    height:58px;
    object-fit:contain;
    object-position:left center;
}
.nav nav{
    display:flex;
    gap:18px;
    align-items:center;
    margin:auto;
    font-size:11px;
    font-weight:800;
}
.nav nav a{opacity:.72;transition:.25s}
.nav nav a:hover,.nav nav a.active{opacity:1;color:var(--blue)}
.nav-cta{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:800;
    padding:12px 15px;
    border:1px solid var(--navy);
    background:var(--navy);
    color:#fff;
    white-space:nowrap;
}
.nav-cta b{font-size:15px;margin-left:7px}
.menu{
    display:none;
    margin-left:auto;
    background:none;
    border:0;
    color:var(--ink);
    font-size:24px;
    cursor:pointer;
}

.hero {
    min-height: 700px;
    height: 100vh;
    background: var(--navy);
    position: relative;
    color: #fff;
    overflow: hidden;
    z-index: 1;
}
.hero-slider,.hero-slide{position:absolute;inset:0}
.hero-slide{
    opacity:0;
    background-position:center;
    background-size:cover;
    transform:scale(1.05);
    transition:opacity 1s ease,transform 7s ease;
}
.hero-slide.active{opacity:1;transform:scale(1)}
.hero-slide:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(5,29,51,.90),rgba(18,59,104,.55) 45%,rgba(18,59,104,.12));
}
.hero-content {
    position: relative;
    z-index: 10;
    padding: 215px 11% 160px;
    max-width: 940px;
    animation: rise 1.1s both;
}
.hero-content .actions {
    position: relative;
    z-index: 20;
    display: flex;
    gap: 16px;
}

.hero-content .button {
    position: relative;
    z-index: 21;
}
.eyebrow{
    text-transform:uppercase;
    font-size:10px;
    letter-spacing:2.2px;
    font-weight:800;
    color:var(--blue);
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 20px;
}
.eyebrow:before{content:"";width:34px;height:1px;background:currentColor}
.light{color:#b9dbf4}
.lede{max-width:625px;font-size:16px;line-height:1.75;color:#d7e7f4}
.hero .lede{max-width:680px}
.actions{margin-top:35px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:800;
    padding:13px 40px;
    border:1px solid currentColor;
    white-space:nowrap;
    cursor:pointer;
    transition:.25s;
}
.button:hover{transform:translateY(-2px)}
.button b{font-size:16px;margin-left:9px}
.white{background:#fff;color:var(--navy);border-color:#fff}
.blue{background:var(--navy);color:#fff;border-color:var(--navy)}
.brand-button{background:var(--blue);color:#fff;border-color:var(--blue)}
.text-link{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1.1px;
    font-weight:800;
    display:inline-block;
}
.text-link b{font-size:17px;margin-left:8px}
.hero-controls{
    position:absolute;
    right:5.5%;
    bottom:28px;
    z-index:4;
    display:flex;
    align-items:center;
    gap:8px;
}
.hero-controls button{
    width:38px;height:38px;
    border:1px solid #ffffff66;
    background:#ffffff12;
    color:#fff;
    cursor:pointer;
}
.hero-count{font-size:10px;letter-spacing:2px;margin:0 10px}
.scroll{
    position:absolute;
    bottom:28px;
    left:11%;
    z-index:4;
    font-size:9px;
    letter-spacing:2px;
    display:flex;
    align-items:center;
    gap:12px;
}
.scroll i{display:block;width:45px;height:1px;background:#fff}

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

.services-section {
    padding: 70px 5% 75px;
    background: #ffffff;
}


/* =========================================
   HEADING
========================================= */

.services-heading {
    text-align: center;
    max-width: 1400px;
    margin: 0 auto 45px;
}

.services-eyebrow {
    display: block;
    margin-bottom: 16px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3.5px;

    color: #53677b;
}

.services-heading h2 {
    margin: 0;

    font-size: clamp(34px, 3.4vw, 40px);
    line-height: 1.05;

    font-weight: 800;
    letter-spacing: -1px;

    color: #07345b;

    white-space: nowrap;
}

.services-heading h2 span {
    color: #0878ae;
    font-weight: 400;
}


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

.services-grid {
    max-width: 1450px;
    margin: 0 auto;

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

    border-top: 1px solid #dfe5ea;
    border-bottom: 1px solid #dfe5ea;
}


/* =========================================
   SERVICE CARD
========================================= */

.service-item {
    min-height: 275px;

    padding: 42px 34px 35px;

    position: relative;

    border-right: 1px solid #dfe5ea;

    display: flex;
    flex-direction: column;

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

.service-item:last-child {
    border-right: none;
}

.service-item:hover {
    background: #f8fafc;
}


/* =========================================
   LABEL
========================================= */

.service-label {
    margin-bottom: 14px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.5px;

    color: #075b92;
}


/* =========================================
   TITLE
========================================= */

.service-item h3 {
    margin: 0 0 20px;

    font-size: 34px;
    line-height: 1;

    font-weight: 800;
    letter-spacing: -0.7px;

    color: #07345b;
}


/* =========================================
   DESCRIPTION
========================================= */

.service-item p {
    max-width: 290px;

    margin: 0;

    font-size: 15px;
    line-height: 1.65;

    color: #53677b;

    font-weight: 500;
}


/* =========================================
   KNOW MORE
========================================= */

.service-link {
    margin-top: auto;
    padding-top: 25px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    width: fit-content;

    text-decoration: none;

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

    color: #07345b;

    transition:
        gap .25s ease,
        color .25s ease;
}

.service-link span {
    font-size: 21px;
    line-height: 1;

    transition: transform .25s ease;
}

.service-link:hover {
    color: #0878ae;
    gap: 12px;
}

.service-link:hover span {
    transform: translateX(3px);
}


/* =========================================
   MEDIUM DESKTOP
========================================= */

@media (max-width: 1200px) {

    .services-section {
        padding: 65px 4% 70px;
    }

    .services-grid {
        max-width: 1100px;
    }

    .service-item {
        padding: 38px 28px 32px;
    }

    .service-item h3 {
        font-size: 30px;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .services-section {
        padding: 60px 5%;
    }

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

    .services-heading h2 {
        white-space: normal;
        font-size: 38px;
    }

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

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

    .service-item:nth-child(1),
    .service-item:nth-child(2) {
        border-bottom: 1px solid #dfe5ea;
    }

}


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

@media (max-width: 650px) {

    .services-section {
        padding: 55px 20px 60px;
    }

    .services-heading {
        margin-bottom: 35px;
    }

    .services-eyebrow {
        font-size: 10px;
        letter-spacing: 3px;
        margin-bottom: 15px;
    }

    .services-heading h2 {
        font-size: 32px;
        line-height: 1.12;
        letter-spacing: -1px;
    }

    .services-heading h2 span {
        display: block;
        margin-top: 3px;
    }

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

    .service-item {
        min-height: 250px;
        padding: 35px 24px;
        border-right: none;
        border-bottom: 1px solid #dfe5ea;
    }

    .service-item:last-child {
        border-bottom: none;
    }

    .service-item h3 {
        font-size: 32px;
        margin-bottom: 18px;
    }

    .service-item p {
        font-size: 15px;
        line-height: 1.6;
    }

    .service-link {
        padding-top: 24px;
    }

}

/* =========================================
   ABOUT PAGE - STATS
========================================= */

.about-stats {
    width: 100%;
    padding: 55px 3.5%;
    background: #ffffff;
    box-sizing: border-box;
}

.about-stats-grid {
    max-width: 1500px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}


/* =========================================
   STAT CARD
========================================= */

.about-stat-card {
    min-height: 275px;

    padding: 40px 25px;

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

    text-align: center;

    background: #f8fafc;

    border: 1px solid #dce4ed;
    border-radius: 12px;

    box-sizing: border-box;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* HOVER */

.about-stat-card:hover {
    transform: translateY(-5px);

    border-color: #c7d5e5;

    box-shadow: 0 15px 35px rgba(10, 45, 80, 0.10);
}


/* =========================================
   ICON
========================================= */

.about-stat-icon {
    width: 80px;
    height: 80px;

    margin-bottom: 22px;

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

    background: #28548d;

    border-radius: 50%;

    color: #ffffff;

    font-size: 28px;

    box-shadow: 0 8px 18px rgba(40, 84, 141, 0.15);
}


/* =========================================
   NUMBER
========================================= */

.about-stat-number {
    color: #183e6c;

    font-size: 52px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: -1.5px;

    margin-bottom: 12px;
}


/* =========================================
   LABEL
========================================= */

.about-stat-label {
    color: #607590;

    font-size: 20px;
    line-height: 1.4;

    font-weight: 400;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .about-stats {
        padding: 50px 4%;
    }

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

    .about-stat-card {
        min-height: 260px;
    }

}


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

@media (max-width: 600px) {

    .about-stats {
        padding: 40px 18px;
    }

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

    .about-stat-card {
        min-height: 230px;
        padding: 30px 20px;
    }

    .about-stat-icon {
        width: 68px;
        height: 68px;

        margin-bottom: 18px;

        font-size: 24px;
    }

    .about-stat-number {
        font-size: 42px;
        margin-bottom: 9px;
    }

    .about-stat-label {
        font-size: 16px;
    }

}

/* =========================================
   OUR PARTNERS INTRO
========================================= */

.partners-intro {
    width: 100%;
    background: #f7f9fb;
    padding: 85px 5% 75px;
    box-sizing: border-box;
}

.partners-intro-inner {
    max-width: 1450px;
    margin: 0 auto;
    text-align: center;
}


/* EYEBROW */

.partners-eyebrow {
    margin-bottom: 25px;

    font-size: 13px;
    font-weight: 500;
    letter-spacing: 4px;

    color: #53677a;
    text-transform: uppercase;
}


/* HEADING */

.partners-intro h2 {
    margin: 0;

    font-size: clamp(42px, 4vw, 56px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1.5px;

    color: #0b2d4d;
}

.partners-intro h2 span {
    color: #0b2d4d;
}

.partners-intro h2 em {
    color: #6c6b69;
    font-style: normal;
    font-weight: 400;
}


/* DESCRIPTION */

.partners-intro p {
    margin: 28px auto 0;

    max-width: 1050px;

    font-size: 19px;
    line-height: 1.7;
    font-weight: 400;

    color: #53677a;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .partners-intro {
        padding: 70px 5% 65px;
    }

    .partners-intro h2 {
        font-size: 42px;
    }

    .partners-intro p {
        font-size: 17px;
    }

}


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

@media (max-width: 600px) {

    .partners-intro {
        padding: 55px 22px 50px;
    }

    .partners-eyebrow {
        margin-bottom: 18px;
        font-size: 11px;
        letter-spacing: 3px;
    }

    .partners-intro h2 {
        font-size: 32px;
        line-height: 1.2;
        letter-spacing: -0.8px;
    }

    .partners-intro h2 em {
        display: block;
        margin-top: 3px;
    }

    .partners-intro p {
        margin-top: 20px;
        font-size: 15px;
        line-height: 1.65;
    }

    .desktop-break {
        display: none;
    }

}
.brand-strip {
    position: relative;
    z-index: 5;
    overflow: hidden;
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 26px 0;
}
.brand-track{
    display:flex;
    width:max-content;
    animation:marquee 24s linear infinite;
}
.brand-track span{
    color:#74828c;
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    padding:0 48px;
    white-space:nowrap;
}
.brand-track span b{color:var(--blue);margin-right:10px}

.section{padding:120px 9%}
.section-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:60px;
    margin-bottom:55px;
}
.section-head>div{max-width:600px}
.section-head>p{max-width:390px;color:var(--muted);margin:0 0 6px;font-size:15px}

.category-grid{
    display:grid;
    grid-template-columns:1.15fr 1fr 1fr;
    gap:15px;
}
.category{
    height:455px;
    color:#fff;
    position:relative;
    overflow:hidden;
    padding:27px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background-size:cover;
    background-position:center;
    transition:.5s;
}
.category:hover{transform:translateY(-6px)}
.category:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,#0d3158e8,transparent 70%);
}
.category>*{position:relative;z-index:1}
.category h3{font-size:28px;letter-spacing:-1px;margin:0}
.category p{font-size:13px;max-width:230px;opacity:.86}
.res{background-image:url("../images/projects-grid.png")}
.commercial{background-image:url("../images/services-banner.png")}
.land{background-image:url("../images/about-banner.png")}

.featured{background:#fff}
.project-showcase{
    background:var(--navy);
    display:grid;
    grid-template-columns:59% 41%;
    min-height:535px;
    color:#fff;
    overflow:hidden;
}
.project-image{background:center/cover;min-height:400px}
.project-info{
    padding:70px 10%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.project-info .eyebrow{color:#b9dbf4}
.project-info h3{font-size:50px;letter-spacing:-2px;margin:0 0 8px}
.project-meta{font-size:12px;color:#c5d7e6;margin-bottom:25px}
.project-info p{color:#d3e0e9;max-width:335px}
.project-controls{margin-top:30px;display:flex;align-items:center;gap:10px}
.project-controls button{
    background:transparent;
    border:1px solid #80a8c7;
    color:#fff;
    width:37px;height:37px;
    font-size:18px;
    cursor:pointer;
}
.project-controls .count{font-size:11px;letter-spacing:1px;margin-right:auto}

/* =========================================
   OUR LEGACY IN NUMBERS
========================================= */

.legacy-section {
    width: 100%;
    padding: 80px 4.5%;
    background: #ffffff;
    box-sizing: border-box;
}


/* =========================================
   HEADING
========================================= */

.legacy-heading {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 52px;
    text-align: center;
}

.legacy-eyebrow {
    display: block;
    margin-bottom: 10px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #0878ae;
    text-transform: uppercase;
}

.legacy-heading h2 {
    margin: 0 0 16px;

    font-size: 38px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1px;

    color: #07111d;
}

.legacy-heading p {
    margin: 0;

    font-size: 15px;
    line-height: 1.7;

    color: #53616e;
}


/* =========================================
   MAIN LAYOUT
========================================= */

.legacy-wrapper {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.05fr 1fr;

    gap: 42px;

    align-items: center;
}


/* =========================================
   IMAGE
========================================= */

.legacy-image {
    position: relative;

    width: 100%;
    height: 515px;

    overflow: hidden;

    border-radius: 24px;

    box-shadow:
        0 18px 45px rgba(10, 30, 50, 0.12);
}

.legacy-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================
   IMAGE BADGE
========================================= */

.legacy-image-badge {
    position: absolute;

    left: 18px;
    bottom: 18px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 13px 17px;

    background: #ffffff;

    border-radius: 16px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.13);
}

.badge-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

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

    border-radius: 10px;

    background: #f1f7fb;

    color: #0878ae;

    font-size: 18px;
}

.legacy-image-badge strong {
    display: block;

    margin-bottom: 3px;

    font-size: 15px;
    line-height: 1.2;

    color: #101820;
}

.legacy-image-badge span {
    display: block;

    font-size: 12px;

    color: #66737d;
}


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

.legacy-stats {
    display: flex;
    flex-direction: column;

    gap: 10px;

    width: 100%;
}


/* =========================================
   STAT CARD
========================================= */

.legacy-stat {
    width: 100%;

    box-sizing: border-box;

    padding: 17px 17px 12px;

    background: #ffffff;

    border-radius: 17px;

    box-shadow:
        0 8px 28px rgba(15, 35, 55, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.legacy-stat:hover {
    transform: translateY(-3px);

    box-shadow:
        0 14px 35px rgba(15, 35, 55, 0.12);
}


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

.stat-top {
    display: flex;
    align-items: center;

    gap: 15px;
}


/* =========================================
   ICON
========================================= */

.stat-icon {
    width: 45px;
    height: 45px;

    min-width: 45px;

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

    border-radius: 13px;

    color: #ffffff;

    font-size: 17px;
}

.stat-icon.blue {
    background: #2864e8;
}

.stat-icon.orange {
    background: #ff7116;
}

.stat-icon.green {
    background: #14a44d;
}

.stat-icon.red {
    background: #e9222c;
}

.stat-icon.purple {
    background: #783ce8;
}

.stat-icon.teal {
    background: #087d79;
}


/* =========================================
   TEXT
========================================= */

.stat-content {
    min-width: 0;
}

.stat-content strong {
    display: block;

    margin-bottom: 6px;

    font-size: 24px;
    line-height: 1.05;
    font-weight: 800;

    color: #080d12;
}

.stat-content span:not(.counter) {
    display: block;

    font-size: 12px;
    line-height: 1.4;

    color: #53616e;
}


/* =========================================
   PROGRESS BAR
========================================= */

.stat-progress {
    width: 100%;
    height: 7px;

    margin-top: 14px;

    overflow: hidden;

    background: #e9ebed;

    border-radius: 10px;
}

.stat-progress span {
    display: block;

    width: 0%;
    height: 100%;

    border-radius: 10px;

    transition:
        width 1.8s cubic-bezier(0.25, 1, 0.5, 1);
}


/* =========================================
   BAR COLORS
========================================= */

.legacy-stat:nth-child(1) .stat-progress span {
    background: #2864e8;
}

.legacy-stat:nth-child(2) .stat-progress span {
    background: #ff7116;
}

.legacy-stat:nth-child(3) .stat-progress span {
    background: #14a44d;
}

.legacy-stat:nth-child(4) .stat-progress span {
    background: #e9222c;
}

.legacy-stat:nth-child(5) .stat-progress span {
    background: #783ce8;
}

.legacy-stat:nth-child(6) .stat-progress span {
    background: #087d79;
}


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

@media (max-width: 900px) {

    .legacy-section {
        padding: 65px 20px;
    }

    .legacy-heading {
        margin-bottom: 35px;
    }

    .legacy-heading h2 {
        font-size: 30px;
    }

    .legacy-wrapper {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .legacy-image {
        height: 380px;
    }
}


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

@media (max-width: 480px) {

    .legacy-section {
        padding: 55px 15px;
    }

    .legacy-heading h2 {
        font-size: 27px;
    }

    .legacy-heading p {
        font-size: 13px;
    }

    .legacy-image {
        height: 300px;

        border-radius: 18px;
    }

    .legacy-image-badge {
        left: 12px;
        bottom: 12px;

        padding: 10px 13px;
    }

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

        font-size: 15px;
    }

    .stat-icon {
        width: 40px;
        height: 40px;

        min-width: 40px;

        border-radius: 11px;

        font-size: 15px;
    }

    .stat-top {
        gap: 12px;
    }

    .stat-content strong {
        font-size: 21px;
    }

    .stat-content span:not(.counter) {
        font-size: 11px;
    }

    .stat-progress {
        height: 6px;

        margin-top: 12px;
    }
}
.about-band{
    display:grid;
    grid-template-columns:50% 50%;
    background:var(--navy);
    color:#fff;
}

/* =========================================
   MISSION, VISION & CORE VALUES
========================================= */

.mv-section {
    width: 100%;
    padding: 90px 5% 100px;
    background: #f7f9fb;
    box-sizing: border-box;
}

.mv-header {
    max-width: 1050px;
    margin: 0 auto 65px;
    text-align: center;
}


/* EYEBROW */

.mv-eyebrow {
    margin-bottom: 20px;

    color: #0878ae;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
}


/* MAIN HEADING */

.mv-header h2 {
    margin: 0;

    color: #092f50;
    font-size: clamp(38px, 4vw, 52px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1.5px;
}


/* ORANGE DIVIDER */

.mv-divider {
    width: 100px;
    height: 3px;

    margin: 32px auto 28px;

    background: #0878ae;
    border-radius: 10px;
}


/* DESCRIPTION */

.mv-header p {
    max-width: 950px;
    margin: 0 auto;

    color: #53677a;
    font-size: 19px;
    line-height: 1.75;
}


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

.mv-cards {
    max-width: 1350px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}


/* INDIVIDUAL CARD */

.mv-card {
    min-height: 360px;

    padding: 50px 45px;

    background: #ffffff;

    border: 1px solid #dfe5ea;
    border-radius: 24px;

    box-shadow: 0 15px 40px rgba(10, 35, 55, 0.06);

    box-sizing: border-box;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* HOVER */

.mv-card:hover {
    transform: translateY(-6px);

    border-color: #0878ae(245, 130, 32, 0.35);

    box-shadow: 0 20px 45px rgba(10, 35, 55, 0.10);
}


/* =========================================
   ICON
========================================= */

.mv-icon {
    width: 80px;
    height: 80px;

    margin-bottom: 25px;

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

    border-radius: 20px;

    background: linear-gradient(
        135deg,
        #0878ae,
        #0878ae
    );

    color: #ffffff;

    font-size: 32px;

    box-shadow: 0 10px 25px rgba(245, 130, 32, 0.18);
}


/* =========================================
   CARD HEADING
========================================= */

.mv-card h3 {
    margin: 0 0 25px;

    color: #092f50;

    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;

    letter-spacing: -0.5px;
}


/* =========================================
   CARD TEXT
========================================= */

.mv-card p {
    max-width: 650px;

    margin: 0;

    color: #53677a;

    font-size: 19px;
    line-height: 1.9;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .mv-section {
        padding: 75px 5% 80px;
    }

    .mv-header {
        margin-bottom: 50px;
    }

    .mv-header h2 {
        font-size: 40px;
    }

    .mv-header p {
        font-size: 17px;
    }

    .mv-cards {
        gap: 20px;
    }

    .mv-card {
        min-height: 350px;
        padding: 40px 32px;
    }

    .mv-card h3 {
        font-size: 30px;
    }

    .mv-card p {
        font-size: 17px;
        line-height: 1.75;
    }

}


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

@media (max-width: 650px) {

    .mv-section {
        padding: 60px 20px 65px;
    }

    .mv-header {
        margin-bottom: 40px;
    }

    .mv-eyebrow {
        margin-bottom: 15px;
        font-size: 11px;
        letter-spacing: 3px;
    }

    .mv-header h2 {
        font-size: 32px;
        line-height: 1.2;
        letter-spacing: -0.8px;
    }

    .mv-divider {
        width: 75px;
        margin: 24px auto 22px;
    }

    .mv-header p {
        font-size: 15px;
        line-height: 1.65;
    }

    .mv-cards {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mv-card {
        min-height: auto;
        padding: 32px 27px;
        border-radius: 20px;
    }

    .mv-icon {
        width: 65px;
        height: 65px;

        margin-bottom: 22px;

        border-radius: 16px;

        font-size: 26px;
    }

    .mv-card h3 {
        margin-bottom: 18px;
        font-size: 27px;
    }

    .mv-card p {
        font-size: 15px;
        line-height: 1.7;
    }

}

.about-photo{
    min-height:610px;
    background:url("../images/our-story.jpg") center/cover;
}
.about-copy{padding:110px 15%;align-self:center}
.about-copy h2,.advantage h2,.final-cta h2{font-size:clamp(42px,4.3vw,65px);margin-bottom:28px}
.about-copy p:not(.eyebrow){color:#d3e1ed;font-size:15px}

.partner{background:#eaf4fb}
.partner-top{max-width:800px}
.partner-top h2{font-size:clamp(40px,5vw,68px);margin:0 0 22px}
.partner-top>p:not(.eyebrow){font-size:16px;max-width:650px;color:var(--muted)}

.pillars{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:76px;
}
.pillars article{border-top:1px solid #9fc1d9;padding-top:20px}
.pillars span,.service-grid span{color:var(--blue);font-size:11px;font-weight:800}
.pillars h3,.service-grid h3{font-size:17px;letter-spacing:-.5px;margin:19px 0 8px}
.pillars p,.service-grid p{font-size:13px;color:var(--muted)}

.service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.service-card{
    background:#fff;
    border:1px solid var(--line);
    padding:30px;
    min-height:420px;
    display:flex;
    flex-direction:column;
    transition:.35s;
    box-shadow:0 0 0 rgba(0,0,0,0);
}
.service-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow);
}
.service-visual{
    height:190px;
    margin:-30px -30px 25px;
    background-size:cover;
    background-position:center;
    overflow:hidden;
}
.service-card .button{margin-top:auto;align-self:flex-start}
.service-card p{margin-bottom:20px}

.advantage{
    background:#102f52;
    color:#fff;
    padding:110px 9%;
    display:grid;
    grid-template-columns:37% 1fr;
    gap:9%;
}
.adv-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0 45px;
}
.adv-grid article{border-top:1px solid #ffffff38;padding:20px 0}
.adv-grid h3{font-size:17px;margin:0 0 6px}
.adv-grid p{color:#c4d4e1;font-size:13px}

.process ol{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    padding:0;
    margin:0;
    border-top:1px solid var(--line);
    list-style:none;
}
.process li{padding:25px 22px 0 0}
.process li+li{border-left:1px solid var(--line);padding-left:22px}
.process b{font-size:11px;color:var(--blue)}
.process h3{font-size:16px;margin:14px 0 6px}
.process p{font-size:12px;color:var(--muted)}

.market{
    padding:110px 9%;
    background:linear-gradient(#0d3158d9,#0d3158eb),url("../images/footer-banner.png") center/cover;
    color:#fff;
    text-align:center;
}
.market .eyebrow{justify-content:center}
.market h2{font-size:clamp(55px,8vw,110px);margin:0}
.market h2 i{font-family:"Playfair Display";font-weight:400;color:#b9dbf4}
.market>p:not(.eyebrow){max-width:600px;margin:15px auto 35px;color:#d2e4f1}
.market-tags{display:flex;justify-content:center;gap:11px;flex-wrap:wrap}
.market-tags span{
    border:1px solid #ffffff62;
    padding:9px 16px;
    font-size:11px;
}

.people{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.people article{padding:25px;background:#fff;border:1px solid var(--line)}
.people article div{
    height:350px;
    background:linear-gradient(135deg,#dceaf5,#a9c8e0);
    display:grid;
    place-items:center;
    color:var(--navy);
    font-family:"Playfair Display";
    font-size:44px;
}
.people h3{margin:20px 0 0;font-size:18px}
.people p{color:var(--muted);font-size:12px}

.insights{background:#fff}
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.insight-grid article{
    border-top:1px solid var(--blue);
    background:#f3f7fa;
    padding:30px;
    min-height:235px;
    display:flex;
    flex-direction:column;
}
.insight-grid p{font-size:10px;color:var(--blue);font-weight:800;text-transform:uppercase;letter-spacing:1px}
.insight-grid h3{font-size:21px;letter-spacing:-.7px;line-height:1.35}
.insight-grid a{margin-top:auto;text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:1px}

.final-cta{background:var(--blue);color:#fff;padding:130px 9%;text-align:center}
.final-cta .eyebrow{justify-content:center}
.final-cta h2{margin-top:0}

.projects-toolbar{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:30px;
}
.filter{
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    padding:10px 16px;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
    cursor:pointer;
    transition:.2s;
}
.filter:hover,.filter.active{
    background:var(--blue-deep);
    color:#fff;
    border-color:var(--blue-deep);
}
.project-card{
    background:#fff;
    border:1px solid var(--line);
    overflow:hidden;
    transition:.35s;
}
.project-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.project-card.hidden{display:none}
.project-card .card-photo{height:230px;background:center/cover}
.project-card .card-body{padding:25px}
.project-facts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}
.project-facts span{background:#f1f7fa;padding:8px;font-size:10px;color:var(--muted)}
.project-facts b{display:block;color:var(--ink);font-size:11px}
.project-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.contact-section{background:#f2f7fa}
.contact-shell{
    background:#fff;
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    box-shadow:var(--shadow);
    overflow:hidden;
}

@media (max-width: 768px) {

    .projects-grid {
        display: flex;
        overflow-x: auto;
        gap: 18px;
        padding: 5px 20px 20px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .projects-grid::-webkit-scrollbar {
        display: none;
    }

    .project-card {
        flex: 0 0 88%;
        max-width: 88%;
        scroll-snap-align: start;
        box-sizing: border-box;
    }

    .project-card .card-photo {
        height: 270px;
        width: 100%;
    }

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

    .project-facts {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .project-actions {
        display: flex;
        gap: 10px;
        flex-wrap: nowrap;
    }

    .project-actions .button {
        flex: 1;
        text-align: center;
    }
}
.contact-panel{
    background:linear-gradient(150deg,var(--brand-deep),var(--navy));
    color:#fff;
    padding:60px;
    position:relative;
    overflow:hidden;
}
.contact-panel:after{
    content:"";
    position:absolute;
    width:340px;height:340px;
    right:-140px;bottom:-150px;
    border:1px solid #ffffff30;
    border-radius:50%;
}
.contact-panel p{color:#d9edf7}
.contact-image{
    margin-top:35px;
    height:190px;
    background:url("../images/about-banner.png") center/cover;
}
.contact-form-panel{padding:50px}
.contact-form-panel form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}
.contact-form-panel input,
.contact-form-panel select,
.contact-form-panel textarea{
    width:100%;
    border:1px solid #dce4eb;
    padding:14px;
    background:#fff;
    font:13px Manrope;
    outline:none;
}
.contact-form-panel input:focus,
.contact-form-panel select:focus,
.contact-form-panel textarea:focus{border-color:var(--blue)}
.contact-form-panel textarea,
.contact-form-panel button,
.contact-form-panel small{grid-column:span 2}
.contact-form-panel small{color:var(--blue);font-weight:700}
.contact-map{
    margin-top:20px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}
.map-frame{width:100%;height:330px;border:0;display:block}
.contact-photo{
    height:330px;
    background:url("../images/tristar-logo.png") center/cover;
}

/* =========================================
   GALLERY - CLEAN RESPONSIVE GRID
========================================= */

/* Main gallery grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Gallery items */
.gallery-item {
    position: relative;
    overflow: hidden;
    background: #dceaf5;
    aspect-ratio: 4 / 5;
    min-width: 0;
    border-radius: 8px;
    cursor: pointer;
}

/* Images and videos */
.gallery-item img,
.gallery-item video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Hover effect */
.gallery-item:hover img,
.gallery-item:hover video {
    transform: scale(1.05);
}

/* Dark gradient overlay */
.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(7, 32, 55, 0.8),
            transparent 55%);
    pointer-events: none;
}

/* Gallery title */
.gallery-item span {
    position: absolute;
    z-index: 2;
    left: 15px;
    right: 10px;
    bottom: 15px;

    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.5;
}

/* Remove all previous custom sizes 
.gallery-item:nth-child(1),
.gallery-item:nth-child(2),
.gallery-item:nth-child(3),
.gallery-item:nth-child(4),
.gallery-item:nth-child(5),
.gallery-item:nth-child(6),
.gallery-item:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
}*/

/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        padding: 15px;
    }

    .gallery-item {
        aspect-ratio: 4 / 5;
    }

}

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

@media (max-width: 600px) {

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .gallery-item {
        aspect-ratio: 3 / 4;
        border-radius: 6px;
    }

    .gallery-item span {
        left: 10px;
        bottom: 10px;
        font-size: 10px;
        letter-spacing: 0.6px;
    }

}
.awards-top{
    overflow:hidden;
    background:#0b2d4f;
    padding:22px 0;
}
.awards-track{
    display:flex;
    width:max-content;
    gap:18px;
    animation:marquee 28s linear infinite;
}
.awards-track img{
    width:320px;
    height:180px;
    object-fit:cover;
    border:1px solid #ffffff25;
}
.awards-intro{text-align:center;max-width:760px;margin:0 auto}
.awards-intro .eyebrow{justify-content:center}
.award-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:55px;
}
.award-card{
    background:#fff;
    border:1px solid var(--line);
    overflow:hidden;
    transition:.35s;
}
.award-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.award-card img{width:100%;height:210px;object-fit:cover}
.award-card-body{padding:24px}
.award-year{
    color:var(--blue);
    font-size:11px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.award-card h3{font-size:20px;margin:10px 0 0}

.career-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}
.career-card{
    background:#fff;
    border:1px solid var(--line);
    padding:30px;
    transition:.35s;
}
.career-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.career-card h3{font-size:23px;margin-bottom:15px}
.career-card .job-meta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:15px;
}
.job-meta span{
    background:#eef6fa;
    color:var(--blue-deep);
    padding:7px 10px;
    font-size:10px;
    font-weight:800;
}
.career-card p{font-size:13px;color:var(--muted)}
.career-actions{display:flex;gap:10px;align-items:center;margin-top:22px}

footer{
    background:#0b263f;
    color:#fff;
    padding:70px 9% 25px;
}
.footer-main{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.5fr;
    gap:45px;
}
.footer-logo{
    width:190px;
    height:62px;
    
}
.footer-main p{font-size:12px;color:#b4c9da;margin-top:20px}
.footer-main h4{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:#9fc5e0;
    margin:0 0 15px;
}
.footer-main a:not(.footer-logo-link){
    display:block;
    color:#d9e6f0;
    font-size:12px;
    margin:7px 0;
}
.footer-bottom{
    border-top:1px solid #ffffff23;
    margin-top:50px;
    padding-top:20px;
    font-size:10px;
    color:#a9bdcd;
    display:flex;
    justify-content:space-between;
    gap:20px;
}
.footer-bottom span{display:flex;gap:20px}

.side-actions{
    position:fixed;
    right:0;
    top:50%;
    transform:translateY(-50%);
    z-index:90;
    display:grid;
    gap:1px;
}
.side-actions a{
    background:var(--blue-deep);
    color:#fff;
    padding:14px 10px;
    font-size:10px;
    letter-spacing:1px;
    font-weight:800;
    text-transform:uppercase;
    writing-mode:vertical-rl;
}
.side-actions a:first-child{background:#172b3a}

.mobile-cta{
    display:none;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:54px;
    z-index:95;
    background:#fff;
    box-shadow:0 -3px 16px #0002;
}
.mobile-cta a{
    width:33.33%;
    display:grid;
    place-items:center;
    text-transform:uppercase;
    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
    border-right:1px solid var(--line);
}
.mobile-cta a:nth-child(2){background:var(--navy);color:#fff}

.reveal{
    opacity:0;
    transform:translateY(25px);
    transition:opacity .7s ease,transform .7s ease;
}
.reveal.visible{opacity:1;transform:none}

@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes rise{
    from{opacity:0;transform:translateY(25px)}
    to{opacity:1;transform:none}
}

@media(max-width:1050px){
    .nav{gap:16px}
    .nav nav{gap:10px;font-size:9px}
    .nav-cta{display:none}
    .section{padding:90px 6%}
    .about-copy{padding:70px 10%}
    .footer-main{grid-template-columns:1.5fr 1fr 1fr}
    .footer-main>div:last-child{display:none}
}

@media(max-width:760px){
    .nav{height:72px;padding:0 6%}
    .nav .brand{width:150px}
    .nav .brand img{width:140px;height:52px}
    .menu{display:block}
    .nav nav{
        display:none;
        position:absolute;
        top:72px;
        left:0;
        width:100%;
        background:#fff;
        color:var(--ink);
        padding:20px 6%;
        box-shadow:0 10px 20px #0002;
    }
    .nav nav.open{display:grid;grid-template-columns:1fr 1fr}
    .nav nav a{padding:9px 0;font-size:11px}
    .hero{min-height:700px}
    .hero-content{padding:170px 8% 80px}
    .hero-controls{right:8%}
    .scroll{left:8%;font-size:8px}
    .category-grid,.project-showcase,.about-band,.advantage,.contact-shell{grid-template-columns:1fr}
    .category{height:255px}
    .project-image{min-height:300px}
    .project-info{padding:38px 8%}
    .project-info h3{font-size:42px}
    .pillars{grid-template-columns:1fr 1fr;gap:28px 18px;margin-top:45px}
    .service-grid,.insight-grid,.award-grid,.career-grid{grid-template-columns:1fr 1fr}
    .advantage{padding:75px 8%;gap:25px}
    .process ol{grid-template-columns:1fr 1fr}
    .process li,.process li+li{padding:18px 12px;border-bottom:1px solid var(--line)}
    .market{padding:90px 8%}
    .people{grid-template-columns:1fr}
    .people article{display:grid;grid-template-columns:130px 1fr;column-gap:20px}
    .people article div{height:130px;grid-row:span 2}
    .people h3{align-self:end;margin:0}
    .people p{align-self:start}
    .footer-main{grid-template-columns:1fr 1fr;gap:30px}
    .footer-main>div:first-child{grid-column:span 2}
    .footer-bottom{display:block}
    .footer-bottom span{margin-top:10px}
    .side-actions{display:none}
    .mobile-cta{display:flex}
    .gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:180px}
    .gallery-item:nth-child(n){grid-column:span 1;grid-row:span 1}
    .gallery-item:first-child{grid-column:span 2;grid-row:span 2}
    .contact-panel,.contact-form-panel{padding:30px}
    .contact-form-panel form{grid-template-columns:1fr}
    .contact-form-panel textarea,.contact-form-panel button,.contact-form-panel small{grid-column:auto}
    .contact-map{grid-template-columns:1fr}
    .map-frame,.contact-photo{height:260px}
}

@media(max-width:420px){
    h1{font-size:43px}
    .actions .button{padding:12px}
    .footer-main,.service-grid,.pillars,.adv-grid,.process ol,.gallery-grid,.career-grid,.award-grid{grid-template-columns:1fr}
    .footer-main>div:first-child{grid-column:auto}
    .gallery-item:first-child{grid-column:auto}
}
/* === Tristar 2026 visual refresh === */
:root{--brand-deep:#0b2d4f;--gold:#c9a66b}
.nav nav{font-size:13px;gap:20px}
.nav-cta{font-size:11px;padding:13px 17px}
.nav .brand img{object-fit:contain}
.hero-content{padding-bottom:155px}
.hero-controls{bottom:34px}
.hero .actions{margin-bottom:18px}

/* Partnered with logo rail */
.partner-logos-section{padding:34px 9% 38px;background:#fff;border-bottom:1px solid var(--line)}
.partner-logos-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:22px}
.partner-logos-head .eyebrow{margin:0}
.partner-logos-head>p:last-child{margin:0;color:var(--muted);font-size:12px;max-width:520px;text-align:right}
.partner-logo-window{overflow:hidden}
.partner-logo-track{display:flex;width:max-content;gap:16px;animation:partnerMarquee 50s linear infinite}
.partner-logo-track img{width:205px;height:88px;object-fit:contain;border:1px solid #e5edf2;border-radius:10px;background:#fff;box-shadow:0 8px 25px rgba(18,59,104,.05)}
@keyframes partnerMarquee{to{transform:translateX(-50%)} }

/* Section descriptions and cards */
.stacked-head{display:block;margin-bottom:38px}
.stacked-head .section-description{margin:20px 0 0;max-width:720px;color:var(--muted);font-size:15px;line-height:1.8}
.category.res{background-image:url("../images/service-residential.jpg")}
.category.commercial{background-image:url("../images/service-commercial.jpg")}
.category.land{background-image:url("../images/service-advisory.jpg")}
.category{height:410px}

/* Featured project carousel */
.featured{background:#f5f8fb}
.featured-head{align-items:center;margin-bottom:35px}
.featured-view-all{box-shadow:0 10px 25px rgba(18,59,104,.16)}
.featured-carousel{position:relative}
.featured-viewport{overflow:hidden;border-radius:2px}
.featured-track{display:flex;width:100%;transition:transform .55s cubic-bezier(.2,.75,.2,1)}
.featured-card{min-width:100%;display:grid;grid-template-columns:52% 48%;min-height:515px;background:var(--navy);color:#fff}
.featured-card-image{background:center/cover no-repeat;min-height:690px}
.featured-card-content{padding:52px 7%;display:flex;flex-direction:column;justify-content:center}
.featured-card-top{display:flex;justify-content:space-between;gap:15px;margin-bottom:18px;color:#b9dbf4;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;font-weight:800}
.featured-card h3{font-size:52px;letter-spacing:-2px;margin:0 0 24px}
.featured-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.featured-facts span{padding:12px 13px;border:1px solid #ffffff25;color:#d6e5ef;font-size:11px}
.featured-facts b{display:block;text-transform:uppercase;color:#8fb7d3;font-size:8px;letter-spacing:1.2px;margin-bottom:3px}
.featured-price{font-size:15px;font-weight:800;color:#fff;margin-bottom:25px}
.featured-card .button{align-self:flex-start}
.featured-carousel-controls{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:18px}
.featured-carousel-controls button{width:40px;height:40px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;font-size:18px}
.featured-count{font-size:10px;letter-spacing:2px;color:var(--muted);min-width:55px;text-align:center}

/* Why Tristar */
.about-photo{background-image:url("../images/our-story.jpg");background-position:center;background-size:cover}

/* Our approach */
.partner{background:linear-gradient(135deg,#edf6fb 0%,#e3f0f7 100%);position:relative;overflow:hidden}
.partner:after{content:"";position:absolute;width:440px;height:440px;border:1px solid #9fc1d955;border-radius:50%;right:-180px;top:-120px}
.partner-top{position:relative;z-index:1}
.pillars{position:relative;z-index:1;gap:16px;margin-top:58px}
.pillars article{background:#fff;border:1px solid #d7e5ed;border-top:3px solid var(--blue);padding:25px 23px 22px;min-height:215px;box-shadow:0 12px 35px rgba(18,59,104,.06);transition:.3s}
.pillars article:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.pillars h3{font-size:19px;margin:18px 0 8px}

/* Market */
.market{background:linear-gradient(90deg,#0b2d4fe8,#0b2d4fb8),url("../images/hero-strategy.jpg") center/cover}

/* Blog previews */
.blog-preview-grid{gap:16px}
.blog-preview-grid article{min-height:320px;background-size:cover!important;background-position:center;position:relative;overflow:hidden;border:0;color:#fff;padding:0}
.blog-preview-grid article:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#071f36ed 0%,#071f3650 55%,transparent 100%)}
.blog-preview-grid article>div{position:absolute;inset:auto 25px 25px;z-index:1}
.blog-preview-grid p{color:#b9dbf4;margin-bottom:8px}
.blog-preview-grid h3{font-size:23px;margin-bottom:15px}
.blog-preview-grid a{color:#fff}

/* About: what defines us + leadership */
.define-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:45px}
.define-grid article{position:relative;background:#fff;border:1px solid var(--line);min-height:260px;padding:28px;overflow:hidden;transition:.3s}
.define-grid article:before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:#eaf4fb;right:-40px;top:-40px}
.define-grid article:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.define-grid span{position:relative;color:var(--blue);font-size:11px;font-weight:800;letter-spacing:1px}
.define-grid h3{position:relative;font-size:22px;margin:38px 0 8px}
.define-grid p{position:relative;color:var(--muted);font-size:13px}
.leadership-head{text-align:center;max-width:760px;margin:0 auto 50px}
.leadership-head .eyebrow{justify-content:center}
.leadership-head h2{margin:0 0 12px}
.leadership-head>p:last-child{color:var(--muted);font-size:15px;margin:0}

/* Services */
.service-card{min-height:430px}
.service-visual{height:205px}

/* Projects */
.project-card .card-photo{height:360px}
.project-actions{margin-top:22px}
.whatsapp-button{display:inline-flex;align-items:center;gap:7px;padding:11px 14px;border:1px solid #b7d8c3;color:#167c3c;background:#f1fbf5;font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:800;transition:.25s}
.whatsapp-button:hover{transform:translateY(-2px);background:#e5f7ec}
.whatsapp-button span{font-size:15px}

@media (max-width: 768px) {

    .project-actions .whatsapp-button {
        flex: 0 0 48px;
        width: 48px;
        height: 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        font-size: 0;
    }

    .project-actions .whatsapp-button span {
        font-size: 20px;
    }
}
/* Blog page */
.blog-page-section{background:#fff}
.blog-grid{display:grid;grid-template-columns:1.3fr .85fr .85fr;grid-auto-rows:310px;gap:16px}
.blog-card{position:relative;background-size:cover;background-position:center;overflow:hidden;color:#fff;min-height:310px}
.blog-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#061b2ee8,#061b2e15 65%)}
.blog-overlay{position:absolute;z-index:1;left:28px;right:28px;bottom:26px}
.blog-overlay span{font-size:9px;letter-spacing:1.6px;text-transform:uppercase;font-weight:800;color:#b9dbf4}
.blog-overlay h3{font-size:24px;line-height:1.2;margin:10px 0 12px}
.blog-overlay p{font-size:12px;color:#dce8f1;max-width:560px}
.blog-overlay a{font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:800}
.blog-feature{grid-row:span 2}

/* Gallery */
.gallery-grid{grid-template-columns:repeat(12,1fr);grid-auto-rows:180px;gap:12px}
.gallery-item:nth-child(1){grid-column:span 6;grid-row:span 2}.gallery-item:nth-child(2){grid-column:span 3}.gallery-item:nth-child(3){grid-column:span 3}.gallery-item:nth-child(4){grid-column:span 3}.gallery-item:nth-child(5){grid-column:span 3}.gallery-item:nth-child(6){grid-column:span 6}.gallery-item:nth-child(7){grid-column:span 4}.gallery-item:nth-child(8){grid-column:span 4}.gallery-item:nth-child(9){grid-column:span 4}.gallery-item:nth-child(10){grid-column:span 4}.gallery-item:nth-child(11){grid-column:span 4}.gallery-item:nth-child(12){grid-column:span 4}
.gallery-item span{font-size:10px}

/* Awards */
.awards-top{padding:24px 0;background:#0b2d4f}
.awards-track{gap:14px}
.awards-track img{width:330px;height:190px;border-radius:8px;object-fit:cover}
.award-grid{grid-template-columns:repeat(3,1fr);gap:22px}
.award-card{border-radius:10px;box-shadow:0 10px 35px rgba(18,59,104,.06)}
.award-image-wrap{height:240px;position:relative;overflow:hidden;background:#eaf4fb}
.award-card img{height:100%;object-fit:cover;transition:.5s}
.award-card:hover img{transform:scale(1.04)}
.award-badge{position:absolute;left:14px;top:14px;padding:7px 10px;background:#fff;color:var(--blue);font-size:9px;text-transform:uppercase;letter-spacing:1px;font-weight:800}
.award-card-body p{color:var(--muted);font-size:12px;margin:10px 0 0}

/* Careers */
.career-hero{min-height:470px;padding:150px 9% 85px;color:#fff;background:linear-gradient(90deg,#071f36e8,#071f3660),url("../images/careers-bg.jpg") center/cover;display:flex;align-items:center}
.career-hero>div{max-width:780px}
.career-hero h1{margin-bottom:22px}.career-hero h1 em{color:#b9dbf4}.career-hero .lede{color:#e0edf5;max-width:650px}

/* Contact */
.contact-panel{background:linear-gradient(150deg,#0c4e73,#0b2d4f)}
.contact-panel p{color:#f2f7fb;font-size:14px}
.contact-panel p b{color:#fff}
.contact-image{background-image:url("../images/contact-visual.jpg");background-position:center;background-size:cover}
.contact-photo{background-image:url("../images/tristar-logo.png")}

/* Footer */
.footer-main{grid-template-columns:2.1fr 1fr 1fr 1.7fr}
.footer-brand-col{min-width:0}
.footer-logo-link{display:inline-flex;padding:10px 14px;background:#fff;border-radius:8px}
.footer-logo{width:190px;height:60px;object-fit:contain;filter:none}
.footer-socials{display:flex;gap:9px;margin-top:22px}
.footer-socials a{display:grid!important;place-items:center;width:34px;height:34px;border:1px solid #ffffff2e;border-radius:50%;margin:0!important;color:#fff!important}
.footer-socials span{font-size:12px;font-weight:800}
.footer-contact{display:flex!important;align-items:flex-start;gap:10px}
.contact-icon{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid #ffffff30;border-radius:50%;color:#b9dbf4;font-size:11px;flex:0 0 20px}
.footer-contact span:last-child{line-height:1.55}

@media(max-width:1050px){
 .nav nav{font-size:11px;gap:11px}.partner-logos-head{display:block}.partner-logos-head>p:last-child{text-align:left;margin-top:8px}.featured-card{grid-template-columns:50% 50%}.define-grid{grid-template-columns:1fr 1fr}.blog-grid{grid-template-columns:1fr 1fr}.blog-feature{grid-row:span 2}.footer-main{grid-template-columns:1.5fr 1fr 1fr}
}
@media(max-width:760px){
 .nav nav{font-size:12px}.hero-content{padding-bottom:130px}.partner-logos-section{padding:28px 6%}.partner-logo-track img{width:175px;height:62px}.featured-card{grid-template-columns:1fr;min-height:0}.featured-card-image{min-height:390px}.featured-card-content{padding:35px 8%}.featured-card h3{font-size:42px}.featured-facts{grid-template-columns:1fr 1fr}.define-grid{grid-template-columns:1fr 1fr}.leadership-head{margin-bottom:35px}.blog-grid{grid-template-columns:1fr;grid-auto-rows:280px}.blog-feature{grid-row:span 1}.gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:180px}.gallery-item:nth-child(n){grid-column:span 1;grid-row:span 1}.gallery-item:nth-child(1),.gallery-item:nth-child(6){grid-column:span 2;grid-row:span 2}.award-grid{grid-template-columns:1fr 1fr}.career-hero{min-height:430px;padding:130px 8% 70px}.footer-main{grid-template-columns:1fr 1fr}.footer-main>div:first-child{grid-column:span 2}
}
@media(max-width:420px){
 .nav nav{font-size:11px}.featured-facts{grid-template-columns:1fr}.define-grid{grid-template-columns:1fr}.award-grid{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr}.gallery-item:nth-child(n),.gallery-item:nth-child(1),.gallery-item:nth-child(6){grid-column:auto;grid-row:auto}.career-hero h1{font-size:43px}.footer-main{grid-template-columns:1fr}.footer-main>div:first-child{grid-column:auto}
}

/* =========================================
   PROJECT SECTION - MOBILE FIX
   ========================================= */

@media (max-width: 768px) {

    /* Project grid becomes single column */
    .insight-grid {
        grid-template-columns: 1fr !important;
        gap: 24px;
        width: 100%;
    }

    /* Project card */
    .project-card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Project image */
    .project-card .card-photo {
        height: 240px;
        width: 100%;
        background-position: center;
        background-size: cover;
    }

    /* Card content */
    .project-card .card-body {
        padding: 24px 22px;
    }

    /* Location / category */
    .project-card .card-body > p:first-child {
        font-size: 11px;
        line-height: 1.6;
        margin-bottom: 8px;
    }

    /* Project title */
    .project-card h3 {
        font-size: 22px;
        line-height: 1.2;
        margin-bottom: 18px;
    }

    /* Specifications */
    .project-facts {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin: 18px 0;
    }

    .project-facts span {
        padding: 10px;
        font-size: 10px;
        line-height: 1.4;
    }

    .project-facts b {
        font-size: 12px;
        line-height: 1.4;
        word-break: normal;
    }

    /* Price */
    .project-card .card-body > p:last-of-type {
        font-size: 14px;
        line-height: 1.5;
        margin: 18px 0;
    }

    /* Buttons */
    .project-actions {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 10px;
        width: 100%;
        flex-wrap: nowrap;
    }

    .project-actions .button {
        flex: 1;
        width: auto;
        min-width: 0;
        text-align: center;
        white-space: nowrap;
        padding: 13px 10px;
        font-size: 11px;
    }

    .project-actions .whatsapp-button {
        flex: 0 0 48px;
        width: 48px;
        padding: 13px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
    }

    .project-actions .whatsapp-button span {
        margin: 0;
    }
}

/* =========================================
   CHANNEL PARTNER TESTIMONIALS
========================================= */

.testimonials-section {
    padding: 90px 5% 80px;
    background: #ffffff;
    overflow: hidden;
}


/* ---------- HEADING ---------- */

.testimonials-heading {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 55px;
}

.testimonials-heading h2 {
    margin: 0 0 22px;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 800;
    color: #07345b;
    letter-spacing: -1px;
}

.testimonials-heading p {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    color: #53677b;
}


/* ---------- SLIDER ---------- */

.testimonials-slider {
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}


.testimonials-viewport {
    width: 100%;
    overflow: hidden;
}


.testimonials-track {
    display: flex;
    gap: 40px;
    transition: transform 0.55s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}


/* ---------- TESTIMONIAL CARD ---------- */

.testimonial-card {
    flex: 0 0 calc((100% - 40px) / 2);

    min-height: 380px;
    padding: 42px 45px;

    background: #ffffff;

    border: 1px solid #e5e9ed;
    border-radius: 20px;

    box-shadow: 0 12px 35px rgba(7, 52, 91, 0.07);

    display: flex;
    flex-direction: column;

    box-sizing: border-box;
}


/* ---------- QUOTE ---------- */

.quote-mark {
    font-family: Georgia, serif;

    font-size: 64px;
    line-height: 0.7;

    color: #07345b;

    margin-bottom: 28px;
}


/* ---------- TEXT ---------- */

.testimonial-text {
    margin: 0 0 28px;

    font-size: 18px;
    line-height: 1.8;

    color: #536171;

    font-weight: 500;
}


/* ---------- PERSON ---------- */

.testimonial-card h3 {
    margin: auto 0 8px;

    font-size: 24px;
    line-height: 1.3;

    color: #07345b;
    font-weight: 750;
}


.testimonial-card span {
    font-size: 16px;
    color: #6d7885;
}


/* ---------- ARROWS ---------- */

.testimonial-arrow {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 58px;
    height: 58px;

    border: none;
    border-radius: 50%;

    background: #ffffff;

    color: #07345b;

    font-size: 38px;
    line-height: 1;

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

    cursor: pointer;

    box-shadow: 0 8px 25px rgba(7, 52, 91, 0.12);

    z-index: 5;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.testimonial-arrow:hover {
    background: #07345b;
    color: #ffffff;

    box-shadow: 0 12px 30px rgba(7, 52, 91, 0.20);
}


.testimonial-prev {
    left: -30px;
}


.testimonial-next {
    right: -30px;
}


/* ---------- DOTS ---------- */

.testimonial-dots {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 10px;

    margin-top: 45px;
}


.testimonial-dot {
    width: 11px;
    height: 11px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: #aebbc6;

    cursor: pointer;

    transition:
        width 0.25s ease,
        background 0.25s ease;
}


.testimonial-dot.active {
    width: 11px;
    background: #07345b;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .testimonials-section {
        padding: 75px 5%;
    }

    .testimonials-heading h2 {
        font-size: 36px;
    }

    .testimonial-card {
        padding: 35px;
    }

    .testimonial-text {
        font-size: 16px;
    }

    .testimonial-prev {
        left: -20px;
    }

    .testimonial-next {
        right: -20px;
    }

}


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

@media (max-width: 700px) {

    .testimonials-section {
        padding: 65px 20px;
    }


    .testimonials-heading {
        margin-bottom: 35px;
    }


    .testimonials-heading h2 {
        font-size: 30px;
        line-height: 1.2;
    }


    .testimonials-heading p {
        font-size: 15px;
    }


    .testimonials-track {
        gap: 20px;
    }


    .testimonial-card {
        flex: 0 0 100%;

        min-height: 390px;

        padding: 30px 25px;

        border-radius: 18px;
    }


    .quote-mark {
        font-size: 55px;
        margin-bottom: 20px;
    }


    .testimonial-text {
        font-size: 15px;
        line-height: 1.7;
    }


    .testimonial-card h3 {
        font-size: 21px;
    }


    .testimonial-card span {
        font-size: 14px;
    }


    .testimonial-arrow {
        width: 45px;
        height: 45px;

        font-size: 30px;
    }


    .testimonial-prev {
        left: -10px;
    }


    .testimonial-next {
        right: -10px;
    }


    .testimonial-dots {
        margin-top: 30px;
    }

}