/* Smooth Scrolling & Base Rem Logic */
html {
    scroll-behavior: smooth;
    font-size: 62.5%;
}

/* Base Styles & Variables */
:root {
    --primary: #ffffff;
    --secondary: #b3b3b3;
    --background: #0a0a0a;
    --background-dark: #050505;
    --accent: #b8860b;
    --spacing-unit: 2rem;
    --max-width: 1200px;
    --border-radius: 4px;
    --transition: all 0.3s ease;
    /* Editorial display typeface — project titles and case-study credits
       ONLY, never body text/buttons/UI. Already referenced by rules below
       and by index.html's inline .reel-title — was missing here. */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--primary);
    background-color: var(--background);
    isolation: isolate;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before {
    content: '';
    position: fixed;
    z-index: -1;
    inset: -18%;
    background:
        radial-gradient(ellipse 48% 34% at 50% 8%, rgba(190, 105, 39, 0.105) 0%, rgba(184, 104, 35, 0.04) 48%, transparent 82%),
        radial-gradient(ellipse 54% 46% at 72% 27%, rgba(184, 134, 11, 0.075) 0%, rgba(184, 134, 11, 0.034) 46%, transparent 80%),
        radial-gradient(ellipse 46% 40% at 22% 72%, rgba(143, 99, 44, 0.05) 0%, transparent 80%);
    filter: blur(76px);
    opacity: 0.9;
    pointer-events: none;
    transform: translate3d(-1.2%, -0.7%, 0) scale(0.99);
    animation: site-ambient-drift 72s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes site-ambient-drift {
    from { transform: translate3d(-1.2%, -0.7%, 0) scale(0.99); }
    to { transform: translate3d(1.2%, 0.7%, 0) scale(1.01); }
}

@media (prefers-reduced-motion: reduce) {
    body::before {
        animation: none;
        transform: none;
        will-change: auto;
    }
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-unit);
}

section {
    padding: 8rem 0;
}

.section {
    position: relative;
    overflow: hidden;
}

.bg-dark {
    background-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--accent);
}

img {
    max-width: 100%;
    height: auto;
}

/* Typography */
.section-title {
    font-size: 2.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    position: relative;
    display: block;
    margin: 0 auto 2rem;
    color: var(--primary);
    text-align: center;
    width: 100%;
    padding-bottom: 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: var(--accent);
}

.subtitle {
    text-align: center;
    color: var(--secondary);
    margin-bottom: 4rem;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

/* Loading Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(184, 134, 11, 0.4);
}

/* --- Hero Section (Positioning Fixed) --- */
.hero {
    position: relative;
    overflow: hidden;
    height: 100vh;
    height: 100svh;
    min-height: 700px;
    display: flex;
    align-items: center; 
    --max-width: 800px;
    justify-content: center;
    text-align: center;
    background:
                radial-gradient(ellipse 58% 48% at 50% 42%, rgba(190, 105, 39, 0.12), transparent 72%),
                linear-gradient(rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.75)),
                url('https://images.unsplash.com/photo-1533134242443-9a7f9f7718de?auto=format&fit=crop&w=1950&q=80') no-repeat center center/cover;
}

.hero h1 {
    font-size: 5.6rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.hero .title {
    font-size: 1.8rem;
    color: var(--secondary);
    margin-bottom: 4rem;
    font-weight: 400;
    letter-spacing: 0.1em;
}

/* --- Unified Ghost to Liquid Glass Buttons --- */
.cta-button, .liquid-glass-btn {
    display: inline-block;
    text-decoration: none;
    color: #ffffff !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-radius: 50px;
    
    /* IDLE STATE: Almost invisible box */
    background: rgba(255, 255, 255, 0.0); 
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    
    /* Faint initial shadows */
    box-shadow: 
        inset -1.996px 2.391px 18.109px -2.622px rgba(184, 134, 11, 0.05), 
        inset 6.671px 6.671px 3.363px -6.214px rgba(255, 255, 255, 0.1);
    
    /* Ultra Smooth & Cinematic Transition */
    transition: 
        transform 1.2s cubic-bezier(0.15, 0.85, 0.35, 1),
        background 1.2s ease,
        border 1.2s ease,
        backdrop-filter 1.2s ease,
        box-shadow 1.5s cubic-bezier(0.15, 0.85, 0.35, 1),
        color 0.8s ease,
        opacity 0.8s ease;
        
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Sizing & Opacity Customization */
.cta-button {
    padding: 1.1rem 3rem; 
    font-size: 1.3rem;
    min-width: 200px;
    opacity: 1;
}

.liquid-glass-btn {
    padding: 1.2rem 2.4rem; 
    font-size: 1.1rem;
    min-width: 180px;
    opacity: 0.65; 
}

/* HOVER STATE: Liquid Reveal */
.cta-button:hover, .liquid-glass-btn:hover {
    transform: translateY(-5px);
    opacity: 1; 
    background: rgba(255, 255, 255, 0.015);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border: 1px solid rgba(184, 134, 11, 0.3);
    
    /* YELLOW SHADOW LOGIC */
    box-shadow: 
        inset -1.996px 2.391px 18.109px -2.622px rgba(184, 134, 11, 0.1), 
        inset -5.73px -4px 3.36px -2.73px rgba(184, 134, 11, 0.4), 
        inset 6.671px 6.671px 3.363px -6.214px rgba(255, 255, 255, 0.3), 
        inset 0 1px 12.2px -5px rgba(184, 134, 11, 0.5), 
        inset -6.727px -6.727px 3.363px -6.727px rgba(184, 134, 11, 0.4), 
        inset 6.671px 6.671px 3.363px -6.214px rgba(252, 246, 246, 0.3);
    
    color: var(--accent) !important;
}

/* The Reflection Flare */
.cta-button::after, .liquid-glass-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -120%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(184, 134, 11, 0.1) 0%, transparent 70%);
    transform: scale(0);
    transition: transform 1.5s ease, left 1.5s ease;
    pointer-events: none;
}

.cta-button:hover::after, .liquid-glass-btn:hover::after {
    transform: scale(1);
    left: -50%;
}

/* --- Strategic Gateway (Lower Screen Placement) --- */
.gateway-container {
    position: absolute;
    bottom: 6rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

/* --- Showreel Section --- */
.video-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.video-placeholder {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; 
    background: rgba(255, 255, 255, 0.0); 
    border-radius: 4px;
    margin-bottom: 2rem;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 
        inset -1.996px 2.391px 18.109px -2.622px rgba(184, 134, 11, 0.05), 
        inset 6.671px 6.671px 3.363px -6.214px rgba(255, 255, 255, 0.1);
    transition: all 1.2s cubic-bezier(0.15, 0.85, 0.35, 1);
}

.video-placeholder:hover {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(184, 134, 11, 0.3);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.5),
        inset -1.996px 2.391px 18.109px -2.622px rgba(184, 134, 11, 0.1), 
        inset -5.73px -4px 3.36px -2.73px rgba(184, 134, 11, 0.4), 
        inset 6.671px 6.671px 3.363px -6.214px rgba(255, 255, 255, 0.3), 
        inset 0 1px 12.2px -5px rgba(184, 134, 11, 0.5);
}

.video-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8rem;
    z-index: 5;
    cursor: pointer;
    pointer-events: none; 
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(184, 134, 11, 0.2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.1));
    transition: all 0.8s cubic-bezier(0.15, 0.85, 0.35, 1);
}

.video-placeholder:hover .video-overlay {
    transform: translate(-50%, -50%) scale(1.1);
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.5) 40%, var(--accent) 100%);
    -webkit-background-clip: text;
    filter: 
        drop-shadow(0 0 15px rgba(184, 134, 11, 0.3))
        drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.2));
}

.video-placeholder:active .video-overlay {
    transform: translate(-50%, -50%) scale(0.92);
    filter: drop-shadow(0 0 30px var(--accent));
    transition: all 0.1s ease;
}

.video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
    opacity: 0.8;
    border: none;
    transition: opacity 1s ease;
}

.video-placeholder:hover iframe {
    opacity: 1;
}

.caption {
    text-align: center;
    color: var(--secondary);
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.65;
    margin-top: 1rem;
}

/* About Section */
.about-grid {
    display: grid;
    gap: 4rem;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.about-intro {
    max-width: 800px;
    margin: 0 auto 2rem;
}

.about-intro .lead {
    font-size: 1.8rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 3rem;
    font-weight: 300;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.about-content {
    font-size: 1.6rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    max-width: 800px;
    margin: 0 auto 4rem;
    font-weight: 300;
}

.about-content p {
    margin-bottom: 2rem;
}

.about-highlight {
    color: var(--accent);
    font-weight: 400;
}

.about-divider {
    width: 100px;
    height: 2px;
    background: rgba(184, 134, 11, 0.3);
    margin: 3rem auto;
    border: none;
}

/* --- Expertise Section --- */
.expertise-section {
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.expertise-item {
    background: rgba(255, 255, 255, 0.0);
    padding: 3.5rem 2.5rem;
    border-radius: 4px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: 
        transform 1.2s cubic-bezier(0.15, 0.85, 0.35, 1),
        background 1.2s ease,
        border 1.2s ease,
        box-shadow 1.5s cubic-bezier(0.15, 0.85, 0.35, 1);
}

.expertise-item:hover {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(184, 134, 11, 0.3);
    transform: translateY(-8px) !important;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.5),
        inset -1.996px 2.391px 18.109px -2.622px rgba(184, 134, 11, 0.1), 
        inset -5.73px -4px 3.36px -2.73px rgba(184, 134, 11, 0.4), 
        inset 6.671px 6.671px 3.363px -6.214px rgba(255, 255, 255, 0.3), 
        inset 0 1px 12.2px -5px rgba(184, 134, 11, 0.5);
}

.expertise-icon {
    font-size: 3rem;
    color: rgba(184, 134, 11, 0.45); 
    filter: drop-shadow(0 0 1px rgba(184, 134, 11, 0.3));
    margin-bottom: 2rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.02);
    border: 1.5px solid rgba(184, 134, 11, 0.4); 
    border-radius: 50%;
    transition: all 1s cubic-bezier(0.15, 0.85, 0.35, 1);
    position: relative;
}

.expertise-item:hover .expertise-icon {
    color: var(--accent);
    filter: drop-shadow(0 0 10px rgba(184, 134, 11, 0.5));
    background: rgba(184, 134, 11, 0.05);
    border-color: rgba(184, 134, 11, 0.7); 
    transform: rotate(5deg) scale(1.1);
    box-shadow: 
        0 0 20px rgba(184, 134, 11, 0.2),
        inset 0 0 10px rgba(184, 134, 11, 0.3);
}

.expertise-item h3 {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    opacity: 0.9;
    transition: color 0.8s ease;
}

.expertise-item:hover h3 {
    color: var(--accent);
}

.expertise-item p {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.8;
    font-weight: 300;
    transition: color 0.8s ease;
}

.expertise-item:hover p {
    color: rgba(255, 255, 255, 0.9);
}

.expertise-item::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -120%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(184, 134, 11, 0.05) 0%, transparent 70%);
    transform: scale(0);
    transition: transform 1.5s ease, left 1.5s ease;
    pointer-events: none;
}

.expertise-item:hover::after {
    transform: scale(1);
    left: -50%;
}

/* --- BRANDS SECTION --- */
.brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); 
    gap: 1.5rem;
    margin-top: 4rem;
    justify-content: center;
}

.brand-logo {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent; 
    padding: 1rem;
    overflow: hidden;
    transition: transform 1.5s cubic-bezier(0.15, 0.85, 0.35, 1);
}

.brand-svg {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    filter: invert(56%) sepia(85%) saturate(456%) hue-rotate(5deg) brightness(88%) contrast(92%);
    opacity: 0.6;
    transition: 
        filter 1.5s ease, 
        transform 1.5s cubic-bezier(0.15, 0.85, 0.35, 1),
        opacity 1.5s ease;
}

.brand-logo:hover {
    transform: scale(1.15);
}

.brand-logo:hover .brand-svg {
    opacity: 1;
    filter: brightness(0) invert(1); 
}

.brand-logo span {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: rgba(184, 134, 11, 0.7); 
    text-transform: uppercase;
    margin-top: 8px;
}

/* --- SKILLS SECTION --- */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 4rem;
    margin-top: 4rem;
}

.skill-category h3 {
    font-size: 1.6rem;
    margin-bottom: 2.5rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 600;
}

.skill-item {
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding-bottom: 1rem;
    transition: transform 1.5s cubic-bezier(0.15, 0.85, 0.35, 1), color 1.2s ease;
}

.skill-item:hover {
    color: #fff;
    transform: translateX(10px);
}

/* --- FEATURED PROJECTS --- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
    margin-top: 4rem;
}

.projects-grid > .project-link-wrapper {
    min-width: 0;
}

.project-card {
    background: rgba(255, 255, 255, 0.0);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 1.2rem;
    transition: transform 1.5s cubic-bezier(0.15, 0.85, 0.35, 1), border 1.5s ease, box-shadow 1.8s ease;
}

.project-card:hover {
    border-color: rgba(184, 134, 11, 0.35);
    transform: translateY(-12px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(184, 134, 11, 0.1);
}

.project-image {
    width: 100%;
    height: 300px;
    background-color: #0a0a0a;
    margin-bottom: 1.5rem;
    filter: grayscale(0.5);
    transition: transform 1.8s ease, filter 1.8s ease;
}

.project-card:hover .project-image {
    filter: grayscale(0);
    transform: scale(1.03);
}

.project-card h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.9rem;
    letter-spacing: -0.01em;
}

/* --- SOCIAL PROFILE CARDS --- */
.social-profiles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 4rem;
}

.social-profile-card {
    --social-accent: #d3a632;
    --social-glow: #d3a632;
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    aspect-ratio: 3 / 4;
    min-width: 0;
    padding: 2.4rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.social-profile-card > * {
    position: relative;
    z-index: 1;
}

.social-profile-card::before {
    position: absolute;
    z-index: 2;
    inset: 0 0 auto;
    height: 0.35rem;
    border-radius: 20px 20px 0 0;
    background: var(--social-accent);
    content: "";
    opacity: 0.9;
}

.social-profile-card::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: radial-gradient(
        ellipse at 32% 42%,
        color-mix(in srgb, var(--social-glow) 17%, transparent),
        transparent 58%
    );
    content: "";
    opacity: 0.18;
    animation: social-profile-ambient 18s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes social-profile-ambient {
    from {
        opacity: 0.1;
    }

    to {
        opacity: 0.24;
    }
}

.social-profile-linkedin {
    --social-accent: #0a66c2;
    --social-glow: #0a66c2;
}

.social-profile-instagram {
    --social-accent: #e34778;
    --social-glow: #e34778;
}

.social-profile-instagram::before {
    background: linear-gradient(90deg, #f9ce34, #ee2a7b 52%, #6228d7);
}

.social-profile-instagram::after {
    background:
        radial-gradient(ellipse at 70% 38%, color-mix(in srgb, #6228d7 13%, transparent), transparent 58%),
        radial-gradient(ellipse at 32% 42%, color-mix(in srgb, #ee2a7b 15%, transparent), transparent 58%),
        radial-gradient(ellipse at 50% 70%, color-mix(in srgb, #f9ce34 9%, transparent), transparent 58%);
}

.social-profile-x {
    --social-accent: #f2f2f2;
    --social-glow: #f2f2f2;
}

.social-profile-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--social-accent) 65%, transparent);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.social-profile-platform,
.social-profile-action {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.social-profile-platform i {
    color: var(--social-accent);
    font-size: 1.6rem;
}

.social-platform-x {
    color: var(--social-accent);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.social-profile-avatar {
    display: grid;
    width: clamp(8rem, 11vw, 11rem);
    aspect-ratio: 1;
    place-items: center;
    align-self: center;
    border: 1px solid color-mix(in srgb, var(--social-accent) 75%, transparent);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--social-accent) 35%, transparent), transparent 65%),
        #101010;
    box-shadow: 0 0 0 0.8rem rgba(255, 255, 255, 0.025);
    color: color-mix(in srgb, var(--social-accent) 75%, white);
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.social-profile-details {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    overflow-wrap: anywhere;
}

.social-profile-name {
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2vw, 2.2rem);
    font-weight: 600;
    line-height: 1.25;
}

.social-profile-handle {
    color: var(--secondary);
    font-size: 1.3rem;
}

.social-profile-focus {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.68);
    font-size: 1.1rem;
    line-height: 1.5;
}

.social-profile-focus-label {
    color: var(--social-accent);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.social-profile-action {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
    justify-content: space-between;
    font-size: 0.85rem;
}

.social-profile-action i {
    color: var(--social-accent);
    transition: transform 0.3s ease;
}

.social-profile-card:hover .social-profile-action i {
    transform: translate(3px, -3px);
}

@media (max-width: 768px) {
    .social-profile-card {
        display: grid;
        grid-template-areas:
            "platform platform"
            "avatar details"
            "focus focus"
            "action action";
        grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
        align-items: center;
        gap: 1rem 1.2rem;
        aspect-ratio: auto;
        padding: 1.35rem;
    }

    .social-profile-platform {
        grid-area: platform;
    }

    .social-profile-avatar {
        grid-area: avatar;
        width: min(100%, 7rem);
        aspect-ratio: 1;
        align-self: center;
        justify-self: center;
        border-radius: 50%;
        box-shadow: none;
        font-size: clamp(1.2rem, 5vw, 2rem);
    }

    .social-profile-details {
        grid-area: details;
        gap: 0.35rem;
    }

    .social-profile-name {
        font-size: clamp(1.35rem, 4vw, 1.8rem);
    }

    .social-profile-handle {
        font-size: 1.05rem;
        overflow-wrap: anywhere;
    }

    .social-profile-focus {
        grid-area: focus;
        padding: 0.85rem 0 0;
    }

    .social-profile-action {
        grid-area: action;
        padding-top: 0.85rem;
    }
}

.reel-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin: 1rem auto 0;
    color: rgba(215, 145, 50, 0.58);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reel-swipe-hint i {
    font-size: 0.7rem;
    opacity: 0.55;
}

.reel-swipe-hint.is-hidden {
    opacity: 0;
    transform: translateY(-0.3rem);
    pointer-events: none;
}

/* --- ARTLIST-INSPIRED CONTACT PIPELINE --- */
#contact.bg-dark {
    background-color: #0d0d0d;
    padding: 8rem 0;
    position: relative;
}

.contact-header-block {
    text-align: center;
    margin-bottom: 5rem;
}

#contact .section-title {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: #e0a800; 
    text-transform: uppercase;
    margin-bottom: 1rem;
}

#contact .section-title::after {
    display: none; /* Stripping line break decorations for Artlist purity */
}

.contact-subtitle {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: #ffffff;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.2;
}

.artlist-contact-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: start;
}

.contact-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.artlist-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.artlist-contact-card {
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 2.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
    transition: border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1), background 0.4s ease;
}

.artlist-contact-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: #1a1a1a;
}

.card-upper-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card-upper-meta i {
    font-size: 1.2rem;
    color: #a0a0a0;
    transition: color 0.3s ease;
}

.artlist-contact-card:hover .card-upper-meta i {
    color: #ffffff;
}

.contact-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #a0a0a0;
}

.card-main-value {
    font-size: 1.25rem;
    font-weight: 400;
    color: #ffffff;
    margin-top: 2rem;
    word-break: break-all;
    line-height: 1.4;
}

.artlist-ecosystem-panel {
    background: linear-gradient(135deg, #141414 0%, #0a0a0a 100%);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 420px;
}

.ecosystem-title {
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin-bottom: 1rem;
}

.ecosystem-desc {
    font-size: 0.95rem;
    color: #a0a0a0;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.social-strip-pipeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.social-strip-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    border-radius: 8px;
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.social-strip-item i {
    font-size: 1.1rem;
    color: #a0a0a0;
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-strip-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.social-strip-item:hover i {
    color: #ffffff;
    transform: translateX(3px);
}

/* Footer */
.footer {
    padding: 4rem 0;
    text-align: center;
    background-color: transparent;
    color: #555;
    font-size: 1.4rem;
}

/* --- RESPONSIVE ADJUSTMENTS & BREAKPOINTS --- */
@media (max-width: 1024px) {
    .hero h1 {
        font-size: 4.8rem;
    }
    .projects-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 992px) {
    .artlist-contact-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    :root {
        --spacing-unit: 1.5rem;
    }
    .hero h1 {
        font-size: 4rem;
    }
    .hero .title {
        font-size: 1.6rem;
    }
    .section {
        padding: 6rem 0;
    }
    .skills-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .projects-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .social-profiles-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .brands-grid {
        grid-template-columns: repeat(6, 1fr) !important; 
        gap: 0.5rem !important;
        padding: 0 5px;
    }
    .brand-logo {
        padding: 0.2rem !important; 
    }
    .brand-logo span {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .hero h1 {
        font-size: 3.2rem;
    }
    .hero .title {
        font-size: 1.4rem;
    }
    .section-title {
        font-size: 2rem;
        text-align: center;
        margin: 0 auto 1.5rem;
    }
    .about-content {
        font-size: 1.6rem;
    }
    .contact-actions-grid {
        grid-template-columns: 1fr;
    }
    .contact-subtitle {
        font-size: 1.8rem;
    }
    .artlist-ecosystem-panel {
        padding: 2rem;
        min-height: auto;
    }
}

/* =========================================================================
   UNIVERSAL CLIENT PAGE TEMPLATE — CSS
   Append this block to the END of your global style.css (do not create a
   new file, do not duplicate — this is additive only).

   Part A below is copied verbatim from color-grading.html's own local
   <style> block. Those classes were never actually migrated into the
   shared stylesheet — every /clients/[brand] page has been silently
   depending on CSS that only ever existed on one other page. That's the
   root cause of the screenshot: the video has no aspect-ratio box, and
   the header has no centering/spacing, because none of this exists in
   style.css yet.

   Part B is new: .client-page-logo, the 7-part case-study-anatomy
   section, and .director-notes never existed anywhere before — Hidraz
   and Bonetti are the first pages to need them. Built to match the same
   tokens already in :root (--primary, --secondary, --background-dark,
   --accent, --border-radius) and the same motion curve used everywhere
   else on the site.
   ========================================================================= */


/* -------------------------------------------------------------------------
   PART A — subpage shell + split video/text layout
   (verbatim from color-grading.html; now shared, so every /clients/ page
   and any future subpage template gets it for free)
   ------------------------------------------------------------------------- */

.subpage-nav {
    padding: 3rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background-color: var(--background-dark);
}
.back-link {
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}
.current-slug {
    float: right;
    font-size: 1.4rem;
    color: var(--secondary);
    letter-spacing: 0.1em;
}
.subpage-hero {
    padding: 8rem 0 4rem;
    text-align: center;
}
.subpage-hero .lead {
    font-size: 1.8rem;
    line-height: 1.8;
    color: var(--secondary);
    max-width: 800px;
    margin: 2rem auto 0;
    font-weight: 300;
}
.split-case-container {
    display: flex;
    flex-direction: column;
    gap: 12rem;
    padding: 4rem 0;
}
.project-breakdown-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 6rem;
    align-items: stretch;
}
.media-column {
    width: 100%;
}
.video-fixed-aspect {
    position: relative;
    width: 100%;
    height: auto;
    background: var(--background-dark);
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.vertical-dual-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    width: 100%;
}
.video-vertical-aspect {
    position: relative;
    width: 100%;
    height: auto;
    background: var(--background-dark);
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.video-fixed-aspect video,
.video-vertical-aspect video {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
    border: none;
}
.text-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.company-tag {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--secondary);
    margin-bottom: 1rem;
}
.breakdown-title {
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    font-weight: 600;
    margin-bottom: 3rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--primary);
}
.tech-section-title {
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 1rem;
}
.tech-meta-label {
    font-size: 1.4rem;
    color: var(--primary);
    margin-bottom: 2.5rem;
    font-weight: 500;
}
.tech-meta-label strong {
    color: var(--accent);
    font-weight: 500;
}
.step-block {
    margin-bottom: 2.5rem;
}
.step-block h4 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 1rem;
}
.step-block p {
    color: var(--secondary);
    font-size: 1.4rem;
    line-height: 1.7;
    font-weight: 300;
}


/* -------------------------------------------------------------------------
   PART B — new: client logo header, 7-part case study anatomy,
   Director's Notes. None of this existed on color-grading.html.
   ------------------------------------------------------------------------- */

/* Header logo — sized and constrained, forced white so any brand's SVG
   matches the dark, minimal homepage regardless of its source colors.
   margin changed from "0 auto 2.5rem" (centered/stacked) to "0" —
   necessary for the logo-left-of-text row layout added in Part C below.
   Hover/transition below are unchanged. */
.client-page-logo {
    display: block;
    max-width: 140px;
    max-height: 70px;
    width: auto;
    height: auto;
    margin: 0;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
    opacity: 0.92;
    transition: opacity 0.6s ease;
}
.client-page-logo:hover {
    opacity: 1;
}

/* Case study anatomy — the 7-part Context/Role/Challenge/Process/Tools/
   Outcome/Director's Notes block that sits below the video breakdown. */
.case-study-anatomy {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
.anatomy-block h3 {
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    margin-bottom: 1.2rem;
    font-weight: 600;
}
.anatomy-block p {
    font-size: 1.6rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 300;
    max-width: 760px;
}
.anatomy-tools-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0;
}
.anatomy-tools-list li {
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    color: var(--secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 0.6rem 1.6rem;
    transition: border-color 0.4s ease, color 0.4s ease;
}
.anatomy-tools-list li:hover {
    border-color: rgba(184, 134, 11, 0.4);
    color: var(--primary);
}

/* Director's Notes — native <details>/<summary>, no JS accordion. */
.director-notes {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius);
    padding: 2rem 2.5rem;
    background: rgba(255, 255, 255, 0.015);
    transition: border-color 0.6s ease;
}
.director-notes:hover {
    border-color: rgba(184, 134, 11, 0.25);
}
.director-notes summary {
    cursor: pointer;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.director-notes summary::-webkit-details-marker {
    display: none;
}
.director-notes summary::after {
    content: '+';
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    transition: transform 0.4s cubic-bezier(0.15, 0.85, 0.35, 1);
}
.director-notes[open] summary::after {
    transform: rotate(45deg);
}
.director-notes .notes-body {
    margin-top: 1.8rem;
    font-size: 1.5rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 300;
    max-width: 700px;
}

/* Fraunces was already being loaded on these pages (see the <link> in
   <head>) but nothing was ever set to actually use it — the brand name
   in the header is the one place on a case-study page where a quieter
   editorial serif earns its keep over Inter. */
.subpage-hero h1.breakdown-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 4rem;
}


/* -------------------------------------------------------------------------
   Responsive — same breakpoint color-grading.html already used.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .project-breakdown-row {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
    .split-case-container {
        gap: 8rem;
    }
}


/* =========================================================================
   PART C — logo-left header, placeholder brand pages, Pipeline, FAQ
   Appended, additive only — nothing above this line was restructured,
   only the two small necessary edits already noted inline (--font-display
   variable, .client-page-logo margin). Matches the tokens and motion
   curve already established above.
   ========================================================================= */

/* Client page header — logo sits left of the brand name/tag instead of
   stacked above it. Stacks back to centered on narrow screens. */
.client-header-row {
    display: flex;
    align-items: center;
    gap: 3rem;
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
}
.client-header-text {
    flex: 1;
    min-width: 0;
}
.client-header-text .company-tag {
    display: block;
}
.subpage-hero .client-header-text h1.breakdown-title {
    margin-bottom: 0.8rem;
}
.client-header-text .lead {
    text-align: left;
    margin: 1rem 0 0;
}

/* Role tags (Editor, Colorist, etc.) shown under the header row. */
.role-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.8rem;
    margin-top: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.role-tags span {
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 0.5rem 1.3rem;
}

/* Hero video presentation for single/dual-video case studies (Hidraz,
   Ronika Palace, Mihan Kaveh) — sits above the multi-project body.
   Distinct from .video-fixed-aspect/.video-vertical-aspect above, which
   are for the multi-project rows further down the page. */
.case-study-video-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    margin: 4rem 0;
}
.case-study-video-frame {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    background: var(--background-dark);
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}
.case-study-video-frame video {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
    border: none;
}

/* Empty frame templates stay visible in the admin editor only. */
.placeholder-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.02),
        rgba(255, 255, 255, 0.02) 10px,
        rgba(255, 255, 255, 0.04) 10px,
        rgba(255, 255, 255, 0.04) 20px
    );
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.placeholder-video-frame.vertical {
    aspect-ratio: 9 / 16;
}
.placeholder-video-frame span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    width: 80%;
}
.placeholder-text-note {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

/* Homepage "Pipeline" section — numbered step badges + intro line. */
.pipeline-intro {
    text-align: center;
    color: var(--secondary);
    font-size: 1.5rem;
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto 3rem;
}
.pipeline-step {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: rgba(184, 134, 11, 0.5);
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

/* Homepage FAQ section — reuses .director-notes above for each Q&A. */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 4rem;
}

@media (max-width: 600px) {
    .client-header-row {
        flex-direction: column;
        text-align: center;
    }
    .client-header-text .lead {
        text-align: center;
    }
    .client-page-logo {
        margin: 0 auto;
    }
    .role-tags {
        justify-content: center;
    }
}


/* =========================================================================
   PART D — Hero gateway pill (Technical Studies / Corporate Clients /
   Let's Connect). .gateway-container already existed and laid out the row;
   .gateway-pill, .gateway-link, .gateway-divider had zero rules anywhere in
   the codebase and rendered as bare unstyled inline text/icons. Idle-state
   layout and typography only — icons removed per request (minimal), and
   hover color/transition is intentionally left to inherit the existing
   global a:hover rule near the top of this file (untouched, unchanged).
   ========================================================================= */
.gateway-pill {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.gateway-link {
    display: inline-block;
    padding: 0.9rem 1.5rem;
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--secondary);
    transition: color 0.3s ease;
}
.gateway-link:hover {
    color: #fff;
}
.gateway-divider {
    width: 1px;
    height: 1.4rem;
    background: rgba(255, 255, 255, 0.2);
}
@media (max-width: 600px) {
    .gateway-pill {
        display: inline-flex;
        flex-direction: row;
        max-width: 100%;
    }
    .gateway-link {
        padding: 0.6rem 0.8rem;
        font-size: 0.68rem;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }
    .gateway-divider {
        width: 1px;
        height: 1.1rem;
    }
}
@media (max-width: 360px) {
    .gateway-link {
        padding: 0.5rem 0.55rem;
        font-size: 0.58rem;
        letter-spacing: 0;
    }
}


/* =========================================================================
   PART E — Core Expertise: 3x2 grid on mobile instead of stacking to one
   huge card per row. Same border-radius (var(--border-radius), the site's
   sharp 4px corner logic) — just smaller padding/icon/type so six cards sit
   three-across, two rows. Idle-state sizing only; .expertise-item:hover,
   .expertise-icon transition timing above are untouched.
   ========================================================================= */
@media (max-width: 768px) {
    .expertise-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.6rem;
        margin-top: 2rem;
    }
    .expertise-item {
        padding: 1rem 0.4rem;
        border-radius: var(--border-radius);
    }
    .expertise-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        margin-bottom: 0.8rem;
    }
    .expertise-item h3 {
        font-size: 0.72rem;
        margin-bottom: 0;
        line-height: 1.3;
    }
    .expertise-item p {
        display: none;
    }
}


/* =========================================================================
   PART F — Skills section: box each category cleanly (border + padding,
   same var(--border-radius) corner logic), and give the .skill-progress /
   .skill-progress-bar elements real styling — script.js already animates
   their width on scroll, but there was no CSS for either anywhere, so the
   bars have been invisible. .skill-item / .skill-item:hover above (color +
   1.5s translateX transition) are untouched.
   ========================================================================= */
.skill-category {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.015);
    padding: 2.8rem 2.2rem;
}
.skill-progress {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    margin-top: 0.7rem;
    overflow: hidden;
}
.skill-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    border-radius: 2px;
    transition: width 1.4s cubic-bezier(0.15, 0.85, 0.35, 1);
}
@media (max-width: 768px) {
    .skills-grid {
        gap: 1.5rem;
        margin-top: 2.5rem;
    }
    .skill-category {
        padding: 1.6rem 1.4rem;
    }
    .skill-category h3 {
        font-size: 1.1rem;
        margin-bottom: 1.4rem;
        letter-spacing: 0.12em;
    }
    .skill-item {
        font-size: 1.1rem;
        margin-bottom: 1rem;
        padding-bottom: 0.6rem;
    }
}


/* =========================================================================
   PART G — Featured Projects on mobile: the fixed 300px .project-image
   height was too tall relative to a phone viewport and left the title/role/
   description text below feeling cramped. Switch to a proportional
   aspect-ratio and give the text more room to breathe. .project-card:hover /
   .project-card:hover .project-image transitions above are untouched.
   ========================================================================= */
@media (max-width: 768px) {
    .project-image {
        height: auto;
        aspect-ratio: 16 / 10;
    }
    .project-card {
        padding: 1rem;
    }
    .project-card h3 {
        font-size: 1.4rem;
        margin-top: 0.5rem;
    }
    .project-card p {
        font-size: 1rem;
        line-height: 1.7;
        margin-top: 0.7rem;
    }
}


/* Keep the glass cards translucent so the single page-level glow can show through. */
.expertise-item,
.skill-category,
.project-card {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* =========================================================================
   PART J — subpage-nav mobile stacking, smaller case-study videos on
   mobile, and a slow ambient "glass" light sweep on the liquid-glass
   buttons/pill. All additive, idle-state only (the sweep is a continuous
   animation, never keyed off :hover) — .cta-button:hover, .liquid-glass-
   btn:hover, and their ::after flare above are untouched.
   ========================================================================= */
@media (max-width: 700px) {
    .current-slug {
        float: none;
        display: block;
        text-align: left;
        margin-top: 0.8rem;
    }
    .case-study-video-frame {
        max-width: 340px;
    }
}

.gateway-pill {
    position: relative;
    overflow: hidden;
}

.brands-hint {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    margin-top: -3rem;
    margin-bottom: 3rem;
}

.video-interaction-hint {
    width: 100%;
    margin: 0 auto 2rem;
    color: rgba(255, 255, 255, 0.52);
    font-size: 1.15rem;
    letter-spacing: 0.035em;
    line-height: 1.7;
    text-align: center;
}

.reel-title-link,
.project-title-link,
.client-name-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.35s ease;
}

.reel-title-link:hover,
.project-title-link:hover,
.client-name-link:hover {
    color: #e6bb57;
}

.project-title-link:focus-visible,
.reel-title-link:focus-visible,
.client-name-link:focus-visible {
    outline: 1px solid #e6bb57;
    outline-offset: 4px;
}


/* =========================================================================
   PART L — Editorial typography pass: a small-caps kicker above the hero
   name and above each major section heading (numbered, echoing the "[04]"
   / "01 —" labelling pattern from premium reference sites), plus a short
   serif pull-quote section between About and Brands for pacing. Pure
   typography/spacing additions — nothing here touches any existing
   transition or :hover rule above.
   ========================================================================= */
.hero-kicker {
    display: block;
    font-size: 0.95rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.section-kicker {
    display: block;
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 1rem;
    font-weight: 500;
}

.pull-quote-section {
    padding: 4rem 0;
}
.pull-quote {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.8rem, 4.2vw, 3.2rem);
    line-height: 1.35;
    text-align: center;
    max-width: 880px;
    margin: 0 auto;
    color: var(--primary);
    letter-spacing: -0.01em;
}

@media (max-width: 600px) {
    .hero-kicker {
        font-size: 0.75rem;
        letter-spacing: 0.25em;
    }
    .section-kicker {
        font-size: 0.7rem;
        letter-spacing: 0.2em;
    }
    .pull-quote-section {
        padding: 2.5rem 0;
    }
}


/* =========================================================================
   PART M — Featured Project cards restyled after the reference screenshot:
   edge-to-edge media, rounder corners, and the title/role/description set
   as a caption overlaid on a dark scrim at the bottom of the card, with the
   lab-badge as a clean label at the top — instead of plain text sitting
   below a boxed-in video. Border-radius and layout only: .project-card:hover,
   .project-card:hover .project-image (grayscale/scale) above keep their
   exact existing transition timing, completely untouched.
   ========================================================================= */
.project-card {
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.project-image {
    height: 460px;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.lab-badge {
    position: absolute;
    top: 1.4rem;
    left: 1.4rem;
    right: 1.4rem;
    z-index: 2;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    padding: 0.5rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-sizing: border-box;
    width: fit-content;
    max-width: calc(100% - 2.8rem);
    white-space: normal;
    overflow-wrap: break-word;
}
.project-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 40%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2.5rem 1.6rem 1.8rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.88) 60%, transparent 100%);
}
.project-overlay h3 {
    color: #fff;
    margin-bottom: 0.6rem;
}
.project-overlay p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0.3rem 0 0;
}
.project-overlay p strong {
    color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 768px) {
    .project-image {
        height: 420px;
    }
    .project-overlay {
        top: 48%;
        padding: 2rem 1.3rem 1.5rem;
    }
    .lab-badge {
        top: 1rem;
        left: 1rem;
        font-size: 0.62rem;
        padding: 0.4rem 0.7rem;
    }
    .project-overlay h3 {
        font-size: 1.3rem;
        line-height: 1.3;
    }
    .project-overlay p:not(:has(strong)) {
        display: none;
    }
    .project-overlay {
        padding: 3rem 1.3rem 1.5rem;
    }
}


/* =========================================================================
   PART N — Hero on mobile: .gateway-container was position:absolute,
   bottom: 6rem, which pins it relative to the hero's own height — on a
   mobile browser where 100vh (now 100svh above) still left any vertical
   mismatch, this pushed the pill below the visible fold with a large empty
   gap above the heading. Below 768px, drop the pill into normal document
   flow right under the CTA button instead, so it's always visible without
   depending on viewport height math at all. Idle layout only — the
   .gateway-link / .gateway-pill rules above keep their exact appearance.
   ========================================================================= */
@media (max-width: 768px) {
    .hero {
        height: auto;
        min-height: 100svh;
        flex-direction: column;
        padding: 7rem 0 3rem;
    }
    .gateway-container {
        position: static;
        margin-top: 9rem;
    }
}


/* =========================================================================
   PART O — Client pages needed more substance: every placeholder brand
   page now shows 3 placeholder slots (still honestly labeled "Case Study
   In Production", nothing fabricated) instead of 1, and the two real case
   studies (Hidraz, Ronika Palace) get a 3rd slot alongside their real
   video(s) so every client page reaches the same minimum. Also widens the
   video frame on mobile — 220px read as oddly narrow on a 375-430px phone;
   340px is far more proportional. Layout/sizing only.
   ========================================================================= */
.placeholder-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.8rem;
}
/* Full-screen site navigation */
.site-menu-open {
    overflow: hidden;
}

.site-menu-toggle {
    position: fixed;
    z-index: 2202;
    top: 2rem;
    right: 2rem;
    display: inline-flex;
    width: 3.6rem;
    height: 3.6rem;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font: inherit;
    transition: color 0.3s ease, transform 0.3s ease;
}

.site-menu-toggle:hover,
.site-menu-toggle[aria-expanded="true"] {
    color: #e6bb57;
}

.site-menu-toggle:hover {
    transform: translateY(-2px);
}

.site-menu-toggle-icon {
    position: relative;
    display: grid;
    width: 2.16rem;
    height: 1.56rem;
    align-content: center;
    gap: 0.5rem;
}

.site-menu-toggle-icon i {
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform-origin: center;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-menu-toggle-icon i:last-child {
    width: 70%;
    justify-self: end;
}

.site-menu-toggle[aria-expanded="true"] .site-menu-toggle-icon i:first-child {
    transform: translateY(0.39rem) rotate(45deg) scaleX(0.92);
}

.site-menu-toggle[aria-expanded="true"] .site-menu-toggle-icon i:last-child {
    width: 100%;
    transform: translateY(-0.12rem) rotate(-45deg) scaleX(0.92);
}

.site-menu-toggle:focus-visible,
.site-menu a:focus-visible {
    outline: 2px solid #e6bb57;
    outline-offset: 4px;
}

.site-menu {
    position: fixed;
    z-index: 2200;
    inset: 0;
    overflow-y: auto;
    background:
        radial-gradient(ellipse at 82% 18%, rgba(184, 134, 11, 0.17), transparent 34%),
        radial-gradient(ellipse at 12% 100%, rgba(115, 73, 16, 0.14), transparent 40%),
        rgba(7, 7, 7, 0.985);
    color: var(--primary);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    clip-path: circle(0 at calc(100% - 3.8rem) 3.8rem);
    transform: scale(0.985);
    transform-origin: top right;
    transition:
        opacity 0.45s ease,
        visibility 0.82s,
        clip-path 0.82s cubic-bezier(0.76, 0, 0.24, 1),
        transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    clip-path: circle(150vmax at calc(100% - 3.8rem) 3.8rem);
    transform: scale(1);
}

.site-menu-grain {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
    opacity: 0.12;
    pointer-events: none;
}

.site-menu-inner {
    display: flex;
    width: min(100%, 1600px);
    min-height: 100svh;
    flex-direction: column;
    margin: 0 auto;
    padding: clamp(2.4rem, 5vw, 6rem) clamp(2rem, 8vw, 12rem) 2.5rem;
}

.site-menu-header,
.site-menu-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-menu-brand {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    color: #fff;
}

.site-menu-brand > span:first-child {
    display: inline-flex;
    color: #e6bb57;
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: 0.08em;
}

.site-menu-brand > span:last-child,
.site-menu-edition,
.site-menu-footer {
    color: rgba(255, 255, 255, 0.52);
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.site-menu-content {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1.2fr) minmax(23rem, 0.8fr);
    align-items: center;
    gap: clamp(4rem, 12vw, 16rem);
    padding: 5rem 0;
}

.site-menu-links {
    display: grid;
}

.site-menu-link {
    display: grid;
    grid-template-columns: 3.8rem minmax(0, 1fr) 2.5rem;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0;
    color: rgba(255, 255, 255, 0.76);
    font-family: var(--font-display);
    font-size: clamp(2.7rem, 4.68vw, 5.76rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
    opacity: 0;
    transform: translateY(2.4rem);
    transition: color 0.3s ease, opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1), transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-menu.is-open .site-menu-link {
    opacity: 1;
    transform: translateY(0);
}

.site-menu.is-open .site-menu-link:nth-child(1) { transition-delay: 0.06s; }
.site-menu.is-open .site-menu-link:nth-child(2) { transition-delay: 0.11s; }
.site-menu.is-open .site-menu-link:nth-child(3) { transition-delay: 0.16s; }
.site-menu.is-open .site-menu-link:nth-child(4) { transition-delay: 0.21s; }
.site-menu.is-open .site-menu-link:nth-child(5) { transition-delay: 0.26s; }
.site-menu.is-open .site-menu-link:nth-child(6) { transition-delay: 0.31s; }
.site-menu.is-open .site-menu-link:nth-child(7) { transition-delay: 0.36s; }

.site-menu-link:hover {
    color: #e6bb57;
}

.site-menu-number {
    align-self: center;
    color: rgba(230, 187, 87, 0.75);
    font-family: Inter, sans-serif;
    font-size: 1rem;
    letter-spacing: 0.12em;
}

.site-menu-arrow {
    color: rgba(230, 187, 87, 0.75);
    font-family: Inter, sans-serif;
    font-size: 1.5rem;
    opacity: 0;
    transform: translate(-0.5rem, 0.5rem);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.site-menu-link:hover .site-menu-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

.site-menu-aside {
    max-width: 36rem;
    padding: 3rem 0 3rem 3rem;
    border-left: 1px solid rgba(230, 187, 87, 0.32);
}

.site-menu-kicker {
    color: #e6bb57;
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.site-menu-aside p {
    margin: 2.2rem 0 3rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3vw, 3.6rem);
    line-height: 1.3;
}

.site-menu-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.3rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    color: #e6bb57;
    font-size: 1.15rem;
}

.site-menu-contact span {
    font-size: 1.5rem;
}

.site-menu-location {
    display: block;
    margin-top: 1.6rem;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    line-height: 1.6;
}

.site-menu-footer {
    padding: 1.6rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 0;
}

.site-menu-footer a {
    color: #e6bb57;
}

/* Homepage About proof points */
.brand-practice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
    margin: 3rem auto 0;
    text-align: left;
}

.brand-practice-grid article {
    display: flex;
    min-height: 12rem;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.3rem;
    padding: 1.7rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
}

.brand-practice-grid strong {
    color: #e6bb57;
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 4vw, 3.7rem);
    font-weight: 400;
    line-height: 1.1;
}

.brand-practice-grid span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 1.2rem;
    line-height: 1.55;
}

.about-proof-grid {
    display: grid;
    max-width: 76rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;
    margin: 2.6rem auto 0;
    text-align: center;
}

.about-proof-grid article {
    position: relative;
    display: flex;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0 1.2rem;
    border: 0;
    border-radius: 0;
    background: none;
}

.about-proof-grid article + article::before {
    position: absolute;
    top: 50%;
    left: calc(-1.2rem - 0.5px);
    width: 1px;
    height: 2.2rem;
    background: rgba(255, 255, 255, 0.16);
    content: "";
    transform: translateY(-50%);
}

.about-proof-grid strong {
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    font-weight: 400;
    line-height: 1.2;
}

.about-proof-grid span {
    color: rgba(255, 255, 255, 0.64);
    font-size: 1.05rem;
    line-height: 1.45;
}

/* Client landing pages: editorial identity, project context, and practice facts */
.subpage-body {
    background-color: var(--background);
}

.subpage-body .section.bg-dark {
    background-color: transparent;
}

#contact.bg-dark {
    background: transparent !important;
}

.subpage-body .section > .container {
    padding-right: clamp(2rem, 4vw, 4rem);
    padding-left: clamp(2rem, 4vw, 4rem);
}

.subpage-nav {
    position: relative;
    z-index: 1;
    padding: 1.2rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(5, 5, 5, 0.74);
}

.subpage-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.back-link {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.current-slug {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.subpage-hero {
    max-width: 1120px;
    padding: clamp(2.5rem, 5vw, 4.5rem) 2rem clamp(1.75rem, 3vw, 2.75rem);
    text-align: left;
}

.subpage-hero {
    padding-top: 0;
}

.client-header-row {
    max-width: 100%;
    gap: clamp(1.1rem, 2.5vw, 2rem);
    padding: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.subpage-body .client-header-row,
.subpage-body .client-header-row .client-header-text {
    text-align: left;
}

.client-page-logo {
    width: auto;
    max-width: clamp(3.5rem, 8vw, 7rem);
    max-height: 4.5rem;
    object-fit: contain;
}

.client-header-text .company-tag {
    color: #e6bb57;
    margin-bottom: 0.45rem;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
}

.subpage-hero .client-header-text h1.breakdown-title {
    margin-bottom: 0;
    font-size: clamp(1.4rem, 1.5vw, 1.6rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.client-hero-image-placeholder {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 12rem;
    max-width: none;
    aspect-ratio: 3.2 / 1;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.45rem;
    overflow: hidden;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    padding: clamp(1.4rem, 3vw, 2.6rem);
    background:
        radial-gradient(ellipse at 75% 15%, rgba(255, 255, 255, 0.08), transparent 38%),
        linear-gradient(120deg, #17191b, #101112 58%, #1a1b1c);
    color: rgba(255, 255, 255, 0.72);
    background-position: center;
    background-size: cover;
}

.client-hero-image-placeholder > img {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.client-hero-image-placeholder::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 9, 9, 0.04) 42%, rgba(9, 9, 9, 0.24) 72%, #090909 100%);
    content: "";
    pointer-events: none;
}

.client-hero-image-label,
.client-hero-image-title,
.client-hero-image-note {
    position: relative;
    z-index: 2;
}

.client-hero-image-label {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.client-hero-image-title {
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.1vw, 2rem);
    line-height: 1.2;
}

.client-hero-image-note {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.82rem;
    line-height: 1.5;
}

.role-tags span {
    border-color: rgba(230, 187, 87, 0.22);
    background: rgba(184, 134, 11, 0.06);
    font-size: 0.95rem;
}

.subpage-body .role-tags {
    display: none !important;
}

.subpage-body .brand-section {
    padding: clamp(3.5rem, 6vw, 6rem) 0;
}

.brand-section-kicker {
    color: rgba(230, 187, 87, 0.78);
}

.brand-section .brand-about-text,
.brand-section .brand-role-text,
.brand-section .case-lead {
    max-width: 850px;
    font-family: Inter, sans-serif;
    font-size: clamp(1.55rem, 2.2vw, 2rem);
    font-style: normal;
    font-weight: 300;
    line-height: 1.8;
    text-align: left;
    color: rgba(255, 255, 255, 0.76);
}

.brand-practice-grid {
    max-width: 900px;
    gap: 0;
    margin: 2.5rem 0 0;
}

.brand-practice-grid article {
    min-height: 0;
    padding: 1.2rem 1.35rem 0;
    border: 0;
    border-top: 1px solid rgba(230, 187, 87, 0.24);
    border-radius: 0;
    background: none;
}

.brand-practice-grid strong {
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
}

.brand-practice-grid span {
    font-size: 0.95rem;
}

.case-file-placeholder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.2rem 2rem;
    margin: 2rem 0 1rem;
    padding: 1.5rem 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    background: none;
}

.case-file-mark {
    grid-column: 1 / -1;
    color: rgba(230, 187, 87, 0.7);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
}

.case-file-mark span {
    color: rgba(255, 255, 255, 0.35);
}

.case-file-copy .brand-section-kicker {
    margin: 0 0 1rem;
    text-align: left;
}

.case-file-copy h3 {
    max-width: 48rem;
    margin: 0 0 0.65rem;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: 400;
    line-height: 1.2;
}

.case-file-copy p {
    max-width: 48rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    line-height: 1.7;
}

.case-file-status {
    padding: 0.7rem 0;
    border: 0;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.case-file-status span {
    margin-right: 0.5rem;
    color: #e6bb57;
}

.brand-page-pending .brand-case-note {
    max-width: 760px;
    margin: 2.4rem 0 0;
    text-align: left;
}

.brand-page-pending .brand-case-cta {
    margin-top: 3rem;
    text-align: left;
}

@media (max-width: 900px) {
    .site-menu-content {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.8fr);
        gap: 4rem;
    }

    .site-menu-aside {
        padding-left: 2rem;
    }
}

@media (max-width: 700px) {
    .site-menu-toggle {
        top: 2rem;
        right: 2rem;
        width: 3.36rem;
        height: 3.36rem;
    }

    .site-menu-toggle-icon {
        width: 2.16rem;
        height: 1.56rem;
    }

    .site-menu-inner {
        padding: 2rem 1.6rem 1.8rem;
    }

    .site-menu-header {
        padding-bottom: 1.5rem;
    }

    .site-menu-edition {
        display: none;
    }

    .site-menu-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 2.5rem 0;
    }

    .site-menu-link {
        grid-template-columns: 2.6rem minmax(0, 1fr) 2rem;
        gap: 0.6rem;
        padding: 0.55rem 0;
        font-size: clamp(2.25rem, 8.1vw, 3.87rem);
    }

    .site-menu-number {
        font-size: 0.8rem;
    }

    .site-menu-arrow {
        font-size: 1.2rem;
    }

    .site-menu-aside {
        max-width: none;
        padding: 1.8rem 0 0;
        border-top: 1px solid rgba(230, 187, 87, 0.32);
        border-left: 0;
    }

    .site-menu-aside p {
        margin: 1.2rem 0 1.5rem;
        font-size: 2rem;
    }

    .site-menu-footer {
        font-size: 0.75rem;
    }

    .site-menu-brand > span:last-child {
        font-size: 0.75rem;
    }

    .subpage-nav .container {
        align-items: center;
        flex-direction: row;
        gap: 1rem;
    }

    .subpage-nav .back-link {
        font-size: 0.72rem;
    }

    .subpage-nav .current-slug {
        display: none;
    }

    .subpage-hero {
        padding: 0 0 1.5rem;
    }

    .subpage-body .section > .container {
        padding-right: 2.4rem;
        padding-left: 2.4rem;
    }

    .client-hero-image-placeholder {
        min-height: 15rem;
        max-height: none;
        aspect-ratio: 1.35 / 1;
        margin-bottom: 1.4rem;
        padding: 1.3rem;
        background-position: center 42%;
    }

    .client-hero-image-placeholder.has-photo {
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
        background-size: 100% 100%, auto 100%;
    }

    .client-hero-image-placeholder::after {
        background: linear-gradient(180deg, rgba(9, 9, 9, 0.04) 25%, rgba(9, 9, 9, 0.2) 55%, #090909 100%);
    }

    .client-hero-image-note {
        max-width: 24rem;
        font-size: 0.74rem;
    }

    .client-header-row {
        align-items: center;
        flex-direction: row;
        gap: 1rem;
        padding-bottom: 1.35rem;
    }

    .client-page-logo {
        max-width: 3.75rem;
        max-height: 3.75rem;
    }

    .subpage-hero .client-header-text h1.breakdown-title {
        font-size: 1.4rem;
        line-height: 1.05;
    }

    .client-header-text .company-tag {
        margin-bottom: 0.3rem;
        font-size: 0.64rem;
    }

    .subpage-body .brand-section {
        padding: 3rem 0;
    }

    .role-tags {
        margin-top: 1.4rem;
    }

    .brand-practice-grid {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .brand-practice-grid article {
        min-height: 0;
    }

    .brand-practice-grid article {
        padding: 1rem 0;
    }

    .about-proof-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 36rem;
        margin-top: 2rem;
    }

    .about-proof-grid article {
        gap: 0.25rem;
        padding: 0.7rem 0;
    }

    .about-proof-grid article + article::before {
        top: -0.5rem;
        left: 50%;
        width: 2.4rem;
        height: 1px;
        transform: translateX(-50%);
    }

    .case-file-placeholder {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        margin: 1.5rem 0 0.5rem;
        padding: 1.25rem 0;
    }

    .case-file-mark {
        grid-column: auto;
    }

    .case-file-status {
        padding: 0.25rem 0;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .social-profile-card::after {
        animation: none;
    }

    .site-menu,
    .site-menu-link,
    .reel-swipe-hint,
    .site-menu-toggle,
    .site-menu-toggle-icon i {
        transition-duration: 0.01ms;
    }
}