/* ============================================================
   BELLAMIRA FILMS — shared stylesheet
   Locked to House of Bellamira Brand Kit. Films arm tokens only.
   Concept: "the film frame" — framed time, restrained luxury.
   ============================================================ */

:root{
  /* ---- family thread (Brand Kit §7) ---- */
  --gold:#C9A961; --gold-light:#E4C978; --antique:#B89456;
  --onyx:#070707; --black:#000000; --ink:#0A0908;
  --ivory:#F8F3EA; --muted:#9A9088;
  --line:rgba(197,160,89,.35); --line-faint:rgba(197,160,89,.13);

  /* ---- FILMS per-arm override (the only three that change) ---- */
  --bg:#1C1917;        /* charcoal — Films is the dark arm that is NOT onyx */
  --mark:#C9A961;      /* gold — crest + BELLAMIRA wordmark */
  --accent:#A84444;    /* garnet tint — the FILMS descriptor color */
  --oxblood:#6B1F1F;   /* true oxblood — RULES / DIVIDERS / ACCENTS ONLY, never descriptor text */
  --charcoal-deep:#16140F;

  --maxw:1180px;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ivory);
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:300; line-height:1.7; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* film-grain overlay across the whole page */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:url("images/grain.svg"); background-size:200px;
  opacity:.04; mix-blend-mode:overlay;
}

/* ---- type ---- */
.didone{font-family:'Bodoni Moda',Didot,Georgia,serif}
h1,h2,h3{font-family:'Bodoni Moda',Didot,Georgia,serif;font-weight:600;line-height:1.08}
.eyebrow{
  font-size:.7rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
}
.eyebrow .tick{color:var(--accent);margin-right:.9em;font-variant-numeric:tabular-nums}
p{color:#cfc7bd}
.lede{font-size:1.18rem;line-height:1.85;color:var(--ivory);font-weight:300}
::selection{background:var(--oxblood);color:var(--ivory)}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,64px)}
section{position:relative}
.rule{height:1px;background:var(--line);border:0;width:100%}
.rule-ox{height:2px;background:var(--oxblood);border:0;width:64px}

/* ============================================================
   WORDMARK (Option A · Stacked Classic) — Films
   crest -> BELLAMIRA(gold) -> gold hairline -> FILMS(garnet)
   ============================================================ */
.wordmark{display:inline-flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center}
.wordmark .crest{width:var(--crest,64px);height:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
.wm-name{
  font-family:'Bodoni Moda',Didot,serif;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mark);
  font-size:var(--name,1.5rem);line-height:1;
}
.wm-rule{width:var(--wmrule,46px);height:1px;background:var(--accent);opacity:.85}
.wm-desc{
  font-family:'Bodoni Moda',Didot,serif;font-weight:400;
  letter-spacing:.4em;text-transform:uppercase;color:var(--accent);
  font-size:var(--desc,.72rem);padding-left:.4em;
}

/* ---- top nav ---- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(22px,5vw,64px);
  background:linear-gradient(to bottom,rgba(28,25,23,.92),rgba(28,25,23,0));
  backdrop-filter:blur(2px);transition:background .4s var(--ease),padding .4s var(--ease);
}
.nav.scrolled{background:rgba(22,20,15,.96);border-bottom:1px solid var(--line-faint);padding-top:12px;padding-bottom:12px}
.nav-mark{display:flex;align-items:center;gap:.7rem}
.nav-mark img{width:30px;height:auto}
.nav-mark .nm-text{font-family:'Bodoni Moda',serif;font-weight:600;letter-spacing:.2em;font-size:.82rem;color:var(--mark);text-transform:uppercase}
.nav-mark .nm-text b{color:var(--accent);font-weight:400}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}
.nav-links a{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:400;transition:color .3s}
.nav-links a:hover{color:var(--ivory)}
.nav-links a.cta{
  color:var(--ivory);border:1px solid var(--line);padding:.62em 1.3em;border-radius:1px;
  transition:border-color .3s,background .3s,color .3s;
}
.nav-links a.cta:hover{border-color:var(--gold);background:var(--gold);color:var(--charcoal-deep)}
.nav-toggle{display:none}
@media(max-width:760px){
  .nav-links a:not(.cta){display:none}
}

/* ============================================================
   HERO — letterboxed, drifting atmosphere, grain
   ============================================================ */
.hero{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;padding:120px 0 90px}
.hero-bg{position:absolute;inset:0;z-index:0}
/* cinematic atmosphere: slow-drifting charcoal/oxblood/gold mesh */
.hero-bg::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(closest-side at 22% 30%,rgba(107,31,31,.30),transparent 70%),
    radial-gradient(closest-side at 82% 72%,rgba(201,169,97,.10),transparent 65%),
    radial-gradient(closest-side at 60% 18%,rgba(168,68,68,.10),transparent 60%),
    linear-gradient(160deg,#211d1a 0%,#1C1917 45%,#141210 100%);
  animation:drift 34s var(--ease) infinite alternate;
}
@keyframes drift{0%{transform:translate3d(-2%,-1.5%,0) scale(1.05)}100%{transform:translate3d(2.5%,2%,0) scale(1.12)}}
/* letterbox bars */
.hero::before,.hero::after{content:"";position:absolute;left:0;right:0;height:46px;z-index:2;background:var(--charcoal-deep);pointer-events:none}
.hero::before{top:0;border-bottom:1px solid var(--line-faint)}
.hero::after{bottom:0;border-top:1px solid var(--line-faint)}
/* OPTIONAL: drop a muted film loop in /images/ and uncomment .hero-video in markup */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.55}
.hero-bg.has-video::before{opacity:.5}

.hero-inner{position:relative;z-index:3;width:100%}
.hero-grid{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,64px)}
.hero h1{
  font-size:clamp(2.9rem,9vw,7.4rem);letter-spacing:.01em;color:var(--ivory);
  font-weight:600;margin:.28em 0 .12em;
}
.hero h1 .gild{color:var(--gold)}
.hero .timecode{font-size:.7rem;letter-spacing:.4em;color:var(--muted);text-transform:uppercase;font-variant-numeric:tabular-nums}
.hero .timecode b{color:var(--accent);font-weight:500}
.hero .sub{max-width:46ch;margin:1.6rem 0 2.4rem;font-size:1.06rem;color:#d6cec4}
.hero .actions{display:flex;gap:18px;flex-wrap:wrap;align-items:center}

/* buttons */
.btn{
  font-family:'Montserrat',sans-serif;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;padding:1.05em 2.1em;border:1px solid var(--gold);border-radius:1px;
  cursor:pointer;display:inline-block;transition:all .35s var(--ease);background:transparent;color:var(--gold)
}
.btn-solid{background:var(--gold);color:var(--charcoal-deep)}
.btn-solid:hover{background:var(--gold-light);border-color:var(--gold-light)}
.btn:hover{background:var(--gold);color:var(--charcoal-deep)}
.btn-ghost{border-color:var(--line);color:var(--ivory)}
.btn-ghost:hover{border-color:var(--gold);background:transparent;color:var(--gold)}

/* ---- section scaffolding ---- */
.sec{padding:clamp(74px,11vw,140px) 0}
.sec-head{display:flex;flex-direction:column;gap:1.1rem;margin-bottom:clamp(34px,6vw,68px)}
.sec-head h2{font-size:clamp(2rem,5.2vw,3.6rem);color:var(--ivory);max-width:18ch}
.sec-head h2 em{font-style:italic;color:var(--gold);font-weight:400}

/* ---- positioning band ---- */
.statement{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(60px,9vw,120px) 0;background:var(--charcoal-deep)}
.statement .big{font-size:clamp(1.6rem,4vw,2.9rem);line-height:1.34;max-width:24ch;color:var(--ivory);font-weight:400}
.statement .big .gild{color:var(--gold)}
.statement .sig{margin-top:2.2rem;font-style:italic;color:var(--muted);font-family:'Bodoni Moda',serif}

/* ---- what we shoot (contact-sheet grid) ---- */
.sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-faint);border:1px solid var(--line-faint)}
.cell{background:var(--bg);padding:clamp(28px,3.4vw,46px);min-height:240px;display:flex;flex-direction:column;justify-content:space-between;transition:background .4s var(--ease)}
.cell:hover{background:var(--charcoal-deep)}
.cell .no{font-size:.7rem;letter-spacing:.34em;color:var(--accent);font-variant-numeric:tabular-nums}
.cell h3{font-size:1.5rem;color:var(--gold);margin-top:auto;font-weight:600}
.cell p{font-size:.92rem;margin-top:.7rem;color:var(--muted)}
@media(max-width:860px){.sheet{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sheet{grid-template-columns:1fr}}

/* ---- bundle feature ---- */
.bundle{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,80px);align-items:center}
@media(max-width:900px){.bundle{grid-template-columns:1fr}}
.bundle-card{
  border:1px solid var(--line);background:linear-gradient(165deg,#211d1a,#16140f);
  padding:clamp(34px,4vw,56px);position:relative;
}
.bundle-card::before{content:"";position:absolute;inset:9px;border:1px solid var(--line-faint);pointer-events:none}
.bundle-card .save{font-family:'Bodoni Moda',serif;font-size:clamp(3rem,7vw,4.6rem);color:var(--gold);font-weight:600;line-height:1}
.bundle-card .save span{font-size:1.5rem;vertical-align:super;color:var(--accent)}
.bundle-card .save-l{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:.6rem}
.pairing{display:flex;align-items:center;gap:1rem;margin:2rem 0 0}
.pairing .p{flex:1;text-align:center;padding:1.1rem .6rem;border:1px solid var(--line-faint)}
.pairing .p .pn{font-family:'Bodoni Moda',serif;color:var(--ivory);font-size:1.02rem;letter-spacing:.06em}
.pairing .p .ps{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:.3rem}
.pairing .plus{color:var(--accent);font-family:'Bodoni Moda',serif;font-size:1.6rem}
.list-tick{list-style:none;margin-top:1.5rem}
.list-tick li{padding:.66rem 0 .66rem 1.7rem;position:relative;border-bottom:1px solid var(--line-faint);color:#d6cec4;font-size:.96rem}
.list-tick li::before{content:"";position:absolute;left:0;top:1.15rem;width:9px;height:9px;border:1px solid var(--gold);transform:rotate(45deg)}
.list-tick li:last-child{border-bottom:0}

/* ---- privé band (conferred reward, restrained) ---- */
.prive{background:var(--black);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.prive .frame{position:absolute;inset:clamp(16px,3vw,34px);border:1px solid var(--line);pointer-events:none}
.prive .inner{text-align:center;max-width:60ch;margin:0 auto;position:relative;z-index:1}
.prive .pw{font-family:'Bodoni Moda',serif;letter-spacing:.2em;color:var(--gold);font-size:1.1rem;text-transform:uppercase}
.prive .pw b{color:var(--ivory);font-weight:400}
.prive h2{font-size:clamp(1.7rem,4vw,2.7rem);color:var(--ivory);margin:1.1rem 0 1.2rem}
.prive p{color:#cfc7bd}
.prive .perks{display:flex;gap:2.2rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.prive .perk{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.prive .perk b{color:var(--accent);font-weight:500;display:block;margin-bottom:.3rem;font-size:.7rem}
.prive .lnk{display:inline-block;margin-top:2.2rem;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:.4em;transition:border-color .3s}
.prive .lnk:hover{border-color:var(--gold)}

/* ============================================================
   INQUIRY FORM
   ============================================================ */
.inquire{position:relative}
.form-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,5vw,76px)}
@media(max-width:900px){.form-grid{grid-template-columns:1fr}}
.field{margin-bottom:1.5rem}
.field label{display:block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.field label .req{color:var(--accent)}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--ivory);font-family:'Montserrat',sans-serif;font-size:1rem;font-weight:300;
  padding:.7rem .2rem;transition:border-color .3s;
}
.field input:focus,.field select,.field textarea:focus{outline:none;border-color:var(--gold)}
.field select{color:var(--ivory)}
.field select option{background:var(--charcoal-deep);color:var(--ivory)}
.field textarea{resize:vertical;min-height:96px}
.field input::placeholder,.field textarea::placeholder{color:#6a635b}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media(max-width:520px){.two{grid-template-columns:1fr}}
.consent{display:flex;gap:.8rem;align-items:flex-start;margin:.4rem 0 1.6rem}
.consent input{width:18px;height:18px;min-width:18px;margin-top:3px;accent-color:var(--gold)}
.consent label{font-size:.72rem;letter-spacing:.02em;text-transform:none;color:var(--muted);line-height:1.6;margin:0}
.form-note{font-size:.72rem;color:var(--muted);margin-top:1.2rem;letter-spacing:.02em}
.form-msg{margin-top:1rem;font-size:.86rem;letter-spacing:.04em;min-height:1.2em}
.form-msg.err{color:#e08a8a}
.form-msg.ok{color:var(--gold)}
button[disabled]{opacity:.5;cursor:not-allowed}

/* ============================================================
   UNIFIED FOOTER (Brand Kit §11)
   ============================================================ */
.foot{background:var(--charcoal-deep);border-top:1px solid var(--line);padding:clamp(56px,8vw,92px) 0 40px;text-align:center}
.foot .fcrest{width:46px;margin:0 auto 1.4rem}
.foot .signoff{font-family:'Bodoni Moda',serif;letter-spacing:.2em;text-transform:uppercase;font-size:1rem;color:var(--mark)}
.foot .signoff b{color:var(--accent);font-weight:400}
.foot .tag{font-style:italic;font-family:'Bodoni Moda',serif;color:var(--muted);margin-top:.7rem;font-size:.95rem}
.arms{display:flex;gap:clamp(14px,2.4vw,30px);justify-content:center;flex-wrap:wrap;margin:2.6rem 0;padding:1.6rem 0;border-top:1px solid var(--line-faint);border-bottom:1px solid var(--line-faint)}
.arms a{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.arms a:hover{color:var(--ivory)}
.arms a.current{color:var(--gold);position:relative}
.arms a.current::after{content:"";position:absolute;left:0;right:0;bottom:-.5em;height:1px;background:var(--gold)}
.endorser{display:inline-flex;align-items:center;gap:.7rem;margin-bottom:2rem;color:var(--muted);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;transition:color .3s}
.endorser:hover{color:var(--ivory)}
.endorser img{width:24px;opacity:.85}
.legal{font-size:.68rem;letter-spacing:.06em;color:#6a635b;line-height:2}
.legal a{color:var(--muted);border-bottom:1px solid var(--line-faint)}
.legal a:hover{color:var(--gold)}
.legal .sep{margin:0 .6em;opacity:.5}

/* ---- generic page header (privacy / 404 / thank-you) ---- */
.page{min-height:60svh;padding:clamp(140px,18vh,200px) 0 clamp(60px,9vw,110px)}
.page h1{font-size:clamp(2.2rem,6vw,4rem);color:var(--ivory);margin-bottom:.4em}
.page h1 .gild{color:var(--gold)}
.page h2{font-size:1.3rem;color:var(--gold);margin:2.2rem 0 .7rem}
.page p{margin-bottom:1.1rem;max-width:70ch}
.page a.inline{color:var(--gold);border-bottom:1px solid var(--line)}
.legal-doc p,.legal-doc li{color:#bcb4aa;font-size:.95rem}
.legal-doc ul{margin:0 0 1.1rem 1.2rem}
.legal-doc li{margin-bottom:.5rem}

/* ---- reveal on load / scroll ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.18s}.d3{transition-delay:.30s}.d4{transition-delay:.42s}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}