/* =========================================
   GLOBAL
========================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", sans-serif;
    color: #171717;
    overflow-x: hidden;
}

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


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

.header {
    width: 100%;
    height: 88px;
    background: #fff;
    position: relative;
    z-index: 100;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.header-inner {
    width: 100%;
    max-width: 1320px;
    height: 100%;
    margin: auto;

    display: flex;
    align-items: center;
    gap: 25px;

    padding: 0 20px;
}


/* =========================================
   LOGO
========================================= */

.logo {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-shrink: 0;
}

.pyramid {
    width: 40px;
    height: 40px;
    position: relative;

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

    overflow: hidden;
}

.pyramid::before {
    content: "";
    position: absolute;

    width: 0;
    height: 0;

    border-left: 19px solid transparent;
    border-right: 19px solid transparent;
    border-bottom: 34px solid #171717;

    top: 2px;
}

.pyramid::after {
    content: "";
    position: absolute;

    width: 0;
    height: 0;

    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 28px solid #bd9440;

    top: 5px;
    left: 2px;

    opacity: .95;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-text strong {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.8px;
}

.logo-text small {
    margin-top: 6px;

    font-size: 10px;
    letter-spacing: 4px;
    color: #bd9440;
}


/* =========================================
   NAVIGATION
========================================= */

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

    gap: 32px;
    margin-left: auto;
}

.nav a {
    font-size: 13px;
    letter-spacing: 3px;
    color: #555;

    transition: .3s ease;
}

.nav a:hover {
    color: #0d4c3c;
}


/* =========================================
   CONTACT NUMBERS
========================================= */

.header-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    height: 100%;
    flex-shrink: 0;
}

.header-contact div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    font-size: 12px;
    line-height: 17px;
    color: #555;

    text-align: center;
    min-width: 35px;
}


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

.header-btn {
    height: 44px;
    padding: 0 23px;

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

    background: #0d4c3c;
    color: white;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;

    white-space: nowrap;

    box-shadow: 0 5px 12px rgba(0,0,0,.08);

    transition: .3s ease;
}

.header-btn:hover {
    background: #08382d;
}


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

.hero {
    min-height: calc(100vh - 88px);

    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            110deg,
            #f2f0e8 0%,
            #f7f4eb 42%,
            #eee9dc 100%
        );
}


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

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            110deg,
            rgba(255,255,255,.35) 1px,
            transparent 1px
        ),
        linear-gradient(
            20deg,
            rgba(180,170,150,.08) 1px,
            transparent 1px
        );

    background-size: 80px 80px, 100px 100px;

    opacity: .35;
}


/* =========================================
   BUILDING DECORATIONS
========================================= */

.building {
    position: absolute;
    opacity: .10;
    background: linear-gradient(
        135deg,
        transparent 0%,
        #a69c83 50%,
        transparent 100%
    );

    filter: blur(1px);
}

.building-one {
    width: 400px;
    height: 600px;

    left: 20%;
    bottom: -200px;

    transform: rotate(-30deg) skewY(15deg);
}

.building-two {
    width: 300px;
    height: 600px;

    left: 52%;
    bottom: -250px;

    transform: rotate(-12deg) skewY(20deg);
}

.building-three {
    width: 500px;
    height: 650px;

    right: -100px;
    top: 80px;

    transform: rotate(30deg) skewY(-15deg);
}


/* =========================================
   EXTRA FADED PYRAMID
========================================= */

.hero::after {
    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    right: 8%;
    top: 20%;

    background:
        linear-gradient(
            135deg,
            rgba(190,180,155,.04),
            rgba(140,130,110,.14)
        );

    clip-path: polygon(
        50% 0%,
        100% 100%,
        0% 100%
    );

    opacity: .35;
}


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

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 55% 40%,
            rgba(255,255,255,.7),
            transparent 45%
        );

    pointer-events: none;
}


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

.hero-container {
    width: 100%;
    max-width: 1320px;

    margin: auto;

    padding:
        0 20px
        90px 20px;

    position: relative;
    z-index: 5;
}


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

.hero-label {
    width: max-content;

    margin-bottom: 35px;

    padding: 10px 17px;

    border: 1px solid rgba(190,148,64,.35);

    color: #bd9440;

    font-size: 11px;
    letter-spacing: 4px;
}

.dot {
    width: 7px;
    height: 7px;

    display: inline-block;

    background: #0d4c3c;

    border-radius: 50%;

    margin-right: 10px;
}


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

.hero h1 {
    max-width: 700px;

    font-family: "Playfair Display", serif;

    font-size: clamp(50px, 5vw, 76px);

    font-weight: 500;

    line-height: .98;

    letter-spacing: -3px;

    color: #161616;

    margin-bottom: 35px;
}

.hero h1 span {
    color: #bd9440;
}

.hero h1 em {
    color: #3c3c3c;
    font-weight: 500;
}


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

.hero-description {
    max-width: 750px;

    font-size: 21px;
    line-height: 1.45;

    color: #414141;

    margin-bottom: 40px;
}


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

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 17px;
}


/* PRIMARY */

.primary-btn {
    height: 58px;

    padding: 0 30px;

    background: #0d4c3c;
    color: white;

    display: flex;
    align-items: center;
    gap: 25px;

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

    letter-spacing: 2px;

    transition: .3s ease;
}

.primary-btn span {
    font-size: 23px;
    line-height: 1;
}

.primary-btn:hover {
    background: #08382d;
    transform: translateY(-2px);
}


/* SECONDARY */

.secondary-btn {
    height: 58px;

    padding: 0 30px;

    border: 1px solid #c9c5bb;

    display: flex;
    align-items: center;

    font-size: 12px;

    letter-spacing: 2px;

    color: #333;

    transition: .3s ease;
}

.secondary-btn:hover {
    border-color: #0d4c3c;
    color: #0d4c3c;
}


/* =========================================
   FLOATING CHAT
========================================= */

.chat-button {
    position: fixed;

    right: 28px;
    bottom: 30px;

    z-index: 999;

    height: 50px;

    padding: 0 22px;

    display: flex;
    align-items: center;
    gap: 10px;

    background: #064d3d;

    color: white;

    border-radius: 30px;

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

    letter-spacing: 2px;

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

    transition: .3s ease;
}

.chat-button:hover {
    transform: translateY(-3px);
    background: #073b30;
}

.chat-icon {
    font-size: 20px;
}


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

.menu-toggle {
    display: none;

    border: none;
    background: transparent;

    font-size: 28px;

    cursor: pointer;
}


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

@media (max-width: 1200px) {

    .nav {
        gap: 18px;
    }

    .nav a {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .header-contact {
        gap: 10px;
    }

    .header-btn {
        padding: 0 15px;
        font-size: 11px;
    }

}


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

@media (max-width: 900px) {

    .header {
        height: 75px;
    }

.header-inner {
    width: 100%;
    max-width: 1400px;
    height: 100%;
    margin: auto;

    display: flex;
    align-items: center;
    gap: 25px;

    padding: 0 20px;
}

    .nav {
        position: absolute;

        top: 75px;
        left: 0;

        width: 100%;

        background: white;

        display: none;

        flex-direction: column;
        align-items: flex-start;

        padding: 25px;

        gap: 22px;

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

    .nav.active {
        display: flex;
    }

    .nav a {
        font-size: 13px;
    }

    .header-contact,
    .header-btn {
        display: none;
    }

    .menu-toggle {
        display: block;
        margin-left: auto;
    }

    .hero {
        min-height: calc(100vh - 75px);
    }

    .hero-container {
        padding: 60px 25px 100px;
    }

    .hero-label {
        margin-bottom: 25px;
    }

    .hero h1 {
        font-size: clamp(44px, 10vw, 65px);
        letter-spacing: -2px;
    }

    .hero-description {
        font-size: 17px;
        max-width: 650px;
    }

}


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

@media (max-width: 600px) {

    .logo-text strong {
        font-size: 17px;
    }

    .logo-text small {
        font-size: 8px;
        letter-spacing: 3px;
    }

    .pyramid {
        width: 32px;
        height: 35px;
    }

    .hero-container {
        padding: 45px 20px 100px;
    }

    .hero-label {
        font-size: 9px;
        letter-spacing: 2px;
        padding: 9px 12px;
    }

    .hero h1 {
        font-size: 43px;
        line-height: 1;
        margin-bottom: 25px;
    }

    .hero-description {
        font-size: 16px;
        line-height: 1.55;
    }

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

    .primary-btn,
    .secondary-btn {
        justify-content: center;
        width: 100%;
    }

    .chat-button {
        right: 15px;
        bottom: 15px;

        height: 46px;

        padding: 0 17px;

        font-size: 10px;
    }

}
/* =========================================
   STATS SECTION
========================================= */

.stats-section {
    position: relative;

    background: #f4f0e5;

    padding: 0 20px 0;
}

.stats-container {
    width: 100%;
    max-width: 1320px;

    margin: 0 auto;

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

    border: 1px solid #ddd3bd;
}

.stat-box {
    min-height: 142px;

    padding: 30px 27px;

    border-right: 1px solid #ddd3bd;

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

    background: rgba(255,255,255,.08);
}

.stat-box:last-child {
    border-right: none;
}

.stat-number {
    font-family: "Playfair Display", serif;

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

    color: #bd9440;

    margin-bottom: 12px;
}

.stat-label {
    font-size: 11px;

    letter-spacing: 3px;

    color: #666;
}


/* =========================================
   SCROLL INDICATOR
========================================= */

.scroll-indicator {
    position: absolute;

    left: 50%;
    bottom: 27px;

    transform: translateX(-50%);

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

    color: #777;

    font-size: 10px;
    letter-spacing: 4px;
}

.scroll-arrow {
    margin-top: 5px;

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

    letter-spacing: 0;
}


/* =========================================
   FEATURED SECTION
========================================= */

.featured-section {
    background: #f4eddf;

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

.featured-container {
    width: 100%;
    max-width: 1320px;

    min-height: 107px;

    margin: auto;

    display: flex;
    align-items: center;

    gap: 70px;

    padding: 20px;
}


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

.featured-title {
    width: 170px;

    flex-shrink: 0;
}

.featured-title span {
    display: block;

    font-size: 10px;

    color: #bd9440;

    letter-spacing: 4px;

    margin-bottom: 13px;
}

.featured-title div {
    width: 70px;

    height: 1px;

    background: #bd9440;
}


/* =========================================
   FEATURED ITEMS
========================================= */

.featured-items {
    flex: 1;

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

    align-items: center;
}

.featured-item {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    font-family: "Playfair Display", serif;

    font-size: 16px;

    color: #625c51;

    white-space: nowrap;
}

.featured-icon {
    font-family: Arial, sans-serif;

    color: #bd9440;

    font-size: 20px;
}


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

.about-section {
    background: #f8f3e9;

    padding: 140px 20px 100px;

    min-height: 550px;
}

.about-container {
    max-width: 1320px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;
}


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

.section-label {
    display: flex;
    align-items: center;

    gap: 12px;

    color: #bd9440;

    font-size: 11px;

    letter-spacing: 4px;

    margin-bottom: 30px;
}

.section-label span {
    width: 12px;

    height: 1px;

    background: #bd9440;
}

.about-left h2 {
    max-width: 600px;

    font-family: "Playfair Display", serif;

    font-size: 55px;

    line-height: 1.05;

    font-weight: 500;

    color: #171717;

    margin-bottom: 25px;
}

.about-left h2 span {
    color: #bd9440;
    font-style: italic;
}

.about-left p {
    max-width: 560px;

    color: #555;

    font-size: 17px;

    line-height: 1.7;

    margin-bottom: 30px;
}


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

.about-btn {
    display: inline-flex;

    align-items: center;

    gap: 25px;

    height: 52px;

    padding: 0 25px;

    background: #0d4c3c;

    color: #fff;

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 600;

    transition: .3s ease;
}

.about-btn span {
    font-size: 20px;
}

.about-btn:hover {
    background: #08382d;
    transform: translateY(-2px);
}


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

.about-image {
    width: 100%;

    height: 420px;

    overflow: hidden;
}

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

    object-fit: cover;

    display: block;
}


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

@media (max-width: 900px) {

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

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

    .stat-box:nth-child(3),
    .stat-box:nth-child(4) {
        border-top: 1px solid #ddd3bd;
    }

    .featured-container {
        flex-direction: column;

        align-items: flex-start;

        gap: 25px;
    }

    .featured-items {
        width: 100%;

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

        gap: 25px;
    }

    .about-container {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .about-image {
        height: 350px;
    }

}


@media (max-width: 600px) {

    .stats-section {
        padding: 0 15px;
    }

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

    .stat-box {
        min-height: 120px;

        padding: 20px 15px;
    }

    .stat-number {
        font-size: 32px;
    }

    .stat-label {
        font-size: 8px;

        letter-spacing: 2px;
    }

    .scroll-indicator {
        display: none;
    }

    .featured-items {
        grid-template-columns: 1fr;

        gap: 18px;

        justify-items: start;
    }

    .featured-item {
        justify-content: flex-start;

        font-size: 14px;
    }



}
/* =========================================
   ABOUT SECTION
========================================= */

.about-section {
    background: #f7f1e6;
    padding: 0 20px 100px;

    color: #171717;
}

.about-container {
    width: 100%;
    max-width: 1050px;

    margin: 0 auto;

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

    gap: 65px;

    align-items: start;
}


/* =========================================
   LEFT SIDE
========================================= */

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

.about-label {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 25px;

    color: #b68b38;

    font-size: 9px;

    letter-spacing: 4px;
}

.about-label span {
    width: 12px;
    height: 1px;

    background: #b68b38;
}


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

.about-content h2 {
    max-width: 420px;

    margin: 0 0 25px;

    font-family: "Playfair Display", serif;

    font-size: 40px;

    line-height: 1.08;

    font-weight: 500;

    letter-spacing: -1.5px;
}

.about-content h2 em {
    display: block;

    color: #b98b35;

    font-style: italic;

    font-weight: 500;
}


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

.about-content p {
    max-width: 430px;

    margin: 0 0 18px;

    color: #343434;

    font-size: 14px;

    line-height: 1.55;
}

.about-content p strong {
    font-weight: 700;
    color: #111;
}


/* =========================================
   OFFICES
========================================= */

.office-group {
    margin-top: 30px;
}

.office-group.coming {
    margin-top: 22px;
}

.office-title {
    margin-bottom: 10px;

    color: #b68b38;

    font-size: 8px;

    letter-spacing: 3px;
}

.office-list {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}

.office-list span {
    padding: 7px 12px;

    border: 1px solid #a9c2c1;

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

    color: #384c4b;

    font-size: 9px;

    letter-spacing: 2px;
}


/* Coming soon dashed borders */

.coming .office-list span {
    border: 1px dashed #d4b875;

    color: #666;

    background: transparent;
}


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

.about-right {
    width: 100%;
}

.about-image-wrap {
    position: relative;

    width: 100%;

    height: 333px;

    overflow: visible;
}

.about-image-wrap img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================
   EXPERIENCE BOX
========================================= */

.experience-box {
    position: absolute;

    right: 20px;
    bottom: -20px;

    width: 200px;
    height: 72px;

    padding: 12px 18px;

    background: #064d3d;

    color: white;

    display: flex;
    flex-direction: column;

    justify-content: center;

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

.experience-box strong {
    font-family: "Playfair Display", serif;

    font-size: 25px;

    line-height: 1;

    font-weight: 500;
}

.experience-box sup {
    font-size: 13px;
}

.experience-box span {
    margin-top: 5px;

    font-size: 8px;

    letter-spacing: 2px;
}


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

.process-grid {
    margin-top: 55px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 25px;
    row-gap: 0;
}

.process-item {
    min-height: 157px;

    padding: 18px 0;

    border-top: 1px solid #ddd0b8;
}

.process-number {
    margin-bottom: 7px;

    color: #b98b35;

    font-family: "Playfair Display", serif;

    font-size: 22px;
}

.process-item h3 {
    margin: 0 0 9px;

    font-family: "Playfair Display", serif;

    font-size: 17px;

    font-weight: 500;
}

.process-item p {
    margin: 0;

    color: #555;

    font-size: 11px;

    line-height: 1.55;
}


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

@media (max-width: 900px) {

    .about-section {
        padding: 70px 20px;
    }

    .about-container {
        grid-template-columns: 1fr;

        gap: 60px;

        max-width: 650px;
    }

    .about-content h2 {
        font-size: 42px;
    }

    .about-content p {
        max-width: 100%;
        font-size: 15px;
    }

    .about-image-wrap {
        height: 400px;
    }

}


@media (max-width: 600px) {

    .about-section {
        padding: 60px 18px;
    }

    .about-content h2 {
        font-size: 36px;
    }

    .about-label {
        font-size: 8px;
    }

    .about-image-wrap {
        height: 280px;
    }

    .experience-box {
        right: 10px;
        bottom: -15px;

        width: 175px;
        height: 65px;
    }

    .experience-box strong {
        font-size: 22px;
    }

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

        margin-top: 45px;
    }

    .process-item {
        min-height: auto;

        padding: 20px 0;
    }

}
/* =========================================
   ABOUT SECTION - WIDE LAYOUT
========================================= */

.about-section {
    width: 100%;
    background: #f7f1e6;
    padding: 30px 0 120px;
}

.about-container {
    width: calc(100% - 180px);
    max-width: 1320px;

    margin: 0 auto;

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

    column-gap: 105px;

    align-items: start;
}


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

.about-content {
    width: 100%;
    padding-top: 5px;
}

.about-content h2 {
    max-width: 500px;

    font-size: 42px;
    line-height: 1.05;

    margin-bottom: 28px;
}

.about-content p {
    max-width: 500px;

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

    margin-bottom: 20px;
}


/* =========================================
   RIGHT SIDE
========================================= */

.about-right {
    width: 100%;
}

.about-image-wrap {
    width: 100%;
    height: 420px;

    position: relative;
}

.about-image-wrap img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


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

.process-grid {
    width: 100%;

    margin-top: 70px;

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

    column-gap: 35px;
    row-gap: 0;
}

.process-item {
    min-height: 170px;

    padding: 20px 0;

    border-top: 1px solid #ddd0b8;
}

.process-item h3 {
    font-size: 20px;
    margin-bottom: 12px;
}

.process-item p {
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================
   OFFICE TAGS
========================================= */

.office-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.office-list span {
    padding: 8px 14px;

    font-size: 10px;
    letter-spacing: 2px;
}


/* =========================================
   EXPERIENCE BOX
========================================= */

.experience-box {
    right: 25px;
    bottom: -25px;

    width: 225px;
    height: 88px;

    padding: 15px 20px;
}


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

@media (min-width: 1500px) {

    .about-container {
        width: calc(100% - 240px);
        max-width: 1400px;
    }

}


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

@media (max-width: 1100px) {

    .about-container {
        width: calc(100% - 80px);

        column-gap: 50px;
    }

}


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

@media (max-width: 900px) {

    .about-section {
        padding: 70px 0;
    }

    .about-container {
        width: calc(100% - 40px);

        grid-template-columns: 1fr;

        gap: 60px;
    }

    .about-content h2 {
        font-size: 40px;
    }

    .about-content p {
        max-width: 100%;
    }

    .about-image-wrap {
        height: 400px;
    }

    .process-grid {
        margin-top: 55px;
    }

}


@media (max-width: 600px) {

    .about-container {
        width: calc(100% - 30px);
    }

    .about-content h2 {
        font-size: 36px;
    }

    .about-image-wrap {
        height: 280px;
    }

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

}
/* =========================================
   CORE SERVICES
========================================= */

.services-section {
    width: 100%;
    background: #fff;

    padding: 90px 0 120px;
}

.services-container {
    width: calc(100% - 180px);
    max-width: 1320px;

    margin: 0 auto;
}


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

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

.services-label {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #b98b35;

    font-size: 10px;
    letter-spacing: 4px;

    margin-bottom: 32px;
}

.services-label span {
    width: 12px;
    height: 1px;

    background: #b98b35;
}


.services-intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 110px;

    align-items: center;
}

.services-intro h2 {
    max-width: 600px;

    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: 48px;

    line-height: 1.05;

    font-weight: 500;

    letter-spacing: -2px;
}

.services-intro h2 em {
    display: block;

    color: #b98b35;

    font-style: italic;

    font-weight: 500;
}

.services-intro p {
    max-width: 500px;

    margin: 0;

    color: #333;

    font-size: 16px;

    line-height: 1.65;
}


/* =========================================
   SERVICE ROW
========================================= */

.service-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: start;
}


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

.service-image {
    position: relative;

    width: 100%;
    height: 545px;

    overflow: hidden;
}

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

    display: block;

    object-fit: cover;

    filter: brightness(.75);
}


/* Dark gradient */

.service-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 40%,
            rgba(0,0,0,.7) 100%
        );

    pointer-events: none;
}


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

.service-number {
    position: absolute;

    top: 27px;
    left: 27px;

    z-index: 2;

    background: #fff;

    padding: 17px 22px;

    color: #b98b35;

    font-size: 10px;

    letter-spacing: 3px;
}


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

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

.service-content h3 {
    margin: 0 0 8px;

    font-family: "Playfair Display", serif;

    font-size: 40px;

    line-height: 1.1;

    font-weight: 500;
}

.service-content h4 {
    margin: 0 0 30px;

    color: #b98b35;

    font-family: "Playfair Display", serif;

    font-size: 20px;

    font-weight: 400;

    font-style: italic;
}

.service-content > p {
    margin: 0 0 28px;

    max-width: 620px;

    color: #303030;

    font-size: 15px;

    line-height: 1.65;
}


/* =========================================
   SERVICE POINTS
========================================= */

.service-points {
    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 35px;

    row-gap: 15px;

    margin-bottom: 35px;
}

.service-points div {
    color: #555;

    font-size: 14px;

    line-height: 1.4;
}

.service-points span {
    color: #b98b35;

    font-size: 17px;

    margin-right: 10px;
}


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

.service-content blockquote {
    margin: 0 0 35px;

    padding: 5px 0 5px 22px;

    border-left: 2px solid #b98b35;

    color: #333;

    font-family: "Playfair Display", serif;

    font-size: 17px;

    line-height: 1.55;

    font-style: italic;
}

.service-content blockquote small {
    display: block;

    margin-top: 7px;

    color: #a07a34;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;

    letter-spacing: 4px;

    font-style: normal;
}


/* =========================================
   PRINCIPAL LINK
========================================= */

.principal-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #b98b35;

    font-size: 10px;

    letter-spacing: 4px;

    transition: .3s ease;
}

.principal-link span {
    font-size: 18px;
}

.principal-link:hover {
    color: #064d3d;
}


/* =========================================
   NEXT SERVICE
========================================= */

.next-service {
    margin-top: 150px;

    border-top: 1px solid #ddd3c1;

    padding-top: 55px;
}

.next-service h2 {
    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: 40px;

    font-weight: 500;
}


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

@media (max-width: 1100px) {

    .services-container {
        width: calc(100% - 80px);
    }

    .services-intro {
        gap: 50px;
    }

    .service-row {
        gap: 40px;
    }

}


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

@media (max-width: 900px) {

    .services-section {
        padding: 70px 0 90px;
    }

    .services-container {
        width: calc(100% - 40px);
    }

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

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

        gap: 25px;
    }

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

    .service-row {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .service-image {
        height: 420px;
    }

    .service-content h3 {
        font-size: 36px;
    }

}


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

@media (max-width: 600px) {

    .services-container {
        width: calc(100% - 30px);
    }

    .services-intro h2 {
        font-size: 36px;
    }

    .services-intro p {
        font-size: 15px;
    }

    .service-image {
        height: 300px;
    }

    .service-number {
        top: 18px;
        left: 18px;

        padding: 13px 15px;
    }

    .service-content h3 {
        font-size: 32px;
    }

    .service-content h4 {
        font-size: 18px;
    }

    .service-content > p {
        font-size: 14px;
    }

    .service-points {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .service-content blockquote {
        font-size: 15px;
    }

    .next-service {
        margin-top: 90px;
    }

    .next-service h2 {
        font-size: 32px;
    }

}
/* =========================================
   SERVICE DETAIL SECTIONS
========================================= */

.service-detail {
    width: 100%;
    background: #fff;

    padding: 120px 0;
}

.service-detail-container {
    width: calc(100% - 180px);
    max-width: 1320px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;
}


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

.service-detail-content {
    width: 100%;
}

.service-detail-content h2 {
    margin: 0 0 8px;

    font-family: "Playfair Display", serif;

    font-size: 40px;
    line-height: 1.1;

    font-weight: 500;

    letter-spacing: -1.5px;

    color: #171717;
}

.service-detail-content h4 {
    margin: 0 0 32px;

    font-family: "Playfair Display", serif;

    font-size: 20px;

    font-weight: 400;

    font-style: italic;

    color: #b98b35;
}

.service-detail-content > p {
    max-width: 620px;

    margin: 0 0 30px;

    font-size: 15px;

    line-height: 1.6;

    color: #303030;
}


/* =========================================
   POINTS
========================================= */

.service-detail-points {
    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 35px;
    row-gap: 15px;

    margin-bottom: 35px;
}

.service-detail-points div {
    color: #555;

    font-size: 14px;

    line-height: 1.5;
}

.service-detail-points span {
    color: #b98b35;

    font-size: 17px;

    margin-right: 10px;
}


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

.service-detail-content blockquote {
    margin: 0 0 35px;

    padding: 5px 0 5px 22px;

    border-left: 2px solid #b98b35;

    font-family: "Playfair Display", serif;

    font-size: 17px;

    line-height: 1.55;

    font-style: italic;

    color: #333;
}

.service-detail-content blockquote small {
    display: block;

    margin-top: 8px;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;

    letter-spacing: 4px;

    font-style: normal;

    color: #8c7c67;
}


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

.service-detail-image {
    position: relative;

    width: 100%;

    height: 465px;

    overflow: hidden;
}

.service-detail-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    filter: brightness(.82);
}


/* Dark bottom gradient */

.service-detail-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 55%,
            rgba(0,0,0,.55)
        );

    pointer-events: none;
}


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

.service-detail-image .service-number {
    position: absolute;

    top: 26px;
    left: 27px;

    z-index: 2;

    padding: 17px 20px;

    background: #fff;

    color: #b98b35;

    font-size: 10px;

    letter-spacing: 3px;
}


/* =========================================
   PRINCIPAL LINK
========================================= */

.service-detail .principal-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #b98b35;

    font-size: 10px;

    letter-spacing: 4px;

    transition: .3s ease;
}

.service-detail .principal-link span {
    font-size: 18px;
}

.service-detail .principal-link:hover {
    color: #064d3d;
}


/* =========================================
   ALTERNATING SPACING
========================================= */

.service-02 {
    padding-top: 95px;
    padding-bottom: 120px;
}

.service-03 {
    padding-top: 90px;
    padding-bottom: 130px;
}


/* =========================================
   LARGE SCREEN
========================================= */

@media (min-width: 1500px) {

    .service-detail-container {
        width: calc(100% - 180px);
        max-width: 1320px;
    }

}


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

@media (max-width: 1100px) {

    .service-detail-container {
        width: calc(100% - 80px);

        gap: 45px;
    }

    .service-detail-content h2 {
        font-size: 36px;
    }

    .service-detail-image {
        height: 420px;
    }

}


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

@media (max-width: 900px) {

    .service-detail {
        padding: 75px 0;
    }

    .service-detail-container {
        width: calc(100% - 40px);

        grid-template-columns: 1fr;

        gap: 45px;
    }

    /*
       On mobile the image always comes
       after the content for service 02
       and before content for service 03.
    */

    .service-03 .service-detail-image {
        order: 1;
    }

    .service-03 .service-detail-content {
        order: 2;
    }

    .service-detail-image {
        height: 400px;
    }

    .service-detail-content h2 {
        font-size: 36px;
    }

}


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

@media (max-width: 600px) {

    .service-detail-container {
        width: calc(100% - 30px);
    }

    .service-detail-image {
        height: 300px;
    }

    .service-detail-content h2 {
        font-size: 32px;
    }

    .service-detail-content h4 {
        font-size: 18px;
    }

    .service-detail-content > p {
        font-size: 14px;
    }

    .service-detail-points {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .service-detail-content blockquote {
        font-size: 15px;
    }

}
/* =========================================
   BEYOND FUNDING SECTION
========================================= */

.beyond-section {
    width: 100%;

    background: #f7f1e6;

    padding: 145px 0 120px;
}

.beyond-container {
    width: calc(100% - 180px);
    max-width: 1320px;

    margin: 0 auto;
}


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

.beyond-label {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 30px;

    color: #b98b35;

    font-size: 10px;

    letter-spacing: 4px;
}

.beyond-label span {
    width: 12px;
    height: 1px;

    background: #b98b35;
}


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

.beyond-title {
    max-width: 850px;

    margin: 0 0 25px;

    font-family: "Playfair Display", serif;

    font-size: 52px;

    line-height: 1.05;

    font-weight: 500;

    letter-spacing: -2px;

    color: #171717;
}

.beyond-title em {
    color: #b98b35;

    font-style: italic;

    font-weight: 500;
}


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

.beyond-description {
    max-width: 1050px;

    margin: 0 0 65px;

    color: #303030;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================
   FINANCIAL GRID
========================================= */

.financial-grid {
    width: 100%;

    display: grid;

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

    border-top: 1px solid #ddd0b8;

    border-left: 1px solid #ddd0b8;
}


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

.financial-card {
    min-height: 280px;

    padding: 35px 35px 30px;

    border-right: 1px solid #ddd0b8;

    border-bottom: 1px solid #ddd0b8;

    transition: background .3s ease;
}

.financial-card:hover {
    background: rgba(255,255,255,.35);
}


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

.financial-icon {
    width: 48px;
    height: 48px;

    margin-bottom: 27px;

    border: 1px solid #d9c9a9;

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

    color: #b98b35;

    font-size: 23px;

    font-family: serif;
}


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

.financial-card h3 {
    margin: 0 0 12px;

    font-family: "Playfair Display", serif;

    font-size: 21px;

    line-height: 1.2;

    font-weight: 500;

    color: #171717;
}


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

.financial-card p {
    max-width: 270px;

    margin: 0;

    color: #454545;

    font-size: 14px;

    line-height: 1.65;
}


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

@media (max-width: 1100px) {

    .beyond-container {
        width: calc(100% - 80px);
    }

    .beyond-title {
        font-size: 45px;
    }

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

    .financial-card {
        min-height: 250px;
    }

}


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

@media (max-width: 700px) {

    .beyond-section {
        padding: 80px 0;
    }

    .beyond-container {
        width: calc(100% - 40px);
    }

    .beyond-title {
        font-size: 38px;

        letter-spacing: -1px;
    }

    .beyond-description {
        font-size: 15px;

        margin-bottom: 45px;
    }

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

    .financial-card {
        min-height: auto;

        padding: 30px 25px;
    }

    .financial-card p {
        max-width: 100%;
    }

}

/* =========================================
   LEADERSHIP DETAILS
========================================= */

.leadership-details {
    width: calc(100% - 180px);
    max-width: 1320px;

    margin: 55px auto 0;

    display: grid;

    grid-template-columns: 1fr 1.1fr;

    gap: 70px;

    align-items: start;
}


/* =========================================
   CONTACT PANEL
========================================= */

.leadership-contact {
    width: 100%;
}

.contact-box {
    width: 100%;

    border: 1px solid #dedbd3;

    background: rgba(255,255,255,.25);
}

.contact-row {
    min-height: 70px;

    padding: 14px 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid #dedbd3;
}

.contact-row:last-child {
    border-bottom: none;
}

.contact-row a {
    color: #354451;

    font-size: 15px;

    text-decoration: none;

    transition: .3s ease;
}

.contact-row a:hover {
    color: #b98b35;
}

.contact-label {
    display: block;

    margin-bottom: 5px;

    color: #b98b35;

    font-size: 9px;

    letter-spacing: 3px;
}

.contact-arrow {
    color: #b98b35;

    font-size: 20px;
}


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

.leadership-detail-content {
    width: 100%;
}

.leadership-detail-content > p {
    margin: 0 0 35px;

    color: #303030;

    font-size: 16px;

    line-height: 1.65;
}

.leadership-detail-content strong {
    color: #111;

    font-weight: 700;
}


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

.leadership-quote {
    position: relative;

    margin: 0 0 35px;

    padding: 8px 0 8px 23px;

    border-left: 2px solid #b98b35;
}

.quote-mark {
    color: #dcc9a3;

    font-family: Georgia, serif;

    font-size: 48px;

    line-height: .6;

    margin-bottom: 15px;
}

.leadership-quote blockquote {
    margin: 0;

    max-width: 650px;

    color: #292929;

    font-family: "Playfair Display", serif;

    font-size: 18px;

    line-height: 1.45;

    font-style: italic;
}

.quote-author {
    margin-top: 14px;

    color: #8c7c67;

    font-size: 9px;

    letter-spacing: 4px;
}


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

.leadership-stats {
    width: 100%;

    display: grid;

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

    gap: 12px;

    margin-top: 30px;
}

.leadership-stat {
    min-height: 145px;

    padding: 17px;

    border: 1px solid #dedbd3;

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

    display: flex;

    flex-direction: column;

    justify-content: flex-start;
}

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

    margin-bottom: 15px;

    color: #b98b35;

    font-size: 22px;

    line-height: 1;
}

.leadership-stat strong {
    display: block;

    margin-bottom: 10px;

    color: #171717;

    font-family: "Playfair Display", serif;

    font-size: 28px;

    font-weight: 500;

    line-height: 1;
}

.leadership-stat strong sup {
    font-size: 13px;
}

.leadership-stat span {
    color: #8b7965;

    font-size: 8px;

    line-height: 1.5;

    letter-spacing: 2px;
}

.forbes-text {
    font-size: 25px !important;
}


/* =========================================
   BUTTONS
========================================= */

.leadership-buttons {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 35px;
}

.leadership-primary,
.leadership-secondary {
    height: 53px;

    padding: 0 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    letter-spacing: 3px;

    transition: .3s ease;
}

.leadership-primary {
    background: #064d3d;

    color: #fff;
}

.leadership-primary:hover {
    background: #08382d;
}

.leadership-secondary {
    border: 1px solid #d5d0c7;

    color: #444;
}

.leadership-secondary:hover {
    border-color: #b98b35;

    color: #b98b35;
}


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

@media (min-width: 1500px) {

    .leadership-details {
        width: calc(100% - 180px);

        max-width: 1320px;
    }

}


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

@media (max-width: 1100px) {

    .leadership-details {
        width: calc(100% - 80px);

        gap: 45px;
    }

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

}


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

@media (max-width: 900px) {

    .leadership-details {
        width: calc(100% - 40px);

        grid-template-columns: 1fr;

        gap: 40px;

        margin-top: 45px;
    }

    .leadership-detail-content > p {
        font-size: 15px;
    }

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

}


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

@media (max-width: 600px) {

    .leadership-details {
        width: calc(100% - 30px);
    }

    .contact-row {
        min-height: 65px;

        padding: 12px 14px;
    }

    .contact-row a {
        font-size: 13px;
    }

    .leadership-detail-content > p {
        font-size: 14px;
    }

    .leadership-quote blockquote {
        font-size: 16px;
    }

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

        gap: 8px;
    }

    .leadership-stat {
        min-height: 125px;

        padding: 14px;
    }

    .leadership-stat strong {
        font-size: 24px;
    }

    .leadership-buttons {
        flex-direction: column;

        align-items: stretch;
    }

    .leadership-primary,
    .leadership-secondary {
        width: 100%;
    }

}

/* ================================
   THE JOURNEY SECTION ONLY
================================ */

.journey {
    width: 100%;
    background: #faf8f2;
    padding: 115px 0 120px;
}

.journey .container {
    width: calc(100% - 180px);
    max-width: 1320px;
    margin: 0 auto;
}


/* SECTION LABEL */

.journey .section-label {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 26px;

    color: #b88b36;
    font-size: 10px;
    letter-spacing: 4px;
}

.journey .section-label::before {
    content: "";
    width: 13px;
    height: 1px;
    background: #b88b36;
}

.journey .section-icon {
    font-size: 15px;
    letter-spacing: 0;
}


/* MAIN HEADING */

.journey .journey-title {
    max-width: 600px;

    margin: 0 0 62px;

    font-family: "Playfair Display", serif;
    font-size: 40px;
    font-weight: 500;

    line-height: 1.12;
    letter-spacing: -1.5px;

    color: #171717;
}

.journey .journey-title em {
    color: #b88b36;
    font-style: italic;
}


/* ================================
   TIMELINE
================================ */

.journey .timeline {
    position: relative;
    width: 100%;
}


/* VERTICAL LINE */

.journey .timeline::before {
    content: "";

    position: absolute;

    left: 0;
    top: 5px;
    bottom: 0;

    width: 1px;

    background: #dfd3bc;
}


/* TIMELINE ITEM */

.journey .timeline-item {
    position: relative;

    max-width: 850px;

    padding-left: 44px;

    margin-bottom: 40px;
}

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


/* GREEN DOT */

.journey .timeline-dot {
    position: absolute;

    left: -11px;
    top: 1px;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: #07513f;

    border: 4px solid #101b1a;

    z-index: 2;
}


/* YEAR */

.journey .year {
    margin-bottom: 11px;

    color: #b88b36;

    font-size: 10px;
    letter-spacing: 4px;
    line-height: 1;
}


/* TIMELINE TITLE */

.journey .timeline-item h3 {
    margin: 0 0 13px;

    color: #171717;

    font-family: "Playfair Display", serif;

    font-size: 21px;
    font-weight: 500;

    line-height: 1.25;
}


/* TIMELINE TEXT */

.journey .timeline-item p {
    max-width: 820px;

    margin: 0;

    color: #354454;

    font-size: 16px;
    line-height: 1.7;
}


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

@media (max-width: 900px) {

    .journey {
        padding: 75px 0 90px;
    }

    .journey .container {
        width: calc(100% - 40px);
    }

    .journey .journey-title {
        font-size: 34px;
        margin-bottom: 50px;
    }

    .journey .timeline-item {
        padding-left: 35px;
        margin-bottom: 38px;
    }

    .journey .timeline-item p {
        font-size: 15px;
        line-height: 1.65;
    }
}


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

@media (max-width: 600px) {

    .journey .container {
        width: calc(100% - 30px);
    }

    .journey .section-label {
        font-size: 8px;
        letter-spacing: 3px;
    }

    .journey .journey-title {
        font-size: 30px;
        line-height: 1.15;
    }

    .journey .timeline-item {
        padding-left: 30px;
    }

    .journey .timeline-dot {
        left: -10px;

        width: 20px;
        height: 20px;

        border-width: 3px;
    }

    .journey .year {
        font-size: 8px;
        letter-spacing: 3px;
    }

    .journey .timeline-item h3 {
        font-size: 19px;
    }

    .journey .timeline-item p {
        font-size: 14px;
        line-height: 1.65;
    }
}

/* =========================================================
   FOUR PILLARS SECTION
========================================================= */

.pillars-section {
    width: 100%;
    background: #faf8f2;
    padding: 115px 0 135px;
}

.pillars-container {
    width: calc(100% - 180px);
    max-width: 1320px;
    margin: 0 auto;
}


/* TOP CONTENT */

.pillars-heading {
    display: grid;
    grid-template-columns: 1fr 500px;
    align-items: end;
    gap: 70px;
    margin-bottom: 45px;
}

.pillars-label {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 24px;

    color: #b88b36;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 4px;
}

.pillars-label::before {
    content: "";
    width: 13px;
    height: 1px;
    background: #b88b36;
}

.pillars-title {
    margin: 0;

    color: #171717;

    font-family: "Playfair Display", serif;
    font-size: 40px;
    font-weight: 500;

    line-height: 1.12;
    letter-spacing: -1.5px;
}

.pillars-intro {
    color: #354454;

    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    line-height: 1.6;

    padding-bottom: 2px;
}


/* =========================================================
   FOUR PILLARS GRID
========================================================= */

.pillars-grid {
    width: 100%;

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

    border-top: 1px solid #e2d8c6;
    border-left: 1px solid #e2d8c6;
}

.pillar-card {
    min-height: 270px;

    padding: 30px 30px 32px;

    border-right: 1px solid #e2d8c6;
    border-bottom: 1px solid #e2d8c6;

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

    transition: background 0.3s ease;
}

.pillar-card:hover {
    background: rgba(255, 255, 255, 0.45);
}


/* ICON */

.pillar-icon {
    width: 49px;
    height: 49px;

    margin-bottom: 25px;

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

    border: 1px solid #dcccae;

    color: #b88b36;

    font-size: 22px;
    line-height: 1;
}


/* TITLE */

.pillar-card h3 {
    margin: 0 0 12px;

    color: #171717;

    font-family: "Playfair Display", serif;
    font-size: 21px;
    font-weight: 500;

    line-height: 1.25;
}


/* DESCRIPTION */

.pillar-card p {
    margin: 0;

    color: #354454;

    font-family: "DM Sans", sans-serif;
    font-size: 15px;

    line-height: 1.65;
}


/* =========================================================
   OPERATING PRINCIPLES SECTION
========================================================= */

.principles-section {
    width: 100%;

    background: #faf8f2;

    padding: 20px 0 130px;
}

.principles-container {
    width: calc(100% - 180px);
    max-width: 1320px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 500px 1fr;

    gap: 70px;

    align-items: start;
}


/* LEFT SIDE */

.principles-label {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 27px;

    color: #b88b36;

    font-size: 10px;
    font-weight: 400;

    letter-spacing: 4px;
}

.principles-label::before {
    content: "";

    width: 13px;
    height: 1px;

    background: #b88b36;
}

.principles-title {
    margin: 0 0 30px;

    color: #171717;

    font-family: "Playfair Display", serif;
    font-size: 40px;
    font-weight: 500;

    line-height: 1.12;
    letter-spacing: -1.5px;
}

.principles-title em {
    color: #171717;
    font-style: italic;
}

.principles-description {
    max-width: 500px;

    margin: 0;

    color: #354454;

    font-family: "DM Sans", sans-serif;
    font-size: 16px;

    line-height: 1.7;
}


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

.principles-grid {
    display: grid;

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

    gap: 18px;
}

.principle-card {
    min-height: 168px;

    padding: 24px 22px 25px;

    border: 1px solid #e0ddd6;

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

    transition: all 0.3s ease;
}

.principle-card:hover {
    background: #ffffff;

    border-color: #d7c5a2;

    transform: translateY(-2px);
}


/* ICON */

.principle-icon {
    width: 25px;
    height: 25px;

    margin-bottom: 18px;

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

    color: #b88b36;

    font-size: 21px;
}


/* CARD TITLE */

.principle-card h3 {
    margin: 0 0 12px;

    color: #171717;

    font-family: "Playfair Display", serif;

    font-size: 20px;
    font-weight: 500;

    line-height: 1.25;
}


/* CARD TEXT */

.principle-card p {
    margin: 0;

    color: #354454;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;

    line-height: 1.6;
}


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

@media (max-width: 1200px) {

    .pillars-container,
    .principles-container {
        width: calc(100% - 80px);
    }

    .pillars-heading {
        grid-template-columns: 1fr 400px;
        gap: 40px;
    }

    .principles-container {
        grid-template-columns: 420px 1fr;
        gap: 45px;
    }

    .pillar-card {
        padding: 25px 22px;
    }

}


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

@media (max-width: 900px) {

    .pillars-section {
        padding: 80px 0 90px;
    }

    .pillars-container,
    .principles-container {
        width: calc(100% - 40px);
    }

    /* PILLARS TOP */

    .pillars-heading {
        display: block;
        margin-bottom: 40px;
    }

    .pillars-label {
        font-size: 9px;
        letter-spacing: 3px;
    }

    .pillars-title {
        font-size: 34px;
        line-height: 1.15;
        margin-bottom: 25px;
    }

    .pillars-intro {
        font-size: 15px;
    }

    /* PILLARS GRID */

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

    .pillar-card {
        min-height: 250px;
        padding: 25px 20px;
    }

    .pillar-icon {
        width: 45px;
        height: 45px;
        margin-bottom: 20px;
    }

    .pillar-card h3 {
        font-size: 19px;
    }

    .pillar-card p {
        font-size: 14px;
    }


    /* PRINCIPLES */

    .principles-section {
        padding: 30px 0 90px;
    }

    .principles-container {
        display: block;
    }

    .principles-title {
        font-size: 34px;
        line-height: 1.15;
        margin-bottom: 25px;
    }

    .principles-description {
        margin-bottom: 45px;
        font-size: 15px;
    }

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

    .principle-card {
        min-height: 160px;
        padding: 20px 18px;
    }

    .principle-card h3 {
        font-size: 18px;
    }

}


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

@media (max-width: 600px) {

    .pillars-section {
        padding: 65px 0 75px;
    }

    .pillars-container,
    .principles-container {
        width: calc(100% - 30px);
    }

    .pillars-title {
        font-size: 30px;
        letter-spacing: -0.8px;
    }

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

    .pillar-card {
        min-height: auto;
        padding: 25px 22px 28px;
    }

    .pillar-card h3 {
        font-size: 20px;
    }

    .pillar-card p {
        font-size: 14px;
    }


    /* PRINCIPLES */

    .principles-section {
        padding: 25px 0 70px;
    }

    .principles-label {
        font-size: 8px;
        letter-spacing: 3px;
    }

    .principles-title {
        font-size: 30px;
        letter-spacing: -0.8px;
    }

    .principles-description {
        font-size: 14px;
    }

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

    .principle-card {
        min-height: auto;
        padding: 22px 20px 25px;
    }

    .principle-card h3 {
        font-size: 19px;
    }

    .principle-card p {
        font-size: 14px;
    }

}

/* =========================================================
   RECOGNITION & VOICE
========================================================= */

.recognition-section {
    width: 100%;
    background: #faf8f2;
    padding: 110px 0 90px;
}

.recognition-container {
    width: calc(100% - 180px);
    max-width: 1320px;
    margin: 0 auto;
}

/* SECTION LABEL */

.recognition-label {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 25px;

    color: #b88b36;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 4px;
}

.recognition-label::before {
    content: "";
    width: 13px;
    height: 1px;
    background: #b88b36;
}

/* MAIN HEADING */

.recognition-title {
    margin: 0 0 45px;

    color: #171717;

    font-family: "Playfair Display", serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.15;

    letter-spacing: -1.5px;
}


/* =========================================================
   THREE COLUMN CARDS
========================================================= */

.recognition-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    align-items: stretch;
}

.recognition-card {
    background: #f6f0e4;
    border: 1px solid #e1d8c8;

    padding: 32px 31px 34px;

    min-height: 520px;

    box-sizing: border-box;
}


/* CARD LABEL */

.recognition-card-label {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 25px;

    color: #b88b36;

    font-size: 10px;
    font-weight: 400;

    letter-spacing: 3.5px;
}

.recognition-card-label i {
    color: #b88b36;
    font-size: 17px;
    font-style: normal;
}


/* =========================================================
   AWARDS LIST
========================================================= */

.award-item {
    padding: 0 0 21px;
    margin-bottom: 21px;

    border-bottom: 1px solid #e2d9ca;
}

.award-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.award-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 10px;
}

.award-item h3 {
    margin: 0;

    color: #171717;

    font-family: "Playfair Display", serif;

    font-size: 18px;
    font-weight: 500;

    line-height: 1.3;
}

.award-year {
    flex-shrink: 0;

    padding-top: 3px;

    color: #b88b36;

    font-size: 10px;
    letter-spacing: 2px;
}

.award-item p {
    margin: 0;

    color: #354454;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   SPEAKING CARD
========================================================= */

.speaking-card > p {
    margin: 0 0 20px;

    color: #354454;

    font-family: "DM Sans", sans-serif;

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

.speaking-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.speaking-list li {
    position: relative;

    margin-bottom: 13px;
    padding-left: 17px;

    color: #354454;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;
    line-height: 1.5;
}

.speaking-list li::before {
    content: "•";

    position: absolute;
    left: 0;
    top: 0;

    color: #07523f;

    font-size: 18px;
}


/* LINK */

.recognition-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 18px;

    color: #b88b36;

    text-decoration: none;

    font-size: 10px;
    letter-spacing: 3px;

    transition: all 0.3s ease;
}

.recognition-link:hover {
    color: #07523f;
}


/* =========================================================
   BOARDS / ADVISORY
========================================================= */

.advisory-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.advisory-list li {
    position: relative;

    margin-bottom: 17px;
    padding-left: 17px;

    color: #354454;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;
    line-height: 1.55;
}

.advisory-list li::before {
    content: "•";

    position: absolute;
    left: 0;
    top: 0;

    color: #07523f;

    font-size: 18px;
}

.advisory-note {
    margin-top: 25px;

    color: #7b766d;

    font-family: "DM Sans", sans-serif;

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   PRIVATE WORD / CTA SECTION
========================================================= */

.private-briefing {
    margin-top: 60px;

    min-height: 150px;

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

    gap: 40px;

    padding: 40px 45px;

    background:
        linear-gradient(
            120deg,
            #f5f0e7 0%,
            #d6d9d6 45%,
            #172938 100%
        );

    border: 1px solid #d9d5ce;
}

.private-briefing h2 {
    margin: 0 0 8px;

    color: #171717;

    font-family: "Playfair Display", serif;

    font-size: 32px;
    font-weight: 500;
}

.private-briefing p {
    margin: 0;

    color: #354454;

    font-family: "DM Sans", sans-serif;

    font-size: 15px;
    line-height: 1.5;
}

.private-briefing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 290px;

    padding: 19px 30px;

    background: #07523f;

    color: #fff;

    text-decoration: none;

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

    letter-spacing: 2px;

    transition: background 0.3s ease;
}

.private-briefing-btn:hover {
    background: #063f31;
}


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

@media (max-width: 1200px) {

    .recognition-container {
        width: calc(100% - 80px);
    }

    .recognition-grid {
        gap: 18px;
    }

    .recognition-card {
        padding: 28px 24px;
    }

}


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

@media (max-width: 900px) {

    .recognition-section {
        padding: 80px 0 70px;
    }

    .recognition-container {
        width: calc(100% - 40px);
    }

    .recognition-title {
        font-size: 34px;
        margin-bottom: 35px;
    }

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

    .recognition-card {
        min-height: auto;
        padding: 28px 24px;
    }

    .private-briefing {
        flex-direction: column;
        align-items: flex-start;

        padding: 32px 25px;
    }

    .private-briefing-btn {
        width: 100%;
        min-width: 0;
    }

}


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

@media (max-width: 600px) {

    .recognition-section {
        padding: 65px 0 60px;
    }

    .recognition-container {
        width: calc(100% - 30px);
    }

    .recognition-label {
        font-size: 8px;
        letter-spacing: 3px;
    }

    .recognition-title {
        font-size: 29px;
        letter-spacing: -0.8px;
        line-height: 1.18;
    }

    .recognition-card {
        padding: 25px 20px;
    }

    .recognition-card-label {
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .award-item h3 {
        font-size: 17px;
    }

    .award-item p,
    .speaking-card > p,
    .speaking-list li,
    .advisory-list li {
        font-size: 14px;
    }

    .private-briefing {
        margin-top: 40px;
        padding: 28px 20px;
    }

    .private-briefing h2 {
        font-size: 27px;
    }

}

/* =========================================================
   INVESTMENT SECTION
========================================================= */

.invest-section {
    background: #f5eee1;
    padding: 110px 0 100px;
    color: #142d3d;
}

.invest-container {
    width: calc(100% - 180px);
    max-width: 1320px;
    margin: auto;
}


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

.invest-intro {
    display: grid;
    grid-template-columns: 1.35fr .9fr;
    gap: 70px;
    align-items: center;
    margin-bottom: 70px;
}

.invest-label,
.chart-label {
    color: #b88b36;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.invest-label strong {
    color: #111;
    font-weight: 700;
    letter-spacing: 1px;
}

.invest-intro h2 {
    margin: 0 0 28px;

    font-family: "Playfair Display", Georgia, serif;
    font-size: 58px;
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -2px;

    color: #171717;
}

.invest-intro h2 em {
    color: #07523f;
    font-style: italic;
}

.invest-intro p {
    max-width: 760px;
    margin: 0;

    font-family: "DM Sans", sans-serif;
    font-size: 17px;
    line-height: 1.75;

    color: #233c4e;
}


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

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

.performance-card {
    background: #fff;
    min-height: 138px;

    padding: 24px;

    border: 1px solid #e4ddd1;

    box-sizing: border-box;
}

.performance-icon {
    display: block;

    color: #b88b36;
    font-size: 20px;

    margin-bottom: 10px;
}

.performance-number {
    color: #07523f;

    font-family: "Playfair Display", Georgia, serif;

    font-size: 31px;
    line-height: 1;
}

.performance-number span {
    font-size: 20px;
}

.performance-label {
    margin-top: 10px;

    color: #52606b;

    font-size: 9px;
    letter-spacing: 2.5px;
}


/* =========================================================
   CHART GRID
========================================================= */

.invest-chart-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 28px;

    margin-bottom: 28px;
}

.invest-chart-card,
.returns-card,
.projection-card {
    background: #fff;
    border: 1px solid #e1d7c7;
    padding: 34px;
    box-sizing: border-box;
}

.chart-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.chart-top h3,
.invest-chart-card h3,
.projection-card h3 {
    margin: 0;

    color: #161616;

    font-family: "Playfair Display", Georgia, serif;

    font-size: 27px;
    font-weight: 500;
    line-height: 1.2;
}

.chart-cagr {
    text-align: right;
}

.chart-cagr small {
    display: block;

    color: #52606b;

    font-size: 9px;
    letter-spacing: 2px;
}

.chart-cagr strong {
    display: block;

    color: #07523f;

    font-family: "Playfair Display", Georgia, serif;

    font-size: 25px;
    font-weight: 400;
}


/* =========================================================
   AUM CHART
========================================================= */

.aum-chart {
    margin-top: 25px;
}

.aum-chart svg {
    display: block;
    width: 100%;
    height: 230px;
}

.chart-grid-line {
    stroke: #e8e5df;
    stroke-width: 1;
    stroke-dasharray: 2 5;
}

.chart-point {
    fill: #fff;
    stroke: #b88b36;
    stroke-width: 2;
}

.chart-value {
    fill: #172b38;
    font-family: Arial, sans-serif;
    font-size: 11px;
    text-anchor: middle;
}

.chart-years,
.projection-years {
    display: flex;
    justify-content: space-between;

    margin-top: 12px;
    padding: 0 4px;

    color: #425463;

    font-size: 10px;
    letter-spacing: 2px;
}


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

.portfolio-card h3 {
    margin-bottom: 25px;
}

.portfolio-content {
    display: flex;
    align-items: center;
    gap: 35px;
}

.donut-wrap {
    flex: 0 0 175px;
}

.donut-chart {
    width: 175px;
    height: 175px;

    border-radius: 50%;

    background:
        conic-gradient(
            #07523f 0deg 122deg,
            #b78c3d 122deg 201deg,
            #31795f 201deg 266deg,
            #d8b96e 266deg 316deg,
            #87631c 316deg 360deg
        );

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

.donut-center {
    width: 92px;
    height: 92px;

    border-radius: 50%;

    background: #fff;

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

    text-align: center;
}

.donut-center strong {
    font-family: "Playfair Display", Georgia, serif;

    color: #07523f;

    font-size: 20px;
}

.donut-center small {
    margin-top: 3px;

    color: #66727a;

    font-size: 8px;
    letter-spacing: 2px;
}

.portfolio-list {
    flex: 1;
}

.portfolio-list div {
    display: grid;
    grid-template-columns: 13px 1fr auto;
    align-items: center;
    gap: 9px;

    margin-bottom: 15px;

    color: #324653;

    font-size: 13px;
}

.portfolio-list strong {
    color: #07523f;
}

.portfolio-dot {
    width: 10px;
    height: 10px;
    display: block;
}

.green {
    background: #07523f;
}

.gold {
    background: #b78c3d;
}

.teal {
    background: #31795f;
}

.light-gold {
    background: #d8b96e;
}

.dark-gold {
    background: #87631c;
}


/* =========================================================
   RETURNS
========================================================= */

.returns-card {
    margin-bottom: 28px;
}

.returns-legend,
.projection-legend {
    display: flex;
    gap: 22px;

    color: #53606a;

    font-size: 9px;
    letter-spacing: 2px;
}

.returns-legend span,
.projection-legend span {
    display: flex;
    align-items: center;
    gap: 9px;
}

.legend-green {
    width: 12px;
    height: 12px;
    display: inline-block;
    background: #07523f;
}

.legend-gold {
    width: 12px;
    height: 12px;
    display: inline-block;
    background: #b78c3d;
}

.bar-chart {
    height: 370px;

    display: flex;
    justify-content: space-around;
    align-items: flex-end;

    padding: 40px 50px 0;

    border-bottom: 1px solid #ded8ce;

    box-sizing: border-box;
}

.bar-group {
    height: 100%;

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

    gap: 9px;

    position: relative;

    padding-bottom: 42px;
}

.bar {
    width: 55px;
    position: relative;
}

.benchmark-bar {
    background: #bea15e;
}

.actual-bar {
    background: #07523f;
}

.bar-value {
    position: absolute;

    font-size: 14px;
    font-weight: 500;
}

.bar-value.benchmark {
    color: #8d661d;
    transform: translateX(-4px);
    bottom: calc(42px + var(--bar-height));
}

.bar-value.actual {
    color: #07523f;
    transform: translateX(5px);
    bottom: calc(42px + var(--bar-height));
}

.bar-group > span {
    position: absolute;
    bottom: 10px;

    color: #52606b;

    font-size: 11px;
    letter-spacing: 3px;
}


/* =========================================================
   PROJECTION
========================================================= */

.projection-card {
    margin-bottom: 80px;
}

.projection-header {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.projection-header h3 {
    margin-bottom: 14px;
}

.projection-header p {
    max-width: 850px;

    margin: 0;

    color: #40515e;

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

.projection-tag {
    align-self: flex-start;

    white-space: nowrap;

    padding: 7px 12px;

    background: #f6f1e8;

    color: #b88b36;

    font-size: 8px;
    letter-spacing: 3px;
}

.projection-chart {
    margin-top: 35px;
}

.projection-chart svg {
    display: block;

    width: 100%;
    height: 330px;
}

.projection-point {
    fill: #fff;
    stroke: #07523f;
    stroke-width: 3;
}

.projection-value {
    fill: #07523f;

    font-family: Arial, sans-serif;

    font-size: 13px;
    font-weight: 600;
}

.revenue-value {
    fill: #9a6e20;

    font-family: Arial, sans-serif;

    font-size: 12px;
}

.projection-legend {
    margin-top: 20px;
}

.projection-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 12px;

    margin-top: 30px;
}

.projection-summary div {
    background: #f7f1e6;

    border: 1px solid #ded5c7;

    padding: 20px;
}

.projection-summary strong {
    display: block;

    color: #07523f;

    font-family: "Playfair Display", Georgia, serif;

    font-size: 25px;
    font-weight: 500;
}

.projection-summary span {
    display: block;

    margin-top: 8px;

    color: #52606b;

    font-size: 8px;
    letter-spacing: 2px;
}

.projection-note {
    margin: 18px 0 0;

    color: #68737b;

    font-size: 11px;
    line-height: 1.5;
}


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

@media (max-width: 1000px) {

    .invest-container {
        width: calc(100% - 50px);
    }

    .invest-intro {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .invest-chart-grid {
        grid-template-columns: 1fr;
    }

    .invest-intro h2 {
        font-size: 48px;
    }

    .portfolio-content {
        justify-content: center;
    }

}


@media (max-width: 700px) {

    .invest-section {
        padding: 70px 0;
    }

    .invest-container {
        width: calc(100% - 30px);
    }

    .invest-intro h2 {
        font-size: 37px;
        letter-spacing: -1px;
    }

    .invest-intro p {
        font-size: 15px;
    }

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

    .invest-chart-card,
    .returns-card,
    .projection-card {
        padding: 22px 18px;
    }

    .chart-top {
        flex-direction: column;
    }

    .chart-cagr {
        text-align: left;
    }

    .chart-top h3,
    .invest-chart-card h3,
    .projection-card h3 {
        font-size: 23px;
    }

    .portfolio-content {
        flex-direction: column;
    }

    .bar-chart {
        padding-left: 0;
        padding-right: 0;

        overflow-x: auto;
        justify-content: flex-start;

        gap: 30px;
    }

    .bar-group {
        min-width: 85px;
    }

    .projection-header {
        flex-direction: column;
    }

    .projection-chart {
        overflow-x: auto;
    }

    .projection-chart svg {
        min-width: 700px;
    }

    .projection-summary {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 480px) {

    .invest-intro h2 {
        font-size: 31px;
    }

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

    .performance-card {
        min-height: 125px;
    }

    .donut-chart {
        width: 155px;
        height: 155px;
    }

    .donut-wrap {
        flex-basis: 155px;
    }

    .projection-summary {
        grid-template-columns: 1fr;
    }

    .chart-years {
        min-width: 650px;
    }

    .aum-chart {
        overflow-x: auto;
    }

    .aum-chart svg {
        min-width: 700px;
    }

}

/* =========================================================
   INVESTMENT SECTION
========================================================= */

.ways-invest-section {
    background: #f4eee2;
    padding: 110px 0 100px;
    color: #173044;
}

.ways-invest-container {
    width: calc(100% - 180px);
    max-width: 1320px;
    margin: 0 auto;
}


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

.ways-invest-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 40px;
}

.small-gold-title {
    display: block;

    color: #b88b36;

    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;

    margin-bottom: 20px;
}

.ways-invest-heading h2,
.investor-request-content h2 {
    margin: 0;

    color: #111;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 40px;
    line-height: 1.15;
    font-weight: 500;

    letter-spacing: -1.5px;
}

.investor-deck-link {
    color: #07533f;

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 10px;
    letter-spacing: 3px;

    margin-bottom: 8px;

    transition: .3s;
}

.investor-deck-link:hover {
    color: #b88b36;
}


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

.investment-cards {
    display: grid;

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

    gap: 27px;
}


.investment-card {
    position: relative;

    min-height: 394px;

    background: #fff;

    border: 1px solid #e2ddd4;

    padding: 34px 30px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
}


.card-category {
    display: block;

    color: #b88b36;

    font-family: Arial, sans-serif;

    font-size: 10px;
    letter-spacing: 3px;

    margin-bottom: 18px;
}


.investment-card h3 {
    margin: 0 0 28px;

    color: #111;

    font-family: Georgia, "Times New Roman", serif;

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

    font-weight: 500;
}


/* =========================================================
   FEATURED CARD
========================================================= */

.investment-card-featured {
    background: #084d3b;

    border-color: #084d3b;

    color: #fff;

    padding-top: 34px;
}


.investment-card-featured h3 {
    color: #111;
}


.investment-card-featured .card-category {
    color: #c79a43;
}


.popular-tag {
    position: absolute;

    top: -13px;
    left: 27px;

    background: #bd963f;

    color: #064b3a;

    padding: 7px 13px;

    font-family: Arial, sans-serif;

    font-size: 9px;
    letter-spacing: 3px;
}


/* =========================================================
   DETAILS
========================================================= */

.investment-details {
    display: flex;
    flex-direction: column;

    gap: 13px;

    margin-bottom: 20px;
}


.investment-details div {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;
}


.investment-details span {
    color: #6b7880;

    font-family: Arial, sans-serif;

    font-size: 9px;
    letter-spacing: 2px;
}


.investment-details strong {
    color: #152d3d;

    font-family: Arial, sans-serif;

    font-size: 14px;

    font-weight: 500;

    text-align: right;
}


/* Featured */

.investment-card-featured .investment-details span {
    color: #b9c9c3;
}

.investment-card-featured .investment-details strong {
    color: #fff;
}


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

.investment-features {
    list-style: none;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    gap: 11px;
}


.investment-features li {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    color: #334d5d;

    font-family: Arial, sans-serif;

    font-size: 14px;
    line-height: 1.4;
}


.investment-features li span {
    color: #07533f;

    font-weight: bold;

    font-size: 15px;
}


/* Featured */

.investment-card-featured .investment-features li {
    color: #e7eee9;
}

.investment-card-featured .investment-features li span {
    color: #c39435;
}


/* =========================================================
   INTERESTED LINK
========================================================= */

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

    color: #07533f;

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 3px;

    transition: .3s;
}


.interested-link:hover {
    color: #b88b36;
}


.investment-card-featured .interested-link {
    color: #c39435;
}


/* =========================================================
   FEATURE BOXES
========================================================= */

.investment-feature-grid {
    display: grid;

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

    gap: 27px;

    margin-top: 72px;
}


.investment-feature-card {
    background: #fff;

    border: 1px solid #e2ddd4;

    min-height: 178px;

    padding: 30px 27px;

    box-sizing: border-box;
}


.feature-icon {
    color: #b88b36;

    font-size: 22px;

    margin-bottom: 22px;
}


.investment-feature-card h3 {
    margin: 0 0 12px;

    color: #111;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 22px;

    font-weight: 500;
}


.investment-feature-card p {
    margin: 0;

    color: #53616b;

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   REQUEST INVESTOR SECTION
========================================================= */

.investor-request-section {
    display: grid;

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

    gap: 70px;

    margin-top: 90px;

    align-items: start;
}


.investor-request-content {
    padding-top: 10px;
}


.investor-request-content h2 {
    font-size: 39px;

    margin-bottom: 25px;
}


.investor-request-content > p {
    max-width: 520px;

    margin: 0 0 30px;

    color: #354c5d;

    font-family: Arial, sans-serif;

    font-size: 16px;

    line-height: 1.7;
}


.investor-contact p {
    margin: 0 0 12px;

    color: #304757;

    font-family: Arial, sans-serif;

    font-size: 14px;
}


.investor-contact strong {
    color: #07533f;
}


/* =========================================================
   FORM BOX
========================================================= */

.investor-form-box {
    background: #fff;

    border: 1px solid #e2ddd4;

    padding: 34px;

    box-sizing: border-box;
}


.form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-bottom: 20px;
}


.form-group {
    display: flex;

    flex-direction: column;
}


.form-group.full-width {
    margin-bottom: 20px;
}


.form-group label {
    color: #4f6270;

    font-family: Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 3px;

    margin-bottom: 9px;
}


.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    background: #f5efe5;

    border: 1px solid #ddd5c8;

    border-radius: 0;

    outline: none;

    box-sizing: border-box;

    color: #162f41;

    font-family: Arial, sans-serif;

    font-size: 14px;
}


.form-group input,
.form-group select {
    height: 47px;

    padding: 0 15px;
}


.form-group textarea {
    height: 112px;

    resize: none;

    padding: 15px;

    line-height: 1.5;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #b88b36;
}


.form-group textarea::placeholder {
    color: #a6b2bd;
}


/* =========================================================
   SUBMIT ROW
========================================================= */

.form-submit-row {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 27px;
}


.form-submit-row button {
    min-width: 250px;

    min-height: 70px;

    padding: 10px 25px;

    background: #07533f;

    border: none;

    color: #fff;

    cursor: pointer;

    font-family: Arial, sans-serif;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 3px;

    line-height: 1.6;

    transition: .3s;
}


.form-submit-row button:hover {
    background: #b88b36;
}


.form-submit-row button span {
    margin-right: 10px;

    color: #fff;
}


.form-submit-row p {
    margin: 0;

    max-width: 400px;

    color: #68747d;

    font-family: Arial, sans-serif;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.investment-disclaimer {
    margin-top: 50px;

    max-width: 1100px;

    color: #68747d;

    font-family: Arial, sans-serif;

    font-size: 11px;

    line-height: 1.7;
}


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

@media (max-width: 1100px) {

    .ways-invest-container {
        width: calc(100% - 60px);
    }

    .investment-cards,
    .investment-feature-grid {
        gap: 18px;
    }

    .investor-request-section {
        gap: 40px;
    }

}


@media (max-width: 900px) {

    .ways-invest-section {
        padding: 80px 0;
    }

    .ways-invest-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 25px;
    }

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

    .investment-cards {
        grid-template-columns: 1fr;
    }

    .investment-card {
        min-height: auto;

        padding: 32px 27px;
    }

    .investment-feature-grid {
        grid-template-columns: 1fr;
    }

    .investor-request-section {
        grid-template-columns: 1fr;

        gap: 40px;
    }

}


@media (max-width: 600px) {

    .ways-invest-container {
        width: calc(100% - 30px);
    }

    .ways-invest-section {
        padding: 60px 0;
    }

    .ways-invest-heading h2 {
        font-size: 30px;

        letter-spacing: -1px;
    }

    .small-gold-title {
        font-size: 9px;

        letter-spacing: 3px;
    }

    .investment-card h3 {
        font-size: 24px;
    }

    .investment-details div {
        align-items: flex-start;
    }

    .investment-details strong {
        max-width: 180px;
    }

    .investment-feature-card {
        min-height: auto;
    }

    .investor-request-section {
        margin-top: 65px;
    }

    .investor-request-content h2 {
        font-size: 31px;
    }

    .investor-form-box {
        padding: 22px 18px;
    }

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

        gap: 18px;

        margin-bottom: 18px;
    }

    .form-submit-row {
        flex-direction: column;

        align-items: stretch;
    }

    .form-submit-row button {
        width: 100%;
    }

    .form-submit-row p {
        max-width: none;
    }

}


@media (max-width: 400px) {

    .investment-details div {
        flex-direction: column;

        gap: 4px;
    }

    .investment-details strong {
        text-align: left;
    }

    .investment-card {
        padding: 27px 20px;
    }

    .investor-form-box {
        padding: 20px 15px;
    }

}

/* =========================================================
   AI DOCUMENT REVIEW
========================================================= */

.ai-review-section {
    background: #f5eee1;
    padding: 115px 0 140px;
    color: #173247;
}


.ai-review-container {
    width: calc(100% - 180px);
    max-width: 1320px;
    margin: auto;
}


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

.ai-review-hero {
    display: grid;
    grid-template-columns: 1.35fr .85fr;
    gap: 70px;
    align-items: center;

    margin-bottom: 60px;
}


.section-label {
    color: #b58a38;

    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;

    margin-bottom: 27px;
}


.ai-review-intro h1 {
    max-width: 680px;

    margin: 0 0 24px;

    color: #151515;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 51px;
    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -2px;
}


.ai-review-intro h1 em {
    display: block;

    color: #bd923e;

    font-style: italic;
}


.ai-review-intro p {
    max-width: 670px;

    margin: 0;

    color: #334d60;

    font-family: Arial, sans-serif;

    font-size: 16px;

    line-height: 1.8;
}


.ai-review-intro p a {
    color: #b98932;

    text-decoration: underline;
}


/* =========================================================
   BADGES
========================================================= */

.ai-review-badges {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;
}


.review-badge {
    min-height: 43px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 14px;

    box-sizing: border-box;

    border: 1px solid #e1d6c2;

    color: #465968;

    font-family: Arial, sans-serif;

    font-size: 12px;
}


.review-badge span {
    color: #b68a35;

    font-size: 17px;
}


/* =========================================================
   MAIN GRID
========================================================= */

.ai-review-grid {
    display: grid;

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

    gap: 27px;

    align-items: stretch;
}


/* =========================================================
   CLIENT PROFILE
========================================================= */

.client-profile-box,
.upload-box {
    background: #fff;

    border: 1px solid #e1ddd5;

    box-sizing: border-box;
}


.client-profile-box {
    padding: 36px;
}


.form-section-title {
    color: #b38330;

    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 4px;

    margin-bottom: 27px;
}


.project-title {
    margin-top: 34px;
}


/* =========================================================
   FORM GRID
========================================================= */

.form-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px 18px;
}


.review-form-group {
    display: flex;

    flex-direction: column;
}


.review-form-group.full {
    margin-top: 20px;
}


.review-form-group label {
    color: #455b6d;

    font-family: Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 3px;

    margin-bottom: 9px;
}


.review-form-group input,
.review-form-group textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid #ddd5c7;

    background: #f7f0e5;

    border-radius: 0;

    outline: none;

    color: #1b3447;

    font-family: Arial, sans-serif;

    font-size: 14px;
}


.review-form-group input {
    height: 47px;

    padding: 0 14px;
}


.review-form-group textarea {
    height: 91px;

    padding: 14px;

    resize: vertical;
}


.review-form-group input:focus,
.review-form-group textarea:focus {
    border-color: #b58a38;
}


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


/* =========================================================
   UPLOAD BOX
========================================================= */

.upload-box {
    padding: 36px;
}


.upload-area {
    position: relative;

    min-height: 210px;

    border: 1px dashed #d8bd87;

    background: #faf5eb;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    cursor: pointer;

    box-sizing: border-box;

    transition: .3s;
}


.upload-area:hover {
    background: #f6eddd;

    border-color: #b88a35;
}


.upload-icon {
    color: #b88a35;

    font-size: 34px;

    margin-bottom: 15px;
}


.upload-main-text {
    color: #263f52;

    font-family: Arial, sans-serif;

    font-size: 15px;
}


.upload-main-text span {
    color: #bd913b;
}


.upload-sub-text {
    margin-top: 10px;

    color: #7c8790;

    font-family: Arial, sans-serif;

    font-size: 11px;
}


.upload-area input[type="file"] {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}


/* =========================================================
   GENERATE BUTTON
========================================================= */

.generate-report {
    width: 100%;

    height: 54px;

    margin-top: 22px;

    border: none;

    background: #084d3b;

    color: #fff;

    cursor: pointer;

    font-family: Arial, sans-serif;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 3px;

    transition: .3s;
}


.generate-report span {
    margin-left: 7px;

    font-size: 17px;
}


.generate-report:hover {
    background: #b58a38;
}


.upload-note {
    margin: 18px 0 0;

    color: #7c8790;

    font-family: Arial, sans-serif;

    font-size: 11px;

    line-height: 1.6;
}


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

@media (max-width: 1100px) {

    .ai-review-container {
        width: calc(100% - 60px);
    }

    .ai-review-intro h1 {
        font-size: 45px;
    }

}


@media (max-width: 900px) {

    .ai-review-section {
        padding: 80px 0 100px;
    }

    .ai-review-hero {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .ai-review-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .ai-review-container {
        width: calc(100% - 30px);
    }

    .ai-review-section {
        padding: 65px 0 80px;
    }

    .ai-review-intro h1 {
        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1px;
    }

    .ai-review-intro p {
        font-size: 14px;

        line-height: 1.7;
    }

    .ai-review-badges {
        grid-template-columns: 1fr;
    }

    .client-profile-box,
    .upload-box {
        padding: 22px 18px;
    }

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

        gap: 18px;
    }

    .project-title {
        margin-top: 30px;
    }

    .upload-area {
        min-height: 190px;
    }

}


@media (max-width: 400px) {

    .ai-review-intro h1 {
        font-size: 31px;
    }

    .client-profile-box,
    .upload-box {
        padding: 20px 15px;
    }

}

/* =========================================================
   PEOPLE SECTION
========================================================= */

.people-section {
    background: #ffffff;
    padding: 130px 0 120px;
    color: #173247;
}

.people-container {
    width: calc(100% - 180px);
    max-width: 1320px;
    margin: 0 auto;
}


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

.people-intro {
    display: grid;
    grid-template-columns: 1.35fr .85fr;
    gap: 70px;
    align-items: center;

    margin-bottom: 60px;
}

.people-label {
    color: #b68a36;

    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;

    margin-bottom: 27px;
}

.people-heading h2 {
    margin: 0;

    color: #151515;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 50px;
    font-weight: 500;

    line-height: 1.05;
    letter-spacing: -2px;
}

.people-heading h2 em {
    color: #bd923e;
    font-style: italic;
}

.people-description {
    max-width: 520px;

    color: #344e61;

    font-family: Arial, sans-serif;

    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   FEATURED DIRECTOR
========================================================= */

.director-feature {
    display: grid;

    grid-template-columns: 40% 60%;

    border: 1px solid #e2d6c2;

    background: #f7f0e4;

    margin-bottom: 47px;
}


/* =========================================================
   MAIN PORTRAIT
========================================================= */

.director-main-image {
    min-height: 480px;

    position: relative;

    overflow: hidden;
}

.portrait-placeholder {
    width: 100%;
    height: 100%;

    min-height: 480px;

    display: flex;
    flex-direction: column;

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

    position: relative;

    background:
        linear-gradient(
            145deg,
            #e4e0d7 0%,
            #87908e 23%,
            #172a39 58%,
            #07131e 100%
        );

    overflow: hidden;
}


/* Large pyramid */

.portrait-placeholder::before {
    content: "";

    position: absolute;

    width: 310px;
    height: 310px;

    border: 2px solid rgba(190, 145, 55, .18);

    transform: rotate(45deg);

    top: 80px;
}


/* Vertical line */

.portrait-placeholder::after {
    content: "";

    position: absolute;

    width: 1px;
    height: 100%;

    background: rgba(190, 145, 55, .18);

    left: 50%;
    top: 0;
}


.portrait-logo {
    position: relative;
    z-index: 2;

    color: #c39a43;

    font-family: Georgia, serif;

    font-size: 110px;

    line-height: 1;
}


.portrait-line {
    position: relative;
    z-index: 3;

    width: 90px;
    height: 1px;

    background: #b99143;

    margin: 25px 0 17px;
}


.portrait-text {
    position: relative;
    z-index: 3;

    color: #b99655;

    font-family: Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 4px;
}


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

.director-main-content {
    padding: 55px 52px 48px;
}

.director-label {
    color: #b88b38;

    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 4px;

    margin-bottom: 18px;
}

.director-main-content h3 {
    margin: 0 0 10px;

    color: #111;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 38px;

    font-weight: 500;

    letter-spacing: -1px;
}

.director-role {
    color: #bb8e3b;

    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 3px;

    margin-bottom: 25px;
}

.director-main-content p {
    margin: 0;

    color: #344e61;

    font-family: Arial, sans-serif;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   TAGS
========================================================= */

.director-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 26px;

    padding-bottom: 25px;

    border-bottom: 1px solid #e1d6c6;
}

.director-tags span,
.card-tags span {
    display: inline-block;

    padding: 7px 10px;

    border: 1px solid #ded5c7;

    color: #63717b;

    font-family: Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 1.5px;
}


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

.director-contact {
    display: flex;

    align-items: center;

    gap: 25px;

    padding-top: 20px;
}

.director-email {
    color: #40586a;

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 12px;
}

.director-email:first-letter {
    color: #b68a36;
}

.message-button,
.card-message {
    display: inline-flex;

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

    min-height: 43px;

    padding: 0 25px;

    box-sizing: border-box;

    background: #084d3b;

    color: #ffffff;

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

    transition: .3s;
}

.message-button:hover,
.card-message:hover {
    background: #b58a38;
}


/* =========================================================
   DIRECTORS
========================================================= */

.directors-section {
    margin-top: 15px;
}

.directors-label {
    margin-bottom: 22px;
}

.directors-grid {
    display: grid;

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

    gap: 26px;
}


/* =========================================================
   DIRECTOR CARD
========================================================= */

.director-card {
    background: #f7f0e4;

    border: 1px solid #e3d8c7;

    display: flex;

    flex-direction: column;

    min-width: 0;
}


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

.director-card-image {
    height: 365px;

    position: relative;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background:
        linear-gradient(
            145deg,
            #e1ddd5 0%,
            #87908d 25%,
            #192b39 55%,
            #07141f 100%
        );
}


/* Pyramid */

.director-card-image::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border: 2px solid rgba(190, 145, 55, .17);

    transform: rotate(45deg);

    top: 50px;
}


/* Center line */

.director-card-image::after {
    content: "";

    position: absolute;

    width: 1px;
    height: 100%;

    left: 50%;
    top: 0;

    background: rgba(190, 145, 55, .17);
}


.card-initials {
    position: relative;

    z-index: 2;

    color: #c29a43;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 78px;

    line-height: 1;
}


.card-image-line {
    position: relative;

    z-index: 3;

    width: 60px;
    height: 1px;

    background: #b99143;

    margin: 17px 0 12px;
}


.card-coming {
    position: relative;

    z-index: 3;

    color: #c3a15d;

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 3px;
}


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

.director-card-content {
    padding: 26px 22px 22px;

    display: flex;

    flex-direction: column;

    flex: 1;
}

.director-card-content h4 {
    margin: 0 0 10px;

    color: #111;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 23px;

    font-weight: 500;
}

.card-role {
    color: #b78a35;

    font-family: Arial, sans-serif;

    font-size: 9px;

    line-height: 1.6;

    letter-spacing: 2.5px;

    margin-bottom: 17px;
}

.director-card-content p {
    color: #385064;

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.65;

    margin: 0 0 18px;
}


/* =========================================================
   CARD TAGS
========================================================= */

.card-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 20px;
}

.card-tags span {
    font-size: 8px;

    padding: 7px 8px;
}


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

.card-footer {
    margin-top: auto;

    border-top: 1px solid #ded4c4;

    padding-top: 17px;
}

.card-email {
    display: block;

    width: 100%;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #40586a;

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 11px;

    margin-bottom: 12px;
}

.card-message {
    width: 100%;

    min-height: 40px;

    padding: 0 10px;

    font-size: 9px;
}


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

@media (max-width: 1100px) {

    .people-container {
        width: calc(100% - 60px);
    }

    .people-heading h2 {
        font-size: 44px;
    }

    .director-feature {
        grid-template-columns: 38% 62%;
    }

    .director-main-content {
        padding: 40px 35px;
    }

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

}


@media (max-width: 900px) {

    .people-section {
        padding: 90px 0;
    }

    .people-intro {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .people-description {
        max-width: 700px;
    }

    .director-feature {
        grid-template-columns: 1fr;
    }

    .director-main-image {
        min-height: 420px;
    }

    .portrait-placeholder {
        min-height: 420px;
    }

}


@media (max-width: 600px) {

    .people-container {
        width: calc(100% - 30px);
    }

    .people-section {
        padding: 70px 0;
    }

    .people-heading h2 {
        font-size: 36px;

        letter-spacing: -1px;
    }

    .people-description {
        font-size: 14px;
    }

    .director-main-image,
    .portrait-placeholder {
        min-height: 350px;
    }

    .portrait-logo {
        font-size: 80px;
    }

    .director-main-content {
        padding: 30px 22px;
    }

    .director-main-content h3 {
        font-size: 31px;
    }

    .director-main-content p {
        font-size: 14px;
    }

    .director-contact {
        flex-direction: column;

        align-items: flex-start;

        gap: 15px;
    }

    .message-button {
        width: 100%;
    }

    .directors-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .director-card-image {
        height: 330px;
    }

}


@media (max-width: 400px) {

    .people-container {
        width: calc(100% - 24px);
    }

    .people-heading h2 {
        font-size: 32px;
    }

    .director-main-content {
        padding: 25px 18px;
    }

    .director-card-content {
        padding: 23px 18px;
    }

}
/* =====================================================
   GLOBAL
===================================================== */

.wisdom-section,
.insights-section {
    box-sizing: border-box;
}

.wisdom-section *,
.insights-section * {
    box-sizing: border-box;
}


/* =====================================================
   WISDOM SECTION
===================================================== */

.wisdom-section {
    width: 100%;
    background: #f6efe3;

    padding: 105px 0 140px;
}

.wisdom-container {
    width: calc(100% - 180px);
    max-width: 1320px;
    margin: 0 auto;
}


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

.section-label {
    color: #b68a35;

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

    font-size: 10px;
    font-weight: 400;

    letter-spacing: 4px;

    text-transform: uppercase;

    margin-bottom: 28px;
}


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

.section-title {
    margin: 0;

    color: #171717;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 50px;
    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -2px;
}


/* =====================================================
   QUOTES GRID
===================================================== */

.quotes-grid {
    display: grid;

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

    gap: 26px;

    margin-top: 60px;
}


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

.quote-card {
    min-height: 298px;

    padding: 35px 35px 32px;

    background: #ffffff;

    border: 1px solid #e1ddd6;

    display: flex;

    flex-direction: column;
}


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

.quote-icon {
    color: #eadfc8;

    font-family: Georgia, serif;

    font-size: 52px;

    line-height: .7;

    height: 45px;

    margin-bottom: 22px;
}


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

.quote-text {
    margin: 0;

    max-width: 430px;

    color: #172f43;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    line-height: 1.75;

    flex: 1;
}


/* =====================================================
   AUTHOR
===================================================== */

.quote-author {
    color: #b68a35;

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

    font-size: 10px;

    letter-spacing: 3px;

    margin-top: 25px;
}


/* =====================================================
   INSIGHTS SECTION
===================================================== */

.insights-section {
    width: 100%;

    background: #ffffff;

    padding: 115px 0 120px;
}

.insights-container {
    width: calc(100% - 180px);

    max-width: 1320px;

    margin: 0 auto;
}


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

.insights-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 48px;
}

.insights-header .section-label {
    margin-bottom: 27px;
}


/* =====================================================
   RESEARCH LINK
===================================================== */

.research-link {
    display: inline-block;

    color: #b68a35;

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

    font-size: 10px;

    letter-spacing: 3px;

    text-decoration: none;

    padding-bottom: 9px;

    transition: .3s;
}

.research-link:hover {
    color: #084d3b;
}


/* =====================================================
   ARTICLES GRID
===================================================== */

.articles-grid {
    display: grid;

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

    gap: 26px;
}


/* =====================================================
   ARTICLE CARD
===================================================== */

.article-card {
    background: #f7f0e4;

    border: 1px solid #e3ddd3;

    min-height: 330px;

    padding: 34px 31px 28px;

    display: flex;

    flex-direction: column;

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

.article-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(30, 25, 15, .08);
}


/* =====================================================
   ARTICLE TOP
===================================================== */

.article-top {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 27px;
}

.article-top span {
    color: #b68a35;

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

    font-size: 9px;

    letter-spacing: 3px;
}


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

.article-card h3 {
    margin: 0 0 17px;

    color: #141414;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 27px;

    font-weight: 500;

    line-height: 1.35;

    letter-spacing: -.6px;
}


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

.article-card p {
    margin: 0;

    color: #40566a;

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

    font-size: 15px;

    line-height: 1.65;
}


/* =====================================================
   ARTICLE BOTTOM
===================================================== */

.article-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    border-top: 1px solid #ded6ca;

    padding-top: 20px;

    margin-top: auto;
}

.article-bottom span {
    color: #667483;

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

    font-size: 11px;
}

.article-bottom a {
    color: #b68a35;

    font-family: Arial, sans-serif;

    font-size: 18px;

    text-decoration: none;

    transition: .3s;
}

.article-bottom a:hover {
    color: #084d3b;

    transform: translate(3px, -3px);
}


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

@media (max-width: 1100px) {

    .wisdom-container,
    .insights-container {
        width: calc(100% - 70px);
    }

    .section-title {
        font-size: 44px;
    }

    .quotes-grid,
    .articles-grid {
        gap: 18px;
    }

    .quote-card {
        padding: 30px 25px;
    }

    .article-card {
        padding: 30px 25px;
    }

}


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

@media (max-width: 768px) {

    .wisdom-section {
        padding: 80px 0 90px;
    }

    .insights-section {
        padding: 80px 0 90px;
    }

    .wisdom-container,
    .insights-container {
        width: calc(100% - 35px);
    }

    .section-title {
        font-size: 38px;

        letter-spacing: -1.2px;
    }

    .quotes-grid {
        grid-template-columns: 1fr;

        margin-top: 40px;

        gap: 18px;
    }

    .quote-card {
        min-height: 260px;
    }

    .insights-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 25px;
    }

    .articles-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .article-card {
        min-height: 310px;
    }

}


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

@media (max-width: 480px) {

    .wisdom-container,
    .insights-container {
        width: calc(100% - 28px);
    }

    .wisdom-section,
    .insights-section {
        padding-top: 65px;
        padding-bottom: 75px;
    }

    .section-title {
        font-size: 32px;
    }

    .section-label {
        font-size: 9px;

        letter-spacing: 3px;

        margin-bottom: 22px;
    }

    .quote-card {
        padding: 28px 23px;

        min-height: 250px;
    }

    .quote-text {
        font-size: 17px;

        line-height: 1.65;
    }

    .quote-author {
        font-size: 9px;

        letter-spacing: 2.5px;
    }

    .article-card {
        padding: 27px 23px;

        min-height: 300px;
    }

    .article-card h3 {
        font-size: 24px;
    }

    .article-card p {
        font-size: 14px;
    }

}

/* =====================================================
   TRUST & SAFETY
===================================================== */

.trust-section {
    width: 100%;
    background: #f7f0e4;
    padding: 105px 0 110px;
}

.trust-container {
    width: calc(100% - 180px);
    max-width: 1320px;
    margin: auto;
}


/* =====================================================
   TOP AREA
===================================================== */

.trust-top {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 70px;
    align-items: start;
}


/* =====================================================
   LEFT INTRO
===================================================== */

.trust-intro {
    padding-top: 3px;
}

.trust-label {
    color: #b58a37;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.trust-intro h2 {
    margin: 0 0 28px;

    color: #171717;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 50px;
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -2px;
}

.trust-intro h2 em {
    color: #b58a37;
    font-style: italic;
}

.trust-intro p {
    max-width: 540px;

    margin: 0 0 25px;

    color: #253c50;

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

    font-size: 16px;
    line-height: 1.75;
}

.trust-intro strong {
    color: #111;
}

.trust-intro a:not(.report-btn) {
    color: #b58a37;
    text-decoration: none;
    border-bottom: 1px solid #d7c59d;
}


/* =====================================================
   REPORT BUTTON
===================================================== */

.report-btn {
    display: inline-flex;

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

    margin-top: 10px;

    min-height: 50px;

    padding: 0 28px;

    background: #074b39;

    color: #fff;

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

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

    letter-spacing: 3px;

    text-decoration: none;

    transition: .3s;
}

.report-btn:hover {
    background: #053b2d;
}


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

.trust-cards {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.trust-card {
    background: #fff;

    border: 1px solid #dedbd5;

    padding: 21px 21px 22px;
}


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

.trust-card-head {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 17px;
}

.trust-icon {
    width: 44px;
    height: 44px;

    border: 1px solid #ddcfaf;

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

    color: #b58a37;

    font-size: 21px;
}

.trust-card-head span {
    color: #b58a37;

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

    font-size: 10px;

    letter-spacing: 3px;
}


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

.trust-content {
    padding-left: 0;
}

.trust-content a {
    display: block;

    color: #18364c;

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

    font-size: 15px;

    line-height: 1.75;

    text-decoration: none;
}

.trust-content p {
    margin: 9px 0 0;

    color: #617083;

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

    font-size: 13px;

    line-height: 1.6;
}

.trust-content .office-text {
    margin: 0 0 4px;

    color: #20394d;

    font-size: 15px;
}


/* =====================================================
   DO / DON'T
===================================================== */

.trust-rules {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 26px;

    margin-top: 70px;
}

.rule-box {
    padding: 30px 31px 28px;

    border: 1px solid;
}

.do-box {
    background: rgba(218, 243, 226, .35);

    border-color: #b8e1ca;
}

.dont-box {
    background: rgba(250, 225, 218, .45);

    border-color: #efbfb2;
}


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

.rule-title {
    margin-bottom: 24px;

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

    font-size: 10px;

    letter-spacing: 3px;

    color: #42d9a1;
}

.dont-box .rule-title {
    color: #ff8585;
}

.rule-title strong {
    color: #111;
}


/* =====================================================
   RULE LIST
===================================================== */

.rule-box ul {
    padding: 0;
    margin: 0;

    list-style: none;
}

.rule-box li {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 17px;

    color: #243c50;

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

    font-size: 15px;

    line-height: 1.5;
}

.rule-box li:last-child {
    margin-bottom: 0;
}

.rule-box li span {
    flex-shrink: 0;

    width: 17px;
    height: 17px;

    border: 1.5px solid #27d49c;

    border-radius: 50%;

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

    color: #27d49c;

    font-size: 10px;

    margin-top: 1px;
}

.dont-box li span {
    border-color: #ff7777;
    color: #ff7777;
}


/* =====================================================
   VERIFY BOX
===================================================== */

.verify-box {
    margin-top: 44px;

    padding: 34px 35px;

    background: #fff;

    border: 1px solid #dedbd5;

    display: grid;

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

    gap: 20px;

    align-items: center;
}


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

.verify-icon {
    width: 48px;
    height: 48px;

    border: 1px solid #ddcfaf;

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

    color: #b58a37;

    font-size: 22px;
}


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

.verify-text h3 {
    margin: 0 0 8px;

    color: #17202a;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;

    font-weight: 500;
}

.verify-text p {
    margin: 0;

    max-width: 850px;

    color: #40566a;

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

    font-size: 14px;

    line-height: 1.7;
}

.verify-text strong {
    color: #111;
}


/* =====================================================
   VERIFY BUTTON
===================================================== */

.verify-btn {
    min-width: 205px;
    height: 49px;

    padding: 0 22px;

    border: 1px solid #dedbd5;

    display: flex;

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

    color: #18364c;

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

    font-size: 10px;

    letter-spacing: 3px;

    text-decoration: none;

    transition: .3s;
}

.verify-btn:hover {
    background: #074b39;
    color: #fff;
    border-color: #074b39;
}


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

@media (max-width: 1100px) {

    .trust-container {
        width: calc(100% - 70px);
    }

    .trust-top {
        gap: 40px;
    }

    .trust-intro h2 {
        font-size: 43px;
    }

}


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

@media (max-width: 768px) {

    .trust-section {
        padding: 75px 0 80px;
    }

    .trust-container {
        width: calc(100% - 35px);
    }

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

    .trust-intro h2 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .trust-intro p {
        font-size: 15px;
    }

    .trust-rules {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 45px;
    }

    .verify-box {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 28px;
    }

    .verify-icon {
        width: 45px;
        height: 45px;
    }

    .verify-btn {
        width: 100%;
    }

}


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

@media (max-width: 480px) {

    .trust-container {
        width: calc(100% - 28px);
    }

    .trust-section {
        padding: 60px 0 70px;
    }

    .trust-intro h2 {
        font-size: 32px;
    }

    .trust-label {
        font-size: 9px;
        letter-spacing: 3px;
    }

    .trust-card {
        padding: 19px;
    }

    .trust-card-head span {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .trust-content a {
        font-size: 14px;
    }

    .rule-box {
        padding: 25px 22px;
    }

    .rule-box li {
        font-size: 14px;
    }

    .verify-box {
        padding: 23px;
    }

    .verify-text h3 {
        font-size: 20px;
    }

}

/* =========================================
   CONTACT SECTION
========================================= */

.contact-section {
    width: 100%;
    background: #f7f0e4;
    padding: 52px 0 105px;
}

.contact-container {
    width: calc(100% - 180px);
    max-width: 1320px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 70px;

    align-items: start;
}


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

.contact-info {
    padding-top: 5px;
}

.contact-label {
    color: #b58a37;

    font-family: Arial, sans-serif;

    font-size: 10px;
    letter-spacing: 4px;

    margin-bottom: 29px;

    text-transform: uppercase;
}

.contact-info h2 {
    margin: 0 0 28px;

    color: #171717;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 51px;
    line-height: 1.02;

    font-weight: 500;

    letter-spacing: -2px;
}

.contact-info h2 em {
    color: #b58a37;
    font-style: italic;
}

.contact-intro {
    max-width: 535px;

    margin: 0 0 42px;

    color: #294057;

    font-family: Arial, sans-serif;

    font-size: 16px;
    line-height: 1.75;
}


/* =========================================
   CONTACT DETAILS
========================================= */

.contact-detail {
    display: flex;

    gap: 18px;

    margin-bottom: 24px;

    align-items: flex-start;
}

.detail-icon {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

    border: 1px solid #ddcfaf;

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

    color: #b58a37;

    font-size: 20px;
}

.contact-detail > div:last-child {
    padding-top: 1px;
}

.contact-detail span {
    display: block;

    margin-bottom: 6px;

    color: #617083;

    font-family: Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 3px;
}

.contact-detail a {
    display: block;

    width: fit-content;

    color: #172c40;

    font-family: Arial, sans-serif;

    font-size: 15px;

    line-height: 1.65;

    text-decoration: none;
}

.contact-detail a:hover {
    color: #b58a37;
}

.contact-detail .gold-email {
    color: #b58a37;
}

.contact-detail small {
    display: block;

    margin-top: 2px;

    color: #657587;

    font-family: Arial, sans-serif;

    font-size: 12px;
}

.contact-detail p {
    margin: 0;

    color: #172c40;

    font-family: Arial, sans-serif;

    font-size: 15px;

    line-height: 1.65;
}


/* =========================================
   FORM BOX
========================================= */

.contact-form-box {
    background: #fff;

    border: 1px solid #ddd9d1;

    padding: 44px 44px 40px;
}

.form-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px 17px;
}

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

.form-group.full {
    margin-top: 26px;
}

.form-group label {
    margin-bottom: 8px;

    color: #42576b;

    font-family: Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 3px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid #ddd8ce;

    background: #f7f0e5;

    outline: none;

    color: #172c40;

    font-family: Arial, sans-serif;

    font-size: 15px;

    transition: .25s;
}

.form-group input,
.form-group select {
    height: 50px;

    padding: 0 14px;
}

.form-group textarea {
    min-height: 160px;

    padding: 15px;

    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #b58a37;
}

.form-group textarea::placeholder {
    color: #9aa8b8;
}


/* =========================================
   SEND BUTTON
========================================= */

.send-btn {
    margin-top: 28px;

    min-width: 215px;
    height: 54px;

    padding: 0 27px;

    border: none;

    background: #074b39;

    color: #fff;

    font-family: Arial, sans-serif;

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

    letter-spacing: 3px;

    cursor: pointer;

    display: inline-flex;

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

    gap: 10px;

    transition: .3s;
}

.send-btn:hover {
    background: #053b2d;
}

.send-btn span {
    font-size: 20px;

    line-height: 1;
}


/* =========================================
   FORM NOTE
========================================= */

.form-note {
    margin: 22px 0 0;

    color: #718093;

    font-family: Arial, sans-serif;

    font-size: 11px;

    line-height: 1.6;
}


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

@media (max-width: 1100px) {

    .contact-container {
        width: calc(100% - 70px);

        gap: 40px;
    }

    .contact-info h2 {
        font-size: 43px;
    }

    .contact-form-box {
        padding: 35px;
    }

}


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

@media (max-width: 768px) {

    .contact-section {
        padding: 65px 0 80px;
    }

    .contact-container {
        width: calc(100% - 35px);

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .contact-info h2 {
        font-size: 39px;

        letter-spacing: -1px;
    }

    .contact-intro {
        font-size: 15px;

        margin-bottom: 35px;
    }

    .contact-form-box {
        padding: 28px 22px;
    }

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

        gap: 20px;
    }

    .form-group.full {
        margin-top: 20px;
    }

    .form-group textarea {
        min-height: 150px;
    }

    .send-btn {
        width: 100%;
    }

}


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

@media (max-width: 480px) {

    .contact-container {
        width: calc(100% - 28px);
    }

    .contact-info h2 {
        font-size: 33px;
    }

    .contact-label {
        font-size: 9px;

        letter-spacing: 3px;
    }

    .contact-detail {
        gap: 13px;
    }

    .detail-icon {
        width: 40px;
        height: 40px;
    }

    .contact-detail a,
    .contact-detail p {
        font-size: 14px;
    }

    .contact-form-box {
        padding: 25px 18px;
    }

}

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

.site-footer {
    background: #f1e8d6;

    color: #263d51;

    padding: 70px 0 0;

    border-top: 1px solid #ddd2bd;

    font-family: Arial, sans-serif;
}


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

.footer-container {

    width: calc(100% - 180px);

    max-width: 1320px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        2.3fr
        0.8fr
        1fr
        1.25fr;

    gap: 65px;

    padding-bottom: 58px;
}


/* =========================================
   LOGO
========================================= */

.footer-logo {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 34px;
}

.footer-pyramid {

    width: 42px;
    height: 42px;

    position: relative;

    background:
        linear-gradient(
            90deg,
            #151515 0%,
            #151515 48%,
            #c29a3c 49%,
            #c29a3c 51%,
            #151515 52%
        );

    clip-path: polygon(
        50% 0,
        100% 100%,
        0 100%
    );
}

.footer-pyramid::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background: #c29a3c;
}

.footer-logo strong {

    display: block;

    color: #111;

    font-size: 20px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: -0.5px;
}

.footer-logo span {

    display: block;

    margin-top: 6px;

    color: #b58a37;

    font-size: 9px;

    letter-spacing: 4px;
}


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

.footer-description {

    max-width: 520px;

    margin: 0 0 28px;

    color: #344b60;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================
   ADDRESS
========================================= */

.footer-address {

    margin-top: 20px;
}

.address-row {

    display: flex;

    align-items: flex-start;

    gap: 25px;

    margin-bottom: 12px;
}

.address-label {

    min-width: 55px;

    padding-top: 4px;

    color: #b58a37;

    font-size: 9px;

    letter-spacing: 3px;
}

.address-row p {

    margin: 0;

    color: #30465b;

    font-size: 14px;

    line-height: 1.55;
}


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

.footer-social {

    display: flex;

    gap: 12px;

    margin-top: 25px;
}

.footer-social a {

    width: 38px;
    height: 38px;

    border: 1px solid #d8cdb8;

    display: flex;

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

    color: #4a4a4a;

    text-decoration: none;

    font-size: 16px;

    transition: .3s;
}

.footer-social a:hover {

    background: #074b39;

    color: white;

    border-color: #074b39;
}


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

.footer-column h4 {

    margin: 0 0 24px;

    color: #b58a37;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 4px;
}

.footer-column > a {

    display: block;

    width: fit-content;

    margin-bottom: 14px;

    color: #344b60;

    font-size: 14px;

    text-decoration: none;

    transition: .25s;
}

.footer-column > a:hover {

    color: #b58a37;
}


/* =========================================
   NEWSLETTER
========================================= */

.newsletter p {

    margin: 0 0 18px;

    color: #344b60;

    font-size: 14px;

    line-height: 1.55;
}

.newsletter-form {

    display: flex;

    width: 100%;

    height: 50px;

    border: 1px solid #d6cbb7;
}

.newsletter-form input {

    min-width: 0;

    flex: 1;

    border: none;

    outline: none;

    background: transparent;

    padding: 0 14px;

    color: #344b60;

    font-size: 13px;
}

.newsletter-form input::placeholder {

    color: #a7afba;
}

.newsletter-form button {

    width: 73px;

    border: none;

    background: #e9c76d;

    color: #1d2730;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 3px;

    cursor: pointer;

    transition: .3s;
}

.newsletter-form button:hover {

    background: #c29a3c;

    color: #fff;
}


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

.footer-bottom {

    width: calc(100% - 180px);

    max-width: 1320px;

    margin: 0 auto;

    min-height: 72px;

    border-top: 1px solid #d9cfbd;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.footer-bottom p {

    margin: 0;

    color: #667689;

    font-size: 12px;
}

.footer-links {

    display: flex;

    gap: 27px;
}

.footer-links a {

    color: #667689;

    font-size: 12px;

    text-decoration: none;
}

.footer-links a:hover {

    color: #b58a37;
}


/* =========================================
   CHAT BUTTON
========================================= */

.chat-button {

    position: fixed;

    right: 30px;
    bottom: 30px;

    z-index: 9999;

    height: 50px;

    padding: 0 23px 0 17px;

    display: flex;

    align-items: center;

    gap: 10px;

    background: #064b38;

    border: 1px solid #c5a059;

    border-radius: 30px;

    color: #fff;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;

    text-decoration: none;

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

.chat-button span {

    font-size: 19px;
}


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

@media (max-width: 1050px) {

    .footer-container {

        width: calc(100% - 70px);

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

        gap: 45px;
    }

    .footer-brand {

        grid-column: span 3;
    }

    .footer-bottom {

        width: calc(100% - 70px);
    }

}


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

@media (max-width: 700px) {

    .site-footer {

        padding-top: 50px;
    }

    .footer-container {

        width: calc(100% - 35px);

        grid-template-columns: 1fr;

        gap: 40px;

        padding-bottom: 40px;
    }

    .footer-brand {

        grid-column: auto;
    }

    .footer-description {

        font-size: 14px;
    }

    .address-row {

        gap: 15px;
    }

    .footer-column h4 {

        margin-bottom: 18px;
    }

    .footer-bottom {

        width: calc(100% - 35px);

        padding: 20px 0;

        min-height: auto;

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;
    }

    .footer-links {

        gap: 18px;
    }

    .chat-button {

        right: 15px;

        bottom: 18px;

        height: 46px;

        padding: 0 17px;

        font-size: 9px;
    }

}


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

@media (max-width: 450px) {

    .footer-logo strong {

        font-size: 18px;
    }

    .footer-description {

        line-height: 1.65;
    }

    .address-row {

        flex-direction: column;

        gap: 3px;

        margin-bottom: 20px;
    }

    .address-label {

        min-width: auto;
    }

    .newsletter-form {

        height: 48px;
    }

}

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

/* TABLET */
@media (max-width: 1000px) {

    .footer-container {
        width: calc(100% - 60px);
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 40px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-description {
        max-width: 600px;
    }

    .newsletter {
        grid-column: span 1;
    }

    .footer-bottom {
        width: calc(100% - 60px);
    }
}


/* MOBILE */
@media (max-width: 700px) {

    .site-footer {
        padding: 50px 0 0;
    }

    /* Main footer becomes one column */
    .footer-container {
        width: calc(100% - 30px);
        display: flex;
        flex-direction: column;
        gap: 38px;
        padding-bottom: 40px;
    }


    /* BRAND */
    .footer-brand {
        width: 100%;
    }

    .footer-logo {
        margin-bottom: 25px;
    }

    .footer-logo strong {
        font-size: 19px;
    }

    .footer-description {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 25px;
    }


    /* ADDRESS */
    .footer-address {
        width: 100%;
    }

    .address-row {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 18px;
    }

    .address-label {
        min-width: 55px;
        font-size: 8px;
        letter-spacing: 2px;
        padding-top: 3px;
    }

    .address-row p {
        font-size: 13px;
        line-height: 1.6;
        margin: 0;
    }


    /* SOCIAL ICONS */
    .footer-social {
        margin-top: 25px;
        gap: 10px;
    }

    .footer-social a {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }


    /* FOOTER COLUMNS */
    .footer-column {
        width: 100%;
    }

    .footer-column h4 {
        margin-bottom: 18px;
        font-size: 9px;
        letter-spacing: 3px;
    }

    .footer-column > a {
        font-size: 14px;
        margin-bottom: 12px;
    }


    /* NEWSLETTER */
    .newsletter {
        width: 100%;
    }

    .newsletter p {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 18px;
    }

    .newsletter-form {
        width: 100%;
        height: 48px;
    }

    .newsletter-form input {
        width: 100%;
        min-width: 0;
        font-size: 13px;
        padding: 0 12px;
    }

    .newsletter-form button {
        width: 70px;
        flex-shrink: 0;
        font-size: 9px;
        letter-spacing: 2px;
    }


    /* BOTTOM FOOTER */
    .footer-bottom {
        width: calc(100% - 30px);

        min-height: auto;

        padding: 20px 0;

        display: flex;
        flex-direction: column;

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

        gap: 15px;
    }

    .footer-bottom p {
        font-size: 11px;
        line-height: 1.5;
    }

    .footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
    }

    .footer-links a {
        font-size: 11px;
    }


    /* CHAT BUTTON */
    .chat-button {
        right: 15px;
        bottom: 15px;

        height: 46px;

        padding: 0 17px;

        gap: 8px;

        font-size: 9px;
        letter-spacing: 1.5px;

        white-space: nowrap;
    }

    .chat-button span {
        font-size: 17px;
    }
}


/* SMALL MOBILE */
@media (max-width: 400px) {

    .footer-container {
        width: calc(100% - 24px);
        gap: 32px;
    }

    .footer-bottom {
        width: calc(100% - 24px);
    }

    .footer-logo strong {
        font-size: 17px;
    }

    .footer-logo span {
        font-size: 8px;
        letter-spacing: 3px;
    }

    .footer-description {
        font-size: 13px;
    }

    .address-row {
        gap: 10px;
    }

    .address-label {
        min-width: 48px;
    }

    .address-row p {
        font-size: 12px;
    }

    .footer-social a {
        width: 34px;
        height: 34px;
    }

    .newsletter-form {
        height: 46px;
    }

    .newsletter-form button {
        width: 65px;
    }

    .chat-button {
        right: 10px;
        bottom: 10px;
        padding: 0 14px;
        font-size: 8px;
    }
}