@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;900&display=swap');
html {
  box-sizing: border-box;
  background-color: #000000;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* --- GLOBAL STYLES --- */
body {
    background-color: #000000;
    color: #222222;
    font-family: 'Inter', sans-serif;
    margin: 0;
    overflow-x: hidden;
}
/* ================================================================= */
/* == DEFINITIVE & FINAL FIX for Browser Focus Outline == */
/* ================================================================= */

/* This rule targets EVERY interactive element on the page when it
   receives focus (e.g., on click) and removes the default outline. */
a:focus,
button:focus,
.nav-toggle:focus {
    outline: none !important;
}

.body-no-scroll {
    overflow: hidden;
}

/* --- REUSABLE CONTAINER --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* ================================================================= */
/* == DEFINITIVE & CONSOLIDATED HEADER STYLES (FINAL) == */
/* ================================================================= */

/* --- 1. Main Structural Styles --- */
header {
    width: 100%;
    padding: 25px 40px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 901;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    transition: transform 0.3s ease-in-out, opacity 0.25s ease-in-out;
}

header.is-hidden {
    transform: translateY(-100%);
}

.logo { grid-column: 2 / 3; text-align: center; }
.logo a { text-decoration: none; }
.logo img { height: 50px; transition: filter 0.3s ease; }

.nav-toggle { grid-column: 1 / 2; justify-self: start; }
.desktop-nav { grid-column: 3 / 4; justify-self: end; }
.desktop-nav ul { list-style: none; margin: 0; padding: 0; }

/* --- 2. Base Appearance (for pages with a WHITE background) --- */
header .nav-toggle,
header .desktop-nav a {
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; 
}
/* Header/navigation link color -- white for home, portfolio, about */
.homepage header .nav-toggle,
.homepage header .desktop-nav a,
.portfolio-page header .nav-toggle,
.portfolio-page header .desktop-nav a,
.about-page header .nav-toggle,
.about-page header .desktop-nav a {
    color: #ffffff;
}
/* Make logo black by default on contact page */
.contact-page header .logo img {
    filter: brightness(0);
}
/* Make logo white when menu is open (no filter) */
body.contact-page.body-no-scroll header .logo img {
    filter: none !important;
}

/* Header/navigation link color -- black for contact */
.contact-page header .nav-toggle,
.contact-page header .desktop-nav a {
    color: #222222;
}

/* Logo: NO filter needed at all! */
.logo img {
    /* No filter! Your white PNG always displays white */
}


/* --- 3. Make Links Visible After Page Load --- */
/* This is controlled by a tiny script at the bottom of your HTML files */
body.js-page-loaded header .nav-toggle,
body.js-page-loaded header .desktop-nav a {
    opacity: 1;
}

.nav-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}


/* --- 5. UNIVERSAL Rules for When the Menu is OPEN --- */
body.body-no-scroll header .nav-toggle {
    color: #ffffff !important; /* "CLOSE" text must be white */
}

body.body-no-scroll .desktop-nav {
    display: none; /* Hide "WORK +" button */
}

/* --- 6. Mobile-Specific Adjustments --- */
@media (max-width: 768px) {
    header .logo img {
        height: 40px; /* Smaller logo on mobile */
    }

    header .nav-toggle,
    header .desktop-nav a {
        font-weight: 600; /* Consistent font weight on mobile */
    }
}







/* --- FULL-SCREEN OVERLAY MENU (NEW SLIDE-IN STYLE) --- */

.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000; /* Changed to a solid black background */
    z-index: 800;
    
    display: flex;
    justify-content: center; /* Center the links vertically */
    flex-direction: column;
    
    /* This moves the menu off-screen to the left by default */
    transform: translateX(-100%);
    
    /* This makes the slide animation smooth and polished */
    transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);

    font-family: 'Montserrat', sans-serif; /* ADD THIS LINE */
    font-weight: 900;                     /* CHANGE THIS VALUE */
    text-transform: uppercase;   
}

.main-nav.nav-open {
    /* This slides the menu onto the screen when the 'nav-open' class is added */
    transform: translateX(0);
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0 10vw; /* Add generous padding on the left/right */
    text-align: left; /* Align the text to the left */
}

.main-nav li {
    margin-bottom: 2rem;
    border-bottom: 1px solid #333; /* Add a subtle separating line */
    padding-bottom: 2rem;
}
.main-nav li:last-child {
    border-bottom: none; /* Remove the line from the last item */
}

.main-nav a {
   display: block; 
    color: #ffffff; /* Changed text color to white */
    text-decoration: none;
    font-size: clamp(2.5rem, 8vw, 4.5rem); /* Slightly larger font */
    font-weight: 600; /* A strong but not overly bold weight */
}
@media (max-width: 900px) {

    .main-nav {
        /* This pushes the content down from the top by 25% of the screen height */
        padding-top: 25vh;

        /* This ensures the padding is calculated inside the element's height,
           preventing it from becoming taller than the screen. */
        box-sizing: border-box;
    }

}

/* --- HERO VIDEO SECTION --- */
.hero-video { height: 100vh; position: -webkit-sticky; position: sticky; top: 0; z-index: 1; }
#bgvideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ADD THIS LINE: This aligns the top of the video with the top of the container */
    object-position: center top;
}
.hero-video::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px; /* Adjust the height of the gradient as needed */
    
    /* This creates a gradient from transparent at the top to black at the bottom */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);

    z-index: 4; /* Sits just below the scroll indicator (z-index 5) */
    pointer-events: none; /* Ensures it doesn't interfere with mouse clicks */
}

.hero-video.is-hidden {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* --- SCROLLING CONTENT WRAPPER --- */
.scroll-content-wrapper { position: relative; z-index: 2; background-color: #ffffff; }

/* --- MISSION SECTION --- */

.mission-text .pre-title { font-family: 'Inter', sans-serif; text-transform: uppercase; font-weight: 400; font-size: 18px; color: #888; margin: 0 0 10px 0; }
.mission-statement { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 33px; line-height: 1.4; margin: 0; }

/* --- MISSION SECTION (Corrected Full-Bleed Layout) --- */
.mission-section {
    background-color: #000000;
    color: #e0e0e0;
    padding: 0;
    overflow: hidden; /* Prevents any accidental overflow */
}

.mission-grid {
    display: grid;
    /* This creates two equal columns that span the full screen width */
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0;
}

.mission-image {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.mission-image::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0; /* Pin the gradient to the right edge of the image cell */
    width: 40%; /* Control the width of the fade effect */
    height: 100%;
    background: linear-gradient(to right, transparent, #000000);
}

.mission-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mission-text {
    /* Padding: top, right, bottom, left */
    padding: 80px 15% 80px 10%;
    box-sizing: border-box;
}

.mission-text .pre-title {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #888;
    margin: 0 0 15px 0;
}

.mission-statement {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 33px;
    line-height: 1.4;
    margin: 0;
}

/* --- Responsive styles for the Mission Section --- */
@media (max-width: 900px) {
    .mission-grid {
        grid-template-columns: 1fr; /* Stack vertically */
    }
       .mission-image img {
       object-position: 62% 50%; /* Shifts the image 50px to the left */
    }

    .mission-image {
        height: 500px; /* Give a specific height on mobile */
    }

    .mission-image::after {
        /* Gradient from bottom to top for stacked layout */
        background: linear-gradient(to top, #000000 5%, transparent 50%);
        width: 100%;
        height: 100%;
        top: auto;
        bottom: 0;
        right: auto;
    }

    .mission-text {
        padding: 60px 40px 80px 40px; /* Adjust mobile padding */
    }

    .mission-statement {
        font-size: 24px;
    }

    @media (max-width: 600px) {
    .mission-text .pre-title {
        font-size: 14px; /* Makes the font smaller on mobile */
    }
}
}

/* --- CLIENT SCROLLER SECTION --- */
.client-scroller { padding: 100px 0; }
.scroller-container { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); }
.scroller-track { display: flex; width: max-content; animation: scroll 40s linear infinite; }
@keyframes scroll { from { transform: translateX(0%); } to { transform: translateX(-50%); } }
.client-logo { display: flex; align-items: center; justify-content: center; --logo-width: 240px; width: var(--logo-width); padding: 0 40px; box-sizing: border-box; }
.client-logo img { max-width: 100%; height: auto; }
@media (min-width: 1601px) { .client-logo { --logo-width: 380px; } .scroller-track { animation-duration: 60s; } }
@media (max-width: 1024px) { .client-logo { --logo-width: 200px; } .scroller-track { animation-duration: 35s; } }
@media (max-width: 600px) { .client-logo { --logo-width: 350px; } .scroller-track { animation-duration: 30s; } }

/* --- BRIDGE SECTION STYLES --- */
.bridge-section { padding: 120px 0; }
.bridge-text { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 33px; line-height: 1.3; text-align: center; max-width: 900px; margin: 0 auto; color: #222222; }
.bridge-text strong { font-weight: 600; }
@media (max-width: 768px) { .bridge-section { padding: 80px 0; } .bridge-text { font-size: 24px; line-height: 1.4; } }

/* --- HOMEPAGE PORTFOLIO GRID --- */
.homepage .portfolio-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
/* --- PORTFOLIO GRID SECTION --- */
/* These are the new, corrected rules for the portfolio page */
.portfolio-page .portfolio-grid-container-new {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.portfolio-page .portfolio-column {
    display: grid;
    gap: 40px;
}


.grid-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.grid-item:hover .grid-item-image img {
    transform: scale(1.1);
}
/*
============================================================
== SHARED VISUAL STYLES FOR ALL GRID ITEMS (BOTH PAGES) ==
============================================================
*/

/* This styles the main clickable link on both pages */
.grid-item {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

/* This styles the image container on both pages */
.grid-item-image {
    aspect-ratio: 8 / 10.8;
    overflow: hidden;
}
.grid-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.grid-item:hover .grid-item-image img {
    transform: scale(1.1);
}

/* This styles the new caption on BOTH pages */
.grid-item-title-block {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;


 min-height: 150px;         /* This now controls the gradient's height */
    display: flex;             /* This enables flexbox */
    flex-direction: column;    /* This stacks the title and subtitle */
    justify-content: flex-end; /* This pins the text to the BOTTOM */


    padding: 25px;
    box-sizing: border-box;
    z-index: 2;

    /* --- THESE ARE THE NEW LINES --- */
    background-image: url('../images/gradient-overlay-portfolio.png');
    background-size: 100% 100%; /* Stretches the image to fill the container */
    background-repeat: no-repeat;
     background-position: center bottom !important; /* BECOME MORE SPECIFIC and ADD !important */
}

/* This styles the text on BOTH pages */
.grid-item-title,
.grid-item-subtitle {
    display: block;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    line-height: 1.2;
}
.grid-item-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
}
.grid-item-subtitle {
    color: #bbbbbb;
    font-weight: 400;
    font-size: 1.1rem;
}

/* ============================================================ */
/* == PORTFOLIO PAGE TITLE == */
/* ============================================================ */

.page-title-section {
    /* REMOVED max-width and margin to allow full-width alignment */
    padding: 160px 40px 100px 40px;
    text-align: left;
    box-sizing: border-box;
}

.page-title-section h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    /* ADJUSTED the font size to be larger */
    font-size: clamp(3rem, 10vw, 7rem); 
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
    letter-spacing: 2px;
}




/* Styling for the two lines of text */
.grid-item-title,
.grid-item-subtitle {
    display: block;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    line-height: 1.2;
}
.caption-year { font-weight: normal; color: #888; margin-left: auto; padding-left: 10px; }
@media (max-width: 1024px) { .grid-item-caption { font-size: 0.8em; } }
@media (max-width: 600px) { .portfolio-grid-section { padding: 60px 20px; } .portfolio-grid-container { grid-template-columns: 1fr; gap: 40px; } .grid-item.rellax { transform: translate(0) !important; } }



.portfolio-grid-section {
    /* ADJUSTED the padding to create more space */
    padding-top: 30px;
    padding-bottom: 180px;
}

/* ============================================================ */
/* == PORTFOLIO PAGE HEADER GRADIENT == */
/* ============================================================ */

body.portfolio-page::before {
    content: '';
    position: fixed; /* Use 'fixed' to lock it to the top of the screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 150px; /* Same height as the homepage gradient */
    
    /* The same black-to-transparent gradient */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
    
    /* This places it just behind the header (which is z-index 901) */
    z-index: 900; 
    
    /* This ensures the gradient doesn't interfere with mouse clicks */
    pointer-events: none; 
}

/* --- BUTTON STYLES & CTA CONTAINER --- */
.portfolio-cta-container { padding-top: 280px; text-align: center; }
.button-outline { display: inline-block; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 18px; margin-top: 40px; padding: 16px 32px; border: 1px solid; text-decoration: none; transition: all 0.3s ease; }
.button-light { border-color: #e0e0e0; color: #e0e0e0; background-color: transparent; }
.button-light:hover { background-color: #e0e0e0; color: #000000; }
.button-dark { border-color: #222222; color: #222222; background-color: transparent; }
.button-dark:hover { background-color: #222222; color: #ffffff; }

.testimonials-section {
    /* CHANGED: Set padding-bottom to 0 */
    padding: 120px 40px 0 40px;
    background-color: #E9E9E9;
    overflow-x: hidden;
    margin-left: -40px;
    margin-right: -40px;
}
.testimonials-header {
    margin: 0 0 30px 0; /* Removes horizontal auto margins */
    padding: 0 40px;   /* This padding now aligns it with the track */
    box-sizing: border-box;
    text-align: left;
}
.testimonials-header .pre-title { font-size: 0.9em; font-weight: 600; color: #888; letter-spacing: 1px; margin-bottom: 10px; text-transform: uppercase; }
.testimonials-header h2 { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 3rem; line-height: 1.2; margin: 0; color: #222; }
.testimonials-scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.testimonials-scroller::-webkit-scrollbar { display: none; }
.testimonials-track { display: flex; gap: 30px; width: max-content; padding: 20px 40px; opacity: 0; transform: translateX(200px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.testimonials-section.is-visible .testimonials-track { opacity: 1; transform: translateX(0); }
.testimonial-card { flex-shrink: 0; width: 350px; background-color: #ffffff; box-shadow: 0 4px 20px rgba(0,0,0,0.05); display: flex; flex-direction: column; overflow: hidden; border-radius: 0; }
.testimonial-card-top { padding: 40px 40px 20px; }
.testimonial-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; }
.testimonial-quote { font-size: 1.1em; line-height: 1.4; margin: 0; color: #7d7d7d; }
.testimonial-card-bottom { background-color: #000000; color: #ffffff; margin-top: auto; padding: 20px 40px; }
.testimonial-author { font-size: 0.9em; font-weight: 600; color: #ffffff; margin: 0; }
.draggable { cursor: grab; user-select: none; }
.draggable.is-dragging { cursor: grabbing; }

/* ================================================================= */
/* == DEFINITIVE & COMPLETE FOOTER STYLES (DESKTOP & MOBILE) == */
/* ================================================================= */

/* --- 1. Main Desktop Styles --- */
/* This is the base style for all large screens. */
footer {
    background-color: #000000;
    color: #ffffff;
    padding: 120px 40px; /* This is the original, correct desktop padding */
    font-family: 'Inter', sans-serif;
}

.new-footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
}

.footer-cta-new h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(4rem, 10vw, 8rem);
    text-transform: uppercase;
    line-height: 1.0;
    margin: 0;
}

.footer-cta-new span { display: block; }
.cta-line-solid, .cta-line-outline { color: #ffffff; }

.footer-nav-new { display: flex; align-items: flex-start; gap: 50px; }
.footer-nav-links { display: flex; gap: 50px; }
.footer-nav-links ul { list-style: none; margin: 0; padding: 0; }
.footer-nav-links li { margin-bottom: 15px; }
.footer-nav-links a { color: #ffffff; text-decoration: none; font-size: 1rem; transition: color 0.3s ease; }
.footer-nav-links a:hover { color: #888; }


/* --- 2. Desktop-Only Adjustment --- */
/* This rule ONLY applies on screens wider than 901px to reduce the bottom padding. */
@media (min-width: 901px) {
    footer {
        padding-bottom: 80px;
    }
}


/* --- 3. Mobile-Only Styles --- */
/* This rule ONLY applies on screens 900px and smaller. */
@media (max-width: 900px) {
    /* This rule adjusts the padding for mobile */
    footer {
        padding: 80px 20px;
    }
    .new-footer-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 80px;
    }
    .footer-cta-new h2 {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .footer-nav-new {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
}


/* --- VIDEO LIGHTBOX, CURSOR, and OTHER PAGE STYLES --- */
.video-lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; }
.video-lightbox.is-visible { opacity: 1; pointer-events: auto; }
.lightbox-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); }
.lightbox-content {
    position: relative;
    /* CHANGED: Dialed back to 95% of the viewport width */
    width: 95vw; 
    /* CHANGED: Adjusted max-width to a more reasonable large size */
    max-width: 1600px; 
    aspect-ratio: 16 / 9;
}
.lightbox-video { width: 100%; height: 100%; display: block; }
.lightbox-close {
    /* CHANGED: Position is now fixed to the screen */
    position: fixed;
    /* CHANGED: Pushed down from the top edge of the screen */
    top: 40px;
    /* CHANGED: Pushed in from the right edge of the screen */
    right: 40px;
    /* ADDED: Ensure it's on top of all other lightbox content */
    z-index: 1001;

    background: none;
    border: none;
    color: #ffffff;
    font-size: 3em;
    font-weight: 100;
    cursor: pointer;
    line-height: 1;
}
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: 80px;
    height: 80px;
    
    /* CHANGED: Made the background semi-transparent */
    background-color: rgba(0, 0, 0, 0.8);
    
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* ADDED/CHANGED: Explicitly set font and style */
    font-family: 'Inter', sans-serif;
    font-weight: 600; /* A semi-bold weight looks good */
    text-transform: uppercase; /* Capitalizes the text */
    
    opacity: 0;
    transform: scale(0.5) translate(20px, -50%);
    transform-origin: 0 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.cursor-hover .custom-cursor { opacity: 1; transform: scale(1) translate(20px, -50%); }
.cursor-hover { cursor: none; }

/* ============================================================ */
/* == AUTOHIDE VIDEO CONTROLS == */
/* ============================================================ */

/* --- 1. This makes the fade animation smooth --- */
/* This targets the control bar in Chrome, Safari, and Edge */
.lightbox-video::-webkit-media-controls {
    transition: opacity 0.3s ease-in-out;
}

/* --- 2. This is the helper class that will hide the controls --- */
.lightbox-video.controls-hidden::-webkit-media-controls {
    opacity: 0;
}


/* --- CONTACT PAGE STYLES (STABLE VERSION) --- */

.contact-page .contact-page-main {
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: 120px 40px;
    box-sizing: border-box;
}

/* ================================================================= */
/* == CONTACT PAGE: Override Browser Autofill Styles == */
/* ================================================================= */

/* This targets the input fields when they are autofilled by the browser */
.contact-form input:-webkit-autofill,
.contact-form input:-webkit-autofill:hover, 
.contact-form input:-webkit-autofill:focus, 
.contact-form input:-webkit-autofill:active {
    
    /* This is the key fix. It uses a very large, inset box-shadow
       to "paint over" the browser's default blue background. */
    -webkit-box-shadow: 0 0 0 30px #f9f9f9 inset !important;

    /* Optional: If the autofilled text is the wrong color (e.g., black on black)
       you can uncomment the line below to force it to be your standard text color. */
    /* -webkit-text-fill-color: #222222 !important; */
}
.contact-layout-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 100px;
    align-items: start;
}
.contact-intro h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(2.5rem, 8vw, 5rem);
    line-height: 1.1;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    white-space: nowrap;
}
.contact-intro-subheadline {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.5;
    margin: 0 0 40px 0;
    max-width: 500px;
}
.contact-details {
    display: flex;
    gap: 40px;
}
.contact-detail-item {
    display: flex;
    flex-direction: column;
}
.contact-detail-item span {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 5px;
}
.contact-detail-item a {
    color: #222;
    text-decoration: none;
    font-weight: 400;
}
.form-group-cluster {
    margin-bottom: 40px;
}
.form-group-cluster label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.8rem;
    color: #888;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.form-group-cluster input,
.form-group-cluster textarea {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    background-color: #f9f9f9;
}
.form-group-cluster input:focus,
.form-group-cluster textarea:focus {
    outline: none;
    border-color: #222;
}
.contact-form .button-outline {
    width: 100%;
    margin-top: 10px;
}
@media (max-width: 900px) {
    .contact-layout-container {
        grid-template-columns: 1fr;
        gap: 80px;
    }
    .contact-intro {
        text-align: center;
        align-items: center;
    }
    .contact-details {
        flex-direction: column;
        gap: 20px;
    }
}
body.contact-page {
    background-color: #ffffff;
}

/*
============================================================
== FINAL, STABLE STYLES FOR ABOUT PAGE ==
============================================================
*/

.about-page-title-section {
    text-align: left;
    padding: 0 40px; /* Use horizontal padding only */
    box-sizing: border-box;

    /* THIS IS THE FIX: Set a large height and use Flexbox for centering */
    min-height: 80vh; /* Make the section 80% of the screen height */
    display: flex;
    align-items: center; /* This vertically centers the h1 */
}

.about-page-title-section h1 {
   font-family: 'Montserrat', sans-serif; /* ADD THIS LINE */
    font-weight: 900;                     /* CHANGE THIS VALUE */ 
    font-size: clamp(3rem, 12vw, 8rem);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0;
    
    /* THIS IS THE FIX: Reduces the space between lines */
    line-height: 1.0; 
}

/* --- This controls the main page padding --- */
.about-page-main {
    padding-top: 80px; 
}
.profile-grid-section {
    background-color: #000000;
    color: #ffffff;
    /* CHANGED: Removed all padding so the grid touches the screen edges */
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: stretch;
}

.profile-grid-main-image img,
.profile-grid-secondary-images img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fill their containers */
    display: block;
}

.profile-grid-right-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    /* THIS IS THE FIX: Make the vertical gap match the horizontal one */
    gap: 30px;
}

.profile-grid-text .bio {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    
    /* THIS IS THE FIX: A fluid font size */
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);

    line-height: 1.6;
    margin: 0;
    color: #e0e0e0;
    margin-bottom: 40px;
    padding-right: 40px;
    padding-top: 80px;

}

/* This is the updated version */
.profile-grid-secondary-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* CHANGED: Removed the gap between the two small images */
    gap: 0;
}

/* ================================================================= */
/* == ABOUT PAGE: MOBILE-ONLY PROFILE IMAGE STACKING == */
/* ================================================================= */

@media (max-width: 900px) {

    /* --- 1. Change the main section to a Flexbox layout on mobile --- */
    .profile-grid-section {
        display: flex;
        flex-direction: column; /* This stacks the columns vertically */
        padding: 0;
        gap: 0;
    }

    /* --- 2. Keep the big image at the top --- */
    .profile-grid-main-image {
        order: 1; /* This is the first item */
    }

    /* --- 3. This is the container for the text and small images --- */
    .profile-grid-right-column {
        order: 2; /* This is the second item */
        display: flex;
        flex-direction: column; /* This creates a new stacking context inside */
    }

    /* --- 4. This is the KEY FIX: We re-order the items INSIDE the right column --- */
    .profile-grid-text {
        order: 2; /* The bio text now comes SECOND */
    }

    .profile-grid-secondary-images {
        order: 1; /* The two small images now come FIRST */
        margin-bottom: 20px; /* Adds a space between the small images and the bio text below them */
    }

    /* --- 5. Other mobile styles --- */
    .profile-grid-text .bio {
        font-size: 25px;
        text-align: left;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ============================================================ */
/* == ABOUT PAGE: STICKY PROFILE (FINAL, STABLE) == */
/* ============================================================ */

/* 1. Makes the profile section sticky */
.about-page .profile-grid-section {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

/* 2. This is the KEY FIX. It ensures all subsequent sections have a solid background
      and are on a higher visual layer than the sticky profile. */
.about-page .services-section,
.about-page .editing-showcase-section,
.about-page .process-section,
.about-page .trusted-by-section,
.about-page .testimonials-section {
    position: relative; /* This is required for z-index */
    z-index: 1;       /* This places them "on top" of the default layer */
}


/* --- Services Section Styles --- */


.services-intro-paragraph {
    /* These styles are based on .showcase-text p */
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    line-height: 1.6;
    color: #222;

    /* These are the custom styles you requested */
    font-size: 1.1rem; /* Smaller font size */
    max-width: 650px;  /* Controls the width to create ~4 lines */
    margin: 0 auto 80px auto; /* Centers the block and adds 80px of space below it */
}

.services-main-title {
    /* These styles are copied from .showcase-text h2 to match exactly */
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-transform: uppercase;
    line-height: 1.1;
    
    /* This adds the space between the title and the "PRE-PRODUCTION" subheading */
    margin: 0 0 20px 0;
}


.services-section {
    /* THIS IS THE FIX: It forces the section to contain all its children
       and respect the normal page flow, "grouping" everything together. */
    display: flow-root;

    background-color: #f2f2f2;
    padding: 120px 40px;
    text-align: center;
}
.services-row { margin-bottom: 60px; position: relative; }
.row-title { color: #aaa; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-size: 0.8em; margin-bottom: 20px; position: relative; display: inline-block; }
.row-title::after {
    /* CHANGED: This will hide the vertical line */
    display: none;
}
.cards-container { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.service-card { background-color: #000000; color: #ffffff; padding: 30px; border-radius: 0; flex-basis: 250px; display: flex; flex-direction: column; justify-content: center; min-height: 120px; text-align: center; }
.service-card h3 { font-size: 1.2rem; font-weight: 600; margin: 0 0 10px 0; }
.service-card p { font-size: 0.9rem; line-height: 1.5; color: #aaa; margin: 0; }
.services-cta { margin-top: 80px; }


/* --- EDITING SHOWCASE SECTION --- */
.editing-showcase-section {
    background-color: #f2f2f2;
    padding: 120px 40px;
}

.showcase-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    /* This is the key: it makes both columns the same height */
    align-items: stretch; 
    max-width: 1200px;
    margin: 0 auto;
}

.showcase-image img {
    width: 100%;
    height: 100%; /* Make the image fill the full height of its column */
    object-fit: cover; /* Ensure the image covers the area without distortion */
    display: block;
}

/* This new container will manage the text and CTA button */
.showcase-text-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* This pushes the text to the top and the button to the bottom */
}

.showcase-text-main h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-transform: uppercase;
    margin: 0 0 20px 0;
    line-height: 1.1;
}

/* This rule now matches the 'Services' paragraph */
.showcase-text-main p {
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 300;
    color: #222;
    max-width: 650px; /* This matches the 'Services' paragraph width */
    margin: 0 auto;   /* This centers the block */
}

/* The old .showcase-text selector is no longer needed */

/* --- Responsive adjustments for showcase section --- */
@media (max-width: 900px) {
    .showcase-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .showcase-text-content {
        text-align: center;
        align-items: center; /* Center the button on mobile */
    }

    .showcase-text-main p {
        font-size: 1.2rem;
    }

    .showcase-cta {
        margin-top: 40px; /* Add space above the button on mobile */
        width: 100%;
    }
}


/* --- Process Accordion Section --- */


.process-header-text {
    text-align: left;
    /* CHANGED: Set max-width to match the accordion's width */
    max-width: 800px;
    margin: 0 auto 80px auto;
}

.process-header-text .mission-statement {
    font-size: 2.5rem;
    
    /* The text-align: center; property has been removed */
}

.process-intro-paragraph {
    color: #aaa; /* A light grey to match the accordion subtext */
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 300;
    text-align: center; /* Center the text */
    max-width: 800px;   /* Keep the line length readable */
    margin: 0 auto 80px auto; /* Center the block and add 80px of space below it */
}
.process-section {
    background-color: #000000;
    color: #ffffff;
    padding: 120px 40px; /* Add the padding back for content spacing */
    
 
}
.accordion { max-width: 800px; margin: 0 auto; }
.accordion-item { border: 1px solid #333; margin-bottom: 10px; transition: border-color 0.3s ease; }
.accordion-item.is-open { border-color: #fff; }
.accordion-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 25px; background: none; border: none; color: #ffffff; font-size: 1.2rem; font-weight: 400; text-align: left; cursor: pointer; }
.accordion-icon { display: inline-block; width: 12px; height: 12px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); transition: transform 0.3s ease; flex-shrink: 0; margin-left: 20px; }
.accordion-item.is-open .accordion-icon { transform: rotate(135deg); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; }
.accordion-content p { padding: 0 25px 25px 25px; margin: 0; font-size: 1rem; line-height: 1.6; color: #aaa; max-width: 600px; }


/* --- Trusted By Logo Section --- */
/* This is the updated version */
.trusted-by-section {
    background-color: #ffffff;
    padding: 40px 10px; /* Add padding back for content spacing */
    
   
}
.trusted-by-container { max-width: 1000px; margin: 0 auto; text-align: center; }
.section-title { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(2rem, 5vw, 3.5rem); text-transform: uppercase; line-height: 1.1; margin: 0 0 80px 0;color: #222222; }




/* --- Responsive Styles for About Page --- */
@media (max-width: 900px) {
    .new-profile-section { grid-template-columns: 1fr; }
    .profile-text-column-new .about-bio { font-size: 1.5rem; }
    .service-card { flex-basis: calc(50% - 10px); min-height: 180px; }
    .row-title::after { display: none; }
    .showcase-grid { grid-template-columns: 1fr; gap: 40px; }
    .showcase-text { text-align: center; }
    .showcase-text p { font-size: 1.2rem; }
}

@media (max-width: 600px) {
    .service-card { flex-basis: 100%; }
}
/* --- Homepage Header Gradient Overlay --- */
.homepage .hero-video::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* You can adjust this height to make the gradient taller or shorter */
    height: 150px; 
    /* This creates the gradient from a semi-transparent black to fully transparent */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), transparent);
    /* This places the gradient above the video but below your header */
    z-index: 2; 
    /* This ensures the gradient doesn't interfere with any mouse clicks */
    pointer-events: none; 
}

.lightbox-content.is-vertical {
    width: auto;
    /* CHANGED: Dialed back to 95% of the viewport height */
    height: 95vh;
    /* CHANGED: Adjusted max-height */
    max-height: 950px;
    aspect-ratio: 9 / 16;
}

/* --- CUSTOM VIDEO LOADER (FINAL) --- */

.custom-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 100px;
    height: 100px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    
    /* --- LOGO CONTROLS --- */
    background-image: url('logo.png');
    background-size: 50%;
    background-repeat: no-repeat;
    /* This is your control panel for positioning */
    background-position: 50% 50%; /* X-axis Y-axis */
}

.custom-loader.is-loading {
    opacity: 1;
}

.custom-loader::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffffff;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.video-lightbox.is-loading .lightbox-video {
    opacity: 0;
}
.lightbox-video {
    transition: opacity 0.3s ease;
    opacity: 1;
}
/* ADD THIS NEW RULE */
.grid-item > a {
    display: block;
    text-decoration: none;
    color: inherit;
}
/*
================================================================
== DEFINITIVE STYLES FOR ALL PORTFOLIO GRIDS (FINAL) ==
================================================================
*/

/* --- A. SHARED BASE STYLES (BOTH PAGES) --- */

.grid-item {
    display: block;
    text-decoration: none;
    color: #222;
    position: relative;
    overflow: hidden;
}
.grid-item-image {
    aspect-ratio: 8 / 10.8;
    overflow: hidden;
}
.grid-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.grid-item:hover .grid-item-image img {
    transform: scale(1.1);
}


/* --- B. HOMEPAGE-SPECIFIC STYLES --- */

.homepage .portfolio-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.homepage .grid-item-caption {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
}
.homepage .caption-title {
    display: flex;
    align-items: center;
    text-overflow: ellipsis;
    overflow: hidden;
}
.homepage .caption-year {
    font-weight: normal;
    color: #888;
    margin-left: auto;
    padding-left: 10px;
}


/* --- C. PORTFOLIO PAGE-SPECIFIC STYLES --- */

.portfolio-page .portfolio-grid-container-new {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: start;
}
.portfolio-page .portfolio-column {
    display: grid;
    gap: 40px;
}
.portfolio-page .grid-item-title-block {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

 min-height: 150px;         /* This now controls the gradient's height */
    display: flex;             /* This enables flexbox */
    flex-direction: column;    /* This stacks the title and subtitle */
    justify-content: flex-end; /* This pins the text to the BOTTOM */


    padding: 25px;
    box-sizing: border-box;
    z-index: 2;
    background-image: url('../images/gradient-overlay-portfolio.png');
    background-size: 100% 100%; 
    background-repeat: no-repeat;
     background-position: center bottom !important; 
}
.portfolio-page .grid-item-title,
.portfolio-page .grid-item-subtitle {
    display: block;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    line-height: 1.2;
}
.portfolio-page .grid-item-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
}
.portfolio-page .grid-item-subtitle {
    color: #bbbbbb;
    font-weight: 400;
    font-size: 1.1rem;
}

/* ============================================================ */
/* == CUSTOM MENU CURSOR STYLES == */
/* ============================================================ */

.menu-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: 80px;
    height: 80px;
    
    background-color: #ffffff; /* This makes the circle white */
    color: #000000;            /* This makes the arrow black */
    
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    font-family: 'Inter', sans-serif;
    font-size: 2.5em; /* Makes the arrow larger */
    font-weight: 300;
    line-height: 0; /* Helps vertically center the arrow */

    opacity: 0;
   transform: scale(0.5) translate(20px, -50%);
     transform-origin: 0 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* This class will be added by JavaScript to show the cursor */
body.menu-cursor-active .menu-cursor {
    opacity: 1;
    transform: scale(1) translate(20px, -50%);
}

/* This hides the default mouse pointer when our custom one is active */
body.menu-cursor-active {
    cursor: none;
}



/* ================================================================= */
/* == MOBILE: DEFINITIVE & COMPLETE TESTIMONIALS LAYOUT == */
/* ================================================================= */

@media (max-width: 768px) {

    /* --- Step 1: Fix the Main Section Container --- */
    /* This creates the full-bleed grey background and the masking effect. */
    .homepage .testimonials-section {
        padding-top: 60px; /* Reduced top space */
        padding-bottom: 80px; /* Consistent bottom space */
        
        /* THE KEY FIX: Reset desktop layout properties */
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        
        overflow-x: hidden; /* This creates the "masking" at the screen edges */
    }

    /* --- Step 2: Fix the Header --- */
    /* This aligns the header text correctly. */
    .homepage .testimonials-header {
        max-width: 100%;
        margin: 0 0 30px 0; /* Removes 'auto' centering, sets bottom margin */
        padding-left: 20px; /* Indents the text */
        padding-right: 20px;
        box-sizing: border-box;
    }

    /* --- Step 3: Fix the Scroller --- */
    /* This aligns the scroller correctly. */
    .homepage .testimonials-scroller {
        max-width: 100%;
        margin: 0; /* Removes 'auto' centering */
    }

    /* --- Step 4: Fix the Scrolling Track --- */
    /* This indents the first and last cards correctly. */
    .homepage .testimonials-track {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* ============================================================ */
/* == MOBILE: STACK PORTFOLIO PANELS == */
/* ============================================================ */

@media (max-width: 768px) {

    /* --- 1. Switch the main grid to a single column --- */
    .portfolio-page .portfolio-grid-container-new {
        grid-template-columns: 1fr;
        gap: 15px; /* This now controls the vertical space between panels */
    }

    /* --- 2. This "dissolves" the column wrappers --- */
    /* It tells the browser to treat the items inside the columns as direct
       children of the main grid container. This is the key to the fix. */
    .portfolio-page .portfolio-column {
        display: contents;
    }
}
/* ============================================================ */
/* == MOBILE: STACK HOMEPAGE PORTFOLIO PANELS == */
/* ============================================================ */

@media (max-width: 768px) {

    .homepage .portfolio-grid-container {
        grid-template-columns: 1fr; /* Switch from 4 columns to 1 */
        gap: 15px; /* This now controls the vertical space between panels */
    }

}
/* ============================================================ */
/* == MOBILE: HIDE CUSTOM 'PLAY' CURSOR == */
/* ============================================================ */

/* On screens 1024px and smaller (tablets and phones), hide the cursor completely */
@media (max-width: 1024px) {
    .custom-cursor,
    .menu-cursor { /* ADD THIS LINE */
        display: none !important;
    }
}

/* ============================================================ */
/* == MOBILE: ADJUST HOMEPAGE PARAGRAPH FONT SIZES == */
/* ============================================================ */

@media (max-width: 780px) {

    /* --- 1. Reduces the size of the Mission Statement paragraph --- */
    .mission-statement {
        font-size: 25px; /* Or your preferred size */
    }

    /* --- 2. Reduces the size of the "Blending creativity..." paragraph --- */
    .bridge-text {
        font-size: 25px; /* Or your preferred size */
    }

}

/* ============================================================ */
/* == MOBILE: RESPONSIVE LINE BREAK IN MISSION STATEMENT == */
/* ============================================================ */

/* --- 1. By default, hide the line break on desktop --- */
.mobile-break {
    display: none;
}

/* --- 2. On mobile screens, show the line break --- */
@media (max-width: 768px) {
    .mobile-break {
        display: block;
    }
}

/* ============================================================ */
/* == MOBILE: REDUCE SPACE ABOVE 'MORE WORK' BUTTON == */
/* ============================================================ */

@media (max-width: 768px) {

    /* This targets the button's container ONLY on the homepage */
    .homepage .portfolio-cta-container {
        padding-top: 80px; /* Drastically reduce the top padding from the desktop value */
    }

} 

/* ================================================================= */
/* == MOBILE: FINAL FIX FOR PORTFOLIO SECTION BOTTOM PADDING == */
/* ================================================================= */

@media (max-width: 768px) {

    /* This rule targets the entire section containing the portfolio and the button,
       and it reduces the large space at the bottom of it. */
    .homepage .portfolio-grid-section {
        padding-bottom: 60px; /* Reduced from a large desktop value */
    }

    /* We will also slightly reduce the space above the client scroller
       to create the tight layout you want. */
    .homepage .client-scroller {
        padding-top: 60px; /* Reduced from 100px */
    }
}
/* ============================================================ */
/* == MOBILE: FULL-BLEED PORTFOLIO PANELS == */
/* ============================================================ */

@media (max-width: 768px) {

    /* --- 1. This makes the HOMEPAGE grid full-bleed --- */
    /* It removes the left and right padding from the parent section. */
    .homepage .portfolio-grid-section {
        padding-left: 0;
        padding-right: 0;
    }

    /* --- 2. This makes the PORTFOLIO PAGE grid full-bleed --- */
    /* It also removes the left and right padding from its parent section. */
    .portfolio-page .portfolio-grid-section {
        padding-left: 0;
        padding-right: 0;
    }

}
/* ================================================================= */
/* == MOBILE-ONLY FIX for Header Link Flash on Page Load == */
/* ================================================================= */

/* This media query targets tablets and phones */
@media (max-width: 1024px) {

    /* --- Step 1: By default on mobile, make the header links invisible --- */
    header .nav-toggle,
    header .desktop-nav a {
        opacity: 0;
        transition: opacity 0.25s ease-in-out;
    }

    /* --- Step 2: When the page is loaded, make them visible --- */
    /* This is triggered by the script at the bottom of your HTML files */
    body.js-page-loaded header .nav-toggle,
    body.js-page-loaded header .desktop-nav a {
        opacity: 1;
    }
}
/* ================================================================= */
/* == DEFINITIVE & FINAL FIX for Button Tap Color == */
/* ================================================================= */

/* --- Rule 1: For WHITE buttons on a DARK background --- */
/* This targets the 'button-light' class used on your homepage and in the footer.
   On tap, it will force the background to be solid WHITE. */
.button-light:active {
    background-color: #ffffff !important;
    color: #000000 !important; /* Makes the text black for contrast */
}


/* --- Rule 2: For BLACK buttons on a LIGHT background --- */
/* This targets the 'button-dark' class used on your homepage and about page.
   On tap, it will force the background to be solid BLACK. */
.button-dark:active {
    background-color: #222222 !important;
    color: #ffffff !important; /* Makes the text white for contrast */
}
.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 20px;
  align-items: center;
  justify-items: center;
  width: 100%;
}

.logo-item img {
  max-width: 120px;
  max-height: 60px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* ================================================================= */
/* == ABOUT PAGE: DEFINITIVE MOBILE-ONLY "TRUSTED BY" LOGO FIX == */
/* ================================================================= */

/* This rule applies on all tablet and mobile screens */
@media (max-width: 900px) {

    /* --- 1. Adjust the main grid layout --- */
    .about-page .logo-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
        gap: 20px;
    }

    /* --- 2. This is the KEY FIX for the squashing --- */
    /* It gives each grid cell a minimum height, allowing the image inside
       to scale correctly without being vertically compressed. */
    .about-page .logo-item {
        min-height: 80px;
        display: flex; /* These two lines help center the logo perfectly */
        align-items: center;
    }

    /* --- 3. This controls the size of the logo image itself --- */
    .about-page .logo-item img {
        max-width: 150px;
        max-height: 75px;
    }
}



/* Prevent scrolling overflow */
.trusted-by-section,
.trusted-by-container,
.logo-grid {
  overflow-x: hidden;
}

@media (max-width: 900px) {
  .trusted-by-section {
    padding: 40px 10px; /* Much less, so it never causes horizontal overflow */
    box-sizing: border-box;
  }
@media (max-width: 900px) {
  .trusted-by-container {
    max-width: 100vw;
    padding: 0;
    box-sizing: border-box;
  }
}
}

.trusted-by-section,
.trusted-by-container,
.logo-grid {
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

@media (max-width: 900px) {
  .testimonials-section {
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }
}

.trusted-by-section,
.trusted-by-container,
.logo-grid {
  overflow-x: hidden;
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
}

@media (max-width: 900px) {
  .about-page .profile-grid-section {
    position: static !important;
    padding-bottom: 30px;
  }
}

/* ================================================================= */
/* == ABOUT PAGE: MOBILE-ONLY HEADER TITLE PADDING == */
/* ================================================================= */

/* This rule ONLY applies on screens 900px or smaller */
@media (max-width: 900px) {

    /* This rule targets the 'Great Film...' title section and reduces its height and padding */
    .about-page .about-page-title-section {
        min-height: 40vh; /* Reduces the overall height of the section */
        padding-top: 60px; /* Reduces the space above the text */
        padding-bottom: 60px; /* Reduces the space below the text */
        padding-left: 20px;    /* ADD THIS LINE */
        padding-right: 20px; 
    }
}
/* ================================================================= */
/* == ABOUT PAGE: BRUTE-FORCE FIX for Image/Text Gap == */
/* ================================================================= */

/* This rule ONLY applies on screens 900px or smaller */
@media (max-width: 900px) {

    /* This rule finds the container for your bio text and
       FORCES it to move upwards by 60 pixels. */
    .about-page .profile-grid-text {
        margin-top: -60px !important;
    }
}

/* ================================================================= */
/* == MOBILE: ADJUST HEADER PADDING == */
/* ================================================================= */

/* This rule ONLY applies on screens 900px or smaller */
@media (max-width: 900px) {

    header {
        padding-left: 20px;
        padding-right: 20px;
    }

}

/* ================================================================= */
/* == ABOUT PAGE: MOBILE-ONLY PROCESS SECTION ALIGNMENT (CORRECTED) == */
/* ================================================================= */

/* This rule ONLY applies on screens 900px or smaller */
@media (max-width: 900px) {

        .about-page .trusted-by-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    /* --- Step 1: Remove the padding from the parent section --- */
    /* This allows the content inside to go full-width. */
    .about-page .process-section {
        padding-left: 0;
        padding-right: 0;
    }

    /* --- Step 2: Widen the header text and align it correctly --- */
    .about-page .process-header-text {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    /* --- Step 3: Widen the accordion and align it correctly --- */
    .about-page .accordion {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
}

/* ================================================================= */
/* == ABOUT PAGE: MOBILE-ONLY "TRUSTED BY" LOGO FIX == */
/* ================================================================= */

/* This rule ONLY applies on screens 900px or smaller */
@media (max-width: 900px) {

    /* This rule targets each individual logo's container */
    .about-page .logo-item {
        /* This is the key fix. It gives the grid cell a minimum height,
           allowing the image inside to scale correctly without being squashed. */
        min-height: 80px;
    }
}

/* ================================================================= */
/* == ABOUT PAGE: MOBILE-ONLY Services Section Alignment == */
/* ================================================================= */

/* This rule ONLY applies on screens 900px or smaller */
@media (max-width: 900px) {

    /* --- 1. This rule targets the main headline --- */


        .about-page .services-section {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 70px;
    }
    .about-page .services-main-title {
        text-align: left;
    }

    /* --- 2. This rule targets the paragraph below it --- */
    .about-page .services-intro-paragraph {
        text-align: left;
        /* This removes the auto-centering margins */
        margin-left: 0;
        margin-right: 0;
    }
}

/* ================================================================= */
/* == ABOUT PAGE: MOBILE-ONLY Art of the Edit Layout (Consolidated) == */
/* ================================================================= */

@media (max-width: 900px) {

    /* --- 1. Make the parent section full-width and adjust top padding --- */
    .about-page .editing-showcase-section {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 60px;
    }

    /* --- 2. Keep the grid as a single column --- */
    .showcase-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* --- 3. Left-align text and add padding ONLY to the text content --- */
    .showcase-text-content {
        text-align: left;
        align-items: center;
    }

    /* --- 4. Other mobile styles --- */
    .showcase-text-main p {
       font-size: 1.1rem;
    }

    .showcase-cta {
        margin-top: 40px;
    }
}
/* ================================================================= */
/* == MOBILE: GLOBAL HEADER PADDING == */
/* ================================================================= */

/* This rule applies to ALL pages on screens 900px or smaller */
@media (max-width: 900px) {
    header {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 768px) {
  .portfolio-page .page-title-section {
    padding-top: 140px !important;
    padding-bottom: 30px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .portfolio-page .page-title-section h1 {
    margin-left: 20px !important;
    margin-right: 20px !important;
    text-align: left !important;
  }
}
/* ================================================================= */
/* == HOMEPAGE: Scroll Down Indicator == */
/* ================================================================= */

.scroll-indicator {
    position: absolute;
    bottom: 30px; /* Adjust this to control distance from the bottom */
    left: 50%;
    transform: translateX(-50%); /* This perfectly centers the element */
    z-index: 5; /* Places it above the video but below other content */
    
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    opacity: 0.8;
}

.scroll-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    margin-top: 10px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg);

    /* --- This creates the bouncing animation --- */
    animation: bounce 2s infinite;
}

/* This is the animation keyframes */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) rotate(-45deg);
    }
    40% {
        transform: translateY(-10px) rotate(-45deg);
    }
    60% {
        transform: translateY(-5px) rotate(-45deg);
    }
}