/* ================================================================= */
/* PAGE-SPECIFIC STYLES: HOME (home.css) */
/* Contains styles for unique layout blocks on the homepage. */
/* ================================================================= */

/* --- Base Section Styling --- */
.hero-section,
.intro-blurb-section,
.solution-section,
.why-section,
.lead-magnet-section,
.who-we-are-section,
.content-grid-section,
.testimonial-section, /* Make sure testimonial section is included */
.final-cta-section { /* Make sure final CTA section is included */
    padding-top: var(--spacing-lg);    /* Should add space above content */
    padding-bottom: var(--spacing-lg); /* Should add space below content */
}

/* --- 1.1. NEW: Hero Centered Override --- */
/* ------------------------------------------------------------- */

/* 1. Remove flexbox from the hero's main-container */
.hero-section-centered .main-container {
    display: block; /* Override display: flex */
    text-align: center;
}

/* 2. Center the content wrapper using margin:auto */
.hero-section-centered .hero-content-wrapper {
    flex-basis: auto; /* Reset flex-basis */
    width: 100%;      /* Use full width of parent (respects padding) */
    max-width: 900px; /* Constrain line length */
    margin-left: auto;  /* Center the block */
    margin-right: auto; /* Center the block */
    align-items: center; /* Keep child items (h1, p) centered */
    text-align: center;  /* Ensure text is centered */
}

/* 3. Set the new, smaller headline size */
.hero-section-centered .hero-headline {
    font-size: 2.75rem; /* Reduced from 3.5rem */
    line-height: 1.2;
}

/* 4. Ensure headline & subheadline are centered */
.hero-section-centered .hero-headline,
.hero-section-centered .hero-subheadline {
    text-align: center;
}

/* 5. Constrain subheadline width */
.hero-section-centered .hero-subheadline {
    max-width: 750px; /* Tighter subheadline */
}

/* --- 1.1.5. NEW: Hero Rotating Headline (H2) --- */
/* ------------------------------------------------------------- */
.hero-rotating-headline {
    font-size: 2.75rem; 
    line-height: 1.2;
    font-family: var(--font-family-header);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: var(--spacing-sm) 0 var(--spacing-sm) 0; /* <-- UPDATED MARGIN */
    text-wrap: balance;
}

/* --- 1.2. NEW: Rotating Words Animation (Corrected) --- */
/* ------------------------------------------------------------- */
.rotating-words-wrapper {
    display: inline-block;
    height: 1.2em;
    line-height: 1.2em;
    overflow: hidden;
    /* vertical-align: bottom; <-- REMOVED THIS LINE */
    position: relative;
    top: 0;
}

.rotating-words-list {
    list-style: none;
    padding: 0;
    margin: 0;
    animation: rotateWords 10s infinite ease-in-out;
    color: #FFDF00;
    text-align: center; /* <-- CHANGED from 'left' */
}

.rotating-words-list li {
    line-height: 1.2em; /* <-- MUST match h1 line-height */
    padding: 0;
}

@keyframes rotateWords {
    /* All translateY values MUST use the 1.2em unit */
    /* Updated for 4 words (100% / 4 = 25% per step) */
    0%, 21%   { transform: translateY(0); }
    25%, 46%  { transform: translateY(-1.2em); }
    50%, 71%  { transform: translateY(-2.4em); }
    75%, 96%  { transform: translateY(-3.6em); }
    100%      { transform: translateY(0); }
}

/* --- 1. Hero Section --- */
/* ------------------------------------------------------------- */
.hero-section {
    display: flex;
    align-items: center;
    min-height: 60vh;
    background: radial-gradient(ellipse at center,
        var(--color-accent-highlight) 0%,
        var(--color-bg-primary) 100%);
}

.hero-section .main-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    width: 100%;
}

.hero-content-wrapper {
    flex-basis: 55%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
    text-align: left;
}

.hero-headline {
    font-family: var(--font-family-header);
    font-size: 3.5rem;
    line-height: 1.1;
    max-width: 800px;
    margin-bottom: 0; /* Let gap handle spacing */
}

.hero-subheadline {
    font-size: var(--font-size-lg); /* Use variable */
    color: var(--color-text-secondary);
    max-width: 650px;
    margin-bottom: 0; /* Let gap handle spacing */
    text-align: left;
}

.hero-cta-group {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    gap: var(--spacing-sm);
}
/* Ensure buttons in group don't have extra top margin */
.hero-cta-group .cta-button,
.hero-cta-group .cta-button-secondary {
    margin-top: 0;
}

.hero-image-wrapper {
    flex-basis: 40%;
    flex-shrink: 0;
}
.hero-headshot {
    display: block; /* Remove bottom space */
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-img);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* --- 1.5. Intro Blurb Section (UPDATED) --- */
/* ------------------------------------------------------------- */
.intro-blurb-section {
    background-color: var(--color-bg-primary); /* Match body background */
    text-align: center;
}

.intro-blurb-headline {
    font-family: var(--font-family-header);
    font-size: 2.5rem;
    line-height: 1.2;
    color: var(--color-text-primary);
    max-width: 800px; /* Constrain line length */
    margin: 0 auto var(--spacing-md) auto; /* Center headline */
    text-wrap: balance; /* Prevent wrapping between the two parts */
}

/* NEW: Style for the highlighted text */
.intro-blurb-headline .highlight-text {
    color: #FFDF00; /* Gold/Yellow, matches testimonial stars */
    font-size: 1.2em; /* Makes it 20% larger than the h2's font size */
    display: inline-block; /* Helps with line height consistency */
}

.intro-blurb-text {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    max-width: 700px; /* Constrain line length */
    margin: 0 auto var(--spacing-sm) auto; /* Center paragraph */
    text-wrap: balance; /* FIXED: Prevents awkward line breaks */
}

.intro-blurb-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-md) auto;
    max-width: 700px;
}

.intro-blurb-list li {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    font-style: italic;
    line-height: 1.7;
}

.intro-blurb-quote {
    font-family: var(--font-family-header);
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    font-style: italic;
    color: var(--color-text-primary);
    max-width: 700px;
    margin: var(--spacing-md) auto;
}

.intro-blurb-cta {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin-top: var(--spacing-md);
}

.intro-blurb-cta a {
    color: var(--color-accent-primary);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition: color 0.2s ease;
}

.intro-blurb-cta a:hover {
    color: var(--color-text-primary);
}

/* --- 1.6. Who We Are Section --- */
/* ------------------------------------------------------------- */
.who-we-are-section {
    background-color: var(--color-accent-highlight);
    /* Dot Grid Pattern */
    background-image: radial-gradient(
        rgba(0, 0, 0, 0.5) 1px, /* Faint dark dots */
        transparent 1px
    );
    background-size: 10px 10px;
}

.who-we-are-section .main-container {
    display: flex;
    align-items: center;
    justify-content: center; /* Center content */
    flex-direction: column; /* Stack vertically */
    gap: var(--spacing-lg);
}

.who-video-wrapper {
    flex-basis: auto; /* Reset flex-basis */
    width: 100%;
    max-width: 700px; /* Constrain image width */
}

.who-content-wrapper {
    flex-basis: auto; /* Reset flex-basis */
    width: 100%;
    max-width: 700px; /* Constrain text width */
    text-align: center; /* Center align text */
}

/* Ensure text elements are centered */
.who-content-wrapper .section-kicker,
.who-content-wrapper .section-headline,
.who-content-wrapper .section-paragraph {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: none; /* Let the wrapper control max-width */
    text-wrap: balance;
    margin-bottom: var(--spacing-md); /* <-- Add space below */
}

/* NEW Rule for the image */
.who-section-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2; /* <-- Added 3:2 aspect ratio */
    object-fit: cover; /* <-- Ensures image fills ratio */
    border-radius: var(--border-radius-img);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.who-we-are-section .section-headline {
    margin-top: 0;
}

/* Add spacing between new paragraphs to prevent wall of text */
.who-content-wrapper .section-paragraph + .section-paragraph {
    margin-top: var(--spacing-md);
}

/* --- 1.7. Solution Section --- */
/* ------------------------------------------------------------- */

.solution-section {
    /* UPDATED: Set background to the navy variable */
    background-color: var(--color-bg-primary); 
    text-align: center;
    
    /* --- BLUEPRINT GRID BACKGROUND --- */
    --grid-line-color: rgba(255, 255, 255, 0.02); /* Faint light lines */
    background-image: 
        linear-gradient(var(--grid-line-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
    background-size: 40px 40px; /* Size of the grid squares */
}

/* Style for the new graphic */
.solution-graphic {
    display: block;
    width: 100%;
    max-width: 120px; /* Keeps it small and controlled */
    height: auto;
    margin: 0 auto var(--spacing-md) auto; /* Centers it and adds space below */
}

.solution-section .section-paragraph {
    max-width: 800px; /* Wider paragraphs for this section */
}
.solution-section .section-paragraph:last-of-type {
    margin-bottom: var(--spacing-lg); /* More space after body copy */
}

.solution-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    text-align: left;
}

.pillar-icon {
    font-size: 2.5rem; /* Sets icon size */
    color: var(--color-text-primary); /* Uses the primary text color as requested */
    margin-bottom: var(--spacing-sm);
}

.pillar-card {
    background-color: rgba(19, 19, 19, 0.75);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-img);
    border: 1px solid var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    /* ADDED: Smooth transition for hover effects */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pillar-card:hover {
    /* The "Lift" */
    transform: translateY(-5px);
    
    /* The "Glow" (a dark depth shadow + a subtle blue brand glow) */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 
                0 0 15px rgba(54, 142, 219, 0.3); /* Using raw --color-accent-primary value for the glow */
}

.pillar-title {
    font-size: 1.5rem;
    color: var(--color-text-primary);
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
}

.pillar-text {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    margin-bottom: 0;
}

.solution-section .cta-button {
    margin-top: 0; /* Let grid gap handle spacing */
}

/* This overrides the animation's transition and fixes the hover "jump"
.solution-section .cta-button-secondary {
    transition: all 0.3s ease;
    margin-top: 0;
} */

/* --- 2. "Why" Section (Philosophy) --- */
/* ------------------------------------------------------------- */
.why-section {
    display: flex;
    align-items: center;
    min-height: 60vh;
    background-color: var(--color-accent-highlight); /* Navy base */
    /* Dot Grid Pattern */
    background-image: radial-gradient(
        rgba(0, 0, 0, 0.5) 1px, /* Slightly darker dots for contrast on navy */
        transparent 1px
    );
    background-size: 10px 10px;
    position: relative; /* Needed if ::before were used, keep for consistency */
    overflow: hidden; /* Needed if ::before were used, keep for consistency */
}

.why-section .main-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    width: 100%;
    position: relative; /* Ensure content is above potential ::before */
    z-index: 1;
}

.why-image-wrapper {
    flex-basis: 40%;
    flex-shrink: 0;
}
.why-section-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-img);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.why-content-wrapper {
    flex-basis: 55%;
    flex-shrink: 0;
    text-align: left;
}
/* Ensure kicker, headline, paragraphs align left */
.why-content-wrapper .section-kicker,
.why-content-wrapper .section-headline,
.why-content-wrapper .section-paragraph {
    text-align: left;
}
/* Handle paragraph spacing and orphans */
.why-content-wrapper .section-paragraph {
    margin-bottom: var(--spacing-md);
    text-wrap: pretty; /* Prevent orphans */
}
.why-content-wrapper .section-paragraph:last-child {
    margin-bottom: 0;
}


/* --- 3. Lead Magnet Section --- */
/* ------------------------------------------------------------- */
.lead-magnet-section {
    display: flex;
    align-items: center;
    min-height: 60vh;
    background-color: var(--color-brand-brown); /* Navy base */
    /* Dot Grid Pattern */
    background-image: radial-gradient(
        rgba(0, 0, 0, 0.5) 1px, /* Slightly darker dots for contrast on navy */
        transparent 1px
    );
    background-size: 10px 10px;
}

.lead-magnet-section .main-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    width: 100%;
}

.lead-magnet-content-wrapper {
    flex-basis: 50%;
    flex-shrink: 0;
    text-align: left;
}
/* Ensure headline/paragraph align left and fill width */
.lead-magnet-section .section-headline,
.lead-magnet-section .section-paragraph {
    text-align: left;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
/* Ensure form aligns left and fills width */
.lead-magnet-section .embeddable-buttondown-form {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.lead-magnet-image-wrapper {
     flex-basis: 45%;
     flex-shrink: 0;
}
.lead-magnet-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-img);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    margin: 0; /* Remove default margins */
}

/* Embedded Form Styles (scoped to this section) */
.lead-magnet-section .formkit-form {
    margin-top: var(--spacing-md);
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.lead-magnet-section .formkit-form label {
    display: block;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
    font-size: 0.9rem;
    text-align: left;
}
.lead-magnet-section .formkit-fields {
    display: flex;
    flex-wrap: wrap; /* Allow stacking on small screens */
    gap: var(--spacing-sm);
    margin: 0;
}
.lead-magnet-section .formkit-field {
    flex-grow: 1; /* Input field takes available space */
}
.lead-magnet-section .formkit-input {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-bg-secondary);
    border-radius: var(--border-radius-base);
    font-size: var(--font-size-base);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}
.lead-magnet-section .formkit-submit {
    /* Use primary button styles */
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-accent-highlight);
    color: var(--color-text-primary);
    font-family: var(--font-family-header);
    border-radius: var(--border-radius-base);
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    margin: 0; /* Remove default margins */
}
.lead-magnet-section .formkit-submit:hover {
    opacity: 0.85;
}
.lead-magnet-section .formkit-guarantee { 
    margin-top: var(--spacing-sm);
    font-size: 0.8rem;
    text-align: left;
}
.lead-magnet-section .formkit-guarantee p {
    color: var(--color-text-secondary);
    margin: 0;
}

.lead-magnet-section .formkit-alert {
    background: #fde8e2; /* Error background */
    border: 1px solid #f2643b;
    color: #ea4110;
    border-radius: var(--border-radius-base);
    list-style: none;
    margin: 0 0 var(--spacing-sm) 0;
    padding: var(--spacing-sm);
    text-align: left;
    font-size: 0.9rem;
}
/* This hides the error box when it's empty */
.lead-magnet-section .formkit-alert:empty {
    display: none; 
}
/* This handles the success message */
.lead-magnet-section .formkit-alert-success {
    background-color: var(--color-bg-primary);
    border-color: var(--color-accent-primary);
    color: var(--color-text-primary);
}

/* Spinner logic */
.lead-magnet-section .formkit-submit {
    position: relative; /* Needed for spinner */
}
.lead-magnet-section .formkit-spinner {
    display: flex;
    height: 100%;
    width: 0; /* Hidden by default */
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    text-align: center;
    transition: all 300ms ease-in-out;
    opacity: 0;
}
.lead-magnet-section .formkit-submit[data-active] .formkit-spinner {
     opacity: 1;
     width: 50px; /* Show spinner on submit */
}
.lead-magnet-section .formkit-submit[data-active] span {
    opacity: 0; /* Hide text on submit */
}
.lead-magnet-section .formkit-spinner > div {
     margin: auto;
     width: 10px;
     height: 10px;
     background-color: var(--color-text-primary);
     border-radius: 100%;
     display: inline-block;
     opacity: 0.5;
}

/* --- 4. Content Grid Section --- */
/* ------------------------------------------------------------- */
.content-grid-section {
    text-align: center;
    /* Gradient background */
    background-image: transparent;
}


/* --- 5. Final CTA Section --- */
/* ------------------------------------------------------------- */
.final-cta-section {
    text-align: center;

    /* --- NEW: Animated Gradient Background --- */
    /* Use the same radial gradient as hero but keep it dark */
     background: radial-gradient(ellipse at center,
        var(--color-bg-secondary) 0%, /* Dark Gray center */
        var(--color-bg-primary) 70%  /* Fade to Primary Black */
    );
    background-size: 150% 150%; /* Adjust size as needed */
    animation: subtleDrift 20s ease infinite; /* Reuse existing animation */
    overflow: hidden; /* Contain gradient */
}

.cta-section-image {
    display: block;
    width: 100%;
    max-width: 400px; /* Reduced max-width */
    height: auto;
    margin: 0 auto var(--spacing-md); /* Center image, add space below */
    border-radius: var(--border-radius-img);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.final-cta-section .cta-button {
     margin-top: var(--spacing-sm); /* Reduced margin */
     margin-left: auto;
     margin-right: auto;
     display: table; /* Helper for centering inline-block */
}

/* --- 6. Testimonial Section --- */
/* ------------------------------------------------------------- */
.testimonial-section {
    text-align: center;
    background-color: var(--color-accent-highlight);
    /* Dot Grid Pattern */
    background-image: radial-gradient(
        rgba(0, 0, 0, 0.5) 1px, /* Faint dark dots */
        transparent 1px
    );
    background-size: 10px 10px;
}

/* Re-styled for use in the Google rating card */
.testimonial-stars {
    width: 120px;
    height: auto;
    color: #FFDF00; /* Gold color for stars */
    margin: var(--spacing-xs) 0;
}

.testimonial-headline {
    margin-bottom: var(--spacing-md);
}

/* --- NEW: Testimonial Header Grid --- */
.testimonial-header-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg); /* Space between header and slider */
}

.testimonial-header-content {
    flex: 1; /* Take up available space */
    text-align: left;
}

.testimonial-header-headline {
    font-family: var(--font-family-header);
    font-size: 2.5rem;
    color: var(--color-text-primary);
    line-height: 1.2;
    margin: 0 0 var(--spacing-md) 0;
}

/* New "Light" button style */
.cta-button-light {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-text-primary); /* White */
    color: var(--color-bg-primary); /* Dark Text */
    font-family: var(--font-family-header);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    border-radius: 50px; /* Pill shape */
    text-decoration: none;
    cursor: pointer;
    margin-top: 0;
    transition: all 0.3s ease;
}
.cta-button-light:hover {
    opacity: 0.85;
    color: var(--color-bg-primary);
}

.testimonial-google-rating {
    flex-shrink: 0; /* Don't shrink */
    background-color: var(--color-bg-primary);
    border-radius: var(--border-radius-img);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 250px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.testimonial-google-logo {
    width: 100px;
    height: auto;
    margin-bottom: var(--spacing-sm);
}

.testimonial-google-rating-text {
    font-family: var(--font-family-header);
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}
/* --- END: Testimonial Header Grid --- */


.testimonial-slider-wrapper {
    max-width: 800px;
    margin: 0 auto; /* Center slider */
}
.testimonial-slider {
    display: flex;
    overflow-x: auto; /* Allow horizontal scroll/swipe */
    scroll-snap-type: x mandatory; /* Snap slides */
    -webkit-overflow-scrolling: touch; /* Smooth iOS scroll */
    scrollbar-width: none; /* Hide scrollbar (Firefox) */
    -ms-overflow-style: none;  /* Hide scrollbar (IE/Edge) */
}
.testimonial-slider::-webkit-scrollbar { /* Hide scrollbar (Chrome/Safari) */
    display: none;
}

.testimonial-slide {
    flex: 0 0 100%; /* Full width slide */
    scroll-snap-align: center; /* Snap align center */
    padding: var(--spacing-md); /* Internal padding */
    box-sizing: border-box;
}
.testimonial-quote {
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-sm); /* Space below quote */
}
.testimonial-author {
    display: block;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-style: normal;
}
.testimonial-title {
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    font-size: 0.9em;
}

.testimonial-dots {
    margin-top: var(--spacing-md);
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
}
.testimonial-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-text-secondary); /* Inactive dot */
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.testimonial-dot.active {
    background-color: var(--color-text-primary); /* Active dot */
}


/* --- 7. Mobile Responsive Overrides --- */
/* ------------------------------------------------------------- */
@media (max-width: 800px) {

    /* --- Hero Fold --- */
    .hero-section .main-container {
        flex-direction: column;
        /* UPDATED: Reduced gap */
        gap: var(--spacing-md);
    }
    .hero-content-wrapper { align-items: center; width: 100%; }
    .hero-cta-group { flex-direction: column; width: 100%; max-width: 400px; align-items: stretch; }
    .hero-cta-group .cta-button, .hero-cta-group .cta-button-secondary { text-align: center; }
    .hero-headline { font-size: 2.25rem; line-height: 1.2; text-align: center; }
    .hero-subheadline { text-align: center; font-size: 1.1em; }
    .hero-image-wrapper { width: 100%; max-width: 400px; margin: 0 auto; }
    .hero-section { min-height: auto; } /* Let content define height on mobile */

    /* --- ADD THESE NEW RULES --- */
    .hero-section-centered .hero-headline,
    .hero-rotating-headline {
        font-size: 2rem; /* Reduced from 2.75rem */
        line-height: 1.2;
    }

/* --- "Who We Are" Section (Mobile) --- */
    .who-we-are-section .main-container {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    /* NEW/UPDATED RULES: Tell both children to be full width */
    .who-video-wrapper,
    .who-content-wrapper {
        flex-basis: auto; /* Resets the 50%/45% desktop basis */
        width: 100%;
    }

    .who-content-wrapper {
        text-align: center; /* Center text on mobile */
    }
    
    .who-content-wrapper .section-kicker,
    .who-content-wrapper .section-headline,
    .who-content-wrapper .section-paragraph {
        text-align: center; /* Center text on mobile */
        margin-left: auto;
        margin-right: auto;
        max-width: 700px;
    }

    /* --- Solution Section (Mobile) --- */
    .solution-pillars-grid {
        grid-template-columns: 1fr; /* Stack pillars on mobile */
    }

    /* --- "Why" Section Fold --- */
    .why-section .main-container { flex-direction: column; gap: var(--spacing-md); } /* Keep md gap */
    .why-image-wrapper { width: 100%; max-width: 400px; margin: 0 auto; }
    .why-content-wrapper { text-align: center; }
    .why-content-wrapper .section-kicker, .why-content-wrapper .section-headline, .why-content-wrapper .section-paragraph { text-align: center; }
    .why-content-wrapper .section-headline { font-size: 2rem; line-height: 1.2; }
    .why-section { min-height: auto; } /* Let content define height on mobile */


    /* --- Lead Magnet Fold --- */
    .lead-magnet-section .main-container { flex-direction: column; gap: var(--spacing-md); } /* Keep md gap */
    .lead-magnet-content-wrapper, .lead-magnet-image-wrapper { flex-basis: auto; width: 100%; text-align: center; }
    .lead-magnet-section .section-headline, .lead-magnet-section .section-paragraph { text-align: center; max-width: 700px; margin-left: auto; margin-right: auto; }
    .lead-magnet-section .embeddable-buttondown-form { max-width: 500px; margin-left: auto; margin-right: auto; }
    .lead-magnet-section .embeddable-buttondown-form label { text-align: left; }
    .lead-magnet-image-wrapper { max-width: 400px; margin-left: auto; margin-right: auto; margin-top: 0; order: 1; /* Image first */ }
    .lead-magnet-content-wrapper {
        order: 2; /* Text/Form second */
        /* REMOVED: margin-bottom as gap should handle spacing */
        /* margin-bottom: var(--spacing-md); */
    }
    .lead-magnet-section { min-height: auto; } /* Let content define height on mobile */

    /* Stack form fields on mobile */
    .lead-magnet-section .formkit-fields {
    flex-direction: column; /* Stack input and button */
}

    /* --- Final CTA Section (Mobile) --- */
    .cta-section-image { max-width: 90%; }

    /* --- Testimonial Section (Mobile) --- */
    .testimonial-header-grid {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    .testimonial-header-content {
        text-align: center;
    }
    .testimonial-header-headline {
        font-size: 2rem;
    }
    .testimonial-google-rating {
        width: 100%;
        max-width: 400px;
    }
}


/* --- 8. Keyframes --- */
/* ------------------------------------------------------------- */

/* Used for Hero and Lead Magnet backgrounds */
@keyframes subtleDrift {
    0% { background-position: 50% 50%; }
    25% { background-position: 40% 60%; }
    50% { background-position: 60% 40%; }
    75% { background-position: 55% 50%; }
    100% { background-position: 50% 50%; }
}