/* ============================================
   LUCID HEIGHTS FILM — Global Stylesheet
   ============================================ */

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

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black: #080808;
  --white: #f5f2ee;
  --gold: #b8975a;
  --gold-light: #d4b27a;
  --mid: #1a1a1a;
  --muted: rgba(245,242,238,0.4);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Syncopate', sans-serif;
  --body: 'Inter', sans-serif;
}

html { scroll-behavior: smooth; }
body { background: var(--black); color: var(--white); font-family: var(--body); font-weight: 300; overflow-x: hidden; cursor: none; }

.cursor { position: fixed; width: 8px; height: 8px; background: var(--gold); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); transition: width .3s,height .3s,background .3s; }
.cursor-ring { position: fixed; width: 36px; height: 36px; border: 1px solid rgba(184,151,90,.5); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); transition: width .3s,height .3s; }
.cursor.hover { width: 16px; height: 16px; background: var(--gold-light); }
.cursor-ring.hover { width: 56px; height: 56px; border-color: var(--gold); }

nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 28px 48px; display: flex; align-items: center; justify-content: space-between; transition: background .6s,padding .4s; }
nav.scrolled { background: rgba(8,8,8,.92); backdrop-filter: blur(12px); padding: 18px 48px; border-bottom: 1px solid rgba(184,151,90,.15); }
.nav-logo { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--white); text-decoration: none; text-transform: uppercase; }
.nav-logo span { color: var(--gold); }
.nav-links { display: flex; gap: 36px; list-style: none; align-items: center; }
.nav-links a { font-family: var(--sans); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .3s; }
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-cta { color: var(--gold) !important; border: 1px solid rgba(184,151,90,.4); padding: 10px 20px; }
.nav-cta:hover { background: var(--gold) !important; color: var(--black) !important; }

.page-hero { padding: 180px 80px 100px; position: relative; overflow: hidden; border-bottom: 1px solid rgba(184,151,90,.12); }
.page-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 80% at 80% 50%,rgba(184,151,90,.06) 0%,transparent 60%),linear-gradient(135deg,#0f0d0a 0%,#080808 100%); }
.page-hero-grain { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.page-hero-content { position: relative; z-index: 2; max-width: 800px; animation: reveal 1.2s cubic-bezier(.22,1,.36,1) both; }
@keyframes reveal { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }

.section-label { font-family: var(--sans); font-size: 8px; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; display: flex; align-items: center; gap: 14px; }
.section-label::after { content:''; display:block; width:40px; height:1px; background:var(--gold); opacity:.5; }
.page-title { font-family: var(--serif); font-size: clamp(52px,7vw,96px); font-weight: 300; line-height: .95; letter-spacing: -.02em; }
.page-title em { font-style: italic; color: var(--gold-light); display: block; }
.page-subtitle { margin-top: 28px; font-size: 15px; line-height: 1.8; color: rgba(245,242,238,.5); max-width: 480px; }

.btn-primary { font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--black); background: var(--gold); padding: 16px 36px; text-decoration: none; transition: background .3s; display: inline-block; cursor: none; }
.btn-primary:hover { background: var(--gold-light); }
.btn-ghost { font-family: var(--sans); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: color .3s; cursor: none; }
.btn-ghost:hover { color: var(--white); }
.btn-ghost .arrow { display: inline-block; width: 28px; height: 1px; background: currentColor; position: relative; transition: width .3s; }
.btn-ghost:hover .arrow { width: 44px; }
.btn-ghost .arrow::after { content:''; position:absolute; right:0; top:-3px; border:solid currentColor; border-width:0 1px 1px 0; width:6px; height:6px; transform:rotate(-45deg); }

section { padding: 120px 80px; }

.fade-in { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.fade-in.visible { opacity: 1; transform: none; }
.fade-in-delay-1 { transition-delay: .1s; }
.fade-in-delay-2 { transition-delay: .2s; }
.fade-in-delay-3 { transition-delay: .3s; }
.fade-in-delay-4 { transition-delay: .4s; }

.video-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(360px,1fr)); gap: 2px; max-width: 1200px; margin: 0 auto; }
.video-card { background: var(--mid); position: relative; overflow: hidden; border: 1px solid rgba(245,242,238,.06); transition: border-color .4s; cursor: none; }
.video-card:hover { border-color: rgba(184,151,90,.3); }
.video-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; filter: brightness(.85); transition: filter .4s, transform .6s; }
.video-card:hover .video-thumb { filter: brightness(.7); transform: scale(1.03); }
.video-card-info { padding: 24px 28px; }
.video-title { font-family: var(--serif); font-size: 18px; font-weight: 300; color: var(--white); margin-bottom: 8px; line-height: 1.3; }
.video-duration { font-family: var(--sans); font-size: 8px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.8); width: 56px; height: 56px; border: 1px solid rgba(245,242,238,.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; }
.play-overlay::after { content:''; border-left: 16px solid var(--white); border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.video-card:hover .play-overlay { opacity: 1; transform: translate(-50%,-50%) scale(1); }

.testimonial { border: 1px solid rgba(245,242,238,.08); padding: 48px; transition: border-color .4s; }
.testimonial:hover { border-color: rgba(184,151,90,.3); }
.testimonial-stars { display: flex; gap: 4px; margin-bottom: 24px; }
.testimonial-stars span { color: var(--gold); font-size: 12px; }
.testimonial-text { font-family: var(--serif); font-size: 19px; font-style: italic; font-weight: 300; line-height: 1.7; color: rgba(245,242,238,.85); margin-bottom: 28px; }
.testimonial-attr { font-family: var(--sans); font-size: 8px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.testimonial-attr span { color: rgba(245,242,238,.3); margin: 0 8px; }

.cta-band { background: var(--mid); padding: 100px 80px; border-top: 1px solid rgba(184,151,90,.12); border-bottom: 1px solid rgba(184,151,90,.12); text-align: center; }
.cta-band-title { font-family: var(--serif); font-size: clamp(36px,4vw,60px); font-weight: 300; line-height: 1.1; margin-bottom: 20px; }
.cta-band-title em { font-style: italic; color: var(--gold-light); }
.cta-band-sub { font-size: 14px; color: rgba(245,242,238,.45); line-height: 1.8; max-width: 480px; margin: 0 auto 48px; }
.cta-band-actions { display: flex; align-items: center; justify-content: center; gap: 32px; }

.form-group { margin-bottom: 28px; }
.form-label { font-family: var(--sans); font-size: 8px; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 10px; }
.form-input, .form-textarea, .form-select { width: 100%; background: rgba(245,242,238,.04); border: 1px solid rgba(245,242,238,.12); color: var(--white); font-family: var(--body); font-size: 14px; font-weight: 300; padding: 14px 18px; outline: none; transition: border-color .3s; -webkit-appearance: none; }
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: rgba(184,151,90,.5); }
.form-textarea { resize: vertical; min-height: 140px; }
.form-select option { background: var(--mid); }

.pricing-card { background: rgba(245,242,238,.03); border: 1px solid rgba(245,242,238,.08); padding: 48px 40px; position: relative; overflow: hidden; transition: border-color .4s, background .4s; }
.pricing-card::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--gold); transition:width .5s; }
.pricing-card:hover { border-color: rgba(184,151,90,.25); background: rgba(184,151,90,.04); }
.pricing-card:hover::after { width: 100%; }
.pricing-card.featured { border-color: rgba(184,151,90,.4); background: rgba(184,151,90,.06); }
.pricing-card.featured::before { content:'Most Popular'; position:absolute; top:20px; right:20px; font-family:var(--sans); font-size:7px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(184,151,90,.4); padding:6px 12px; }
.pricing-name { font-family: var(--serif); font-size: 28px; font-weight: 300; color: var(--white); margin-bottom: 8px; }
.pricing-desc { font-size: 13px; color: rgba(245,242,238,.4); line-height: 1.6; margin-bottom: 28px; }
.pricing-price { font-family: var(--serif); font-size: 48px; font-weight: 300; color: var(--gold-light); line-height: 1; margin-bottom: 4px; }
.pricing-duration { font-family: var(--sans); font-size: 8px; letter-spacing: .2em; text-transform: uppercase; color: rgba(245,242,238,.3); margin-bottom: 32px; display: block; }
.pricing-includes { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; }
.pricing-includes li { font-size: 13px; color: rgba(245,242,238,.55); display: flex; align-items: center; gap: 10px; }
.pricing-includes li::before { content:''; width:16px; height:1px; background:var(--gold); flex-shrink:0; }

footer { background: #050505; padding: 80px 80px 48px; border-top: 1px solid rgba(184,151,90,.12); }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 80px; margin-bottom: 80px; }
.footer-logo { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; display: block; }
.footer-logo span { color: var(--gold); }
.footer-tagline { font-family: var(--serif); font-size: 17px; font-style: italic; font-weight: 300; color: rgba(245,242,238,.4); line-height: 1.6; max-width: 280px; margin-bottom: 32px; }
.footer-social { display: flex; gap: 20px; }
.footer-social a { font-family: var(--sans); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: rgba(245,242,238,.35); text-decoration: none; transition: color .3s; }
.footer-social a:hover { color: var(--gold); }
.footer-col-title { font-family: var(--sans); font-size: 8px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 13px; color: rgba(245,242,238,.4); text-decoration: none; transition: color .3s; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 40px; border-top: 1px solid rgba(245,242,238,.06); }
.footer-copy { font-family: var(--sans); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: rgba(245,242,238,.2); }
.footer-copy span { color: rgba(184,151,90,.5); }
.footer-location { font-family: var(--sans); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: rgba(245,242,238,.2); }

@media (max-width: 900px) {
  nav { padding: 24px 32px; }
  nav.scrolled { padding: 16px 32px; }
  .nav-links { display: none; }
  .page-hero { padding: 140px 32px 80px; }
  section { padding: 80px 32px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 48px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .video-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 80px 32px; }
  .cta-band-actions { flex-direction: column; }
}