/* =========================================================
   1. MASTER GLOBAL HEADING TYPOGRAPHY (CORMORANT GARAMOND)
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

h1, h2, h3, h4, h5, h6,
.hero-title,
.hero-main-title,
.hero-left-title,
.hero-heading,
.ch-title,
.ch-title-main,
.serif-heading,
.section-title,
.section-heading,
.section-heading-dark,
.section-heading-light,
.section-heading-hero,
.portfolio-heading-dark,
.portfolio-heading,
.dark-section-title,
.section-title-dark,
.dark-section-heading,
.gallery-title,
.project-title,
.card-title,
.scope-title,
.uniq-heading,
.heading-accent-light,
.heading-accent-dark,
.modal-title,
.service-title,
.cta-title,
.cta-heading,
.calc-heading,
.cta-container .serif-heading,
.cta-container h2,
.nav-proj-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
}

/* A. Main Hero Titles & Light Cover Headings */
.section-heading-hero,
.hero-title,
.hero-main-title,
.hero-left-title,
.ch-title-main,
.cinematic-hero h1,
.cta-banner h1,
.cta-banner h2,
.cta-container h1,
.cta-container h2,
.cta-container .serif-heading,
.cta-banner .serif-heading,
.cta-heading,
.scope-cta-banner-sec h2,
#ctaBannerSection h2,
.section-heading-light {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: clamp(36px, 4.2vw, 58px) !important;
    line-height: 1.05 !important;
    font-style: normal !important;
    color: #FFFFFF !important;
}

/* B. Dark Section Headings (25+ Years of Design Legacy) */
.section-heading-dark,
.scope-title,
.serif-heading,
.section-heading,
.service-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: clamp(36px, 4.2vw, 58px) !important;
    line-height: 1.06 !important;
    font-style: normal !important;
    color: #0D0D0C !important;
}

/* Portfolio Detail Specific Headings */
.portfolio-heading-dark {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 2.5vw, 38px) !important;
    line-height: 1.15 !important;
    font-style: normal !important;
    color: #0D0D0C !important;
}

/* Last Word Accent Colors */
.heading-accent-dark,
.accent-text,
.uniq-accent {
    color: #7B7368 !important;
    font-style: italic !important;
    font-weight: 400 !important;
}

.heading-accent-light,
.cta-accent,
.calc-accent {
    color: #C9C2B8 !important;
    font-style: italic !important;
    font-weight: 400 !important;
}

/* 2. LIGHT CREME BUTTON THEME (USED ONLY ON COVER IMAGE BACKGROUNDS) */
.cinematic-hero .ch-button,
.ch-content .ch-button,
.hero-content .ch-button,
.cta-banner .ch-button,
.cta-banner .cta-btn,
.cta-banner .scope-cta-btn,
.cta-banner a,
.cta-banner a.cta-btn,
.cta-container .cta-btn,
.cta-container a.cta-btn,
.section-cta .ch-button,
.section-cta a,
.section-cta .cta-btn,
#ctaSection .ch-button,
#ctaSection a,
.scope-cta-banner-sec .cta-btn,
#ctaBannerSection .cta-btn,
.cta-btn-wrap .cta-btn,
#openConsultationBtn,
a#openConsultationBtn,
.calc-btn,
a.calc-btn,
.btn-light {
    background: #DDD8D0 !important;
    color: #0D0D0C !important;
    border: 1px solid #C9C2B8 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;
}

#openConsultationBtn span,
a#openConsultationBtn span,
.scope-cta-banner-sec .cta-btn span,
#ctaBannerSection .cta-btn span,
.cta-btn-wrap .cta-btn span,
.cta-banner .cta-btn span,
.calc-btn span,
a.calc-btn span,
.btn-light span {
    color: #0D0D0C !important;
}

.cinematic-hero .ch-button .ch-btn-arrow,
.ch-content .ch-button .ch-btn-arrow,
.cta-banner .ch-button .ch-btn-arrow,
.cta-banner .cta-btn .ch-btn-arrow,
.cta-banner a .ch-btn-arrow,
.cta-container .cta-btn .ch-btn-arrow,
.section-cta .ch-button .ch-btn-arrow,
.section-cta a .ch-btn-arrow,
#ctaSection .ch-button .ch-btn-arrow,
.scope-cta-banner-sec .cta-btn .ch-btn-arrow,
#ctaBannerSection .cta-btn .ch-btn-arrow,
.cta-btn-wrap .cta-btn .ch-btn-arrow,
#openConsultationBtn .ch-btn-arrow,
a#openConsultationBtn .ch-btn-arrow,
.calc-btn .ch-btn-arrow,
.calc-btn .btn-arrow,
.btn-light .ch-btn-arrow,
.btn-light .cta-arrow {
    color: #0D0D0C !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    transform: none !important;
}

/* Hover state for Light Button Theme */
.cinematic-hero .ch-button:hover,
.ch-content .ch-button:hover,
.hero-content .ch-button:hover,
.cta-banner .ch-button:hover,
.cta-banner .cta-btn:hover,
.cta-banner .scope-cta-btn:hover,
.cta-banner a:hover,
.cta-container .cta-btn:hover,
.cta-container a.cta-btn:hover,
.section-cta .ch-button:hover,
.section-cta a:hover,
.section-cta .cta-btn:hover,
#ctaSection .ch-button:hover,
#ctaSection a:hover,
.scope-cta-banner-sec .cta-btn:hover,
#ctaBannerSection .cta-btn:hover,
.cta-btn-wrap .cta-btn:hover,
#openConsultationBtn:hover,
a#openConsultationBtn:hover,
.calc-btn:hover,
a.calc-btn:hover,
.btn-light:hover {
    background: #E5E0D8 !important;
    color: #0D0D0C !important;
    border-color: #BDB5AA !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

.cinematic-hero .ch-button:hover .ch-btn-arrow,
.ch-content .ch-button:hover .ch-btn-arrow,
.cta-banner .ch-button:hover .ch-btn-arrow,
.cta-banner .cta-btn:hover .ch-btn-arrow,
.cta-banner a:hover .ch-btn-arrow,
.cta-container .cta-btn:hover .ch-btn-arrow,
.section-cta .ch-button:hover .ch-btn-arrow,
.section-cta a:hover .ch-btn-arrow,
#ctaSection .ch-button:hover .ch-btn-arrow,
.scope-cta-banner-sec .cta-btn:hover .ch-btn-arrow,
#ctaBannerSection .cta-btn:hover .ch-btn-arrow,
.cta-btn-wrap .cta-btn:hover .ch-btn-arrow,
#openConsultationBtn:hover .ch-btn-arrow,
a#openConsultationBtn:hover .ch-btn-arrow,
.calc-btn:hover .ch-btn-arrow,
.calc-btn:hover .btn-arrow,
.btn-light:hover .ch-btn-arrow,
.btn-light:hover .cta-arrow {
    color: #0D0D0C !important;
    transform: none !important;
}

/* =========================================================
   COMPLETE MASTER BUTTON SYSTEM (AUDITED & STANDARDIZED)
   1. Dark Charcoal Button Theme (Default for entire website)
   2. Light Creme Button Theme (Used ONLY on cover image backgrounds)
   3. Simple Inline Arrow (Stationary, No circle wrapper)
========================================================= */

/* 1. DARK CHARCOAL BUTTON THEME (DEFAULT FOR ALL SECTIONS) */
.ch-button,
.scope-cta-btn,
.scope-about-sec a.scope-cta-btn,
.calc-btn,
.cta-btn,
.btn-luxury,
.btn-luxury-outline,
.consultation-submit-btn,
.service-primary-btn,
.fp-view-all-btn,
.service-back-btn,
.action-btn,
.action-btn.primary,
.action-btn.secondary,
.inquire-btn,
.see-more-btn,
.next-step,
.prev-step,
button.ch-button,
input[type="submit"].ch-button,
a.ch-button,
a.scope-cta-btn,
.btn-dark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 14px 28px !important;
    border-radius: 8px !important;
    background: #0D0D0C !important;
    color: #FFFFFF !important;
    border: 1px solid #0D0D0C !important;
    text-decoration: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    outline: none !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
}

/* Arrow inside Dark Button Theme */
.ch-button .ch-btn-arrow,
.scope-cta-btn .ch-btn-arrow,
.scope-cta-btn .arrow,
.calc-btn .btn-arrow,
.cta-btn .cta-arrow,
.btn-luxury .arrow,
.action-btn .btn-arrow,
.next-step .btn-arrow,
.prev-step .btn-arrow,
.service-back-btn .ch-btn-arrow,
.fp-view-all-btn .ch-btn-arrow {
    display: inline-block !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    color: #FFFFFF !important;
    transition: transform 0.35s ease !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
}

/* Hover state for Dark Button Theme */
.ch-button:hover,
.scope-cta-btn:hover,
.scope-about-sec a.scope-cta-btn:hover,
.calc-btn:hover,
.cta-btn:hover,
.btn-luxury:hover,
.btn-luxury-outline:hover,
.consultation-submit-btn:hover,
.service-primary-btn:hover,
.fp-view-all-btn:hover,
.service-back-btn:hover,
.action-btn:hover,
.action-btn.primary:hover,
.action-btn.secondary:hover,
.inquire-btn:hover,
.see-more-btn:hover,
.next-step:hover,
.prev-step:hover,
button.ch-button:hover,
input[type="submit"].ch-button:hover,
a.ch-button:hover,
a.scope-cta-btn:hover,
.btn-dark:hover {
    background: #1C1A18 !important;
    color: #FFFFFF !important;
    border-color: #1C1A18 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22) !important;
}

/* Arrow stays stationary on hover */
.ch-button:hover .ch-btn-arrow,
.scope-cta-btn:hover .arrow,
.calc-btn:hover .btn-arrow,
.cta-btn:hover .cta-arrow,
.action-btn:hover .btn-arrow,
.next-step:hover .btn-arrow,
.prev-step:hover .btn-arrow {
    transform: none !important;
    color: #FFFFFF !important;
}

/* 2. LIGHT CREME BUTTON THEME (USED ONLY ON COVER IMAGE BACKGROUNDS) */
.cinematic-hero .ch-button,
.ch-content .ch-button,
.hero-content .ch-button,
.cta-banner .ch-button,
.cta-banner .cta-btn,
.cta-banner .scope-cta-btn,
.cta-banner a,
.cta-banner a.cta-btn,
.cta-container .cta-btn,
.cta-container a.cta-btn,
.section-cta .ch-button,
.section-cta a,
.section-cta .cta-btn,
#ctaSection .ch-button,
#ctaSection a,
.calc-btn,
a.calc-btn,
.btn-light {
    background: #DDD8D0 !important;
    color: #0D0D0C !important;
    border: 1px solid #C9C2B8 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;
}

.cinematic-hero .ch-button .ch-btn-arrow,
.ch-content .ch-button .ch-btn-arrow,
.cta-banner .ch-button .ch-btn-arrow,
.cta-banner .cta-btn .ch-btn-arrow,
.cta-banner a .ch-btn-arrow,
.cta-container .cta-btn .ch-btn-arrow,
.section-cta .ch-button .ch-btn-arrow,
.section-cta a .ch-btn-arrow,
#ctaSection .ch-button .ch-btn-arrow {
    color: #0D0D0C !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    transform: none !important;
}

/* Hover state for Light Button Theme */
.cinematic-hero .ch-button:hover,
.ch-content .ch-button:hover,
.hero-content .ch-button:hover,
.cta-banner .ch-button:hover,
.cta-banner .cta-btn:hover,
.cta-banner .scope-cta-btn:hover,
.cta-banner a:hover,
.cta-container .cta-btn:hover,
.cta-container a.cta-btn:hover,
.section-cta .ch-button:hover,
.section-cta a:hover,
.section-cta .cta-btn:hover,
#ctaSection .ch-button:hover,
#ctaSection a:hover,
.calc-btn:hover,
a.calc-btn:hover,
.btn-light:hover {
    background: #E5E0D8 !important;
    color: #0D0D0C !important;
    border-color: #BDB5AA !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

.cinematic-hero .ch-button:hover .ch-btn-arrow,
.ch-content .ch-button:hover .ch-btn-arrow,
.cta-banner .ch-button:hover .ch-btn-arrow,
.cta-banner .cta-btn:hover .ch-btn-arrow,
.cta-banner a:hover .ch-btn-arrow,
.cta-container .cta-btn:hover .ch-btn-arrow,
.section-cta .ch-button:hover .ch-btn-arrow,
.section-cta a:hover .ch-btn-arrow,
#ctaSection .ch-button:hover .ch-btn-arrow {
    color: #0D0D0C !important;
    transform: none !important;
}


/* =========================================================
   GLOBAL WEBSITE LIGHT SECTION COLOR (#F5F3EE)
========================================================= */
body {
    background-color: #F5F3EE !important;
}

:root {
    --bg-main: #F5F3EE !important;
    --bg-card: #F5F3EE !important;
    --bg-creme: #F5F3EE !important;
    --bg-light: #F5F3EE !important;
    --bg-primary: #F5F3EE !important;
}

section:not(.scope-cta-banner-sec):not(#ctaBannerSection):not(.section-cta):not(#ctaSection):not(.cinematic-hero):not(.hero-cinematic):not(.dark-section) {
    background-color: #F5F3EE;
}


/* =========================================================
   MASTER STANDARDIZED GLOBAL FOOTER COMPONENT
========================================================= */
html {
    height: auto !important;
}

body {
    min-height: 100vh;
    background-color: #F5F3EE !important;
}

footer.site-footer,
.site-footer {
    width: 100% !important;
    background: #F5F3EE !important;
    background-color: #F5F3EE !important;
    border-top: 1px solid rgba(13, 13, 12, 0.08) !important;
    padding: 24px 0 !important;
    box-sizing: border-box !important;
    clear: both !important;
    position: relative !important;
    z-index: 100 !important;
}

.site-footer .footer-container {
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    box-sizing: border-box !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #0D0D0C !important;
}

.site-footer .footer-container > div:first-child {
    color: #0D0D0C !important;
    opacity: 0.85 !important;
    white-space: nowrap !important;
}

.site-footer .footer-divider,
.footer-divider,
.footer-divider-line {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 20px !important;
    max-width: none !important;
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    background: rgba(13, 13, 12, 0.22) !important;
    border: none !important;
    margin: 0 30px !important;
    display: block !important;
    align-self: center !important;
}

.site-footer .footer-socials {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
}

.site-footer .footer-socials a {
    color: #0D0D0C !important;
    text-decoration: none !important;
    opacity: 0.8 !important;
    transition: opacity 0.3s ease, color 0.3s ease !important;
    white-space: nowrap !important;
}

.site-footer .footer-socials a:hover {
    opacity: 1 !important;
    color: #0D0D0C !important;
}

.site-footer .back-to-top {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #0D0D0C !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.site-footer .back-to-top span {
    color: #0D0D0C !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
}

.site-footer .top-arrow-circle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid #0D0D0C !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: #0D0D0C !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.site-footer .back-to-top:hover .top-arrow-circle {
    background: #0D0D0C !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

@media (max-width: 768px) {
    .site-footer .footer-container {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
        padding: 0 20px !important;
    }
    .site-footer .footer-divider,
.footer-divider,
.footer-divider-line {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 20px !important;
    max-width: none !important;
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    background: rgba(13, 13, 12, 0.22) !important;
    border: none !important;
    margin: 0 30px !important;
    display: block !important;
    align-self: center !important;
}
}

/* MASTER HEADING ACCENT ITALIC OVERRIDE */
.heading-accent-dark,
.heading-accent-light,
.heading-accent,
.accent-text,
.uniq-accent,
.calc-accent,
.cta-accent,
.services-accent {
    font-style: italic !important;
}

/* MASTER HEADING ACCENT ITALIC OVERRIDE (ONLY ACCENT SPANS) */
.heading-accent-dark,
.heading-accent-light,
.heading-accent,
.accent-text,
.uniq-accent,
.calc-accent,
.cta-accent,
.services-accent {
    font-style: italic !important;
}

/* BASE HEADINGS UPRIGHT / NORMAL */
h1:not(.heading-accent-dark):not(.heading-accent-light),
h2:not(.heading-accent-dark):not(.heading-accent-light),
h3:not(.heading-accent-dark):not(.heading-accent-light),
.section-heading-dark,
.section-heading-light,
.section-heading-hero,
.scope-title,
.serif-heading,
.section-heading,
.service-title,
.portfolio-heading-dark {
    font-style: normal !important;
}

/* MOBILE NAV DRAWER BACKDROP & OVERLAY FIXES */
@media (max-width: 991px) {
    .header-nav.nav-open::before {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: -100vw !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100svh !important;
        background: rgba(13, 13, 12, 0.45) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        pointer-events: auto !important;
        z-index: -1 !important;
    }
}