/* ============================================
   WHERE WE APART — NPP Promotional Website
   Naditha Paul Productions
   ============================================ */

   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Josefin+Sans:wght@200;300;400;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

   /* ---- CSS Variables ---- */
   :root {
     --ocean-deep: #03111e;
     --ocean-mid: #071e34;
     --ocean-blue: #0a2a4a;
     --ocean-bright: #0e4272;
     --ocean-light: #1a6497;
     --ocean-glow: #2196c4;
     --ocean-mist: #5bbfe8;
     --white: #ffffff;
     --off-white: #e8f4f8;
     --gold: #c9a96e;
     --gold-light: #e8d5a3;
     --text-muted: rgba(255, 255, 255, 0.55);
   
     --font-display: 'Cormorant Garamond', serif;
     --font-body: 'Josefin Sans', sans-serif;
     --font-serif: 'Playfair Display', serif;
   
     --transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     --transition-fast: 0.3s ease;
   }
   
   /* ---- Reset & Base ---- */
   *, *::before, *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   html {
     scroll-behavior: smooth;
     font-size: 16px;
   }
   
   body {
     background-color: var(--ocean-deep);
     color: var(--white);
     font-family: var(--font-body);
     font-weight: 300;
     letter-spacing: 0.04em;
     overflow-x: hidden;
     cursor: none;
   }
   
   /* ---- Custom Cursor ---- */
   .cursor {
     position: fixed;
     width: 10px;
     height: 10px;
     background: var(--ocean-mist);
     border-radius: 50%;
     pointer-events: none;
     z-index: 9999;
     transform: translate(-50%, -50%);
     transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease, background 0.3s ease;
   }
   
   .cursor-follower {
     position: fixed;
     width: 36px;
     height: 36px;
     border: 1px solid rgba(91, 191, 232, 0.5);
     border-radius: 50%;
     pointer-events: none;
     z-index: 9998;
     transform: translate(-50%, -50%);
     transition: transform 0.4s ease, width 0.4s ease, height 0.4s ease;
   }
   
   body:hover .cursor { opacity: 1; }
   
   /* ---- Noise Overlay ---- */
   body::before {
     content: '';
     position: fixed;
     inset: 0;
     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='0.035'/%3E%3C/svg%3E");
     pointer-events: none;
     z-index: 1000;
     opacity: 0.4;
   }
   
   /* ---- Scrollbar ---- */
   ::-webkit-scrollbar { width: 4px; }
   ::-webkit-scrollbar-track { background: var(--ocean-deep); }
   ::-webkit-scrollbar-thumb { background: var(--ocean-glow); border-radius: 2px; }
   
   /* ================================================
      HEADER / NAV
      ================================================ */
   header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 500;
     padding: 1.5rem 4rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     transition: background var(--transition), backdrop-filter var(--transition);
   }
   
   header.scrolled {
     background: rgba(3, 17, 30, 0.88);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid rgba(91, 191, 232, 0.1);
   }
   
   /* Logo */
   .logo-wrap {
     display: flex;
     align-items: center;
     gap: 1rem;
   }
   
   .logo-img-placeholder {
     width: 52px;
     height: 52px;
     border: 1px solid rgba(91, 191, 232, 0.4);
     border-radius: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(10, 42, 74, 0.6);
     font-family: var(--font-display);
     font-size: 0.65rem;
     color: var(--ocean-mist);
     text-align: center;
     letter-spacing: 0.06em;
     line-height: 1.3;
     overflow: hidden;
   }
   
   .logo-img-placeholder img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   
   .logo-text {
     display: flex;
     flex-direction: column;
   }
   
   .logo-title {
     font-family: var(--font-body);
     font-weight: 600;
     font-size: 0.75rem;
     letter-spacing: 0.3em;
     color: var(--white);
     text-transform: uppercase;
   }
   
   .logo-sub {
     font-family: var(--font-display);
     font-size: 0.7rem;
     font-style: italic;
     color: var(--ocean-mist);
     letter-spacing: 0.1em;
   }
   
   /* Nav Links */
   nav {
     display: flex;
     align-items: center;
     gap: 3rem;
   }
   
   nav a {
     font-family: var(--font-body);
     font-weight: 300;
     font-size: 0.7rem;
     letter-spacing: 0.25em;
     text-transform: uppercase;
     color: var(--off-white);
     text-decoration: none;
     position: relative;
     transition: color var(--transition-fast);
   }
   
   nav a::after {
     content: '';
     position: absolute;
     bottom: -4px;
     left: 0;
     width: 0;
     height: 1px;
     background: var(--ocean-mist);
     transition: width var(--transition);
   }
   
   nav a:hover { color: var(--ocean-mist); }
   nav a:hover::after { width: 100%; }
   
   /* Support CTA Button */
   .btn-support {
     font-family: var(--font-body);
     font-weight: 400;
     font-size: 0.7rem;
     letter-spacing: 0.25em;
     text-transform: uppercase;
     color: var(--ocean-deep);
     background: linear-gradient(135deg, var(--ocean-mist), var(--ocean-glow));
     border: none;
     padding: 0.75rem 2rem;
     cursor: none;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     position: relative;
     overflow: hidden;
     transition: transform var(--transition-fast), box-shadow var(--transition-fast);
   }
   
   .btn-support::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, var(--white), var(--ocean-mist));
     opacity: 0;
     transition: opacity var(--transition-fast);
   }
   
   .btn-support:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 30px rgba(33, 150, 196, 0.45);
   }
   
   .btn-support:hover::before { opacity: 1; }
   .btn-support span { position: relative; z-index: 1; }
   
   /* ================================================
      HERO SECTION
      ================================================ */
   #hero {
     position: relative;
     width: 100%;
     height: 90vh;
     height: 90dvh;
     min-height: 500px;
     overflow: hidden;
     display: flex;
     align-items: flex-end;
     padding-bottom: 8vh;
     /* Prevent the section itself from collapsing on mobile */
     isolation: isolate;
   }
   
   .hero-bg {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center center;
     transform: scale(1.08);
     animation: heroZoom 20s ease-out forwards;
     display: block;
   }
   
   @keyframes heroZoom {
     from { transform: scale(1.08); }
     to   { transform: scale(1.0); }
   }
   
   .hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(
       to bottom,
       rgba(3, 17, 30, 0.15) 0%,
       rgba(3, 17, 30, 0.05) 30%,
       rgba(3, 17, 30, 0.0) 50%,
       rgba(3, 17, 30, 0.6) 75%,
       rgba(3, 17, 30, 1.0) 100%
     );
   }
   
   .hero-content {
     position: relative;
     z-index: 10;
     width: 100%;
     padding: 0 4rem;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
   }
   
   .hero-genre {
     font-family: var(--font-body);
     font-size: 0.65rem;
     letter-spacing: 0.4em;
     text-transform: uppercase;
     color: var(--ocean-mist);
     margin-bottom: 1rem;
     opacity: 0;
     transform: translateY(20px);
     animation: fadeUp 1s 1s ease forwards;
   }
   
   .hero-scroll-hint {
     position: absolute;
     bottom: 2rem;
     right: 4rem;
     display: flex;
     align-items: center;
     gap: 0.75rem;
     font-family: var(--font-body);
     font-size: 0.6rem;
     letter-spacing: 0.3em;
     color: var(--text-muted);
     text-transform: uppercase;
     animation: pulse 2s infinite;
   }
   
   .scroll-line {
     width: 40px;
     height: 1px;
     background: linear-gradient(to right, transparent, var(--ocean-mist));
     animation: scrollLine 2s infinite;
   }
   
   @keyframes scrollLine {
     0%, 100% { width: 20px; opacity: 0.4; }
     50% { width: 50px; opacity: 1; }
   }
   
   @keyframes pulse {
     0%, 100% { opacity: 0.5; }
     50% { opacity: 1; }
   }
   
   @keyframes fadeUp {
     to { opacity: 1; transform: translateY(0); }
   }
   
   /* ================================================
      SECTION COMMONS
      ================================================ */
   section {
     position: relative;
     overflow: hidden;
   }
   
   .section-label {
     font-family: var(--font-body);
     font-size: 0.6rem;
     letter-spacing: 0.5em;
     text-transform: uppercase;
     color: var(--ocean-mist);
     margin-bottom: 1.5rem;
     display: flex;
     align-items: center;
     gap: 1rem;
   }
   
   .section-label::before {
     content: '';
     width: 30px;
     height: 1px;
     background: var(--ocean-mist);
     display: block;
   }
   
   .section-title {
     font-family: var(--font-display);
     font-weight: 300;
     font-size: clamp(2.5rem, 5vw, 4.5rem);
     line-height: 1.1;
     color: var(--white);
     margin-bottom: 2rem;
   }
   
   .section-title em {
     font-style: italic;
     color: var(--ocean-mist);
   }
   
   /* ================================================
      ABOUT / SYNOPSIS SECTION
      ================================================ */
   #synopsis {
     padding: 10rem 4rem;
     background: var(--ocean-deep);
   }
   
   .synopsis-grid {
     display: grid;
     grid-template-columns: 1fr 1.6fr;
     gap: 6rem;
     align-items: center;
     max-width: 1200px;
     margin: 0 auto;
   }
   
   .synopsis-left {}
   
   .synopsis-right {}
   
   .synopsis-body {
     font-family: var(--font-display);
     font-size: 1.2rem;
     font-weight: 300;
     font-style: italic;
     line-height: 1.9;
     color: var(--off-white);
     margin-bottom: 2rem;
   }
   
   .synopsis-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 0.75rem;
     margin-top: 2rem;
   }
   
   .tag {
     font-family: var(--font-body);
     font-size: 0.6rem;
     letter-spacing: 0.3em;
     text-transform: uppercase;
     padding: 0.5rem 1.2rem;
     border: 1px solid rgba(91, 191, 232, 0.3);
     color: var(--ocean-mist);
     background: rgba(10, 42, 74, 0.3);
     transition: all var(--transition-fast);
   }
   
   .tag:hover {
     background: rgba(33, 150, 196, 0.15);
     border-color: var(--ocean-mist);
   }
   
   .divider-line {
     width: 1px;
     height: 200px;
     background: linear-gradient(to bottom, transparent, var(--ocean-glow), transparent);
     margin: 0 auto;
     opacity: 0.4;
   }
   
   /* ================================================
      WHY CROWDFUND SECTION
      ================================================ */
   #crowdfund {
     padding: 10rem 4rem;
     background: linear-gradient(180deg, var(--ocean-deep) 0%, var(--ocean-mid) 50%, var(--ocean-deep) 100%);
     position: relative;
   }
   
   #crowdfund::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(to right, transparent, var(--ocean-glow), transparent);
   }
   
   #crowdfund::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(to right, transparent, var(--ocean-glow), transparent);
   }
   
   .crowdfund-inner {
     max-width: 1200px;
     margin: 0 auto;
   }
   
   .crowdfund-header {
     text-align: center;
     margin-bottom: 6rem;
   }
   
   .pillars-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2px;
     position: relative;
   }
   
   .pillar {
     background: rgba(10, 42, 74, 0.25);
     border: 1px solid rgba(91, 191, 232, 0.1);
     padding: 3.5rem 2.5rem;
     position: relative;
     overflow: hidden;
     transition: all var(--transition);
     cursor: default;
   }
   
   .pillar::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 2px;
     background: linear-gradient(to right, var(--ocean-glow), var(--ocean-mist));
     transform: scaleX(0);
     transform-origin: left;
     transition: transform var(--transition);
   }
   
   .pillar:hover {
     background: rgba(10, 42, 74, 0.55);
     border-color: rgba(91, 191, 232, 0.3);
     transform: translateY(-6px);
   }
   
   .pillar:hover::before { transform: scaleX(1); }
   
   .pillar-number {
     font-family: var(--font-display);
     font-size: 5rem;
     font-weight: 300;
     color: rgba(91, 191, 232, 0.08);
     position: absolute;
     top: 1rem;
     right: 1.5rem;
     line-height: 1;
     user-select: none;
     transition: color var(--transition);
   }
   
   .pillar:hover .pillar-number {
     color: rgba(91, 191, 232, 0.18);
   }
   
   .pillar-icon {
     font-size: 1.5rem;
     margin-bottom: 1.5rem;
   }
   
   .pillar h3 {
     font-family: var(--font-serif);
     font-weight: 400;
     font-size: 1.15rem;
     color: var(--white);
     margin-bottom: 1.2rem;
     line-height: 1.3;
   }
   
   .pillar p {
     font-family: var(--font-body);
     font-size: 0.8rem;
     line-height: 1.85;
     color: var(--text-muted);
     font-weight: 300;
   }
   
   /* Support CTA Block */
   .support-cta-block {
     margin-top: 6rem;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 2rem;
   }
   
   .support-cta-block p {
     font-family: var(--font-display);
     font-size: 1.1rem;
     font-style: italic;
     color: var(--off-white);
     max-width: 540px;
     line-height: 1.8;
   }
   
   .btn-cta-large {
     display: inline-flex;
     align-items: center;
     gap: 1rem;
     font-family: var(--font-body);
     font-size: 0.75rem;
     letter-spacing: 0.35em;
     text-transform: uppercase;
     color: var(--white);
     background: transparent;
     border: 1px solid rgba(91, 191, 232, 0.6);
     padding: 1.2rem 3.5rem;
     text-decoration: none;
     position: relative;
     overflow: hidden;
     cursor: none;
     transition: all var(--transition);
   }
   
   .btn-cta-large::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, var(--ocean-glow), var(--ocean-mist));
     transform: translateX(-100%);
     transition: transform var(--transition);
   }
   
   .btn-cta-large:hover {
     color: var(--ocean-deep);
     border-color: var(--ocean-mist);
     box-shadow: 0 0 40px rgba(33, 150, 196, 0.3);
   }
   
   .btn-cta-large:hover::before { transform: translateX(0); }
   .btn-cta-large span { position: relative; z-index: 1; }
   
   .btn-arrow {
     position: relative;
     z-index: 1;
     transition: transform var(--transition-fast);
   }
   
   .btn-cta-large:hover .btn-arrow { transform: translateX(6px); }
   
   /* ================================================
      DIRECTOR SECTION
      ================================================ */
   #director {
     padding: 10rem 4rem;
     background: var(--ocean-deep);
   }
   
   .director-inner {
     max-width: 1100px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 400px 1fr;
     gap: 6rem;
     align-items: start;
   }
   
   .director-portrait {
     position: relative;
   }
   
   .portrait-frame {
     position: relative;
     width: 100%;
     aspect-ratio: 3/4;
     overflow: hidden;
     background: var(--ocean-mid);
   }
   
   .portrait-frame img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: saturate(0.6) brightness(0.85);
     transition: filter var(--transition);
   }
   
   .portrait-frame:hover img {
     filter: saturate(0.8) brightness(0.95);
   }
   
   .portrait-placeholder {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     color: var(--text-muted);
     font-family: var(--font-body);
     font-size: 0.7rem;
     letter-spacing: 0.2em;
     gap: 1rem;
   }
   
   .portrait-placeholder .icon {
     font-size: 3rem;
     opacity: 0.3;
   }
   
   .portrait-border {
     position: absolute;
     bottom: -15px;
     right: -15px;
     width: 80%;
     height: 80%;
     border: 1px solid rgba(91, 191, 232, 0.25);
     pointer-events: none;
   }
   
   .director-info {
     padding-top: 1rem;
   }
   
   .director-name {
     font-family: var(--font-display);
     font-size: clamp(2.5rem, 4vw, 4rem);
     font-weight: 300;
     color: var(--white);
     line-height: 1;
     margin-bottom: 0.5rem;
   }
   
   .director-role {
     font-family: var(--font-body);
     font-size: 0.65rem;
     letter-spacing: 0.4em;
     text-transform: uppercase;
     color: var(--ocean-mist);
     margin-bottom: 2.5rem;
   }
   
   .director-bio {
     font-family: var(--font-body);
     font-size: 0.85rem;
     line-height: 2;
     color: var(--text-muted);
     margin-bottom: 2rem;
     max-width: 520px;
   }
   
   .director-stats {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2rem;
     margin-top: 3rem;
     padding-top: 3rem;
     border-top: 1px solid rgba(91, 191, 232, 0.1);
   }
   
   .stat {}
   
   .stat-number {
     font-family: var(--font-display);
     font-size: 2.5rem;
     font-weight: 300;
     color: var(--ocean-mist);
     line-height: 1;
   }
   
   .stat-label {
     font-family: var(--font-body);
     font-size: 0.6rem;
     letter-spacing: 0.3em;
     text-transform: uppercase;
     color: var(--text-muted);
     margin-top: 0.4rem;
   }
   
   /* ================================================
      PAST WORK / VIDEO SECTION
      ================================================ */
   #past-work {
     padding: 10rem 4rem;
     background: linear-gradient(180deg, var(--ocean-deep), var(--ocean-mid));
     position: relative;
   }
   
   #past-work::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(to right, transparent, var(--ocean-glow), transparent);
   }
   
   .past-work-inner {
     max-width: 1100px;
     margin: 0 auto;
   }
   
   .past-work-header {
     text-align: center;
     margin-bottom: 4rem;
   }
   
   .video-wrapper {
     position: relative;
     width: 100%;
     padding-top: 56.25%;
     background: var(--ocean-blue);
     border: 1px solid rgba(91, 191, 232, 0.15);
     overflow: hidden;
   }
   
   .video-wrapper iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: none;
   }
   
   .video-placeholder-overlay {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 1rem;
     background: rgba(7, 30, 52, 0.8);
   }
   
   .video-placeholder-overlay .play-icon {
     width: 70px;
     height: 70px;
     border: 1px solid rgba(91, 191, 232, 0.4);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
   }
   
   .video-placeholder-overlay p {
     font-family: var(--font-body);
     font-size: 0.7rem;
     letter-spacing: 0.3em;
     text-transform: uppercase;
     color: var(--text-muted);
   }
   
   /* ================================================
      FOOTER
      ================================================ */
   footer {
     background: var(--ocean-deep);
     padding: 4rem;
     border-top: 1px solid rgba(91, 191, 232, 0.08);
   }
   
   .footer-inner {
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   
   .footer-brand {
     display: flex;
     flex-direction: column;
     gap: 0.3rem;
   }
   
   .footer-brand-name {
     font-family: var(--font-display);
     font-size: 1.4rem;
     font-weight: 300;
     letter-spacing: 0.1em;
     color: var(--white);
   }
   
   .footer-brand-name em {
     font-style: italic;
     color: var(--ocean-mist);
   }
   
   .footer-brand-sub {
     font-family: var(--font-body);
     font-size: 0.6rem;
     letter-spacing: 0.4em;
     text-transform: uppercase;
     color: var(--text-muted);
   }
   
   .footer-right {
     text-align: right;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
   }
   
   .footer-right p {
     font-family: var(--font-body);
     font-size: 0.65rem;
     letter-spacing: 0.15em;
     color: var(--text-muted);
   }
   
   /* ================================================
      REVEAL ANIMATIONS (JS-triggered)
      ================================================ */
   .reveal {
     opacity: 0;
     transform: translateY(40px);
     transition: opacity 0.9s ease, transform 0.9s ease;
   }
   
   .reveal.visible {
     opacity: 1;
     transform: translateY(0);
   }
   
   .reveal-left {
     opacity: 0;
     transform: translateX(-50px);
     transition: opacity 0.9s ease, transform 0.9s ease;
   }
   
   .reveal-left.visible {
     opacity: 1;
     transform: translateX(0);
   }
   
   .reveal-right {
     opacity: 0;
     transform: translateX(50px);
     transition: opacity 0.9s ease, transform 0.9s ease;
   }
   
   .reveal-right.visible {
     opacity: 1;
     transform: translateX(0);
   }
   
   /* Stagger delays */
   .delay-1 { transition-delay: 0.1s; }
   .delay-2 { transition-delay: 0.2s; }
   .delay-3 { transition-delay: 0.35s; }
   .delay-4 { transition-delay: 0.5s; }
   .delay-5 { transition-delay: 0.65s; }
   
   /* ================================================
      AMBIENT PARTICLES (background effect)
      ================================================ */
   .ambient {
     position: absolute;
     pointer-events: none;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(33, 150, 196, 0.12), transparent 70%);
     animation: ambientFloat 15s ease-in-out infinite;
   }
   
   @keyframes ambientFloat {
     0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
     33% { transform: translate(30px, -40px) scale(1.15); opacity: 0.8; }
     66% { transform: translate(-20px, 25px) scale(0.9); opacity: 0.4; }
   }
   
   /* ================================================
      RESPONSIVE
      ================================================ */
   @media (max-width: 1024px) {
     header { padding: 1.5rem 2rem; }
     nav { gap: 2rem; }
     #synopsis, #crowdfund, #director, #past-work, footer { padding: 6rem 2rem; }
     .synopsis-grid { grid-template-columns: 1fr; gap: 3rem; }
     .pillars-grid { grid-template-columns: 1fr; }
     .director-inner { grid-template-columns: 1fr; gap: 3rem; }
     .director-portrait { max-width: 340px; }
   }
   
   @media (max-width: 640px) {
     /* ---- Header ---- */
     header { padding: 1rem 1.2rem; }
     nav { display: none; }
     .logo-img-placeholder { width: 40px; height: 40px; }
     .logo-title { font-size: 0.65rem; }
     .logo-sub { font-size: 0.6rem; }
     .btn-support { padding: 0.6rem 1.1rem; font-size: 0.62rem; letter-spacing: 0.15em; }
   
     /* ---- Hero ---- */
     /* The poster is landscape ~16:9. On portrait mobile we set the hero
        height to match the image's natural aspect ratio (56.25vw) so it
        fills the full width with zero cropping and zero black gaps.      */
     #hero {
       height: 56.25vw;   /* = 9/16 * 100vw — exact match for 16:9 image */
       min-height: 240px;
       max-height: 100dvh;
       padding-bottom: 0;
       align-items: flex-end;
       background: var(--ocean-deep);
     }
   
     .hero-bg {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       object-position: center center;
       transform: none !important;
       animation: none;
     }
   
     .hero-overlay {
       background: linear-gradient(
         to bottom,
         rgba(3, 17, 30, 0.1) 0%,
         rgba(3, 17, 30, 0.0) 30%,
         rgba(3, 17, 30, 0.5) 75%,
         rgba(3, 17, 30, 0.95) 100%
       );
     }
   
     /* Anchor genre text to bottom of section */
     .hero-content {
       padding: 0 1.2rem;
       width: 100%;
       position: absolute;
       bottom: 3%;
       left: 0;
       align-items: flex-start;
     }
   
     .hero-genre {
       font-size: 0.55rem;
       letter-spacing: 0.22em;
       margin-bottom: 0;
     }
   
     .hero-scroll-hint {
       right: 1.2rem;
       bottom: 3%;
       font-size: 0.5rem;
     }
   
     /* ---- Sections ---- */
     #synopsis, #crowdfund, #director, #past-work { padding: 5rem 1.5rem; }
     footer { padding: 3rem 1.5rem; }
   
     .section-title { font-size: 2rem; }
     .synopsis-body { font-size: 1rem; }
   
     .footer-inner { flex-direction: column; gap: 2rem; text-align: center; }
     .footer-right { text-align: center; }
     .director-stats { grid-template-columns: repeat(2, 1fr); }
     .btn-cta-large { padding: 1rem 2rem; font-size: 0.65rem; }
   }
   
   /* Extra small — very narrow phones */
   @media (max-width: 380px) {
     .btn-support { padding: 0.55rem 0.9rem; }
     .logo-wrap { gap: 0.6rem; }
   }