* {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline
}

:root {
    --black: #000000;
    --white: #ffffff;
    --gray: #999999;
    --dark-gray: #545A5B;
    --greyish-blue: #53718B;
    --dark-teal: #22445B;
    --border-color: #545a5b80;
    --yelow-bg: #F2EFDC;
    --yellow-dark: #FCCD79;
    --orange: #EB5642;
    --dark-red: #A11E21;
    --studio: #608767;
    --modern: #6398B4;
    --classic: #536F84;
    --student: #D05932;
    --aqua-blue: #8CD2D2;
    --sky: #98D2DB;
    --light-teal: #53718B;
    --light-blue: #C3D6DC;

    --font-Regular: 'Harmonia Sans Pro Cyr';
    --font-Semi_bold: 'Harmonia Sans Pro Cyr Semi Bd';
    --font-bold: 'Harmonia Sans Pro Cyr';
    --font-italic: 'Editorial New';
    --font-quote: 'Editorial New';
    --light-yellow: #f8f6ed;
    --heading-lg: 54px;
    --heading-xl: 48px;
    --heading-ml: 36px;
    --heading-md: 29px;
    --heading-sm: 24px;
    --heading-xs: 18px;
    --text-content: 18px;
    --text-content-sm: 20px;
    --container-width: 1280px;
}

/***Dark Mode CSS***/

[data-theme="dark"] {
    --black: #ffffff;
    --white: #000000;
    --gray: #999999;
    --yelow-bg: #8cd2d2;
    --orange: #EB5642;
    --light-yellow: #8cd2d2;
    --border-color: #ffffff80;
    --dark-gray: #fff;
}

/***END Dark**/
@font-face {

    font-family: 'Harmonia Sans Pro Cyr';

    src: url('../fonts/HarmoniaSansProCyr-Light.eot');

    src: local('Harmonia Sans Pro Cyr Light'), local('HarmoniaSansProCyr-Light'),

        url('../fonts/HarmoniaSansProCyr-Light.eot?#iefix') format('embedded-opentype'),

        url('../fonts/HarmoniaSansProCyr-Light.woff2') format('woff2'),

        url('../fonts/HarmoniaSansProCyr-Light.woff') format('woff'),

        url('../fonts/HarmoniaSansProCyr-Light.ttf') format('truetype');

    font-weight: 300;

    font-style: normal;

}

@font-face {

    font-family: 'Harmonia Sans Pro Cyr';

    src: url('../fonts/HarmoniaSansProCyr-Regular.eot');

    src: local('Harmonia Sans Pro Cyr'), local('HarmoniaSansProCyr-Regular'),

        url('../fonts/HarmoniaSansProCyr-Regular.eot?#iefix') format('embedded-opentype'),

        url('../fonts/HarmoniaSansProCyr-Regular.woff2') format('woff2'),

        url('../fonts/HarmoniaSansProCyr-Regular.woff') format('woff'),

        url('../fonts/HarmoniaSansProCyr-Regular.ttf') format('truetype');

    font-weight: 400;

    font-style: normal;

}

@font-face {

    font-family: 'Harmonia Sans Pro Cyr Semi Bd';

    src: url('../fonts/HarmoniaSansProCyr-SemiBd.eot');

    src: local('Harmonia Sans Pro Cyr Semi Bd'), local('HarmoniaSansProCyr-SemiBd'),

        url('../fonts/HarmoniaSansProCyr-SemiBd.eot?#iefix') format('embedded-opentype'),

        url('../fonts/HarmoniaSansProCyr-SemiBd.woff2') format('woff2'),

        url('../fonts/HarmoniaSansProCyr-SemiBd.woff') format('woff'),

        url('../fonts/HarmoniaSansProCyr-SemiBd.ttf') format('truetype');

    font-weight: 600;

    font-style: normal;

}

@font-face {

    font-family: 'Harmonia Sans Pro Cyr';

    src: url('../fonts/HarmoniaSansProCyr-Bold.eot');

    src: local('Harmonia Sans Pro Cyr Bold'), local('HarmoniaSansProCyr-Bold'),

        url('../fonts/HarmoniaSansProCyr-Bold.eot?#iefix') format('embedded-opentype'),

        url('../fonts/HarmoniaSansProCyr-Bold.woff2') format('woff2'),

        url('../fonts/HarmoniaSansProCyr-Bold.woff') format('woff'),

        url('../fonts/HarmoniaSansProCyr-Bold.ttf') format('truetype');

    font-weight: bold;

    font-style: normal;

}

@font-face {

    font-family: 'Editorial New';

    src: url('../fonts/EditorialNew-Regular.eot');

    src: local('Editorial New Regular'), local('EditorialNew-Regular'),

        url('../fonts/EditorialNew-Regular.eot?#iefix') format('embedded-opentype'),

        url('../fonts/EditorialNew-Regular.woff2') format('woff2'),

        url('../fonts/EditorialNew-Regular.woff') format('woff'),

        url('../fonts/EditorialNew-Regular.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'Editorial New';

    src: url('../fonts/EditorialNew-Medium.eot');

    src: local('Editorial New Medium'), local('EditorialNew-Medium'),

        url('../fonts/EditorialNew-Medium.eot?#iefix') format('embedded-opentype'),

        url('../fonts/EditorialNew-Medium.woff2') format('woff2'),

        url('../fonts/EditorialNew-Medium.woff') format('woff'),

        url('../fonts/EditorialNew-Medium.ttf') format('truetype');

    font-weight: 500;

    font-style: normal;

}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

ol,
ul {
    list-style: none
}



table {
    border-collapse: collapse;
    border-spacing: 0
}

a {
    color: var(--black);
    text-decoration: none;
    outline: none;
    transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    cursor: pointer;
}

/*Reset CSS end*/



/* global classes */

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -ms-word-break: keep-all;
    word-break: keep-all;
    -webkit-word-break: keep-all;
    -moz-word-break: keep-all;
    word-wrap: break-word;
}

input[type="button"],
input[type="submit"] {
    border: none;
    cursor: pointer;
    outline: none;
}

body {
    margin: 0px;
    padding: 0px;
    font-size: 100%;
    line-height: 1.5;
    position: relative;
    font-family: 'Harmonia Sans Pro Cyr';
    color: var(--black);
    background: var(--white);
    font-size: var(--text-content);
    font-weight: 400;
}

.fl {
    float: left
}

.fr {
    float: right
}

.text-center {
    text-align: center
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.pr {
    position: relative;
}

.overflow-h {
    overflow: hidden;
}

.pad0 {
    padding: 0px
}

.mar0 {
    margin: 0px
}

.clear {
    clear: both;
}

.disnon {
    display: none
}

.disblk {
    display: block
}

.text-uppercase {
    text-transform: uppercase;
}

.wrapper {
    width: 1200px;
    margin: 0 auto
}

h1 {
    font-size: 24px;
    line-height: 22px;
    margin-bottom: 20px;
}

.blackoverlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, 0.6);
    display: none
}

.amination {
    position: relative;
    overflow: hidden
}

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

.d-flex-center {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.d-flex {

    display: flex;

}

section {
    overflow: hidden;
}



.container {
    margin: 0 auto;
    max-width: var(--container-width);
    padding: 0 80px;
}

/* Header containers should not have default padding - they use their own spacing system */
header .container,
.header-section .container {
    padding: 0;
}



@media screen and (min-width:1600px) {

    /* .container{margin: 0 auto;max-width: 1440px;} */

    .partner-slider img {
        max-height: 750px;
    }

    :root {

        --container-width: 1440px;

    }

    .event-img-4 {

        height: 637px !important;

    }

    .slider-property .collections-content-blk p {

        font-size: 18px !important;

    }



}



.w-50 {
    width: 50%;
}

.w-100 {
    width: 100%;
}

.w-40 {
    width: 40%;
}

.w-60 {
    width: 60%;
}

p {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 10px;
}

.fontwg500 {
    font-weight: 500 !important
}

.fontwg400 {
    font-weight: 400 !important
}

.img-blk {
    display: flex;
    overflow: hidden;
}

.flex-start {
    align-items: flex-start !important;
}

.line-height0 {
    line-height: 0
}



/** START Dark CSS**/

.theme-switch input#checkbox {

    visibility: hidden;

}

.theme-switch {

    -webkit-appearance: none;

    appearance: none;

    height: 50px;

    width: 50px;

    background-color: var(--black);

    position: fixed;

    right: 0;

    border-radius: 50% 0 0 50%;

    outline: none;

    cursor: pointer;

    top: 150px;

    z-index: 999;

}

.darkHeader .theme-switch {

    top: 10px
}

.theme-switch:after {

    content: url(../images/moon.svg);

    position: absolute;

    height: 30px;

    width: 30px;

    top: 0;

    left: 0;

    right: 0;

    border-radius: 50%;

    bottom: 0;

    margin: auto;

}

[data-theme="dark"] .theme-switch:after {

    content: url(../images/sun.svg) !important;

}

/** START Dark CSS**/



/**** STRAT COLOR CSS******/

.text-white {
    color: var(--white) !important;
}

.text-black {
    color: var(--black) !important;
}

.text-studio {
    color: var(--studio) !important;
}

.text-morden {
    color: var(--morden) !important;
}

.text-classic {
    color: var(--classic) !important;
}

.text-student {
    color: var(--student) !important;
}

.text-aqua-blue {
    color: var(--aqua-blue) !important;
}

.text-dark-gray {
    color: var(--dark-gray) !important;
}

.text-dark-red {
    color: var(--dark-red) !important;
}

.text-sky {
    color: var(--sky) !important;
}

.text-blueish-grey {
    color: var(--blueish-grey) !important;
}


.bg-black {
    background-color: var(--black) !important;
}

.bg-white {
    background-color: var(--white) !important;
}

.bg-dark-gray {
    background-color: var(--dark-gray) !important;
}

.bg-studio {
    background-color: var(--studio) !important;
}

.bg-morden {
    background-color: var(--morden) !important;
}

.bg-classic {
    background-color: var(--classic) !important;
}

.bg-student {
    background-color: var(--student) !important;
}

.bg-aqua-blue {
    background-color: var(--aqua-blue) !important;
}

.bg-dark-red {
    background-color: var(--dark-red) !important;
}

.bg-sky {
    background-color: var(--sky) !important;
}

.bg-orange {
    background-color: var(--orange) !important;
}

.bg-yellow-dark {
    background-color: var(--yellow-dark) !important;
}

.bg-yellow-bg {
    background-color: var(--yelow-bg) !important;
}

.bg-dark-teal {
    background-color: var(--dark-teal) !important;
}

.bg-greyish-blue {
    background-color: var(--greyish-blue) !important;
}

.bg-light-teal {
    background-color: var(--light-teal) !important;
}

.bg-light-blue {
    background-color: var(--light-blue) !important;
}

/**** END COLOR CSS******/





/**** STRAT Padding CSS******/

.ptb-gap-15 {
    padding: 15px 0;
}

.pt-gap-15 {
    padding-top: 15px;
}

.pb-gap-15 {
    padding-bottom: 15px;
}

.ptb-gap-24 {
    padding: 24px 0;
}

.pt-gap-24 {
    padding-top: 24px;
}

.pb-gap-24 {
    padding-bottom: 24px;
}

.ptb-gap-30 {
    padding: 30px 0;
}

.pt-gap-30 {
    padding-top: 30px;
}

.pb-gap-30 {
    padding-bottom: 30px;
}

.ptb-gap-45 {
    padding: 45px 0;
}

.pt-gap-45 {
    padding-top: 45px;
}

.pb-gap-45 {
    padding-bottom: 45px;
}

.ptb-gap-60 {
    padding: 60px 0;
}

.pt-gap-60 {
    padding-top: 60px;
}

.pb-gap-60 {
    padding-bottom: 60px;
}

.ptb-gap-80 {
    padding: 80px 0;
}

.pt-gap-80 {
    padding-top: 80px;
}

.pb-gap-80 {
    padding-bottom: 80px;
}

.bg-yellow {
    background: var(--yelow-bg);
}

.flex-center {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}



/**** END Padding CSS******/



/**** Heading Button CSS******/

/* Note: Heading styles are now handled automatically by semantic HTML elements (h1, h2, h3, h4) 
   through accessibility.css. No need for separate heading classes. */

/**** START Button CSS******/



.btn-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-weight: 600;

    text-transform: uppercase;

    margin-top: 15px;

    border-bottom: 2px solid var(--black);

    font-size: 16px;

    line-height: 1.8;

    position: relative;

}

.link::before,
.link::after {

    position: absolute;

    width: 100%;

    height: 0.5px;

    background: var(--black);

    top: 100%;

    left: 0;

    pointer-events: none;

}

.btn-link svg path {

    stroke: var(--black);

}

.btn-link::before {

    content: "";

    height: 100%;

    top: 0;

    opacity: 0;

}



.btn-link::after {

    content: '';

    transition: opacity 0.3s;

}

.btn-link:hover::before {

    opacity: 1;

    animation: coverUp 0.3s ease forwards;

}



.btn-link:hover::after {

    opacity: 0;

}

.link-white {

    border-color: var(--white);

    color: var(--white);

}

.txt-link {
    color: var(--Partners-Accent-Light-Teal, #53718B);
    font-family: "Harmonia Sans Pro Cyr";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.link.link-white::before,
.link.link-white::after {

    background-color: var(--white);

}

.link-white svg path {

    stroke: var(--white);

}

@keyframes coverUp {

    0% {

        transform-origin: 50% 100%;

        transform: scale3d(1, 0.045, 1);

    }



    50% {

        transform-origin: 50% 100%;

        transform: scale3d(1, 1, 1);

    }



    51% {

        transform-origin: 50% 0%;

        transform: scale3d(1, 1, 1);

    }



    100% {

        transform-origin: 50% 0%;

        transform: scale3d(1, 0.045, 1);

    }

}

/* ========================================
   THREE-VARIANT BUTTON SYSTEM
   WY: White → Yellow-bg highlight
   BY: Blue → Yellow-bg highlight  
   BW: Blue → White highlight
   ======================================== */

/* Base button styling */
.btn-arthaus,
.btn-impact {
    padding: 16px 24px 10px 24px;
    border-radius: 100px;
    display: inline-flex;
    position: relative;
    overflow: hidden;
    font-size: 18px;
    letter-spacing: 1px;
    font-family: var(--font-Semi_bold);
    text-transform: uppercase;
    line-height: 0.8;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-policies {
    padding: 8px 12px 4px 12px;
    border-radius: 100px;
    display: inline-flex;
    position: relative;
    overflow: hidden;
    font-size: 10px;
    letter-spacing: 0.8px;
    font-family: var(--font-Semi_bold);
    text-transform: uppercase;
    line-height: 0.8;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border: none;
    cursor: pointer;
}

/* Animation setup for all buttons */
.btn-arthaus::before,
.btn-impact::before {
    content: '';
    position: absolute;
    top: 0;
    left: -125%;
    width: 120%;
    height: 100%;
    transform: skew(30deg);
    transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
    z-index: 1;
}

.btn-arthaus:hover::before,
.btn-impact:hover::before {
    transform: translate3d(100%, 0, 0);
}

.btn-arthaus span,
.btn-impact span {
    position: relative;
    z-index: 3;
}

/* WY: White background → Light blue highlight animation */
.btn-wy {
    background: var(--white);
    color: var(--black);
}

.btn-wy::before {
    background: var(--sky);
}

/* BY: Light blue background → Yellow-bg highlight animation */
.btn-by {
    background: var(--sky);
    color: var(--black);
}

.btn-by::before {
    background: var(--yelow-bg);
}

/* BW: Light blue background → White highlight animation */
.btn-bw {
    background: var(--sky);
    color: var(--black);
}

.btn-bw::before {
    background: var(--white);
}

/* Legacy support - default to BY */
.btn-arthaus:not(.btn-wy):not(.btn-by):not(.btn-bw),
.btn-impact:not(.btn-wy):not(.btn-by):not(.btn-bw) {
    background: var(--sky);
    color: var(--black);
}

.btn-arthaus:not(.btn-wy):not(.btn-by):not(.btn-bw)::before,
.btn-impact:not(.btn-wy):not(.btn-by):not(.btn-bw)::before {
    background: var(--yelow-bg);
}

/* Contact Button Styles - Header and Footer */
.btn-arthaus-contact,
.btn-footer-contact {
    padding: 18px 24px 16px 24px;
    border-radius: 100px;
    display: inline-flex;
    position: relative;
    overflow: hidden;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.54px;
    /* 3% of 18px */
    font-family: var(--font-Semi_bold);
    text-transform: uppercase;
    line-height: 1;
    align-items: center;
    justify-content: center;
    height: 50px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: var(--black);
}

/* Header button - blue background, yellow-bg hover */
.btn-arthaus-contact {
    background: var(--sky);
    color: var(--black);
}

/* Footer button - white background, sky hover */
.btn-footer-contact {
    background: var(--white);
    color: var(--black);
}

/* Simple hover transitions */
.btn-arthaus-contact,
.btn-footer-contact {
    transition: background-color 0.3s ease;
}

.btn-arthaus-contact:hover {
    background: var(--yelow-bg);
}

.btn-footer-contact:hover {
    background: var(--sky);
}

/**** END Button CSS******/

/* START BANNNER CSS */

.banner-img {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.text-hide-desktop {
    display: none;
}

.text-hide-mobile {
    display: block;
}



.slide-from-left {

    width: 100%;

    height: 100%;

    background-color: var(--black);

    position: relative;

    animation: slide-from-left 1.3s 1 linear forwards;

    position: absolute;

}



@keyframes slide-from-left {

    0% {
        left: 0;
        opacity: 1
    }

    99% {
        left: 99%;
        opacity: 1
    }

    100% {
        left: 100%;
        opacity: 0;
        display: none
    }

}

@-webkit-keyframes slide-from-left {

    0% {
        left: 0;
        opacity: 1
    }

    99% {
        left: 99%;
        opacity: 1
    }

    100% {
        left: 100%;
        opacity: 0;
        display: none
    }

}

/* END BANNNER CSS */

/* Slider CSS */

.img-slider .slick-dots {

    bottom: 50px;

}

.img-slider .slick-dots li {

    width: 12px;

}

.img-slider .slick-dots li button {

    width: 12px;

    height: 12px;

    background: transparent;

    border-radius: 50%;

    border: 1px solid var(--white);

}

.img-slider .slick-dots li.slick-active button {

    opacity: 1;

    background: var(--white);

}





.banner-slider .slick-dots {

    bottom: 50px;

}

.banner-slider .slick-dots li {

    width: 12px;

}

.banner-slider .slick-dots li button {

    width: 12px;

    height: 12px;

    background: transparent;

    border-radius: 50%;

    border: 1px solid var(--white);

}

.banner-slider .slick-dots li.slick-active button {

    opacity: 1;

    background: var(--white);

}



.slider-sec-bottom {

    width: 100%;

    height: 100%;

}

.slider-property .slick-slide {

    margin-left: 10px;

    margin-right: 10px;

}

slider-property .slider-property .slick-list {

    margin-left: -10px;

    margin-right: -10px;

}

.slider-property .collections-content-blk p {

    font-size: 16px;

}

.img-slide-arrow1 {

    position: absolute;

    width: 53px;

    height: 53px;

    border: none;

    outline: none;

    background: transparent;

    bottom: -80px;

    cursor: pointer;

}

.img-slide-arrow1.prev-arrow {
    right: calc(100% - 50%);
}

.img-slide-arrow1.next-arrow {
    left: calc(100% - 50%);
}

.img-slide-arrow1:hover svg path {

    fill: var(--black);

}

[data-theme="dark"] .img-slide-arrow1:hover svg path {

    fill: var(--white);

}

.slider-heading-wrap {

    position: absolute;

    width: 300px;

    height: 20%;

}

.slider-heading-wrap.live {

    top: 20%;

    left: 15%;

}

.slide-img {

    position: relative;

}

.slider-heading-wrap.work {

    right: 30%;

    bottom: 30%;

}

.heading-lg.heading-banner {

    font-size: 180px;

    display: inline-flex;

    padding: 5px 20px;

    line-height: 0.9;

    align-items: center;

    padding-top: 20px;

    color: #fff;

    text-shadow: -3px 1px 50px #000000a3;

}

.banner-slider .slick-slide.slick-active .slider-heading-wrap {

    -webkit-animation-name: slideInLeft;

    animation-name: slideInLeft;

}

/* END Slider CSS */

/***Contact page for css***/



.contact-form li .tab-btn {

    display: flex;

    gap: 10px;

    row-gap: 10px;

    column-gap: 10px;

    align-items: center;

    justify-content: center;

    padding: 8px 24px 8px 24px;

}

.tab-nav button#workspaces.active {

    border: 1px solid #A11E21;

    opacity: 1;

}

.form-label {

    margin-bottom: 5px;

    display: inline-block;

    color: var(--black);

}

select.form-control {

    color: var(--border-color);

}

select.form-control option {

    color: var(--black);

    background-color: var(--white);

}

select.form-control option:focus {

    color: var(--black) !important;

    background-color: var(--yelow-bg) !important;

}

textarea.form-control {

    height: 100px;

}

.form-wrap-contact {

    box-shadow: 16px -10px 115px 0px #0000000F;

    padding: 48px;

    border-radius: 4px;

}

.workspace-form {

    align-items: flex-start;

    gap: 30px;

}

.form-box-blk.hide-box {

    display: none;

}

.icon-box {

    text-align: center;

    width: 100%;

}

.form-thank-you-blk {

    display: none;

}

.form-thank-you-blk.active {

    display: flex;

    text-align: center;

    flex-wrap: wrap;

    gap: 10px;

    justify-content: center;

}

.effect-img {
    width: 100%;
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
}

.effect-img-budget {
    width: 100%;
    clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 100%);
}

/* END BANNNER CSS */

/* Slider CSS */

.hero-slider {
    position: relative;
}

.hero-slider .hover-slider {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.hero-slider .hover-slider.prev-arrow {
    left: 40px;
}

.hero-slider .hover-slider.next-arrow {
    right: 40px;
}

.hero-slider .hover-slider svg path[fill="#ffffff"] {
    opacity: 0.5;
}

.img-slider .slick-dots {
    bottom: 50px;
}

.hero-slider .slider-indicators {
    position: absolute;
    bottom: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.hero-slider .slider-indicators li {
    list-style: none;
    margin: 0;
}

.hero-slider .slider-indicators li button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: transparent;
    padding: 0;
    font-size: 0;
    cursor: pointer;
}

.hero-slider .slider-indicators li.slick-active button {
    background: var(--white);
    transform: scale(1.2);
}

/* Company Page Specific Styles */
.page-company .vision-section {
    background-color: var(--greyish-blue);
}

.page-company .vision-section .container {
    display: flex;
    gap: 26px;
    padding: 80px;
}

.page-company .vision-section h2 {
    font-size: 48px;
    line-height: 1.2;
    color: var(--white);
}

.page-company .vision-section p {
    font-size: 16px;
    line-height: 1.3;
    color: var(--white);
}

.page-company .stats-section {
    background-color: var(--yelow-bg);
    padding: 100px 80px;
}

.page-company .stats-section .container {
    max-width: 100%;
    padding: 0;
    margin: 0 auto;
}

.page-company .stats-section .d-flex-center {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
}

.page-company .stats-section .stat-item {
    flex: 1;
    padding: 0 16px;
    border-right: 1px solid rgba(84, 90, 91, 0.5);
}

.page-company .stats-section .stat-item:last-child {
    border-right: none;
}

/* ========================================
   UNIFIED STATS SECTION STYLES
   ======================================== */
.stats-section .stat-item,
.stats-section .stat-box {
    text-align: center;
}

.stats-section .stat-item h3,
.stats-section .stat-box h3 {
    font-family: var(--font-italic) !important;
    font-weight: 400 !important;
    font-size: 42px !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
}

.stats-section .stat-item p,
.stats-section .stat-box p {
    font-family: var(--font-Regular);
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.stats-section .stat-divider {
    width: 1px;
    background: rgba(84, 90, 91, 0.5);
    align-self: stretch;
}

/* ========================================
   END UNIFIED STATS SECTION STYLES
   ======================================== */

.page-company .info-section {
    padding-top: 100px;
}

.page-company .info-section .text-wrapper {
    padding: 0 80px;
    margin-bottom: 100px;
}

.page-company .info-section .text-content {
    display: flex;
    gap: 32px;
    width: 100%;
}

.page-company .info-section .text-content .text-left {
    flex: 1;
}

.page-company .info-section .text-content .text-right {
    flex: 1;
    text-align: left;
}

.page-company .info-section .image-content {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    line-height: 0;
}

.page-company .info-section .image-content img {
    width: 100%;
    height: 596px;
    object-fit: cover;
}

.page-company .info-section .text-uppercase {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
    color: var(--greyish-blue);
}

.page-company .info-section h2 {
    margin-bottom: 24px;
}

.page-company .info-section p {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 40px;
}

.page-company h1,
.page-company h2,
.page-company .heading-lg {
    font-family: var(--font-italic) !important;
    font-weight: 400 !important;
}

.page-company h1 em,
.page-company h2 em {
    font-style: italic;
}

/* ========================================
   END COMPANY PAGE STYLES
   ======================================== */

/* ========================================
   METHODOLOGY PAGE STYLES
   ======================================== */

/* Hero Section - Reusable across pages */
.hero-section {
    display: flex;
    align-items: flex-end;
    height: 700px;
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 60px 80px;
}

/* Mobile responsive hero adjustments */
@media screen and (max-width: 1024px) {
    .hero-section {
        height: 500px;
        padding: 40px;
    }
}

@media screen and (max-width: 767px) {
    .hero-section {
        height: 400px;
        padding: 20px 20px 40px 20px;
        align-items: center;
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    .hero-section {
        height: 350px;
        padding: 20px 16px;
    }
}

.methodology-hero {
    background-image: url('../images/methodology/hero.jpg');
}

.company-hero {
    background-image: url('../images/company/hero-2096.jpg');
}


.hero-section .container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
}

.hero-section h1 {
    color: var(--white);
    text-align: left;
    font-size: var(--heading-lg);
    /* 54px */
    line-height: 1.2;
}

/* Methodology Section */
.methodology-section {
    background-color: var(--greyish-blue);
    padding: 100px 80px;
}

.methodology-section .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
}

.methodology-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.methodology-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 628px;
}

/* Methodology section h2 - specific styling for hero title */
.methodology-section .methodology-text h2 {
    color: var(--white);
    text-align: left;
    font-size: 48px;
    line-height: 1.2;
    margin: 0;
}

.methodology-subtitle {
    color: var(--white);
    font-size: 16px;
    line-height: 1.3;
    width: 600px;
}

.methodology-principles {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.principle-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.principle-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 24px;
}

.principle-line {
    width: 1px;
    height: 88px;
    border: none;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 0;
    align-self: center;
}

/* Expandable Sections */
.expandable-section {
    padding: 40px 80px 0px;
}

.expandable-section .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
}

.expandable-intro {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 12px;
    padding: 40px 0;
}

.expandable-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 628px;
    flex-shrink: 0;
}

.expandable-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
}

.expandable-left h2 {
    font-size: 48px;
    line-height: 1.2;
    margin: 0;
}

.expandable-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    flex: 1;
}

.expandable-description {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.intro-text {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
}

.expandable-description p {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
}

.expandable-actions {
    display: flex;
    padding: 0px 0px 0px 652px;
}

.learn-more-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-Regular);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3%;
    text-decoration: none;
    color: var(--black);
}

.learn-more-btn .button-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.learn-more-btn .button-underline {
    width: 100%;
    height: 1px;
    background-color: var(--black);
}

.learn-more-btn svg {
    width: 15px;
    height: 15px;
}

.section-divider {
    width: 100%;
    max-width: 1274px;
    height: 1px;
    background-color: var(--black);
    border: none;
    margin: 64px auto 0;
}

/* Expanded Content */
.expandable-content {
    margin-top: 48px;
    background-color: #FFFFFF;
    animation: fadeIn 0.3s ease-in-out;
}

/* Why it matters section */
.why-matters {
    background-color: #F2EFDC;
    padding: 64px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.expanded-section-title {
    font-family: var(--font-Regular) !important;
    font-weight: 400 !important;
    font-size: 48px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    margin: 0 !important;
    color: var(--black) !important;
    width: 768px;
}

/* White spacer sections - margin spacing handled by individual sections */

.why-matters-content {
    display: flex;
    gap: 32px;
    width: 100%;
    justify-content: center;
    align-items: stretch;
}

.why-matters-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.why-matters-subtitle {
    font-family: var(--font-italic) !important;
    font-weight: 400 !important;
    font-size: 32px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    color: var(--black) !important;
}

.why-matters-description {
    font-family: var(--font-Regular) !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: var(--black) !important;
}

.why-matters-description p {
    font-family: var(--font-Regular) !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin: 0 0 8px 0 !important;
    color: var(--black) !important;
}

.why-matters-description p:last-child {
    margin-bottom: 0 !important;
}

.source-citation,
.number-text .source-citation,
.number-text p.source-citation {
    font-family: var(--font-Regular);
    font-size: 14px;
    line-height: 1.3;
    margin: 8px 0 0 0;
    color: var(--black);
    opacity: 0.8;
}

.why-matters-divider {
    width: 1px;
    background-color: rgba(84, 90, 91, 0.5);
    align-self: stretch;
    min-height: 100%;
}

/* Image section */
.expanded-image-section {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #FFFFFF;
    padding: 48px 0;
    margin: 0;
}

.expanded-image-section img {
    width: 100%;
    height: 600px;
    object-fit: cover;
}

/* Specific cropping for efficient builder image - crop 30px from bottom, rest from top */
#efficient-builder .expanded-image-section img {
    object-position: center 85%;
}

/* Specific cropping for sustainable impact image - show top with 20px offset */
#sustainable-impact .expanded-image-section img {
    object-position: center calc(0% + 20px);
}

/* How we do it section */
.how-we-do-it {
    background-color: #F2EFDC;
    padding: 64px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.how-we-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 860px;
}

.how-we-intro-text {
    font-family: var(--font-Regular) !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    margin: 0 !important;
    color: var(--black) !important;
}

.numbered-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    align-items: center;
}

.numbered-row {
    display: flex;
    gap: 24px;
    justify-content: center;
}

.numbered-row-single {
    justify-content: center;
}

.numbered-item {
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 24px;
    width: 357px;
    height: 357px;
}


/* SMOOTH ARROW TRANSITIONS */
.learn-more-btn svg,
.mobile-learn-btn svg {
    transition: transform 0.3s ease-in-out;
}

/* CLEAN SIMPLE RULES - Numbers in methodology sections */
.number {
    font-family: var(--font-italic);
    font-style: italic;
    font-weight: 400;
    font-size: 38px;
    line-height: 1.2;
    color: var(--black);
    margin: 0;
    text-align: left;
}

/* Mobile responsive - center alignment */
@media (max-width: 767px) {
    .number {
        text-align: center;
        margin: 0 auto 16px auto;
    }
}

.number-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

/* CLEAN SIMPLE RULES - Number titles with proper specificity */
.methodology-section .numbered-item .number-title,
.methodology-section .expandable-section .number-title {
    font-family: var(--font-Regular);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.5;
    color: var(--black);
    margin: 0 0 8px 0;
    text-align: left;
    text-transform: none;
}

/* Mobile responsive - center alignment */
@media (max-width: 767px) {

    .methodology-section .numbered-item .number-title,
    .methodology-section .expandable-section .number-title {
        text-align: center;
        margin-bottom: 12px;
    }
}

.number-description {
    font-family: var(--font-Regular);
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
    color: var(--black);
}

.number-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.number-text p {
    font-family: var(--font-Regular);
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
    color: var(--black);
}

.how-we-conclusion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 860px;
}

.conclusion-text {
    font-family: var(--font-Regular) !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    margin: 0 !important;
    color: var(--black) !important;
}

.invest-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    text-decoration: none;
    color: var(--black);
}

.invest-btn span {
    font-family: var(--font-Regular) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    letter-spacing: 3% !important;
    text-transform: uppercase !important;
}



/* Learn More Button Animation */
.learn-more-arrow {
    transition: transform 0.3s ease;
    width: 17px !important;
    height: 11px !important;
}

.view-less-arrow {
    width: 17px !important;
    height: 11px !important;
}

/* Override all arrow SVGs with better viewBox and path */
.learn-more-arrow,
.view-less-arrow {
    width: 17px !important;
    height: 11px !important;
}

/* Fix arrow sizing to prevent cutoff */
svg[viewBox="0 0 15 15"] {
    width: 17px !important;
    height: 11px !important;
}

.learn-more-btn[aria-expanded="true"] .learn-more-arrow {
    transform: rotate(90deg);
}

/* Mobile Learn More Buttons - Hidden on Desktop */
.mobile-learn-more {
    display: none;
}

/* View Less Button */
.view-less-container {
    display: flex;
    justify-content: center;
    padding: 48px 0 24px 0;
}

.view-less-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-Regular);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3%;
    text-decoration: none;
    color: var(--black);
}

.view-less-btn .button-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.view-less-btn::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: var(--black);
}

.view-less-arrow {
    transition: transform 0.3s ease;
    transform: rotate(-90deg);
}

/* Add spacing before disclaimers section */
#sustainable-impact {
    padding-bottom: 100px;
}

/* Disclaimers Section */
.disclaimers-section {
    padding: 50px 80px;
    background-color: #F2EFDC;
    border-top: none;
}

.disclaimers-content {
    width: 100%;
    max-width: none;
}

.disclaimer-item {
    margin-bottom: 0;
}

.disclaimer-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    cursor: pointer;
    gap: 16px;
}

.disclaimer-question h3 {
    font-family: "Harmonia Sans Pro Cyr" !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 150% !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    color: var(--black) !important;
    margin: 0 !important;
    flex: 1;
    cursor: pointer;
    padding: 8px 0;
}

.disclaimer-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.disclaimer-toggle svg {
    transition: transform 0.3s ease;
}

.disclaimer-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.disclaimer-answer {
    padding: 24px 0;
    max-width: 860px;
}

.disclaimer-answer p {
    font-family: var(--font-Regular);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3em;
    color: var(--black);
    margin: 0;
}

.disclaimer-divider {
    border: none;
    height: 1px;
    background-color: rgba(84, 90, 91, 0.25);
    margin: 24px 0 0 0;
}



/* FAQ Section */
.faq-section {
    background-color: var(--yelow-bg);
    padding: 50px 80px;
}

.faq-section .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
}

.faq-item {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.faq-question h3 {
    font-family: var(--font-Regular);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}

.faq-toggle {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-answer {
    max-width: 860px;
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
}

.faq-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(84, 90, 91, 0.25);
    border: none;
    margin: 0;
}

/* Container standardization - Updated */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   END METHODOLOGY PAGE STYLES
   ======================================== */

.page-contact .form-group textarea {
    min-height: 180px;
}

/* ========================================
   IMPACT PAGE STYLES
   ======================================== */

/* Hero Section */
.impact-hero {
    background-image: url('../images/impact/hero-2096.jpg');
    background-size: cover;
    background-position: center;
    height: 700px;
    display: flex;
    align-items: flex-end;
    padding: 30px 80px 60px 80px;
    position: relative;
}

.impact-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.impact-hero .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
    gap: 24px;
    width: 100%;
    max-width: 1440px;
}

.impact-hero h1 {
    font-family: var(--font-italic);
    font-weight: 400;
    font-size: var(--heading-lg);
    /* 54px */
    line-height: 1.2;
    text-align: left;
    color: #FFFFFF;
    margin: 0;
}

.page-impact .impact-hero .hero-subtitle,
.page-impact .impact-hero h5 {
    font-family: var(--font-Regular);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    text-align: left;
    color: #FFFFFF;
    max-width: 66.67% !important;
    width: 66.67% !important;
    margin: 0;
}

/* Impact DNA Section */
.impact-dna-section {
    height: 917px;
    position: relative;
}

.impact-dna-container {
    position: relative;
    height: 628px;
    margin-top: 75px;
}

.impact-dna-image {
    position: absolute;
    right: 0;
    top: 0;
    width: 913px;
    height: 628px;
    object-fit: cover;
}

.impact-dna-text-box {
    position: absolute;
    left: 0;
    top: 253px;
    width: 546px;
    background: #C3D6DC;
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.impact-dna-label {
    color: #53718B;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-transform: uppercase;
}

.impact-dna-text {
    font-family: var(--font-quote);
    font-size: 38px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 45.6px */
}


.impact-dna-author {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
}

/* Two-Part Section Layouts */
.two-part-section-text {
    padding: 100px 80px;
}

.two-part-section-images {
    background: #FFFFFF;
    padding: 100px 80px;
}

/* Housing Section */
.housing-text {
    background: #F2EFDC;
}

.housing-images-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
}

.housing-image {
    width: 410.67px;
    height: 420px;
    object-fit: cover;
}

/* Section Content Layout */
.section-content-860 {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.section-content-628 {
    max-width: 628px;
    margin: 0 auto;
    text-align: center;
}

.section-text-wrapper {
    max-width: 454px;
    margin: 0 auto 32px auto;
}

.section-paragraph-466 {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 32px;
    max-width: 466px;
    margin-left: auto;
    margin-right: auto;
}

.section-paragraph-454 {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 32px;
    max-width: 454px;
    margin-left: auto;
    margin-right: auto;
}

/* Section Labels */
.section-label {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.section-label-beige {
    color: #53718B;
}

.section-label-aqua-blue {
    color: var(--aqua-blue);
}

.section-label-dark {
    color: #8CD2D2;
}

/* Section Titles */
.section-title {
    margin-bottom: 32px;
}

.section-title-beige {
    color: #000000;
}

/* Section Backgrounds */
.bg-beige {
    background: #F2EFDC;
}

.bg-dark-blue {
    background: #53718B;
}

/* Single Column Sections */
.single-section {
    padding: 100px 80px;
}

/* Community Images Layout */
.community-images-layout {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
}

.community-image-large {
    flex: 1;
    height: 664px;
    object-fit: cover;
}

.community-image-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.community-image-small {
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: center;
}

/* Single Image Sections */
.sustainability-image,
.urban-image {
    width: 100%;
    height: 596px;
    object-fit: cover;
    object-position: center;
}

/* Button Styles for Impact Page - Now unified with main button system */

/* Mobile Responsive for Impact Page */
@media screen and (max-width: 767px) {
    .impact-hero {
        height: 500px;
        padding: 20px 20px 40px 20px;
        align-items: center;
    }

    .impact-hero .container {
        gap: 16px;
        text-align: center;
    }

    .impact-hero h1 {
        text-align: center;
        font-size: 42px !important;
    }

    .impact-hero .hero-subtitle {
        text-align: center;
        font-size: 18px;
        max-width: 100%;
        margin: 0 auto;
    }

    /* Impact DNA section mobile adjustments */
    .impact-dna-section {
        height: auto !important;
        padding: 40px 20px !important;
    }

    .impact-dna-container {
        position: static !important;
        height: auto !important;
        margin-top: 0 !important;
    }

    .impact-dna-image {
        position: static !important;
        width: 100% !important;
        height: 300px !important;
        margin-bottom: 24px !important;
    }

    .impact-dna-text-box {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Two-part sections mobile */
    .two-part-section-text,
    .two-part-section-images {
        padding: 50px 20px;
    }

    /* Housing section mobile adjustments */
    .housing-images-grid {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .housing-image {
        width: 100% !important;
        height: 250px !important;
    }

    /* Community images mobile adjustments */
    .community-images-layout {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .community-image-large,
    .community-image-column {
        flex: none !important;
        width: 100% !important;
    }

    .community-image-column {
        gap: 16px !important;
    }

    .community-image-large,
    .community-image-small {
        height: 250px !important;
    }

    /* Single sections mobile */
    .single-section {
        padding: 50px 20px;
    }

    /* Single image sections mobile */
    .sustainability-image,
    .urban-image {
        height: 300px !important;
    }
}

@media screen and (max-width: 480px) {
    .impact-hero {
        padding: 20px 16px;
    }

    .impact-dna-text-box {
        padding: 24px !important;
    }

    .two-part-section-text,
    .two-part-section-images,
    .single-section {
        padding: 40px 16px;
    }
}

/* ========================================
   END IMPACT PAGE STYLES
   ======================================== */

.page-contact .form-group textarea {
    min-height: 180px;
}

/* ========================================
   PORTFOLIO PAGE STYLES
   ======================================== */

/* Portfolio Hero - uses global .hero-section styles */
.portfolio-hero {
    background-image: url('../images/portfolio/hero.jpg');
}

.portfolio-hero .container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 1280px;
}

.portfolio-hero h1 {
    font-family: var(--font-italic);
    font-weight: 400;
    font-size: var(--heading-lg);
    /* 54px */
    line-height: 1.2;
    text-align: left;
    color: #FFFFFF;
    margin: 0;
}

.portfolio-hero .hero-subtitle {
    font-family: var(--font-Regular);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    text-align: left;
    color: #FFFFFF;
    margin: 0;
}

/* Portfolio Section */
.portfolio-section {
    padding: 40px 40px 60px;
}

.portfolio-section .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
}

/* Filter Controls */
.portfolio-filters {
    border-bottom: 1px solid #545A5B;
    padding-bottom: 32px;
    margin-bottom: 48px;
}

.filter-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 64px;
}

.filter-dropdowns {
    display: flex;
    gap: 8px;
}

.reset-filters {
    display: flex;
    align-items: center;
}

.reset-filters-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: none;
    border: 1px solid var(--black);
    border-radius: 4px;
    color: var(--black);
    font-family: var(--font-Regular);
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
}

.reset-filters-btn:hover {
    background: var(--black);
    color: var(--white);
}

.reset-filters-btn:focus {
    outline: 2px solid var(--dark-teal);
    outline-offset: 2px;
}

.filter-dropdown {
    position: relative;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--white);
    border: 1px solid var(--black);
    border-radius: 4px;
    color: var(--black);
    font-family: var(--font-Regular);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background: var(--aqua-blue);
}

.filter-btn:focus {
    outline: 2px solid var(--dark-teal);
    outline-offset: 2px;
}

.filter-btn svg {
    transition: transform 0.3s ease;
}

.filter-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    background: var(--white);
    border: none;
    border-radius: 4px;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 16px 8px;
    white-space: nowrap;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: none;
    color: var(--black);
    font-family: var(--font-Regular);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.dropdown-item:hover {
    background: var(--aqua-blue);
}

.dropdown-item:focus {
    outline: 2px solid var(--dark-teal);
    outline-offset: 2px;
    background: var(--aqua-blue);
}

/* Portfolio Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.portfolio-item {
    display: flex;
    flex-direction: column;
    border: 0.5px solid rgba(84, 90, 91, 0.25);
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-item:hover {
    transform: translateY(-4px);
    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.1);
}

.portfolio-image {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Portfolio Slider Dots */
.portfolio-slider {
    position: absolute;
    bottom: -43px;
    left: 50%;
    transform: translateX(-50%);
}

.slider-dots {
    display: flex;
    gap: 6px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid var(--white);
    background: transparent;
}

.dot.active {
    background: var(--white);
}

/* Portfolio Info */
.portfolio-info {
    padding: 16px;
    background: var(--white);
    transition: background-color 0.3s ease;
}

.portfolio-title {
    font-family: "Harmonia Sans Pro Cyr";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    /* 23.4px */
    color: var(--black);
    margin: 0;
    text-align: center;
    transition: color 0.3s ease;
}

/* View More Button */
.view-more-container {
    display: flex;
    justify-content: center;
    padding: 0;
}

.view-more-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-Regular);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3%;
    text-decoration: none;
    color: var(--black);
    transition: opacity 0.3s ease;
}

.view-more-btn:hover {
    opacity: 0.8;
}

.view-more-btn:focus {
    outline: 2px solid var(--dark-teal);
    outline-offset: 2px;
}

.view-more-btn .button-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.view-more-btn .button-underline {
    width: 100%;
    height: 1px;
    background-color: var(--black);
}

/* Portfolio Loading and Error States */
.loading-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--dark-gray);
    font-size: 18px;
}

.error-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--dark-gray);
}

.error-state p {
    margin-bottom: 20px;
    font-size: 18px;
}

.retry-btn {
    background: var(--black);
    color: var(--white);
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-Regular);
}

.retry-btn:hover {
    background: var(--dark-gray);
}

/* Mobile Responsive for Portfolio Page */
@media screen and (max-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media screen and (max-width: 767px) {
    .portfolio-hero {
        height: 500px;
        padding: 20px 20px 40px 20px;
        align-items: center;
    }

    .portfolio-hero .container {
        gap: 16px;
        text-align: center;
    }

    .portfolio-hero h1 {
        text-align: center;
        font-size: 42px !important;
    }

    .portfolio-hero .hero-subtitle {
        text-align: center;
        font-size: 18px;
        max-width: 100%;
        margin: 0 auto;
    }

    .portfolio-section {
        padding: 50px 20px;
    }

    .portfolio-filters {
        padding-bottom: 24px;
        margin-bottom: 32px;
    }

    .filter-container {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .filter-dropdowns {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .reset-filters {
        justify-content: center;
    }

    .reset-filters-btn {
        width: 100%;
        justify-content: center;
    }

    .filter-btn {
        width: 100%;
        justify-content: space-between;
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        border: 1px solid rgba(84, 90, 91, 0.25);
        margin-top: 8px;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 32px;
    }

    .portfolio-image {
        height: 250px;
    }
}

@media screen and (max-width: 480px) {
    .portfolio-hero {
        padding: 20px 16px;
    }

    .portfolio-section {
        padding: 40px 16px;
    }
}

/* ========================================
   END PORTFOLIO PAGE STYLES
   ======================================== */

.page-contact .form-group textarea {
    min-height: 180px;
}

/* ========================================
   PORTFOLIO DETAIL PAGE STYLES
   ======================================== */

/* Hero Section */
.portfolio-detail-hero {
    background-image: url('../images/portfolio-detail/hero.jpg');
    background-size: cover;
    background-position: center;
    height: 700px;
    display: flex;
    align-items: flex-end;
    padding: 60px 80px;
}

.portfolio-detail-hero .container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 1280px;
}

.portfolio-detail-hero h1 {
    font-family: var(--font-italic);
    font-weight: 400;
    font-size: var(--heading-lg);
    /* 54px */
    line-height: 1.2;
    text-align: left;
}

/* Hero Loading Overlay */
.hero-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.hero-loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Property Info Section */
.property-info-section {
    background: #545A5B;
    /* Default grey color, will be overridden by JavaScript based on collection */
    padding: 20px 80px;
}

.property-info-section .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
}

.property-stats-grid {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    gap: 16px;
}

.property-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.stat-label {
    font-family: var(--font-Regular);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: white;
}

.stat-value {
    font-family: var(--font-Regular);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    color: white;
}

/* Main Content Section */
.portfolio-detail-content {
    padding: 80px 80px;
}

.portfolio-detail-content .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* Property Description Section */
.property-description-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}

.property-callout {
    font-family: var(--font-italic);
    font-weight: 400;
    font-size: 38px;
    line-height: 1.2;
    color: var(--black);
    margin: 0;
}

.property-description-columns {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 80%;
    /* 20% narrower than full width */
}

.description-column-left,
.description-column-right {
    width: 100%;
}

.property-description-columns p {
    font-family: var(--font-Regular);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--black);
    margin: 0;
}

/* Property Gallery Section */
.property-gallery-section {
    width: 100%;
}

/* Gallery Main Container */
.gallery-main-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gallery-main-image {
    position: relative;
    width: 100%;
    height: 600px;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    overflow: hidden;
}

.gallery-navigation {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    pointer-events: none;
}

.gallery-nav-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    pointer-events: all;
    transition: opacity 0.3s ease;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-nav-btn:hover {
    opacity: 0.8;
}

.gallery-nav-btn:focus {
    outline: 2px solid var(--dark-teal);
    outline-offset: 2px;
}

.gallery-nav-btn svg {
    display: block;
}

/* Gallery Thumbnails */
.gallery-thumbnails {
    display: flex;
    gap: 24px;
    height: 193px;
    overflow-x: auto;
    overflow-y: hidden;
    transition: all 0.3s ease;
}

.gallery-thumbnails.expanded {
    gap: 16px;
}

.gallery-thumbnails::-webkit-scrollbar {
    height: 8px;
}

.gallery-thumbnails::-webkit-scrollbar-track {
    background: rgba(84, 90, 91, 0.1);
    border-radius: 4px;
}

.gallery-thumbnails::-webkit-scrollbar-thumb {
    background: rgba(84, 90, 91, 0.3);
    border-radius: 4px;
}

.gallery-thumbnails::-webkit-scrollbar-thumb:hover {
    background: rgba(84, 90, 91, 0.5);
}

.gallery-thumbnail {
    flex: 1;
    height: 100%;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    border: 2px solid transparent;
    min-width: 120px;
    overflow: hidden;
    position: relative;
}

.gallery-thumbnails.expanded .gallery-thumbnail {
    flex: none;
    width: 193px;
    /* Keep original thumbnail width when expanded */
}

.gallery-thumbnail:hover {
    opacity: 0.8;
}

.gallery-thumbnail:focus {
    outline: 2px solid var(--dark-teal);
    outline-offset: 2px;
}

.gallery-thumbnail.active {
    border-color: var(--black);
}

.gallery-more-indicator {
    flex: 1;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
}

.gallery-more-indicator {
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.gallery-more-indicator:hover {
    opacity: 0.8;
}

.gallery-more-indicator:focus {
    outline: 2px solid var(--dark-teal);
    outline-offset: 2px;
}

.gallery-more-indicator span {
    font-family: var(--font-Regular);
    font-size: 18px;
    font-weight: 600;
    color: var(--black);
    opacity: 0.7;
}



/* Property Location */
.property-location {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.location-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.address-info {
    max-width: 400px;
}

.map-container {
    width: 100%;
    height: 500px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(84, 90, 91, 0.2);
}

.property-map {
    width: 100%;
    height: 100%;
}

.map-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    color: #666;
    font-size: 16px;
}

.map-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    color: #666;
    text-align: center;
}

/* Back to Portfolio Section */
.back-to-portfolio {
    padding: 40px 80px 80px;
    border-top: 1px solid rgba(84, 90, 91, 0.2);
}

.back-to-portfolio .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
}

.back-link-container {
    display: flex;
    justify-content: flex-start;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    font-family: var(--font-Regular);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--black);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.back-link:hover {
    opacity: 0.7;
}

.back-link:focus {
    outline: 2px solid var(--dark-teal);
    outline-offset: 2px;
}

.back-link svg {
    transition: transform 0.3s ease;
}

.back-link:hover svg {
    transform: translateX(-4px);
}

/* Mobile Responsive for Portfolio Detail Page */
@media screen and (max-width: 1024px) {
    .property-description-columns {
        flex-direction: column;
        gap: 24px;
    }

    .description-column-left,
    .description-column-right {
        gap: 16px;
    }

    .gallery-main-image {
        height: 450px;
    }

    .gallery-thumbnails {
        height: 150px;
        gap: 16px;
    }

    .location-info {
        gap: 20px;
    }
}

@media screen and (max-width: 767px) {
    .portfolio-detail-hero {
        height: 500px;
        padding: 20px 20px 40px 20px;
        align-items: center;
    }

    .portfolio-detail-hero .container {
        gap: 16px;
        text-align: center;
    }

    .portfolio-detail-hero h1 {
        text-align: center;
        font-size: 42px !important;
    }

    .property-info-section {
        padding: 20px 20px;
    }

    .property-stats-grid {
        flex-direction: column;
        gap: 20px;
    }

    .property-stat {
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        padding-bottom: 20px;
    }

    .property-stat:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .portfolio-detail-content {
        padding: 50px 20px;
    }

    .portfolio-detail-content .container {
        gap: 50px;
    }

    .property-description-section {
        text-align: center;
        margin-bottom: 32px;
    }

    .property-callout {
        font-size: 32px;
        text-align: center;
    }

    .property-description-columns {
        gap: 24px;
        text-align: center;
    }

    .gallery-main-image {
        height: 300px;
    }

    .gallery-navigation {
        padding: 0 20px;
    }

    .gallery-nav-btn svg {
        width: 40px;
        height: 40px;
    }

    .gallery-thumbnails {
        height: 120px;
        gap: 12px;
    }

    .gallery-thumbnails.expanded .gallery-thumbnail {
        width: 150px;
        /* Larger on mobile to prevent squeezing */
    }

    .map-container {
        height: 300px;
    }

    .back-to-portfolio {
        padding: 30px 20px 50px;
    }

    .back-link-container {
        justify-content: center;
    }
}

@media screen and (max-width: 480px) {
    .portfolio-detail-hero {
        padding: 20px 16px;
    }

    .property-info-section {
        padding: 20px 16px;
    }

    .portfolio-detail-content {
        padding: 40px 16px;
    }

    .back-to-portfolio {
        padding: 20px 16px 40px;
    }
}

/* Custom Map Marker Styles */
.custom-map-marker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.marker-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.25);
    width: 212px;
    height: 100px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.marker-card:hover {
    transform: translateY(-2px);
    box-shadow: 0px 6px 32px 0px rgba(0, 0, 0, 0.3);
}

.marker-image {
    width: 82px;
    height: 100px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    margin-left: -20px;
}

.marker-image img {
    width: 123px;
    height: 100px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.marker-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    width: 144px;
    flex-shrink: 0;
}

.marker-title {
    font-family: 'Harmonia Sans Pro Cyr';
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: #000000;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.marker-address {
    font-family: 'Harmonia Sans Pro Cyr';
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
    color: #000000;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.marker-pointer {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #FFFFFF;
    margin-top: -1px;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.15));
}

/* Responsive adjustments for mobile */
@media screen and (max-width: 767px) {
    .marker-card {
        width: 180px;
        height: 90px;
        padding: 8px;
        gap: 8px;
    }

    .marker-image {
        width: 70px;
        height: 90px;
        margin-left: -16px;
    }

    .marker-image img {
        width: 105px;
        height: 90px;
    }

    .marker-content {
        width: 120px;
        gap: 8px;
    }

    .marker-title {
        font-size: 16px;
    }

    .marker-address {
        font-size: 12px;
    }
}

/* ========================================
   END PORTFOLIO DETAIL PAGE STYLES
   ======================================== */

.page-contact .form-group textarea {
    min-height: 180px;
}

/* ========================================
   BUTTON SYSTEM - SIMPLIFIED
   All buttons now use consistent styling
   ======================================== */

/* =========================================
   HERO BACKGROUND POSITIONING
   ========================================= */

/* Adjust hero background positioning to start 20% from top */
.hero-section {}

/* =========================================
   PORTFOLIO CARD STYLING
   ========================================= */

/* Ensure portfolio titles are left-aligned */
.portfolio-title {
    text-align: left !important;
}

.portfolio-info {
    text-align: left !important;
}

/* =========================================
   METHODOLOGY PAGE IMPROVEMENTS
   ========================================= */

/* Removed duplicate rule - consolidated above */

/* Removed conflicting 0.8em rules - now using pixel-based sizing above */

/* =========================================
   DYNAMIC HERO TITLE ANIMATIONS
   ========================================= */

/* Slide in from left animation */
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide in from right animation */
@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animation classes */
.hero-title-left {
    opacity: 0;
    animation: slideInLeft 1.2s ease-out 0.3s forwards;
}

.hero-title-right {
    opacity: 0;
    animation: slideInRight 1.2s ease-out 0.8s forwards;
}

/* Special handling for slideshow animations */
.slick-slide .hero-title-left,
.slick-slide .hero-title-right {
    opacity: 0;
    animation: none;
}

.slick-slide.slick-active .hero-title-left {
    animation: slideInLeft 1.2s ease-out 0.3s forwards;
}

.slick-slide.slick-active .hero-title-right {
    animation: slideInRight 1.2s ease-out 0.8s forwards;
}

/* Respect user's motion preferences for accessibility */
@media (prefers-reduced-motion: reduce) {

    .hero-title-left,
    .hero-title-right,
    .slick-slide .hero-title-left,
    .slick-slide .hero-title-right {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Investment Strategy Animations */
@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.investment-item {
    display: flex;
    align-items: center;
    gap: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 24px;
}

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

.investment-item .icon-container {
    opacity: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(50px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.investment-item .icon-container.animate {
    opacity: 1;
    transform: translateX(0);
}

.investment-item .investment-item-text {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    font-size: 18px;
    line-height: 1.3;
}

.investment-item .investment-item-text.animate {
    opacity: 1;
    transform: translateX(0);
}

/* Performance optimizations */
.investment-item .icon-container,
.investment-item .investment-item-text {
    will-change: opacity, transform;
    backface-visibility: hidden;
}

/* =========================================
   TEAM PAGE
   ========================================= */
.page-team .team-hero-section {
    padding: 80px 80px;
    background: #fff;
}

.team-hero-section .container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1280px;
    margin: 0 auto;
}

.team-hero-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.team-hero-title {
    font-family: var(--font-Regular);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--greyish-blue);
    margin: 0;
}

.team-hero-subtitle {
    font-family: var(--font-italic);
    font-size: 58px;
    line-height: 1.2;
    color: var(--black);
    margin: 0;
}

.team-hero-description {
    max-width: 575px;
}

.team-hero-description p {
    font-family: var(--font-Regular);
    font-size: 16px;
    line-height: 1.3;
    color: var(--black);
    margin: 0;
}

.team-grid-section {
    padding: 0px 80px 100px;
}

.team-grid-section .container {
    max-width: 1280px;
    margin: 0 auto;
    border-top: 1px solid #545A5B;
    padding-top: 32px;
}

.team-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 64px;
}

.team-filter-chip {
    padding: 8px 16px;
    border: 1px solid var(--black);
    border-radius: 4px;
    background: #fff;
    color: var(--black);
    font-family: var(--font-Regular);
    font-size: 18px;
    cursor: pointer;
    transition: all .3s ease;
}

.team-filter-chip.active,
.team-filter-chip:hover {
    background: var(--greyish-blue);
    color: #fff;
    border-color: var(--greyish-blue);
}

.team-grid {
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding-top: 60px;
}

.team-member-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    cursor: pointer;
}

.team-member-image {
    position: relative;
    width: 100%;
    padding-top: 100%;
    /* 1:1 Aspect Ratio */
    background: #FFFFFF;
    border: 3px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    transition: all .3s ease;
}

.team-member-card:hover .team-member-image {
    border-color: #53718B;
    transform: scale(1.05);
}

.team-member-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.team-member-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.team-member-name {
    font-family: var(--font-Regular);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: var(--black);
    margin: 0;
}

.team-member-title {
    font-family: var(--font-Regular);
    font-size: 16px;
    line-height: 1.3;
    color: var(--black);
    margin: 0;
}

.team-member-arrow {
    color: var(--black);
}

.team-cta-section {
    padding: 100px 80px;
    background: #C3D6DC;
    text-align: center;
}

.team-cta-section .container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.team-cta-title {
    font-family: var(--font-italic);
    font-size: 38px;
    line-height: 1.2;
    color: var(--black);
    margin: 0;
}

.team-slider-section {
    height: 596px;
    overflow: hidden;
}

.team-slider-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 80% 90%;
    /* This will position the image to show its lower part, cropping mostly from the top. */
}

@media screen and (max-width: 1024px) {
    .team-grid {
        gap: 50px;
    }
}

@media screen and (max-width: 767px) {
    .page-team .team-hero-section {
        padding: 60px 20px;
    }

    .team-hero-subtitle {
        font-size: 42px;
    }

    .team-grid-section {
        padding: 40px 20px 60px;
    }

    .team-grid {
        gap: 40px;
    }

    .team-cta-section {
        padding: 60px 20px;
    }

    .team-cta-title {
        font-size: 32px;
    }
}

@media screen and (max-width: 480px) {
    .team-grid {
        gap: 30px;
    }
}

/* =========================================
   TEAM MEMBER MODAL
   ========================================= */
.team-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    justify-content: center;
    padding: 50px 0;
}

.modal-content-wrapper {
    width: 100%;
    max-width: 1280px;
    margin: auto;
}

.modal-content {
    background: #fff;
    width: 100%;
}

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 30px;
    cursor: pointer;
}

.modal-back-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    cursor: pointer;
    font-family: var(--font-Regular);
    font-size: 18px;
}

.modal-body {
    display: flex;
    gap: 24px;
}

.modal-left {
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-member-photo {
    width: 100%;
    background: #fff;
}

.modal-member-photo img {
    width: 100%;
    height: auto;
}

#modal-member-caption {
    font-family: var(--font-Regular);
    font-size: 18px;
    color: var(--black);
}

.modal-right {
    width: 55%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.modal-member-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#modal-member-name {
    font-family: var(--font-italic);
    font-size: 48px;
    line-height: 1.2;
    margin: 0 0 8px 0;
}

#modal-member-title {
    font-family: var(--font-Regular);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
}

.modal-member-intro p {
    font-family: var(--font-Regular);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
}

.modal-member-description p {
    font-family: var(--font-Regular);
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
}

@media screen and (max-width: 1024px) {
    .modal-body {
        flex-direction: column;
    }

    .modal-left,
    .modal-right {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .team-modal {
        padding: 20px 0;
    }

    .modal-content-wrapper {
        padding: 0 20px;
    }

    .modal-member-header {
        flex-direction: column;
        gap: 24px;
    }

    #modal-member-name {
        font-size: 36px;
    }
}