@font-face {
    font-family: 'Alternate Gothic Pro';
    src: url('fonts/AlternateGothicNo1Pro.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Area Inktrap';
    src: url('fonts/AreaInktrap-Semibold.otf') format('opentype');
    font-weight: 600;
}

@font-face {
    font-family: 'Area Inktrap';
    src: url('fonts/AreaInktrap-Black.otf') format('opentype');
    font-weight: 900;
}

:root {
    --dark-green: #50685A;
    --mid-green: #BFE7B0;
    --mid-dark-green: #8FAD94;
    --light-green: #DFFDD3;
    --bg-light: #eef8e5;
    --text-dark: #37533d;
    --white: #ffffff;
}

body {
    margin: 0;
    padding: 0;
    background-color: #e0e0e0;
    font-family: 'Area Inktrap', sans-serif;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
}

#app {
    max-width: 2000px;
    margin: 0 auto;
    background-color: var(--white);
    position: relative;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    overflow: clip;
    /* To contain absolute graphics if they spill out horizontally */
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    width: 100%;
    height: clamp(58px, 4.39vw, 87.85px);
    background-color: var(--white);
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 clamp(52.71px, 5.86vw, 117.13px);
    box-sizing: border-box;
}

.site-header .logo img {
    height: 27px;
    opacity: 0.8;
}

.lang-toggle {
    display: flex;
    align-items: center;
    gap: clamp(1.98px, 0.22vw, 4.39px);
    font-size: clamp(9.22px, 1.02vw, 20.50px);
    color: var(--mid-green);
}

.lang-toggle a {
    background: none;
    border: none;
    font-family: 'Area Inktrap', sans-serif;
    font-weight: 900;
    font-size: clamp(9.22px, 1.02vw, 20.50px);
    color: var(--mid-green);
    cursor: pointer;
    padding: 0;
    transition: color 0.3s ease;
}

.lang-toggle a:hover {
    color: #777;
}

.lang-toggle a.active {
    color: var(--mid-dark-green);
}

.lang-toggle span {
    color: #a0a0a0;
}

/* Typography & Layout Utils */
.content-wrapper {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
}

.graphic {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

/* Section 1 */
.section-1 {
    background-color: #50685a;
    background-image: url('images/green_bg.png');
    background-repeat: repeat;
    background-size: 100%;
    padding: clamp(23.72px, 2.64vw, 52.71px) clamp(26.35px, 2.93vw, 58.57px) clamp(9.88px, 1.10vw, 21.96px);
    position: relative;
    color: var(--white);
    display: flex;
    justify-content: center;
}

.textured-text {
    font-family: 'Alternate Gothic Pro', sans-serif;
    font-size: clamp(144.95px, 16.11vw, 322.11px);
    font-weight: 400;
    letter-spacing: -1.1%;
    line-height: 75%;
    /* Add padding to prevent clipping of text ascenders/descenders, and offset with negative margin */
    padding: clamp(32.94px, 3.66vw, 73.21px) 0 0;
    margin: 0;
    background-image: url('images/natural_world_texture.jpg');
    background-size: cover;
    background-position: center;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    text-transform: uppercase;
}

.subtitle-desc-wrapper {
    margin: 30px 0 clamp(13.18px, 1.46vw, 29.28px);
}

.section-1 .subtitle {
    font-family: 'Alternate Gothic Pro', sans-serif;
    font-size: clamp(49.05px, 5.45vw, 109.00px);
    font-weight: 400;
    color: var(--light-green);
    letter-spacing: 1px;
}

.section-1 .description {
    font-family: 'Alternate Gothic Pro', sans-serif;
    font-size: clamp(26.35px, 2.93vw, 58.57px);
    font-weight: 400;
    color: var(--light-green);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.flower-green-large {
    right: clamp(-280.00px, -14.00vw, -126.00px);
    top: 55%;
    transform: translateY(-50%);
    width: clamp(477.00px, 53.00vw, 1060.00px);
    z-index: 3;
}

/* Parallax Sections */
.parallax {
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: clamp(461.20px, 51.24vw, 1024.89px);
}

/* Inline Hero */
.inline-hero {
    width: 100%;
    height: auto;
    display: block;
}

/* Section 3 */
.section-3 {
    background-color: var(--bg-light);
    padding: clamp(59.31px, 6.59vw, 131.80px) clamp(26.35px, 2.93vw, 58.57px) clamp(39.53px, 4.39vw, 87.85px);
    position: relative;
    display: flex;
    justify-content: center;
}

.section-3 .content-wrapper {
    text-align: left;
    margin: 0 auto;
    width: clamp(546.85px, 60.76vw, 1215.23px);
}

html[lang="fr"] .section-3 .content-wrapper {
    width: clamp(603.00px, 67.00vw, 1340.00px);
}

.flower-red-large-top {
    top: clamp(-140.00px, -7.00vw, -63.00px);
    left: clamp(-260.00px, -13.00vw, -117.00px);
    width: clamp(504.00px, 56.00vw, 1120.00px);
    z-index: 5;
}

.flower-red-small {
    bottom: clamp(27.00px, 3.00vw, 60.00px);
    right: clamp(-40.00px, -2.00vw, -18.00px);
    width: clamp(378.00px, 42.00vw, 840.00px);
    z-index: 5;
}

.section-3 h2 {
    font-family: 'Alternate Gothic Pro', sans-serif;
    font-size: clamp(144.95px, 16.11vw, 322.11px);
    line-height: 75%;
    font-weight: 400;
    color: var(--dark-green);
    margin: 0;
    text-transform: uppercase;
    padding-left: clamp(65.89px, 7.32vw, 146.41px);
    text-indent: calc(-1 * clamp(65.89px, 7.32vw, 146.41px));
}

.section-3 h3 {
    font-family: 'Alternate Gothic Pro', sans-serif;
    font-size: clamp(105.42px, 11.71vw, 234.26px);
    line-height: 77%;
    font-weight: 400;
    color: var(--dark-green);
    margin: 0 0 0 0;
    text-transform: uppercase;
    text-indent: clamp(65.89px, 7.32vw, 146.41px);
}

/* Footer */
.site-footer {
    background-color: #50685a;
    background-image: url('images/green_bg.png');
    background-repeat: repeat;
    background-size: 100%;
    padding: 90px clamp(26.35px, 2.93vw, 58.57px) clamp(39.53px, 4.39vw, 87.85px);
    position: relative;
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flower-red-large-bottom {
    top: clamp(-300.00px, -15.00vw, -135.00px);
    left: clamp(-360.00px, -18.00vw, -162.00px);
    width: clamp(513.00px, 57.00vw, 1140.00px);
    transform: rotate(-20deg);
    z-index: 5;
}

.site-footer h2 {
    font-family: 'Alternate Gothic Pro', sans-serif;
    font-size: clamp(78.87px, 8.77vw, 175.26px);
    font-weight: 400;
    margin: 0;
    color: var(--light-green);
    text-transform: uppercase;
}

.footer-intro {
    font-family: 'Area Inktrap', sans-serif;
    font-size: clamp(15.65px, 1.74vw, 34.77px);
    color: var(--light-green);
    margin: 5px 0 clamp(34.74px, 3.86vw, 77.20px);
    line-height: 130%;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mobile-br {
    display: none;
}

.desktop-br {
    display: inline;
}

.contacts-grid {
    display: grid;
    grid-template-columns: 10% 30% 7% 43% 10%;
    margin-bottom: clamp(65.89px, 7.32vw, 146.41px);
    width: 100%;
    max-width: none;
}

.jll-block {
    grid-column: 2;
}

.cushman-block {
    grid-column: 4;
}

.contact-block {
    text-align: left;
}

.logo-wrapper {
    display: flex;
    align-items: flex-end;
    /* Align to bottom so horizontal rules match */
    justify-content: center;
    height: clamp(44.14px, 4.90vw, 98.10px);
    /* Tallest logo height */
    margin-bottom: clamp(22.50px, 2.50vw, 50.00px);
}

.contact-logo {
    display: block;
}

.jll-logo {
    width: auto;
    height: clamp(44.14px, 4.90vw, 98.10px);
}

.cushman-logo {
    width: auto;
    height: clamp(32.94px, 3.66vw, 73.21px);
}

.contact-divider {
    border: none;
    border-top: 1px solid #ffffff99;
    margin: 0 0 clamp(9.00px, 1.00vw, 20.00px) 0;
    width: 100%;
}

.persons-wrapper {
    display: flex;
    justify-content: space-between;
}

.person {
    width: 48%;
    /* Provide slight inner gap between names */
    font-size: clamp(10.64px, 1.18vw, 23.65px);
    line-height: 1.5;
    text-align: center;
}

.contact-name {
    font-family: 'Area Inktrap', sans-serif;
    font-weight: 900;
    color: var(--light-green);
}

.contact-phone,
.contact-email {
    color: var(--white);
    text-decoration: none;
    transition: opacity 0.3s;
}

.contact-email {
    text-decoration: underline;
}

.contact-phone:hover,
.contact-email:hover {
    opacity: 0.8;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(9.88px, 1.10vw, 21.96px);
    width: 100%;
}

.footer-gci-logo {
    height: clamp(40.85px, 4.54vw, 90.78px);
}

.copyright {
    font-size: clamp(6.59px, 0.73vw, 14.64px);
    letter-spacing: 1px;
    color: var(--light-green);
    margin: 0;
}

/* Responsive Design (< clamp(592.97px, 65.89vw, 1317.72px)) */
@media (max-width: 900px) {

    .site-header {
        padding: 0 clamp(28.50px, 8.91vw, 80.15px);
        height: 100px;
    }

    .lang-toggle,
    .lang-toggle a {
        font-size: clamp(10.24px, 3.20vw, 18px);
    }

    .section-1 {
        background-size: 300%;
        padding: clamp(25.60px, 8.00vw, 72.00px) clamp(16.28px, 5.09vw, 45.80px) clamp(8.14px, 2.54vw, 22.90px);
    }

    .textured-text {
        font-size: clamp(86.72px, 27.10vw, 243.90px);
        padding: clamp(8.14px, 2.54vw, 22.90px) 0 0;
    }

    .subtitle-desc-wrapper {
        margin: clamp(8.14px, 2.54vw, 22.90px) 0 clamp(16.28px, 5.09vw, 45.80px);
    }

    .section-1 .subtitle {
        font-size: clamp(57.60px, 18.00vw, 162.00px);
    }

    .section-1 .description {
        font-size: clamp(27.68px, 8.65vw, 77.86px);
        display: block;
        line-height: 1;
    }

    .parallax {
        background-image: url('images/building_hero_mob.jpg') !important;
        height: clamp(237.02px, 74.07vw, 666.63px);
        background-attachment: scroll;
        background-size: 100% auto;
        position: sticky;
        top: 100px;
    }

    .section-3 {
        padding: clamp(48.85px, 15.27vw, 137.40px) 0 clamp(40.71px, 12.72vw, 114.50px);
    }

    .section-3 .content-wrapper {
        width: clamp(256.00px, 80.00vw, 720.00px);
    }

    html[lang="fr"] .section-3 .content-wrapper {
        width: clamp(272.00px, 85.00vw, 765.00px);
    }

    .section-3 h2 {
        font-size: clamp(70.84px, 22.14vw, 199.24px);
        padding-left: clamp(26.06px, 8.14vw, 73.28px);
        text-indent: calc(-1 * clamp(26.06px, 8.14vw, 73.28px));
    }

    .section-3 h3 {
        font-size: clamp(42.34px, 13.23vw, 119.08px);
        text-indent: clamp(26.06px, 8.14vw, 73.28px);
    }

    .site-footer {
        background-size: 300%;
        padding: clamp(32.57px, 10.18vw, 91.60px) clamp(16.28px, 5.09vw, 45.80px) clamp(32.57px, 10.18vw, 91.60px);
    }

    .contacts-grid {
        display: flex;
        flex-direction: column;
        gap: clamp(40.71px, 12.72vw, 114.50px);
    }

    .persons-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .person {
        width: 100%;
        text-align: center;
        margin-bottom: 30px;
    }

    .jll-block {
        padding-left: clamp(70.40px, 22.00vw, 198.00px);
        padding-right: clamp(70.40px, 22.00vw, 198.00px);
    }

    .cushman-block {
        padding-left: clamp(35.20px, 11.00vw, 99.00px);
        padding-right: clamp(35.20px, 11.00vw, 99.00px);
    }

    .cushman-logo {
        height: clamp(41.60px, 13.00vw, 70px);
    }

    .site-footer h2 {
        font-size: clamp(27.85px, 8.70vw, 78.32px);
    }

    .footer-intro {
        font-size: clamp(13.15px, 4.11vw, 22px);
        margin: clamp(6.40px, 2.00vw, 18.00px) 0 clamp(67.20px, 21.00vw, 189.00px);
    }

    .copyright {
        font-size: clamp(8.00px, 2.50vw, 22.50px);
        letter-spacing: 0;
    }

    .footer-gci-logo {
        height: clamp(48.00px, 15.00vw, 135.00px);
    }

    .mobile-br {
        display: inline;
    }

    .desktop-br {
        display: none;
    }

    .contacts-grid {
        flex-direction: column;
        gap: clamp(48.85px, 15.27vw, 137.40px);
        margin-bottom: clamp(48.85px, 15.27vw, 137.40px);
    }

    .jll-logo {
        height: clamp(42.34px, 13.23vw, 70px);
    }

    .person {
        font-size: clamp(12.38px, 3.87vw, 22px);
    }

    .flower-green-large {
        width: clamp(339.20px, 106.00vw, 954.00px);
        right: clamp(-459.00px, -51.00vw, -163.20px);
        top: clamp(169.60px, 53.00vw, 477.00px);
        transform: scaleY(-1);
    }

    .flower-red-large-top {
        width: clamp(281.60px, 88.00vw, 792.00px);
        top: clamp(6.40px, 2.00vw, 18.00px);
        left: clamp(-387.00px, -43.00vw, -137.60px);
        transform: rotate(-21deg);
    }

    .flower-red-large-bottom {
        width: clamp(246.40px, 77.00vw, 693.00px);
        top: clamp(67.20px, 21.00vw, 189.00px);
        left: clamp(-378.00px, -42.00vw, -134.40px);
        transform: rotate(-36deg);
    }

    .flower-red-small {
        width: clamp(249.60px, 78.00vw, 702.00px);
        bottom: clamp(-261.00px, -29.00vw, -92.80px);
        right: clamp(-261.00px, -29.00vw, -92.80px);
    }

    .inline-hero {
        position: relative;
        z-index: 10;
    }
}

/* Scroll-triggered animations */
@media (prefers-reduced-motion: no-preference) {

    html.js-enabled .graphic,
    html.js-enabled .section-3 h2,
    html.js-enabled .section-3 h3 {
        opacity: 0;
        translate: 0 100px;
        transition: opacity 1.5s ease-in-out, translate 1.5s ease-in-out;
    }

    html.js-enabled .graphic.is-visible,
    html.js-enabled .section-3 h2.is-visible,
    html.js-enabled .section-3 h3.is-visible {
        opacity: 1;
        translate: 0 0;
    }

    html.js-enabled .flower-red-small,
    html.js-enabled .flower-red-large-top {
        transition-delay: 500ms;
    }
}