html {
    scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    line-height: 1.6; /* Improves readability */
    color: black;
}
h1, h2, h3, h4, p, ul, ol {
    margin-top: 0;
}

#navbar {
    /* REMOVED: justify-content: space-between; */
    display: flex;
    align-items: center;
    background-color: #f6a900;
    position: fixed;
    width: 100%;
    z-index: 1000;
    /* Since we're using nav-container now, we just center everything */
    padding: 0;
    margin: 0;
    height: 80px;
    max-height: 80px;
    border-bottom: 2px solid black;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.7);
}

.menu-toggle {
    display: none; 
}

.nav-container {
    display: flex;
    justify-content: space-between; /* This is where the space-between belongs */
    align-items: center;
    width: 100%; /* Ensure the container spans the full width of the navbar */
    padding: 0;
    height: 100%;
}

.logo {
    height: 100%;
}

.logo img {
    /* Set a reasonable height for the logo */
    height: 100%;
    /* Ensure the width scales proportionally */
    width: auto; 
    /* Add padding/margin to separate it from the edge */
    background-color: white;
}

/* Navigation links styling */
.nav-links {
    display: flex;
    /* REMOVE justify-content: flex-end; and margin-right: 20px */
    list-style: none; /* Good practice for ul */
    padding: 0;
    margin: 0 20px 0 0; /* Use margin-right here for spacing */
    gap: 5px;
}

.nav-links a {
    display: flex;
    justify-content: center; /* Center the text horizontally inside the button */
    align-items: center; /* Center the text vertically inside the button */
    text-align: center; /* Ensure text is centered */
    white-space: normal; /* Allow text to wrap inside the button */
    max-width: 200px; /* Optional: Limit width if needed */
    word-wrap: break-word; /* Break long words if needed */
    color: black; /* Change text color */
    font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    padding: 20px 15px;
    border-radius: 5px;
    transition: text-shadow 0.2s, background-color 0.2s, color 0.2s; /* Add transition for hover effect */
}

.nav-links a:hover {
    /*background-color: rgba(255, 255, 255, 0.2);  Change background on hover */
    text-shadow: 0px 0px 5px #f6a900;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    transition-duration: 0.7s;
}

/*----------------------------------------------------- */
/* MAIN CONTENT STYLES                                  */
/* ---------------------------------------------------- */


main {
    padding-top: 80px; /* Offset for fixed navbar height */
    min-height: 400vh !important;
    background-image: url("../Imagery/Equipment%20pictures/mixer8.jpeg");
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

h1 {
    font-family:'Times New Roman', Times, serif;
}
h2, h3, h4, h5 {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
p {
    font-size: 1.1rem;
    margin-bottom: 15px;
}

#intro, .intro-background {
    background-color: rgba(0, 0, 0, 0.7);
}
#intro {
    /* Since we removed the white background here, we need a base font color */
    color: white;
    /* Use Flexbox to center content vertically on the screen */
    display: flex;
    justify-content: center; 
    align-items: center;
    text-align: center; /* Center text inside the section */
    min-height: 40vh;
    width: 100%;
}

/* Ensure the content wrapper takes up a meaningful portion of the center */
#intro .section-content {
    /* Override any content-bar padding/margin if necessary */
    width: 100%;
    padding: 20px;
    margin: 0 auto;
}
#intro h1 {
    font-size: clamp(2rem, 4vw + 0.5rem, 8rem);
    font-family: 'Times New Roman', Times, serif;
    text-shadow: 0px 0px 20px #f6a900; /* Add text shadow for readability */
}
#intro p {
    font-size: clamp(0.5rem, 1.5rem, 3rem); /* Large, easy-to-read description */
    font-weight: 300;
    margin-bottom: 40px;
    /* Ensure the text color is explicitly white if needed */
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0px 0px 2px black; /* Add text shadow for readability */
}

/* Make sure the CTA button is styled correctly */
#intro .cta-button {
    /* You might need to adjust the margin top here to space it correctly */
    margin: 20px auto 20px;
}

.content-bar {
    /* 1. Dimensions & Appearance */
    width: 100%;
    background-color: white; /* The crucial solid white bar */
    color: black;
    
    /* REMOVED: min-height: 100vh; */
    
    /* 2. Positioning & Stacking */
    position: relative; 
    z-index: 5; /* Ensure content bars stack *above* the fixed parallax images */
    display: flex;
    justify-content: center; /* Center the section-content wrapper */
    align-items: flex-start; /* Start content at the top of the bar */
}

.section-content {
    /* Set a max width for readability and center the block */
    max-width: 95vw;
    min-width: 60vw;
    width: 65%; 
    
    /* Generous Vertical Padding: This creates the "tall bar" effect */
    padding: 80px 0; /* Add 80px top/bottom padding inside the content wrapper */
    margin: 0 auto; /* Center the content wrapper horizontally */
    
    box-sizing: border-box;
}

#offers h3 {
    font-size: 1.4rem;
    color: #f6a900;
}

#showcase h2 {
    text-align: center;
}

#showcase .section-content {
    width: 90vw;
}

/* Container for the two audio examples */
.audio-comparison {
    display: flex; /* Enables side-by-side layout */
    margin: 40px 0; /* Vertical space above and below the comparison section */
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* space between cards */
    justify-content: center; /* center the row */
}

/* Individual audio example column */
.audio-comparison .audio-column {
    /* Each column takes up roughly half the space */
    flex: 1 1 300px; 
    /* Ensures a min-width on the column so it doesn't get too squished */
    min-width: 300px;
    max-width: 600px;
}

.audio-column {
    /* Inherited flex: 1 and min-width: 300px from previous step */
    
    /* Apply Card-like styling to the column container */
    padding: 25px; 
    border-radius: 8px;
    background-color: #ffffff; /* White background */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    border: 1px solid #eee; /* Light border */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Optional: Add a subtle hover effect like the cards had */
.audio-column:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Slightly darker shadow on hover */
    /* transform: translateY(-3px); /* Removed this previously, so we'll stick to just shadow */
}

/* Style for the titles */
.audio-comparison h3 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: 1.15rem; /* Make the title slightly more prominent */
    font-weight: 600;
}

/* Style for the native audio player */
.audio-comparison audio {
    width: 100%; 
    height: 40px; /* Standardizing the height */
    
    /* LIMITED STYLING FOR NATIVE CONTROLS */
    /* This makes the player box match the card style */
    background-color: #f0f0f0; /* Very light gray background for the player box */
    border-radius: 4px;
    
    /* Change the color of the controls (limited browser support) */
    -webkit-filter: invert(10%); /* This is a common but non-standard hack */
    filter: invert(10%); 
    
    /* The most effective, cross-browser styling for native controls is setting the accent color */
    accent-color: #f6a900; /* Sets the progress bar and volume slider color to your gold/yellow CTA color */
    color: #f6a900;
}

/* Text below the showcase section */
#showcase p {
    max-width: 800px;
    margin: 40px auto;
    line-height: 1.7;
    text-align: center;
}

/*#services .section-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

}
/* Layout for the three main services */
.main-service-list {
    display: grid;
    /* Create three equally sized columns */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px; /* Space between the columns/cards */
    padding: 20px 0;
    margin-bottom: 40px;
}
/* Style for each main service item */
.main-service-list li {
    border: 1px solid #ddd;
    border-top: 5px solid #f6a900; /* Gold top border accent */
    border-radius: 5px;
    padding: 20px;
    background-color: #fcfcfc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.main-service-list h4 {
    color: #0e0e0eff; /* Ensure headings are black and prominent */
    margin-top: 0;
    font-size: 1.3rem;
}
/* Styling for the Secondary Services container */
.secondary-services {
    border-top: 1px solid #eee;
    padding-top: 30px;
    margin-bottom: 40px;
}
.secondary-service-list li {
    padding: 10px 0;
    border-left: 3px solid #ddd; /* Subtle left border to group services */
    padding-left: 15px;
    margin-bottom: 15px;
}
.secondary-service-list h4 {
    font-size: 1.2rem;
    color: #444;
}
.main-service-list, 
.secondary-service-list {
    list-style: none; /* Removes the dots/bullets */
    padding-left: 0; /* Ensures the list starts flush left */
    list-style-type: none;
}
/* Styling for the Specialties Definition List */
.specialties dl {
    display: grid;
    /* Create two columns for the terms/definitions */
    grid-template-columns: 1fr 2fr; 
    gap: 15px 30px; /* Vertical and horizontal gap */
    margin-top: 20px;
    align-items: center;
}

/* Styling the Specialty Term */
.specialties dt {
    font-weight: bold;
    
    /* 1. REVERSE COLORS for contrast */
    background-color: #f6a900; /* Gold Background */
    color: #0e0e0eff; /* Black Text (High Contrast) */
    text-align: center;
    
    /* 2. ADD PADDING to make the background visible */
    padding: 5px 10px; 
    margin: -5px 0; /* Negative margin helps align it nicely in the grid */
    border-radius: 3px;
    
    /* Ensure the term aligns with the definition */
    grid-column: 1 / 2;
}

/* Styling the Specialty Description */
.specialties dd {
    margin-left: 0;
    grid-column: 2 / 3;
    /* Ensure no residual bottom margin creates extra space */
    margin-bottom: 0; 
}

#pricing .section-content{
    width: 80%;
}

/* Pricing container for the two main columns */
.pricing-container {
    display: flex;
    gap: 40px; 
    margin-top: 30px;
    justify-content: space-between; 
}

/* Ensure both columns share the available space */
.pricing-packages {
    width: 45%;
    box-sizing: border-box;
}
.pricing-packages h3, .pricing-details h3 {
    font-size: 1.4rem;
}

.pricing-details {
    width: 55%;
    box-sizing: border-box;
}

.package-card {
    border: 1px solid #ddd;
    border-left: 5px solid transparent; /* Prepare for hover accent */
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    background-color: #fcfcfc;
    transition: all 0.3s;
}

.package-card:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    border-left: 5px solid #f6a900; /* Gold highlight on hover */
}

.package-card h4 {
    font-size: 1.4rem;
}

/* Price Display */
.price-rate {
    font-weight: bold;
    margin: 10px 0 15px 0;
    line-height: 1.2;
}

.original-price {
    font-size: 1rem;
    color: #888;
    margin-right: 10px;
}

.offer-price {
    color: #f6a900; /* Gold accent for the launch offer */
    font-size: 1.2rem;
}

.description {
    font-size: 0.9rem;
    margin-bottom: 15px;
}

/* Nested UL inside the Premium Release card (for distribution details) */
.package-card ul {
    list-style: disc; /* Use standard disc for nested lists */
    list-style-position: inside; /* Keeps the text aligned */
    margin-top: 10px;
    padding-left: 15px;
    font-size: 0.9rem;
}

.pricing-details h3 {
    margin-top: 0;
}

/* Add-On Services List */
.secondary-rates ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 30px;
}

.secondary-rates li {
    display: flex;
    justify-content: space-between; /* Puts name on left, price on right */
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}

.service-name {
    font-weight: 500;
}

.service-price {
    font-weight: bold;
    color: #0e0e0eff;
}

/* Essential Terms (dl) Styling */
.essential-terms dl {
    /* Use the same grid alignment as the service specialties */
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px 0px;
    align-items: stretch;
    margin-top: 15px;
}

.essential-terms dt {
    /* Bold the term for emphasis */
    font-weight: bold;
    display: flex; 
    flex-direction: column; /* Optional, but standard practice for vertical centering */
    justify-content: center; /* THE FIX: Vertically centers the content inside the dt */
    height: 100%; /* Fills the grid cell height, enabling the border fix below */
    width: 100%;
    border-bottom: 1px solid lightgray;
    border-top: 1px solid lightgray;
    padding-right: 5px;
}

.essential-terms dd {
    margin-bottom: 10px;
    border-bottom: 1px solid lightgray;
    border-top: 1px solid lightgray;
    display: flex; 
    flex-direction: column; /* Optional, but standard practice for vertical centering */
    justify-content: center; /* THE FIX: Vertically centers the content inside the dt */
    height: 100%; /* Fills the grid cell height, enabling the border fix below */
    width: 100%;
    padding-left: 10px;
    margin-left: 0;
    margin-right: 0;
}

.pricing-details #service-agreement li a{
    color: #3d2a00;
}
.pricing-details #service-agreement li a:hover {
    color: #f6a900;
}
.pricing-details #service-agreement li::marker {
    color: #f6a900;
}

#contact form {
    max-width: 500px; /* Constrain the form width for better readability */
    margin: 30px auto 0 auto; /* Center the form and add top margin */
    padding: 20px;
    background-color: #fcfcfc; /* A very subtle background color for the form area */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.form-group {
    margin-bottom: 20px; /* Space between each field group */
    display: flex;
    flex-direction: column; /* Stacks the label and input vertically */
}

.form-group label {
    font-weight: bold;
    color: #333;
    margin-bottom: 8px; /* Space between label and input */
    font-size: 0.95rem;
}

#contact .section-content{
    text-align: center;
}

#contact input[type="email"],
#contact input[type="text"],
#contact textarea {
    width: 100%; /* Make inputs fill the form-group width */
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box; /* Includes padding/border in the element's total width/height */
    transition: border-color 0.3s;
}

#contact input[type="email"]:focus,
#contact input[type="text"]:focus,
#contact textarea:focus {
    border-color: #f6a900; /* Gold focus highlight */
    outline: none; /* Remove default blue focus outline */
    box-shadow: 0 0 0 3px rgba(246, 169, 0, 0.2); /* Subtle glow effect */
}

#contact textarea {
    resize: vertical; /* Allow vertical resizing, but not horizontal */
    min-height: 100px;
}

#contact .cta-button {
    /* If the button doesn't already span full width, you might add: */
    /* width: 100%; */
    
    margin-top: 10px; 
    /* The main CTA style should handle the rest (background, color, padding) */
}

.email-direct {
    text-align: center;
    margin-top: 30px;
    font-size: 1.3rem;
    font-family: inherit;
    color: #555;
}

/* Ensure the 'Email us' button/link looks consistent */
.email-direct .cta-button {
    display: inline-block;
    margin-left: 10px; /* Space it away from the "Or contact us directly:" text */
}

/* Social Icons Styling */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px; /* Space between icons */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    margin-top: 20px;
}

.social-icons a {
    text-decoration: none;
}

.social-icons img {
    width: 40px;
    height: 40px;
    transition: all 0.3s; /* Smooth hover effect */
    filter: drop-shadow(2px 2px 1px #3d2a00);
}
.social-icons img:hover {
    transform: scale(1.2); /* Slight enlarge on hover */
    filter: drop-shadow(0px 0px 2px #f6a900);
}

#about ul {
    padding-left: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
}

#about ul li {
    /* Ensure list items inherit the standard font size (0.9rem or whatever you use) */
    font-size: 1rem; 
    font-family: inherit;
    color: #3d2a00; /* Dark gold color for humourous list text */
    line-height: 1.6;
    position: relative; /* Essential for positioning the ::before element */
}

#about ul li::marker {
    color: #f6a900;
}

#about p a {
    color: #f6a900;
}

/* Core Styling for all CTA Buttons */
.cta-button, .cta-link {
    /* 1. Appearance */
    display: inline-block; /* Essential to allow padding and width */
    background-color: #f6a900; /* Primary Gold Color */
    color: #0e0e0eff; /* Text color is Black for maximum contrast against Gold */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; /* Use your clean heading/link font */
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* 2. Spacing and Shape */
    padding: 15px 30px;
    border-radius: 5px;
    border: none; /* Remove any default border */
    cursor: pointer;
    margin-top: 20px;
    
    /* 3. Transition for Hover Effect (Slower in, Faster out) */
    transition: background-color 0.5s ease-in-out, transform 0.5s ease-in-out, color 0.5s ease-in-out, text-shadow 0.5s ease-in-out; 
}

/* Hover State: Reverse the colors for a professional effect */
.cta-button:hover, .cta-link:hover {
    background-color: #0e0e0eff; /* Black background on hover */
    color: #f6a900; /* Gold text on hover */
    text-shadow: 0px 0px 5px #f6a900;
    /* Override transition duration for faster change-back (off-hover) */
    transition-duration: 0.2s; 
}

.parallax-break {
    /* 1. Dimensions */
    min-height: 60vh; /* Must be full screen to create the transition effect */
    width: 100%;
    
    /* 2. Positioning & Appearance */
    background-size: cover;
    background-position: center center;
    
    /* 3. THE PARALLAX MAGIC */
    background-attachment: fixed;
    z-index: 0;

    background-color: gray;
    filter: brightness(80%) contrast(120%);
}

#break-mixer {
    background-image: url('../Imagery/Equipment%20pictures/mixer8.jpeg');
}
#break-mic {
    background-image: url('../Imagery/Equipment%20pictures/microphone7.jpeg');
}
#break-piano {
    background-image: url('../Imagery/Equipment%20pictures/piano1.jpeg');
}
#break-recordPlayer {
    background-image: url('../Imagery/Equipment%20pictures/recordplayer4.jpeg');
}
#break-basses {
    background-image: url('../Imagery/Equipment%20pictures/basses1.jpeg');
}


/* ---------------------------------------------------- */
/* FOOTER STYLES                                       */
/* ---------------------------------------------------- */
/* Footer Styling */
#footer {
    display: block;
    padding: 20px;
    background-color: #000000; /* Solid background for footer */
    text-align: center;
    height: auto;
}

#footer p {
    margin: 0;
    font-size: 0.9em;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: white;
}

#footer p a {
    color: #f6a900;
    text-decoration: none;
}

footer p a:hover {
    text-decoration: underline;
    color: white;
}




/* Media Query for Mobile and Tablet */
@media (max-width: 900px) {
    body {
        box-sizing: border-box;
    }

    #navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
    }
    /* Hidden state (slides upward off-screen) */
    #navbar.hidden {
    transform: translateY(-100%);
    }

    .nav-container {
        /* Remove or comment out this line: */
        max-width: 100vw;
        
        /* Instead, let the content determine the width, but allow it to overflow */
        padding: 0; /* Keep the padding tight */
        justify-content: space-between;
    }

    /* 1. Hide the full list of links */
   .nav-links {
        position: absolute;
        top: 80px; 
        
        right: 0;
        left: 0; /* Ensure it doesn't align left */

        /* CRITICAL: Use 100% to push it entirely off-screen to the right (slides out based on its own width) */
        transform: translateX(100%); 
        
        /* CRITICAL: Must define transition on transform AND visibility */
        /* The visibility will hide it instantly *after* the 0.3s transform transition finishes */
        transition: transform 0.3s ease-in-out, visibility 0s 0.3s;

        width: 100vw; /* Take full viewport width */
        height: auto;
        
        background-color: #3d2a00;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        
        /* CRITICAL: Hide it visually but keep it in the DOM for the transform animation */
        visibility: hidden; 

        /* Keep grid layout active */
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        padding: 10px;
    }

    .nav-links ul {
        width: 100vw;
        margin: 0;
        padding: 0;

    }

    .nav-links li {
        /* Overriding flex/column settings */
        width: auto; 
        border-bottom: none; /* Remove horizontal border lines */
        
        /* Add a small border or background for visual separation in the grid */
        background-color: #f6a900; 
        border-radius: 4px;
        padding: 0; /* Remove padding from LI */
        margin: 0;
    }
    
    .nav-links a {
        color: black; /* Links stand out on dark background */
        font-size: 1.1rem;
        display: block;
        max-width: 100%;
        font-size: 0.9rem; /* Slightly smaller text */
    }

    /* 2. Show the toggle button */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 25px;
        background: transparent;
        border: none;
        cursor: pointer;
        margin-right: 15px;
        flex-shrink: 0; /* Prevent shrinking */
    }

    .menu-toggle .bar {
        height: 3px;
        width: 100%;
        background-color: #3d2a00; /* Bar color */
        border-radius: 10px;
        transition: all 0.3s ease-in-out;
    }

    /* 3. State for the OPEN menu (handled by JS) */
    .nav-links.open {
        /* VISIBLE STATE: Animate back to the origin */
        transform: translateX(0); 
        
        /* CRITICAL: Make it visible instantly when opening */
        visibility: visible;
        
        /* Reset visibility transition delay so it stays visible while sliding */
        transition-delay: 0s;
        
        /* Reset height constraints */
        max-height: 80vh;
        height: auto;
        
        /* Remove redundant styles */
        /* align-items: start; */
    }

    .logo {
        margin: 0;
        flex-shrink: 1; 
        min-width: 80px; /* Ensure the logo never becomes too small/unreadable */
    }

    /* Smaller text for the main introductory headline/paragraph */
    #intro p {
        font-size: 1.1rem; /* Adjust this size as needed, keeping it larger than standard p text */
    }

    /* Adjust the main heading (H1 or whatever is used in the intro) */
    #intro h1 {
        font-size: 2.2rem; /* Ensure main headline also scales down */
    }

    /* Reduce top and bottom padding for all section containers */
    .content-bar {
        padding-top: 25px; 
        padding-bottom: 25px;
    }

    /* Increase the width of the inner content container to use more screen space */
    .content-bar .section-content {
        width: 95vw; /* Utilize 95% of the viewport width */
        max-width: none; /* Override any desktop max-width constraints */
        padding: 0; /* Remove any internal padding that might conflict */
        margin: 0 auto; /* Keep it centered */
        display: flex;
        flex-direction: column; /* Stack buttons vertically if there are multiple */
        align-items: center;    /* Center the stacked buttons horizontally */
        gap: 15px; /* Space between stacked buttons */
    }

    /* Smaller paragraph text for all content bars */
    .content-bar p {
        font-size: 0.95rem; /* Slightly smaller than desktop text */
        line-height: 1.6;
    }
    .content-bar .section-content p {
        margin: 10px 0;
    }

    /* Ensure the button itself is a block/inline-block to respect the centering */
    .cta-button {
        display: inline-block; /* Or display: block; if they are full width */
        /* You might want to cap the button's max-width on mobile: */
        max-width: 300px;
        margin-top: 0;
    }

    #intro .section-content {
        padding-top: 40px;
    }

    .audio-comparison {
        flex-direction: column; /* Stacks the columns vertically */
        gap: 30px; /* Adjust vertical space between stacked examples */
        margin: 20px 0; /* Reduced vertical margin around the comparison section */
        max-width: 90vw;
        width: 100%;
        align-items: center; /* Center the columns horizontally */
    }
    
    .audio-comparison .audio-column {
        max-width: 95%; /* Allow the column to take full width */
        min-width: 85%;
        padding: 15px 15px 0 15px; /* Reduced internal padding from 25px */
        border-radius: 6px; /* Slightly smaller radius */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Reduced shadow depth */
        flex-basis: 0;
    }

    /* Reduce the title size to save vertical space */
    .audio-column h3 {
        font-size: 1rem; /* Smaller title text */
        margin-bottom: 10px; /* Reduced space below the title */
    }

    /* Make the audio player controls slightly smaller if possible */
    .audio-comparison audio {
        height: 35px; /* Reduced player height from 40px */
        max-width: 95%;
        display: block;
        margin: 0 auto 25px auto;
    }

    #showcase p {
        margin: 10px 0;
    }

    /* Main Services: Switch to a single column */
    .main-service-list {
        grid-template-columns: 1fr;
    }
    .main-service-list li {
        padding: 15px; /* Reduced padding (from 20px) */
    }
    /* Reduce Package Card Title size and bottom margin */
    .main-service-list h4 {
        font-size: 1.2rem; /* Slightly reduced font size (from 1.3rem) */
        margin-bottom: 10px; /* Reduced bottom margin */
    }
    
    /* Reduce top margin for paragraphs inside package cards */
    .main-service-list p {
        margin-top: 5px; /* Reduced top margin for the paragraph */
    }
    /* Compaction for each secondary service item */
    .secondary-service-list li {
        padding: 8px 0; /* Reduced vertical padding (from 10px 0) */
        padding-left: 10px; /* Reduced left padding (from 15px) */
        margin-bottom: 10px; /* Reduced bottom margin (from 15px) */
    }
    .specialties dl {
        /* On small screens, force it back to a single column to stack the term/desc */
        grid-template-columns: 1fr; 
    }
    .specialties dt, .specialties dd {
        grid-column: 1 / 2; /* Force both to span full width */
        height: auto;
    }
    .specialties dt {
        margin-bottom: 5px; /* Space between term and definition */
        border-radius: 3px; /* Full rounded corners again */
    }
    .specialties dd {
        border-left: none; /* Remove separator line when stacked */
        padding-left: 0;
        margin-bottom: 15px; /* Space before the next term starts */
        font-family: inherit;
        font-size: 0.95rem;
    }

    #pricing .section-content{
    /* 3. Wider Section Content: Increased max-width and use of 90% width */
    max-width: 1400px;
    width: 95vw;
    margin-left: auto;
    margin-right: auto;
    }

    /* Pricing container for the two main columns */
    .pricing-container {
        display: flex;
        flex-direction: column;
        gap: 40px; 
        margin-top: 30px;
        justify-content: space-between;
    }

    /* 3. Wider Package Cards: Changed to 50/50 split */
    .pricing-packages {
        width: 100%; /* Increased from 45% */
        box-sizing: border-box;
    }
    .pricing-details {
        width: 100%; /* Reduced from 55% */
        box-sizing: border-box;
    }

    /* 2. Reduced Header Sizes/Margins */
    .pricing-packages h3, .pricing-details h3 {
        font-size: 1.3rem; /* Reduced from 1.4rem */
        margin-bottom: 15px; /* Reduced margin */
    }

    /* ---------------------------------------------------- */
    /* Package Card Styles (1, 2)                           */
    /* ---------------------------------------------------- */

    .package-card {
        border: 1px solid #ddd;
        /* 1. Permanent Yellow Left Border */
        border-left: 5px solid #f6a900; 
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px; /* Reduced margin */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        background-color: #fcfcfc;
        transition: all 0.3s;
    }

    .package-card:hover {
        /* 1. Hover effect kept, but border-left removed since it's now permanent */
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

    /* 2. Reduced Header Sizes/Margins */
    .package-card h4 {
        font-size: 1.3rem; /* Reduced from 1.4rem */
        margin-top: 0;
        margin-bottom: 10px; /* Reduced margin */
    }

    /* ---------------------------------------------------- */
    /* Secondary Services List (4, 5)                       */
    /* ---------------------------------------------------- */
    .secondary-rates {
        width: 100%;
    }

    .secondary-rates li {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        /* 4. More Prominent Dotted Line Color */
        border-bottom: 1px dashed #3d2a00; 
    }

    /* 5. Secondary Service Alignment Fix */
    .service-name {
        font-weight: 500;
        /* Allow the service name to shrink/wrap if needed */
        flex-grow: 1; 
    }

    .service-price {
        font-weight: bold;
        color: #0e0e0eff;
        /* CRITICAL FIX: Prevents the price/status element from shrinking/wrapping, 
        ensuring it stays rigidly aligned to the right */
        flex-shrink: 0; 
        margin-left: 5px; /* Ensures space between the name and the price/status */
    }

    /* ---------------------------------------------------- */
    /* Essential Terms (dl) Styling (6)                     */
    /* ---------------------------------------------------- */

    .essential-terms dl {
        /* 6. Changed to single column layout for stacking */
        display: grid;
        grid-template-columns: 1fr; /* Single column */
        gap: 0px;
        align-items: stretch;
        margin-top: 15px;
        max-width: 100%;
        overflow: hidden;
        margin: 0 0 20px 0;
        padding: 0;
    }

    .essential-terms dt {
        /* Centered, full width */
        font-weight: bold;
        display: block; 
        text-align: center; 
        padding: 10px 5px 5px 5px; /* Padding for separation */
        width: 100%;
        /* Remove borders from dt itself to clean up the look */
        border-bottom: none;
        border-top: 1px solid #3d2a00;
        margin: 0;
        padding: 0;
    }

    .essential-terms dd {
        /* Left-aligned, full width, with visual separation */
        margin: 0;
        display: block;
        max-width: 100%;
        text-align: left;
        
        /* Add top/bottom borders for visual separation between pairs */
        border-bottom: 1px solid #3d2a00;
        border-top: none;
        padding: 10px;
        margin: 0;
        padding: 0;
    }

    /* ---------------------------------------------------- */
    /* CTA Centering Fix (NO HTML CHANGE)                   */
    /* ---------------------------------------------------- */

    /* Targets the absolute last element inside .pricing-details and centers it.
    This assumes your CTA button is the last element. */
    .pricing-details > *:last-child {
        /* Make the anchor/button behave like a block element */
        display: block; 
        
        /* Center a block element with margin: auto. 
        We use fit-content so the element takes up only the width it needs. */
        width: fit-content; 
        
        /* Apply vertical margin and center horizontally */
        margin: 25px auto 0 auto; 
    }

    #contact .section-content{
        max-width: 95vw;
        padding: 0 10px;
    }

    #contact form {
        width: 100%;
        margin: 0;
    }

    .parallax-break {
        background-attachment: scroll !important; /* prevent mobile white-bar bug */
        background-position: center top; /* reset initial position */
        will-change: background-position; /* helps smooth scrolling */
        min-height: 45vh; /* adjust as needed */
        background-repeat: no-repeat;
    }
    
}