/* ==========================================================================
   StarMaker Talent Agency - Custom CSS
   A cinematic, high-end editorial website layout.
   build: 2026-05-05-deploy-recovery
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Variables & Foundations
-------------------------------------------------------------------------- */
:root {
    /* Colors - Light Editorial Theme */
    --c-black: #ffffff;          /* primary background (was deep black) */
    --c-dark-gray: #f7f6f3;      /* alternating section bg */
    --c-charcoal: #f0eee9;       /* card/footer bg */
    --c-border: rgba(0, 0, 0, 0.08);

    --c-gold: #c6a84c;
    /* A softer, more premium Champagne Gold */
    --c-gold-hover: #a8893a;
    --c-gold-light: rgba(198, 168, 76, 0.12);

    --c-white: #111111;          /* primary text (was white) */
    --c-off-white: #1a1a1a;      /* body text */
    --c-text-muted: #6b6b6b;
    --c-text-darker: #999999;

    /* Typography */
    --font-heading: 'Cormorant Garamond', serif;
    /* More dramatic, cinematic serif */
    --font-body: 'Inter', sans-serif;
    --font-mono: 'Space Mono', monospace;

    /* Fluid Spacing (Scales perfectly on Mobile -> Desktop) */
    --sp-xs: clamp(0.5rem, 1vw, 0.75rem);
    --sp-sm: clamp(0.75rem, 1.5vw, 1.25rem);
    --sp-md: clamp(1.5rem, 3vw, 2.5rem);
    --sp-lg: clamp(3rem, 6vw, 5rem);
    --sp-xl: clamp(4rem, 10vw, 8rem);

    /* Transitions */
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast: 0.3s var(--ease-smooth);
    --t-normal: 0.6s var(--ease-smooth);
    --t-slow: 1.2s var(--ease-smooth);

    /* Layout */
    --container-max: 1300px;
    /* Slightly narrower for editorial feel */
    --sidebar-w: 280px;

    /* Z-Index Hierarchy */
    --z-bg: -1;
    --z-base: 1;
    --z-overlay: 10;
    --z-header: 100;
    --z-cursor: 9999;
}

/* --------------------------------------------------------------------------
   2. Reset & Global Styles
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    background-color: var(--c-black);
    color: var(--c-off-white);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.no-scroll {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    /* Editorial look */
    color: var(--c-white);
    line-height: 1.1;
    margin-bottom: var(--sp-sm);
}

p {
    margin-bottom: var(--sp-md);
    color: var(--c-text-muted);
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--t-fast);
}

a:hover {
    color: var(--c-gold);
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

ul,
ol {
    list-style: none;
}

button {
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   4. Typography Utilities
-------------------------------------------------------------------------- */
.h-giant {
    font-size: clamp(3rem, 8vw, 8rem);
    letter-spacing: -0.02em;
    line-height: 1;
}

.h-large {
    font-size: clamp(2.5rem, 5vw, 5rem);
}

.h-medium {
    font-size: clamp(2rem, 3vw, 3rem);
}

.text-gold {
    color: var(--c-gold);
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.text-small {
    font-size: 0.875rem;
    color: var(--c-text-darker);
}

.gradient-text {
    background: linear-gradient(135deg, var(--c-gold), #111);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   5. Layout & Containers
-------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 5%;
}

.section {
    padding: var(--sp-xl) 0;
    position: relative;
}

.section-dark {
    background-color: var(--c-black);
}

.section-gray {
    background-color: var(--c-dark-gray);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--sp-md);
}

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

.grid-3 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--sp-md);
}

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

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

.grid-4 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--sp-md);
}

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

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

/* --------------------------------------------------------------------------
   6. Header & Navigation (Cinematic glassmorphism)
-------------------------------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 0;
    /* Sits ABOVE the mobile nav (z:100) so the hamburger / X stays visible
       and clickable when the menu is open. The hamburger is inside this
       header, and its own z-index can't escape this stacking context. */
    z-index: calc(var(--z-header) + 20);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--c-border);
    transition: var(--t-normal);
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-logo {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--c-white);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: var(--z-header);
    /* Ensuring logo stays above the carousel */
}

.brand-logo span {
    color: var(--c-gold);
}

/* Header logo — fixed bar height, wide horizontal footprint via cover-crop.
   The source logo file is square with the wordmark in a horizontal band
   in the middle. Using object-fit: cover on a wide-but-short container
   shows only that wordmark band, so it reads larger horizontally
   without making the header bar taller. */
.brand-logo--header {
    height: 100px;
    display: flex;
    align-items: center;
}

.brand-logo--header img {
    display: block;
    height: 100px;
    width: 280px;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .brand-logo--header,
    .brand-logo--header img {
        height: 80px;
    }

    .brand-logo--header img {
        width: 220px;
    }
}

/* Footer logo — same horizontal-crop technique, taller for footer breathing room */
.brand-logo--footer {
    display: inline-block;
    height: 110px;
    margin-left: -20px;
    /* pull flush with the column edge to remove the file's left whitespace */
    position: static;
    z-index: auto;
    /* Override .brand-logo's z:100 + relative positioning, which were meant
       for the header logo (to sit above the homepage carousel). On the
       footer they cause the logo to bleed through the mobile menu overlay
       because of DOM-order stacking ties. */
}

.brand-logo--footer img {
    display: block;
    height: 110px;
    width: 320px;
    object-fit: cover;
    object-position: center;
}

/* On mobile, the footer collapses to a single column — center the logo
   instead of pulling it flush left like we do on desktop. */
@media (max-width: 767px) {
    .footer-col:first-child {
        text-align: center;
    }

    .brand-logo--footer {
        margin-left: 0;
    }

    .footer-col:first-child p {
        margin-left: auto;
        margin-right: auto;
    }
}

.desktop-nav {
    display: none;
}

@media (min-width: 1024px) {
    .desktop-nav {
        display: flex;
        gap: 2.5rem;
        align-items: center;
    }
}

.desktop-nav a {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-off-white);
    position: relative;
    font-weight: 500;
}

.desktop-nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0%;
    height: 1px;
    background: var(--c-gold);
    transition: var(--t-normal);
}

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

/* Mobile Hamburger */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: calc(var(--z-header) + 10);
}

@media (min-width: 1024px) {
    .hamburger-menu {
        display: none;
    }
}

.hamburger-line {
    width: 30px;
    height: 2px;
    background-color: var(--c-white);
    transition: var(--t-fast);
}

.hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

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

.hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Nav Overlay */
.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    z-index: var(--z-header);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: var(--t-normal);
}

.mobile-nav.active {
    right: 0;
}

.mobile-nav a {
    font-family: var(--font-heading);
    font-size: 3rem;
    margin: 1rem 0;
    color: var(--c-white);
}

.mobile-nav a:hover {
    color: var(--c-gold);
    transform: translateX(10px);
}

/* --------------------------------------------------------------------------
   7. Buttons
-------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    transition: var(--t-normal);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.btn-gold {
    background-color: var(--c-gold);
    color: #111;
}

.btn-gold:hover {
    background-color: var(--c-gold-hover);
    color: #111;
}

.btn-outline {
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--c-white);
}

.btn-outline:hover {
    border-color: var(--c-gold);
    color: var(--c-gold);
}

/* Button magnetic hover effect wrapper */
.btn::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--c-gold);
    transition: var(--t-normal);
    z-index: -1;
}

.btn-outline::before {
    background: var(--c-gold-light);
}

.btn:hover::before {
    top: 0;
}

/* --------------------------------------------------------------------------
   8. Hero Section (Canvas + Parallax)
-------------------------------------------------------------------------- */
.hero {
    height: 100vh;
    min-height: 700px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #111;
}

#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-bg);
    opacity: 0.6;
}

.hero-content {
    text-align: center;
    position: relative;
    z-index: var(--z-base);
    max-width: 1000px;
}

.hero-subtitle {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--c-gold);
    margin-bottom: 2rem;
    display: block;
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--c-white);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0.5;
    transition: var(--t-normal);
}

.hero-scroll-indicator:hover {
    opacity: 1;
}

.scroll-line {
    width: 1px;
    height: 50px;
    background-color: var(--c-border);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 50%;
    background: var(--c-gold);
    animation: scrollDown 2s infinite ease-in-out;
}

@keyframes scrollDown {
    0% {
        top: -50px;
    }

    100% {
        top: 50px;
    }
}

/* --------------------------------------------------------------------------
   9. Talent Grid & Actor Cards (Premium cinematic style)
-------------------------------------------------------------------------- */
.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: var(--sp-lg);
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 1.5rem;
}

.filter-buttons {
    display: flex;
    gap: 1.5rem;
}

.filter-btn {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-text-muted);
    position: relative;
    padding-bottom: 5px;
}

.filter-btn.active {
    color: var(--c-white);
}

.filter-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--c-gold);
}

.search-bar input {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--c-border);
    padding: 0.5rem 0;
    color: var(--c-white);
    font-family: inherit;
    font-size: 1rem;
    width: 250px;
    transition: var(--t-fast);
}

.search-bar input::placeholder {
    color: var(--c-text-muted);
}

.filter-select {
    padding: 0.5rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: transparent;
    color: var(--c-white);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    cursor: pointer;
}

.filter-select:focus {
    outline: none;
    border-color: var(--c-gold);
}

.search-bar input {
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: transparent;
    border-radius: 4px;
    padding: 0.6rem 0.8rem;
}

.roster-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--c-text-muted);
}

.roster-empty p {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--c-white);
    margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Founders / Our Team
-------------------------------------------------------------------------- */
.founders-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
    max-width: 900px;
    margin: 0 auto;
}

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

.founder-card {
    text-align: center;
}

.founder-image {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
    background: var(--c-charcoal);
    margin-bottom: 1.25rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

.founder-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.founder-image .placeholder-card {
    height: 100%;
}

.founder-meta {
    padding: 0 1rem;
}

.founder-name {
    font-size: 1.6rem;
    margin-bottom: 0.25rem;
}

.founder-role {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-text-muted);
    margin-bottom: 1rem;
}

.founder-link {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-gold);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease;
}

.founder-link:hover {
    color: var(--c-gold);
    border-bottom-color: var(--c-gold);
}

/* --------------------------------------------------------------------------
   Collaborated logo grid (About page)
-------------------------------------------------------------------------- */
.collaborators-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
    align-items: center;
}

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

@media (min-width: 1024px) {
    .collaborators-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 2rem;
    }
}

.collaborator-slot {
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: 4px;
    transition: transform 0.3s var(--ease-smooth), filter 0.3s var(--ease-smooth);
}

.collaborator-slot img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1) opacity(0.65);
    transition: filter 0.4s var(--ease-smooth);
}

.collaborator-slot:hover img {
    filter: grayscale(0) opacity(1);
}

.collaborator-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--c-border);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
    color: var(--c-text-muted);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.search-bar input:focus {
    outline: none;
    border-color: var(--c-gold);
}

/* The Card */
.actor-card-wrapper {
    overflow: hidden;
}

.actor-card {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--c-charcoal);
    border-radius: 4px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

.actor-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease-smooth);
}

/* Fallback/Placeholder Card generation */
.placeholder-card {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 0%, #f0eee9, #e2dfd6);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border);
}

.placeholder-initials {
    font-family: var(--font-heading);
    font-size: 5rem;
    color: rgba(0, 0, 0, 0.08);
    letter-spacing: -2px;
    user-select: none;
}

.actor-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0) 100%);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--sp-md);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s var(--ease-smooth);
}

.actor-overlay .actor-name {
    color: #fff;
}

.actor-card:hover .actor-image {
    transform: scale(1.05);
}

.actor-card:hover .actor-overlay {
    opacity: 1;
    transform: translateY(0);
}

.actor-name {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.actor-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--c-gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s 0.1s var(--ease-smooth);
}

.actor-card:hover .actor-meta {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   10. Single Actor Profile Page
-------------------------------------------------------------------------- */
.profile-hero {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 80vh;
    margin-top: 80px;
}

@media (min-width: 1024px) {
    .profile-hero {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-lg);
    }
}

.profile-image-col {
    height: 60vh;
    position: relative;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .profile-image-col {
        height: 100%;
    }
}

.profile-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Profile Gallery (thumbnail strip + main image) */
.profile-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    height: 100%;
    width: 100%;
}

@media (min-width: 768px) {
    .profile-gallery.has-thumbs {
        grid-template-columns: 90px 1fr;
        gap: 1rem;
    }
}

.profile-thumbs {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.25rem;
    order: 2;
    scrollbar-width: thin;
}

@media (min-width: 768px) {
    .profile-thumbs {
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        max-height: 100%;
        order: 1;
    }
}

.profile-thumb {
    flex: 0 0 auto;
    width: 70px;
    height: 100px;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    padding: 0;
    background: none;
    cursor: pointer;
    transition: border-color 0.25s var(--ease-smooth), opacity 0.25s var(--ease-smooth);
    opacity: 0.65;
}

@media (min-width: 768px) {
    .profile-thumb {
        width: 100%;
        height: 110px;
    }
}

.profile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-thumb:hover {
    opacity: 1;
}

.profile-thumb.active {
    border-color: var(--c-gold);
    opacity: 1;
}

.profile-main-image {
    position: relative;
    overflow: hidden;
    height: 55vh;
    min-height: 380px;
    order: 1;
}

@media (min-width: 768px) {
    .profile-main-image {
        height: 100%;
        min-height: 70vh;
        order: 2;
    }
}

.profile-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: opacity 0.35s var(--ease-smooth);
}

.profile-main-image img.is-swapping {
    opacity: 0;
}

/* On mobile portrait, let the image column grow to fit both the image AND
   the thumbnails below it. The base rule above clips with overflow:hidden
   at a fixed 50vh, which hid the thumbnails entirely. */
@media (max-width: 767px) {
    .profile-image-col {
        height: auto !important;
        min-height: auto !important;
        overflow: visible;
    }

    .profile-thumbs {
        height: 90px;
        flex: 0 0 auto;
        padding: 0.5rem 0;
    }

    .profile-thumb {
        height: 90px;
        width: 65px;
    }
}

/* Showreel video embed */
.showreel-section .video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.showreel-section .video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.profile-text-col {
    padding: var(--sp-lg) 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    padding: 2rem 0;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--c-text-muted);
    letter-spacing: 0.1em;
    margin-bottom: 0.2rem;
}

.stat-val {
    font-size: 1.1rem;
    color: var(--c-white);
}

/* Filmography Table Timeline styling */
.filmography-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
}

.filmography-table th,
.filmography-table td {
    padding: 1rem 0;
    border-bottom: 1px solid var(--c-border);
    text-align: left;
}

.filmography-table th {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: normal;
}

.film-year {
    color: var(--c-gold);
    font-family: var(--font-mono);
}

.film-title {
    font-size: 1.2rem;
    font-family: var(--font-heading);
    color: var(--c-white);
}

.film-role {
    color: var(--c-text-muted);
}

/* --------------------------------------------------------------------------
   11. About & Stats Section
-------------------------------------------------------------------------- */
.stats-section {
    background-color: var(--c-dark-gray);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}

.stat-box {
    text-align: center;
    padding: 2rem;
    position: relative;
}

.stat-box:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 50%;
    background: var(--c-border);
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 4rem;
    color: var(--c-gold);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-title {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-white);
}

/* --------------------------------------------------------------------------
   12. Contact Form
-------------------------------------------------------------------------- */
.form-group {
    margin-bottom: 1.5rem;
    position: relative;
}

.form-control {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    padding: 1rem 0;
    color: var(--c-white);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--t-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--c-gold);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

.form-label {
    position: absolute;
    top: 1rem;
    left: 0;
    color: var(--c-text-muted);
    transition: var(--t-fast);
    pointer-events: none;
}

.form-control:focus~.form-label,
.form-control:not(:placeholder-shown)~.form-label {
    top: -10px;
    font-size: 0.75rem;
    color: var(--c-gold);
}

/* The floating-label trick relies on :placeholder-shown which select
   elements don't support — use a static label above the field instead. */
.form-group--select {
    margin-bottom: 1.5rem;
}

.form-label-static {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    color: var(--c-gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.form-group--select select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 16px;
}

.form-hint {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--c-text-muted);
    line-height: 1.5;
}

.contact-direct {
    margin-top: 2rem;
    font-size: 0.95rem;
    color: var(--c-text-muted);
}

.contact-direct a {
    color: var(--c-gold);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
    margin-left: 0.25rem;
}

.contact-direct a:hover {
    border-bottom-color: var(--c-gold);
}

.alert {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
}

.alert-success {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* --------------------------------------------------------------------------
   13. Footer
-------------------------------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--c-border);
    padding: 4rem 0 2rem;
    background-color: #ffffff;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

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

.footer-col h4 {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    color: var(--c-white);
}

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

.footer-links a {
    color: var(--c-text-muted);
}

.footer-links a:hover {
    color: var(--c-gold);
    padding-left: 5px;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--c-border);
    font-size: 0.85rem;
    color: var(--c-text-darker);
}

/* --------------------------------------------------------------------------
   14. Animations & Utilities (Fade up, stagger)
-------------------------------------------------------------------------- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s var(--ease-smooth), transform 1s var(--ease-smooth);
    will-change: opacity, transform;
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

/* --------------------------------------------------------------------------
   15. Responsive Fixes
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .h-giant {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }

    .hero {
        height: auto;
        min-height: 500px;
        padding: var(--sp-xl) 0;
    }

    .hero-content h1 {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        gap: 1.5rem;
    }

    .profile-image-col {
        height: 50vh;
        min-height: 400px;
    }

    .stat-box:not(:last-child)::after {
        display: none;
    }

    .stat-box {
        border-bottom: 1px solid var(--c-border);
        padding: 1.5rem 1rem;
    }

    /* Filmography turns into stacked cards on mobile so the four columns
       (Year / Title / Role / Director) don't overflow the viewport */
    .filmography-table thead {
        display: none;
    }

    .filmography-table,
    .filmography-table tbody,
    .filmography-table tr,
    .filmography-table td {
        display: block;
        width: 100%;
    }

    .filmography-table tr {
        border: 1px solid var(--c-border);
        border-radius: 6px;
        margin-bottom: 1rem;
        padding: 1rem 1.25rem;
        background: rgba(0, 0, 0, 0.02);
    }

    .filmography-table td {
        border: none;
        padding: 0.25rem 0;
        white-space: normal;
    }

    .filmography-table .film-year {
        font-size: 0.8rem;
        color: var(--c-gold);
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    .filmography-table .film-title {
        font-size: 1.15rem;
    }

    .filmography-table .film-role::before {
        content: 'as ';
        color: var(--c-text-muted);
    }

    /* The scroll-fade animation interacts badly with display:block on <tr>
       elements, leaving the filmography rows invisible on mobile.
       Force them visible regardless of IntersectionObserver state. */
    .filmography-table tr.animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-bar input {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   16. Admin Setup (Will extend in admin.css, but some base overrides here)
   Admin wrapper sets a different sidebar layout
-------------------------------------------------------------------------- */
.admin-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
}

.badge-active {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.badge-featured {
    background: rgba(212, 175, 55, 0.2);
    color: var(--c-gold);
}

/* Print Styles */
@media print {
    body {
        background: white;
        color: black;
    }

    .site-header,
    .site-footer {
        display: none;
    }

    .hero {
        background: none;
    }
}

/* --------------------------------------------------------------------------
   17. Hero Carousel & Premium Animations
-------------------------------------------------------------------------- */

.carousel-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s cubic-bezier(0.65, 0, 0.35, 1), transform 2s cubic-bezier(0.16, 1, 0.3, 1);
    transform: scale(1.05);
}

.carousel-slide.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.carousel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 1;
}

.carousel-slide .hero-content {
    position: absolute;
    top: auto;
    bottom: 12%;
    left: 10%;
    transform: translateY(0);
    z-index: 2;
    text-align: left;
    max-width: 800px;
}

.carousel-slide .hero-content h1,
.carousel-slide .hero-content .text-white {
    color: #fff;
}

.carousel-controls {
    position: absolute;
    right: 5%;
    bottom: 10%;
    z-index: 3;
    display: flex;
    gap: 1rem;
}

.carousel-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid var(--c-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-gold);
    transition: var(--t-normal);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
}

.carousel-btn:hover {
    background: var(--c-gold);
    color: var(--c-black);
    transform: scale(1.1);
}

/* OUT OF THIS WORLD ANIMATIONS */

.clip-text-reveal {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
    opacity: 0;
    transform: translateY(30px);
    transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.5s ease, transform 1s ease;
}

.carousel-slide.active .clip-text-reveal {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.scroll-reveal-text {
    display: inline-block;
    opacity: 0;
    transform: translateX(-30px);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.carousel-slide.active .scroll-reveal-text {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
}

.fade-up-anim {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease-out;
}

.carousel-slide.active .fade-up-anim {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s;
}

/* Upgrading general animations */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(60px) scale(0.98);
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.delay-1 {
    transition-delay: 0.15s;
}

.delay-2 {
    transition-delay: 0.3s;
}

.delay-3 {
    transition-delay: 0.45s;
}

.actor-card-wrapper.animate-on-scroll {
    transform: translateY(40px) scale(0.95);
    filter: blur(5px);
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.actor-card-wrapper.animate-on-scroll.in-view {
    transform: translateY(0) scale(1);
    filter: blur(0);
}