@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    /* --- LIGHT THEME (Default) --- */
    --bg-primary: #FFFFFF;
    --bg-primary-material: rgba(255, 255, 255, 0.90);
    --bg-secondary: #F7F7F7;
    --bg-plus-1: rgba(0, 0, 0, 0.08); 
    --bg-plus-orange: rgba(255, 114, 32, 0.40); 
    
    
    --text-primary: #000000;
    --text-secondary: rgba(0, 0, 0, 0.50); /* 50% Black */
    
    --border-secondary: rgba(0, 0, 0, 0.10); /* 10% Black */

    --clr-lime: #B6FF6D;
    --clr-pill-hover: var(--bg-plus-1); /* Using your 8% black/10% white */
    --clr-orange: #FF7220;
    --clr-green: #82F212;


    /* Font Family */
    --font-main: 'Inter', sans-serif;

    /* Type Scale (Adjust these to match your Figma exactly) */
    --fs-h1: 32px;        /* Heading 1 */
    --fs-h2: 24px;        /* Heading 2 */
    --fs-label-m: 16px;   /* Label M */
    --fs-body-m: 15px;    /* Body M */
    --fs-body-s: 13px;    /* Body S */

    /* Font Weights */
    --fw-semibold: 600;
    --fw-medium: 500;
    --fw-regular: 400;

    /* Letter Spacing */
    --ls-tight: -0.02em;  /* Common for Inter headings */


    /* Layout */
    --grid-gutter: 20px;
    --grid-margin: 80px;
    --sidebar-width: 400px;

}

@media (max-width: 1600px) {
    :root {
        --grid-margin: 40px;
    }
}

@media (max-width: 500px) {
    :root {
        --grid-margin: 20px;
    }
}


/* --- DARK THEME OVERRIDE --- */
[data-theme="dark"] {
    --bg-primary: #0A0A0A;
    --bg-secondary: #111111;
    --bg-primary-material: rgba(0, 0, 0, 0.5);
    --bg-plus-1: rgba(255, 255, 255, 0.15); /* 10% White */
    
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.60); /* 70% White */
    
    --border-secondary: rgba(255, 255, 255, 0.15); /* 10% White */
}

/* --- BASE STYLES --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    
    /* 1. Complete the transition property */
    transition: 
        background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.5s ease;
    
    font-family: var(--font-main);
    font-size: var(--fs-body-m);
    font-weight: var(--fw-regular);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}


img {
  max-width: 100%;
  display: block;
}


h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-medium);
    line-height: 1.1;
    font-optical-sizing: auto;
}

h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    font-optical-sizing: auto;
}

/* Specific Utility Classes */
.label-m {
    font-size: var(--fs-label-m);
    font-weight: var(--fw-medium);
}

.body-s {
    font-size: var(--fs-body-s);
    color: var(--text-secondary); /* Automatically pulls from your theme colors */
}

/* Helper for secondary text */
.text-muted {
    color: var(--text-secondary);
}


/* --- PAGE LOAD ANIMATION --- */

/* 1. Only hide the Main Canvas (The Side Panel stays static) */
.main-canvas {
    opacity: 0;
    transform: translateY(40px);
    transition: none; 
    will-change: opacity, transform;
}

/* 2. Visible State for the Main Canvas */
.main-canvas.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: 
        opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}


/* 3. Keep the side panel fully visible at all times */
.side-panel {
    opacity: 1;
    transform: none;
}



/* --- SPECIFICITY-BOOSTED LAZY STYLES --- */

/* Target the image directly inside its container wrapper to guarantee it hides */
.project-media__container img.lazy,
img.lazy {
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

/* Match the exact same selector weight to force the browser to show it */
.project-media__container img.lazy.visible,
img.lazy.visible {
  opacity: 1;
  transform: translateY(0) !important; /* Force override layout shifts */
}


/* --- CSS CONFIG FOR VIEWPORT ELEMENTS --- */
.reveal-element {
  opacity: 0;
  transform: translateY(64px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-element.visible {
  opacity: 1;
  transform: translateY(0);
}



/* --- PROJECT SUMMARY ENTRY --- */

/* 1. Set the initial state */
.project-summary {
    opacity: 0;
    transform: translateY(40px); /* Subtle lift */
    will-change: opacity, transform;
}

/* 2. Set the 'is-visible' state */
.project-summary.is-visible {
    opacity: 1;
    transform: translateY(0);
    /* We make this slightly slower/later than the main canvas for a high-end feel */
    transition: 
        opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.2s; 
}

/* 3. Smooth out the metadata list within the summary */
.project-metadata {
    opacity: 0;
    transition: opacity 1s ease;
    transition-delay: 0.2s; /* Metadata comes in last */
}

.project-summary.is-visible .project-metadata {
    opacity: 1;
}

/* ==============================================================================================*/

.layout-wrapper {
    min-height: 100vh;
}

/* The Locked Side Panel */
.side-panel {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: var(--bg-primary);
    padding: 40px; 
    z-index: 100;
    overflow-y: auto;          /* Only shows scrollbar if content overflows */
    display: flex;             /* Helps with internal spacing */
    flex-direction: column;    /* Keeps your logo, nav, and footer stacked */
    
/* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

/* OUTSIDE the main block: Hide scrollbar for Chrome, Safari and Opera */
.side-panel::-webkit-scrollbar {
    display: none !important;  /* Added !important just to ensure Safari respects it */
}

/* The Scrollable Canvas */
.main-canvas {
    flex: 1;
    margin-left: var(--sidebar-width); /* Push content past the fixed sidebar */
    background-color: var(--bg-primary);
}

/* The 12-Column Grid Container */
.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gutter);
    
    /* 80px margins on the sides of the content */
    padding: 0 var(--grid-margin);
    
    /* Center the grid if the screen gets ultra-wide */
    margin: 0 auto;
}


/* --- Project Specific Grid Container --- */
.grid-container.project-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gutter); /* Keeps your 20px gutter consistent */
    
    /* 20px padding on all sides as requested */
    padding: 20px; 
    
    /* Resetting the homepage margins/max-width for a cleaner project look */
    margin: 0; 
    max-width: none; 
}


/* Ensure the main canvas doesn't add its own conflicting gaps */
.main-canvas {
    background-color: var(--bg-primary);
}


.nav-group {
    display: flex;
    flex-direction: column;
}

.nav-section-title {
    color: var(--text-secondary);
    padding-bottom: 24px;
    padding-left: 12px; /* Align with pill text */
}

.nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px; /* Tight vertical spacing like Figma */
    padding-bottom: 64px;
}

.nav-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 100px; /* Perfect Pill */
    text-decoration: none;
    color: var(--text-primary);
    font-size: var(--fs-label-m);
    font-weight: var(--fw-medium);
    transition: background-color 0.05s ease;
    width: fit-content;
}

/* Hover State */
.nav-pill:hover {
    background-color: var(--clr-pill-hover);
}

/* Active State - Primary (Lime) */
.active-primary {
    background-color: var(--clr-lime) !important;
    color: #000000; /* Always black on lime */
}

/* Active State - Secondary (Gray/Glass) */
.active-secondary {
    background-color: var(--bg-plus-1) !important;
}


/* --- LOGO COMPONENT --- */

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    width: fit-content;
    margin-bottom:120px; /* Adjust this for your sidebar spacing */
    transition: opacity 0.2s ease;
}

.logo-link:hover {
    opacity: 0.6; /* Subtle feedback */
}

.logo-icon {
    display: inline-block;
    width: 109px;  /* Match your Figma width */
    height: 16px;  /* Match your Figma height */
    background-color: var(--text-primary); /* The color that fills the SVG */
    
    /* The SVG Mask */
    -webkit-mask-image: url('assets/logo.svg');
    mask-image: url('assets/logo.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}




/* --- Project Summary Sidebar --- */
.metadata-group {
    margin-bottom: 48px;
}

.metadata-group h4 {
    margin-bottom: 8px;
    color: var(--text-primary);
    font-weight: var(--fw-medium);
}

.metadata-group li {
    margin-bottom: 6px;
    color: var(--text-secondary);
}


.metadata-group ul {
    list-style: none; /* Replaces the inline style you had */
    padding: 0;
    margin: 0;
}

.project-summary {
  max-width: 560px;
}


.project-summary p {
  color: var(--text-secondary);
}


.project-intro {
    margin-bottom: 48px;
}


.project-intro h1 {
    margin-bottom: 24px;
}

/* --- BACK BUTTON COMPONENT --- */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-secondary);
    width: fit-content;
    
    /* 1. INCREASE HOVER AREA */
    padding: 12px;         /* Creates a 12px invisible "cushion" around the link */
    margin-left: -12px;    /* Pulls it back so the icon still aligns with your logo/text */
    margin-top: -12px;     /* Offsets the top padding */
    margin-bottom: 36px;   /* Adjusted (48px - 12px) to keep original spacing */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

.back-link__icon {
    display: inline-block !important; 
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
    background-color: var(--text-secondary);

    /* The Mask Logic */
    -webkit-mask-image: url('assets/icons/arrow-left.svg');
    mask-image: url('assets/icons/arrow-left.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;

    /* Transition for both movement and color */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

/* Hover States */
.back-link:hover {
    color: var(--text-primary);
    transform: translateX(-4px);
}

.back-link:hover .back-link__icon {
    transform: translateX(-4px);
    background-color: var(--text-primary);
}




@media (max-width: 1600px) {

.side-panel {
    width: 320px;
    padding: 40px 20px 40px 40px; 
    z-index: 100;
}

/* The Scrollable Canvas */
.main-canvas {
    margin-left: 320px;
}


}

@media (max-width: 500px) { 


.grid-container {
        /* 1. Remove display: flex; keep it a grid for better control */
        display: grid;
        grid-template-columns: 1fr; /* Single column stack */
        gap: var(--grid-gutter);
        
        /* 2. ONLY force the left/right padding, allow top/bottom to vary */
        padding-left: var(--grid-margin) !important;
        padding-right: var(--grid-margin) !important;
        padding-top: inherit; 
        padding-bottom: inherit;
    }


    section.experience-section,
    .approach-section,
    .select-clients-section {
        padding-top: 60px !important;    /* Adjust these numbers to your liking */
        padding-bottom: 60px !important;
        display: flex;
        flex-direction: column;
    }

    /* 4. Reset the dividers to fit the new mobile margins */
    section.experience-section::before,
    .approach-section::before,
    .select-clients-section::before {
        left: var(--grid-margin);
        right: var(--grid-margin);
    }


    /* Target the Hero specifically if it feels too tight */
    .hero-section {
        padding-top: 100px; 
        padding-bottom: 60px;
    }

    /* Ensure project cards take full width minus the padding */
    .project-card, .span-4, .span-8 {
        width: 100%;
        margin-bottom: 40px; /* Reduce bottom gap for mobile */
    }
}


/* --- TABLET/MOBILE HEADER --- */
.tablet-nav {
    display: none; /* Hidden on desktop */
    position: absolute; /* Absolute so it scrolls with the page, or 'fixed' to stay at top */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.tablet-nav__inner {
    display: flex;
    justify-content: flex-start; /* Aligns logo to the left */
    padding: 40px var(--grid-margin); /* Matches your desktop sidebar padding */
}

/* --- MOBILE FLOATING DOCK --- */
.mobile-dock {
    display: none; /* Hidden by default */
}

@media (max-width: 1280px) {
    .tablet-nav {
        display: block;
    }

    /* The Floating Container at the bottom */
    .mobile-dock {
        display: flex;
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--bg-primary);
        padding: 8px;
        border-radius: 100px;
        border: 1px solid var(--border-secondary);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); /* Adds the "lift" from the screen */
        z-index: 2000;
        gap: 4px;
    }

    /* Adjusting pills for the smaller dock context */
    .mobile-dock .nav-pill {
        font-size: var(--fs-body-s);
        padding: 10px 20px;
        white-space: nowrap;
    }
}

/* --- FLOATING BACK BUTTON --- */
.back-btn-floating {
    position: fixed; 
    bottom: 20px; 
    left: 20px; 
    width: 56px;
    height: 56px;
    background-color: var(--clr-lime);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999; 
    border-radius: 20px; 

    /* Start completely hidden so there is zero flash */
    opacity: 0; 

    /* --- THE MODERN CSS SECRET --- */
    /* Define base scale here. This keeps it completely separate from 'transform' */
    scale: 1; 

    /* Page load animation */
    animation: floatIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;

    /* Both 'scale' and 'transform' will transition perfectly together now */
    transition: scale 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                background-color 0.2s ease;
}

/* --- INTERACTIONS --- */

.back-btn-floating:hover {
    /* Target the independent scale property. The animation can't lock this! */
    scale: 1.08; 
}

.back-btn-floating:active {
    scale: 0.95;
}

.back-btn-floating:hover .back-link__icon {
    transform: translateX(-2px);
}

/* --- THE ANIMATION TIMELINE --- */
@keyframes floatIn {
    0% {
        opacity: 0;
        /* Animation handles the entry position slider only */
        transform: translateY(20px); 
        transform: scale(0.6);
    }
    100% {
        opacity: 1; 
        transform: translateY(0); 
        transform: scale(1.0);
    }
}


/* Optional: If you ONLY want it to show up on mobile screens */
@media (min-width: 780px) {
    .back-btn-floating {
        display: none; /* Hides it on desktop if you prefer traditional navigation there */
    }
}

.back-link__icon_large {
    display: inline-block !important; 
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
    background-color: #000000;

    /* The Mask Logic */
    -webkit-mask-image: url('assets/icons/arrow-left.svg');
    mask-image: url('assets/icons/arrow-left.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;

    /* Transition for both movement and color */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}



/* --- BREAKPOINT UPDATES --- */
@media (max-width: 1280px) {
    .side-panel {
        display: none;
    }

    /* This hides the sidebar on Home and About */
    body:not(.project-page) .side-panel {
        display: none;
    }

    .main-canvas {
        margin-left: 0;
    }
    /* Hide the original pills in the top nav if they exist there */
    .tablet-pills {
        display: none;
    }
}



/* --- SCOPED PROJECT PAGE LOGIC --- */

@media (max-width: 1280px) {
    
    /* 1. Stack the layout */
    .project-page .layout-wrapper, {
        flex-direction: column;
    }

    /* 2. Turn the sidebar into a scrolling header/summary */
    .project-page .side-panel {
        display: flex !important;   /* Overrides the 'display: none' from line 410 */
        position: static;          /* Content flows with the page */
        width: 100%;
        height: auto;
        padding: 40px var(--grid-margin); /* Uses your existing 40px/20px variables */
        overflow-y: visible;
        border-right: none;
        opacity: 1 !important;     /* Ensures visibility if JS transition hasn't fired */
        transform: none !important;
    }

    /* 3. Remove the sidebar offset from the content */
    .project-page .main-canvas {
        margin-left: 0;
    }

    /* 4. Tweak spacing for the back button and intro */
    .project-page .back-link {
        margin-top: 0;
        margin-bottom: 32px;
    }

    .project-page .project-intro {
        margin-bottom: 32px;
    }

    .project-page .project-intro h1 {
        font-size: 28px;
        margin-bottom: 16px;
    }

    /* 5. Metadata columns on mobile */
    .project-page .metadata-group {
        margin-bottom: 24px;
    }

    /* 6. Hide the floating dock on project pages to focus on the case study */
    .project-page .mobile-dock {
        display: none;
    }
}



/* --- SPLIT LAYOUT FOR TABLET/SMALL DESKTOP --- */
@media (min-width: 601px) and (max-width: 1280px) {
    .project-summary {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        gap: 80px; /* Adjust based on your Figma spacing */
        max-width: 100%;
        /* This is the fix: 
           It stops the items from stretching to match heights 
        */
        align-items: start; 
    }

    .project-intro {
        margin-bottom: 0;
    }

    /* Target the new wrapper */
    .project-metadata {
        display: flex;
        flex-direction: column;
        gap: 48px; /* Vertical spacing between groups */
    }

    .metadata-group {
        margin-bottom: 0; /* Let the parent gap handle this */
    }
}

/* Ensure stacking remains clean on mobile */
@media (max-width: 600px) {
    .project-summary {
        display: flex;
        flex-direction: column;
        gap: 48px;
    }



}



/* ==============================================================================================*/

.hero-section {
    grid-column: 1 / span 12; /* Keeps the line length readable */
    display: flex;
    flex-direction: column;
    gap: 44px; /* Space between lottie, text, and status */
    padding-top: 170px; /* Big top padding for that 'Hero' feel */
    padding-bottom: 140px;
}


.hero-content h1 {
    max-width: 620px; /* Adjust based on your Figma line breaks */
    line-height: 1.2;
}

/* This ensures the span inherits the heading's size but takes the muted color */
.hero-content h1 .text-muted {
    color: var(--text-secondary);
    display: inline; /* Keeps it on the same line */
}

/* Status text alignment */

.availability-status {
    display: flex;
    align-items: center; /* Vertically centers dot with text */
    gap: 12px;           /* Space between dot and text */
}

.availability-status p {
    color: var(--text-primary); /* Or var(--text-secondary) depending on Figma */
}


.status-dot {
    width: 10px;
    height: 10px;
    background-color: var(--clr-orange) !important;
    border-radius: 50%;
    display: inline-block;
}

/* If you want the dot to pulse for a little extra 'life' */
.status-dot {
    box-shadow: 0 0 0 rgba(255, 92, 0, 0.4);
    animation: pulse 2s infinite;
}


.hero-graphic {
    width: 100%;
    max-width: 320px; /* Matching your original SVG design width */
    height: auto;
    aspect-ratio: 258 / 148; /* Matches your design's aspect ratio to prevent layout shifts */
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-graphic lottie-player {
    width: 100%;
    height: 100%;
}


@media (max-width: 1600px) {


.hero-section {
    padding-bottom: 80px;
    padding-top: 160px;
}

.grid-container {    
    padding: 40px
}

}


@media (max-width: 780px) {

.hero-graphic {

    max-width: 240px; /* Matching your original SVG design width */
}

}


/* ==========================================================================
   PROJECT GRID
   ========================================================================== */


.project-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-decoration: none;
    cursor: pointer;
}

.span-4 {
    grid-column: span 4;
}

.span-8 {
    grid-column: span 8;
}

@media (max-width: 1200px) {
    .project-card {
        grid-column: span 12;
    }

    /* If you used the utility class 'span-4' in your HTML, override it here too */
    .span-4 {
        grid-column: span 12;
    }
}



/* ==========================================================================
   PROJECT CARD COMPONENTS
   ========================================================================== */

.project-card {
    display: flex;
    flex-direction: column;
    gap: 32px; 
    text-decoration: none;
    margin-bottom: 64px;
}

/* Ensure the wrapper is the container for the overlay */
.project-card__image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background-color: var(--bg-plus-1);
    overflow: hidden;
    border-radius: 8px;
}

/* Ensure media stays behind the overlay */
.project-card__img, 
.project-card__image-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none; /* Prevents video controls/clicks from blocking the overlay */
}

/* The Darkening Overlay + Custom Cursor */
.project-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Subtle darkening */
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
    
    /* Custom Cursor: Points to your arrow asset */
    /* 16 16 centers the SVG hotspot */
    cursor: url('assets/icons/arrow-right.svg') 16 16, pointer;
}

.project-card__overlay__nda {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 114, 32, 0.30);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
    
    /* Custom Cursor: Points to your arrow asset */
    /* 16 16 centers the SVG hotspot */
    cursor: url('assets/icons/nda.svg') 16 16, pointer;
}

/* Hover States */
.project-card:hover .project-card__overlay {
    opacity: 1;
}

/* Trigger the orange overlay ONLY when the parent has the .is-nda class */
.project-card.is-nda:hover .project-card__overlay__nda {
    opacity: 1;
}

.project-card:hover .project-card__img,
.project-card:hover video {
    transform: scale(1.04) !important;
}

/* --- Metadata Layout --- */
.project-card__metadata {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Tight gap between Title and Description */
}

/* Title Styling */
.project-card__metadata .h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
}

/* Description Styling (The "The" block) */
.project-card__metadata .body-m {
    font-size: var(--fs-body-m);
    line-height: 1.5;
    color: var(--text-primary); /* Keep description readable */
    max-width: 90%; /* Prevents text from stretching too far */
}

/* Tag Styling (In House / Brand Identity) */
.project-card__metadata .body-s {
    font-size: var(--fs-body-s);
    color: var(--text-secondary); /* This creates the hierarchy */
    font-weight: var(--fw-medium);
}

/* Hover Effect */
.project-card:hover .project-card__img {
    transform: scale(1.04);
}



/* ==========================================================================
   PROJECT PAGE CONTENT (Case Study Styles)
   ========================================================================== */


/* --- PROJECT SECTION INTRO --- */
.project-section-intro {
    padding-top: 44px;    /* Space from the images above */
    display: flex;
    flex-direction: column;
    gap: 8px;            /* Space between heading and description */
}

.project-section-intro h2 {
    color: var(--text-primary);
}

.project-section-intro p {
    max-width: 600px;     /* Keeps the line length readable */
    line-height: 1.6;
    color: var(--text-secondary);
}

.project-media {
    display: flex;
    flex-direction: column;
}

.project-media__container {
    width: 100%;
    overflow: hidden;
    
    /* Premium Corner Smoothing Look */
    border-radius: 12px; 
    line-height: 0; /* Prevents tiny ghost margins at bottom of images */

    isolation: isolate;       /* Creates a new stacking context to prevent bleed */
    transform: translateZ(0); /* Forces GPU rendering for smoother anti-aliasing */
    backface-visibility: hidden;

}


.project-media__container img {
    width: 100%;
    height: auto;
    display: block;

    object-fit: cover;
}

/* --- PROJECT CAPTIONS --- */
.project-media__caption {
    margin-top: 20px; /* Space between image and caption */
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px; /* Space between the Title and the Paragraph */
    max-width: 560px; /* Keeps line lengths readable */
}

/* The Bold Subheading */
.caption-title {
    font-size: var(--fs-body-m);
    font-weight: var(--fw-semibold);
    color: var(--text-primary); /* Bold white/black title */
    display: block;
}

/* The Muted Body */
.project-media__caption p {
    color: var(--text-secondary); /* Muted gray description */
    line-height: 1.4;
    margin: 0; /* Reset any default p margins */
    font-size: var(--fs-body-m);
}


@media (max-width: 500px) {
    /* Force all grid-spanned media items to 100% width */
    .project-media,
    .span-12, 
    .span-8, 
    .span-6, 
    .span-4 {
        grid-column: span 12 !important;
    }

    /* Reset recap content to stack title and description */
    .recap-content h2, 
    .recap-content p {
        grid-column: span 12;
    }

    /* Adjust spacing between stacked media items */
    .project-media {
        margin-bottom: 0px; /* Space between different media blocks */
    }

    .project-media__caption {
        max-width: 100%; /* Allow caption to use full width on small screens */
        margin-top: 12px;
    }
}


/* --- PROJECT RECAP SECTION --- */
.project-recap {
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.recap-content {
    display: grid;
    /* Title takes 4 columns, Description takes 8 columns */
    grid-template-columns: repeat(12, 1fr); 
    gap: var(--grid-gutter);
    align-items: start;
}

.recap-content h2 {
    grid-column: span 6;
    color: var(--text-primary);
}

.recap-content p {
    grid-column: span 6;
    line-height: 1.4;
    /* Slightly smaller font as seen in your reference */
    font-size: var(--fs-body-m);
    color: var(--text-secondary); 
    max-width: 720px;
}

/* The Horizontal Line at the bottom */
.recap-divider {
    width: 100%;
    height: 1px;
    background-color: var(--border-secondary);;
}

@media (max-width: 1000px) {
    /* Targets the specific recap content grid */
    .recap-content h2, 
    .recap-content p {
        grid-column: span 12;
    }

    /* Optional: Adjust the gap for mobile so the heading and body feel connected */
    .recap-content {
        gap: 16px; 
    }

    .project-recap {
    padding: 32px 0px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
}

/* Layout Variations for the Grid */
.span-12 { grid-column: span 12; }
.span-8  { grid-column: span 8; }
.span-6  { grid-column: span 6; }
.span-4  { grid-column: span 4; }

/* Aspect Ratio Modifiers 
   (Optional: Use these if you want images to crop to specific shapes) */
.aspect-landscape .project-media__container { aspect-ratio: 16 / 9; }
.aspect-square .project-media__container { aspect-ratio: 1 / 1; }
}



/* --- ALL PROJECTS SECTION --- */

.all-projects-section {
    /* If --grid-margin isn't defined, it defaults to 40px */
    padding: 120px var(--grid-margin, 40px);
    border-top: 1px solid var(--border-secondary, #eee);
    margin-top: 80px;
    width: 100%;
    box-sizing: border-box;
}

/* IMPORTANT: This must match the class in your HTML */
.all-projects-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); 
    gap: var(--grid-gutter, 24px);
    align-items: start;
    padding: 120px 64px;
}

.projects-list-header {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.projects-list {
    grid-column: span 8;
    display: flex;
    flex-direction: column;
}

.project-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-secondary, #eee);
    text-decoration: none;
    color: inherit;
    transition: padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Re-adding the left container to hold the dot and name */
.project-row__left {
    display: flex;
    align-items: center;
    gap: 0px; /* Start with no gap */
    transition: gap 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.row-status-dot {
    /* Set a fixed size from the start */
    width: 8px; 
    height: 8px;
    background-color: var(--clr-green);
    border-radius: 50%;
    
    /* Start hidden */
    opacity: 0;
    
    /* Prevents any flexbox squeezing */
    flex-shrink: 0;
    aspect-ratio: 1 / 1;

    /* Only transition opacity for a clean 'appear' effect */
    transition: opacity 0.3s ease;
}

.project-row:hover .row-status-dot {
    /* Just fade it in */
    opacity: 1;
}

/* Ensure the text still moves over to make room for the dot */
.project-row__left {
    display: flex;
    align-items: center;
    gap: 0px; 
    transition: gap 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-row:hover .project-row__left {
    /* This creates the space for the dot to 'appear' into */
    gap: 12px; 
}


/* Project Type/Category styling (right side) */
.project-row__type {
    font-size: var(--fs-body-m);
    color: var(--text-secondary);
}

.project-row__name {
    font-size: var(--fs-body-m);
    font-weight: var(--fw-medium);

}

/* Floating Follower Image */
.cursor-follow-image {
    --x: 0px;
    --y: 0px;
    position: fixed;
    top: 0;
    left: 0;
    width: 210px; 
    height: 280px;
    pointer-events: none;
    z-index: 9999;
    border-radius: 12px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    
    /* Use -110% in BOTH places so it doesn't "snap" position on hover */
    transform: translate3d(var(--x), var(--y), 0) translate(-50%, -90%) scale(0.8) rotate(-5deg);
    transition: 
        opacity 0.15s ease, 
        visibility 0.3s, 
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cursor-follow-image.is-active {
    opacity: 1;
    visibility: visible;
    transform: translate3d(var(--x), var(--y), 0) translate(-50%, -90%) scale(1) rotate(0deg);
}

.cursor-follow-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* --- ALL PROJECTS MOBILE RESPONSIVENESS --- */
@media (max-width: 800px) {
    .all-projects-section {
        /* Keep your side margins consistent with the rest of your app */
        padding: 60px var(--grid-margin, 20px); 
        margin-top: 40px;
        width: 100%;
        box-sizing: border-box;
    }

    .all-projects-grid {
        /* FIX 1: Set horizontal padding to 0 so it uses the section's edge-to-edge width */
        padding: 40px 0px; 
        display: flex;
        flex-direction: column;
        gap: 40px; 
        width: 100%;
        box-sizing: border-box;
    }

    .projects-list-header {
        grid-column: span 12; 
        width: 100%;
    }

    .projects-list {
        grid-column: span 12; 
        /* FIX 2: Force the list wrapper to span across the entire available container width */
        width: 100%; 
        display: flex;
        flex-direction: column;
    }
    
    .project-row {
        padding: 20px 0; 
        /* FIX 3: Ensure individual rows use flex space to push the text and tags apart */
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
    }
}




/* --- ABOUT PAGE SPECIFIC --- */

.about-hero {
    align-items: start;
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: 48px; 
    padding-top: 180px;
    padding-bottom: 80px;
    max-width: 560px;
}

.about-bio {
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: var(--text-secondary);
    font-weight: var(--fw-medium);
    padding-right: 32px;
}

/* --- Contact & Copy Email Section --- */
.about-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.copy-container {
    display: flex;
    align-items: center;
    gap: 4px;
    /* This is the anchor. It tells the tooltip to stay inside this area */
    position: relative; 
    width: fit-content;
}

.copy-email {
    color: var(--text-secondary);
    user-select: all; /* One click selects the whole email */
    cursor: text;
    font-weight: var(--fw-medium);
}

.copy-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 12px;
}

.copy-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-plus-1);
}

.copy-btn:active {
    transform: scale(0.8);
}

.copy-tooltip {
    position: absolute;
    /* This keeps it 12px to the right of the button's edge */
    left: calc(100% + 4px); 
    top: 50%;
    transform: translateY(-50%) translateX(10px); /* Start slightly offset for the animation */
    
    background: var(--text-primary);
    color: var(--bg-primary);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: var(--fs-body-m);
    font-weight: var(--fw-semibold);
    
    opacity: 0;
    pointer-events: none;
    /* Added a slight transform to the transition for a "fade-in-slide" effect */
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    z-index: 10;
}

.copy-btn.success .copy-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0); /* Slides into place */
}

/* --- Skills Section --- */
.about-skills {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skills-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    font-weight: var(--fw-medium);
    gap: 4px;
}

.skills-list li {
    color: var(--text-secondary);
}

/* --- Right Side Image Styling --- */
.about-image-container {
    width: 100%;
    border-radius: 12px; 
    overflow: hidden;
    margin-top: 180px;
    margin-bottom: 80px;
}

.about-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Mobile Adjustments --- */


@media (max-width: 1024px) {
    /* Stack Bio and Image */
    .about-content, 
    .about-image-wrapper {
        grid-column: span 12 !important;
    }

    .about-content {
        padding-top: 120px; /* Reduced from 180px for mobile */
        padding-bottom: 40px;
        gap: 32px;
    }

    .about-image-container {
        margin-top: 0; /* Remove the desktop offset */
        margin-bottom: 60px;
    }
    
    .about-bio {
        max-width: 100%;
    }
}


@media (max-width: 500px) {
    /* Force the About layout to stack and stay in bounds */
    .about-content, 
    .about-image-container,
    .about-image-wrapper {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Prevent the image container from pushing the page width */
    .about-image-container {
        margin-top: 20px;
        margin-bottom: 40px;
        max-width: 100%;
    }

    .about-img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Ensure the Bio text doesn't overflow */
    .about-bio {
        max-width: 100%;
        padding-right: 0;
    }
}

  /* --- EXPERIENCE SECTION --- */

section.experience-section {
    position: relative; /* Required to position the divider */
    padding-top: 80px;
    padding-bottom: 80px;
    align-items: start;
}

/* THE 80PX MARGIN DIVIDER */
section.experience-section::before {
    content: "";
    position: absolute;
    top: 0;
    /* This forces the line to respect the 80px margins defined in :root */
    left: var(--grid-margin); 
    right: var(--grid-margin);
    height: 1px;
    background-color: var(--border-secondary);
}

/* Positions the list in the right 8 columns */
section.experience-section .experience-list {
    grid-column: 5 / span 8;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* The Row Style */
section.experience-section .experience-row {
    display: grid;
    grid-template-columns: 160px 1fr 1fr; 
    gap: var(--grid-gutter);
    padding: 32px 0;
    border-bottom: 1px solid var(--border-secondary);
    align-items: start;
}

/* Adds a bottom border only to the last item to close the list */
section.experience-section .experience-row:last-child {
    border-bottom: 1px solid var(--border-secondary);
}

/* Text Styles */
section.experience-section .exp-date,
section.experience-section .exp-clients {
    color: var(--text-secondary);
    font-size: var(--fs-body-m);
}

section.experience-section .exp-role {
    color: var(--text-primary);
    font-size: var(--fs-body-m);
    font-weight: var(--fw-medium);
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 1100px) {
    section.experience-section::before {
        /* Adjust divider margins for mobile if your grid-margin changes */
        left: 40px; 
        right: 40px;
    }
}

@media (max-width: 800px) {
    section.experience-section .experience-list {
        grid-column: span 12;
    }

    section.experience-section .experience-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 24px 0;
    }

    section.experience-section .exp-date {
        font-size: var(--fs-body-s);
        margin-bottom: 4px;
    }

    section.experience-section .exp-role {
        font-size: 18px; /* Make the role pop more when stacked */
    }
    
    /* Ensure the "Experience" heading also takes full width */
    section.experience-section .span-4 {
        grid-column: span 12;
        margin-bottom: 24px;
    }
}

@media (max-width: 500px) {
    /* 1. Existing container reset */
    section.experience-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 2. Existing Divider logic (stays the same) */
    section.experience-section::before {
        left: var(--grid-margin) !important;
        right: var(--grid-margin) !important;
        width: calc(100% - (var(--grid-margin) * 2));
    }

    /* 3. FIX: Force the "Experience" Heading to align */
    section.experience-section .span-4 {
        grid-column: 1 / -1 !important;
        margin-left: var(--grid-margin) !important;
        margin-right: var(--grid-margin) !important;
        width: calc(100% - (var(--grid-margin) * 2));
        margin-bottom: 32px; /* Add some space below heading */
    }

    /* 4. Existing Content Rows logic (stays the same) */
    section.experience-section .experience-row {
        margin-left: var(--grid-margin) !important;
        margin-right: var(--grid-margin) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: calc(100% - (var(--grid-margin) * 2));
        display: flex !important;
        flex-direction: column !important;
        gap: 8px;
    }

    /* 5. Existing List logic (stays the same) */
    section.experience-section .experience-list {
        grid-column: 1 / -1 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}





/* --- CLIENTS SECTION --- */

.select-clients-section {
    position: relative; /* Required for the absolute divider */
    padding-top: 100px;
    padding-bottom: 100px;
    overflow: hidden;
    margin-top: 40px;
}

/* THE 80PX MARGIN DIVIDER */
.select-clients-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--grid-margin); 
    right: var(--grid-margin);
    height: 1px;
    background-color: var(--border-secondary);
}

.select-clients-section h2 {
  padding-bottom: 8px;

}

.ticker-wrapper {
    margin-top: 64px;
    width: 100%;
    position: relative;
    /* Optional: Add a fade effect on the edges */
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.ticker-track {
    display: flex;
    width: max-content; /* Critical: Allows the track to be as wide as all logos combined */
    gap:20px;
    animation: scroll 50s linear infinite; /* Adjust time for speed */
}

/* Creating the Loop */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 20px)); } /* Moves exactly half the track width */
}

/* The "Visual Weight" Container */
.logo-container {
    width: 200px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 24px; /* Internal cushion ensures logos don't feel too big */
    flex-shrink: 0;
}

.logo-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Keeps logo proportions perfect */
    filter: grayscale(100%); /* Optional: Makes all logos consistent */
}


@media (max-width: 1000px) {
    .select-clients-section .span-4 {
        grid-column: span 12;
        margin-bottom: 0px;
        padding-top: 40px;
      padding-bottom: 40px;
    }

    .ticker-wrapper {
        margin-top: 20px; /* Bring ticker closer to text on mobile */
    }
    
    .logo-container {
        width: 180px; /* Slightly smaller logos for mobile screens */
        height: 120px;
    }
}


/* --- APPROACH SECTION --- */

.approach-section {
    position: relative;
    padding-top: 100px;
    padding-bottom: 140px;
    margin-top: 40px;
    /* Ensure the grid is active */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gutter);
}

/* THE 80PX MARGIN DIVIDER */
.approach-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--grid-margin);
    right: var(--grid-margin);
    height: 1px;
    background-color: var(--border-secondary);
}

.approach-section .span-12 {
    grid-column: span 12;
    margin-bottom: 12px;
}

.approach-card {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.approach-media {
    width: 100%;
    aspect-ratio: 1 / 1; /* Changed to 1:1 to prevent sub-pixel masking issues */
    background-color: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    /* This centers the Lottie if it's smaller than the box */
    display: flex;
    align-items: center;
    justify-content: center;
}

.approach-media dotlottie-player {
    width: 100%;
    height: 100%;
    /* Prevents the 'jumping' or misalignment of masks */
    transform: translate3d(0,0,0);
}

.approach-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Or 'contain' if you want to ensure the whole ring is visible */
    display: block;
    border-radius: 12px; /* Matches your .approach-media rounding */
}

.approach-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- MOBILE --- */



/* 1. Tablet Viewport (1100px and under) */
@media (max-width: 1100px) {
    .approach-card {
        grid-column: span 6; /* 2x2 grid setup */
    }
} /* Cleanly closed block */


/* 2. Phone Viewport (600px and under) */
@media (max-width: 600px) {
    .approach-card {
        grid-column: span 12; /* 1x1 fully stacked layout */
    }

    .approach-section {
        /* This rule will now execute perfectly! */
        padding-bottom: 120px !important; 
    }
}


/* --- LOTTIE INJECTED SVG UTILITIES --- */
#lottie-approach-1 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#lottie-approach-1 svg {
    width: 100% !important;
    height: 100% !important;
    transform: translate3d(0, 0, 0);
}