body {
    background-color: #FFFFFF;
    margin: 0;
    font-family: 'Quattrocento Sans', sans-serif;
    color: #7C7B7B;
}
#under-development-banner {
    background-color: #FF9800;
    color: #FFFFFF;
    padding: 16px 0;
    text-align: center;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 101;
}
#under-development-banner p {
    margin: 0;
    font-size: 1rem;
}
* {
    box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
a {
    color: inherit;
    text-decoration: none;
}
strong {
    font-weight: 700;
}
h1, h2 {
    margin: 0;
    padding: 0;
}
h2 {
    font-size: 2rem;
}
div.wrapper {
    position: relative;
    max-width: 1020px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}
#menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #6D4F77;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
#menu .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    min-height: 60px;
    gap: 10px;
}
#menu-toggle {
    display: none;
    border: none;
    background-color: #F5B3C4;
    color: #6D4F77;
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: bold;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
#main-nav {
    display: flex;
    touch-action: manipulation;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#main-nav li {
    margin: 0;
}
#main-nav li a {
    display: inline-block;
    color: #6D4F77;
    background-color: #F5B3C4;
    padding: 8px 12px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.95rem;
}
#main-nav li a:hover {
    background-color: #999999;
    color: #ffffff;
}
#intro {
    padding: 140px 0 60px;
    background-color: #FFFFFF;
}
#intro .wrapper {
    display: grid;
    /* We are changing the columns so the text gets 1 fraction, and Shirley gets a massive 550px column */
    grid-template-columns: 1fr minmax(350px, 550px); 
    gap: 30px;
    align-items: center; /* This centers the text vertically next to her taller image */
}
#intro-logo {
    display: block;
    width: 100%;
    max-width: 350px; 
    height: 120px;
    background-image: url(talktoshirley.png);
    background-repeat: no-repeat;
    background-size: contain;
    text-indent: -9999px;
    margin-bottom: 10px;
    grid-column: 1; /* Maps to the left column */
    grid-row: 1;    /* Maps to the top row */
}
#intro-text {
    color: #7C7B7B;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.8;
    grid-column: 1;
    grid-row: 2;
    flex: none; /* Kills the invisible straightjacket */
}
#intro-text h1 {
    font-size: 1.75rem;
    color: #6D4F77; /* Using her gorgeous purple theme color */
    margin: 0 0 15px 0;
    font-family: 'Quattrocento Sans', sans-serif;
    font-weight: 700;
}
#intro-text a {
    color: #7C7B7B;
    text-decoration: underline;
}
img#intro-shirley {
    width: 100%;
    max-width: 550px;
    border-radius: 12px;
    grid-column: 2;
    grid-row: 1 / 3;
    flex: none; /* Kills the invisible straightjacket */
}
#about-me {
    padding: 90px 0 80px;
    background-color: #6D4F77;
    background-image: url(purple_faces.gif);
    background-position: top center;
    background-repeat: repeat;
    background-size: auto;
    color: #FFFFFF;
}
#about-me .wrapper {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(260px, 1fr);
    gap: 30px;
    align-items: start;
}
#about-me h2 {
    grid-column: 1 / -1;
    color: #FFFFFF;
}
img#about-me-shirley,
img#practice-shirley {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}
#about-me-col1,
#about-me-col2 {
    font-size: 1rem;
    line-height: 1.75;
}
#services-for-you {
    padding: 90px 0 80px;
    background-color: #FFFFFF;
    color: #7C7B7B;
}
#services-for-you .wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 30px;
    align-items: start;
}
#services-for-you h2 {
    grid-column: 1 / -1;
    color: #F5B3C4;
}
#services-for-you-col1,
#services-for-you-col2,
#services-for-you-col3 {
    font-size: 1rem;
    line-height: 1.75;
}
#services-for-you-col1 ul,
#services-for-you-col2 ul,
#services-for-you-col3 ul,
#services-for-businesses-and-groups-col2 ul,
#how-to-workshops-col2 ul {
    margin: 0;
    padding-left: 18px;
}
#services-for-you-col1 ul li,
#services-for-you-col2 ul li,
#services-for-you-col3 ul li,
#services-for-businesses-and-groups-col2 ul li,
#how-to-workshops-col2 ul li {
    margin-bottom: 10px;
}
#services-for-you-col3-highlight1,
#services-for-you-col3-highlight2 {
    display: block;
    font-weight: bold;
    color: #6D4F77;
    margin-top: 15px;
}
#services-for-you-col3-highlight2 a {
    color: #6D4F77;
    text-decoration: underline;
}
#services-for-you img {
    width: auto;
    max-width: 180px;
    margin: 10px 10px 0 0;
    display: inline-block;
    vertical-align: top;
    border-radius: 12px;
}
#services-for-businesses-and-groups {
    padding: 90px 0 80px;
    background-color: #FFDBE5;
    background-image: url(pink_faces.gif);
    background-position: top center;
    background-repeat: repeat;
    background-size: auto;
    color: #7C7B7B;
}
#services-for-businesses-and-groups .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    align-items: start;
}
#services-for-businesses-and-groups h2 {
    grid-column: 1 / -1;
    color: #6D4F78;
}

/* --- Clean text wrapping without rigid row locks --- */
#services-for-businesses-and-groups-col1 {
    font-size: 1rem;
    line-height: 1.75;
}
#services-for-businesses-and-groups-col2 {
    grid-column: 2 / 4; /* Spans across columns 2 and 3 */
    font-size: 1rem;
    line-height: 1.75;
}

/* --- Let images fall neatly underneath text columns --- */
#services-for-businesses-and-groups-polaroid {
    grid-column: 1 / 2;
}
#services-for-businesses-and-groups-laughtertherapy {
    grid-column: 2 / 3;
}
#services-for-businesses-and-groups-alternativeteambuilding {
    grid-column: 3 / 4;
}

/* Keep the images neatly sized and centered inside their columns */
#services-for-businesses-and-groups img {
    width: 100%;
    max-width: 240px; 
    border-radius: 12px;
    display: block;
    margin: 20px auto 0; 
}
#how-to-workshops {
    padding: 90px 0 80px;
    background-color: #FFFFFF;
    color: #7C7B7B;
}
#how-to-workshops .wrapper {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(260px, 1fr);
    gap: 30px;
    align-items: start;
}
#how-to-workshops h2 {
    grid-column: 1 / -1;
    color: #F5B3C4;
}
#how-to-workshops-col1,
#how-to-workshops-col2 {
    font-size: 1rem;
    line-height: 1.75;
}
#how-to-workshops-col2-highlight {
    display: block;
    font-weight: bold;
    color: #F5B3C4;
    margin-top: 15px;
}
#how-to-workshops-improve-communication-skills,
#how-to-workshops-lift-your-mood-quickly {
    width: auto;
    max-width: 320px;
    border-radius: 12px;
    display: block;
    margin-top: 20px;
}
#testimonials {
    padding: 90px 0 80px;
    background-color: #6D4F77;
    background-image: url(purple_faces.gif);
    background-position: top center;
    background-repeat: repeat;
    background-size: auto;
    color: #FFFFFF;
}
#testimonials .wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 30px;
    align-items: start;
}
#testimonials h2 {
    grid-column: 1 / -1;
    color: #FFFFFF;
}
#testimonials-col1,
#testimonials-col2,
#testimonials-col3 {
    font-size: 1rem;
    line-height: 1.75;
}
#testimonials-col3 a {
    color: #FFFFFF;
    text-decoration: underline;
}
#costs {
    padding: 90px 0 80px;
    background-color: #FFFFFF;
    color: #7C7B7B;
}
#costs .wrapper {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
    gap: 30px;
    align-items: start;
}
#costs h2 {
    grid-column: 1 / -1;
    color: #F5B3C4;
}
#costs-col1,
#costs-col2 {
    font-size: 1rem;
    line-height: 1.75;
}
#costs img {
    width: 100%;
    border-radius: 12px;
    display: block;
    margin-top: 20px;
}
#costs video {
    width: 100%;
    border-radius: 12px;
    margin-top: 15px;
}
#contact-me {
    padding: 90px 0 80px;
    background-color: #FFDBE5;
    background-image: url(pink_faces.gif);
    background-position: top center;
    background-repeat: repeat;
    background-size: auto;
    color: #7C7B7B;
}
/* 1. Kill the old 2-column layout dead */
#contact-me .wrapper {
    display: block !important; 
    width: 100%;
}

/* 2. Give the intro text some breathing room before the columns start */
#contact-me-intro {
    font-size: 1rem;
    line-height: 1.75;
    margin-top: 15px;
    margin-bottom: 50px; 
}

/* 3. Force the 3 columns to stretch evenly across the entire screen */
#contact-me-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 30px;
    align-items: start; /* CHANGED: Aligns item tops cleanly */
    max-width: 900px;   /* ADDED: Keeps columns compact and readable */
    margin: 0 auto;     /* ADDED: Centers the grid block */
}

/* 4. Keep the icon and text side-by-side inside their specific columns */
.contact-info-group {
    display: flex;
    align-items: center;
    gap: 15px;
}
.contact-text-group {
    display: flex;
    flex-direction: column;
}
#contact-me h2 {
    grid-column: 1 / -1;
    color: #6D4F78;
}
#contact-me-col1 {
    font-size: 1rem;
    line-height: 1.75;
}
#contact-me-icon-phone,
#contact-me-icon-envelope {
    width: 60px;
    margin-top: 10px;
}
#contact-me-phone-label,
#contact-me-email-label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}
#contact-me-phone-number,
#contact-me-email-address {
    display: block;
    color: #6D4F78;
    font-weight: bold;
    font-size: 1.15rem;
    margin-top: 6px;
}
#contact-me-email-address-container {
    padding: 0;
    margin-top: 4px;
}
#footer {
    padding: 60px 0;
    background-color: #FFFFFF;
    color: #7C7B7B;
}
#footer .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px;
}
#footer-content {
    flex: 1 1 320px;
    font-size: 1rem;
    line-height: 1.75;
}
img#footer-logo {
    flex: 0 0 220px;
    max-width: 220px;
    border-radius: 12px;
}
a#bacp-logo {
    flex: 0 0 160px;
    align-self: center;
}
a#bacp-logo img {
    width: 100%;
    height: auto;
    display: block;
}
@media screen and (max-width: 1000px) {
    /* Menu styling remains exactly the same */
    #menu-toggle {
        display: inline-flex;
        width: 100%;             
        justify-content: center; 
    }
    #main-nav {
        display: none;
        flex-direction: column;
        width: 100%;
        margin-top: 10px;
        padding: 10px 0;
        background-color: #6D4F77;
    }
    #main-nav.open {
        display: flex;
    }
    #main-nav li a {
        width: 100%;
        text-align: center;
    }
    /* 1. Turn OFF the grid and force the vertical stack */
    #intro .wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* 2. Ensure the text takes up the full width so it's easy to read */
    #intro-text {
        width: 100%;
    }

    /* 3. Drop Shirley underneath the text with some breathing room */
    img#intro-shirley {
        margin-top: 30px;
        width: 100%;
        max-width: 450px;
    }

    /* --- THE FIX STARTS HERE --- */

    /* 1. Stop using Grid on mobile. Switch to Flexbox to prevent overlapping text and rigid stacking */
    #about-me .wrapper,
    #services-for-you .wrapper,
    #services-for-businesses-and-groups .wrapper,
    #how-to-workshops .wrapper,
    #testimonials .wrapper,
    #costs .wrapper,
    #contact-me .wrapper,
    #footer .wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px; /* Tighter general spacing instead of massive grid gaps */
    }

    /* 2. Reduce the massive 90px padding on mobile sections to tighten up the layout */
    #intro, #about-me, #services-for-you,
    #services-for-businesses-and-groups, #how-to-workshops,
    #testimonials, #costs, #contact-me {
        padding: 50px 0 40px;
    }

    /* 3. Fix the Contact section. Group the loose elements tightly and center them */
    #contact-me .wrapper {
        gap: 5px; /* Tiny gap so the icon, label, and email don't fly apart */
        align-items: center;
        text-align: center;
    }
    #contact-me-col1 {
        margin-bottom: 20px;
    }
    #contact-me-icon-phone,
    #contact-me-icon-envelope {
        margin-top: 15px;
    }

    /* --- CONTACT ME: MOBILE STACK --- */
    /* This overrides the desktop grid ONLY when the screen drops below 1000px */
    #contact-me-grid {
        display: flex !important;
        flex-direction: column !important; /* Force vertical stack on mobile only */
        align-items: center !important;
        gap: 35px !important; 
    }
    .contact-info-group {
        flex-direction: column !important; /* Icon on top of text on phone */
        text-align: center !important;
        gap: 10px !important;
    }
    #contact-me-intro,
    #contact-me-col1 {
        text-align: center !important;
    }
    #contact-me-email-address-container {
        word-break: break-all !important;
    }

    /* 4. Handle images natively so they center and stack beautifully */
    #services-for-you img,
    #services-for-businesses-and-groups img,
    #how-to-workshops-improve-communication-skills,
    #how-to-workshops-lift-your-mood-quickly,
    #costs img,
    img#about-me-shirley,
    img#practice-shirley {
        width: 100%;
        max-width: 400px;
        margin: 15px auto;
    }
    
    /* Ensure Headings behave properly */
    h2 {
        width: 100%;
        margin-bottom: 10px;
    }

    /* --- THE FIX ENDS HERE --- */

    #menu .wrapper {
        padding: 0 15px;
    }
/* --- SERVICES FOR YOU: MOBILE 2-COLUMN IMAGE GRID --- */
    
    /* 1. Switch this specific container back to a 2-column grid */
    #services-for-you .wrapper {
        display: grid !important; 
        grid-template-columns: 1fr 1fr !important; /* Creates two equal columns */
        gap: 15px !important;
        align-items: center;
    }
    
    /* 2. Force the title and all three text blocks to stretch across BOTH columns */
    #services-for-you h2,
    #services-for-you-col1,
    #services-for-you-col2,
    #services-for-you-col3 {
        grid-column: 1 / -1 !important; 
    }
    
    /* 3. Let the images naturally fall into the 2 columns without blowing up */
    #services-for-you img {
        width: 100% !important; 
        max-width: 180px !important; /* Prevents them from getting blocky */
        margin: 0 auto !important; 
        height: auto;
    }
/* --- SERVICES FOR BUSINESSES: MOBILE 3-IMAGE ROW --- */
    
    /* 1. Turn the mobile wrapper into a mini 3-column grid */
    #services-for-businesses-and-groups .wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 10px !important; 
        align-items: center;
    }

    /* 2. Force the title and text to stretch across all 3 columns so they stay readable */
    #services-for-businesses-and-groups h2,
    #services-for-businesses-and-groups-col1,
    #services-for-businesses-and-groups-col2 {
        grid-column: 1 / -1 !important;
    }

    /* 3. Un-hide the images and ensure they don't blow up */
    #services-for-businesses-and-groups img {
        display: block !important; /* Overrides the earlier 'display: none' */
        width: 100% !important;
        height: auto !important;
        margin: 15px auto 0 !important;
    }

    /* 4. Lock each image perfectly into its own column side-by-side */
    #services-for-businesses-and-groups-polaroid {
        grid-column: 1 / 2 !important;
    }
    #services-for-businesses-and-groups-laughtertherapy {
        grid-column: 2 / 3 !important;
    }
    #services-for-businesses-and-groups-alternativeteambuilding {
        grid-column: 3 / 4 !important;
    }
/* --- HOW TO WORKSHOPS: MOBILE 2-IMAGE ROW --- */
    
    /* 1. Turn this section into a 2-column grid */
    #how-to-workshops .wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
        align-items: center;
    }

    /* 2. Force the heading and text blocks to stretch across both columns */
    #how-to-workshops h2,
    #how-to-workshops-col1,
    #how-to-workshops-col2 {
        grid-column: 1 / -1 !important;
    }

    /* 3. Bring the images back and size them so they don't look blocky */
    #how-to-workshops-improve-communication-skills,
    #how-to-workshops-lift-your-mood-quickly {
        display: block !important; /* Overrides any previous display: none */
        width: 100% !important;
        max-width: 180px !important; 
        margin: 15px auto 0 !important;
        height: auto !important;
    }

    /* 4. Lock each image into its own column side-by-side */
    #how-to-workshops-improve-communication-skills {
        grid-column: 1 / 2 !important;
    }
    #how-to-workshops-lift-your-mood-quickly {
        grid-column: 2 / 3 !important;
    }
    /* --- FOOTER: MOBILE 3-IMAGE ROW --- */
    
    /* 1. Tell the footer wrapper to align its text content on top and create a row for logos */
    #footer .wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    /* Center the copyright text full-width */
    #footer-content {
        text-align: center;
        width: 100%;
        flex: none !important;
    }

    /* 2. Create an inline row containment for the logos if needed, or target them directly if they sit in the wrapper */
    #footer img, 
    #footer a {
        display: inline-block !important;
    }

    /* 3. Force all three images to live side-by-side cleanly and stay small */
    #footer .wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important; /* 3 equal columns */
        gap: 15px !important;
        align-items: center;
    }

    /* Make sure the text block stays on top spanning across all 3 columns */
    #footer-content {
        grid-column: 1 / -1 !important; 
    }

    /* Keep the images crisp, high quality, and scale down naturally */
    img#footer-logo,
    a#bacp-logo,
    #footer img {
        width: 100% !important;
        max-width: 120px !important; /* Limits the max sizing so they stay small and sharp */
        height: auto !important;
        margin: 0 auto !important;
        flex: none !important;
    }
    
    a#bacp-logo {
        grid-column: 3 / 4 !important;
    }
    /* --- ABOUT ME: MOBILE SIDE-BY-SIDE POLAROIDS --- */
    
    /* 1. Reconfigure the about-me grid on mobile to accommodate side-by-side images */
    #about-me .wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Forces two equal columns */
        gap: 15px !important;
        align-items: center;
    }

    /* 2. Ensure the heading and text blocks span full width across both image columns */
    #about-me h2,
    #about-me-col1,
    #about-me-col2 {
        grid-column: 1 / -1 !important;
    }

    /* 3. Explicitly size and position the two polaroids side-by-side */
    img#about-me-shirley {
        grid-column: 1 / 2 !important;
        grid-row: 2 !important; 
        width: 100% !important;
        max-width: 45% !important; /* CHANGED: Allows it to grow and fill the space on tablets */
        margin: 10px auto !important;
    }

    img#practice-shirley {
        grid-column: 2 / 3 !important;
        grid-row: 2 !important; 
        width: 100% !important;
        max-width: 45% !important; /* CHANGED: Allows it to grow and fill the space on tablets */
        margin: 10px auto !important;
    }

    /* 4. Ensure the columns of biography text cleanly stack underneath the image row */
    #about-me-col1 {
        grid-row: 3 !important;
    }
    #about-me-col2 {
        grid-row: 4 !important;
    }
    /* --- INTRO: CLEAR THE FIXED MENU --- */
    #intro {
        padding-top: 130px !important; 
    }
    /* --- INTRO: CENTER LOGO AND TEXT --- */
    #intro-logo {
        height: 160px !important; 
        background-position: center center !important; /* Centers the actual image inside the block */
        margin: 0 auto 20px auto !important; /* The Magic: Forces equal space on left and right */
        width: 100% !important;
        display: block !important;
    }
    
    #intro-text {
        text-align: center !important; 
        width: 100% !important; 
    }
}
@media screen and (max-width: 640px) {
    div.wrapper {
        padding: 0 15px;
    }
    #intro {
        padding-top: 120px;
    }
    #intro-text {
        font-size: 0.98rem;
    }
    h2 {
        font-size: 1.75rem;
    }
    #menu-toggle {
        width: 100%;
        justify-content: center;
    }
    #main-nav li a {
        font-size: 0.95rem;
        padding: 10px;
    }
    #contact-me .wrapper {
        grid-template-columns: 1fr;
    }
    /* Scale the polaroids back down cleanly on small phone screens */
    img#about-me-shirley,
    img#practice-shirley {
        max-width: 140px !important;
    }
    
}