/* ==========================================================================
   INDEX (HOME) PAGE WATERCOLOR COLOR MAPPINGS
   ========================================================================== */

:root {
  --c-ivory: #F7F6F2;
  --c-mint: #EEF2E7;
  --c-sage-light: #DDE8D3;
  --c-sand: #E3D6B8;
  --c-stone: #CBBFAE;
  --c-sage-dark: #92A692;
  --c-green-grey: #5E6F61;
  --c-premium-gold: #C8A14A;
  --c-rich-gold: #B8860B;
}

/* Fix browser sub-pixel rounding gaps between gradient sections */
#promise, #counters, #founder-quote, #verticals, #timeline, #contact {
    margin-top: -2px !important;
    position: relative;
    z-index: 2;
}



/* --------------------------------------
   2. HERO SECTION
-------------------------------------- */
.index-hero-heading {
    color: var(--c-ivory) !important;
    font-family: var(--font-display);
    font-size: clamp(3.125rem, 9.375vw, 9.375rem); /* Increased by another 25% */
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    white-space: nowrap; /* Force one line */
}
.index-hero-subheading,
.index-hero-desc {
    color: var(--c-ivory) !important;
}

/* NEW: Hero golden gradient overlay */
.hero-golden-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gold at top, fading into solid Ivory at bottom to blend with next section */
    background: linear-gradient(180deg, rgba(200, 161, 74, 0.45) 0%, rgba(200, 161, 74, 0.1) 60%, var(--c-ivory) 100%);
    z-index: 1; /* Above video, below content */
    pointer-events: none;
}
/* Ensure hero content sits above the new overlay */
.index-hero .container {
    position: relative;
    z-index: 2;
}

/* --------------------------------------
   3. HERITAGE (#about-home)
-------------------------------------- */
#about-home {
    /* Blend: Start EXACTLY at Ivory so it seamlessly continues from the hero overlay */
    background: linear-gradient(180deg, var(--c-ivory) 0%, var(--c-mint) 100%) !important;
    margin-top: 0 !important;
    padding-top: 6rem !important;
    z-index: 11 !important;
    position: relative;
}
/* --------------------------------------
   TEXT CONTRAST ADAPTATIONS
-------------------------------------- */
:root {
    --c-text-dark: #1A221C; /* Very dark rich sage for light backgrounds */
    --c-text-light: #F7F6F2; /* Ivory for dark backgrounds */
}

/* Light Background Sections (Ivory, Mint, Sand, Stone, Sage-Dark) */
#about-home .section-eyebrow, #promise .section-eyebrow, #founder-quote .section-eyebrow, #verticals .section-eyebrow, #counters .section-eyebrow {
    color: var(--c-text-dark) !important;
}
#about-home .section-heading, #promise .section-heading, #founder-quote .section-heading, #verticals .section-heading, #counters .section-heading {
    color: var(--c-text-dark) !important;
}
#verticals .vstrip-name {
    color: #FFFFFF !important;
    font-family: var(--font-display) !important;
}
#hero-heading {
    color: var(--c-premium-gold) !important;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6) !important;
    transform: scale(1.01);
    font-size: clamp(3rem, 9vw, 9rem) !important; /* Set to exactly 9rem (max) as requested */
}
#about-home .section-subheading, #promise .section-subheading, #founder-quote .section-subheading, #verticals .section-subheading, #counters .section-subheading, #verticals .vstrip-tagline {
    color: rgba(26, 34, 28, 0.8) !important; 
}
#about-home .lead-text, #promise .lead-text, #founder-quote .lead-text, #verticals .lead-text, #counters .lead-text,
#about-home p, #promise p, #founder-quote p, #verticals p, #counters p, #verticals .vstrip-tag {
    color: var(--c-text-dark) !important;
}
#verticals .vstrip-desc {
    color: var(--c-text-dark) !important; /* Rich Dark Ink that goes perfectly with Ivory BG */
    font-family: var(--font-sans) !important; /* Updated to Inter font */
    font-size: 1.15rem !important; /* Increased globally below, but explicitly enforced here */
    font-weight: 400 !important;
    opacity: 0.85;
}
#counters .counter-number, #verticals .vstrip-number {
    color: var(--c-text-dark) !important;
}
#founder-quote .founder-name, #founder-quote .founder-title {
    color: var(--c-text-dark) !important;
}
#verticals .vstrip-btn { 
    color: var(--c-text-dark) !important; 
    border: 1px solid #C8A14A !important; 
}
#verticals .vstrip-btn:hover {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

/* Card Hover: White Border & Shift Cuts to Opposite Corners */
#verticals .vstrip-item {
    transition: border-color 0.4s ease, clip-path 0.4s ease !important;
}
#verticals .vstrip-item.odd-row:hover {
    border-color: #FFFFFF !important;
    clip-path: polygon(0 0, calc(100% - 6rem) 0, 100% 6rem, 100% 100%, 6rem 100%, 0 calc(100% - 6rem)) !important;
}
#verticals .vstrip-item.even-row:hover {
    border-color: #FFFFFF !important;
    clip-path: polygon(6rem 0, 100% 0, 100% calc(100% - 6rem), calc(100% - 6rem) 100%, 0 100%, 0 6rem) !important;
}

/* Animate inner panes to shift cuts */
#verticals .vstrip-pane {
    transition: clip-path 0.4s ease !important;
}
#verticals .vstrip-item.odd-row:hover .image-pane {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 6rem 100%, 0 calc(100% - 6rem)) !important;
}
#verticals .vstrip-item.odd-row:hover .info-pane {
    clip-path: polygon(0 0, calc(100% - 6rem) 0, 100% 6rem, 100% 100%, 0 100%) !important;
}
#verticals .vstrip-item.even-row:hover .image-pane {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6rem), calc(100% - 6rem) 100%, 0 100%) !important;
}
#verticals .vstrip-item.even-row:hover .info-pane {
    clip-path: polygon(6rem 0, 100% 0, 100% 100%, 0 100%, 0 6rem) !important;
}

/* Dark Background Sections (Green-Grey, Black) */
#timeline .section-eyebrow, #contact .section-eyebrow { color: #FFFFFF !important; }
#timeline .section-heading, #contact .section-heading { color: var(--c-text-light) !important; }
#timeline .section-subheading, #contact .contact-subheading { color: rgba(247, 246, 242, 0.8) !important; }
#timeline .rt-title, #contact .contact-info-block h4 { color: var(--c-text-light) !important; }
#timeline .rt-desc, #contact p, #contact a { color: rgba(247, 246, 242, 0.8) !important; }
#timeline .rt-massive-year { color: var(--c-premium-gold) !important; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4) !important; }
#timeline .timeline-line { background: rgba(247, 246, 242, 0.2) !important; }
#timeline .timeline-dot { background: var(--c-premium-gold) !important; border-color: var(--c-green-grey) !important; }



#about-home .about-watermark { 
    color: rgba(94, 111, 97, 0.05) !important; 
    z-index: 1 !important; 
    position: absolute; 
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, black 15%, black 85%, transparent 100%);
}

/* Remove rigid frames from Heritage images */
#about-home .about-img-1-container, 
#about-home .about-img-2-container {
    background: transparent !important;
    padding: 1.25rem !important; /* Space between the image and the border */
    border: 2px solid #C8A14A !important; /* The 2px outer gold border */
    border-radius: 4px !important; /* Slight rounding for a premium frame look */
    clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%) !important;
    box-shadow: none !important;
}
#about-home .about-img-inner {
    clip-path: none !important;
    background: transparent !important;
}

/* Specific smooth gradient blends for the Heritage images */
#about-home .about-img-1 {
    /* Top image smooth fade on the right side */
    clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%) !important;
    -webkit-mask-image: linear-gradient(to right, black 60%, transparent 100%);
    mask-image: linear-gradient(to right, black 60%, transparent 100%);
    background: transparent !important;
}
#about-home .about-img-2 {
    /* Bottom image smooth fade on the left side */
    clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%) !important;
    -webkit-mask-image: linear-gradient(to left, black 60%, transparent 100%);
    mask-image: linear-gradient(to left, black 60%, transparent 100%);
    background: transparent !important;
}

/* --------------------------------------
   4. PROMISE (#promise)
-------------------------------------- */
#promise {
    /* Blend: Mint to Sage Light */
    background: linear-gradient(180deg, var(--c-mint) 0%, var(--c-sage-light) 100%) !important;
}
#promise .section-eyebrow { color: var(--c-sage-dark) !important; }
#promise .section-heading { color: var(--c-green-grey) !important; }
#promise .section-subheading { color: var(--c-green-grey) !important; }
#promise .monolith-card { 
    background: transparent !important; 
    border-color: rgba(94, 111, 97, 0.1) !important;
    box-shadow: 0 10px 30px rgba(94, 111, 97, 0.05) !important;
}
#promise .monolith-bg {
    background: var(--c-ivory) !important;
}
#promise .monolith-card h3 { color: var(--c-green-grey) !important; }
#promise .monolith-card p { color: var(--c-green-grey) !important; }

/* --------------------------------------
   5. COUNTERS (#counters)
-------------------------------------- */
#counters {
    /* Blend: Sage Light to Sand */
    background: linear-gradient(180deg, var(--c-sage-light) 0%, var(--c-sand) 100%) !important;
}
#counters .counter-number { color: var(--c-green-grey) !important; }
#counters .counter-label { color: var(--c-green-grey) !important; }

/* --------------------------------------
   6. FOUNDER QUOTE (#founder-quote)
-------------------------------------- */
#founder-quote {
    /* Blend: Sand to Stone */
    background: linear-gradient(180deg, var(--c-sand) 0%, var(--c-stone) 100%) !important;
}
#founder-quote .quote-text { color: var(--c-green-grey) !important; }
/* Color replaced for founder name and title */
#founder-quote .sg-mark { color: rgba(94, 111, 97, 0.08) !important; }
#founder-quote .founder-watermark { color: rgba(94, 111, 97, 0.03) !important; z-index: 1 !important; position: absolute; }

/* Remove rigid frame from Founder photo but KEEP clip-path */
#founder-quote .founder-chamfer-frame {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}
#founder-quote .founder-chamfer-inner {
    background: transparent !important;
}
/* Fully visible Founder photo with original clip-path */
#founder-quote .arch-gradient-mask,
#founder-quote .founder-photo-label {
    display: none !important;
}

/* --------------------------------------
   7. VERTICALS (#verticals)
-------------------------------------- */
#verticals {
    /* Blend: Stone to Sage Dark */
    background: linear-gradient(180deg, var(--c-stone) 0%, var(--c-sage-dark) 100%) !important;
}
/* Default vertical card design inherits from combined.css */
/* --------------------------------------
   8. TIMELINE (#timeline)
-------------------------------------- */
#timeline {
    /* Blend: Sage Dark to Green Grey */
    background: linear-gradient(180deg, var(--c-sage-dark) 0%, var(--c-green-grey) 100%) !important;
}

/* --------------------------------------
   9. CONTACT (#contact)
-------------------------------------- */
#contact {
    /* Final palette color for Contact and Footer */
    background: var(--c-green-grey) !important;
}
.new-footer {
    background: var(--c-green-grey) !important;
}
#contact .contact-form input, #contact .contact-form textarea, #contact .contact-form select {
    background-color: rgba(247, 246, 242, 0.05) !important;
    color: var(--c-text-light) !important;
    border: 1px solid rgba(247, 246, 242, 0.2) !important;
}
#contact .contact-form input:focus, #contact .contact-form textarea:focus, #contact .contact-form select:focus {
    border-color: var(--c-premium-gold) !important;
    box-shadow: 0 0 0 2px rgba(200, 161, 74, 0.2) !important;
}
#contact .contact-watermark { color: rgba(247, 246, 242, 0.03) !important; z-index: 1 !important; position: absolute; }

/* --------------------------------------
   CONTACT FORM STYLING
-------------------------------------- */
.contact-form-container {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid var(--c-premium-gold) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}
.contact-detail-label {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.1em !important;
}
.contact-detail-list li span:not(.contact-detail-label),
.contact-detail-list li a {
    font-size: 1.15rem !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
.form-group label { color: var(--c-ivory) !important; }
.contact-form-container input, .contact-form-container select {
    background-color: transparent !important;
    color: var(--c-ivory) !important;
    border: 1px solid rgba(247, 246, 242, 0.3) !important;
    border-radius: 50px !important;
}
.contact-form-container textarea {
    background: transparent !important;
    color: var(--c-ivory) !important;
    border: 1px solid rgba(247, 246, 242, 0.3) !important;
    border-radius: 20px !important;
}
.contact-form-container input:focus, .contact-form-container textarea:focus, .contact-form-container select:focus {
    border-color: var(--c-sand) !important;
    outline: none !important;
    box-shadow: 0 0 10px rgba(227, 214, 184, 0.2) !important;
}

/* --------------------------------------
   GLOBAL BUTTONS & OVERLAYS
-------------------------------------- */
.editorial-btn, .contact-btn, button[type="submit"] {
    background: var(--c-green-grey) !important;
    color: var(--c-ivory) !important;
    border: 1px solid var(--c-ivory) !important;
}
.editorial-btn:hover, .contact-btn:hover, button[type="submit"]:hover {
    background: var(--c-ivory) !important;
    color: var(--c-green-grey) !important;
}
/* Make the submit button gold on the dark contact section */
#contact button[type="submit"] {
    background: var(--c-premium-gold) !important;
    color: var(--c-ivory) !important;
    border: none !important;
}
#contact button[type="submit"]:hover {
    background: var(--c-ivory) !important;
    color: var(--c-green-grey) !important;
}

.fab-btn {
    background: var(--c-premium-gold) !important;
}
.fab-btn svg { fill: var(--c-ivory) !important; }
/* Hover effect for FAB */
.fab-btn:hover { background: var(--c-rich-gold) !important; }
.fab-btn:hover svg { fill: var(--c-ivory) !important; }

/* Footer */
.new-footer {
    /* Smoothly reveal the image from a SOLID Green Grey at the top to remove the hard edge completely */
    background: 
      linear-gradient(to bottom, var(--c-green-grey) 0%, var(--c-green-grey) 5%, rgba(94, 111, 97, 0.4) 40%, rgba(94, 111, 97, 0.9) 100%),
      url('../assets/index_page_footer.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-blend-mode: normal !important;
    margin-top: -1px; /* Remove harsh line */
}

.footer-content { position: relative; z-index: 2; }
/* --------------------------------------
   MOBILE CENTERING & RESPONSIVENESS
-------------------------------------- */
@media (max-width: 900px) {
    #about-home, #promise, #counters, #founder-quote, #verticals, #timeline, #contact {
        text-align: center !important;
    }
    #about-home .about-image-wrap,
    #about-home .about-text {
        margin: 0 auto !important;
    }
    .timeline-item {
        justify-content: center !important;
        text-align: center !important;
    }
    .contact-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    /* Force centering on vertical strips and monolith cards */
    .vstrip-content, .monolith-card, .counter-item {
        align-items: center !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY ENHANCEMENTS
   ========================================================================== */
.section-eyebrow {
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.15em;
    font-style: normal !important;
}
.vstrip-tagline {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 1.1rem !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

p, .lead-text {
    font-size: 1.15rem;
    font-weight: 400;
}
.footer p, .footer-bottom p {
    font-size: 0.9rem; /* Keep footer text small */
}


/* Global Unified Footer Typography & Social Icons */
.new-footer h2, .new-footer h3, .new-footer h4 { color: #ffffff !important; }
.new-footer p, .new-footer a, .new-footer li { color: #ffffff !important; font-size: 1.05rem !important; }
.new-footer a:hover { color: var(--c-golden, #C8A14A) !important; }
.new-footer p.sub-credit { font-size: 0.95rem !important; opacity: 0.8; }
.new-footer .social-icons a { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.4) !important; background: transparent !important; }
.new-footer .social-icons a.social-instagram:hover { color: #ffffff !important; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; border-color: transparent !important; }
.new-footer .social-icons a.social-facebook:hover { color: #ffffff !important; background: #1877F2 !important; border-color: #1877F2 !important; }
.new-footer .social-icons a.social-twitter:hover { color: #ffffff !important; background: #000000 !important; border-color: #000000 !important; }
.new-footer .social-icons a.social-linkedin:hover { color: #ffffff !important; background: #0A66C2 !important; border-color: #0A66C2 !important; }
.new-footer .social-icons a.social-youtube:hover { color: #ffffff !important; background: #FF0000 !important; border-color: #FF0000 !important; }
.new-footer .social-icons a.social-whatsapp:hover { color: #ffffff !important; background: #25D366 !important; border-color: #25D366 !important; }
.new-footer .social-icons a.social-gmail:hover { color: #ffffff !important; background: #D44638 !important; border-color: #D44638 !important; }




/* Founder Text Styles (21% larger, bold, gold, soft shadow) */
#founder-quote .founder-name {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    color: var(--c-green-grey) !important;
    text-shadow: none !important;
}

#founder-quote .founder-title {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: var(--c-green-grey) !important;
    text-shadow: none !important;
}



/* Placeholder styles for dark background */
.contact-form-container input::placeholder, 
.contact-form-container textarea::placeholder, 
.contact-form-container select.placeholder-active {
    color: rgba(247, 246, 242, 0.6) !important; /* ivory with opacity */
    font-style: italic !important;
}

.contact-form-container select { background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23E3D6B8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>') !important; }

/* Cursor Gold Override */
#cursor-dot {
    background-color: var(--gold) !important;
    mix-blend-mode: normal !important;
}
#cursor-ring {
    border-color: var(--gold) !important;
    background-color: rgba(201, 150, 101, 0.1) !important; /* light gold translucent */
    mix-blend-mode: normal !important;
}
body.cursor-hover #cursor-dot {
    background-color: transparent !important;
}
body.cursor-hover #cursor-ring {
    background-color: rgba(201, 150, 101, 0.2) !important;
    border-color: var(--gold) !important;
}

/* Animated Cursor Colors */
@keyframes cursorDotColorCycle {
    0% { background-color: var(--gold); }
    33% { background-color: var(--champagne); }
    66% { background-color: var(--gold-deep); }
    100% { background-color: var(--gold); }
}

@keyframes cursorRingColorCycle {
    0% { border-color: var(--gold); background-color: rgba(201, 150, 101, 0.1); }
    33% { border-color: var(--champagne); background-color: rgba(226, 179, 133, 0.1); }
    66% { border-color: var(--gold-deep); background-color: rgba(163, 115, 69, 0.1); }
    100% { border-color: var(--gold); background-color: rgba(201, 150, 101, 0.1); }
}

#cursor-dot {
    background-color: var(--gold) !important;
    animation: cursorDotColorCycle 4s infinite linear !important;
    mix-blend-mode: normal !important;
}

#cursor-ring {
    border-color: var(--gold) !important;
    background-color: rgba(201, 150, 101, 0.1) !important;
    animation: cursorRingColorCycle 4s infinite linear !important;
    mix-blend-mode: normal !important;
}

body.cursor-hover #cursor-dot {
    background-color: transparent !important;
    animation: none !important;
}

body.cursor-hover #cursor-ring {
    background-color: rgba(201, 150, 101, 0.2) !important;
    border-color: var(--gold) !important;
    animation: cursorRingColorCycle 4s infinite linear !important;
}