/* RESET & BASE */
:root {
    /* Brand Colors */
    --color-blue: rgb(57, 129, 188);
    --color-green: rgb(84, 158, 53);
    --color-red: rgb(211, 195, 79);
    --color-yellow: rgb(181, 57, 24);

    /* Theme */
    --bg-color: #000000;
    /* Deep black as requested */
    --text-color: #FFFFFF;
    --text-muted: #999999;
    --border-color: #333333;

    /* Spacing */
    --padding-sides: 120px;
    /* Increased breathing room */
    --section-padding: 12vh;
    --grid-gap: 2rem;

    /* Typography */
    --font-main: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-size-base: 18px;
    --font-size-hero: clamp(3rem, 12vw, 10rem);
    --font-size-h1: 4rem;
    --font-size-h2: 3rem;

    /* Animation */
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --transition-slow: 0.8s var(--ease-out);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Language Toggle Utilities */
.lang-en [data-lang="es"] {
    display: none !important;
}

.lang-es [data-lang="en"] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
    font-size: var(--font-size-base);
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    line-height: 1.5;
    overflow-x: hidden;
}

/* GLOBAL RESPONSIVE SAFEGUARDS */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
a {
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

p {
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--text-muted);
    max-width: 60ch;
}

/* UTILITIES */
.container {
    padding: 0 var(--padding-sides);
    max-width: 1200px;
    /* Constrained width for readability */
    margin: 0 auto;
}

/* HEADER */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem var(--padding-sides);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    background-color: var(--bg-color);
    /* Solid black */
    transition: background-color 0.3s ease;
}

.logo {
    display: flex;
    align-items: center;
    /* Removed text styles */
}

.logo-img {
    height: 44px;
    /* Target 40-48px */
    width: auto;
    object-fit: contain;
    display: block;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 3rem;
    /* Space between Links and Lang Toggle */
}

.lang-btn {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    color: var(--text-color);
    /* Explicit color */
    padding: 0.5rem;
    position: relative;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
}

.lang-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s var(--ease-out);
}

.lang-btn:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* HERO */
.hero-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Bottom alignment */
    padding: var(--section-padding) var(--padding-sides) 4rem;
    position: relative;
    overflow: hidden;
    z-index: 0;
    /* Create stacking context */
}

/* Subtle Noise Texture - On top of video */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
    /* Above background, below content */
    opacity: 0.4;
    /* Slightly more visible over dark video */
}

#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #000000;
}

.hero-visual {
    /* Hidden to prioritize video background */
    display: none;
}


.hero-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    z-index: 2;
    /* Ensure above video and noise */
    position: relative;
}

.hero-title {
    font-size: var(--font-size-hero);
    line-height: 0.85;
    white-space: nowrap;
    margin-left: -0.05em;
    /* Optical alignment */
    margin-bottom: 2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text-color);
}

.hero-subline {
    font-size: 1.1rem;
    max-width: 400px;
    align-self: flex-start;
    /* Left align */
    text-align: left;
    margin-top: 2rem;
    margin-bottom: 4rem;
    color: var(--text-muted);
}

/* HERO ACTIONS REMOVED */
/* Reverting to .scroll-downcta use */

.scroll-down {
    display: flex;
    /* Changed from inline-block */
    /* Position absolutely or flow naturally? Let's flow naturally but maybe separated. */
    align-self: flex-start;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.scroll-down:hover {
    border-bottom-color: var(--text-color);
}

/* ABOUT */
.about-section {
    padding: var(--section-padding) 0;
    /* border-top removed to rely on accent lines if they are visible, or keep it if needed. 
       The prompt says "Keep the Patchwork color bar on top", usually meaning the accent lines.
       The accents are in hero-accents which is absolute at bottom of hero. 
       So about-section follows. Let's remove border to be cleaner. */
    /* border-top: 1px solid var(--border-color); */
}

/* Text Highlights for About Section */
.text-highlight-green {
    color: #549E35;
}

.text-highlight-blue {
    color: #397FBC;
}

.text-highlight-red {
    color: #C34224;
}

.text-highlight-yellow {
    color: #C8B33C;
}

.about-text {
    font-size: clamp(1.5rem, 3vw, 48px);
    line-height: 1.6;
    font-weight: 300;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    letter-spacing: 0.02em;
    color: var(--text-color);
}

/* Character Highlights */
.char-yellow {
    color: #FBBC05;
}

.char-red {
    color: #EA4335;
}

.char-blue {
    color: #4285F4;
}

/* SERVICES */
.services-section {
    padding: var(--section-padding) 0;
    border-top: 1px solid var(--border-color);
}

.section-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4rem;
    display: block;
    letter-spacing: 0.05em;
    position: sticky;
    top: 6rem;
    /* Sticky sticky */
}

/* CAPABILITIES HEADER */
.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Separate Title and Button */
    margin-bottom: 2rem;
    width: 100%;
    /* Ensure full width */
}

.capabilities-work-btn {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    /* Subtle/Secondary */
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    /* Subtle hover effect */
    transition: color 0.3s ease, border-color 0.3s ease;
}

.capabilities-work-btn:hover {
    color: var(--text-color);
    border-bottom-color: var(--text-color);
}


.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 Columns for solid feel */
    gap: var(--grid-gap);
}

.service-item {
    padding: 2rem 0 2rem 40px;
    /* Internal breathing room */
    border-top: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    /* transition: all 0.3s ease; Removed border color transition on hover to keep it minimal, or re-add if needed */
}

/* Service Header (Title) */
.service-header {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: color 0.3s ease;
    position: relative;
    z-index: 2;
}

.service-item:hover .service-header,
.service-item.open .service-header {
    color: var(--text-color);
}

.service-item:hover {
    /* padding-left: 1rem; Disable movement for accordion stability or keep? 
      User requested minimal/elegant. Movement might feel jerky with accordion. 
      Let's disable horizontal shift on hover for stable accordion. */
    border-color: var(--text-color);
}

/* Service Description (Accordion Content) */
.service-desc {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease-out), opacity 0.4s var(--ease-out), margin-top 0.4s var(--ease-out);
    opacity: 0;
    margin-top: 0;
    position: relative;
    z-index: 2;
}

.service-desc p {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 400;
    max-width: 90%;
    margin: 0;
    /* Let wrapper handle spacing */
    padding-top: 0.5rem;
    /* Optical spacing */
}

.service-item.open .service-desc {
    /* max-height handled by JS for precise transition, or sufficiently large here as fallback */
    opacity: 1;
    margin-top: 0.5rem;
}

.service-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.6s ease;
    transform: scale(1.05);
}

.service-item:hover .service-bg,
.service-item.open .service-bg {
    opacity: 1;
    transform: scale(1);
}

.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.service-item:hover .service-overlay,
.service-item.open .service-overlay {
    opacity: 1;
}

/* PORTFOLIO */
.portfolio-section {
    padding: var(--section-padding) 0;
    border-top: 1px solid var(--border-color);
}

.portfolio-list {
    list-style: none;
}

.portfolio-item {
    display: block;
    padding: 4rem 0;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.3s ease;
    cursor: pointer;
}

.portfolio-item:first-child {
    border-top: 1px solid var(--border-color);
}

.work-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: baseline;
}

.work-info h3 {
    font-size: 5vw;
    font-weight: 400;
    /* Lighter weight for elegance */
    margin: 0;
    line-height: 1;
    transition: transform 0.4s var(--ease-out);
}

.portfolio-item:hover .work-info h3 {
    transform: translateX(1rem);
    font-style: italic;
    /* Editorial touch */
}

.work-info p {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 400px;
}

/* PROCESS */
.process-section {
    padding: var(--section-padding) 0;
    background: #080808;
    /* Slightly lighter black for contrast */
    color: var(--text-color);
    border-top: 1px solid var(--border-color);
}

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

.process-step {
    /* border-left removed for full cards */
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background 0.3s ease 0s, opacity 0.8s var(--ease-out) var(--delay, 0s), transform 0.8s var(--ease-out) var(--delay, 0s);
}

.process-step:hover {
    background: rgba(255, 255, 255, 0.02);
}

.step-number {
    font-size: 0.9rem;
    font-family: monospace;
    /* Tech feel */
    color: var(--text-muted);
    margin-bottom: 2rem;
    display: block;
    transition: color 0.3s ease;
}

.process-step:hover .step-number {
    color: var(--text-color);
}

/* Process Icons */
.process-icon {
    display: block;
    color: var(--text-color);
    opacity: 0.7;
    margin-bottom: auto;
    /* Occupy middle space */
    padding-top: 1rem;
    transform-origin: left center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.process-icon svg {
    width: 32px;
    height: 32px;
    display: block;
}

.process-step:hover .process-icon {
    opacity: 1;
    transform: scale(1.1);
}

.process-step h4 {
    font-size: 1.5rem;
    font-weight: 500;
    position: relative;
    align-self: flex-start;
    padding-bottom: 8px;
}

.process-step h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background: var(--text-color);
    transition: width 0.4s var(--ease-out);
}

.process-step:hover h4::after {
    width: 100%;
}

/* Subtitle Styling - Flow Layout Refactor */
.process-step {
    cursor: pointer;
    /* Interaction affordance */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    /* CARD BORDERS */
    border: 2px solid transparent;
    /* Base border */
    border-radius: 4px;
    /* Optional slight rounding for polish, or 0 if strictly sharp */
    padding: 1.5rem;
    /* Reverted to consistent padding */
    /* Reverted to consistent padding */
    box-sizing: border-box;
    transition:
        border-color 0.3s ease,
        /* Smooth 300ms hover transition */
        background 0.3s ease 0s,
        opacity 0.8s var(--ease-out) var(--delay, 0s),
        transform 0.8s var(--ease-out) var(--delay, 0s);
}

.process-step:nth-child(1):hover {
    border-color: #4285F4;
}

.process-step:nth-child(2):hover {
    border-color: #34A853;
}

.process-step:nth-child(3):hover {
    border-color: #FBBC05;
}

.process-step:nth-child(4):hover {
    border-color: #4285F4;
}

/* Repeated Blue */
.process-step:nth-child(5):hover {
    border-color: #EA4335;
}

.process-step:hover {
    background: rgba(255, 255, 255, 0.02);
    filter: brightness(1.1);
    /* Subtly brighten border and content */
}

/* Ensure intermediate spacing */
.process-icon {
    margin-bottom: 8px !important;
    /* Force explicit gap below icon */
    padding-top: 1rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.step-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    /* Transition max-height/opacity for flow accordion */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-bottom: 0;
    transition: max-height 0.4s var(--ease-out), opacity 0.3s ease, margin-bottom 0.4s ease;

    /* Alignment */
    align-self: flex-start;
    padding-left: 2px;
    /* Optical alignment with icon stroke */
}

/* Active State */
.process-step.active .step-subtitle {
    opacity: 1;
    max-height: 50px;
    /* Sufficient space for one line */
    margin-bottom: 8px;
    /* Gap above title */
}

.process-step.active .process-icon {
    opacity: 1;
    transform: scale(1.1);
}

.process-step h4 {
    transition: none;
    margin-top: 0;
}

.process-step.active h4 {
    transform: none;
}

.process-step.active h4::after {
    width: 100%;
    /* Keep underline active */
}

.process-step.active .step-number {
    color: var(--text-color);
}

/* Sequential Entrance Delays */
.process-step:nth-child(1) {
    --delay: 0.1s;
}

.process-step:nth-child(2) {
    --delay: 0.2s;
}

.process-step:nth-child(3) {
    --delay: 0.3s;
}

.process-step:nth-child(4) {
    --delay: 0.4s;
}

.process-step:nth-child(5) {
    --delay: 0.5s;
}

/* CONTACT */
.contact-section {
    padding: var(--section-padding) 0 3rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Reverted to Center */
    text-align: center;
    /* Reverted to Center */
}

.contact-heading {
    color: #FFFFFF;
    /* Strictly white */
    font-size: 6vw;
    margin-bottom: 2rem;
    line-height: 0.9;
    padding-left: 0;
    /* Reverted */
}

.section-divider-gradient {
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #4285F4, #34A853, #FBBC05, #EA4335);
    margin: 0;
    border: none;
}

.email-link {
    font-size: 1.7rem;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.email-link:hover {
    color: var(--text-muted);
    border-bottom-color: transparent;
}

.contact-icons {
    display: flex;
    gap: 3rem;
    justify-content: center;
    /* Reverted to Center */
    align-items: center;
    margin-top: 3rem;
    padding-left: 0;
    /* Reverted */
}

.contact-icon-link {
    color: var(--text-muted);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-icon-link svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

.contact-icon-link:hover {
    color: var(--text-color);
    transform: scale(1.1);
}

.contact-icon-static {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    opacity: 0.5;
    /* Visual cue that it's inactive */
}

.contact-icon-static svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

.site-footer {
    padding: 2rem var(--padding-sides);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .site-footer {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        text-align: center;
        padding-bottom: 3rem;
    }
}

.legal-name {
    margin-right: 0;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    :root {
        --padding-sides: 20px;
        /* Mobile Request: 20px */
        --section-padding: 10vh;
        --font-size-hero: 13vw;
        /* Increased to 13vw per user request, wrapping enabled */
        /* Adjusted for "Real world" scaling */
    }

    .hero-content {
        margin-bottom: 2rem;
    }

    .hero-title {
        white-space: normal;
        /* Allow wrapping if needed */
    }

    .hero-subline {
        max-width: 100%;
        text-align: left;
        align-self: flex-start;
        margin-top: 2rem;
        margin-bottom: 4rem;
    }

    .services-grid,
    .process-grid,
    .work-info {
        grid-template-columns: 1fr;
    }

    .about-text {
        font-size: 1.35rem;
    }

    .work-info h3 {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .process-step {
        border-left: none;
        border-top: 1px solid var(--border-color);
        padding: 1.5rem;
        /* Restore consistent padding */
        min-height: auto;
    }
}

/* NEW NAVIGATION */
.nav-links {
    display: flex;
    list-style: none;
    gap: 3rem;
}

.nav-links a {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    transition: color 0.3s ease;
    color: var(--text-muted);
}

.nav-links a:hover {
    color: var(--text-color);
}

/* Logo symbol style removed */

/* HERO ACCENTS */
.hero-accents {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    display: flex;
}

.accent-line {
    flex: 1;
    height: 100%;
}

.accent-line.blue {
    background-color: var(--color-blue);
}

.accent-line.green {
    background-color: var(--color-green);
}

.accent-line.red {
    background-color: var(--color-red);
}

.accent-line.yellow {
    background-color: var(--color-yellow);
}

.scroll-downcta {
    display: inline-block;
    border: 1px solid var(--text-color);
    padding: 1rem 2rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.scroll-downcta:hover {
    background: var(--text-color);
    color: var(--bg-color);
}

.logo-img {
    height: 44px;
    /* Target 40-48px */
    width: auto;
    object-fit: contain;
    display: block;
}

/* RESPONSIVE NAV */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        /* Mobile menu to be implemented if requested, or simplified */
    }

    .logo-img {
        height: 32px;
        /* Smaller for mobile */
    }
}

/* ADJUST PROCESS GRID FOR 5 STEPS */
.process-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    /* Force 5 columns */
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .process-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        /* Tablet: 3 Columns */
    }

    .process-step:nth-child(2n+1) {
        border-left: none;
        /* Reset borders for smaller grid */
    }
}

@media (max-width: 768px) {
    .process-grid {
        grid-template-columns: 1fr !important;
    }
}

/* VISUAL PORTFOLIO GRID */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 2rem;
}

.project-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    cursor: pointer;
}

.project-visual {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #111;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--ease-out);
}

.project-card:hover .project-visual {
    transform: scale(0.98);
}

/* Abstract Placeholders using CSS Gradients */
/* Blue Theme */
.visual-blue {
    background: linear-gradient(135deg, var(--color-blue) 0%, rgba(0, 0, 0, 0) 80%),
        radial-gradient(circle at 80% 20%, #222, #000);
}

/* Green Theme */
.visual-green {
    background: linear-gradient(45deg, var(--color-green) 0%, rgba(0, 0, 0, 0) 70%),
        conic-gradient(from 90deg, #111, #000);
}

/* Red Theme */
.visual-red {
    background: radial-gradient(circle at 10% 90%, var(--color-red) 0%, rgba(0, 0, 0, 0) 60%),
        linear-gradient(to right, #111, #080808);
}

/* Yellow Theme */
.visual-yellow {
    background: linear-gradient(to top, rgba(181, 57, 24, 0.4), transparent),
        repeating-linear-gradient(45deg, #111 0, #111 10px, #080808 10px, #080808 20px);
}

/* Dark Mixes */
.visual-blue-dark {
    background: radial-gradient(circle at 50% 50%, rgba(57, 129, 188, 0.2) 0%, transparent 70%),
        #050505 url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1h2v2H1V1zm4 0h2v2H5V1zm0 4h2v2H5V5zm4 0h2v2H9V5z' fill='%23222' fill-opacity='0.4'/%3E%3C/svg%3E");
}

.visual-green-dark {
    background: linear-gradient(90deg, #000 0%, #111 50%, #000 100%);
    border-bottom: 4px solid var(--color-green);
}

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

.project-brand {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.project-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.project-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-family: monospace;
}

.project-desc {
    font-size: 1.1rem;
    line-height: 1.4;
    max-width: 90%;
    color: var(--text-color);
    opacity: 0.8;
}

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

/* CLIENT GROUP LABEL */
.client-group-label {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2rem;
    letter-spacing: 0.05em;
}

/* CLIENTS SECTION REMOVED */

/* PORTFOLIO CATEGORIES */
.portfolio-category {
    margin-bottom: 6rem;
}

.portfolio-category:last-child {
    margin-bottom: 0;
}

.category-title {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2rem;
    letter-spacing: 0.05em;
    padding-left: 2px;
    border-left: 3px solid var(--text-color);
    padding-left: 1rem;
    line-height: 1;
}

/* Ensure grid gap is consistent */
.portfolio-grid {
    gap: 3rem 2rem;
    margin-bottom: 2rem;
}

/* MEDIA DISPLAY STYLES */

/* Container */
.media-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background-color: #111;
}

/* Single Image / General Media Item */
.media-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

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

/* Use existing visual classes as media items for now */
.media-item.visual-blue,
.media-item.visual-green,
.media-item.visual-red,
.media-item.visual-yellow,
.media-item.visual-blue-dark,
.media-item.visual-green-dark {
    position: absolute;
    /* Needed for carousel stacking */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Carousel */
.media-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.media-carousel .media-item {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

.media-carousel .media-item.active {
    opacity: 1;
    z-index: 2;
}

/* Video */
.media-video-container {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

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

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease;
    z-index: 10;
}

.media-video-container.playing .video-overlay {
    opacity: 0;
    pointer-events: none;
}

.play-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
}

.play-icon::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #fff;
    margin-left: 4px;
    /* Optical adjustment */
}


/* Project Coverage Links */
.project-coverage {
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

.coverage-label {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
}

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

.coverage-links li {
    margin-bottom: 0.25rem;
}

.coverage-links a {
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
    font-weight: 400;
    /* Regular weight for links */
}

.coverage-links a:hover {
    border-bottom-color: var(--text-color);
}

/* DESKTOP WIDESCREEN ADJUSTMENTS */
@media (min-width: 1024px) {
    :root {
        --padding-sides: 5%;
    }

    .container {
        max-width: 1600px;
    }
}