/*
Theme Name: Ashutosh Wealth
Theme URI: https://example.com/
Author: Your Name / Agency
Author URI: https://example.com/
Description: A bespoke, secure one-page theme for wealth management / financial advisory sites, converted from a custom HTML/CSS/JS build. Includes Customizer-based image replacement for every front-page photo and a Forminator-powered consultation form. Requires the free Forminator plugin for the contact form.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ashutosh-wealth
*/

/* =========================================================================
   Everything below this line is the original site's stylesheet, unmodified
   (now including Forminator form styling overrides).
   ========================================================================= */

/* ==========================================================================
   1. CSS Variables
   ========================================================================== */
:root {
    /* Colors */
    --color-bg-dark: #191919;
    --color-bg-light: #e4e2db; 
    --color-bg-cream: #f6f5f0; 
    --color-text-dark: #333333;
    --color-text-light: #f5f5f5; 
    --color-text-muted-dark: #8c8c8c;
    --color-text-muted-light: #5a5a5a;
    --color-text-gold: #a89370;
    --color-accent-gold: #907653;
    --color-accent-gold-hover: #7a6344;
    --color-border-light: rgba(0, 0, 0, 0.12);
    --color-badge-bg: #f9f8f4;
    --color-badge-text: #2a2a2a;
    
    /* Typography */
    --font-serif: 'Cinzel', serif; 
    --font-serif-italic: 'Playfair Display', 'Cinzel', serif;
    --font-sans: 'Inter', sans-serif;
    
    /* Fluid Typography via clamp() */
    --fs-logo-title: clamp(1.25rem, 1.5vw + 0.75rem, 1.625rem);
    --fs-logo-tagline: clamp(0.55rem, 0.5vw + 0.4rem, 0.65rem);
    --fs-nav-link: clamp(0.875rem, 1vw + 0.5rem, 0.9375rem);
    --fs-button: clamp(0.875rem, 1vw + 0.5rem, 0.9375rem);
    
    --fs-hero-eyebrow: clamp(0.65rem, 1vw + 0.4rem, 0.75rem);
    --fs-hero-title: clamp(2.25rem, 4.5vw + 1rem, 4.25rem);
    --fs-hero-p: clamp(0.9375rem, 1.2vw + 0.5rem, 1.125rem);
    --fs-hero-meta: clamp(0.55rem, 0.8vw + 0.4rem, 0.65rem);

    --fs-credential-title: clamp(1.25rem, 1.5vw + 0.875rem, 1.625rem);
    --fs-credential-desc: clamp(0.55rem, 0.5vw + 0.45rem, 0.65rem);

    --fs-challenge-eyebrow: clamp(0.65rem, 1vw + 0.4rem, 0.75rem);
    --fs-challenge-h2: clamp(2.25rem, 4vw + 1rem, 3.5rem);
    --fs-challenge-h3: clamp(1.125rem, 1.5vw + 0.75rem, 1.25rem);
    --fs-challenge-p: clamp(0.9375rem, 1.2vw + 0.5rem, 1.0625rem);
    --fs-challenge-quote: clamp(1.25rem, 2vw + 0.875rem, 1.5rem);

    /* Spacing & Transitions */
    --header-height: clamp(70px, 6vw + 50px, 90px);
    --container-padding: clamp(1.25rem, 4vw, 4rem);
    --trans-default: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. Reset & Base
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Buttons */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.875rem 1.5rem;
    font-size: var(--fs-button);
    font-weight: 500;
    border-radius: 4px;
    transition: transform 0.2s ease, background-color var(--trans-default);
    cursor: pointer;
    text-align: center;
}
.btn:active { transform: scale(0.98); }
.btn--primary {
    background-color: var(--color-accent-gold);
    color: #ffffff !important;
}
.btn--primary:hover { background-color: var(--color-accent-gold-hover); }
.btn--outline {
    background-color: transparent;
    color: var(--color-text-light);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.btn--outline:hover {
    border-color: var(--color-text-light);
    background-color: rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   3. Header Section
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    height: var(--header-height);
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
    transition: all var(--trans-default);
}
.site-header__container {
    max-width: 1920px;
    margin: 0 auto;
    height: 100%;
    padding: 0 var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.logo__title {
    font-family: var(--font-serif);
    font-size: var(--fs-logo-title);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.02em;
}
.logo__tagline {
    font-family: var(--font-sans);
    font-size: var(--fs-logo-tagline);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted-dark);
    transition: color var(--trans-default);
}
.menu-toggle {
    display: flex; flex-direction: column; justify-content: space-around;
    width: 30px; height: 24px; background: transparent; border: none;
    cursor: pointer; z-index: 10;
}
.menu-toggle__icon, .menu-toggle::before, .menu-toggle::after {
    content: ''; display: block; width: 100%; height: 2px;
    background-color:  #907653; transition: all var(--trans-default);
}
.site-header__nav-wrapper {
    position: absolute; top: var(--header-height); left: 0; width: 100%;
    background-color: var(--color-bg-dark); display: flex; flex-direction: column;
    gap: 2rem; padding: 2rem var(--container-padding); opacity: 0;
    visibility: hidden; transform: translateY(-10px);
    transition: all var(--trans-default); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.site-header__nav-wrapper.is-active {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-list { display: flex; flex-direction: column; gap: 1.5rem; }
.nav-list__link, .action-link { font-size: var(--fs-nav-link); transition: opacity var(--trans-default); }
.action-link { font-weight: 500; }
.nav-list__link:hover, .action-link:hover { opacity: 0.7; }
.site-header__actions { display: flex; flex-direction: column; gap: 1.5rem; }

/* Sticky Header State */
.site-header.is-sticky {
    background-color: var(--color-bg-light); color: var(--color-text-dark);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.site-header.is-sticky .logo__tagline { color: var(--color-text-muted-light); }
.site-header.is-sticky .site-header__nav-wrapper { background-color: var(--color-bg-light); }

@media (min-width: 1024px) {
    .menu-toggle { display: none; }
    .site-header__nav-wrapper {
        position: static; width: auto; background-color: transparent !important;
        flex-direction: row; align-items: center; gap: clamp(1rem, 3vw, 3.5rem);
        padding: 0; opacity: 1; visibility: visible; transform: none; box-shadow: none;
        flex: 1; justify-content: flex-end;
    }
    .site-header__nav { margin-right: auto; margin-left: clamp(2rem, 5vw, 6rem); }
    .nav-list { flex-direction: row; gap: clamp(1rem, 2vw, 2.5rem); }
    .site-header__actions { flex-direction: row; align-items: center; gap: clamp(1.5rem, 2vw, 2.5rem); }
}

/* ==========================================================================
   4. Hero Section
   ========================================================================== */
.hero-section {
    background-color: var(--color-bg-dark); color: var(--color-text-light);
    padding: calc(var(--header-height) + clamp(3rem, 5vw, 6rem)) 0 clamp(4rem, 8vw, 8rem);
    position: relative; overflow: hidden;
}
.hero-section__container {
    max-width: 1920px; margin: 0 auto; padding: 0 var(--container-padding);
    display: grid; grid-template-columns: 1fr; gap: 4rem;
}
.hero-section__content { display: flex; flex-direction: column; align-items: flex-start; }
.hero-section__eyebrow {
    font-family: var(--font-sans); font-size: var(--fs-hero-eyebrow); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-muted-dark);
    margin-bottom: 1.5rem;
}
.hero-section__title {
    font-family: var(--font-serif); font-size: var(--fs-hero-title); font-weight: 400;
    line-height: 1.15; margin-bottom: 2rem; color: var(--color-text-light);
}
.hero-section__title em { font-family: var(--font-serif-italic); font-style: italic; font-weight: 400; }
.hero-section__text { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2.5rem; max-width: 650px; }
.hero-section__text p { font-size: var(--fs-hero-p); color: #a0a0a0; line-height: 1.6; }
.hero-section__actions { display: flex; flex-direction: column; gap: 1rem; width: 100%; margin-bottom: 3.5rem; }
.hero-section__actions .btn { width: 100%; }
.hero-section__meta {
    font-size: var(--fs-hero-meta); font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--color-text-muted-dark); line-height: 1.8;
}
.hero-section__meta .separator { margin: 0 0.5rem; opacity: 0.5; }

.hero-section__visual { position: relative; display: flex; justify-content: center; }

.hero-section__image-wrapper {
    position: relative; /* anchor point for the badge */
    width: 100%; max-width: 550px; aspect-ratio: 4 / 5;
    overflow: visible; /* let the badge hang past the image edge */
}
.hero-section__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-section__image-overlay {
    position: absolute; inset: 0; background-color: var(--color-accent-gold);
    mix-blend-mode: multiply; opacity: 0.6; pointer-events: none;
}

.floating-badge {
    position: absolute;
    bottom: -1.5rem;
    right: -1rem;
    left: auto; margin: 0;
    width: 90%; max-width: 320px; background-color: var(--color-badge-bg);
    color: var(--color-badge-text); padding: clamp(1.25rem, 2vw, 2rem);
    display: flex; flex-direction: column; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    z-index: 2;
}
.floating-badge__header {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; margin-bottom: 0.75rem; color: #666;
}
.floating-badge__header .dot { width: 6px; height: 6px; background-color: var(--color-accent-gold); border-radius: 50%; }
.floating-badge__id { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; }
.floating-badge__divider { border: none; border-top: 1px solid rgba(0, 0, 0, 0.1); margin: 1rem 0; }
.floating-badge__desc { font-size: 0.75rem; line-height: 1.5; color: #555; }

@media (min-width: 768px) {
    .hero-section__actions { flex-direction: row; width: auto; }
    .hero-section__actions .btn { width: auto; }
}
@media (min-width: 1024px) {
    .hero-section__container { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(3rem, 5vw, 6rem); }
    .hero-section__visual { justify-content: flex-end; }
    .floating-badge { bottom: -2rem; right: -2rem; }
}

/* ==========================================================================
   5. Credentials Section
   ========================================================================== */
.credentials {
    background-color: var(--color-bg-cream); border-bottom: 1px solid var(--color-border-light); width: 100%;
}
.credentials__container { max-width: 1920px; margin: 0 auto; padding: clamp(3rem, 5vw, 4rem) var(--container-padding); }
.credentials__list { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.credentials__item {
    display: flex; flex-direction: column; gap: 0.5rem;
    border-left: 1px solid var(--color-border-light); padding-left: clamp(1rem, 2vw, 1.5rem);
}
.credentials__title {
    font-family: var(--font-serif); font-size: var(--fs-credential-title);
    color: #1c2b36; font-weight: 400; line-height: 1.1;
}
.credentials__desc {
    font-family: var(--font-sans); font-size: var(--fs-credential-desc);
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: #8c887e; line-height: 1.6;
}

@media (min-width: 500px) { .credentials__list { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; } }
@media (min-width: 768px) { .credentials__list { grid-template-columns: repeat(3, 1fr); gap: 3rem 1.5rem; } }
@media (min-width: 1280px) { .credentials__list { grid-template-columns: repeat(6, 1fr); gap: 1rem; } }

/* ==========================================================================
   6. Challenge Section (Updated Editorial Layout)
   ========================================================================== */
.challenge { 
    background-color: var(--color-bg-cream); 
    padding: clamp(4rem, 8vw, 8rem) 0; 
    color: #1c2b36; 
}

.challenge__container {
    max-width: 1920px; /* Matches global container width */
    margin: 0 auto; 
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
}

/* Header Styling */
.challenge__header {
    margin-bottom: clamp(3rem, 6vw, 5rem);
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.challenge__eyebrow {
    font-family: var(--font-sans); 
    font-size: var(--fs-challenge-eyebrow);
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 0.15em; 
    color: var(--color-text-gold); 
    margin-bottom: 1.5rem;
}

.challenge__title {
    font-family: var(--font-serif); 
    font-size: var(--fs-challenge-h2); 
    font-weight: 400;
    line-height: 1.15; 
    color: #1c2b36;
}

/* Editorial Niche Blocks */
.challenge__niches {
    display: flex;
    flex-direction: column;
}

.challenge__niche {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: clamp(3rem, 6vw, 5rem) 0;
    border-top: 1px solid var(--color-border-light);
}

.challenge__niche:last-child {
    border-bottom: 1px solid var(--color-border-light);
}

.challenge__niche-col {
    display: flex;
    flex-direction: column;
}

.challenge__niche-content {
    justify-content: space-between;
    gap: 2rem;
}

.challenge__niche-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-gold);
    margin-bottom: 1.5rem;
    display: block;
}

.challenge__niche-title {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    line-height: 1.25;
    font-weight: 400;
    color: #1c2b36;
    margin: 0;
}

.challenge__text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.challenge__text p {
    font-family: var(--font-sans);
    font-size: var(--fs-challenge-p);
    line-height: 1.6;
    color: #5a5a5a;
}

/* Quote / Closing Statement */
.challenge__quote {
    margin: 0;
    padding-left: 1.5rem;
    border-left: 2px solid var(--color-text-gold);
}

.challenge__quote p {
    font-family: var(--font-serif-italic);
    font-style: italic;
    font-size: var(--fs-challenge-quote);
    line-height: 1.4;
    color: #1c2b36;
    margin: 0;
}

/* Sub-Lists */
.challenge__list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.challenge__list-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.challenge__list-title {
    font-family: var(--font-serif);
    font-size: var(--fs-challenge-h3);
    font-weight: 400;
    color: #1c2b36;
    line-height: 1.4;
    margin: 0;
}

.challenge__list-desc {
    font-family: var(--font-sans);
    font-size: var(--fs-challenge-p);
    color: #6a6a6a;
    line-height: 1.6;
    margin: 0;
}

/* Desktop 3-Column Editorial Grid */
@media (min-width: 1024px) {
    .challenge__niche {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(3rem, 5vw, 6rem); /* Creates the wide, breathable columns */
    }
}

/* ==========================================================================
   7. Animations
   ========================================================================== */
.fade-in-up {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-in-up.is-visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ==========================================================================
   8. My Philosophy Section (Updated)
   ========================================================================== */
:root {
    /* Specific Typography for Philosophy Section */
    --fs-philosophy-title: clamp(2.25rem, 4.5vw + 1rem, 4rem);
    --fs-philosophy-p: clamp(1rem, 1.2vw + 0.5rem, 1.125rem);
}

.philosophy {
    background-color: var(--color-bg-cream);
    padding: clamp(5rem, 10vw, 10rem) 0;
    color: #1c2b36;
}

.philosophy__container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(3rem, 6vw, 6rem);
}

/* Left Column */
.philosophy__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.philosophy__title {
    font-family: var(--font-serif);
    font-size: var(--fs-philosophy-title);
    font-weight: 400;
    line-height: 1.15;
    color: #1c2b36;
    margin: 0;
}

/* Right Column */
.philosophy__content {
    display: flex;
    flex-direction: column;
}

.philosophy__text {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* Spacing between the 3 philosophy blocks */
    max-width: 720px;
}

/* New Niche Statement Formatting */
.philosophy__statement {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.philosophy__statement-eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-challenge-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-gold);
}

.philosophy__statement-title {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
    font-weight: 400;
    color: #1c2b36;
    line-height: 1.35;
    margin: 0;
}

.philosophy__statement p {
    font-family: var(--font-sans);
    font-size: var(--fs-philosophy-p);
    line-height: 1.7;
    color: #5a5a5a;
    margin: 0;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media (min-width: 1024px) {
    .philosophy__container {
        /* Matches the 40/60 asymmetrical split seen in the design */
        grid-template-columns: 4fr 6fr; 
        align-items: flex-start;
    }
}

@media (min-width: 1440px) {
    .philosophy__container {
        /* Pushes the text slightly more toward the center on ultra-wide screens */
        grid-template-columns: 4.5fr 5.5fr; 
    }
}

/* ==========================================================================
   9. Stages of Wealth Section (Tabs)
   ========================================================================== */
:root {
    --fs-stages-eyebrow: clamp(0.65rem, 1vw + 0.4rem, 0.75rem);
    --fs-stages-h2: clamp(2.25rem, 4vw + 1rem, 3.5rem);
    --fs-stages-intro: clamp(0.9375rem, 1.2vw + 0.5rem, 1.0625rem);
    --fs-tab-num: clamp(1rem, 1.5vw + 0.75rem, 1.25rem);
    --fs-tab-title: clamp(1.25rem, 2vw + 0.875rem, 1.75rem);
    --fs-tab-desc: clamp(0.8125rem, 1vw + 0.5rem, 0.9375rem);
    --fs-panel-text: clamp(1rem, 1.2vw + 0.5rem, 1.125rem);
    --fs-panel-tags: clamp(0.6rem, 0.8vw + 0.4rem, 0.7rem);
}

.stages {
    background-color: var(--color-bg-cream);
    padding: clamp(4rem, 8vw, 8rem) 0;
    color: #1c2b36;
}

.stages__container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(4rem, 8vw, 6rem);
}

/* --- Left Column --- */
.stages__left {
    display: flex;
    flex-direction: column;
}

.stages__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-stages-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-gold);
    margin-bottom: 1.5rem;
}

.stages__title {
    font-family: var(--font-serif);
    font-size: var(--fs-stages-h2);
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 3.5rem;
    color: #1c2b36;
}

/* Tabs Navigation */
.stages__tabs {
    display: flex;
    flex-direction: column;
    margin-bottom: 3rem;
}

.stages__tab {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: baseline;
    background: transparent;
    border: none;
    border-top: 1px solid var(--color-border-light);
    border-left: 2px solid transparent; /* Indicator */
    padding: 2rem 1.5rem;
    text-align: left;
    cursor: pointer;
    transition: all var(--trans-default);
    opacity: 0.4; /* Faded default state */
}

.stages__tab:last-child {
    border-bottom: 1px solid var(--color-border-light);
}

.stages__tab.is-active,
.stages__tab:hover {
    opacity: 1;
}

.stages__tab.is-active {
    border-left-color: var(--color-text-gold);
}

.stages__tab-num {
    font-family: var(--font-serif);
    font-size: var(--fs-tab-num);
    color: var(--color-text-gold);
}

.stages__tab-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stages__tab-title {
    font-family: var(--font-serif);
    font-size: var(--fs-tab-title);
    font-weight: 400;
    color: #1c2b36;
}

.stages__tab-desc {
    font-family: var(--font-sans);
    font-size: var(--fs-tab-desc);
    color: #6a6a6a;
    line-height: 1.5;
}

.stages__disclaimer {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-style: italic;
    color: #8c887e;
    line-height: 1.6;
    max-width: 400px;
}

/* --- Right Column --- */
.stages__right {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.stages__intro {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 600px;
}

.stages__intro p {
    font-family: var(--font-sans);
    font-size: var(--fs-stages-intro);
    line-height: 1.6;
    color: #5a5a5a;
}

/* Panels (Stacked using CSS Grid to allow cross-fade without layout jumps) */
.stages__panels {
    display: grid;
    grid-template-columns: 1fr;
}

.stages__panel {
    grid-area: 1 / 1; /* Stacks all panels on top of each other */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stages__panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    z-index: 2;
}

.stages__panel-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: #222;
}

.stages__panel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    mix-blend-mode: luminosity; /* Gives the images that slightly muted, architectural feel */
    opacity: 0.8;
}

.stages__panel-badge {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    display: flex;
    flex-direction: column;
    color: #ffffff;
}

.stages__panel-badge-num {
    font-family: var(--font-serif);
    font-size: 2rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
}

.stages__panel-badge-text {
    font-family: var(--font-serif);
    font-size: 1.5rem;
}

.stages__panel-text {
    font-family: var(--font-sans);
    font-size: var(--fs-panel-text);
    color: #333;
    line-height: 1.6;
    max-width: 600px;
}

.stages__panel-tags {
    font-family: var(--font-sans);
    font-size: var(--fs-panel-tags);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-gold);
    margin-top: 0.5rem;
}

/* --- Media Queries --- */
@media (min-width: 1024px) {
    .stages__container {
        grid-template-columns: 1fr 1fr; /* 50/50 Split */
        align-items: flex-start;
    }

    .stages__left {
        position: sticky;
        top: calc(var(--header-height) + 4rem);
    }
}

@media (min-width: 1440px) {
    .stages__container {
        grid-template-columns: 5fr 6fr; /* Gives slightly more room to the image/content side */
    }
}

/* ==========================================================================
   10. A Structured Process Section
   ========================================================================== */
:root {
    /* Process Section Variables */
    --fs-process-h2: clamp(2.25rem, 4vw + 1rem, 3.5rem);
    --fs-process-intro: clamp(1rem, 1.2vw + 0.5rem, 1.125rem);
    --fs-step-num: clamp(1.25rem, 1.5vw + 0.875rem, 1.5rem);
    --fs-step-title: clamp(1.25rem, 1.5vw + 0.875rem, 1.5rem);
    --fs-step-subtitle: clamp(0.8125rem, 1vw + 0.5rem, 0.9375rem);
    --fs-step-desc: clamp(0.875rem, 1vw + 0.5rem, 0.9375rem);
    
    /* Dark theme border */
    --color-border-dark: rgba(255, 255, 255, 0.1);
}

.process {
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
    padding: clamp(5rem, 10vw, 8rem) 0;
}

.process__container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: clamp(4rem, 8vw, 6rem);
}

/* --- Top Header Row --- */
.process__header-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.process__header-left {
    display: flex;
    flex-direction: column;
}

.process__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-challenge-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-gold);
    margin-bottom: 1.5rem;
}

.process__title {
    font-family: var(--font-serif);
    font-size: var(--fs-process-h2);
    font-weight: 400;
    line-height: 1.15;
}

.process__header-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 700px;
}

.process__header-right p {
    font-family: var(--font-sans);
    font-size: var(--fs-process-intro);
    line-height: 1.6;
    color: #a0a0a0; /* Matching the muted text in dark sections */
}

/* --- 5-Column Grid --- */
.process__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.process__step {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Horizontal border for mobile spacing */
.process__step:not(:last-child) {
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--color-border-dark);
}

.process__step-num {
    font-family: var(--font-serif);
    font-size: var(--fs-step-num);
    color: var(--color-text-gold);
    margin-bottom: 1.25rem;
}

.process__step-title {
    font-family: var(--font-serif);
    font-size: var(--fs-step-title);
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.process__step-subtitle {
    font-family: var(--font-serif-italic);
    font-style: italic;
    font-size: var(--fs-step-subtitle);
    color: #a0a0a0;
}

.process__step-divider {
    border: none;
    border-top: 1px solid var(--color-border-dark);
    margin: 1.5rem 0;
    width: 100%;
}

.process__step-desc {
    font-family: var(--font-sans);
    font-size: var(--fs-step-desc);
    line-height: 1.6;
    color: #8c8c8c;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Tablet Layout */
@media (min-width: 768px) {
    .process__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 2rem;
    }
    
    .process__step:not(:last-child) {
        padding-bottom: 0;
        border-bottom: none;
    }
}

/* Desktop Layout (Matches Design) */
@media (min-width: 1024px) {
    .process__header-row {
        /* Matches the asymmetrical split from the image */
        grid-template-columns: 4fr 6fr; 
        align-items: flex-start;
        gap: 4rem;
    }

    .process__grid {
        /* Forces exactly 5 equal columns */
        grid-template-columns: repeat(5, 1fr); 
        gap: 0;
    }
    
    .process__step {
        /* Replaces horizontal mobile borders with vertical desktop dividers */
        padding: 0 2rem;
        border-left: 1px solid var(--color-border-dark);
    }
    
    /* Remove padding and left border from the first item to align flush left */
    .process__step:first-child {
        padding-left: 0;
        border-left: none;
    }
    
    /* Remove right padding from the last item to align flush right */
    .process__step:last-child {
        padding-right: 0;
    }
}

/* ==========================================================================
   11. Who I Work With Section (Updated for Specialised Niches)
   ========================================================================== */
:root {
    /* Specific Typography for Audience Section */
    --fs-audience-h2: clamp(2.25rem, 4vw + 1rem, 3.5rem);
    --fs-audience-intro: clamp(1rem, 1.2vw + 0.5rem, 1.125rem);
    --fs-card-eyebrow: clamp(0.55rem, 0.8vw + 0.4rem, 0.65rem);
    --fs-card-title: clamp(1.25rem, 1.5vw + 0.75rem, 1.5rem);
    --fs-card-desc: clamp(0.875rem, 1vw + 0.5rem, 0.9375rem);
    --fs-audience-footer: clamp(0.9375rem, 1.2vw + 0.5rem, 1.0625rem);
}

.audience {
    background-color: var(--color-bg-cream);
    padding: clamp(5rem, 10vw, 8rem) 0;
    color: #1c2b36;
}

.audience__container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: clamp(4rem, 6vw, 5rem);
}

/* --- Header Row --- */
.audience__header-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.audience__header-left {
    display: flex;
    flex-direction: column;
}

.audience__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-challenge-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-gold);
    margin-bottom: 1.5rem;
}

.audience__title {
    font-family: var(--font-serif);
    font-size: var(--fs-audience-h2);
    font-weight: 400;
    line-height: 1.15;
}

.audience__header-right {
    display: flex;
    align-items: flex-start;
    max-width: 600px;
}

.audience__header-right p {
    font-family: var(--font-sans);
    font-size: var(--fs-audience-intro);
    line-height: 1.6;
    color: #5a5a5a;
}

/* --- Card Grid --- */
.audience__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.audience__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 3 / 4; /* Maintains tall portrait orientation */
    overflow: hidden;
    color: var(--color-text-light);
}

.audience__card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 0.6s ease;
}

.audience__card:hover .audience__card-bg {
    transform: scale(1.05); /* Subtle zoom on hover */
}

.audience__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,0.85) 100%);
    z-index: 1;
}

.audience__card-content {
    position: relative;
    z-index: 2;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
}

.audience__card-eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-card-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-light);
    opacity: 0.8;
    margin-bottom: 1rem;
}

.audience__card-title {
    font-family: var(--font-serif);
    font-size: var(--fs-card-title);
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 1rem;
}

/* Updated to remove truncation so the text and list fit */
.audience__card-desc {
    font-family: var(--font-sans);
    font-size: var(--fs-card-desc);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    margin-bottom: 1.25rem;
}

/* New structured list styling to fit inside the 3/4 aspect ratio */
.audience__card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

/* Switches to a 2-column layout on slightly wider screens to save vertical space */
@media (min-width: 400px) {
    .audience__card-list {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1rem;
    }
}

.audience__card-list li {
    font-family: var(--font-sans);
    font-size: 0.75rem; 
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.audience__card-list li::before {
    content: '•';
    color: var(--color-text-gold);
}

/* Styling for the elegant closing line */
.audience__card-closing {
    font-family: var(--font-serif-italic);
    font-style: italic;
    font-size: clamp(0.875rem, 1vw + 0.4rem, 0.9375rem);
    color: var(--color-text-gold);
    line-height: 1.4;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* --- Footer --- */
.audience__footer {
    text-align: center;
    max-width: 800px;
    margin: 2rem auto 0;
}

.audience__footer p {
    font-family: var(--font-sans);
    font-size: var(--fs-audience-footer);
    color: #6a6a6a;
    line-height: 1.6;
}

.audience__footer em {
    font-family: var(--font-serif-italic);
    font-style: italic;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 768px) {
    .audience__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .audience__header-row {
        grid-template-columns: 1fr 1fr; /* 50/50 split */
        align-items: flex-start;
        gap: 4rem;
    }

    .audience__header-right {
        margin-left: auto; /* Pushes text to align with the right side */
    }

    .audience__grid {
        grid-template-columns: repeat(3, 1fr); /* 3 column layout */
        gap: 1.5rem;
    }
}

/* ==========================================================================
   12. What I Help With (Services Framework) Section
   ========================================================================== */
:root {
    /* Framework Variables */
    --fs-framework-h2: clamp(2.25rem, 4vw + 1rem, 3.5rem);
    --fs-framework-intro: clamp(1rem, 1.2vw + 0.5rem, 1.125rem);
    --fs-group-title: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
    --fs-group-list: clamp(0.875rem, 1vw + 0.5rem, 0.9375rem);
}

.services-framework {
    /* Utilizing the light cream background from the design */
    background-color: var(--color-bg-light); 
    padding: clamp(5rem, 10vw, 8rem) 0;
    color: #1c2b36;
}

.services-framework__container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: clamp(4rem, 6vw, 6rem);
}

/* --- Header Row --- */
.services-framework__header-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.services-framework__header-left {
    display: flex;
    flex-direction: column;
}

.services-framework__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-challenge-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-gold);
    margin-bottom: 1.5rem;
}

.services-framework__title {
    font-family: var(--font-serif);
    font-size: var(--fs-framework-h2);
    font-weight: 400;
    line-height: 1.15;
}

.services-framework__header-right {
    display: flex;
    align-items: flex-start;
    max-width: 650px;
}

.services-framework__header-right p {
    font-family: var(--font-sans);
    font-size: var(--fs-framework-intro);
    line-height: 1.6;
    color: #5a5a5a;
}

/* --- Comprehensive Service Groups --- */
.services-framework__groups {
    display: flex;
    flex-direction: column;
}

.service-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: clamp(3rem, 5vw, 5rem) 0;
    border-top: 1px solid var(--color-border-light);
}

/* Remove bottom padding on the last item for cleaner spacing */
.service-group:last-child {
    padding-bottom: 0;
}

.service-group__header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.service-group__eyebrow {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-gold);
}

.service-group__title {
    font-family: var(--font-serif);
    font-size: var(--fs-group-title);
    font-weight: 400;
    line-height: 1.3;
    color: #1c2b36;
}

.service-group__content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* List Styling */
.service-group__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 2rem;
}

.service-group__list li {
    font-family: var(--font-sans);
    font-size: var(--fs-group-list);
    line-height: 1.5;
    color: #4a4a4a;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

/* Using the signature gold dot for list items */
.service-group__list li::before {
    content: '•';
    color: var(--color-text-gold);
    font-size: 1.25rem;
    line-height: 1;
    margin-top: 2px; /* Visual vertical centering */
}

/* Ideal For Footer Block */
.service-group__footer {
    background-color: var(--color-badge-bg, #f9f8f4); /* Reusing premium badge background */
    padding: 1.5rem;
    border-left: 2px solid var(--color-text-gold);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.service-group__ideal-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-gold);
}

.service-group__ideal-text {
    font-family: var(--font-serif-italic);
    font-style: italic;
    font-size: clamp(0.9375rem, 1.2vw + 0.4rem, 1.0625rem);
    color: #1c2b36;
    line-height: 1.5;
}

/* ==========================================================================
   Media Queries for Services Framework
   ========================================================================== */

/* Tablet Layout */
@media (min-width: 768px) {
    .service-group__list {
        grid-template-columns: repeat(2, 1fr); /* Splits the long lists into 2 columns */
    }
}

/* Desktop Premium Layout */
@media (min-width: 1024px) {
    .services-framework__header-row {
        /* Asymmetrical split mimicking other site headers (e.g., Process, About) */
        grid-template-columns: 4fr 6fr;
        align-items: flex-start;
        gap: 4rem;
    }
    
    .services-framework__header-right {
        margin-left: auto;
    }

    .service-group {
        /* Side-by-side split matching the header */
        grid-template-columns: 4fr 6fr;
        gap: 4rem;
    }
    
    /* Make the footer inline on wider screens */
    .service-group__footer {
        flex-direction: row;
        align-items: baseline;
        gap: 1rem;
    }
    
    .service-group__ideal-label {
        white-space: nowrap;
    }
}

/* ==========================================================================
   13. Portfolio Review Section (Already Investing)
   ========================================================================== */
:root {
    /* Specific Typography for Portfolio Review Section */
    --fs-pr-title: clamp(2.5rem, 4vw + 1rem, 3.5rem);
    --fs-pr-text: clamp(1rem, 1.2vw + 0.5rem, 1.125rem);
    --fs-pr-num: clamp(2.5rem, 4vw + 1rem, 3.5rem);
    --fs-pr-step-text: clamp(1.125rem, 1.5vw + 0.5rem, 1.25rem);
}

.portfolio-review {
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
    padding: clamp(5rem, 10vw, 8rem) 0;
}

.portfolio-review__container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(4rem, 8vw, 6rem);
}

/* --- Left Column --- */
.portfolio-review__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.portfolio-review__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-challenge-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-gold);
    margin-bottom: 1.5rem;
}

.portfolio-review__title {
    font-family: var(--font-serif);
    font-size: var(--fs-pr-title);
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 2.5rem;
}

.portfolio-review__text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3.5rem;
    max-width: 600px;
}

.portfolio-review__text p {
    font-family: var(--font-sans);
    font-size: var(--fs-pr-text);
    line-height: 1.6;
    color: #a0a0a0; /* Matching the muted grey text */
}

.portfolio-review__actions {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
}

.portfolio-review__action-note {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #8c8c8c;
}

/* --- Right Column (Steps) --- */
.portfolio-review__steps {
    display: flex;
    flex-direction: column;
}

.portfolio-review__step {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--color-border-dark);
}

/* Remove padding on top for mobile alignment */
.portfolio-review__step:first-child {
    padding-top: 0;
}

/* Remove bottom border on the last item */
.portfolio-review__step:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.portfolio-review__step-num {
    font-family: var(--font-serif);
    font-size: var(--fs-pr-num);
    color: var(--color-text-gold);
    line-height: 1;
}

.portfolio-review__step-text {
    font-family: var(--font-sans);
    font-size: var(--fs-pr-step-text);
    color: var(--color-text-light);
    font-weight: 400;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Tablet adjustments */
@media (min-width: 768px) {
    .portfolio-review__actions {
        flex-direction: row;
        align-items: center;
        gap: 2rem;
    }
}

/* Desktop layout matching the design */
@media (min-width: 1024px) {
    .portfolio-review__container {
        grid-template-columns: 1fr 1fr; /* Exact 50/50 split */
        align-items: center; /* Vertically centers the right list alongside the left text */
    }

    .portfolio-review__steps {
        padding-left: clamp(3rem, 6vw, 6rem);
        /* Creates the tall vertical divider line shown in the design */
        border-left: 1px solid var(--color-border-dark);
    }
}

/* ==========================================================================
   14. About Section (The Person Behind The Practice)
   ========================================================================== */
:root {
    /* About Section Variables */
    --fs-about-h2: clamp(2.25rem, 4vw + 1rem, 3.5rem);
    --fs-about-p: clamp(0.9375rem, 1.2vw + 0.5rem, 1.0625rem);
    --fs-about-quote: clamp(1.25rem, 2vw + 0.75rem, 1.5rem);
    --fs-about-name: clamp(1.25rem, 1.5vw + 0.75rem, 1.5rem);
    
    --fs-cred-title: clamp(1.5rem, 2vw + 1rem, 1.75rem);
    --fs-cred-text: clamp(0.875rem, 1vw + 0.5rem, 0.9375rem);
}

.about {
    background-color: var(--color-bg-cream); /* Matching the light cream design */
    padding: clamp(5rem, 10vw, 8rem) 0;
    color: #1c2b36;
}

.about__container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: clamp(4rem, 8vw, 6rem);
}

/* --- Top: Bio Grid --- */
.about__bio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(3rem, 6vw, 5rem);
}

.about__image-wrapper {
    width: 100%;
    /* Creates the tall, elegant portrait crop */
    aspect-ratio: 4 / 5; 
    overflow: hidden;
}

.about__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Adds a slight warmth to the image to match the site's palette */
    mix-blend-mode: multiply; 
}

.about__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.about__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-challenge-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-gold);
    margin-bottom: 1.5rem;
}

.about__title {
    font-family: var(--font-serif);
    font-size: var(--fs-about-h2);
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 2.5rem;
}

.about__text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
    max-width: 600px;
}

.about__text p {
    font-family: var(--font-sans);
    font-size: var(--fs-about-p);
    line-height: 1.6;
    color: #5a5a5a;
}

.about__quote {
    border-left: 2px solid var(--color-text-gold);
    padding-left: 1.5rem;
    margin-bottom: 3rem;
    max-width: 550px;
}

.about__quote p {
    font-family: var(--font-serif-italic);
    font-style: italic;
    font-size: var(--fs-about-quote);
    line-height: 1.4;
    color: #1c2b36;
}

.about__signature {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.about__name {
    font-family: var(--font-serif);
    font-size: var(--fs-about-name);
    color: #1c2b36;
}

.about__role {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #8c8c8c;
}

/* --- Bottom: Restructured Credentials --- */
.about__credentials {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding-top: clamp(3rem, 6vw, 4rem);
    border-top: 1px solid var(--color-border-light);
}

.about__cred-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 400px;
}

.about__cred-eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-challenge-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-gold);
}

.about__cred-title {
    font-family: var(--font-serif);
    font-size: var(--fs-cred-title);
    font-weight: 400;
    line-height: 1.25;
}

.about__cred-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.about__cred-item {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.about__cred-num {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--color-text-gold);
}

.about__cred-text {
    font-family: var(--font-sans);
    font-size: var(--fs-cred-text);
    color: #5a5a5a;
    line-height: 1.5;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Tablet Layout */
@media (min-width: 768px) {
    .about__cred-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* Desktop Premium Layout */
@media (min-width: 1024px) {
    .about__bio-grid {
        /* Matches the 40/60 asymmetrical split seen in previous sections */
        grid-template-columns: 4fr 5.5fr; 
        align-items: flex-start;
        gap: clamp(4rem, 8vw, 8rem);
    }

    .about__image-wrapper {
        /* Restricts the image width slightly so it doesn't overpower the text */
        max-width: 550px;
        margin-left: auto;
    }

    .about__credentials {
        /* Places the Header on the left, and the 2-column list on the right */
        display: grid;
        grid-template-columns: 1fr 2.5fr;
        gap: 4rem;
        align-items: flex-start;
    }

    .about__cred-list {
        /* Ensures the credentials wrap cleanly across the right side of the screen */
        grid-template-columns: repeat(2, 1fr);
        column-gap: 4rem;
        row-gap: 1.5rem;
    }
}

/* ==========================================================================
   15. Simple Process Section (Timeline)
   ========================================================================== */
:root {
    /* Process Typography */
    --fs-simple-h2: clamp(2.25rem, 4vw + 1rem, 3.5rem);
    --fs-simple-num: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
    --fs-simple-step-title: clamp(1.125rem, 1.5vw + 0.5rem, 1.375rem);
    --fs-simple-step-desc: clamp(0.875rem, 1vw + 0.5rem, 0.9375rem);
}

.simple-process {
    background-color: var(--color-bg-cream); /* Continues the light theme */
    padding: clamp(5rem, 10vw, 8rem) 0;
    color: #1c2b36;
}

.simple-process__container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
}

/* --- Header --- */
.simple-process__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.simple-process__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-challenge-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-gold);
    margin-bottom: 1.5rem;
}

.simple-process__title {
    font-family: var(--font-serif);
    font-size: var(--fs-simple-h2);
    font-weight: 400;
    line-height: 1.15;
}

/* --- Timeline Grid --- */
.simple-process__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.simple-process__step {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    /* Creates the top timeline connecting border */
    padding-top: 2rem;
    border-top: 1px solid var(--color-border-light);
}

/* Adds a small decorative gold dot on the timeline */
.simple-process__step::before {
    content: '';
    position: absolute;
    top: -3px; /* Centers dot on the 1px border */
    left: 0;
    width: 5px;
    height: 5px;
    background-color: var(--color-accent-gold);
    border-radius: 50%;
}

.simple-process__meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.simple-process__num {
    font-family: var(--font-serif);
    font-size: var(--fs-simple-num);
    color: var(--color-text-gold);
    line-height: 1;
}

.simple-process__step-title {
    font-family: var(--font-serif);
    font-size: var(--fs-simple-step-title);
    font-weight: 400;
    color: #1c2b36;
    line-height: 1.3;
}

.simple-process__step-desc {
    font-family: var(--font-sans);
    font-size: var(--fs-simple-step-desc);
    line-height: 1.6;
    color: #6a6a6a;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Tablet Layout: Break into a 2x3 grid to start saving vertical space */
@media (min-width: 768px) and (max-width: 1023px) {
    .simple-process__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 2rem;
    }
}

/* Desktop Premium Layout: Beautiful 5-column horizontal timeline */
@media (min-width: 1024px) {
    .simple-process__grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 2rem; /* Tighter gap so the text blocks sit nicely side-by-side */
    }
    
    .simple-process__step {
        /* Pushes the text down slightly further from the timeline on desktop */
        padding-top: 2.5rem; 
    }
}

/* ==========================================================================
   16. Principles Section (4 Columns)
   ========================================================================== */
:root {
    /* Principles Typography */
    --fs-principles-h2: clamp(2.25rem, 4vw + 1rem, 3.5rem);
    --fs-principle-num: clamp(0.75rem, 1vw + 0.5rem, 0.875rem);
    --fs-principle-title: clamp(1.25rem, 1.5vw + 0.75rem, 1.5rem);
    --fs-principle-desc: clamp(0.875rem, 1vw + 0.5rem, 0.9375rem);
}

.principles {
    /* Utilizing the light cream background to match the design */
    background-color: var(--color-bg-cream); 
    padding: clamp(5rem, 10vw, 8rem) 0;
    color: #1c2b36;
}

.principles__container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 6vw, 5rem);
}

/* --- Header --- */
.principles__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.principles__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-challenge-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-gold);
    margin-bottom: 1.5rem;
}

.principles__title {
    font-family: var(--font-serif);
    font-size: var(--fs-principles-h2);
    font-weight: 400;
    line-height: 1.15;
}

/* --- Grid & Items --- */
.principles__grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 2.5rem;
}

.principles__item {
    display: flex;
    flex-direction: column;
    /* Recreates the elegant thin line next to each item */
    border-left: 1px solid var(--color-border-light); 
    padding-left: clamp(1.25rem, 2vw, 1.5rem);
}

.principles__num {
    font-family: var(--font-serif);
    font-size: var(--fs-principle-num);
    color: var(--color-text-gold);
    margin-bottom: 1rem;
}

.principles__item-title {
    font-family: var(--font-serif);
    font-size: var(--fs-principle-title);
    font-weight: 400;
    color: #1c2b36;
    margin-bottom: 1rem;
}

.principles__item-desc {
    font-family: var(--font-sans);
    font-size: var(--fs-principle-desc);
    line-height: 1.6;
    color: #6a6a6a;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Tablet Layout */
@media (min-width: 768px) {
    .principles__grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 Grid */
        gap: 4rem 2rem;
    }
}

/* Desktop Premium Layout */
@media (min-width: 1024px) {
    .principles__grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columns side-by-side */
        gap: 2rem;
    }
}

/* ==========================================================================
   17. Financial Education Section
   ========================================================================== */
:root {
    --fs-edu-h2: clamp(2.25rem, 4vw + 1rem, 3.5rem);
    --fs-edu-intro: clamp(1rem, 1.2vw + 0.5rem, 1.125rem);
    --fs-edu-card-title: clamp(1.25rem, 1.5vw + 0.75rem, 1.5rem);
    --fs-edu-card-desc: clamp(0.875rem, 1vw + 0.5rem, 0.9375rem);
}

.education {
    background-color: var(--color-bg-cream);
    padding: clamp(5rem, 10vw, 8rem) 0 clamp(4rem, 8vw, 6rem);
    color: #1c2b36;
}

.education__container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: clamp(4rem, 8vw, 6rem);
}

/* Header Row */
.education__header-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.education__header-left { display: flex; flex-direction: column; }

.education__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-challenge-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-gold);
    margin-bottom: 1.5rem;
}

.education__title {
    font-family: var(--font-serif);
    font-size: var(--fs-edu-h2);
    font-weight: 400;
    line-height: 1.15;
}

.education__header-right {
    display: flex;
    align-items: flex-start;
    max-width: 650px;
}

.education__header-right p {
    font-family: var(--font-sans);
    font-size: var(--fs-edu-intro);
    line-height: 1.6;
    color: #5a5a5a;
}

/* 3-Column Grid */
.education__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.education__card {
    display: flex;
    flex-direction: column;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border-light);
}

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

.education__card-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-muted-dark);
    margin-bottom: 1.25rem;
}

.education__card-title {
    font-family: var(--font-serif);
    font-size: var(--fs-edu-card-title);
    font-weight: 400;
    color: #1c2b36;
    margin-bottom: 1rem;
}

.education__card-desc {
    font-family: var(--font-sans);
    font-size: var(--fs-edu-card-desc);
    line-height: 1.6;
    color: #6a6a6a;
    margin-bottom: 2rem;
}

.education__card-link {
    font-family: var(--font-sans);
    font-size: var(--fs-card-link);
    color: #1c2b36;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    transition: color var(--trans-default), transform var(--trans-default);
}

.education__card-link:hover {
    color: var(--color-text-gold);
    transform: translateX(4px);
}

/* Footer Connect / Premium Social Buttons */
.education__connect {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: clamp(3rem, 6vw, 5rem);
    border-top: 1px solid var(--color-border-light);
}

.education__connect-label {
    font-family: var(--font-sans);
    font-size: var(--fs-challenge-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-muted-dark);
}

.education__social-links { display: flex; flex-wrap: wrap; gap: 1rem; }

.btn--social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50px;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: #1c2b36;
    background-color: transparent;
    transition: all var(--trans-default);
}

.btn--social:hover {
    border-color: var(--color-accent-gold);
    background-color: var(--color-accent-gold);
    color: #ffffff;
    transform: translateY(-2px);
}

.btn--social:active { transform: translateY(0); }

/* ==========================================================================
   18. Educate First Section
   ========================================================================== */
.educate-first {
    background-color: var(--color-bg-cream);
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(5rem, 10vw, 8rem);
    color: #1c2b36;
}

.educate-first__container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.educate-first__left { display: flex; flex-direction: column; }

.educate-first__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-challenge-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-gold);
    margin-bottom: 1.5rem;
}

.educate-first__title {
    font-family: var(--font-serif);
    font-size: var(--fs-edu-h2);
    font-weight: 400;
    line-height: 1.15;
}

.educate-first__right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 650px;
}

.educate-first__right p {
    font-family: var(--font-sans);
    font-size: var(--fs-edu-intro);
    line-height: 1.6;
    color: #5a5a5a;
}

/* ==========================================================================
   Media Queries for Sections 17 & 18
   ========================================================================== */

@media (min-width: 768px) {
    .education__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 2rem;
    }
    
    .education__connect {
        flex-direction: row;
        align-items: center;
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .education__header-row,
    .educate-first__container {
        grid-template-columns: 4fr 6fr;
        align-items: flex-start;
        gap: 4rem;
    }

    .education__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }

    .education__card {
        padding: 0 3rem;
        border-bottom: none;
        border-left: 1px solid var(--color-border-light);
    }
    
    .education__card:first-child { padding-left: 0; border-left: none; }
    .education__card:last-child { padding-right: 0; }
}

/* ==========================================================================
   19. CTA Section (Start with a Conversation)
   ========================================================================== */
.cta {
    /* Switches back to the dark theme background */
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
    padding: clamp(5rem, 10vw, 8rem) 0;
}

.cta__container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(4rem, 8vw, 6rem);
}

/* --- Left Column: Content --- */
.cta__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center; /* Vertically centers content next to the image on desktop */
}

.cta__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-challenge-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-gold);
    margin-bottom: 1.5rem;
}

.cta__title {
    font-family: var(--font-serif);
    /* Reusing the large H2 size from the process section */
    font-size: var(--fs-process-h2); 
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 2rem;
}

.cta__text {
    font-family: var(--font-sans);
    /* Reusing the paragraph size from the hero section */
    font-size: var(--fs-hero-p); 
    line-height: 1.6;
    color: #a0a0a0; /* Muted grey text for dark backgrounds */
    margin-bottom: 3.5rem;
    max-width: 650px;
}

.cta__actions {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.cta__actions .btn {
    width: 100%;
}

/* --- Right Column: Visual --- */
.cta__visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta__image-wrapper {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 4 / 5; /* Creates a tall, elegant portrait crop */
    overflow: hidden;
}

.cta__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Softens the image slightly to blend perfectly with the dark background */
    opacity: 0.9; 
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Tablet Layout */
@media (min-width: 768px) {
    .cta__actions {
        flex-direction: row;
        width: auto;
    }
    
    .cta__actions .btn {
        width: auto;
    }
}

/* Desktop Premium Layout */
@media (min-width: 1024px) {
    .cta__container {
        /* Gives slightly more room to the text column (approx 55/45 split) */
        grid-template-columns: 1.2fr 1fr; 
        align-items: center;
    }

    .cta__visual {
        justify-content: flex-end;
    }
}
/* ==========================================================================
   20. Merged Contact & Consultation Section (with Forminator)
   ========================================================================== */
:root {
    --fs-contact-title: clamp(2.25rem, 4vw + 1rem, 3.5rem);
    --fs-contact-desc: clamp(0.9375rem, 1vw + 0.5rem, 1.0625rem);
    --fs-contact-info: clamp(0.875rem, 1vw + 0.5rem, 1rem);
    
    --fs-form-label: 0.65rem;
    --fs-form-input: clamp(0.9375rem, 1vw + 0.5rem, 1rem);
}

.contact-section {
    background-color: var(--color-bg-cream); /* Main light theme */
    padding: clamp(5rem, 10vw, 8rem) 0;
    color: #1c2b36;
}

.contact-section__container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(4rem, 8vw, 6rem);
}

/* --- Left Column: Info --- */
.contact-section__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.contact-section__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-challenge-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-gold);
    margin-bottom: 1.5rem;
}

.contact-section__title {
    font-family: var(--font-serif);
    font-size: var(--fs-contact-title);
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 2rem;
}

.contact-section__desc {
    font-family: var(--font-sans);
    font-size: var(--fs-contact-desc);
    line-height: 1.6;
    color: #5a5a5a;
    margin-bottom: 3rem;
    max-width: 500px;
}

.contact-section__address {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}

.contact-section__block {
    font-family: var(--font-sans);
    font-size: var(--fs-contact-info);
    line-height: 1.6;
    color: #5a5a5a;
}

.contact-section__name {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: #1c2b36;
}

.contact-section__role {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #8c8c8c;
}

.contact-section__links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-section__links a {
    color: #1c2b36;
    transition: color var(--trans-default);
}

.contact-section__links a:hover {
    color: var(--color-text-gold);
}

.contact-section__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* --- Right Column: Form Wrapper --- */
.contact-section__form-wrapper {
    display: flex;
    flex-direction: column;
}

.contact-section__note {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: #8c8c8c;
    line-height: 1.5;
    margin-top: 1.5rem;
}

/* ==========================================================================
   Forminator Override - Premium Minimalist Theme
   ========================================================================== */

/* 1. Labels */
.forminator-ui .forminator-label {
    font-family: var(--font-sans, 'Inter', sans-serif) !important;
    font-size: var(--fs-form-label, 0.65rem) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: #6a6a6a !important;
    margin-bottom: 0.5rem !important;
}

/* 2. Text Inputs, Email, Phone, and Native Selects */
.forminator-ui input[type="text"],
.forminator-ui input[type="email"],
.forminator-ui input[type="tel"],
.forminator-ui input[type="number"],
.forminator-ui select,
.forminator-ui textarea {
    width: 100% !important;
    font-family: var(--font-sans, 'Inter', sans-serif) !important;
    font-size: var(--fs-form-input, 1rem) !important;
    color: #1c2b36 !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--color-border-light, rgba(0, 0, 0, 0.12)) !important;
    padding: 0.5rem 0 0.75rem 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: border-color 0.3s ease !important;
    min-height: auto !important;
}

/* 3. Focus States (Gold Accent) */
.forminator-ui input:focus,
.forminator-ui select:focus,
.forminator-ui textarea:focus {
    outline: none !important;
    border-bottom-color: var(--color-accent-gold, #907653) !important;
}

/* 4. Placeholders */
.forminator-ui ::placeholder {
    color: #b0b0b0 !important;
    opacity: 1 !important;
}

/* 5. Checkboxes (For your "What would you like help with?" field) */
.forminator-ui .forminator-checkbox {
    margin-bottom: 10px !important;
}

.forminator-ui .forminator-checkbox .forminator-checkbox-label {
    font-family: var(--font-sans, 'Inter', sans-serif) !important;
    font-size: var(--fs-form-input, 1rem) !important;
    color: #1c2b36 !important;
    font-weight: 400 !important;
}

/* 6. Submit Button (Matches your .btn--primary) */
.forminator-ui .forminator-button-submit {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0.875rem 1.5rem !important;
    font-size: var(--fs-button, 0.9375rem) !important;
    font-family: var(--font-sans, 'Inter', sans-serif) !important;
    font-weight: 500 !important;
    background-color: var(--color-accent-gold, #907653) !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    border: none !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
    cursor: pointer !important;
    box-shadow: none !important;
    margin-top: 1rem !important;
}

.forminator-ui .forminator-button-submit:hover {
    background-color: var(--color-accent-gold-hover, #7a6344) !important;
}

.forminator-ui .forminator-button-submit:active {
    transform: scale(0.98) !important;
}

/* 7. Success Message Box (Matches your premium layout) */
.forminator-ui .forminator-response-message.forminator-success {
    background-color: var(--color-badge-bg, #f9f8f4) !important;
    border-left: 2px solid var(--color-text-gold, #a89370) !important;
    border-radius: 0 !important;
    padding: 2.5rem !important;
    box-shadow: none !important;
    font-family: var(--font-sans, 'Inter', sans-serif) !important;
    font-size: var(--fs-contact-desc, 1.0625rem) !important;
    line-height: 1.6 !important;
    color: #5a5a5a !important;
    margin-bottom: 2rem !important;
}

.forminator-ui .forminator-response-message.forminator-success::first-line {
    font-family: var(--font-serif, 'Cinzel', serif) !important;
    font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem) !important;
    color: #1c2b36 !important;
    font-weight: 400 !important;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media (min-width: 1024px) {
    .contact-section__container {
        /* Matches the 40/60 asymmetrical split used across the site */
        grid-template-columns: 4fr 6fr;
        align-items: flex-start;
        gap: 6rem;
    }

    .contact-section__info {
        /* Makes the contact info sticky, floating alongside the form as you scroll */
        position: sticky;
        top: calc(var(--header-height) + 4rem);
    }
}
/* ==========================================================================
   21. Site Footer (Premium Dark Theme)
   ========================================================================== */
:root {
    --fs-footer-base: clamp(0.8125rem, 1vw + 0.4rem, 0.875rem);
    --fs-footer-heading: 0.65rem;
    --color-footer-border: rgba(255, 255, 255, 0.1);
    --color-footer-text-muted: #8c8c8c;
}

/* Screen reader only utility class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-footer {
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
    padding: clamp(4rem, 8vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
    font-family: var(--font-sans);
}

.site-footer__container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
}

/* --- Top Section --- */
.site-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.logo--footer .logo__title {
    color: var(--color-text-light);
}

.logo--footer .logo__tagline {
    color: var(--color-footer-text-muted);
}

.site-footer__credentials {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-size: var(--fs-footer-base);
    color: var(--color-footer-text-muted);
    line-height: 1.6;
    max-width: 400px;
}

/* Nav Grid */
.site-footer__nav-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.site-footer__nav-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.site-footer__nav-heading {
    font-size: var(--fs-footer-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-gold);
}

.site-footer__nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.site-footer__nav-list a {
    font-size: var(--fs-footer-base);
    color: #b0b0b0; /* Light gray for contrast against dark bg */
    transition: color var(--trans-default);
}

.site-footer__nav-list a:hover {
    color: var(--color-text-light);
}

/* --- Middle Section: Disclaimer --- */
.site-footer__middle {
    padding: 2rem 0;
    border-top: 1px solid var(--color-footer-border);
    border-bottom: 1px solid var(--color-footer-border);
    margin-bottom: 2rem;
}

.site-footer__middle p {
    font-size: var(--fs-footer-base);
    color: var(--color-footer-text-muted);
}

/* --- Bottom Section: Legal & Social --- */
.site-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-size: 0.75rem;
    color: var(--color-footer-text-muted);
}

.site-footer__bottom-left,
.site-footer__bottom-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.site-footer__bottom-brand {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--color-text-light);
}

.site-footer__socials,
.site-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.site-footer__socials a,
.site-footer__legal-links a {
    transition: color var(--trans-default);
}

.site-footer__socials a:hover,
.site-footer__legal-links a:hover {
    color: var(--color-text-light);
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Tablet Layout */
@media (min-width: 768px) {
    .site-footer__nav-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .site-footer__bottom-left,
    .site-footer__bottom-right {
        flex-direction: row;
        align-items: center;
        gap: 2rem;
    }
}

/* Desktop Layout */
@media (min-width: 1024px) {
    .site-footer__top {
        /* Asymmetrical split: Brand column gets slightly more room */
        grid-template-columns: 1.5fr 3.5fr; 
        gap: 4rem;
    }

    .site-footer__nav-grid {
        /* 4 Columns side-by-side */
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

/* =========================================================================
   Additions for WordPress conversion: skip link + admin-only setup notices.
   Not part of the original design; safe to restyle.
   ========================================================================= */

.skip-link.screen-reader-text {
    position: absolute;
    top: -9999px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 12px 20px;
    z-index: 100000;
}
.skip-link.screen-reader-text:focus {
    top: 0;
}

.aw-admin-notice {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.9rem;
    line-height: 1.5;
    color: #6a3b2a;
}