/* =============================================================================
   SANDSTORM FILMS — main.css
   Global design system: tokens, reset, base type, buttons, header/nav,
   footer, shared modules (hero, explore cross-nav, clients), utilities.
   WordPress note: this file maps to the theme's global stylesheet. Component
   sections live in components.css.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Brand colour */
  --color-orange:       #C8501A;
  --color-orange-light: #E06020;
  --color-orange-dark:  #A0400E;

  /* Surfaces */
  --color-black:  #060606;
  --color-bg:     #060606;
  --color-bg-alt: #0C0C0C;
  --color-card:   #111111;
  --color-card-2: #161616;
  --color-card-3: #1a1a1a;

  /* Borders */
  --border-1: rgba(255,255,255,0.07);
  --border-2: rgba(255,255,255,0.13);
  --border-3: rgba(255,255,255,0.20);

  /* Text */
  --color-text:    #EDE9E3;
  --color-muted:   #7A7268;
  --color-muted-2: #ABAAA0;

  /* Type families */
  --font-display: 'Bebas Neue', 'DIN Alternate Bold', sans-serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-body:    'Barlow Condensed', 'DIN Regular', 'Barlow', Arial, sans-serif;

  /* Layout */
  --gutter: max(52px, calc((100vw - 1600px) / 2));
  --header-h: 70px;
  --maxw: 1600px;
}

/* Brand display font shipped with the project (used as a fallback face) */
@font-face{
  font-family:'DIN Alternate Bold';
  src:url('../fonts/DIN-Alternate-Bold.ttf') format('truetype');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'DIN Regular';
  src:url('../fonts/DIN-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}

/* -----------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block;}
a{color:inherit;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;}

/* Film-grain overlay (preserved from approved design) */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------------
   3. TYPOGRAPHY HELPERS
   -------------------------------------------------------------------------- */
.eyebrow{
  font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--color-orange);margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';display:block;width:22px;height:1px;background:var(--color-orange);}
.eyebrow--center{justify-content:center;}

.section-title{
  font-family:var(--font-display);font-size:clamp(40px,5.5vw,82px);
  line-height:.92;letter-spacing:.025em;color:var(--color-text);margin-bottom:20px;
}
.section-title .accent,.accent{color:var(--color-orange);}

.lede{font-size:15px;color:rgba(237,233,227,.6);line-height:1.85;}
.lede strong{color:rgba(237,233,227,.85);font-weight:600;}

/* -----------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block;text-decoration:none;border:none;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:14px 34px;transition:all .2s ease;
}
.btn--primary{background:var(--color-orange);color:#fff;}
.btn--primary:hover{background:var(--color-orange-light);transform:translateY(-1px);}
.btn--ghost{color:rgba(237,233,227,.75);border:1px solid rgba(237,233,227,.25);font-weight:600;}
.btn--ghost:hover{border-color:rgba(237,233,227,.55);color:var(--color-text);}
.btn--white{background:#fff;color:var(--color-orange);padding:15px 48px;}
.btn--white:hover{background:rgba(255,255,255,.9);transform:translateY(-2px);}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;}

/* -----------------------------------------------------------------------------
   5. SCROLL-REVEAL
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal.delay-1{transition-delay:.08s;}
.reveal.delay-2{transition-delay:.17s;}
.reveal.delay-3{transition-delay:.26s;}
.reveal.delay-4{transition-delay:.35s;}

/* -----------------------------------------------------------------------------
   6. SITE HEADER / NAVIGATION  (WP template-part: header.php)
   -------------------------------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:500;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);
  background:rgba(6,6,6,.85);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.1);transition:background .4s ease;
}
.site-header.is-scrolled{background:rgba(6,6,6,.97);}
.site-header__logo{display:flex;align-items:center;text-decoration:none;}
/* logo-no-bg.png is white on transparent — no filter needed */
.site-header__logo img{height:34px;width:auto;max-width:260px;object-fit:contain;}

.site-nav__list{display:flex;align-items:stretch;gap:32px;height:var(--header-h);}
.site-nav__list > li{display:flex;align-items:center;position:relative;}
.site-nav__link{
  display:flex;align-items:center;gap:6px;height:100%;
  color:rgba(237,233,227,1);text-decoration:none;font-size:15px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;transition:color .2s ease;
}
.site-nav__link:hover{color:#fff;}
.site-nav__link[aria-current="page"],.site-nav__link.is-current{color:var(--color-orange);}
.site-nav__caret{font-size:11px;line-height:1;opacity:.85;transition:transform .25s ease;}
.has-sub:hover .site-nav__caret{transform:rotate(180deg);}

/* Dropdown submenu (Our Work -> The Last Screenplay) */
.site-subnav{
  position:absolute;top:100%;left:-16px;min-width:260px;
  background:rgba(10,10,10,.98);backdrop-filter:blur(16px);
  border:1px solid var(--border-2);border-top:2px solid var(--color-orange);
  padding:8px 0;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease;z-index:600;
}
.has-sub:hover .site-subnav,.has-sub:focus-within .site-subnav{opacity:1;visibility:visible;transform:translateY(0);}
.site-subnav__link{
  display:block;padding:13px 20px;color:rgba(237,233,227,.8);text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  transition:background .2s,color .2s;
}
.site-subnav__link:hover{background:rgba(255,255,255,.06);color:#fff;}
.site-subnav__link[aria-current="page"]{color:var(--color-orange);}

/* Hamburger */
.nav-toggle{
  display:none;width:42px;height:42px;background:transparent;border:1px solid var(--border-2);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--color-text);transition:transform .3s,opacity .3s;}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* -----------------------------------------------------------------------------
   7. HERO / PAGE-HERO SLIDER  (reusable banner module)
   -------------------------------------------------------------------------- */
.hero{position:relative;height:100vh;min-height:680px;overflow:hidden;display:flex;}
.hero--page{height:72vh;min-height:520px;}
.hero__slides{position:absolute;inset:0;}
.hero__slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .6s ease;display:flex;align-items:flex-end;
  padding:0 var(--gutter) 90px;
}
.hero__slide.is-active{opacity:1;visibility:visible;}
.hero--page .hero__slide{padding-bottom:64px;}
.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Responsive video: show desktop by default, swap to mobile on small screens */
.hero__media--mobile{display:none;}
@media(max-width:768px){.hero__media--desktop{display:none;}.hero__media--mobile{display:block;}}
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(165deg,rgba(6,6,6,.18) 0%,rgba(6,6,6,.05) 20%,rgba(6,6,6,.62) 68%,rgba(6,6,6,.97) 100%);
}
.hero__edge{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--color-orange);opacity:.9;z-index:3;}
.hero__content{position:relative;z-index:2;max-width:1100px;}
.hero__eyebrow{
  font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--color-orange);
  margin-bottom:16px;display:flex;align-items:center;gap:14px;
}
.hero__eyebrow::before{content:'';display:block;width:36px;height:1px;background:var(--color-orange);}
.hero__title{
  font-family:var(--font-display);font-size:clamp(56px,9.5vw,150px);
  line-height:.86;letter-spacing:.02em;color:var(--color-text);margin-bottom:22px;
}
.hero__title .accent{color:var(--color-orange);}
.hero--page .hero__title{font-size:clamp(48px,8vw,110px);}
.hero__sub{
  font-family:var(--font-serif);font-size:20px;font-weight:400;
  color:rgba(237,233,227,.7);margin-bottom:40px;max-width:560px;line-height:1.55;
}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;}

/* Slider dots */
.hero__dots{position:absolute;bottom:34px;left:var(--gutter);z-index:4;display:flex;gap:10px;}
.hero__dot{width:30px;height:3px;background:var(--border-3);border:none;padding:0;transition:background .3s;}
.hero__dot.is-active{background:var(--color-orange);}

/* Hero prev/next arrows */
.hero__arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:10;width:56px;height:56px;border-radius:50%;
  border:2px solid rgba(255,255,255,.38);background:rgba(6,6,6,.52);
  backdrop-filter:blur(8px);color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .2s,background .2s;
}
.hero__arrow svg{width:24px;height:24px;display:block;pointer-events:none;}
.hero__arrow:hover{border-color:var(--color-orange);background:rgba(6,6,6,.82);}
.hero__prev{left:max(20px,calc(var(--gutter)/3));}
.hero__next{right:max(20px,calc(var(--gutter)/3));}
@media(max-width:768px){
  /* Hide prev/next arrows on mobile — they overlapped the hero text. Dots + autoplay remain. */
  .hero__arrow{display:none;}
}

/* Compact nav for additional Home item */
@media(max-width:1200px){
  .site-nav__list{gap:22px;}
  .site-nav__link{font-size:13.5px;letter-spacing:.1em;}
}

/* hero__scroll removed — decorative "Scroll" cue not needed per client feedback */

/* -----------------------------------------------------------------------------
   8. SECTION SCAFFOLD
   -------------------------------------------------------------------------- */
.section{padding:96px var(--gutter);}
.section--tight{padding:64px var(--gutter);}
.section--bg{background:var(--color-bg);}
.section--alt{background:var(--color-bg-alt);}
.section__head{margin-bottom:50px;}
.section__head--center{text-align:center;}
.section__head--center .eyebrow{justify-content:center;}
.divider{height:2px;background:linear-gradient(to right,transparent,var(--color-orange),transparent);opacity:.4;}
/* Offset in-page anchor jumps so targets clear the fixed header */
[id]{scroll-margin-top:calc(var(--header-h) + 20px);}

/* -----------------------------------------------------------------------------
   9. EXPLORE / CROSS-NAV CARD ROW  (ends most pages — WP reusable block)
   -------------------------------------------------------------------------- */
.explore{background:var(--color-bg-alt);}
.explore__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--border-1);}
.explore__card{
  position:relative;overflow:hidden;min-height:300px;display:flex;flex-direction:column;
  justify-content:flex-end;padding:30px;text-decoration:none;
}
.explore__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.55) saturate(.7);transition:transform .8s ease,filter .8s ease;}
.explore__card:hover .explore__bg{transform:scale(1.05);filter:brightness(.72) saturate(.85);}
.explore__grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,6,.78) 0%,rgba(6,6,6,.18) 55%,transparent 100%);}
.explore__body{position:relative;z-index:2;}
.explore__tag,.explore__title,.explore__desc{display:block;}
.explore__tag{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--color-orange);margin-bottom:8px;}
.explore__title{font-family:var(--font-display);font-size:32px;letter-spacing:.04em;color:var(--color-text);margin-bottom:6px;}
.explore__desc{font-size:15px;color:rgba(237,233,227,.6);line-height:1.55;}

/* -----------------------------------------------------------------------------
   10. CLIENT LOGO STRIP
   -------------------------------------------------------------------------- */
.clients{background:var(--color-bg-alt);padding:60px var(--gutter) 72px;border-top:1px solid var(--border-1);}
.clients__label{font-size:14px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--color-muted);text-align:center;margin-bottom:40px;}
.clients__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:38px 44px;align-items:center;justify-items:center;max-width:1140px;margin:0 auto;}
.clients__logo{display:flex;align-items:center;justify-content:center;width:100%;}
.clients__logo img{max-height:46px;max-width:140px;width:auto;height:auto;object-fit:contain;opacity:.9;transition:opacity .25s ease,transform .25s ease;}
.clients__logo img:hover{opacity:1;transform:scale(1.05);}

/* -----------------------------------------------------------------------------
   11. FOOTER  (WP template-part: footer.php)
   -------------------------------------------------------------------------- */
.site-footer{background:var(--color-black);padding:64px var(--gutter) 38px;border-top:1px solid var(--border-1);}
.site-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:52px;margin-bottom:44px;}
.site-footer__brand .footer-logo{height:44px;width:auto;margin-bottom:18px;}
.site-footer__tag{font-size:15px;color:var(--color-muted);line-height:1.8;margin-bottom:20px;text-transform:uppercase;letter-spacing:.04em;}
.site-footer__social{display:flex;gap:8px;}
.site-footer__social a{width:34px;height:34px;border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;color:var(--color-muted);transition:all .2s;}
.site-footer__social a:hover{border-color:var(--color-orange);color:var(--color-orange);}
.site-footer__social svg{width:16px;height:16px;fill:currentColor;}
.footer-col h4{font-size:13px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--color-muted);margin-bottom:18px;}
.footer-col ul{display:flex;flex-direction:column;gap:9px;}
.footer-col a{font-size:15px;color:rgba(237,233,227,.5);text-decoration:none;transition:color .2s;}
.footer-col a:hover{color:var(--color-text);}
.footer-col p{font-size:15px;color:rgba(237,233,227,.5);margin-bottom:8px;line-height:1.55;}
.footer-col p strong{color:rgba(237,233,227,.7);font-weight:600;}
.footer-col a.footer-link-strong{color:rgba(237,233,227,.6);}
.site-footer__bottom{padding-top:28px;border-top:1px solid var(--border-1);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;}
.site-footer__copy{font-size:13px;color:rgba(237,233,227,.35);}
.site-footer__legal{display:flex;gap:20px;flex-wrap:wrap;}
.site-footer__legal a{font-size:13px;color:rgba(237,233,227,.35);text-decoration:none;}
.site-footer__legal a:hover{color:var(--color-text);}
.site-footer__loc{font-size:13px;color:var(--color-orange);letter-spacing:.06em;}
.site-footer__credit{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.04em;color:rgba(237,233,227,.5);text-decoration:none;}
.site-footer__credit img{height:22px;width:auto;display:block;filter:grayscale(1) brightness(1.2);opacity:.5;transition:all .4s;}
.site-footer__credit:hover img{filter:grayscale(0) brightness(1);opacity:1;}

/* -----------------------------------------------------------------------------
   12. RESPONSIVE — GLOBAL / NAV / HERO / FOOTER
   -------------------------------------------------------------------------- */
@media(max-width:1024px){
  .explore__grid{grid-template-columns:repeat(2,1fr);}
  .clients__grid{grid-template-columns:repeat(4,1fr);gap:30px;}
  :root{--gutter:34px;}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:34px;}
}
@media(max-width:768px){
  :root{--gutter:22px;--header-h:62px;}
  .clients__grid{grid-template-columns:repeat(3,1fr);gap:26px 20px;}

  /* Mobile nav drawer */
  .nav-toggle{display:flex;}
  .site-nav{
    position:fixed;top:var(--header-h);left:0;right:0;
    background:rgba(6,6,6,.98);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--border-2);
    transform:translateY(-120%);transition:transform .35s ease;
    padding:18px var(--gutter) 30px;max-height:calc(100vh - var(--header-h));overflow-y:auto;
  }
  .site-nav.is-open{transform:translateY(0);}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0;height:auto;}
  .site-nav__list > li{display:block;width:100%;}
  .site-nav__link{display:flex;width:100%;height:auto;padding:15px 0;font-size:17px;border-bottom:1px solid var(--border-1);}
  /* Dropdown becomes an inline, always-open sub-list inside the drawer */
  .site-subnav{
    position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;backdrop-filter:none;border:none;border-top:none;
    padding:4px 0 10px 16px;min-width:0;
  }
  .site-subnav__link{font-size:15px;padding:11px 0;letter-spacing:.08em;}

  .hero{min-height:560px;height:88vh;}

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

  .section{padding:64px var(--gutter);}
  .site-footer__grid{grid-template-columns:1fr;gap:30px;}
  .site-footer__bottom{flex-direction:column;align-items:flex-start;}
}
@media(max-width:480px){
  .hero__title{font-size:clamp(44px,13vw,72px);}
  .clients__grid{grid-template-columns:repeat(2,1fr);gap:24px 16px;}
  .btn,.btn--white{width:100%;text-align:center;}
  .btn-row,.hero__actions{width:100%;}
}