/*
Theme Name: Inertia Theme
Author: Your Name
Description: A custom theme based on the Inertia style demo.
Version: 1.79
*/

/* ==========================================================================
   1. Global & Base Styles
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    overscroll-behavior: none;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff;
    color: #111111;
    line-height: 1.6;
    cursor: auto;
}

body.nav-open {
    overflow: hidden;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 3rem;
}

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


/* ==========================================================================
   2. Animations & Page Loader
   ========================================================================== */

/* --- Page Loader --- */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #111111;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    transition: transform 1.2s cubic-bezier(0.86, 0, 0.07, 1) 0.4s;
}

.page-loader.loaded {
    transform: translateY(100%);
}

.loader-is-hidden .page-loader {
    display: none;
}

.loader-logo {
    display: inline-block;
    font-size: 2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0;
    transform: translateY(20px);
    animation: logo-entry 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.page-loader.loaded .loader-logo {
    opacity: 0;
    transform: translateY(-20px);
}

@keyframes logo-entry {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- New styles for the updated page loader --- */

/* This new wrapper will stack the logo and slogan vertically */
.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* This is the new rule for your slogan */
.loader-slogan {
    font-size: 0.9rem;
    font-weight: 400; /* Lighter than the logo's weight */
    text-transform: none; /* Normal case to contrast the uppercase logo */
    letter-spacing: 1.5px;
    margin-top: 0.75rem; /* Adds a little space below the main logo */

    /* The slogan starts hidden, just like the logo */
    opacity: 0;
    transform: translateY(20px);
    
    /* Apply the same entry animation, but with a slight delay */
    animation: logo-entry 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    animation-delay: 0.2s; /* This makes it appear just after the main logo */
}

/* This existing keyframe animation will be used by both elements */
@keyframes logo-entry {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- Word-by-word Reveal Animation --- */
.about-intro-title .animate-words{
    display: block;
}

.about-intro,
.split-hero-left,
.about-section .animate-words,
.about-section .animate-line,
.contact-section .animate-words,
.clients-section .animate-words,
.profile-section .animate-words,
.work-page-title.animate-words,
.home-insights-header .animate-words,
.home-insights-header .animate-line,
.single-insight-main,
.single-project-main {
    visibility: hidden;
}

/* NEW: This rule now correctly hides the gallery heading before animation */
.gallery-heading-multi-line {
    visibility: hidden;
}

.word-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.word {
    display: inline-block;
    transform: translateY(110%);
}

.line-mask {
    overflow: hidden;
}

.animate-line {
    transform: translateY(110%);
}


/* ==========================================================================
   3. Header & Navigation
   ========================================================================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.5rem 0;
    z-index: 100;
    mix-blend-mode: difference;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Logo --- */
.site-logo {

    z-index: 102;
}

.header-logo {
    font-size: 1.8rem;
    font-weight: 700;
    text-decoration: none;
    color: #ffffff;
}

.custom-logo-link {
    display: inline-block;
    line-height: 1;
	filter: invert(1);
}

.custom-logo {
    display: block;
    max-height: 75px;
    width: auto;
}


/* --- Desktop Navigation --- */
.header-right-group {
    display: flex;
    align-items: center;
    gap: 3.5rem;
}

.header-nav ul {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav a {
    display: inline-block;
    overflow: hidden;
    height: 1.2em;
    line-height: 1.2em;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
}

.header-nav .current-menu-item a {
    font-style: italic;
}

/* Text Roll Hover Effect */
.roll-text-container {
    display: block;
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.header-nav a:hover .roll-text-container,
.contact-button:hover .roll-text-container,
.about-intro-cta:hover .cta-text .roll-text-container {
    transform: translateY(-50%);
}

.roll-text {
    display: block;
    height: 1.2em;
}

/* Hides the mobile-only contact link on desktop */
.mobile-only-contact {
    display: none;
}

/* --- Contact Button --- */
.contact-button {
    display: flex;
	font-size: 0.9rem;
    align-items: center;
    gap: 0.75rem;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    color: #ffffff;
    text-decoration: none;
}

.contact-button-text-wrapper {
    position: relative;
    overflow: hidden;
    height: 1.3em;
    padding-bottom: 2px;
    border-bottom: 1px solid #ffffff;
    font-weight: 700;
    
    text-transform: uppercase;
}

.contact-button-icon {
    display: inline-block;

    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.contact-button .contact-button-icon {
    font-size: 0.7rem; /* Adjust this value */
    line-height: 1;   /* Add this to help with alignment */
}

.contact-button-icon svg {
    width: 9px;  /* Adjust this value */
    height: 9px; /* Adjust this value */
}

.contact-button:hover .contact-button-icon {
    transform: rotate(-45deg);
}

.contact-button em {
    font-style: normal !important;
}

.contact-button {
    position: relative;
    bottom: 4px; /* Adjust this value to move it up as much as you need */
}

.contact-button-icon {
    position: relative;
    left: 6px; /* Adjust this value to move it more or less */
	top: 2px;
}

header {
    pointer-events: none;
}

/* Re-enables clicks only for the interactive elements inside the header */
.site-logo,
.mobile-nav-toggle,
.header-right-group {
    pointer-events: auto;
}

/* --- Mobile Navigation Toggle (Hamburger) --- */
.mobile-nav-toggle {
    display: none; /* Hidden by default */
    background: transparent;
    border: none;
    padding: 0.5rem;
    z-index: 102;
    cursor: pointer;
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #ffffff;
    position: relative;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    position: absolute;
    left: 0;
}

.hamburger-icon::before {
    top: -8px;
}

.hamburger-icon::after {
    bottom: -8px;
}

/* Nav Open State */
body.nav-open header {
    mix-blend-mode: normal;
}

body.nav-open .custom-logo-link {
    filter: invert(1) !important;
}

body.nav-open .hamburger-icon {
    background-color: transparent;
}

body.nav-open .hamburger-icon::before {
    transform: translateY(8px) rotate(45deg);
}

body.nav-open .hamburger-icon::after {
    transform: translateY(-8px) rotate(-45deg);
}


/* ==========================================================================
   4. Footer (Redesigned)
   ========================================================================== */
footer {
    padding: 0rem 0;
    
    color: #111;
    background-color: #fff;
    position: relative;
    z-index: 10;
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Left Side: Logo */
.footer-logo .custom-logo-link {
    display: inline-block;
    filter: none; /* Remove the white-out filter used in the header */
}
.footer-logo .custom-logo {
    max-height: 100px; /* A smaller, more appropriate size for the footer */
    width: auto;
    filter: none;
}
.footer-logo .header-logo { /* Fallback text logo */
    font-size: 1.5rem;
    color: #111;
    text-decoration: none;
}


/* Center Content: Copyright & Links */
.footer-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #111;
}
.footer-center p {
    margin: 0;
}
.footer-center .footer-links {
    display: flex;
    gap: 1.5rem;
}
.footer-center a {
    color: #111;
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-center a:hover {
    color: #111;
    text-decoration: underline;
}

/* NEW: This rule styles the wrapper for the credit and links */
.footer-bottom-row {
    display: flex;
    flex-wrap: wrap; /* Allows items to stack on very narrow screens */
    justify-content: center;
    align-items: center;
    gap: 1.5rem; /* Adjust the space between the credit and the links */
}

/* Styling for the new site credit line */
.site-credit p {
    margin: 0;
    font-size: 0.8rem;
    color: #111;
}

.site-credit a {
    color: #111;
    font-weight: 500;
    text-decoration: none;
}

.site-credit a:hover {
    color: #111;
    text-decoration: underline;
}

/* Right Side: Back to Top Button */
.back-to-top-button {
    display: inline-block; /* Important for the overflow to work */
    text-decoration: none;
    color: #111111;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    
    transition: all 0.3s ease;
    
    /* These properties create the container for the roll effect */
    overflow: hidden;
    height: 2.4em; /* Sets a fixed height */
    line-height: 2.4em; /* Helps vertically center the text */
}

/* This is the inner container that will slide up on hover */
.back-to-top-button .roll-text-container {
    display: block;
    padding: 0 1rem; /* Sets the side padding */
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

/* The hover effect that triggers the slide */
.back-to-top-button:hover .roll-text-container {
    transform: translateY(-50%);
}

/* Styles for each of the two text lines */
.back-to-top-button .roll-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.4em;
}

.back-to-top-button .arrow {
    font-size: 1.2rem;
    line-height: 1;
}

/* Optional: Keep the color change on hover */
.back-to-top-button:hover {
    color: #111;
    border-color: #111;
    background-color: transparent; /* This line removes the box fill */
}

/* Mobile Footer Styles */
@media (max-width: 900px) {
    .footer-grid {
        flex-direction: column; /* Stack elements vertically */
        gap: 1.5rem;
    }
    .footer-center {
        order: 2; /* Move copyright to the bottom */
        text-align: center;
        gap: 1rem;
    }
    .footer-links {
        justify-content: center;
    }
    .footer-logo {
        order: 0;
    }
    .footer-right {
        order: 1;
    }
}


/* ==========================================================================
   5. Reusable Components & Sections
   ========================================================================== */

/* --- Ticker / Marquee --- */
.ticker-section {
    width: 100%;
    overflow: hidden;
    padding: 0.5rem 0;
    background-color: #ffffff;
    white-space: nowrap;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

.ticker-wrap {
    display: inline-block;
    animation: ticker 20s linear infinite;
}

.ticker-item {
    display: inline-block;
    padding: 0 2rem;
    font-size: 4rem;
    font-weight: 500;
    color: #000000;
    text-transform: uppercase;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* --- Logo Ticker --- */
.logo-ticker {
    background-color: #ffffff;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

.logo-ticker .ticker-wrap {
    animation-duration: 10s;
}

.logo-ticker .ticker-item {
    padding: 0 5rem;
    vertical-align: middle;
}

.logo-ticker .ticker-item img {
    max-height: 50px;
    width: auto;
   
}

/* --- Full Width Video --- */
.full-width-video-section {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    background-color: #000;
}

.full-width-video-section video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ==========================================================================
   6. Homepage Sections
   ========================================================================== */

/* --- Hero Section --- */
.hero {
    height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.hero-background-element {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 38vh;
    width: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    z-index: 2;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    will-change: transform, opacity;
}

.hero-text {
    position: absolute;
    z-index: 1;
    font-size: clamp(3rem, 14vw, 11rem);
    font-weight: 500;
    line-height: 1;
    color: #111;
    visibility: hidden;
    will-change: transform;
}

.hero-text.top-left {
    top: 3rem;
    left: 9rem;
}

.hero-text.bottom-right {
    bottom: 3rem;
    right: 9rem;
}

.hero-side-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #111;
    visibility: hidden;
}

.hero-side-text.left {
    left: 3rem;
}

.hero-side-text.right {
    right: 3rem;
}

.hero-side-text strong {
    font-weight: 900;
}

/* --- About Section (Homepage) --- */
.about-section {
    padding: 6rem 0;
}

.about-section-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    align-items: start;
}

.about-title h3 {
    font-size: clamp(1rem, 3vw, 2.5rem);
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    max-width: 600px;
    margin-left: 0;
}

.down-arrow-icon {
    font-size: 2.5rem;
    margin-top: 3rem;
}

.about-body {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: flex-end;
    text-align: right;
}

.about-body p {
    font-size: 1.1rem;
    color: #111111 !important;
    max-width: 500px;
    line-height: 1.8;
}

.about-body .about-intro-cta {
    margin-top: 2rem;
}

/* --- New Figma-based Video Collage --- */
.new-collage-section {
    padding: 0;
    background-color: #fff;
}

.collage-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 0;
    height: 230vh;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.collage-item-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
}

.collage-item-wrapper:hover {
    z-index: 10 !important;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.15);
}

.collage-video-box {
    display: block;
    width: 100%;
    height: 100%;
}

.collage-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Grid Placement & Transforms */
.item-wrapper-1 { grid-column: 1 / 5; grid-row: 1 / 4; aspect-ratio: 16 / 9; }
.item-wrapper-2 { grid-column: 5 / 7; grid-row: 2 / 4; aspect-ratio: 1 / 1; transform: translateY(10rem); }
.item-wrapper-3 { grid-column: 1 / 3; grid-row: 4 / 6; aspect-ratio: 1 / 1; transform: translateY(-7rem); }
.item-wrapper-4 { grid-column: 3 / 7; grid-row: 5 / 7; aspect-ratio: 16 / 9; transform: translateY(-2rem); }

/* Background colors */
.item-wrapper-1 .collage-video-box { background-color: #F8F7D8; }
.item-wrapper-2 .collage-video-box { background-color: #D3F8F8; }
.item-wrapper-3 .collage-video-box { background-color: #D3F8F8; }
.item-wrapper-4 .collage-video-box { background-color: #F8F7D8; }

/* Project Info positioned below each box */
.collage-project-info-link {
    position: absolute;
    bottom: 0;
    left: 1rem;
    transform: translateY(100%);
    padding-top: 0.75rem;
    text-decoration: none;
}

.collage-project-info {} /* Container div */

.project-category-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    margin: 0;
}

.project-title-text {
    font-size: 1.2rem;
    font-weight: 500;
    color: #111;
    line-height: 1.3;
    margin: 0 0 0.25rem 0;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.collage-project-info-link:hover .project-title-text {
    color: #555;
}

/* Central Rotating Text */
.collage-center-piece {
    grid-column: 3 / 5;
    grid-row: 3 / 5;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transform: translateY(0rem);
}

.rotating-text-svg {
    width: 100%;
    height: 100%;
    max-width: 200px;
    overflow: visible;
    filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.1));
    animation: spin 20s linear infinite;
}

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

.collage-cta-wrapper {
    padding-top: 0;
    padding-bottom: 1rem;
}

/* --- Cursor Gallery Section --- */
.cursor-gallery {
    position: relative;
    overflow: hidden;
    padding: 8rem 0;
    height: 120vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-top: 1px solid #ddd;
}

.cursor-gallery-content .gallery-heading-multi-line {
    font-size: 6.5rem;
    font-weight: 550;
	line-height: 1;
}

.cursor-gallery-content .gallery-heading-multi-line .animate-words {
    display: block; /* This makes each span sit on its own line */
}

/* --- Positions the new side text in the gallery section --- */
.cursor-gallery .hero-side-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.cursor-gallery .hero-side-text.left {
    left: 3rem;
}

.cursor-gallery .hero-side-text.right {
    right: 3rem;
}

.gallery-popup-image {
    position: absolute;
    width: 350px;
    height: 200px;
    border-radius: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 999;
    animation: smoothFadeInOut 1s ease-out forwards;
}

.gallery-popup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hide the mobile-specific gallery image by default */
.gallery-mobile-image {
    display: none;
}

@keyframes smoothFadeInOut {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.7);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.7);
    }
}


/* --- Full Width Video Controls --- */
.full-width-video-section {
    position: relative; /* This is necessary for positioning the controls */
}

.fw-video-controls {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    z-index: 10;
    display: flex;
    gap: 0.75rem;
}

.fw-video-button {
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.fw-video-button:hover {
    background-color: rgba(0, 0, 0, 0.6);
    transform: scale(1.05);
}

.fw-video-button svg {
    width: 20px;
    height: 20px;
}


/* ==========================================================================
   HOMEPAGE INSIGHTS SECTION
   ========================================================================== */

/* --- Main Section Container --- */
.home-insights-section {
    padding: 8rem 0;
    color: #111;
}

/* --- Section Header (e.g., "(IDEAS IN MOTION)") --- */
.home-insights-header {
    margin-bottom: 4rem;
}

.home-insights-header h2 {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 1rem;
}

.home-insights-header p {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.3;
    max-width: 600px;
	text-transform: uppercase;
}

/* --- Initial Animation State --- */
.home-insights-header .animate-words,
.home-insights-header .animate-line {
    visibility: hidden;
}

/* --- Grid Layout --- */
.home-insights-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    align-items: start; /* Aligns both columns to the top */
}

/* --- Left Column --- */
.home-insights-left {
    position: relative;
}

/* Meta Info (Category & Date) - Positioned ABOVE image */
.insights-featured-meta {
    margin-bottom: 0.75rem; /* Space between meta and image */
}

.meta-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #888;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Featured Image Box */
.insights-featured-image-link {
    display: block;
    width: 100%;
}

.insights-featured-image {
    position: relative; /* For JS image swapping */
    overflow: hidden;   /* For JS image swapping */
    aspect-ratio: 4 / 3; /* Creates the fixed widescreen shape */
}

.insights-featured-image img {
    position: absolute; /* Allows images to stack for hover effect */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease-in-out;
}

/* --- Right Column --- */
.home-insights-right {
    display: flex;
    flex-direction: column;
}

/* List of Posts */
.insight-list {
    flex-grow: 1; /* Pushes the CTA button to the bottom */
}


/* NEW: Sets the initial state for the list animation */
.insight-list-item {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.insight-list-item a {
    display: block;
    padding: 1.5rem 0;
    border-bottom: 1px solid #e0e0e0;
    text-decoration: none;
    color: #111;
}

.insight-list-item:first-child a {
    border-top: 1px solid #e0e0e0;
}

.insight-item-category {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.insight-item-title {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
}

/* Underlines the title on hover OR when it's the active item */
.insight-list-item a:hover .insight-item-title,
.insight-list-item a.active .insight-item-title {
    text-decoration: underline;
}

/* "View All Insights" CTA Button */
.home-insights-right .about-intro-cta {
    display: inline-flex;
    align-self: flex-start; /* Aligns button to the left */
    margin-top: 2rem;
    gap: 1rem;
    padding: 10px 20px;
    border: 1px solid #111;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: #111;
}

.home-insights-right .about-intro-cta:hover .cta-arrow {
    transform: translateX(10px);
}

.featured-insight-title-mobile {
    display: none; /* Hidden by default on desktop */
}

/* --- Responsive Styles --- */
@media (max-width: 900px) {
    .home-insights-grid {
        grid-template-columns: 1fr; /* Stack columns on mobile */
        gap: 3rem;
    }
    .insights-featured-image {
        aspect-ratio: 16 / 10;
    }
}

/* --- Contact Section (Homepage) --- */
.contact-section {
    padding: 5rem 0;
    background-color: #fff;
    border-top: 0px solid #ddd;
    color: #111;
}

/* --- Indents the second line of the homepage contact heading --- */
.contact-section .indented-line {
    display: inline-block;
    margin-left: 6rem; /* Adjust this value to get the desired spacing */
}

.contact-top-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid #111;
}

.contact-top-grid h2 {
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 550;
    line-height: 1.2;
    text-transform: uppercase;
}

.contact-arrow-link {
    display: inline-block;
    color: #111111;
    line-height: 0;
}

.contact-arrow-link .arrow-square {
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
	
}

.contact-arrow-link .arrow-main {
    transform-origin: center;
}

.contact-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
    padding-top: 4rem;
}

.contact-details-wrapper {
    grid-column: 2 / 3;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.contact-column h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #111;
}

.contact-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-column ul li {
    margin-bottom: 0.5rem;
}

.contact-column a,
.contact-column p {
    color: #111;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
	line-height: 1.7;
}

.contact-column a:hover {
    text-decoration: underline;
}



/* ==========================================================================
   7. Interior Page Styles
   ========================================================================== */

/* --- About Page --- */
.about-page-main {
    padding-top: 0;
    padding-bottom: 0rem;
}

.about-intro {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 0 3rem;
    overflow: hidden;
}

.about-intro-text {
    position: relative;
    z-index: 2;
    max-width: 70%;
}


.about-intro-title {
    font-size: clamp(3rem, 7vw, 6.5rem);
    font-weight: 550;
    line-height: 1.03;
    text-transform: uppercase;
    margin: 0 0 2rem 0;
}

.about-intro-p {
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 450px;
    margin: 0 0 3rem 0;
}

.about-intro-cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 10px 20px;
    border: 1px solid #111;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: #111;
}

.about-intro-cta .cta-text {
    display: inline-block;
    height: 1.4em;
    overflow: hidden;
}

.about-intro-cta .cta-arrow {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.about-intro-cta:hover .cta-arrow {
    transform: translateX(10px);
}

/* --- About Page: Sections --- */
.clients-section {
    padding-top: 8rem;
    text-align: left;
}

.clients-section h2 {
    font-size: 3.5rem;
    font-weight: 550;
    margin-bottom: 4rem;
    text-transform: uppercase;
}

/* Modified Client Grid Styles */
.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1px;
    background-color: #111;
    border: 1px solid #111;
}

.client-item {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: transform 0.4s ease;
}

.client-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 1;
}

.client-item:hover {
    transform: scale(1.05);
    z-index: 2;
}

.client-item:hover::before {
    opacity: 1;
    transform: scale(1.1);
}

.client-logo {
    max-width: 150px;
    z-index: 2;
    transition: filter 0.4s ease;
    filter: grayscale(100%);
}

.client-item:hover .client-logo {
    filter: grayscale(0%);
}

.inversion-wrapper {
    position: relative;
    z-index: 2;
}

.creative-lines-section {
    padding: 8rem 0;
}

.creative-line {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 600;
    line-height: 1.4;
    margin: 0 auto 3rem auto;
    color: #777;
    text-transform: uppercase;
    text-align: center;
    max-width: 1100px;
    transition: color 0.5s ease;
}

.creative-line:last-child {
    margin-bottom: 0;
}

.creative-word-fill {
    display: inline-block;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(to right, #FFFFFF, #FFFFFF);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.services-video-section {
    padding: 8rem 0;
    display: grid;
    grid-template-columns: 1.2fr 0.5fr;
    gap: 4rem;
    align-items: center;
}

.services-text p {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #555;
}

.services-text p:first-child {
    margin-bottom: 2rem;
}

.services-text strong {
    font-weight: 700;
    color: #111;
}

/* --- Makes the Services Section Video Square --- */
.services-video {
    aspect-ratio: 1.1 / 1; 
    overflow: hidden;    
    border-radius: 0;
}

.services-video video {
    width: 100%;
    height: 100%;       
    object-fit: cover;  
}

.profile-section {
    padding: 8rem 0;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}

/* In style.css, replace the existing profile-photo rules with this */

.profile-photo {
    /* This creates a "mask" that will be animated by GSAP. */
    clip-path: inset(100% 0 0 0);
    /* This is the key change: it forces the container to be a square */
    aspect-ratio: 1 / 1;
    overflow: hidden; /* Good practice when using object-fit */
}

.profile-photo img {
    width: 100%;
    /* This makes the image fill the new square container */
    height: 100%;
    object-fit: cover; /* This crops the image to fit, preventing distortion */
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}


.profile-photo:hover img {
    filter: grayscale(0%);
}

.profile-text h3 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 550;
    line-height: 1.2;
    margin-bottom: 2rem;
	
    text-transform: uppercase;
}

.profile-text p {
    font-size: 1.2rem;
    color: #111 !important;
    line-height: 1.8;
}

/* Add this CSS rule to style.css */
.profile-quote {
    margin-top: 3.5rem;
    padding-left: 1.5rem;
    border-left: 2px solid #111; /* A subtle left border for separation */
    font-style: italic;
    font-size: 1.2rem;
    color: #111;
    line-height: 1.7;
}





.gear-section {
    padding: 8rem 0;
    background-color: #fff;
}

.gear-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}

.gear-image-wrapper {
    overflow: hidden;
    border-radius: 0;
    clip-path: inset(100% 0 0 0);
}

.gear-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gear-image-wrapper:hover img {
    transform: scale(1.05);
}

.gear-content h2 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 550;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.gear-content > p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #111;
    margin-bottom: 3rem;
    max-width: 600px;
}

.gear-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.gear-category h4 {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #111;
    margin-bottom: 0.75rem;
}

.gear-category p {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}


/* --- Work Pages --- */

.work-page-main {
    padding: 8rem 0;
    background-color: #fff;
   
}

.work-hero {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-background-layers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-bg-layer {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    will-change: transform;
}

.work-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2);
}

.hero-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 1;
}

.hero-vignette {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.9) 100%);
    z-index: 2;
}

.hero-content-container {
    position: relative;
    z-index: 3;
    text-align: center;
    color: #fff;
    width: 100%;
}

.hero-title-group {
    text-align: center;
}

.work-hero .hero-line-1 {
    font-weight: 500;
    text-transform: uppercase;
}


.work-hero .hero-line-1 {
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: 1.1;
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 400;
    letter-spacing: 1px;
    margin-top: 1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(255, 255, 255, 0.9);
}


.work-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}

/* Visibility for hero animation */

.work-hero .hero-line-1,
.work-hero .hero-subtitle,
.work-hero .hero-marquee-wrapper {
    visibility: hidden;
}

.hero-line-mask {
    overflow: hidden;
}

/* Hero Marquee */
.hero-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.75rem 0;
}

.hero-marquee-track {
    display: inline-block;
    animation: marquee-scroll 60s linear infinite;
    will-change: transform;
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.hero-marquee-track span {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 1.5rem;
    letter-spacing: 0.5px;
}

/*
 * NEW: Animated Waveform Scroll Indicator
*/

/* This is the main container for the waveform */
.waveform-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Aligns bars to the bottom */
    gap: 6px;             /* The space between each bar */
    height: 40px;         /* The maximum height of the animation */
    opacity: 0;           /* This is used by your existing entry animation */
}

/* This styles the individual bars */
.waveform-bar {
    width: 4px;
    height: 100%;
    background-color: #ffffff;
    border-radius: 2px;
    transform-origin: bottom; /* Ensures bars scale up from the bottom */
    animation: waveform-bounce 1.2s ease-in-out infinite;
}

/* The keyframe animation that makes the bars bounce */
@keyframes waveform-bounce {
    0%, 100% {
        transform: scaleY(0.1); /* The lowest point of the bar */
    }
    50% {
        transform: scaleY(1.0); /* The highest point of the bar */
    }
}

/*
 * We add a different delay to each bar to create the
 * offset, wave-like motion.
*/
.waveform-bar:nth-child(2) {
    animation-delay: 0.15s;
}
.waveform-bar:nth-child(3) {
    animation-delay: 0.3s;
}
.waveform-bar:nth-child(4) {
    animation-delay: 0.15s;
}



/* ==========================================================================
   Work Page - 3-Column Project Grid
   ========================================================================== */

.work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem 2rem;
}

.work-item {
    opacity: 0; /* For the initial load animation */
}

.work-item.hide {
    display: none;
}

.work-item-media {
    display: block;
    position: relative;
    background-color: #f0f0f0;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* Makes the boxes square */
    border-radius: 0px;
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.work-item-media:hover {
    transform: scale(1.03); /* A simple, clean hover effect */
}

.work-item-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.work-item-info {
    text-align: left;
}

.work-item-category {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 0.25rem;
}

.work-item-title {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.3;
    text-transform: uppercase;
    color: #111;
}

.work-item-title a {
    text-decoration: none;
    color: inherit;
}

.work-item-title a:hover {
    text-decoration: underline;
}

/* Media queries for responsive grid */
@media (max-width: 900px) {
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .work-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Single Project Page --- */
.single-project-main {
    padding: 10rem 0 0;
    background-color: #fff;
    color: #111;
}

.single-project-header {
    text-align: center;
    margin-bottom: 6rem;
}

.single-project-category {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.single-project-title {
    font-size: clamp(2rem, 7vw, 6rem);
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0;
}

.project-overview-section {
    margin-bottom: 6rem;
}

.project-overview-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: start;
}

.project-description {
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: 400;
}

.project-details-group .details-block {
    margin-bottom: 2rem;
}

.project-details-group .details-block:last-child {
    margin-bottom: 0;
}

.project-details-group h4 {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #777;
    margin-bottom: 0.5rem;
}

.project-details-group p {
    font-size: 1.1rem;
    font-weight: 500;
}

.single-project-featured-video,
.single-project-featured-media {
    width: 100%;
    margin-bottom: 6rem;
}

.single-project-featured-video video,
.single-project-featured-media img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.single-project-content {
    padding-bottom: 8rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.single-project-content h2,
.single-project-content h3,
.single-project-content h4 {
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.single-project-content p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.8;
}

.single-project-content img {
    width: 100%;
    height: auto;
    margin: 2rem 0;
}

/* --- Styles for Embedded Project Video --- */
.project-embedded-video {
    margin-bottom: 2.5rem; /* Adds space between the video and the text below it */
}

.project-embedded-video video {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Optional: adds slightly rounded corners */
}

/* Next Project Link */
.next-project-section {
    display: block;
    padding: 8rem 0;
    background-color: #111;
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.next-project-section:hover {
    background-color: #222;
}

.next-project-section p {
    font-size: 1rem;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 1rem;
}

.next-project-section h3 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
}

/* A more specific rule for full-width blocks on project pages */
.single-project .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.single-project .alignfull img {
    width: 100%;
}

/* --- Styling for the new Project Description section --- */

/* Adds space below the entire description block */
.project-description {
    margin-bottom: 4rem;
    margin-top: 4rem;
	font-size: 1.1rem !important;
    line-height: 1.6;
    font-weight: 400;
    color: #111111;
}

/* Styles the new "OVERVIEW" heading to match other detail headings */
.project-description-heading {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #111;
    margin-bottom: 1rem;
}

/* Styles the description paragraph itself for impact and readability */
.project-description p {

    margin: 0;
}

/*
 * Makes full-width columns truly seamless by removing the default gap.
*/
.alignfull.wp-block-columns {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
}

/* 1. This prepares the container */
.fullscreen-container {
    position: relative;
}

/* 2. This positions your text inside the container */
.custom-positioned-text {
    position: absolute;
    top: 50px;      /* Distance from the top */
    left: 100px;    /* Distance from the left */
    width: 300px;   /* It's good practice to set a width */
}

/*
 * This forces the text container inside a full-width Cover block
 * to also expand to the full width of the screen.
*/
.alignfull.wp-block-cover .wp-block-cover__inner-container {
    width: 100%;
    max-width: none; /* This removes the theme's width limit */
}

/* ==========================================================================
   INSIGHTS & SINGLE INSIGHT PAGES
   ========================================================================== */

/* --- Insights Page: Main & Hero --- */
.insights-page-main {
    padding: 8rem 0;
    background-color: #fff;
    
}

.insights-hero {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.insights-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2);
}

.insights-hero-content h2 {
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: 1.1;
    font-weight: 500;
    text-transform: uppercase;
}

.insights-hero-content .hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 400;
    letter-spacing: 1px;
    margin-top: 1rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(255, 255, 255, 0.9);
}

.hero-line-mask {
    overflow: hidden;
}

/* Correctly hides hero text for animations */
.insights-hero .hero-line-1,
.insights-hero .hero-line-2,
.insights-hero .hero-subtitle {
    visibility: hidden;
}


/* --- UNIFIED STYLES FOR ALL FILTER BARS --- */
.insights-filters,
.work-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 5rem;
}

/* Targets buttons inside both filter containers */
.insights-filters .filter-btn,
.work-filters .filter-btn {
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: transparent;
    color: #555;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hover state for both */
.insights-filters .filter-btn:hover,
.work-filters .filter-btn:hover {
    border-color: #111;
    color: #111;
}

/* Active state for both */
.insights-filters .filter-btn.active,
.work-filters .filter-btn.active {
    background-color: #111;
    color: #fff;
    border-color: #111;
}

/* --- Insights Page: Grid --- */

.insights-grid {
    display: grid;
    /* This now creates columns of a fixed size */
    grid-template-columns: repeat(auto-fit, 450px);
    gap: 4rem 2rem;
    /* This centers the whole grid, which is perfect for a single item */
    justify-content: center;
}

.insight-item {
    display: block;
    text-decoration: none;
    opacity: 0; /* For entry animations */
}

.insight-item.hide {
    display: none;
}

.insight-item-image {
    display: block;
    position: relative;
    background-color: #f0f0f0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    margin-bottom: 1.5rem; /* Creates space between the image and the text */
    transition: transform 0.4s ease;
}

.insight-item-image:hover {
    transform: scale(1.03); /* Keeps the subtle zoom on the image */
}

.insight-item-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Styles for the text container below the image */
.insight-item-info {
    text-align: left;
}

.insight-item-category {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 0.25rem;
}

.insight-item-title {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.3;
    text-transform: uppercase;
    color: #111;
    transition: color 0.3s ease;
    /* Opacity, transform, and complex transitions are removed */
}

/* UPDATED CSS */
.insight-item:hover .insight-item-title {
    text-decoration: underline; /* Adds the underline on hover */
}

/* --- Single Insight Page --- */
.single-insight-main { 
    padding: 12rem 0 8rem 0; 
    background-color: #fff;
    color: #111;
}

.single-insight-header { 
    text-align: center; 
    margin-bottom: 5rem; 
}

.single-insight-title { 
    font-size: clamp(2.5rem, 6vw, 5rem); 
    text-transform: uppercase; 
    line-height: 1.1; 
    margin-bottom: 1.5rem; 
    font-weight: 600;
}

.single-insight-meta { 
    font-size: 1rem; 
    text-transform: uppercase; 
    color: #777; 
    font-weight: 500;
    letter-spacing: 0.5px;
}

.single-insight-meta .insight-date { 
    margin-left: 1.5rem; 
    padding-left: 1.5rem;
    border-left: 1px solid #ddd;
}

.single-insight-featured-image { 
    margin-bottom: 6rem; 
    height: 70vh;
    width: 100%;
}

.single-insight-featured-image img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover;
}

.single-insight-content { 
    max-width: 800px;
    margin-left: auto; 
    margin-right: auto; 
}

.single-insight-content p { 
    margin-bottom: 1.5em; 
    line-height: 1.8; 
    font-size: 1.1rem; 
    color: #333;
}

.single-insight-content h2, 
.single-insight-content h3,
.single-insight-content h4 { 
    margin: 2.5em 0 1em 0; 
    font-weight: 600;
    line-height: 1.3;
}

.single-insight-content a {
    color: #111;
    font-weight: 600;
    text-decoration: underline;
}

.single-insight-content a:hover {
    text-decoration: none;
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .insights-grid {
        grid-template-columns: 1fr; /* Single column on smaller screens */
    }
}

/* --- Contact Page --- */

/* This is the new main container for the page */
.contact-page-split-layout {
    width: 100%;
}

/* 1. The Split Hero Section */
.split-hero-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    min-height: 90vh; /* Makes the hero tall */
}

.split-hero-left {
    background-color: #fff;
    color: #111;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the text */
    padding: 4rem;
}

.split-hero-right {
    background-color: #f0f0f0;
    overflow: hidden;
    /* This hides the image off to the right, ready for its reveal */
    
}

.split-hero-right img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Makes the image fill the container */
}

.contact-hero-title {
    font-size: clamp(3rem, 7vw, 6.5rem);
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0;
}

/* This styles our highlighted word */
.highlight-word {
    font-style: italic;
    font-weight: 700;
}


.contact-hero-subtitle {
    font-size: 1.2rem;
    max-width: 500px;
    margin-top: 2rem;
    line-height: 1.7;
}

/* 2. The Content Area Below the Hero */
.contact-content-below-hero {
    padding: 8rem 4rem;
    background-color: #f5f5f5;
}

.contact-grid-container {
    display: grid;
    /* This creates two columns: the left (1fr) is slightly narrower than the right (1.5fr) */
    grid-template-columns: 1fr 1.5fr; 
    gap: 2.5rem;
    align-items: start;
    max-width: 1600px;
    margin: 0 auto;
}

.contact-form-section {
    background-color: #fff;
    padding: 3rem;
}

.contact-form-title {
    font-size: 2rem;
    font-weight: 600;
    text-transform: uppercase;
	text-align: center;
    margin-bottom: 2rem;
}

/* (The existing styles for the contact details panel, form fields, and map will still work perfectly) */


/* Contact Form 7 Styles */
.wpcf7-form p { margin-bottom: 1.5rem; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
    border-color: #111;
    box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.1);
    outline: none;
}
.wpcf7-form textarea { min-height: 150px; resize: vertical; }
.wpcf7-form input[type="submit"] {
    background-color: transparent;
    color: #111;
    padding: 10px 20px;
    border: 1px solid #111;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}
.wpcf7-form input[type="submit"]:hover { background-color: #111; color: #fff; }

/* Styles for the right side details and map */
.contact-details-and-map {}

/* This turns the panel into a 2-column grid */
.contact-details-panel {
    margin-bottom: 4rem;
    background-color: #fff;
    padding: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Creates two equal columns */
    gap: 6rem; /* The space between the two columns */
    align-items: start;
}

/* This adds vertical spacing ONLY for the items in our new left-column wrapper */
.contact-details-main-info .contact-detail-block {
    margin-bottom: 2.5rem;
}

/* This removes the extra space after the "Our Studio" block */
.contact-details-main-info .contact-detail-block:last-child {
    margin-bottom: 0;
}

.contact-detail-block h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.2rem; /* MODIFIED: More space below the gray headings */
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #111;
}

/* This now targets the text lines AND the social media links */
.contact-detail-block a,
.contact-detail-block p,
.contact-detail-block li { 
    display: block;
    color: #111;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem; /* MODIFIED: More space between each line */
}

.contact-detail-block a:hover { text-decoration: underline; }
.contact-detail-block ul { list-style: none; padding: 0; margin: 0; }

/* NEW: This removes the extra bottom margin from the last item in any list for perfect spacing */
.contact-detail-block a:last-of-type,
.contact-detail-block p:last-of-type,
.contact-detail-block li:last-of-type {
    margin-bottom: 0;
}

.contact-map-wrapper {
    display: block !important;
    height: 400px !important; /* We are forcing a height here */
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.contact-map-wrapper iframe {
    display: block !important;
    width: 100% !important;
    height: 100% !important; /* The iframe should fill its container */
}


/* ==========================================================================
   8. Responsive Styles
   ========================================================================== */

@media (max-width: 900px) {
    .container {
        padding: 0 1.5rem;
    }

/* ---- START: ROBUST MOBILE NAVIGATION (OPACITY METHOD) ---- */

    /* Make the hamburger menu visible on mobile */
    .mobile-nav-toggle {
        display: block;
    }

    /* We hide the desktop-style contact button on all mobile screen sizes */
    .contact-button {
        display: none;
    }

    /*
     * This is the base rule for the mobile menu.
     * It will always exist, but will be made transparent and non-interactive when closed.
    */
    .header-right-group {
        /* --- Core Mobile Layout --- */
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        z-index: 100;
        
        /* Internal alignment for menu items */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 20vh 1.5rem 0 1.5rem;

        /* --- Appearance --- */
        background-color: rgba(10, 10, 10, 0.9);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);

        /* --- STATE: CLOSED --- */
        transform: translateX(100%); /* Start off-screen */
        opacity: 0; /* Make it fully transparent */
        pointer-events: none; /* Make it non-interactive */
        
        /* --- TRANSITION --- */
        /* This transition will apply smoothly for both opening and closing. */
        transition: transform 0.65s cubic-bezier(0.76, 0, 0.24, 1),
                    opacity 0.65s cubic-bezier(0.76, 0, 0.24, 1);
    }

    /* When the body gets the 'nav-open' class... */
    body.nav-open .header-right-group {
        /* --- STATE: OPEN --- */
        transform: translateX(0%); /* Slide into view */
        opacity: 1; /* Make it fully opaque */
        pointer-events: auto; /* Make it interactive again */
    }

    /* --- Menu Item Styling (Inside the mobile menu) --- */
    .header-right-group .header-nav ul {
        flex-direction: column;
        text-align: left;
        gap: 0;
        width: 100%;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .header-right-group .header-nav ul li {
        width: 100%;
    }

    .header-right-group .header-nav a {
        font-size: 1.9rem;
        font-weight: 400;
        font-style: normal;
        padding: 1.8rem 0;
        width: 100%;
        display: inline-block;
        color: #ffffff;
        text-decoration: none;
    }

    /* This rule shows the mobile-specific contact link when the nav is open */
    body.nav-open .mobile-only-contact {
        display: list-item;
    }

/* ---- END: ROBUST MOBILE NAVIGATION (OPACITY METHOD) ---- */
    body.nav-open .contact-button {
        display: none; 
    }

    /* 3. These rules are mostly the same, but ensure the list and links
        inside the animated panel are styled correctly. */
    body.nav-open .header-nav ul {
        flex-direction: column;
        text-align: left;
        gap: 0;
        width: 100%;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    body.nav-open .header-nav ul li {
        width: 100%;
    }

    body.nav-open .header-nav a {
        font-size: 1.9rem;      
        font-weight: 400;
        font-style: normal;
        padding: 1.8rem 0;
        width: 100%;
        display: inline-block;
        color: #ffffff;
        text-decoration: none;
    }


/* Main container for the open mobile menu */
body.nav-open .header-right-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: fixed;
    inset: 0;
    background-color: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 100;
    padding: 20vh 1.5rem 0 1.5rem; 
}

/* UL containing all menu items */
body.nav-open .header-nav ul {
    flex-direction: column;
    text-align: left;
    gap: 0;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

body.nav-open .header-nav ul li {
    width: 100%;
}

/* This single rule styles all menu items */
body.nav-open .header-nav a {
    font-size: 1.9rem;      
    font-weight: 400;
    font-style: normal;
    padding: 1.8rem 0;        /* ADJUSTED: Increased vertical padding for more spacing */
    width: 100%;
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
}
 

    /* --- FINAL MOBILE HERO FIX --- */
    .hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: 100vh;
        padding: 4rem 1.5rem;
    }

    .hero-main-content,
    .hero-side-text-wrapper {
        display: contents;
    }

    .hero-text,
    .hero-background-element,
    .hero-side-text {
        position: static;
        width: auto;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        margin: 0;
        padding: 0;
    }

    .hero-text {
        text-align: center;
        font-size: clamp(3.5rem, 20vw, 8rem);
    }

    .hero-side-text {
        font-size: 0.9rem;
        text-align: center;
    }

    .hero-text.top-left { order: 1; margin-bottom: 2rem; }
    .hero-background-element { order: 2; width: 100%; max-width: 450px; height: auto; margin-bottom: 2rem; transform: translateX(0%); }
    .hero-text.bottom-right { order: 3; margin-bottom: 6rem; }
    .hero-side-text { order: 4; }
    .hero-side-text.left { margin-bottom: 0.5rem; }
    /* --- END OF FINAL MOBILE HERO FIX --- */

/* ---- START: HOMEPAGE SECTION REORDERING & STYLING FOR MOBILE ---- */

    /* 1. This turns the <main> element into a flex container on mobile,
          which allows us to re-order its children without changing HTML. */
    main {
        display: flex;
        flex-direction: column;
    }

    /* 2. We assign a specific order to each section within <main>.
          This moves the About section to its new position. */
    main > .ticker-section { order: 1; }
    main > .new-collage-section { order: 2; }
    main > .about-section { order: 3; } /* Moved to the 3rd position! */
    main > .cursor-gallery { order: 4; }
    main > .logo-ticker { order: 5; }
    main > .full-width-video-section { order: 6; }
    main > .home-insights-section { order: 7; }
    main > .contact-section { order: 8; }


    /* 3. We now restyle the About section to be more compact and mobile-friendly. */
    .about-section {
        padding: 4rem 1.5rem; /* Reduced padding for a tighter feel */
        background-color: #f8f8f8; /* A subtle background to help it stand out */
    }
    .about-section-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem; /* Tighter gap */
        text-align: center;
    }
    .about-body {
        align-items: center;
        text-align: center;
    }
    .about-title h3 {
        font-size: clamp(1.5rem, 6vw, 1.8rem); /* Made the heading smaller */
        font-weight: 500;
    }
    .down-arrow-icon {
        display: none; /* The arrow isn't needed here anymore */
    }
    .about-body p {
        font-size: 1rem; /* Smaller, more mobile-friendly paragraph text */
    }

    .ticker-item {
        font-size: 2rem;
    }

	.logo-ticker .ticker-item {
  	    font-size: 0;
    }
    
	/* --- Reduces space between logos in the ticker on mobile --- */
	.logo-ticker .ticker-item {
    	padding: 0 2rem;
	}
	
    /* --- Cursor Gallery --- */
    /* --- REVISED CURSOR GALLERY SECTION FOR MOBILE --- */
      .cursor-gallery-content {
        order: 1; /* Make the heading appear first */
    }
	
		.cursor-gallery {
        height: auto;
        padding: 10rem 1.5rem; /* Added horizontal padding */
        display: flex; /* Keep flex to use the 'order' property */
        flex-direction: column; /* Stack items vertically */
        justify-content: center;
        align-items: center;
    }
    .cursor-gallery-content .gallery-heading-multi-line {
        /* Reduced font size for better mobile viewing */
        font-size: clamp(2rem, 7vw, 2.8rem);
    }
	
	.gallery-mobile-image {
        display: block; /* Show the image on mobile */
        order: 2; /* Place it after the heading */
        width: 100%;
        max-width: 500px;
        margin: 2.5rem 0; /* Add vertical space around the image */
    }

    .gallery-mobile-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }
	
	.cursor-gallery .hero-side-text {
    	position: static;
    	transform: none;
    	width: 100%;
        font-size: 0.9rem; /* Slightly larger font for readability */
        line-height: 1.5;
	}
  
  
    .cursor-gallery .hero-side-text.left {
        order: 3; /* Make this the second element */
        margin-top: 0; /* Add space below the heading */
    }

    .cursor-gallery .hero-side-text.right {
        order: 4; /* Make this the third element */
        margin-top: 0.2rem; /* Add smaller space between the two side texts */
    }

	
	
	.full-width-video-section {
    	padding-bottom: 80%;
	}
	
/* ==========================================================================
   MOBILE: Homepage Insights Section Refinements
   ========================================================================== */
	
	 .home-insights-header h2 {
        font-size: 0.9rem;
    }
    .home-insights-header p {
        font-size: 1.5rem;
    }

    /* --- Shows the featured post's title below the image --- */
    .featured-insight-title-mobile {
        display: block; /* Makes it visible on mobile */
        margin-top: 1.5rem;
        text-align: left;
    }

    /* --- Hides the full list on the right --- */
    .insight-list {
        display: none;
    }

    /* --- Centers the 'View All Insights' button --- */
    .home-insights-right {
        display: flex;
        justify-content: center;
        margin-top: 2rem; 
    }

    .home-insights-right .about-intro-cta {
        margin-top: 0;
    }
		
    /* --- Homepage Contact --- */
    /* --- HOMEPAGE CONTACT SECTION MOBILE FIX --- */
.contact-section {
    padding: 3rem 0.5rem;
}

.contact-top-grid {
    grid-template-columns: 1fr;
    padding-bottom: 3rem;
}

.contact-arrow-link {
    display: none;
}

.contact-top-grid h2 {
    text-align: center;
    /* Reduced font size to ensure the heading fits in two lines on mobile */
    font-size: clamp(1.6rem, 6vw, 2.5rem);
    line-height: 1.3;
}

.contact-section .indented-line {
    margin-left: 0; /* Remove desktop indent for centered mobile layout */
    display: block; /* Ensures it sits neatly on a new line */
}

.contact-bottom-grid {
    grid-template-columns: 1fr;
    padding-top: 2rem;
    text-align: center;
    gap: 3rem; /* Creates space between the button and the details */
}

.contact-details-wrapper {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem; /* Adds space between each detail block */
}

.contact-column {
    margin-bottom: 0;
}

    /* --- Footer --- */
    .footer-grid {
        flex-direction: column;
        gap: 1rem;
    }
    .footer-links {
        display: flex;
        gap: 1.5rem;
        margin: 0;
    }

    /* --- About Page --- */
    .about-page { padding: 6rem 0; }
    .about-intro { min-height: 0; padding: 10rem 1.5rem 6rem 1.5rem; flex-direction: column; text-align: center; }
    .about-intro-text { max-width: 100%; }
    .about-intro-image { display: none; }
    .about-intro-title { font-size: clamp(2.5rem, 10vw, 5rem); }
    .about-intro-p { max-width: 100%; margin-left: auto; margin-right: auto; }

    /* --- About Page Sections --- */
    .client-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .services-video-section, .profile-section { grid-template-columns: 1fr; text-align: center; }
    .profile-photo { max-width: 400px; margin: 0 auto; }
    .creative-line { font-size: clamp(2rem, 6vw, 3.5rem); text-align: center; }
    .gear-grid { grid-template-columns: 1fr; }
    .gear-image-wrapper { order: -1; max-width: 500px; margin: 0 auto; }
    .gear-list { grid-template-columns: 1fr; }

    /* --- Insights & Work Pages --- */
   .work-hero {
        /* Adds more space at the bottom, above the scroll indicator */
        padding-bottom: 6rem;
    }

    .work-hero-content {
        /* Increases the vertical gap between the title and subtitle */
        gap: 2rem;
    }

    .work-hero .hero-marquee-wrapper {
        /* Hides the scrolling text marquee on screens 900px and smaller */
        display: none;
    }
	
	    .work-page-main .container {
        /* Removes the side padding from the work page's main container */
        padding-left: 0;
        padding-right: 0;
    }

    .work-filters, .work-item-info {
        /* Adds padding back to the filter buttons so they don't touch the screen edges */
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
	
	.insights-hero {
        /* Use a more flexible height and add padding for mobile */
        height: auto;
        min-height: 80vh;
        padding: 8rem 1.5rem 4rem 1.5rem; /* Top, sides, bottom */

        /* Align content to the bottom-left for a better mobile layout */
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
    }

    .insights-hero-content {
        text-align: left; /* Ensure text is left-aligned */
        width: 100%;
    }

    .insights-hero-content h2 {
        /* Reduce font size for smaller screens */
        font-size: clamp(2.5rem, 10vw, 4rem);
    }

    .insights-hero .hero-subtitle {
        /* Adjust subtitle for readability */
        font-size: 1rem;
        max-width: 100%;
    }



    /* --- Single Project Page --- */
    .project-overview-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .project-description {
        font-size: 1.2rem;
    }
    .single-project-content {
        padding-left: 2rem;
        padding-right: 2rem;
    }

/* ==========================================================================
   MOBILE: About Page Optimizations
   ========================================================================== */
	
	.about-page-main {
        padding-top: 0;
        padding-bottom: 4rem;
    }

    /* --- About Hero Section --- */
    .about-intro {
        min-height: 0;
        /* Reduced side padding from 1.5rem to 1rem */
        padding: 6rem 1rem;
        flex-direction: column;
        text-align: center;
    }

    .about-intro-text {
        max-width: 100%;
    }

    .about-intro-image {
        /* Image is hidden on mobile for clarity */
        display: none;
    }

    .about-intro-title {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }

    .about-intro-p {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* --- Standard Section Padding on Mobile --- */
    .clients-section,
    .creative-lines-section,
    .services-video-section,
    .profile-section,
    .gear-section {
        /* Reduced side padding from 1.5rem to 1rem */
        padding: 4rem 1rem;
        text-align: center;
    }

    /* --- Section-Specific Layout Adjustments --- */
    .services-video-section,
    .profile-section,
    .gear-grid {
        /* Stack all 2-column grids */
        grid-template-columns: 1fr;
    }

    .profile-photo,
    .gear-image-wrapper {
        /* Center images and add space below them */
        max-width: 400px;
        margin: 0 auto 2rem auto;
    }

    .gear-image-wrapper {
        order: -1; /* Keep image on top of text */
    }

    .creative-line {
        font-size: clamp(1.8rem, 6vw, 3rem);
    }
    
    .profile-text h3,
    .gear-content h2,
    .clients-section h2 {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .profile-quote {
        margin-top: 2rem;
        padding-left: 1rem;
        text-align: left; /* Quotes often look better left-aligned */
    }

    .gear-list {
        grid-template-columns: 1fr;
        text-align: left;
    }
	
	
    /* --- MOBILE VIDEO COLLAGE FIX --- */
.collage-grid {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 6rem; /* Reduced gap for a tighter look */
    /* Padding removed from left/right for edge-to-edge view */
    padding: 6rem 0 8rem 0;
}

.collage-item-wrapper {
    display: block;
    transform: none !important;
    box-shadow: none;
    order: 2;
    /* Sets a uniform aspect ratio for all items on mobile */
    aspect-ratio: 4 / 3;
}

.collage-item-wrapper:hover {
    transform: none !important;
    box-shadow: none;
}

.collage-project-info-link {
    display: block;
    text-decoration: none;
    /* Adds padding so text doesn't touch screen edges */
    padding: 1rem 1.5rem 0 1rem;
}

.collage-project-info {
    position: static;
    transform: none;
    padding-top: 0;
    white-space: normal;
    display: block;
}
	
	.project-title-text { font-size: 1rem; font-weight: 500; color: #111; margin: 0; }
    .project-category-text { color: #666; font-size: 0.85rem; font-weight: 400; margin-bottom: 0.25rem; }
    .collage-center-piece { display: flex; position: static; transform: none; order: 1; margin-bottom: 1rem; }
    .collage-cta-wrapper { padding-top: 0; padding-bottom: 5rem; text-align: center; }

    /* --- Contact Page (New Responsive Styles) --- */
.split-hero-section {
    grid-template-columns: 1fr; /* Stacks the hero image below the text on mobile */
    min-height: 0;
}

.split-hero-right {
    min-height: 50vh; /* Ensures the image has some height on mobile */
}

.split-hero-left {
    padding: 4rem 1.5rem;
    text-align: center; /* Center-aligns the hero text on mobile */
}

.contact-hero-title {
    font-size: clamp(2.5rem, 12vw, 5rem);
}

.contact-hero-subtitle {
    max-width: 100%;
}

.contact-content-below-hero {
    padding: 4rem 1.5rem;
}

	
/* This is the key fix for the form and details */
.contact-grid-container {
    grid-template-columns: 1fr; /* Stacks the form and details on mobile */
}

/* This fixes the two-column layout within the contact details panel on mobile */
.contact-details-panel {
    grid-template-columns: 1fr; /* Stacks the details into a single column */
    gap: 2.5rem; /* Reduces the space between detail blocks on mobile */
}

/* This is the key fix for the form and details */
.contact-grid-container {
    grid-template-columns: 1fr; /* Stacks the form and details on mobile */
}


	/* ---- START: MOBILE CONTACT SECTION INVERSION ---- */

/* 1. Set the background for the entire section to dark and remove the top border */
.contact-section {
    background-color: #111111;
    border-top: none;
}

/* 2. Change the main heading color to white */
.contact-section .contact-top-grid h2 {
    color: #ffffff;
}

/* 3. Invert the style of the "Get In Touch" button */
.contact-section .contact-left-placeholder .about-intro-cta {
    color: #ffffff;
    border-color: #ffffff;
}

/* 4. Add a hover effect for the new inverted button */
.contact-section .contact-left-placeholder .about-intro-cta:hover {
    background-color: #ffffff;
    color: #111111;
}

/* 5. Update the text colors in the details columns */
.contact-section .contact-column h4 {
    /* A slightly dimmer white for the small headings (e.g., "Contact", "Socials") */
    color: #999999;
}

.contact-section .contact-column a,
.contact-section .contact-column p {
    /* Make the main contact detail text white */
    color: #ffffff;
}

/* ---- END: MOBILE CONTACT SECTION INVERSION ---- */

	/* ---- START: MOBILE FOOTER INVERSION ---- */

/* 1. Set the main footer background to dark */
footer {
    background-color: #111111;
    border-top: none;
}

/* 2. Invert the logo color. This works best if your logo is an SVG or a single-color PNG. */
.footer-logo .custom-logo {
    filter: invert(1);
}

/* This makes the fallback text logo white */
.footer-logo .header-logo {
    color: #ffffff;
}

/* 3. Update the text colors for the copyright, credit, and links */
.footer-center,
.site-credit p,
.footer-center a {
    color: #a0a0a0; /* A pleasant light gray for all central text */
}

/* Make the main links and your name brighter on hover */
.footer-center a:hover,
.site-credit a:hover {
    color: #ffffff;
}

/* Make your name stand out a bit more by default */
.site-credit a {
    color: #ffffff; 
}


/* 4. Update the "Back to Top" button for the dark theme */
.back-to-top-button {
    color: #a0a0a0;
    border-color: #555555; /* A mid-gray border that's visible but not too harsh */
}

/* On hover, the button's text and border become bright white */
.back-to-top-button:hover {
    color: #ffffff;
    border-color: #ffffff;
    background-color: transparent; /* We keep this from our previous fix */
}

/* ---- END: MOBILE FOOTER INVERSION ---- */
	
@media (max-width: 600px) {
    /* --- Work & Insights Grids --- */
    .work-grid {
        grid-template-columns: 1fr;
    }
    .work-item.layout-3-col,
    .work-item.layout-2-col {
        grid-column: span 1;
        aspect-ratio: 1 / 1;
    }
    
    .insights-grid,
    .work-grid {
        grid-template-columns: 1fr;
    }
    
    
    .work-item,
    .work-item--large,
    .work-item--wide {
        aspect-ratio: 4 / 5;
        grid-column: span 1;
        grid-row: span 1;
    }
    
    /* --- Filter Buttons --- */
    .insights-filters,
    .work-filters {
        gap: 0.5rem;
    }

    .filter-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.8rem;
    }

    /* --- Client Grid --- */
    .client-grid {
        /* This explicitly creates two equal-width columns */
        grid-template-columns: repeat(2, 1fr);
    }
	
	.client-logo {
        max-width: 65%;
}