/* --- Global Variables & Reset --- */
:root {
    --brand-black: #000000;
    --brand-yellow: #FFC107;
    --zinc-900: #18181b;
    --white-10: rgba(255, 255, 255, 0.1);
    --white-20: rgba(255, 255, 255, 0.2);
}

body {
    background-color: var(--brand-black);
    color: white;
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

h1, h2 { font-family: 'Plus Jakarta Sans', sans-serif; }
.font-serif { font-family: 'PT Serif', serif; }


h1, .section-label {
    font-weight: 700;
    letter-spacing: -0.02em;
}

h2, .section-label {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.text-yellow { color: #FFC107; }

.section-label {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 5px;
    color: var(--brand-yellow);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* --- Header & Navigation --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 70;
    transition: all 0.5s ease-in-out;
}

/* ==========================================================================
   NAV SECTION
   ========================================================================== */

/* --- Updated Header Layout --- */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Changed from 1400px to 95% to push elements to the edges */
    max-width: 95%; 
    margin: 0 auto;
    /* Smaller side padding to get closer to the extreme ends */
    padding: 0 1rem; 
}

/* Ensure the logo stays crisp and large */
/* --- Mobile View (Default) --- */
#main-logo {
    height: 70px; /* Reduced height for phones */
    transition: 0.7s ease-in-out;
    object-fit: contain; /* Ensures the logo doesn't get stretched or distorted */
}

/* --- Desktop View (992px and wider) --- */
@media (min-width: 992px) {
    #main-logo {
        height: 120px; /* Your original height for desktop */
    }
}

/* Desktop Menu */
.desktop-nav {
    display: none; /* HIDE by default on mobile */
    list-style: none;
    align-items: center;
    gap: 3rem; /* Adjust spacing between links */
}

@media (min-width: 992px) { /* Show on Desktop (992px and up) */
    .desktop-nav {
        display: flex; /* Show on Desktop (992px and up) */
    }
}

.nav-link {
    font-size: 11px;
    /* Changed from 700 to 800 for that "Extra Bold/Heavy" look */
    font-weight: 700; 
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s;
}

.nav-link-hover {
    position: relative;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 0; /* Space for the line */
    transition: color 0.3s ease;
}

/* The Line (the "After" element) */
.nav-link-hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* Hidden by default */
    height: 1px;
    background-color: var(--brand-yellow);
    transition: width 0.3s ease; /* This creates the sliding animation */
}

/* Hover States */
.nav-link-hover:hover {
    color: #ffffff; /* Text turns full white */
}

.nav-link-hover:hover::after {
    width: 100%; /* Line grows to full width */
}

/* Keep the line visible when the 'active' class is present */
.nav-link-hover.active {
    color: #ffffff;
}

.nav-link-hover.active::after {
    width: 100%; /* Keeps the yellow line at full width */
}


/* --- Start a Project Button --- */
.btn-nav {
    margin-left: 1rem;            /* ml-4 */
    padding: 0.75rem 2rem;        /* px-8 py-3 */
    background-color: #FFC107;     /* bg-white */
    color: #000000;                /* text-black */
    font-size: 10px;               /* text-[10px] */
    font-weight: 900;              /* font-black */
    text-transform: uppercase;     /* uppercase */
    letter-spacing: 0.2em;         /* tracking-[0.2em] */
    border-radius: 9999px;         /* rounded-full */
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;     /* transition-all duration-300 */
}

.btn-nav:hover {
    background-color: #FFFFFF;     /* hover:bg-brandYellow */
    transform: scale(1.05);        /* hover:scale-105 */
    color: #000000;
}


/* Mobile Toggle (Hamburger) */
#mobile-toggle {
    display: flex; /* SHOW by default on mobile */
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    /* This MUST be higher than the overlay z-index */
    z-index: 10000; 
    position: relative;
}

@media (min-width: 992px) {
    #mobile-toggle { 
        display: none; /* HIDE on desktop */
    }
}

#mobile-toggle span {
    transition: 0.3s ease;
}

#mobile-toggle:hover #line1 {
    width: 24px !important; /* Visual swap on hover */
}

#mobile-toggle:hover #line2 {
    width: 16px !important;
    background: #ffffff !important;
}


/* Mobile Overlay Menu */
#mobile-menu-overlay {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(5, 5, 5, 0.98);
    backdrop-filter: blur(30px);
    /* Lower than the toggle button */
    z-index: 9999; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    transform: translateY(-100%);
    overflow-y: auto;
    
    /* Animation settings */
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    transform: translateY(-100%);
    
    /* THE FIX FOR CUT OFF MENU: */
    overflow-y: auto;        /* Allows scrolling if menu is tall */
    -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
}

#mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.mobile-link {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: white;
    text-decoration: none;
    display: block;
    margin-bottom: 2.5rem;
}

/* --- Mobile Link Hover & Active Effects --- */
.mobile-link {
    position: relative;
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: rgba(255, 255, 255, 0.6); /* Slightly dimmed by default */
    text-decoration: none;
    display: inline-block; /* Required for the underline width to match text */
    margin-bottom: 2.5rem;
    transition: color 0.3s ease;
}

/* The Underline for Mobile */
.mobile-link::after {
    content: '';
    position: absolute;
    bottom: -5px; /* Positioned slightly below the large text */
    left: 50%;
    width: 0;
    height: 4px; /* Thicker line for larger text */
    background-color: var(--brand-yellow);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

/* Hover & Active States */
.mobile-link:hover,
.mobile-link.active {
    color: #ffffff;
}

.mobile-link:hover::after,
.mobile-link.active::after {
    width: 100%; /* Line grows to full width */
}


/* Header States (Scroll) */
.header-scrolled {
    background-color: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px 0 !important;
}

.header-scrolled img {
    height: 60px !important;
}

/* --- Utility Classes --- */
.text-brandYellow { color: var(--brand-yellow); }
.bg-brandBlack { background-color: var(--brand-black); }


/* ==========================================================================
   HOME PAGE - INDEX.PHP
   ========================================================================== */


/* --- Hero Section --- */
/* Ensure the section takes up the full height and uses Flex to align children */
.hero-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: flex-end; /* Pushes the container to the bottom */
    padding-bottom: 5rem;
    overflow: hidden;
    background-color: #050505;
}

/* Force the container to span the full width of your wide nav */
.hero-container {
    width: 95%;
    max-width: 1800px; /* High ceiling for ultra-wide screens */
    margin: 0 auto;
    position: relative;
    z-index: 10;
    padding-bottom: 90px;
}

/* Force horizontal layout on desktop */
.grid-12 {
    display: flex;
    flex-direction: column; /* Stacked by default (mobile) */
    gap: 2rem;
    width: 100%;
    padding-left: 2%;
    padding-right: 2%;
}

@media (min-width: 1024px) {
    .grid-12 {
        flex-direction: row; /* Side-by-side on desktop */
        justify-content: space-between;
        align-items: flex-end;
    }

    .col-span-8 {
        flex: 0 0 65%; /* Takes up 65% of the width */
        text-align: left;
    }

    .col-span-4 {
        flex: 0 0 30%; /* Takes up 30% of the width */
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        padding-left: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-bottom: 1rem;
    }
}

.hero-desc-right {
    /* These are the styles you moved from inline */
    color: #9ca3af;
    line-height: 1.6;
    margin-bottom: 2rem;
    
    /* This is your default desktop size */
    font-size: 1.125rem; 
    font-weight: 300;
}

/* RESPONSIVE MODE: Shrink text on smaller screens */
@media (max-width: 1024px) {
    .hero-desc-right {
        font-size: 1rem;
        margin-bottom: 1.5rem; /* Slightly less margin on tablet */
    }
}

@media (max-width: 768px) {
    .hero-desc-right {
        font-size: 0.9rem; /* Clean, small text for mobile */
        line-height: 1.5;
        margin-bottom: 1.25rem;
    }
}

/* Button Container */
.hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem; /* Added some spacing from the paragraph above */
}

/* Base Button Scaling */
.hero-btns .btn {
    transition: all 0.3s ease;
    /* Ensure they stay side-by-side unless the screen is tiny */
    white-space: nowrap; 
}

/* RESPONSIVE MODE */

/* Tablet (Small Laptops/Tablets) */
@media (max-width: 1024px) {
    .hero-btns {
        gap: 0.75rem;
    }
    .hero-btns .btn {
        padding: 12px 24px; /* Slightly smaller padding */
        font-size: 0.85rem;
    }
}

/* Mobile (Phones) */
@media (max-width: 768px) {
    .hero-btns {
        gap: 0.5rem;
        /* Optional: Uncomment the next line if you want buttons to stack on top of each other on phones */
        /* flex-direction: column; */
    }
    
    .hero-btns .btn {
        padding: 10px 20px;
        font-size: 0.8rem;
        letter-spacing: 1px; /* Slightly tighter tracking for small screens */
    }
}


.hero-video-container {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}

.hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--brand-black), transparent);
}

.hero-title {
    color: #ffffff;                /* text-white */
    font-size: clamp(40px, 8vw, 80px); /* (Minimum, Preferred Fluid Size, Maximum) */
    font-weight: 600;              /* font-medium */
    line-height: 0.9;              /* leading-[0.9] */
    letter-spacing: -0.05em;       /* tracking-tighter */
    margin-bottom: 2rem;           /* mb-8 (32px) */
}

.hero-italic {
    font-family: 'Gelasio', serif;
    font-style: italic;
    font-weight: 300;
    
    /* Smoothing applied specifically here to be sure */
    -webkit-font-smoothing: antialiased;
    
    /* Slightly wider spacing reduces the "curly" look */
    letter-spacing: -0.04em; 
    
    background: linear-gradient(to right, #FFC107, rgba(255, 255, 255, 0.4));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.1em;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.btn-primary {
    background: #FFC107;
    color: black;
}

.btn-primary:hover {
    background: #FFFFFF;
    transform: scale(1.05);
}

.btn-outline {
    border: 1px solid var(--white-20);
    color: white;
}

.btn-outline:hover {
    background: var(--brand-yellow);
    color: black;
}

/* --- Method Section --- */
.method-grid {
    display: grid !important;
    /* This forces exactly 6 columns on one line, preventing any row breaks */
    grid-template-columns: 1fr;  
    grid-template-rows: none !important;
}

@media (min-width: 768px) {
    .method-grid { grid-template-columns: repeat(6, 1fr) !important; }
}

.step-number {
    font-size: 2rem;
    font-weight: 900;
    color: #FFC107;
    margin-bottom: 1rem;
    line-height: 1;
    transition: color 0.5s ease;
}

.method-step:hover .step-number {
    color: #FFFFFF;
}

@media (min-width: 768px) {
    .step-number {
        font-size: 4rem;
    } 
}

.line-divider {
    height: 1px;
    background: var(--white-10);
    width: 100%;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.line-progress {
    position: absolute;
    inset: 0;
    background: var(--brand-yellow);
    transform: translateX(-100%);
    transition: transform 0.7s ease;
}

.method-step:hover .line-progress { transform: translateX(0); }




.intro-statement {
    background-color: #050505;
    padding: 6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.container-center {
    max-width: 1000px; /* Keeps the text from spreading too wide */
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}

.impact-text {
    color: #ffffff;
    font-size: clamp(1.5rem, 4vw, 3rem); /* text-3xl md:text-5xl */
    font-weight: 300; /* font-light */
    line-height: 1.4; /* leading-snug */
}

/* --- Intro Statement Section --- */
/* --- Balanced Intro Statement --- */
.intro-section {

    padding: 1rem 0; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
    z-index: 4;
}

.intro-container-balanced {
    /* This forces the text block to occupy exactly 80% of the screen */
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.intro-text {
    color: #FFFFFF;
    /* Returning to your preferred 3xl -> 5xl range */
    font-size: clamp(1.875rem, 4vw, 2.8rem); 
    font-weight: 300;
    line-height: 1; /* Increased line-height for better readability at 80% width */
    z-index: 4;
    }

.intro-text highlight-yellow {
    color: #FFC107;
    font-weight: 400;
    z-index: 4;
}


/* --- Client Section Styling --- */
.client-section {
    background-color: #050505; /* bg-brandBlack */
    padding: 2rem 0;           /* py-32 */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    border-bottom: 2px solid rgba(0, 0, 0, 0.03); 
}

.client-header-container {
    max-width: 1200px;
    margin: 0 auto 5rem auto;
    padding: 0 1rem;
    text-align: center;
}

.client-title {
    color: white;
    font-size: 3.5rem;           /* text-5xl */
    font-weight: 700;          /* font-black */
    letter-spacing: -0.05em;   /* tracking-tighter */
    margin-bottom: 1rem;
    line-height: 1;
}

@media (max-width: 768px) {
    .client-title { font-size: 2.5rem; /* md:text-7xl */ }
}

.client-title span {
    color: #FFC107;            /* text-brandYellow */
    font-weight: 700;
}

.client-subtitle {
    color: rgba(255, 255, 255, 0.4); /* text-white/40 */
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 10px;
    font-weight: 700;
    max-width: 320px;
    margin: 0 auto;
}

/* --- The Marquee --- */
.marquee-wrapper {
    position: relative;
    display: flex;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background-color: #ffffff; /* bg-white */
}

.marquee-content {
    display: flex;
    width: max-content;
    flex-wrap: nowrap;
    animation: marquee-scroll 40s linear infinite;
    padding: 2rem 0; /* py-10 */
}

.marquee-content:hover {
    animation-play-state: paused;
}

.logo-group {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.logo-parking-space {
    width: 192px;  /* w-48 */
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2rem;
}

@media (min-width: 768px) {
    .logo-parking-space { width: 256px; /* md:w-64 */ }
}

.logo-parking-space img {
    height: 40px; /* h-10 */
    width: auto;
    opacity: 0.3;
    filter: grayscale(100%);
    transition: all 0.5s ease;
    object-fit: contain;
}

@media (min-width: 768px) {
    .logo-parking-space img { height: 48px; /* md:h-12 */ }
}

.logo-parking-space img:hover {
    opacity: 1;
    filter: grayscale(0%);
}

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


/* This CSS applies the image, forces it to be **Black & White** using a CSS filter, and adds a dark overlay so your white text remains easy to read. */

.combined-bg-wrapper {
    position: relative;
    width: 100%;
    background-color: #000; /* Fallback color */
    overflow: hidden;
}

/* Add a dark overlay so text stays readable */
/* The Dark Overlay */
.combined-bg-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Background Image Settings */
    background-image: url('../img/studio-shot.jpg'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    
    /* Apply filters ONLY here so they don't hit the text */
    filter: grayscale(100%) brightness(30%); 
    
    z-index: 1;
}

/* Ensure the content sits on top of the overlay */
/* The Content */
.combined-bg-wrapper section {
    position: relative;
    z-index: 2; /* Higher than the ::before z-index */
    background: transparent !important;
}

/* Ensure your highlights stay bright yellow */
.highlight-yellow {
    color: #FFC107 !important;
    -webkit-text-fill-color: #FFC107; /* Some browsers need this to override filters */
}

/* Adjusting the decorative "METHOD" text transparency to stay subtle */
.bg-text-decorative {
    opacity: 1 !important; 
}


/* --- How We Work Section (Light Mode) --- */
.method-section {

    padding-top: 5%;
    padding-bottom: 5%;
    padding-left:2%;
    padding-right: 2%;
    position: relative;
    /* Ensure nothing spills out of the section */
    overflow: hidden; 
    z-index: 3;
}

@media (min-width: 768px) {
    .method-section {
        border-radius: 0rem;
        padding-bottom: 4rem;
    }
}

.bg-text-decorative {
    position: absolute;
    top: 5%;
    font-size: 22vw;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.03); 
    line-height: 1;
    user-select: none;
    pointer-events: none;
    z-index: 1;
}

.method-container {
    width: 95%; /* Matching your wide nav/hero padding */
    max-width: 1800px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    margin-top: -15px;
}

.method-label {
    color: #FFC107;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-size: 12px;
    font-weight: 800;
    padding-bottom: 2rem;
    margin-bottom: 6rem;
    display: block;
}

/* --- THE GRID FIX --- */
.method-grid {
    display: grid;
    /* Stacked by default for mobile */
    grid-template-columns: 1fr; 
    gap: 4rem;
}

@media (min-width: 1024px) {
    .method-grid {
        /* Forces exactly 5 equal columns on desktop */
        grid-template-columns: repeat(5, 1fr); 
        gap: 2.5rem;
        align-items: start;
    }
}

.method-step {
    position: relative;
    transition: transform 0.3s ease;
}

.step-line {
    height: 2px; /* Slightly thicker for the white background */
    background-color: rgba(0, 0, 0, 0.05);
    width: 100%;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.step-line-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    /* Starts hidden to the left */
    transform: translateX(-100%); 
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.method-step:hover .step-line-fill {
    transform: translateX(0);
}

.step-title {
    color: #929191;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.step-desc {
    color: #FFFFFF;
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 260px; /* Keeps descriptions from getting too wide in horizontal mode */
}

/* ==========================================================================
   VALUE STATEMENT SECTION - STATIC ONE-LINE FRAMED CARDS
   ========================================================================== */
.value-statement-section.text-light-bg {
    position: relative;
    padding: 100px 0;
    background: #FFFFFF; /* Editorial clean white backdrop canvas */
    overflow: hidden;
    padding-left: 3.5rem;
    padding-right: 3.5rem;
}

.bg-text-decorative.decorative-dark {
    color: rgba(0, 0, 0, 0.025); 
}

.label-dark {
    color: #000000;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    border-bottom: 2px solid #FFC107;
    display: inline-block;
    padding-bottom: 4px;
}

.value-main-text.text-dark {
    color: #111111;
    font-size: clamp(1.8rem, 3.5vw, 2.1rem);
    font-weight: 800;
    margin-top: 1.5rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* 5-Column Non-Breaking Grid Framework Architecture */
.value-cards-grid.force-single-line {
    display: grid;
    grid-template-columns: 1fr; /* Stacks linearly on tiny phone viewport screens */
    gap: 1rem;
    margin-top: 3.5rem;
    width: 90%;

}

@media (min-width: 640px) {
    .value-cards-grid.force-single-line {
        grid-template-columns: repeat(3, 1fr); /* Adaptive medium tablet cluster mapping */
        margin-left: 3.5rem;
        margin-right: 3.5rem;
    }
}

/* Desktop Viewports: Hard-locks exactly 5 equal columns spanning across 1 single line */
@media (min-width: 1024px) {
    .value-cards-grid.force-single-line {
        grid-template-columns: repeat(5, 1fr) !important;
        grid-template-rows: none !important;
        gap: 0.85rem; /* Tight, integrated tracking gap distance spacing */
    }
}

/* Framed structural card properties */
.value-card.bordered-card {
    background: #e6e6e6;
    padding: 30px 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-width: 0 !important; /* Critical: Safely lets grid cells collapse without box overflow */
    min-height: 70px; /* Gives standard proportional vertical weight to the row */
    transition: background-color 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}

.value-card.bordered-card:hover {
    background-color: #FFFFFF;
    border: 1px solid #FFC107 !important; /* Premium brand-yellow frame border execution */
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(255, 193, 7, 0.12); /* Subtle thematic glow accent glow */
}

.value-card.bordered-card h3 {
    font-size: clamp(14px, 1.1vw, 17px); /* Scalable typographic scaling to preserve spacing bounds */
    font-weight: 700;
    line-height: 1.3;
    color: #111111;
    margin: 16px 0 0 0;
    letter-spacing: 0.02em;
    white-space: normal; /* Permits individual text string phrases to wrap vertically within the box share */
    word-break: break-word;
    text-align: center;
    width: 100%;
}


/* --- Featured Projects Section --- */
.projects-section {
    background-color: #050505;
    padding: 70px 0;
}

.projects-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

.projects-header {
    margin-bottom: 40px; /* Increased margin to give breathing room for the new subtitle */
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* Grouping container that forces the h2 and p tags to stack cleanly */
.title-group {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Adds space between the header and the text below it */
    max-width: 700px; /* Prevents the subtitle from spreading too wide on massive screens */
}

.projects-title {
    color: white;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    margin: 0; /* Cleans up any native margin conflicts */
}

.projects-title span {
    font-weight: 900;
    color: #FFC107;
}

/* New subtitle styling matching your premium aesthetic */
.projects-subtitle {
    color: rgba(255, 255, 255, 0.65); /* Elegant, readable off-white */
    font-size: clamp(0.95rem, 1.2vw, 1.15rem); /* Scales fluidly with the screen width */
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0.01em;
    margin: 0;
}

/* --- The Grid --- */
.projects-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 column on mobile */
    gap: 20px; /* Reduced gap to fit all 4 comfortably */
}

@media (min-width: 768px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
    }
    
    /* Creates a masonry "offset" look */
    .project-item:nth-child(even) {
        margin-top: 6rem;
    }
}

@media (min-width: 1100px) {
    .projects-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
        gap: 15px; /* Tighter gap for the 4-column layout */
    }
}

/* --- Homepage Specific: 4-Column Row --- */

/* 1. The Grid: Forces 4 columns on desktop */
.featured-work-grid {
    display: grid;
    grid-template-columns: 1fr; /* Stacked on mobile */
    gap: 20px;
    width: 100%;
}

@media (min-width: 768px) {
    .featured-work-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 on tablet */
    }
}

@media (min-width: 1100px) {
    .featured-work-grid {
        /* This line is the key: it forces exactly 4 equal columns */
        grid-template-columns: repeat(4, 1fr) !important; 
        gap: 15px;
    }
}

/* 2. The Cards: Shrink the text and image radius to fit the 4-col look */
.featured-work-grid .project-card {
    width: 100%;
    text-decoration: none !important;
}

.featured-work-grid .project-image-wrapper {
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.featured-work-grid .project-meta h3 {
    font-size: 1.05rem; /* Smaller font for 4-column layout */
    color: #ffffff;
    margin: 10px 0 3px 0;
}

.featured-work-grid .project-meta p {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
}

/* 3. The Button: Shrink it slightly for small cards */
.featured-work-grid .view-project {
    padding: 10px 18px;
    font-size: 9px;
}



.project-card {
    text-decoration: none;
    display: block;
    overflow: hidden; /* Recommended for clean image scaling */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* --- Project Image Wrapper --- */
.project-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 20px; /* Matching your high-end look */
    overflow: hidden;
    background-color: #18181b;
    border-radius: 12px; /* Slightly smaller radius for smaller cards */
}

.project-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0%); /* Starts in color */
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

/* --- The Overlay --- */
.project-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); /* Subtle dark tint on hover */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* --- The Pill Button --- */
.view-project {
    color: #000;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.2em;
    font-weight: 700;
    border: 1px solid var(--brand-yellow);
    padding: 12px 24px;
    border-radius: 50px;
    backdrop-filter: blur(5px); /* Adds a premium frosted glass effect */
    background: #FFC107;
    transform: translateY(10px); /* Small slide-up animation */
    transition: all 0.4s ease;
}

/* --- Hover States --- */

/* 1. Zoom and Grayscale the image */
.project-card:hover img {
    filter: grayscale(100%);
    transform: scale(1.1);
}

/* 2. Fade in the overlay container */
.project-card:hover .project-overlay {
    opacity: 1;
}

/* 3. Slide the button up into place */
.project-card:hover .view-project {
    transform: translateY(0);
}

/* --- Project Info (Title/Cat) --- */
.project-info {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.project-meta h3 {
    font-size: 1.4rem;
    margin: 0 0 5px 0;
    font-weight: 600;
    color: white;
    text-decoration: none !important; /* Removes underline */
}

.project-meta p {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    text-decoration: none !important; /* Removes underline */
}

/* Adjusting Font Sizes for Smaller Cards */
@media (min-width: 1100px) {
    .project-meta h3 {
        font-size: 1.1rem; /* Smaller titles so they don't wrap awkwardly */
    }
    .view-project {
        padding: 10px 18px; /* Slightly smaller button */
        font-size: 9px;
    }
}

/* Remove underlines from all project links and their content */
.project-card, 
.project-card-inner,
.project-link {
    text-decoration: none !important;
    outline: none;
}

/* Specifically target the text elements to ensure they stay clean */
.project-name, 
.project-cat, 
.project-meta h3, 
.project-meta p {
    text-decoration: none !important;
}

/* Ensure no underline appears even when you hover over the card */
.project-card:hover, 
.project-card-inner:hover,
.project-link:hover {
    text-decoration: none !important;
}

/* --- Remove the default underlines --- */
.project-link {
    text-decoration: none;
    display: block; /* Ensures the link covers the whole card area */
    color: inherit; /* Prevents the text from turning blue */
}

.project-link-icon {
    color: #ffffff;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.3em;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 12px 24px;
    border-radius: 50px; /* Makes it a pill shape */
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
}

/* Hover effect for the icon itself */
.project-card:hover .project-link-icon {
    background: var(--brand-yellow);
    color: var(--brand-black);
    border-color: var(--brand-yellow);
}


/* ==========================================================================
   WHY CHOOSE US SECTION
   ========================================================================== */
   .why-choose-section {
    position: relative;
    padding: 120px 0;
    background: #080808; /* Subtly distinct dark variant block */
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* Base content stack layout safety depth anchor */
.why-container {
    position: relative;
    z-index: 2;
}

/* Background image containment framework */
.why-bg-silhouette {
    position: absolute;
    top: 5%; /* Let it sit naturally anchored on the bottom boundary line */
    left: 35%;
    width: 45%;  /* Occupies the empty space beneath/behind the right text column */
    max-width: 400px;
    height: auto;
    z-index: 1; /* Sits behind text content layers, but over the background color */
    pointer-events: none; /* User can click and drag right through it smoothly */
    opacity: 0.09; /* Keeps it exceptionally faint, premium, and readable */
    

    
    /* Triggers the smooth cinematic timeline rule loop */
    animation: kenBurnsCameraman 24s ease-in-out infinite alternate;
    transform-origin: bottom right;
}

.why-bg-silhouette img {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive breakpoint: Hide or shrink on mobile layouts to keep text clean */
@media (max-width: 768px) {
    .why-bg-silhouette {
        width: 70%;
        right: -10%;
        opacity: 0.025; /* Even fainter when overlapping close text lines */
    }
}

/* ==========================================================================
   KEN BURNS CINEMATIC TIMELINE MACRO
   ========================================================================== */
@keyframes kenBurnsCameraman {
    0% {
        transform: scale(1) translate(0, 0) rotate(0deg);
    }
    50% {
        transform: scale(1.12) translate(-3%, -2%) rotate(1deg);
    }
    100% {
        transform: scale(1.05) translate(1%, -4%) rotate(-0.5deg);
    }
}

.why-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    position: relative;
    z-index: 2;
}

@media (min-width: 1024px) {
    .why-container {
        grid-template-columns: 1.2fr 1.8fr;
        gap: 6rem;
    }
}

.why-main-headline {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #ffffff;

}

.why-main-headline span {
    font-weight: 300;
    color: #FFC107;
    display: block;
    margin-top: 1rem;
    font-size: 24px;
}

.why-main-headline span span {
    color: #FFC107;            /* text-brandYellow */
    font-weight: 300;
}


.why-intro-p {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 2rem;
}

.why-capabilities-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}

@media (min-width: 640px) {
    .why-capabilities-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.capability-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 24px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.capability-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.capability-item .cap-num {
    font-size: 11px;
    font-weight: 900;
    color: #FFC107;
    font-family: monospace;
    background: rgba(255, 193, 7, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.capability-item p {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
}

/* New subtitle styling matching your premium aesthetic */
.capabilityp-item p {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
}

.why-outro-p {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    border-left: 2px solid #FFC107;
    padding-left: 20px;
    max-width: 580px;
}


/* --- Testimonial Marquee Section --- */
/* --- Testimonial Section Spacing Fix --- */
.testimonial-section {
    background-color: #f4f4f5; 
    /* Reduced top padding from 8rem/10rem */
    padding-top: 40px; 
    padding-bottom: 60px; 
    border-radius: 0;
    
    position: relative;
    z-index: 20;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
    .testimonial-section {
        border-radius: 0;
        /* Desktop: 5rem top provides enough space for the curve without being "gappy" */
        padding-bottom: 60px; 
    }
}

/* --- Testimonial Header --- */

.testimonial-header {
    text-align: center;
    /* Reduced from 4rem to 2.5rem */
    padding-top: 10px; 
    padding-bottom: 10px;
}

@media (min-width: 768px) {
    .testimonial-header {
        /* Desktop: Tightened margin between title and marquee */
        padding-bottom: 0px; 
        padding-top: 0px; 
    }
}

.testimonial-label {
    display: block;
    color: #FFC107;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-size: 11px; /* Slightly smaller label */
    font-weight: 800;
    padding-bottom: 0px;
    padding-top: 0px;
}

.testimonial-main-title {
    color: #18181b;
    font-size: clamp(2rem, 5vw, 3.5rem); /* Slightly smaller max size to keep it tight */
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.1;
    margin-top: 10px; 
}

.testimonial-main-title span {
    font-weight: 600;
    color: #a1a1aa; /* zinc-400 */
}

@media (min-width: 768px) {
    .testimonial-label {
        /* Desktop: Tightened margin between title and marquee */
        padding-bottom: 0px; 
        padding-top: 30px; 
    }
    .testimonial-main-title {
        margin-top: 20px; 
    }
}

.testimonial-marquee-wrapper {
    display: flex;
    overflow: hidden;
    width: 100%;
}

.testimonial-track {
    display: flex;
    width: max-content;
    /* Increase to 80s or 100s if you want it to move slower and be easier to read */
    animation: testimonial-scroll 80s linear infinite; 
}

.testimonial-track:hover {
    animation-play-state: paused;
}

/* Individual Card Styling - Compact Version */
/* --- Testimonials Marquee --- */

.testimonial-card {
    /* Reduced width from 500px/600px to 400px for a sleeker look */
    flex: 0 0 400px; 
    background: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px; /* Slightly tighter padding */
    padding-bottom: 30px; /* Slightly tighter padding */
    padding-left: 30px; /* Slightly tighter padding */
    padding-right: 30px; /* Slightly tighter padding */
    border-radius: 20px;
    margin-right: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    border-color: var(--brand-yellow);
}

.testimonial-quote {
    /* Reduced font size for better readability */
    font-size: 1.1rem; 
    line-height: 1.6;
    color: #71717a;
    font-weight: 300;
    margin-bottom: 30px;
    font-style: italic;
}

.testimonial-footer {
    display: flex;
    align-items: center;
    gap: 15px;
}

.testimonial-line {
    width: 30px; /* Shorter accent line */
    height: 1px;
    background-color: var(--brand-yellow);
}

.testimonial-author h4 {
    font-size: 0.9rem; /* Smaller name */
    margin: 0;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.testimonial-author p {
    font-size: 0.75rem; /* Smaller organization text */
    margin: 5px 0 0 0;
    color: #a1a1aa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

/* --- Testimonials Responsive Scaling --- */

/* Tablet Mode */
@media (max-width: 1024px) {
    .testimonial-card {
        flex: 0 0 320px; /* Narrower card for tablets */
        padding: 25px;
        margin-right: 20px;
    }
    
    .testimonial-quote {
        font-size: 1rem; /* Slightly smaller text */
        margin-bottom: 20px;
    }
}

/* Mobile Mode */
@media (max-width: 768px) {
    .testimonial-card {
        flex: 0 0 280px; /* Slim card for phones */
        padding: 20px;
        border-radius: 15px; /* Softer corners for small screens */
        margin-right: 15px;
    }

    .testimonial-quote {
        font-size: 0.9rem; /* Professional small scale */
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .testimonial-author h4 {
        font-size: 0.8rem;
    }

    .testimonial-author p {
        font-size: 0.65rem;
    }
    
    .testimonial-line {
        width: 20px; /* Shorter line on mobile */
    }
}


/* ==========================================================================
   ABOUT PAGE - ABOUT.PHP
   ========================================================================== */

/* --- About Page Layout --- */
.about-page-wrapper {
    background-color: var(--brand-black);
    min-height: 100vh;
    padding-top: 250px; /* Space for fixed header */
    padding-bottom: 80px;
}

.about-hero {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    margin-bottom: 100px;
}

.about-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: center;
}

@media (min-width: 992px) {
    .about-hero-grid {
        grid-template-columns: repeat(12, 1fr);
    }
    
    .about-hero-text {
        grid-column: span 7; /* Reduced from 8 */
    }
    
    .about-hero-visual {
        grid-column: span 5; /* Increased from 4 */
    }
}

/* --- Typography --- */
.about-title {
   /* Reduced: 2.5rem (Mobile Floor), 6vw (Growth Speed), 4.5rem (Desktop Ceiling) */
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.05em;
    margin: 30px 0;
    color: #ffffff;
}

.about-title-italic {
    font-family: 'Gelasio', serif; /* Matching your font import */
    font-style: italic;
    color: rgba(255, 255, 255, 0.3);
    /* Reduced from 0.8em to 0.7em for a more elegant, smaller contrast */
    font-size: 0.9em;
    font-weight: 200;
}

.about-description {
    color: #a1a1aa;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    line-height: 1.6;
    max-width: 700px;
    font-weight: 300;
}

.about-description span {
    color: #FFC107;            /* text-brandYellow */
    font-weight: 400;
}

/* --- Visual Box Container --- */
.about-hero-visual {
    padding: 24px; /* Creates space for the frame to "hang" into */
}

.visual-box {
    position: relative;
    z-index: 1; /* Establishes a stacking context */
    width: 100%;
    aspect-ratio: 3/2;
}

/* The Frame */
.visual-box::after {
    content: "";
    position: absolute;
    /* Positioned relative to the box, but pushed outside */
    bottom: -20px; 
    left: -20px;
    width: 100px;
    height: 100px;
    
    /* Using your brand color variable */
    border-left: 2px solid rgba(255, 193, 7, 0.4); 
    border-bottom: 2px solid rgba(255, 193, 7, 0.4);
    
    /* Ensure it stays behind the image but above the page background */
    z-index: -1; 
    pointer-events: none;
}

/* The Image itself */
.visual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px; /* Gives the image rounded corners */
    display: block;
    filter: grayscale(100%);
    transition: all 0.8s ease;
}

.visual-box:hover .visual-img {
    filter: grayscale(0%);
    transform: translateY(-5px); /* Subtle lift on hover */
}

/* --- Mission Light Section --- */
.mission-light-section {
    background-color: #f4f4f5; /* zinc-50 */
    padding: 80px 5%;
    position: relative;
    z-index: 10;
    color: #000000; /* brandBlack */
}

.mission-container {
    max-width: 1400px;
    margin: 0 auto;
}

.mission-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
}

@media (min-width: 992px) {
    .mission-grid {
        grid-template-columns: repeat(12, 1fr);
        gap: 80px;
    }
    .mission-headline { grid-column: span 5; }
    .mission-details { grid-column: span 7; }
}

/* Typography for Light Section */
.mission-text {
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.07em;
    margin-top: 20px;
}

.mission-italic {
    font-family: 'Gelasio', serif;
    font-style: italic;
    font-weight: 300;
    color: #a1a1aa; /* zinc-400 */
}

/* Details Styling */
.mission-divider {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    width: 100%;
    margin-bottom: 50px;
}

.details-subgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 768px) {
    .details-subgrid {
        grid-template-columns: 1fr 1fr;
    }
}

.detail-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #a1a1aa; /* zinc-400 */
    margin-bottom: 15px;
}

.detail-desc {
    color: #52525b; /* zinc-600 */
    line-height: 1.6;
    font-size: 1rem;
}

/* --- Stats Section --- */

.stats-section {
    padding: 60px 5%;
    border-top: 1px solid var(--white-10);
    border-bottom: 1px solid var(--white-10);
    margin: 40px 0;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-number {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: var(--brand-yellow);
    line-height: 1;
}
.stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.5);
}


/* --- Vision & Leadership Section --- */
.vision-section {
    padding: 80px 5%;
    background-color: #FFFFFF;
    text-align: center;
}

.vision-container {
    max-width: 1000px;
    margin: 0 auto;
}

.quote-wrapper {
    position: relative;
    padding-top: 40px;
}

/* Large decorative quotation mark */
.quote-mark {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Gelasio', serif;
    font-size: 8rem;
    color: var(--brand-yellow);
    opacity: 0.15;
    line-height: 1;
    pointer-events: none;
}

.vision-quote {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 300;
    line-height: 1.4;
    color: #18181b;
    margin-bottom: 50px;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

/* Signature Styling */
.signature-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.signature-line {
    width: 40px;
    height: 1px;
    background-color: var(--brand-yellow);
    margin-bottom: 10px;
}

.vision-signature {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: #18181b;
}

.vision-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #18181b;
}


/* --- Our Values Section --- */
.values-section {
    padding: 80px 5%;
    background-color: var(--white-20);
}

.values-container {
    max-width: 1400px;
    margin: 0 auto;
}

.values-header {
    margin-bottom: 80px;
}

.values-main-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1;
    margin-top: 20px;
    letter-spacing: -0.04em;
    color: #ffffff;
}

/* Values Grid Layout */
.values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 992px) {
    .values-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 60px;
    }
}

/* Individual Value Card */
.value-card {
    padding: 40px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.5s ease;
}

.value-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--brand-yellow);
    transform: translateY(-10px);
}

.value-number {
    font-family: 'Gelasio', serif;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--brand-yellow);
    margin-bottom: 20px;
    display: block;
}

.value-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.value-text {
    font-size: 1rem;
    line-height: 1.7;
    color: #a1a1aa; /* zinc-400 */
    font-weight: 300;
}


/* --- Capabilities Section --- */
.capabilities-section {
    padding: 80px 5%;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.capabilities-container {
    max-width: 1400px;
    margin: 0 auto;
}

.capabilities-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin: 20px 0 20px;
    color: #ffffff;
}

.capabilities-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
}

@media (min-width: 992px) {
    .capabilities-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 80px;
    }
}

/* Category Columns */
.cap-header {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid var(--brand-yellow);
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.cap-icon {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--brand-yellow);
    border: 1px solid var(--brand-yellow);
    padding: 2px 6px;
    border-radius: 4px;
}

.cap-cat {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
}

/* List Styling */
.cap-list {
    list-style: none;
    padding: 0;
}

.cap-list li {
    font-size: 0.95rem;
    color: #a1a1aa; /* zinc-400 */
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-weight: 300;
    transition: color 0.3s ease;
}

.cap-list li:hover {
    color: #ffffff;
}

.cap-list li:last-child {
    border-bottom: none;
}

/* --- Mini CTA Section --- */
.mini-cta-section {
    padding: 0px 5% 20px; /* Generous bottom padding before footer */
    text-align: center;
}

.mini-cta-container {
    max-width: 800px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

.mini-cta-title {
    color: #ffffff;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 300; /* Light weight as per your tailwind 'font-light' */
    margin-bottom: 40px;
}

.explore-link {
    display: inline-flex;
    align-items: center;
    gap: 15px; /* Default gap */
    color: var(--brand-yellow);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.explore-link .arrow {
    font-size: 1.2rem;
    transition: transform 0.4s ease;
}

/* Hover Effect: The Arrow Slides */
.explore-link:hover {
    gap: 30px; /* Mimics tailwind hover:gap-8 */
    color: #ffffff; /* Optional: turn text white on hover for extra pop */
}

.explore-link:hover .arrow {
    transform: translateX(5px);
}




/* ==========================================================================
   ABOUT PAGE ADDITIONS - EDITORIAL THEME ALTERNATIONS
   ========================================================================== */
   .about-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 5;
}

/* 1. PURPOSE SECTION STYLES (WHITE BG) */
.about-purpose-section.text-light-bg {
    position: relative;
    padding: 120px 0;
    background: #FFFFFF;
    overflow: hidden;
}

.purpose-transformation-flow {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4rem;
    width: 100%;
}

.flow-step {
    background: #F9F9F9;
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 24px 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.flow-from {
    font-size: 16px;
    font-weight: 500;
    color: #585757;
    width: 140px;
}

.flow-arrow {
    color: #FFC107;
    font-weight: 900;
}

.flow-to {
    font-size: 16px;
    font-weight: 500;
    color: #a1a1aa; /* zinc-400 */
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.flow-step.highlight-step {
    background: #111111;
    border: none;
}

.flow-step.highlight-step .flow-from { color: rgba(255, 255, 255, 0.5); }
.flow-step.highlight-step .flow-to { color: #FFFFFF; }


/* 2. BELIEFS SECTION STYLES (BLACK BG) */
.about-beliefs-section {
    position: relative;
    padding: 120px 0;
    background: #000000;
    overflow: hidden;
}

.beliefs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 4rem;
}

@media (min-width: 640px) { .beliefs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .beliefs-grid { grid-template-columns: repeat(4, 1fr); } }

.belief-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px 24px;
    border-radius: 8px;
}

.belief-card h3 {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 14px 0;
    letter-spacing: -0.01em;
}

.belief-card p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

@media (min-width: 1024px) {
    .core-anchor-belief {
        grid-column: span 4;
        background: rgba(255, 193, 7, 0.03);
        border: 1px solid #FFC107;
    }
    .core-anchor-belief h3 { color: #FFC107; }
}


/* 3. WHAT MAKES US DIFFERENT (WHITE BG) */
.about-different-section.text-light-bg {
    position: relative;
    padding: 120px 0;
    background: #FAFAFA;
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.different-split-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    margin-top: 3.5rem;
}

@media (min-width: 1024px) {
    .different-split-layout { grid-template-columns: 1.6fr 1.4fr; gap: 6rem; }
}

.diff-strike {
    font-size: 16px;
    color: #999999;
    text-decoration: line-through;
    margin-bottom: 0.5rem;
    font-weight: 400;
}

.diff-hero-text {
    font-size: clamp(24px, 3.5vw, 38px);
    font-weight: 800;
    color: #111111;
    line-height: 1.2;
    margin-top: 1.5rem;
}

.highlight-yellow-text {
    color: #000000;
    background: #FFC107;
    padding: 0 8px;
    display: inline-block;
}

.cap-list-title {
    display: block;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    color: #666666;
    letter-spacing: 0.15em;
    margin-bottom: 1.5rem;
}

.diff-caps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.diff-caps-list li {
    font-size: 18px;
    font-weight: 700;
    color: #111111;
    padding-left: 24px;
    position: relative;
}

.diff-caps-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #FFC107;
    border-radius: 50%;
}


/* 4. OUR APPROACH SECTION (BLACK BG) */
.about-approach-section {
    position: relative;
    padding: 120px 0;
    background: #080808;
    overflow: hidden;
}

.approach-main-title {
    color: #FFFFFF;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    margin-top: 1rem;
}

.approach-linear-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 4rem;
    width: 100%;
}

@media (min-width: 768px) {
    .approach-linear-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .approach-linear-steps { grid-template-columns: repeat(5, 1fr) !important; gap: 0.75rem; }
}

.approach-step-card {
    background: #111111;
    border: 1px solid #FFC107 !important;
    padding: 30px 20px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px;
    min-width: 0 !important;
}

.step-idx {
    font-size: 11px;
    font-family: monospace;
    font-weight: 900;
    color: #000000;
    background: #FFC107;
    padding: 2px 6px;
    border-radius: 3px;
    align-self: flex-start;
}

.approach-step-card h3 {
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.4;
    margin: 20px 0 0 0;
    text-transform: uppercase;
}

.approach-step-card h3 .sub-span {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: none;
    font-weight: 400;
    margin-top: 4px;
}



/* ==========================================================================
   SERVICES PAGE - SERVICES.PHP
   ========================================================================== */
/* --- Services Page Layout --- */
.services-page-wrapper {
    background-color: var(--white);
    padding-top: 150px;
    padding-bottom: 100px;
}

.services-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 5%;
}

.services-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.05em;
    margin: 30px 0;
    color: #ffffff;
    margin-top: 20px;
}

.services-title-italic {
    font-family: 'Gelasio', serif;
    font-style: italic;
    color: rgba(255, 255, 255, 0.3);
    /* Reduced from 0.8em to 0.7em for a more elegant, smaller contrast */
    font-size: 0.9em;
    font-weight: 200;
}

.services-grid-section {
    padding-top: 30px; /* Reduced vertical padding from 60px */
    padding-bottom: 30px; /* Reduced vertical padding from 60px */
    background-color: #FFFFFF; /* Ensuring black background */
    padding-left:2%;
    padding-right:2%;
}

/* --- Bento Grid --- */
.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px; /* Creates the thin lines between cards */
    background-color: rgba(255, 255, 255, 0.1); /* The line color */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    overflow: hidden;

}

@media (min-width: 768px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .bento-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Service Card --- */

/* --- Service Image Handling --- */
.service-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Cinematic widescreen ratio */
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 30px;
    background-color: #111; /* Placeholder color while loading */

    /* 1. Locks the top image block so it never stretches or squishes, keeping it uniform across all cards */
    flex-shrink: 0; 
}

.service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.service-card {
    background-color:  rgba(0, 0, 0, 0.05);
    padding: 30px; /* Reduced from 60px to keep the grid tight */
    position: relative;
    transition: background-color 0.5s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Forces all cards in a row to match the height of the tallest card */
    overflow: hidden;
}

.service-content {
    /* 2. CRUCIAL: Tells this container to automatically grow and absorb all remaining vertical space inside the card */
    flex-grow: 1; 
    
    /* 3. Forces uniform padding around the text block */
    padding: 0 30px 30px 30px; 
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
} 

.service-description {
    color: #52525b; /* #a1a1aa zinc-400 */
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 300;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
    padding-bottom: 0px;
}

/* List Styling */
.servicecard-list {
    list-style: none;
    padding-left: 30px;
    margin-top: -30px;
}

.servicecard-list li {
    font-size: 0.95rem;
    color: #000000; /* zinc-400 */
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-weight: 300;
    transition: color 0.3s ease;
    margin-top: 0px
}

.servicecard-list li:hover {
    color: #a1a1aa;
}

.servicecard-list li:last-child {
    border-bottom: none;
}

.service-card:hover .service-img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05); /* Subtle zoom in */
}

.service-number {
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: 4rem; /* Smaller than before so it fits the image box */
    font-weight: 900;
    color: rgba(255, 193, 7, 0.7);
    z-index: 2;
    transition: color 0.5s ease;
}

.service-card:hover .service-number {
    color: rgba(255, 255, 255, 1);
}

.service-card:hover  {
    color: rgba(255, 193, 7, 0.7);
}

.service-name {
    color: var(--brand-black);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
}

/* Animated Line at bottom of card */
.service-line {
    width: 50px;
    height: 1px;
    /* 4. Pushes the visual bottom accent divider to the very absolute bottom of the container box automatically */
    margin-top: auto; 
    padding-top: 20px;
    background-color: rgba(255, 193, 7, 0.3);
    transition: width 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.service-card:hover .service-line {
    width: 100%;
}

/* Footer CTA */
.services-footer-cta {
    text-align: center;
    margin-top: 100px;
    padding-bottom: 50px;
}

.cta-italic-sub {
    font-family: 'Gelasio', serif;
    font-style: italic;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 30px;
    font-size: 2em;
}


/* ==========================================================================
   WORK PAGE - WORK.PHP
   ========================================================================== */
/* --- Work Page Wrapper --- */
.work-page-wrapper {
    background-color: var(--white);
    padding-top: 150px;
    padding-bottom: 100px;
    position: relative;
    overflow: hidden;
}

.work-header {
    padding-top: 50px;
}

.work-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}


.header-flex {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

@media (min-width: 768px) {
    .header-flex {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
}

.work-title {
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 800;
    margin-top: 15px;
    color: #fff;
    letter-spacing: -0.05em;
}

.work-title-italic {
    font-family: 'Gelasio', serif;
    font-style: italic;
    color: rgba(255, 255, 255, 0.3);
}

.work-header-desc {
    max-width: 300px;
    font-size: 0.9rem;
    color: #71717a; /* zinc-500 */
    border-left: 1px solid rgba(255, 255, 255, 0.7);
    padding-left: 24px;
    line-height: 1.6;
}

/* --- Filter Menu --- */
.filter-section {
    margin-top: 60px;
    background-color: var(--white);
    padding-top: 20px;
    background-color: #FFFFFF;
}

.filter-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 20px;
    background-color: var(--white);
}

.filter-btn {
    background: none;
    border: none;
    color: #71717a;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover, .filter-btn.active {
    color: var(--brand-black);
}

/* --- Portfolio Grid --- */

.portfolio-section {
    padding-top: 40px; /* Reduced vertical padding from 60px */
    padding-bottom: 30px; /* Reduced vertical padding from 60px */
    background-color: #FFFFFF; /* Ensuring black background */
    padding-left:2%;
    padding-right:2%;
}

.portfolio-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    background-color: #FFFFFF; /* Ensuring black background */
}

/* --- Work-page Specific: 3-Column Row --- */

/* 1. The Grid: Forces 4 columns on desktop */
.portfolio-work-grid {
    display: grid;
    grid-template-columns: 1fr; /* Stacked on mobile */
    gap: 40px;
    width: 100%;
    background-color: #FFFFFF; /* Ensuring black background */
}

@media (min-width: 768px) {
    .portfolio-work-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 on tablet */
    }
}

@media (min-width: 1100px) {
    .portfolio-work-grid {
        grid-template-columns: repeat(3, 1fr) !important; /* 3 columns on desktop */
        gap: 40px;
    }
}

/* 2. The Cards: Shrink the text and image radius to fit the 4-col look */
.portfolio-work-grid .project-card {
    width: 100%;
    text-decoration: none !important;
}

.portfolio-work-grid .project-image-wrapper {
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.portfolio-work-grid .project-meta h3 {
    font-size: 1.05rem; /* Smaller font for 3-column layout */
    color: #000;
    margin: 10px 0 3px 0;
}

.portfolio-work-grid .project-meta p {
    font-size: 10px;
    color: #71717a;
    text-transform: uppercase;
}

/* 3. The Button: Shrink it slightly for small cards */
.portfolio-work-grid .view-project {
    padding: 10px 18px;
    font-size: 9px;
}


.portfolio-link-icon {
    color: #FFC107;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.3em;
    font-weight: 700;
    border: 1px solid #000;
    padding: 12px 24px;
    border-radius: 50px; /* Makes it a pill shape */
    transition: all 0.3s ease;
    background: #000;
    backdrop-filter: blur(5px);
}

/* Hover effect for the icon itself */
.project-card:hover .portfolio-link-icon {
    background: var(--brand-yellow);
    color: var(--brand-black);
    border-color: var(--brand-yellow);
}


/* ==========================================================================
   CASE-STUDY PAGE - CASE-STUDY.PHP
   ========================================================================== */
/* --- Case Study Page --- */
.case-study-wrapper {
    background-color: var(--brand-black);
}

/* --- Case Study Header Top Bar --- */
.case-hero-top-bar {
    display: flex;
    flex-wrap: wrap;       /* Allows elements to move to next line */
    justify-content: flex-end; /* Pushes the first element (Back button) to the right */
    align-items: center;
    margin-bottom: 30px;
    width: 100%;
    gap: 20px;             /* Space between rows */
    position: relative;
    z-index: 1000;
}

.back-to-work-top {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #FFC107;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-decoration: none;
    transition: all 0.3s ease;
    /* Keeps the button on the top right */
}

.back-to-work-top .arrow {
    transition: transform 0.3s ease;
}

.back-to-work-top:hover {
    color: #FFFFFF;
}

.back-to-work-top:hover .arrow {
    transform: translateX(-5px); /* Nudge left for a "back" feeling */
}

.case-cat-label {
    width: 100%;           /* Forces this element to take a full row */
    text-align: left;      /* Aligns text to the left */
    display: block;
    color: var(--brand-yellow);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 0;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .case-hero-top-bar {
        margin-bottom: 20px;
    }
}

/* Arrow nudges right on hover now that it's on the right side */
.back-to-work-top:hover .arrow {
    transform: translateX(5px);
}


/* Mobile Adjustment */
@media (max-width: 768px) {
    .case-hero-top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .case-hero {
        margin-top: 50px;
    }
    .back-to-work-top {
        order: -1; /* Puts back button above category on mobile if desired */
    }
}


/* Immersive Hero */
.case-hero {
    height: 60vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding-bottom: 40px;
}

.case-cat-label {
    display: inline-block;
    color: var(--brand-yellow);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 20px;
}

.case-main-title {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.case-meta-grid {
    display: flex;
    gap: 60px;
}

.meta-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.2em;
    margin-bottom: 5px;
}

.meta-value {
    font-size: 1rem;
    font-weight: 400;
}

/* Video Section */
.cinema-section {
    margin-top: 40px; /* Overlaps with hero for depth */
    margin-bottom: 100px;
}

.video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 50px 100px -20px rgba(0,0,0,0.5);
    z-index: 10;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Detail Grid */
.details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 80px;
    padding-bottom: 120px;
    margin-left: 2%;
    margin-right: 2%;
}

@media (min-width: 992px) {
    .details-grid {
        grid-template-columns: 1.5fr 1fr;
    }
}

.details-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--brand-yellow);
    letter-spacing: 0.3em;
    margin-bottom: 30px;
}

.details-text-large {
    font-size: 1.25rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.8);
    font-weight: 300;
}

/* Sidebar Intel */
.intel-box {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 40px;
    margin-bottom: 60px;
    justify-content: flex-end; /* Pushes the first element (Back button) to the right */
}

.intel-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
}

.intel-list {
    list-style: none;
    padding: 0;
    color: rgba(255,255,255,0.5);
    font-size: 0.9rem;
    line-height: 2;
}

.back-link {
    color: #FFC107;
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    opacity: 0.4;
    transition: opacity 0.3s;
    justify-content: flex-end; /* Pushes the first element (Back button) to the right */
}

.back-link:hover {
    opacity: 1;
    color: #FFFFFF;
}

/* ---  CASE STUDY: 4-COLUMN BRIEF SECTION --- */

   .brief-section {
    padding: 100px 0;
    background-color: var(--brand-black);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* The Container Wrapper */
.case-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

/* The Grid Logic */
.brief-grid-four {
    display: grid;
    grid-template-columns: 1fr; /* Stacked on mobile */
    gap: 50px;
}

/* Tablet Layout (2x2) */
@media (min-width: 768px) {
    .brief-grid-four {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop Layout (4 Columns Side-by-Side) */
@media (min-width: 1100px) {
    .brief-grid-four {
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
        align-items: start;
    }
}

/* Column Styling */
.brief-col {
    display: flex;
    flex-direction: column;
}

/* Typography: The Brief Title (Col 1) */
.brief-main-label {
    font-family: 'Gelasio', serif; /* Or your chosen serif font */
    font-style: italic;
    font-size: 2.2rem;
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.1;
}

.brief-accent-line {
    width: 60px;
    height: 3px;
    background-color: var(--brand-yellow);
}

/* Typography: Sub-headers (Challenge, Strategy, Scope) */
.brief-sublabel, 
.intel-label {
    color: var(--brand-yellow);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 20px;
    display: block;
}

/* Body Text */
.brief-desc {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    margin: 0;
}

/* Scope of Work List (Col 4) */
.intel-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.intel-list li {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
}

.intel-list li:last-child {
    border-bottom: none;
}

/* Yellow Bullet Points */
.intel-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 4px;
    height: 4px;
    background-color: var(--brand-yellow);
    border-radius: 50%;
}

/* Back to Archive Link */
.back-link {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #ffffff;
    text-decoration: none;
    opacity: 0.5;
    font-weight: 700;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.back-link:hover {
    opacity: 1;
    color: var(--brand-yellow);
    transform: translateX(-5px);
}

/* ==========================================================================
   5-COLUMN SINGLE ROW EDITORIAL BRIEF SHOWCASE
   ========================================================================== */
   .showcase-row-section {
    padding: 30px 0;
    background-color: var(--brand-black, #0c0c0c);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
}

/* Base layout: stacked in a single vertical column for mobile views */
.showcase-row-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

/* Desktop Breakpoint: Forces all 5 cards into 1 row without wrapping */
@media (min-width: 1150px) {
    .showcase-row-wrapper {
        flex-direction: row;        /* Forces layout onto a horizontal line */
        flex-wrap: nowrap;          /* CRITICAL: Strict block against breaking to new lines */
        justify-content: space-between;
        align-items: stretch;       /* Makes all columns equal heights automatically */
        gap: 30px;                  /* Clean visual separation gutter */
    }

    .showcase-row-card {
        /* Distributes space completely evenly (1/5th width minus gutters) */
        flex: 1 1 0px; 
        min-width: 0;               /* Prevents long text from pushing the column wider */
    }
}

/* Typography & Layout Internal Elements */
.showcase-row-label {
    color: #FFC107;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    margin-bottom: 18px;
    margin-top: 0;
    display: block;
}

.showcase-row-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.88rem;            /* Optimized scaling font for 5-column space bounds */
    line-height: 1.6;
    font-weight: 300;
    margin: 0;
}

/* Custom Panel Container for Deliverables Column */
.showcase-row-panel {
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.03);
    padding: 15px 25px 25px 25px;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    margin-top: -20px;

    /* NEW STYLES: Vertically centers the text content inside this block */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Drops headers and bullet arrays straight into the vertical center line */
}

.showcase-row-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.showcase-row-item {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.showcase-row-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.showcase-row-bullet {
    color: #FFC107;
    font-weight: 700;
}



/* ==========================================================================
   CONTACT PAGE STYLES
   ========================================================================== */

/* Page Outer Wrapper */
.contact-page-wrapper {
    background-color: var(--brand-black);
    min-height: 100vh;
    padding: 180px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

/* Page Constraints Gutter */
.contact-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

/* Split Column Grid Design */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    align-items: start;
    width: 100%;
}

@media (min-width: 1024px) {
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 96px; /* Replicates Tailwind's gap-24 (6rem) */
    }
}

/* --- Left Side Panel Info --- */
.contact-title {
    color: #ffffff;
    font-size: clamp(2.5rem, 6vw, 4rem); /* Replicates responsive fluid text-6xl/8xl */
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.9;
    margin: 0 0 40px 0;
}

.contact-title-italic {
    color: var(--brand-yellow);
    font-style: italic;
    font-family: 'PT Serif', serif;
    font-weight: 200;
}

.contact-header-desc {
    max-width: 300px;
    font-size: 1rem;
    color: #71717a; /* zinc-500 */
    border-left: 1px solid rgba(255, 255, 255, 0.7);
    padding-left: 24px;
    line-height: 1.6;
    padding-bottom: 25px;
}

.about-title {
    /* Reduced: 2.5rem (Mobile Floor), 6vw (Growth Speed), 4.5rem (Desktop Ceiling) */
     font-size: clamp(2.5rem, 6vw, 4.5rem);
     font-weight: 700;
     line-height: 0.9;
     letter-spacing: -0.05em;
     margin: 30px 0;
     color: #ffffff;
 }
 
 .about-title-italic {
     font-family: 'Gelasio', serif; /* Matching your font import */
     font-style: italic;
     color: rgba(255, 255, 255, 0.3);
     /* Reduced from 0.8em to 0.7em for a more elegant, smaller contrast */
     font-size: 0.9em;
     font-weight: 200;
 }

 .contact-statement span {
    font-weight: 300;
    color: #FFC107;
    display: block;
    margin-top: 0rem;
    font-size: 24px;
}

.contact-meta-group {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.meta-item-box {
    cursor: pointer;
}

.meta-item-box span {
    color: #FFC107;
    font-weight: 700;
}

.meta-item-label {
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.2em;
    margin: 0 0 8px 0;
}

.meta-item-value {
    color: #ffffff;
    font-size: 1.25rem;
    margin: 0;
    transition: color 0.3s ease;
}

/* Hover Accent Matching Tailwind Group Behavior */
.meta-item-box:hover .meta-item-value {
    color: var(--brand-yellow);
}

/* --- Right Side Glass Form Card --- */
.contact-form-card {
    background: #ffffff; /* Solid white background */
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px;            /* Reduced from 40px for a tighter box */
    border-radius: 20px;      /* Slightly softer radius to fit the smaller size */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    
    /* NEW: Constrain the width of the form so it feels compact */
    width: 100%;
    max-width: 520px;         /* Prevents the form from stretching too wide */
    box-sizing: border-box;
    
    /* Centers the card on mobile screens when stacked */
    margin: 0 auto;           
}

@media (min-width: 768px) {
    .contact-form-card {
        padding: 45px 50px;   /* Reduced from 64px for clean, compact breathing room */
    }
}

/* Interactive Form Construction */
.interactive-form {
    display: flex;
    flex-direction: column;
    gap: 28px;   /* Tighter spacing between fields (Reduced from 36px) */
}

.form-field-group {
    position: relative;
    width: 100%;
}

/* Consolidated Form Input Targets */
.form-field-group input,
.form-field-group select,
.form-field-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15); /* Darker line for visibility */
    padding: 12px 0;   /* Reduced from 16px to save vertical space */
    color: #000000; /* Black text so it's readable */
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.15em;
    border-radius: 0;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}


/* Specialized Select Element Padding Overrides */
.form-field-group select {
    text-transform: uppercase; /* Keeps the dropdown label uppercase before selecting */
    letter-spacing: 0.15em;
    font-size: 10px;
    appearance: none;
    -webkit-appearance: none;
    /* Inverted arrow to black SVG so it's visible on white */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='black'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M1.5 4.5l4.5 4.5 4.5-4.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right center;
}

/* Options dropdown container styling */
.form-field-group select option {
    background-color: #ffffff;
    color: #000000;
    text-transform: uppercase;
}

/* Textarea Layout Configurations */
.form-field-group textarea {
    resize: none;
}

/* Placeholder Specific Styling Contexts */
/* Custom placeholder visibility settings */
.form-field-group input::placeholder,
.form-field-group textarea::placeholder {
    color: rgba(0, 0, 0, 0.4); /* Muted gray placeholders */
}

/* Focused Highlight States */
/* Active Highlight Focus State */
.form-field-group input:focus,
.form-field-group select:focus,
.form-field-group textarea:focus {
    outline: none;
    border-bottom-color: #000000; /* Sharp black underline focus */
}

/* Custom Submission Button Look */
.form-submit-btn {
    width: 100%;
    padding: 18px;   /* Reduced from 24px for a sleeker button look */
    background-color: #000000; /* Black button */
    color: #ffffff; /* White text */
    border: none;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.3s ease;
}

.form-submit-btn:hover {
    background-color: var(--brand-yellow); /* Changes to yellow on hover */
    color: #000000; /* Flips text to black on hover */
    transform: scale(1.02);
}

/* ==========================================================================
   SUCCESS TOAST BANNER STYLES
   ========================================================================== */
.success-toast-banner {
    position: fixed;
    top: 30px;
    right: 30px;
    background-color: #FFC107; /* Contrast sharp white canvas */
    color: #000000;
    padding: 16px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 99999;
    animation: slideInToast 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toast-content p {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.toast-icon {
    width: 22px;
    height: 22px;
    color: #2e7d32; /* Deep premium green for success checkmark */
}

.toast-close {
    background: transparent;
    border: none;
    color: rgba(0, 0, 0, 0.4);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

.toast-close:hover {
    color: #000000;
}

/* Slide in animation macro */
@keyframes slideInToast {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==========================================================================
   IMPACT SECTION ABOVE FOOTER
   ========================================================================== */
/* --- Impact Section Refined (Wide & Sleek) --- */

.impact-section {
    padding-top: 80px 5%; /* Reduced vertical padding from 60px */
    background-color: #000; /* Ensuring black background */
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    margin: 0 5%;
}

.impact-container {
    max-width: 1400px;
    margin: 0 auto;
}

.impact-grid {
    display: grid;
    grid-template-columns: 1fr; /* Stacked on mobile */
    gap: 20px; /* Tighter gap */
    padding-top: 40px; /* Reduced vertical padding from 60px */
}

@media (min-width: 992px) {
    .impact-grid {
        /* Using a 5-7 split instead of 4-8 makes the yellow card wider */
        grid-template-columns: repeat(12, 1fr); 
        align-items: stretch;
    }

    .impact-section {
        padding-top: 80px; /* Reduced vertical padding from 60px */
        padding-bottom: 80px; /* Reduced vertical padding from 60px */
    }
}

/* --- Yellow Card (Column Span 4) --- */
.impact-card-yellow {
    background-color: #FFC107;
    border-radius: 24px; /* Slightly tighter corners for a modern look */
    padding: 40px; /* Reduced padding to make it shorter */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease;
}

@media (min-width: 992px) {
    .impact-card-yellow {
        grid-column: span 4; /* Occupies ~42% of the width */
        
    }
}

.impact-number {
    color: rgba(0, 0, 0, 0.15);
    font-size: 6rem; /* Reduced from 8rem to keep it "shorter" */
    font-weight: 900;
    line-height: 1;
    margin-bottom: 10px;
    transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.impact-card-yellow:hover .impact-number {
    transform: scale(1.1);
}

.impact-label {
    color: #000;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.75rem; /* Reduced font size */
}

.impact-subtext {
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.7rem; /* Reduced font size */
    margin-top: 15px;
    max-width: 200px;
}

/* --- Image Card (Column Span 8) --- */
.impact-card-image {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    min-height: 280px; /* Reduced from 350px to make it shorter */
    background-color: #18181b;
}

@media (min-width: 992px) {
    .impact-card-image {
        grid-column: span 8; /* Matches the 5-span yellow card */
    }
}

.image-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    transition: all 1s ease;
    z-index: 0;
}

.impact-card-image:hover .image-bg {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #000000cc, transparent);
    z-index: 1;
}

.image-content {
    position: relative;
    z-index: 2;
    padding: 40px; /* Reduced padding */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.image-content h3 {
    /* Slightly smaller font for the NAIROBI/AFRICA text */
    font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
    margin: 0;
}

.image-content h3.text-white { color: #fff; }
.image-content h3.text-yellow { color: #FFC107; }

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .impact-number { font-size: 5rem; }
    .image-content { padding: 40px 30px; }
    .image-content h3 { font-size: 2rem; }
}



/* ==========================================================================
   FOOTER - FINAL COMPACT 2-COLUMN FOOTER
   ========================================================================== */

   .site-footer {
    background-color: #050505;
    color: #ffffff;
    padding: 3rem 5% 3rem 5%; /* Using your preferred 5% margins */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-inner {
    max-width: 100%; /* Allows it to reach the far edges of your 5% padding */
    margin: 0 auto;
}

/* --- Main Layout Grid --- */
.footer-info-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

@media (min-width: 992px) {
    .footer-info-grid {
        flex-direction: row;
        justify-content: space-between; /* Pushes Nav to far right */
        align-items: flex-start;
    }
}

/* --- Left Column Group --- */
.footer-main-cta {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Logo & "Let's Craft" Row */
/* --- The Main Row Container --- */
.logo-title-row {
    display: flex;
    flex-direction: column; /* Stacked on mobile */
    align-items: flex-start;
    gap: 2rem;
}

@media (min-width: 992px) {
    .logo-title-row {
        flex-direction: row; /* Logo on left, everything else on right */
        align-items: flex-start; /* Aligns logo to the top of the text stack */
        gap: 2.5rem; /* Space between logo and text */
    }
}

/* --- The Vertical Stack (H2 + Button + Socials) --- */
.cta-text-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem; /* This is the space between H2, Button, and Socials */
}

/* --- Restore Colors and Icon Visibility --- */
.cta-text-stack h2 {
    color: #ffffff; /* "Let's craft" is White */
    margin: 0 !important;
    line-height: 1.1;
    /* 1.5rem = mobile floor, 2.5vw = scaling speed, 2.2rem = desktop ceiling */
    font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
}

.cta-text-stack h2 span {
    color: #FFC107; /* "next legacy" is Yellow */
}

.footer-logo {
    height: 80px; /* Mobile size */
    width: auto;
}

@media (min-width: 992px) {
    .footer-logo {
        height: 180px !important; /* Your requested desktop height */
    }
}

/* --- Arrow Button Styling --- */
.footer-cta-btn {
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 700;

    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.3em;
    transition: color 0.3s ease;
}

.arrow-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #FFC107;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure the SVG inside the circle is visible */
.arrow-circle svg {
    stroke: #FFC107; 
}

.footer-cta-btn:hover .arrow-circle {
    background-color: #FFC107;
}

.footer-cta-btn:hover .arrow-circle svg {
    stroke: #000000; /* Turns arrow black when background turns yellow */
}

/* --- Socials Visibility --- */
.footer-social-item svg {
    fill: #ffffff;
    width: 20px;
    height: 20px;
    transition: fill 0.3s ease;
}

.footer-social-item:hover svg {
    fill: #FFC107;
}




/* --- Action Row (Button & Socials) Underneath --- */
.footer-action-row {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.footer-social-cluster {
    display: flex;
    gap: 1rem;
}


.footer-social-item:hover {
    border-color: #FFC107;
    color: #FFC107;
    transform: translateY(-3px);
}

/* --- Right Column (Navigation) --- */
.footer-column-right {
    text-align: left;
}

@media (min-width: 992px) {
    .footer-column-right {
        text-align: right; /* Pushes text to the extreme right end */
    }
}

.footer-column-right h4 {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: #FFC107;
    margin-bottom: 1.5rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.8rem;
}

.footer-links a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
}

.footer-links a:hover { color: #fff; }

/* --- Copyright Row --- */
.footer-copyright {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.2);
}

/* --- Restore Headline Colors --- */
.logo-title-row h2 {
    color: #ffffff; /* Sets "Let's craft" to White */
}

.logo-title-row h2 span {
    color: #FFC107; /* Sets "next legacy" to Yellow */
    font-style: italic;
    font-family: 'Gelasio', serif; /* Matches your hero section style */
}

/* --- Restore the Arrow and Button Colors --- */
.footer-cta-btn {
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 700;
    transition: color 0.3s ease;
}

.footer-cta-btn:hover {
    color: #FFC107; /* Yellow on hover */
}

.arrow-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #FFC107; /* The yellow circle */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.footer-cta-btn:hover .arrow-circle {
    background-color: #FFC107;
    color: #000000;
}

/* --- Restore Social Icons Visibility --- */
.footer-social-cluster {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.footer-social-item {
    color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
    transition: all 0.3s ease;
}

.footer-social-item:hover {
    color: #FFC107; /* Yellow on hover */
    transform: translateY(-3px);
}

.footer-social-item svg {
    width: 20px;
    height: 20px;
    fill: currentColor; /* Ensures the icon takes the color of the parent */
}


/* --- Fix for Back to Top Button --- */
#progress-wrap {
    position: fixed;
    right: 30px;
    bottom: 30px;
    height: 55px; /* Fixed height */
    width: 55px;  /* Fixed width */
    cursor: pointer;
    display: block;
    border-radius: 50px;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 400ms linear;
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

#progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#progress-wrap svg path { 
    fill: none; 
}

#progress-wrap svg.progress-circle path {
    stroke: #FFC107; /* Progress color */
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 400ms linear;
}

/* Internal Arrow Button */
.back-to-top-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Custom Social Icons */
.social-icon-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.social-icon-circle:hover {
    border-color: #FFC107;
    color: #FFC107;
    transform: translateY(-3px);
}