/* ==================== CUSTOM COLOR GRADING SYSTEM ==================== */
        :root {
            /* Cinematic Color Palette - Inspired by Kodak Vision3 500T Film Stock */
            --cinema-black: #0A0A0C;
            --deep-shadow: #141418;
            --mid-tone: #1E1E24;
            --highlight: #F5E6CC;
            --warm-amber: #C9924A;
            --cool-teal: #2A7B8B;
            --film-grain: #D4C5A9;
            --accent-coral: #E07B6D;
            --architectural-white: #FAFAF5;
            
            /* Typography Scale */
            --font-display: 'Syne', sans-serif;
            --font-body: 'Space Grotesk', sans-serif;
            --font-accent: 'Playfair Display', serif;
            
            /* Spacing System */
            --space-xs: 0.5rem;
            --space-sm: 1rem;
            --space-md: 2rem;
            --space-lg: 4rem;
            --space-xl: 8rem;
            
            /* Color Grading Filters */
            --grade-warm: sepia(0.2) saturate(1.4) hue-rotate(-5deg);
            --grade-cool: saturate(0.8) brightness(1.1) hue-rotate(15deg);
            --grade-cinematic: contrast(1.2) saturate(1.1) brightness(0.95);
        }

        /* ==================== RESET & BASE ==================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        body {
            font-family: var(--font-body);
            background: var(--cinema-black);
            color: var(--highlight);
            overflow-x: hidden;
            cursor: none;
        }

        /* Custom Cursor */
        .cursor {
            width: 20px;
            height: 20px;
            border: 2px solid var(--warm-amber);
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 10000;
            transition: transform 0.15s ease, background 0.15s ease;
            mix-blend-mode: difference;
        }

        .cursor-dot {
            width: 6px;
            height: 6px;
            background: var(--warm-amber);
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 10001;
            transition: transform 0.08s ease;
        }

        .cursor.active {
            transform: scale(2.5);
            background: rgba(201, 146, 74, 0.15);
        }

        /* Film Grain Overlay */
        .film-grain {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
            opacity: 0.04;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
            animation: grain 0.5s steps(10) infinite;
        }

        @keyframes grain {
            0%, 100% { transform: translate(0, 0); }
            10% { transform: translate(-5%, -10%); }
            30% { transform: translate(3%, -15%); }
            50% { transform: translate(12%, 9%); }
            70% { transform: translate(9%, 4%); }
            90% { transform: translate(-1%, 7%); }
        }

        /* ==================== NAVIGATION ==================== */
        .nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 2rem 3rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            mix-blend-mode: difference;
        }

        .nav-logo {
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: var(--architectural-white);
            text-decoration: none;
        }

        .nav-logo span {
            color: var(--warm-amber);
        }

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

        .nav-links a {
            font-family: var(--font-body);
            font-size: 0.85rem;
            font-weight: 400;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--architectural-white);
            text-decoration: none;
            position: relative;
            padding: 0.5rem 0;
            transition: color 0.3s ease;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--warm-amber);
            transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

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

        .nav-links a:hover::after {
            width: 100%;
        }

        /* Hamburger */
        .hamburger {
            display: none;
            flex-direction: column;
            gap: 6px;
            cursor: pointer;
            z-index: 1001;
        }

        .hamburger span {
            width: 30px;
            height: 2px;
            background: var(--architectural-white);
            transition: all 0.3s ease;
        }

        .hamburger.active span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }

        .hamburger.active span:nth-child(2) {
            opacity: 0;
        }

        .hamburger.active span:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -6px);
        }

        /* ==================== HERO SECTION ==================== */
        .hero {
            height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            background: 
                linear-gradient(
                    135deg,
                    rgba(10, 10, 12, 0.88) 0%,
                    rgba(20, 20, 24, 0.78) 40%,
                    rgba(30, 30, 36, 0.68) 60%,
                    rgba(10, 10, 12, 0.92) 100%
                ),
                url('../../images/optimized/arko-london-award.webp');
            background-size: cover;
            background-position: center top;
            background-attachment: scroll;
        }

        /* Cinematic Letterbox Bars */
        .letterbox-top, .letterbox-bottom {
            position: absolute;
            left: 0;
            width: 100%;
            height: 8vh;
            background: var(--cinema-black);
            z-index: 10;
        }

        .letterbox-top { top: 0; }
        .letterbox-bottom { bottom: 0; }

        /* Architectural Grid Lines */
        .grid-lines {
            position: absolute;
            inset: 0;
            z-index: 2;
            opacity: 0.06;
        }

        .grid-line-v {
            position: absolute;
            top: 0;
            width: 1px;
            height: 100%;
            background: var(--warm-amber);
        }

        .grid-line-h {
            position: absolute;
            left: 0;
            height: 1px;
            width: 100%;
            background: var(--warm-amber);
        }

        /* Hero Content */
        .hero-content {
            position: relative;
            z-index: 5;
            padding: 0 8vw;
            width: 100%;
        }

        .hero-label {
            font-family: var(--font-body);
            font-size: 0.75rem;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--warm-amber);
            margin-bottom: var(--space-md);
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s 0.5s forwards;
        }

        .hero-title {
            font-family: var(--font-display);
            font-size: clamp(3rem, 10vw, 9rem);
            font-weight: 800;
            line-height: 0.9;
            letter-spacing: -0.03em;
            color: var(--architectural-white);
            margin-bottom: var(--space-md);
        }

        .hero-title .line {
            display: block;
            overflow: hidden;
        }

        .hero-title .line span {
            display: inline-block;
            opacity: 0;
            transform: translateY(100%);
            animation: slideUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .hero-title .line:nth-child(1) span { animation-delay: 0.3s; }
        .hero-title .line:nth-child(2) span { animation-delay: 0.5s; }
        .hero-title .line:nth-child(3) span { animation-delay: 0.7s; }

        .hero-title .accent {
            color: var(--warm-amber);
            font-style: italic;
            font-family: var(--font-accent);
        }

        .hero-subtitle {
            font-family: var(--font-body);
            font-size: clamp(0.9rem, 1.5vw, 1.1rem);
            font-weight: 300;
            line-height: 1.8;
            color: var(--film-grain);
            max-width: 500px;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1s 1s forwards;
        }

        /* Scroll Indicator */
        .scroll-indicator {
            position: absolute;
            bottom: 12vh;
            right: 8vw;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            opacity: 0;
            animation: fadeInUp 1s 1.5s forwards;
        }

        .scroll-indicator span {
            font-family: var(--font-body);
            font-size: 0.65rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            writing-mode: vertical-rl;
            color: var(--film-grain);
        }

        .scroll-line {
            width: 1px;
            height: 60px;
            background: var(--warm-amber);
            position: relative;
            overflow: hidden;
        }

        .scroll-line::after {
            content: '';
            position: absolute;
            top: -100%;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--architectural-white);
            animation: scrollDown 2s infinite;
        }

        /* ==================== ABOUT SECTION ==================== */
        .about {
            padding: var(--space-xl) 8vw;
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: var(--deep-shadow);
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-lg);
            align-items: center;
            width: 100%;
        }

        .about-visual {
            position: relative;
            height: 70vh;
            overflow: hidden;
        }

        .about-frame {
            position: absolute;
            inset: 0;
            border: 1px solid rgba(201, 146, 74, 0.2);
            pointer-events: none;
        }

        .about-frame::before {
            content: 'ARKO';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: var(--font-display);
            font-size: 15vw;
            font-weight: 800;
            color: rgba(201, 146, 74, 0.04);
            letter-spacing: -0.05em;
            white-space: nowrap;
        }

        .portrait-container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .portrait-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            filter: var(--grade-cinematic);
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .portrait-container:hover img {
            filter: var(--grade-warm);
            transform: scale(1.05);
        }

        .portrait-container::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(
                180deg,
                transparent 50%,
                rgba(10, 10, 12, 0.6) 100%
            );
            pointer-events: none;
        }

        /* Vertical Text */
        .vertical-text {
            position: absolute;
            right: -2rem;
            top: 50%;
            transform: translateY(-50%) rotate(90deg);
            font-family: var(--font-body);
            font-size: 0.65rem;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--warm-amber);
            white-space: nowrap;
            transform-origin: center center;
        }

        .about-content {
            padding-left: var(--space-lg);
        }

        .section-label {
            font-family: var(--font-body);
            font-size: 0.7rem;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--warm-amber);
            margin-bottom: var(--space-md);
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .section-label::before {
            content: '';
            width: 40px;
            height: 1px;
            background: var(--warm-amber);
            transform-origin: left center;
            animation: arkoLabelLine 3.6s ease-in-out infinite;
        }

        @keyframes arkoLabelLine {
            0%, 100% { transform: scaleX(1); opacity: 1; }
            50% { transform: scaleX(1.6); opacity: .55; }
        }

        @media (prefers-reduced-motion: reduce) {
            .section-label::before { animation: none; }
        }

        .about-heading {
            font-family: var(--font-display);
            font-size: clamp(2rem, 4vw, 3.5rem);
            font-weight: 700;
            line-height: 1.1;
            color: var(--architectural-white);
            margin-bottom: var(--space-md);
        }

        .about-heading .highlight {
            color: var(--warm-amber);
            position: relative;
        }

        .about-text {
            font-family: var(--font-body);
            font-size: 1rem;
            font-weight: 300;
            line-height: 1.9;
            color: var(--film-grain);
            margin-bottom: var(--space-md);
        }

        .about-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-sm);
            margin-top: var(--space-md);
            padding-top: var(--space-md);
            border-top: 1px solid rgba(201, 146, 74, 0.15);
        }

        .stat {
            text-align: center;
        }

        .stat-number {
            font-family: var(--font-display);
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--warm-amber);
            line-height: 1;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            font-family: var(--font-body);
            font-size: 0.7rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--film-grain);
        }

        /* ==================== FILMOGRAPHY SECTION ==================== */
        .filmography {
            padding: var(--space-xl) 0;
            position: relative;
            background: var(--cinema-black);
            overflow: hidden;
        }

        .filmography-header {
            padding: 0 8vw;
            margin-bottom: var(--space-lg);
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

        .filmography-title {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 6vw, 5rem);
            font-weight: 800;
            line-height: 1;
            color: var(--architectural-white);
        }

        .filmography-title .number {
            font-family: var(--font-accent);
            font-size: 0.5em;
            color: var(--warm-amber);
            vertical-align: super;
            margin-right: 0.5rem;
        }

        .filmography-subtitle {
            font-family: var(--font-body);
            font-size: 0.8rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--film-grain);
            max-width: 300px;
            text-align: right;
        }

        /* Film Cards */
        .films-container {
            padding: 0 8vw;
        }

        .film-card {
            display: grid;
            grid-template-columns: 100px 1fr auto;
            gap: var(--space-md);
            align-items: center;
            padding: var(--space-md) 0;
            border-bottom: 1px solid rgba(201, 146, 74, 0.1);
            cursor: pointer;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .film-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 100%;
            background: linear-gradient(90deg, rgba(201, 146, 74, 0.08), transparent);
            transition: width 0.6s ease;
        }

        .film-card:hover {
            padding-left: var(--space-md);
        }

        .film-card:hover::before {
            width: 100%;
        }

        .film-year {
            font-family: var(--font-accent);
            font-size: 1.1rem;
            color: var(--warm-amber);
            font-style: italic;
        }

        .film-info {
            position: relative;
            z-index: 2;
        }

        .film-title {
            font-family: var(--font-display);
            font-size: clamp(1.5rem, 3vw, 2.5rem);
            font-weight: 700;
            color: var(--architectural-white);
            margin-bottom: 0.5rem;
            transition: color 0.3s ease;
        }

        .film-card:hover .film-title {
            color: var(--warm-amber);
        }

        .film-meta {
            display: flex;
            gap: var(--space-sm);
            align-items: center;
        }

        .film-tag {
            font-family: var(--font-body);
            font-size: 0.7rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--film-grain);
            padding: 0.3rem 0.8rem;
            border: 1px solid rgba(201, 146, 74, 0.2);
            border-radius: 2px;
        }

        .film-roles {
            font-family: var(--font-body);
            font-size: 0.75rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--cool-teal);
            text-align: right;
        }

        /* ==================== ARCHITECTURE SECTION ==================== */
        .architecture {
            padding: var(--space-xl) 8vw;
            position: relative;
            background: var(--deep-shadow);
            min-height: 100vh;
            background-image: 
                linear-gradient(
                    to bottom,
                    rgba(20, 20, 24, 0.97) 0%,
                    rgba(20, 20, 24, 0.92) 100%
                ),
                url('../../images/arch-interior3.webp');
            background-size: cover;
            background-position: center;
            background-attachment: scroll;
        }

        .arch-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: repeat(6, 100px);
            gap: 1rem;
            margin-top: var(--space-lg);
        }

        .arch-item {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(201, 146, 74, 0.1);
            transition: all 0.5s ease;
        }

        .arch-item:hover {
            border-color: var(--warm-amber);
            transform: scale(1.02);
            z-index: 10;
        }

        .arch-item:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 4; }
        .arch-item:nth-child(2) { grid-column: 8 / 13; grid-row: 1 / 3; }
        .arch-item:nth-child(3) { grid-column: 8 / 13; grid-row: 3 / 5; }
        .arch-item:nth-child(4) { grid-column: 1 / 5; grid-row: 4 / 7; }
        .arch-item:nth-child(5) { grid-column: 5 / 9; grid-row: 4 / 7; }
        .arch-item:nth-child(6) { grid-column: 9 / 13; grid-row: 5 / 7; }

        .arch-item-bg {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            transition: transform 0.8s ease, filter 0.6s ease;
            filter: var(--grade-cinematic);
        }

        .arch-item:hover .arch-item-bg {
            transform: scale(1.1);
            filter: var(--grade-warm);
        }

        .arch-item-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, var(--cinema-black) 0%, transparent 60%);
            display: flex;
            align-items: flex-end;
            padding: var(--space-sm);
        }

        .arch-item-label {
            font-family: var(--font-body);
            font-size: 0.65rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--warm-amber);
        }

        .arch-item-title {
            font-family: var(--font-display);
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--architectural-white);
            margin-top: 0.3rem;
        }

        /* Large Title Overlay */
        .arch-title-overlay {
            position: absolute;
            bottom: 5%;
            left: -2%;
            font-family: var(--font-display);
            font-size: clamp(4rem, 12vw, 10rem);
            font-weight: 800;
            color: rgba(201, 146, 74, 0.03);
            letter-spacing: -0.03em;
            white-space: nowrap;
            pointer-events: none;
        }

        /* ==================== EDUCATION & AWARDS ==================== */
        .credentials {
            padding: var(--space-xl) 8vw;
            background: var(--cinema-black);
            position: relative;
        }

        .credentials-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-lg);
            margin-top: var(--space-lg);
        }

        .credential-block {
            padding: var(--space-md);
            border: 1px solid rgba(201, 146, 74, 0.1);
            position: relative;
        }

        .credential-block::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -1px;
            width: 60px;
            height: 3px;
            background: var(--warm-amber);
        }

        .credential-block h3 {
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--architectural-white);
            margin-bottom: var(--space-sm);
        }

        .credential-item {
            padding: var(--space-sm) 0;
            border-bottom: 1px solid rgba(201, 146, 74, 0.05);
        }

        .credential-item:last-child {
            border-bottom: none;
        }

        .credential-item .institution {
            font-family: var(--font-body);
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--architectural-white);
        }

        .credential-item .degree {
            font-family: var(--font-body);
            font-size: 0.85rem;
            color: var(--warm-amber);
            margin-top: 0.25rem;
        }

        .credential-item .year {
            font-family: var(--font-accent);
            font-size: 0.8rem;
            font-style: italic;
            color: var(--film-grain);
            margin-top: 0.25rem;
        }

        /* Award Badge */
        .award-badge {
            display: flex;
            align-items: flex-start;
            gap: var(--space-sm);
            padding: var(--space-sm);
            margin-top: var(--space-sm);
            background: rgba(201, 146, 74, 0.05);
            border-left: 2px solid var(--warm-amber);
        }

        .award-icon {
            font-size: 1.5rem;
            line-height: 1;
        }

        .award-text {
            font-family: var(--font-body);
            font-size: 0.85rem;
            line-height: 1.6;
            color: var(--film-grain);
        }

        .award-text strong {
            color: var(--warm-amber);
            font-weight: 600;
        }

        /* ==================== CONTACT SECTION ==================== */
        .contact {
            padding: var(--space-xl) 8vw;
            background: var(--deep-shadow);
            position: relative;
            overflow: hidden;
            background-image: 
                linear-gradient(
                    to right,
                    rgba(20, 20, 24, 0.95) 0%,
                    rgba(20, 20, 24, 0.85) 50%,
                    rgba(20, 20, 24, 0.75) 100%
                ),
                url('../../images/cinematic-portrait.jpg');
            background-size: cover;
            background-position: center;
        }

        .contact-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-lg);
            align-items: start;
        }

        .contact-heading {
            font-family: var(--font-display);
            font-size: clamp(3rem, 7vw, 6rem);
            font-weight: 800;
            line-height: 1;
            color: var(--architectural-white);
            margin-bottom: var(--space-md);
        }

        .contact-heading .line {
            display: block;
        }

        .contact-heading .accent {
            color: var(--warm-amber);
            font-family: var(--font-accent);
            font-style: italic;
        }

        .contact-info {
            padding-top: var(--space-lg);
        }

        .contact-block {
            margin-bottom: var(--space-md);
        }

        .contact-block-label {
            font-family: var(--font-body);
            font-size: 0.7rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--warm-amber);
            margin-bottom: 0.5rem;
        }

        .contact-block a, .contact-block p {
            font-family: var(--font-body);
            font-size: 1rem;
            color: var(--architectural-white);
            text-decoration: none;
            transition: color 0.3s ease;
            display: block;
            line-height: 1.6;
        }

        .contact-block a:hover {
            color: var(--warm-amber);
        }

        .social-links {
            display: flex;
            gap: var(--space-sm);
            margin-top: var(--space-md);
        }

        .social-link {
            width: 50px;
            height: 50px;
            border: 1px solid rgba(201, 146, 74, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: var(--film-grain);
            font-size: 0.75rem;
            font-family: var(--font-body);
            letter-spacing: 0.05em;
            transition: all 0.3s ease;
        }

        .social-link:hover {
            background: var(--warm-amber);
            color: var(--cinema-black);
            border-color: var(--warm-amber);
        }

        /* Large Background Text */
        .contact-bg-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: var(--font-display);
            font-size: 20vw;
            font-weight: 800;
            color: rgba(201, 146, 74, 0.02);
            white-space: nowrap;
            pointer-events: none;
            letter-spacing: -0.05em;
        }

        /* ==================== FOOTER ==================== */
        .footer {
            padding: var(--space-md) 8vw;
            background: var(--cinema-black);
            border-top: 1px solid rgba(201, 146, 74, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .footer-text {
            font-family: var(--font-body);
            font-size: 0.75rem;
            color: var(--film-grain);
            letter-spacing: 0.1em;
        }

        .footer-text span {
            color: var(--warm-amber);
        }

        /* ==================== ANIMATIONS ==================== */
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes scrollDown {
            0% { top: -100%; }
            100% { top: 200%; }
        }

        /* Reveal Animation */
        .reveal {
            opacity: 0;
            transform: translateY(60px);
            transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* ==================== MOBILE RESPONSIVE ==================== */
        @media (max-width: 1024px) {
            .about-grid {
                grid-template-columns: 1fr;
                gap: var(--space-md);
            }

            .about-visual {
                height: 50vh;
            }

            .about-content {
                padding-left: 0;
            }

            .credentials-grid {
                grid-template-columns: 1fr;
            }

            .contact-content {
                grid-template-columns: 1fr;
            }

            .arch-grid {
                grid-template-columns: repeat(6, 1fr);
                grid-template-rows: repeat(6, 80px);
            }

            .arch-item:nth-child(1) { grid-column: 1 / 7; grid-row: 1 / 3; }
            .arch-item:nth-child(2) { grid-column: 1 / 4; grid-row: 3 / 5; }
            .arch-item:nth-child(3) { grid-column: 4 / 7; grid-row: 3 / 5; }
            .arch-item:nth-child(4) { grid-column: 1 / 4; grid-row: 5 / 7; }
            .arch-item:nth-child(5) { grid-column: 4 / 7; grid-row: 5 / 7; }
            .arch-item:nth-child(6) { display: none; }
        }

        @media (max-width: 768px) {
            .nav {
                padding: 1.5rem 2rem;
            }

            .nav-links {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                background: var(--cinema-black);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 2rem;
            }

            .nav-links.active {
                display: flex;
            }

            .hamburger {
                display: flex;
            }

            .hero-content {
                padding: 0 5vw;
            }

            .about, .filmography-header, .films-container,
            .architecture, .credentials, .contact, .footer {
                padding-left: 5vw;
                padding-right: 5vw;
            }

            .film-card {
                grid-template-columns: 60px 1fr;
                gap: var(--space-sm);
            }

            .film-roles {
                display: none;
            }

            .about-stats {
                grid-template-columns: repeat(3, 1fr);
                gap: 0.5rem;
            }

            .stat-number {
                font-size: 1.8rem;
            }

            .contact-heading {
                font-size: clamp(2.5rem, 10vw, 4rem);
            }

            .footer {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }
        }

        /* ==================== SPECIAL EFFECTS ==================== */
        /* Cinematic Vignette */
        .vignette {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 9998;
            background: radial-gradient(ellipse at center, transparent 50%, rgba(10, 10, 12, 0.4) 100%);
        }

        /* Horizontal Line Accent */
        .line-accent {
            width: 80px;
            height: 2px;
            background: linear-gradient(90deg, var(--warm-amber), var(--cool-teal));
            margin: var(--space-md) 0;
        }

        /* ==================== COLOR DREDGING / GRADING SECTION ==================== */
        .color-grade-showcase {
            position: relative;
            padding: var(--space-lg) 0;
            overflow: hidden;
        }

        .grade-strip {
            display: flex;
            height: 4px;
            width: 100%;
        }

        .grade-strip div {
            flex: 1;
            transition: all 0.6s ease;
        }

        .grade-strip div:nth-child(1) { background: var(--warm-amber); }
        .grade-strip div:nth-child(2) { background: var(--cool-teal); }
        .grade-strip div:nth-child(3) { background: var(--accent-coral); }
        .grade-strip div:nth-child(4) { background: var(--film-grain); }
        .grade-strip div:nth-child(5) { background: var(--highlight); }

        /* ==================== PRELOADER ==================== */
        .preloader {
            position: fixed;
            inset: 0;
            background: var(--cinema-black);
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            transition: opacity 0.8s ease, visibility 0.8s ease;
        }

        .preloader.hidden {
            opacity: 0;
            visibility: hidden;
        }

        .preloader-text {
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--architectural-white);
            letter-spacing: 0.3em;
            text-transform: uppercase;
        }

        .preloader-bar {
            width: 200px;
            height: 2px;
            background: rgba(201, 146, 74, 0.2);
            margin-top: 2rem;
            position: relative;
            overflow: hidden;
        }

        .preloader-bar::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: var(--warm-amber);
            animation: load 2s forwards;
        }

        @keyframes load {
            0% { width: 0; }
            100% { width: 100%; }
        }

        /* ==================== ASPECT RATIO BADGE ==================== */
        .aspect-badge {
            position: absolute;
            top: var(--space-sm);
            right: var(--space-sm);
            font-family: var(--font-body);
            font-size: 0.6rem;
            letter-spacing: 0.15em;
            color: var(--film-grain);
            background: rgba(10, 10, 12, 0.8);
            padding: 0.3rem 0.6rem;
            border: 1px solid rgba(201, 146, 74, 0.2);
        }
    

/* ===== Multi-page extension + front-end motion ===== */
:root { --page-pad: clamp(1.25rem, 7vw, 8rem); }
body.arko-inner-page { cursor: none; }
.arko-progress { position: fixed; top:0; left:0; width:0; height:2px; background:var(--warm-amber); z-index:10050; pointer-events:none; }
.arko-page-wash { position:fixed; inset:0; z-index:10040; pointer-events:none; background:var(--cinema-black); transform:translateY(-100%); }
.nav.arko-nav-solid { mix-blend-mode:normal; background:linear-gradient(to bottom, rgba(10,10,12,.94), rgba(10,10,12,.72), transparent); }
.nav-links a.current-page { color:var(--warm-amber); }
.inner-hero { min-height:78vh; position:relative; display:flex; align-items:flex-end; overflow:hidden; padding:11rem var(--page-pad) 6rem; background:var(--cinema-black); }
.inner-hero-media { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.08); }
.inner-hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,10,12,.97) 5%, rgba(10,10,12,.72) 48%, rgba(10,10,12,.25) 100%), linear-gradient(to top, var(--cinema-black), transparent 45%); }
.inner-hero-grid { position:absolute; inset:0; opacity:.08; background-image:linear-gradient(rgba(245,230,204,.28) 1px, transparent 1px),linear-gradient(90deg, rgba(245,230,204,.28) 1px, transparent 1px); background-size:12.5vw 12.5vw; }
.inner-hero-content { position:relative; z-index:3; max-width:1050px; }
.inner-kicker { font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--warm-amber); margin-bottom:1.25rem; }
.inner-title { font-family:var(--font-display); font-size:clamp(3.4rem, 9vw, 9rem); line-height:.84; letter-spacing:-.055em; text-transform:uppercase; }
.inner-title em { font-family:var(--font-accent); font-weight:400; color:var(--warm-amber); text-transform:none; }
.inner-lede { max-width:730px; margin-top:2rem; color:var(--film-grain); font-size:clamp(1rem,1.5vw,1.25rem); line-height:1.8; }
.page-section { position:relative; padding:clamp(5rem, 9vw, 9rem) var(--page-pad); background:var(--cinema-black); }
.page-section.alt { background:var(--deep-shadow); }
.page-section.soft { background:var(--mid-tone); }
.section-shell { max-width:1400px; margin:0 auto; }
.section-topline { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.55fr); gap:4rem; align-items:end; margin-bottom:clamp(3rem,6vw,6rem); }
.section-display { font-family:var(--font-display); font-size:clamp(2.6rem,6vw,6.3rem); line-height:.92; letter-spacing:-.045em; }
.section-display .accent { color:var(--warm-amber); font-family:var(--font-accent); font-style:italic; font-weight:400; }
.section-copy { color:var(--film-grain); line-height:1.85; font-size:.98rem; max-width:650px; }
.section-copy + .section-copy { margin-top:1.25rem; }
.motion-rule { width:80px; height:2px; background:var(--warm-amber); margin:1.5rem 0 2rem; transform-origin:left; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(201,146,74,.17); border:1px solid rgba(201,146,74,.17); }
.feature-card { background:var(--cinema-black); padding:clamp(1.6rem,3vw,3rem); min-height:280px; position:relative; overflow:hidden; transition:transform .5s cubic-bezier(.2,.7,.2,1), background .4s ease; }
.feature-card:hover { background:#111116; }
.feature-index { font-family:var(--font-display); font-size:.65rem; letter-spacing:.2em; color:var(--warm-amber); }
.feature-card h3 { font-family:var(--font-display); font-size:clamp(1.5rem,2.2vw,2.4rem); line-height:1.05; margin:4rem 0 1rem; }
.feature-card p { color:var(--film-grain); line-height:1.75; font-size:.9rem; }
.feature-arrow { position:absolute; right:1.5rem; bottom:1.5rem; font-size:1.5rem; color:var(--warm-amber); transition:transform .35s ease; }
.feature-card:hover .feature-arrow { transform:translate(6px,-6px); }
.split-story { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,7vw,8rem); align-items:center; }
.story-image { position:relative; min-height:650px; overflow:hidden; }
.story-image img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; filter:var(--grade-cinematic); transform:scale(1.05); }
.story-image::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(201,146,74,.18); pointer-events:none; }
.story-image .frame-mark { position:absolute; inset:1.25rem; border:1px solid rgba(245,230,204,.22); z-index:2; }
.story-stack { display:grid; gap:2rem; }
.story-block { padding:0 0 2rem; border-bottom:1px solid rgba(201,146,74,.16); }
.story-block small { display:block; color:var(--warm-amber); letter-spacing:.22em; text-transform:uppercase; margin-bottom:.75rem; }
.story-block h3 { font-family:var(--font-display); font-size:clamp(1.6rem,3vw,3rem); margin-bottom:.75rem; }
.story-block p { color:var(--film-grain); line-height:1.8; }
.timeline { border-top:1px solid rgba(201,146,74,.2); }
.timeline-row { display:grid; grid-template-columns:150px 1fr 1fr; gap:2rem; padding:2rem 0; border-bottom:1px solid rgba(201,146,74,.14); align-items:start; }
.timeline-year { color:var(--warm-amber); font-family:var(--font-display); font-size:1.2rem; }
.timeline-row h3 { font-family:var(--font-display); font-size:1.35rem; }
.timeline-row p { color:var(--film-grain); line-height:1.65; }
.marquee { overflow:hidden; border-block:1px solid rgba(201,146,74,.18); background:var(--deep-shadow); }
.marquee-track { display:flex; width:max-content; gap:3rem; padding:1.1rem 0; animation:arkoMarquee 28s linear infinite; }
.marquee-track span { font-family:var(--font-display); font-size:.72rem; letter-spacing:.25em; text-transform:uppercase; white-space:nowrap; color:var(--film-grain); }
.marquee-track b { color:var(--warm-amber); font-weight:400; }
@keyframes arkoMarquee { to { transform:translateX(-50%); } }
.gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; }
.gallery-shot { position:relative; overflow:hidden; min-height:280px; background:var(--mid-tone); }
.gallery-shot:nth-child(1),.gallery-shot:nth-child(4){ grid-column:span 7; min-height:520px; }
.gallery-shot:nth-child(2),.gallery-shot:nth-child(3){ grid-column:span 5; }
.gallery-shot img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .6s ease; filter:var(--grade-cinematic); }
.gallery-shot:hover img { transform:scale(1.06); filter:var(--grade-warm); }
.gallery-shot figcaption { position:absolute; left:1.25rem; bottom:1.25rem; z-index:2; background:rgba(10,10,12,.76); padding:.55rem .8rem; color:var(--architectural-white); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; }
.film-list-pro { border-top:1px solid rgba(201,146,74,.2); }
.film-row-pro { display:grid; grid-template-columns:110px 1fr 1fr 44px; gap:2rem; padding:2.3rem 0; border-bottom:1px solid rgba(201,146,74,.14); align-items:center; transition:padding .35s ease, background .35s ease; }
.film-row-pro:hover { padding-left:1rem; padding-right:1rem; background:rgba(201,146,74,.035); }
.film-row-pro .yr { color:var(--warm-amber); font-family:var(--font-display); }
.film-row-pro h3 { font-family:var(--font-display); font-size:clamp(1.55rem,3vw,3.2rem); line-height:1; }
.film-row-pro .roles { color:var(--film-grain); line-height:1.6; }
.film-row-pro .arr { color:var(--warm-amber); font-size:1.4rem; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(201,146,74,.15); }
.process-step { background:var(--deep-shadow); padding:2.3rem; min-height:330px; }
.process-step .num { color:var(--warm-amber); font-family:var(--font-display); font-size:.7rem; letter-spacing:.16em; }
.process-step h3 { font-family:var(--font-display); margin:5rem 0 1rem; font-size:1.75rem; }
.process-step p { color:var(--film-grain); line-height:1.75; font-size:.9rem; }
.quote-panel { position:relative; padding:clamp(4rem,8vw,8rem); overflow:hidden; background:var(--mid-tone); }
.quote-panel blockquote { max-width:1000px; font-family:var(--font-accent); font-size:clamp(2.1rem,5vw,5.4rem); line-height:1.08; color:var(--architectural-white); position:relative; z-index:2; }
.quote-panel blockquote span { color:var(--warm-amber); }
.quote-panel .quote-ghost { position:absolute; right:-.02em; bottom:-.3em; font-size:32vw; font-family:var(--font-display); color:rgba(201,146,74,.035); line-height:1; }
.contact-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(201,146,74,.16); }
.contact-card { background:var(--cinema-black); padding:2.5rem; min-height:260px; }
.contact-card .label { color:var(--warm-amber); text-transform:uppercase; letter-spacing:.2em; font-size:.65rem; }
.contact-card h3 { font-family:var(--font-display); font-size:1.8rem; margin:3.5rem 0 .8rem; }
.contact-card a,.contact-card p { color:var(--film-grain); line-height:1.8; text-decoration:none; }
.contact-card a:hover { color:var(--warm-amber); }
.cta-band { display:flex; justify-content:space-between; align-items:center; gap:2rem; padding:clamp(2rem,5vw,5rem); border:1px solid rgba(201,146,74,.2); background:linear-gradient(115deg, rgba(201,146,74,.12), rgba(42,123,139,.06)); }
.cta-band h2 { font-family:var(--font-display); font-size:clamp(2rem,4.5vw,5rem); max-width:800px; line-height:.95; }
.arko-button { display:inline-flex; align-items:center; gap:.8rem; padding:1rem 1.35rem; border:1px solid var(--warm-amber); color:var(--architectural-white); text-decoration:none; text-transform:uppercase; font-size:.66rem; letter-spacing:.18em; white-space:nowrap; transition:background .3s ease,color .3s ease,transform .3s ease; }
.arko-button:hover { background:var(--warm-amber); color:var(--cinema-black); }
.page-portal { padding:clamp(5rem,9vw,9rem) 8vw; background:var(--deep-shadow); }
.page-portal-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(201,146,74,.18); border:1px solid rgba(201,146,74,.18); margin-top:3rem; }
.page-portal-card { min-height:340px; background:var(--cinema-black); color:inherit; text-decoration:none; padding:2rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.page-portal-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(201,146,74,.17), transparent 38%); opacity:0; transition:opacity .35s ease; }
.page-portal-card:hover::before { opacity:1; }
.page-portal-card small,.page-portal-card h3,.page-portal-card p,.page-portal-card span { position:relative; z-index:2; }
.page-portal-card small { color:var(--warm-amber); letter-spacing:.2em; text-transform:uppercase; }
.page-portal-card h3 { font-family:var(--font-display); font-size:2rem; margin-top:auto; margin-bottom:1rem; }
.page-portal-card p { color:var(--film-grain); line-height:1.65; font-size:.85rem; }
.page-portal-card span { margin-top:1.2rem; color:var(--warm-amber); }
[data-reveal="clip"] { clip-path:inset(0 0 100% 0); transition:clip-path 1.1s cubic-bezier(.2,.75,.2,1); }
[data-reveal="clip"].is-visible { clip-path:inset(0 0 0 0); }
[data-reveal="up"] { opacity:0; transform:translateY(42px); transition:opacity .8s ease,transform .9s cubic-bezier(.2,.75,.2,1); }
[data-reveal="up"].is-visible { opacity:1; transform:none; }
[data-reveal="line"] { transform:scaleX(0); transition:transform 1s cubic-bezier(.2,.75,.2,1); transform-origin:left; }
[data-reveal="line"].is-visible { transform:scaleX(1); }
.parallax-media { will-change:transform; }
@media (max-width: 980px){
  .section-topline,.split-story{grid-template-columns:1fr;}
  .feature-grid,.contact-cards{grid-template-columns:1fr 1fr;}
  .process-grid,.page-portal-grid{grid-template-columns:1fr 1fr;}
  .timeline-row{grid-template-columns:100px 1fr;}.timeline-row p{grid-column:2;}
  .film-row-pro{grid-template-columns:80px 1fr 44px}.film-row-pro .roles{grid-column:2}.film-row-pro .arr{grid-column:3;grid-row:1/3;}
  .story-image{min-height:520px;}
}
@media (max-width: 640px){
  .inner-hero{min-height:68vh;padding-top:9rem;}
  .feature-grid,.contact-cards,.process-grid,.page-portal-grid{grid-template-columns:1fr;}
  .gallery-shot,.gallery-shot:nth-child(n){grid-column:1/-1;min-height:300px;}
  .timeline-row{grid-template-columns:1fr;gap:.6rem}.timeline-row p{grid-column:1;}
  .film-row-pro{grid-template-columns:65px 1fr 30px;gap:1rem}.film-row-pro .roles{grid-column:2;}
  .cta-band{align-items:flex-start;flex-direction:column;}
  body.arko-inner-page{cursor:auto}.cursor,.cursor-dot{display:none!important;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important}.marquee-track{animation:none!important}[data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}.parallax-media{transform:none!important}.film-grain{animation:none!important}
}

/* ===== Performance + responsive pass 2.1 ===== */
html, body { max-width: 100%; }
img { display:block; max-width:100%; }
.film-grain { animation:none !important; opacity:.018; transform:none !important; }
.hero-bg { background-attachment:scroll !important; background-image:linear-gradient(135deg,rgba(10,10,12,.88) 0%,rgba(20,20,24,.78) 40%,rgba(30,30,36,.68) 60%,rgba(10,10,12,.92) 100%),url('../../images/optimized/arko-london-award.webp') !important; }
.architecture { background-attachment:scroll !important; }
.parallax-media { will-change:auto; }
[data-tilt], [data-magnetic] { will-change:auto; }

@media (hover:none), (pointer:coarse) {
  body, body.arko-inner-page { cursor:auto !important; }
  .cursor,.cursor-dot { display:none !important; }
  .feature-card,.page-portal-card,.contact-card,[data-tilt],[data-magnetic] { transform:none !important; }
}

@media (max-width: 1024px) {
  :root { --space-lg:3rem; --space-xl:5.5rem; --page-pad:clamp(1.15rem,5vw,3.5rem); }
  .film-grain { display:none !important; }
  .vignette { opacity:.55; }
  .hero,.inner-hero { min-height:100svh; }
  .hero { height:auto; }
  .hero-bg,.inner-hero-media { background-attachment:scroll !important; transform:none !important; }
  .nav { padding:1.2rem 1.5rem; mix-blend-mode:normal; background:linear-gradient(to bottom,rgba(10,10,12,.92),rgba(10,10,12,.58),transparent); }
  .nav-links { gap:1.4rem; }
  .about-visual { min-height:440px; height:55svh; max-height:620px; }
  .arch-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-template-rows:none !important; gap:1rem; }
  .arch-item,.arch-item:nth-child(n) { grid-column:auto !important; grid-row:auto !important; display:block !important; min-height:260px; }
  .arch-item:nth-child(1) { grid-column:1/-1 !important; min-height:340px; }
  .film-roles { display:block !important; }
  .story-image { min-height:480px; }
  .process-step,.feature-card,.page-portal-card,.contact-card { min-height:0; }
  .page-section,.page-portal { padding-top:clamp(4rem,7vw,6rem); padding-bottom:clamp(4rem,7vw,6rem); }
}

@media (max-width: 768px) {
  :root { --space-md:1.35rem; --space-lg:2.5rem; --space-xl:4.25rem; }
  html { scroll-padding-top:72px; }
  .nav { padding:1rem 1.1rem; }
  .nav-logo { font-size:1.25rem; }
  .nav-links { height:100dvh; padding:5.5rem 1.25rem 2rem; overflow-y:auto; z-index:1000; }
  .nav-links a { font-size:.95rem; }
  .hamburger { min-width:44px; min-height:44px; align-items:center; justify-content:center; }
  .hero { min-height:100svh; align-items:center; padding-block:5.5rem 3rem; }
  .hero-content { padding:0 1.15rem; }
  .hero-title { font-size:clamp(2.65rem,15vw,5rem); line-height:.91; overflow-wrap:anywhere; }
  .hero-label { font-size:.65rem; letter-spacing:.2em; margin-bottom:1.2rem; }
  .hero-subtitle { font-size:.96rem; line-height:1.65; max-width:38rem; }
  .letterbox-top,.letterbox-bottom { height:3.5vh; }
  .scroll-indicator { display:none; }
  .grid-lines { opacity:.035; }
  .about,.filmography-header,.films-container,.architecture,.credentials,.contact,.footer { padding-left:1.15rem !important; padding-right:1.15rem !important; }
  .about { padding-top:4rem; padding-bottom:4rem; }
  .about-grid { gap:2.25rem; }
  .about-visual { min-height:0; height:auto; aspect-ratio:4/5; max-height:none; }
  .portrait-container { inset:1.4rem; }
  .vertical-text { display:none; }
  .about-heading,.filmography-title,.architecture-title,.credentials-title { overflow-wrap:anywhere; }
  .about-stats { grid-template-columns:1fr !important; gap:.75rem !important; }
  .stat { padding:1rem 0; border-bottom:1px solid rgba(201,146,74,.13); }
  .filmography-header { grid-template-columns:1fr !important; display:grid; gap:1.5rem; align-items:start; }
  .filmography-header > div:last-child { align-items:flex-start !important; }
  .film-card { grid-template-columns:52px minmax(0,1fr) !important; gap:.8rem 1rem !important; padding:1.35rem 0; align-items:start; }
  .film-year { grid-column:1; grid-row:1/3; }
  .film-info { min-width:0; }
  .film-title { overflow-wrap:anywhere; font-size:clamp(1.25rem,7vw,2rem); }
  .film-roles { grid-column:2; display:block !important; font-size:.8rem; line-height:1.55; text-align:left; }
  .arch-grid { grid-template-columns:1fr !important; }
  .arch-item,.arch-item:nth-child(n) { grid-column:1 !important; min-height:270px; }
  .architecture-header { display:grid !important; grid-template-columns:1fr !important; gap:1rem; }
  .credentials-grid,.contact-content { gap:1.25rem; }
  .social-links { flex-wrap:wrap; }
  .inner-hero { min-height:72svh; padding:8.5rem 1.15rem 4rem; align-items:flex-end; }
  .inner-title { font-size:clamp(2.65rem,14vw,5.5rem); line-height:.9; overflow-wrap:anywhere; }
  .inner-lede { margin-top:1.25rem; font-size:.96rem; line-height:1.65; }
  .page-section,.page-portal { padding-left:1.15rem; padding-right:1.15rem; }
  .section-topline { gap:1.5rem; margin-bottom:2.5rem; }
  .section-display { font-size:clamp(2.25rem,12vw,4rem); overflow-wrap:anywhere; }
  .feature-grid,.contact-cards,.process-grid,.page-portal-grid { grid-template-columns:1fr !important; }
  .feature-card,.contact-card,.process-step,.page-portal-card { padding:1.4rem; min-height:0; }
  .feature-card h3 { margin:2.5rem 0 .8rem; }
  .contact-card h3 { margin:2.5rem 0 .8rem; }
  .process-step h3 { margin:2.8rem 0 .8rem; }
  .page-portal-card { min-height:245px; }
  .split-story { gap:2rem; }
  .story-image { min-height:0; aspect-ratio:4/5; }
  .timeline-row { padding:1.35rem 0; }
  .film-row-pro { grid-template-columns:55px minmax(0,1fr) 26px !important; gap:.7rem; padding:1.35rem 0; }
  .film-row-pro h3 { overflow-wrap:anywhere; }
  .film-row-pro .roles { grid-column:2 !important; display:block !important; font-size:.84rem; }
  .gallery-grid { grid-template-columns:1fr !important; }
  .gallery-shot,.gallery-shot:nth-child(n) { grid-column:1 !important; min-height:0; aspect-ratio:4/3; }
  .quote-panel { padding:3rem 1.15rem; }
  .quote-panel blockquote { font-size:clamp(2rem,10vw,3.4rem); }
  .cta-band { padding:1.5rem; }
  .cta-band h2 { font-size:clamp(2rem,10vw,3.6rem); }
  .arko-button { white-space:normal; text-align:center; justify-content:center; width:100%; }
  .footer { padding-top:1.4rem; padding-bottom:1.4rem; }
}

@media (max-width: 420px) {
  .hero-title { font-size:clamp(2.35rem,14.5vw,3.9rem); }
  .hero-subtitle { font-size:.9rem; }
  .inner-title { font-size:clamp(2.35rem,13.5vw,4rem); }
  .film-card { grid-template-columns:1fr !important; }
  .film-year,.film-info,.film-roles { grid-column:1 !important; grid-row:auto !important; }
  .film-year { margin-bottom:.2rem; }
  .film-row-pro { grid-template-columns:1fr 24px !important; }
  .film-row-pro .yr,.film-row-pro h3,.film-row-pro .roles { grid-column:1 !important; }
  .film-row-pro .arr { grid-column:2 !important; grid-row:1/4 !important; }
  .about-stats { grid-template-columns:1fr !important; }
}


/* Contact form (functions.php: arko_portfolio_contact_form / [arko_contact_form]) */
.arko-contact-form-wrap { max-width:640px; }
.arko-contact-form { display:flex; flex-direction:column; gap:1.1rem; margin-top:1.5rem; }
.arko-form-row { display:flex; flex-direction:column; gap:.5rem; }
.arko-form-row label {
  font-family:var(--font-body); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--warm-amber);
}
.arko-form-row input,
.arko-form-row textarea {
  background:var(--deep-shadow); border:1px solid rgba(245,230,204,.16); color:var(--architectural-white);
  font-family:var(--font-body); font-size:.95rem; padding:.85rem 1rem; border-radius:2px;
  transition:border-color .25s ease, background .25s ease;
}
.arko-form-row input:focus,
.arko-form-row textarea:focus,
.arko-form-row select:focus {
  outline:none; border-color:var(--warm-amber); background:var(--mid-tone);
}
.arko-form-row select {
  background:var(--deep-shadow); border:1px solid rgba(245,230,204,.16); color:var(--architectural-white);
  font-family:var(--font-body); font-size:.95rem; padding:.85rem 1rem; border-radius:2px;
}
.arko-form-row-split { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:600px) { .arko-form-row-split { grid-template-columns:1fr; } }
.arko-contact-form textarea { resize:vertical; min-height:130px; }
.arko-hp-field { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.arko-contact-form button.arko-button { align-self:flex-start; background:none; cursor:pointer; font-family:var(--font-body); }
.arko-form-notice {
  padding:.9rem 1.1rem; border-radius:2px; font-size:.85rem; margin-bottom:1rem;
}
.arko-form-success { border:1px solid var(--cool-teal); color:var(--architectural-white); background:rgba(42,123,139,.12); }
.arko-form-error { border:1px solid var(--accent-coral); color:var(--architectural-white); background:rgba(224,123,109,.12); }
@media (max-width:600px) { .arko-contact-form-wrap { max-width:100%; } }