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

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

html {
    scroll-behavior: smooth;
}

body {

    background: #F8F5F0;
    color: #2F2F2F;
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
    line-height: 1.7;

}

img {

    max-width: 100%;
    display: block;

}

a {

    text-decoration: none;

}

ul {

    list-style: none;

}

button,
input,
textarea {

    font-family: inherit;

}

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

:root {

    --green: #183D2C;
    --green-dark: #102C20;

    --green-light: #7FA68C;

    --cream: #F8F5F0;

    --card: #FCFBF8;

    --border: #E8E1D7;

    --text: #2F2F2F;

    --text-light: #666;

    --radius: 24px;

    --shadow: 0 18px 50px rgba(0, 0, 0, .08);

    --transition: .35s ease;

}

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

.container {

    width: min(1220px, 92%);
    margin: auto;

}



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

.btn {

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

    padding: 18px 38px;

    border-radius: 999px;

    font-weight: 600;

    transition: var(--transition);

}

.btn--primary {

    background: var(--green);
    color: #fff;

}

.btn--primary:hover {

    background: var(--green-dark);

    transform: translateY(-3px);

}

.btn--secondary {

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

    color: var(--green);

}

.btn--secondary:hover {

    background: var(--green);

    color: #fff;

}

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

.site-header {

    position: fixed;

    top: 18px;

    left: 0;

    width: 100%;

    z-index: 999;

}

.navbar {

    background: #fff;

    border-radius: 999px;

    padding: 18px 40px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    box-shadow: var(--shadow);

}

.logo img {

    height: 52px;

}

.nav-links {

    display: flex;

    gap: 42px;

}

.nav-links a {

    color: var(--text);

    font-weight: 500;

    transition: var(--transition);

}

.nav-links a:hover {

    color: var(--green);

}

.mobile-toggle {

    display: none;

}

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

.hero {

    padding-top: 170px;

    padding-bottom: 50px;

}

.hero-grid {

    display: grid;

    grid-template-columns: 46% 54%;

    gap: 90px;

    align-items: center;

}

.hero__content {

    position: relative;

}

.hero-watermark {

    position: absolute;

    width: 220px;

    opacity: .04;

    top: -80px;

    left: -60px;

}

.hero h1 {

    font-family: "Cormorant Garamond", serif;

    font-size: 70px;

    line-height: 1;

    font-weight: 500;

    margin-bottom: 30px;

}

.hero h1 span {

    display: block;

    color: var(--green);

    font-style: italic;

}

.hero h1 em {

    display: block;

    font-style: italic;

    font-weight: 400;

}

.hero p {

    color: var(--text-light);

    max-width: 520px;

    font-size: 18px;

    margin-bottom: 40px;

}

.hero-buttons {

    display: flex;

    gap: 18px;

}

.hero__image {

    position: relative;

}

.hero__image img {

    width: 100%;

    border-radius: 32px;

    box-shadow: var(--shadow);

}

.hero-quote {

    position: absolute;

    left: -70px;

    bottom: 50px;

    background: #fff;

    width: 270px;

    padding: 24px;

    border-radius: 20px;

    box-shadow: var(--shadow);

}

.hero-quote img {

    width: 42px;

    margin-bottom: 16px;

}

.hero-quote p {

    margin: 0;

    font-size: 15px;

    color: #4F4F4F;

}

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

.services {

    position: relative;

    padding: 120px 0;
    margin-top: 0

}

.services .container {

    position: relative;

}

.services-watermark {

    position: absolute;

    width: 420px;

    left: 50%;

    top: 52%;

    transform: translate(-50%, -50%);

    opacity: .045;

    pointer-events: none;

    z-index: 0;

}

.section-header {

    text-align: center;

    margin-bottom: 70px;

    position: relative;

    z-index: 2;
    margin-top: 0;

}

.section-tag {

    display: inline-block;

    color: var(--green);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 18px;

}

.section-title {

    font-family: "Cormorant Garamond", serif;

    font-size: 54px;

    font-weight: 500;

    margin-bottom: 18px;

}

.section-description {

    max-width: 720px;

    margin: auto;

    color: #666;

    font-size: 18px;

}

.services-grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 28px;

}

.service-card {

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

    backdrop-filter: blur(8px);

    border: 1px solid rgba(230, 230, 230, .8);

    border-radius: 24px;

    padding: 38px;

    min-height: 300px;

    transition: .35s ease;

}

.service-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);

}

.service-icon {

    width: 58px;

    height: 58px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 30px;

    font-size: 22px;

}

.service-icon.green {

    background: #BFF0B6;

}

.service-icon.beige {

    background: #F5E6D7;

}

.service-icon.gray {

    background: #ECE9E8;

}

.service-card h3 {

    font-family: "Cormorant Garamond", serif;

    font-size: 24px;

    line-height: 1.2;

    font-weight: 500;

    margin-bottom: 18px;

}

.service-card p {

    color: #666;

    font-size: 17px;

    line-height: 1.8;

}

/*====================================================
                    MOMENTS
====================================================*/

.moments {

    padding: 70px 0 120px;

}

.section-header--left {

    width: 100%;

    max-width: 1100px;

    text-align: left;

    margin-bottom: 50px;

}


.section-header--left .section-tag {

    margin-bottom: 14px;
    display: block;
    font-size: 12px;
    letter-spacing: 2px;
}

.section-header--left .section-title {

    font-size: 64px;

    line-height: 1.05;

    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
}

.title-accent {

    display: block;

    color: var(--green);

    font-style: italic;

    margin-top: 6px;

}

.moments-grid {

    display: grid;

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

    grid-template-areas:

        "custom everyone creativity"

        "connection image image";

    gap: 24px;

    align-items: stretch;

}

/* Cards */

.moment-card {

    background: #FAF8F5;

    border: 1px solid #ECE4DA;

    border-radius: 24px;

    padding: 32px;

    transition: .35s;

}

.moment-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);

}

/* Individual Areas */

.moment-card--large {

    grid-area: custom;

    background: #F6E8D9;

}

.moment-card:nth-child(2) {

    grid-area: everyone;

}

.moment-card:nth-child(3) {

    grid-area: creativity;

}

.moment-card--dark {

    grid-area: connection;

    background: #183D2C;

    color: #fff;

    display: flex;

    gap: 22px;

    align-items: flex-start;

}

.moment-image {

    grid-area: image;

    overflow: hidden;

    border-radius: 20px;

}

.moment-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}

/* Typography */

.moment-card h3 {

    font-family: "Cormorant Garamond", serif;

    font-size: 28px;

    font-weight: 500;

    line-height: 1.18;

    margin-bottom: 16px;

}

.moment-card p {

    font-size: 16px;

    color: #666;

    line-height: 1.75;

}

.moment-card--dark p {

    color: rgba(255, 255, 255, .82);

}

.moment-icon {

    width: 68px;

    height: 68px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, .25);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    font-size: 24px;

}

/* ===== MOMENTS HEADER OVERRIDE ===== */

.moments .section-header {

    text-align: left;

    max-width: 1100px;

    margin: 0 0 50px 0;

}

.moments .section-title {

    font-size: 58px;

    line-height: 1.08;

}

.moments .title-accent {

    display: block;

    margin-top: 6px;

}

/*====================================================
                FRAMEWORK
====================================================*/

.framework {

    position: relative;

    padding: 60px 0 100px;

    background: #F7F5F2;

}

.framework .container {

    position: relative;

}

.framework .section-title {

    font-size: 62px;

}

.framework .section-tag {

    margin-bottom: 14px;

}

.framework-watermark {

    position: absolute;

    left: 50%;

    top: 48%;

    transform: translate(-50%, -50%);

    width: 340px;

    opacity: .05;

    pointer-events: none;

    z-index: 0;

}

.framework .section-header {

    position: relative;

    z-index: 2;

    margin-bottom: 45px;

}

.framework-line {

    position: absolute;

    left: 8%;

    right: 8%;

    top: 225px;

    height: 1px;

    background: #DDD5CC;

    z-index: 1;

}

.framework-grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 30px;

    text-align: center;

}

.framework-step {

    position: relative;

}

.framework-circle {

    width: 110px;

    height: 110px;

    border-radius: 50%;

    margin: 0 auto 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 3px solid #173A2A;

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

    transition: .35s ease;

}

.framework-circle:hover {

    transform: translateY(-6px);

}

.framework-circle span {

    font-family: "Cormorant Garamond", serif;

    font-size: 48px;

    color: #173A2A;

}

.framework-circle.green {

    background: #C9F2B5;

}

.framework-circle.light {

    background: #BFE8C7;

}

.framework-circle.beige {

    background: #EFE2D6;

}

.framework-circle.white {

    background: #FFFFFF;

}

.framework-step h3 {

    font-family: "Cormorant Garamond", serif;

    font-size: 34px;

    font-weight: 500;

    margin-bottom: 14px;

}

.framework-step p {

    max-width: 230px;

    margin: auto;

    color: #666;

    line-height: 1.7;

    font-size: 15px;

}

/*====================================================
                    TEAM
====================================================*/

.team {

    padding: 100px 0;

    background: #F8F5F0;

}

.team .section-header {

    margin-bottom: 70px;

}

.team-grid {

    display: grid;

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

    gap: 20px;

    align-items: start;

}

.team-card {

    text-align: center;

    transition: .35s ease;

}

.team-card:hover {

    transform: translateY(-8px);

}

.team-icon {

    width: 140px;

    height: 140px;

    margin: 0 auto 28px;

    background: #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

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

    transition: .35s;

}

.team-card:hover .team-icon {

    transform: scale(1.04);

}

.team-icon img {

    width: 78px;

    height: 78px;

    object-fit: contain;

}

.team-card h3 {

    font-family: "Cormorant Garamond", serif;

    font-size: 26px;

    font-weight: 500;

    margin-bottom: 10px;

    color: #2F2F2F;

}

.team-card p {

    font-size: 14px;

    color: #666;

    line-height: 1.6;

    max-width: 220px;

    margin: auto;

}

/*====================================================
                    TEAM
====================================================*/

.team {

    padding: 80px 0 40px;

    background: #F8F5F0;

}

.team .section-header {

    margin-bottom: 70px;

}

.team-grid {

    display: grid;

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

    gap: 35px;

    align-items: start;

}

.team-card {

    text-align: center;

    transition: .35s ease;

}

.team-card:hover {

    transform: translateY(-8px);

}

.team-icon {

    width: 160px;

    height: 160px;

    margin: 0 auto 28px;

    background: #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

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

    transition: .35s;

}

.team-card:hover .team-icon {

    transform: scale(1.04);

}

.team-icon img {

    width: 95px;

    height: 95px;

    object-fit: contain;

}

.team-card h3 {

    font-family: "Cormorant Garamond", serif;

    font-size: 28px;

    font-weight: 500;

    margin-bottom: 10px;

    color: #2F2F2F;

}

.team-card p {

    font-size: 13px;

    color: #666;

    line-height: 1.6;

    max-width: 220px;

    margin: auto;

}

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

.contact {

    padding: 60px 0 100px;

}

.contact-wrapper {

    position: relative;

    background: #F6F3EF;

    border-radius: 32px;

    padding: 70px;

    display: grid;

    grid-template-columns: 1fr 520px;

    gap: 70px;

    align-items: center;

    overflow: hidden;

}

.contact-watermark {

    position: absolute;

    right: 35px;

    top: 30px;

    width: 80px;

    opacity: .15;

}

.contact-left h2 {

    font-family: "Cormorant Garamond", serif;

    font-size: 64px;

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -1px;

    color: #2F2F2F;

    margin-bottom: 28px;

    max-width: 420px;

}

.contact-left p {

    max-width: 380px;

    color: #666;

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 40px;

}

.contact-info {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.info-item {

    display: flex;

    align-items: center;

    gap: 15px;

}

.info-icon {

    width: 42px;

    height: 42px;

    background: #fff;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

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

    color: #184B32;

}

.contact-form-card {

    background: #fff;

    border-radius: 22px;

    padding: 45px;

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

}

.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

}

.form-group {

    margin-bottom: 22px;

}

.form-group label {

    display: block;

    font-size: 14px;

    font-weight: 600;

    color: #333;

    margin-bottom: 8px;

}

.form-group input,
.form-group textarea {

    width: 100%;

    padding: 15px 18px;

    border: none;

    border-radius: 12px;

    background: #F7F4F1;

    font-size: 15px;

    font-family: inherit;

    outline: none;

    box-sizing: border-box;

    transition: .3s;

}

.form-group textarea {

    resize: none;

    min-height: 140px;

}

.form-group input:focus,
.form-group textarea:focus {

    background: #fff;

    box-shadow: 0 0 0 2px rgba(24, 75, 50, .15);

}

.contact-form-card .btn {

    width: 100%;

    padding: 18px;

    border-radius: 50px;

    margin-top: 10px;

}

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

.site-footer {

    background: #173A2A;

    color: #fff;

    padding: 70px 0 30px;

}

.footer-top {

    display: flex;

    justify-content: space-between;

    gap: 80px;

    margin-bottom: 55px;

}

.footer-brand {

    max-width: 340px;

}

.footer-brand img {

    width: 170px;

    margin-bottom: 25px;

}

.footer-brand p {

    color: rgba(255, 255, 255, .72);

    line-height: 1.8;

}

.footer-links {

    display: flex;

    gap: 80px;

}

.footer-column {

    display: flex;

    flex-direction: column;

}

.footer-column h4 {

    font-family: "Cormorant Garamond", serif;

    font-size: 28px;

    margin-bottom: 20px;

    font-weight: 500;

}

.footer-column a {

    color: rgba(255, 255, 255, .72);

    margin-bottom: 12px;

    transition: .3s;

}

.footer-column a:hover {

    color: #BFE8C7;

}

.footer-bottom {

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

    padding-top: 22px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: rgba(255, 255, 255, .6);

    font-size: 14px;

}

/*=========================
    SUCCESS MESSAGE
=========================*/

.success-message {

    display: none;

    margin-top: 25px;

    padding: 22px;

    border-radius: 16px;

    background: #EEF8F1;

    border: 1px solid #C8E8D0;

    text-align: center;

    animation: fadeUp .4s ease;

}

.success-message i {

    font-size: 42px;

    color: #1D6B3C;

    margin-bottom: 12px;

}

.success-message h4 {

    font-family: "Cormorant Garamond", serif;

    font-size: 30px;

    color: #173A2A;

    margin-bottom: 8px;

}

.success-message p {

    color: #555;

    line-height: 1.6;

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

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

.success-card {

    display: none;

    text-align: center;

    padding: 55px 35px;

    animation: fadeSuccess .5s ease;

}

.success-icon {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    background: #EAF8EE;

    margin: auto;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 30px;

}

.success-icon i {

    font-size: 46px;

    color: #1E7A42;

}

.success-card h3 {

    font-family: "Cormorant Garamond", serif;

    font-size: 48px;

    margin-bottom: 18px;

    color: #173A2A;

}

.success-card p {

    color: #666;

    line-height: 1.8;

    margin-bottom: 35px;

}

@keyframes fadeSuccess {

    from {

        opacity: 0;

        transform: translateY(25px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}