/* ==========================================================================
   Movement Filmmaker — Sages Media LLC
   Brand: cinematic charcoal / off-white / teal / gold
   ========================================================================== */

:root{
  --bg:        #0E0F10;
  --bg-raise:  #16181A;
  --bg-card:   #1A1D1F;
  --line:      #2A2E31;
  --fg:        #F2F1EC;
  --muted:     #9BA1A6;
  --teal:      #2E6E6A;
  --teal-lt:   #4E9C96;
  --gold:      #C9A24B;
  --radius:    14px;
  --maxw:      760px;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--teal-lt); text-decoration:none; border-bottom:1px solid rgba(78,156,150,.35); }
a:hover{ color:var(--gold); border-bottom-color:rgba(201,162,75,.55); }

img{ max-width:100%; display:block; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 22px 72px; }

/* ---------- Hero ---------------------------------------------------------- */

.hero{
  position:relative;
  min-height:64vh;
  display:flex;
  align-items:flex-end;
  margin-bottom:44px;
  overflow:hidden;
}
.hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.92) contrast(1.02);
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(14,15,16,.55) 0%,rgba(14,15,16,.25) 38%,rgba(14,15,16,.92) 88%,var(--bg) 100%);
}
.hero-inner{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 22px 46px;
  width:100%;
}
.kicker{
  font-size:11.5px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 10px;
  font-weight:500;
}
h1{
  font-family:'Instrument Serif',Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:clamp(2.5rem,8vw,3.9rem);
  line-height:1.02;
  letter-spacing:-.015em;
  margin:0 0 14px;
}
.tagline{
  font-size:1.06rem;
  color:#D6D8D6;
  margin:0;
  max-width:56ch;
}

/* ---------- Sections ------------------------------------------------------ */

.sec-label{
  font-size:11.5px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--muted);
  margin:52px 0 16px;
  font-weight:500;
  border-top:1px solid var(--line);
  padding-top:22px;
}

h2{
  font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;
  font-size:1.72rem;
  line-height:1.18;
  letter-spacing:-.01em;
  margin:0 0 12px;
}

h3{
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:-.005em;
  margin:0 0 7px;
  color:var(--fg);
}

p{ margin:0 0 14px; }
p:last-child{ margin-bottom:0; }

.card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 24px;
}

.card.about{ display:grid; gap:22px; }
.card.about .portrait{
  border-radius:10px;
  aspect-ratio:16/9;
  object-fit:cover;
  width:100%;
}

/* ---------- Offers -------------------------------------------------------- */

.offers{ display:grid; gap:14px; }
.offer{
  background:var(--bg-raise);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
}
.offer .meta{
  display:block;
  margin-top:10px;
  font-size:12.5px;
  color:var(--muted);
  letter-spacing:.02em;
}
.offer .price{
  color:var(--gold);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* ---------- Work strip ---------------------------------------------------- */

.work{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.work img{
  border-radius:9px;
  aspect-ratio:16/9;
  object-fit:cover;
  width:100%;
  filter:saturate(.9);
}

/* ---------- Opt-in form --------------------------------------------------- */

#optin .sub{ color:var(--muted); margin-bottom:20px; }

.field{ margin-bottom:15px; }
.field label{
  display:block;
  font-size:13.5px;
  font-weight:600;
  margin-bottom:6px;
  letter-spacing:.01em;
}
.field input{
  width:100%;
  padding:12px 13px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--fg);
  font-family:inherit;
  font-size:16px;
}
.field input:focus{
  outline:none;
  border-color:var(--teal-lt);
  box-shadow:0 0 0 3px rgba(78,156,150,.16);
}

.consent-intro{
  margin:22px 0 12px;
  font-size:13.4px;
  line-height:1.6;
  color:var(--muted);
}

.consent{
  display:flex;
  gap:11px;
  align-items:flex-start;
  margin:0 0 12px;
  padding:16px 15px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:10px;
  font-size:13.4px;
  line-height:1.6;
  color:#C9CDD0;
}
.consent input[type=checkbox]{
  margin:2px 0 0;
  width:17px; height:17px;
  flex:0 0 auto;
  accent-color:var(--teal-lt);
}
.consent strong{ color:var(--fg); }

.btn{
  width:100%;
  padding:14px 18px;
  background:var(--teal);
  color:#fff;
  border:none;
  border-radius:10px;
  font-family:inherit;
  font-size:15.5px;
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{ background:var(--teal-lt); }
.btn:disabled{ opacity:.6; cursor:default; }

.form-note{
  margin:14px 0 0;
  font-size:12.5px;
  color:var(--muted);
  line-height:1.55;
}

.success{
  display:none;
  padding:20px;
  background:rgba(46,110,106,.13);
  border:1px solid var(--teal);
  border-radius:10px;
  color:#CFE3E1;
}

.error{
  display:none;
  margin-top:16px;
  padding:16px 18px;
  background:rgba(178,74,58,.11);
  border:1px solid #8C4033;
  border-radius:10px;
  color:#E8C4BC;
  font-size:14px;
}

/* ---------- Links --------------------------------------------------------- */

.links{ display:grid; gap:11px; }
.link{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--fg);
  border-bottom:1px solid var(--line);
  transition:border-color .15s ease,background .15s ease;
}
.link:hover{ background:var(--bg-raise); border-color:var(--teal); color:var(--fg); }
.link .ic{ width:21px; height:21px; flex:0 0 auto; color:var(--gold); }
.link .ic svg{ width:100%; height:100%; }
.link .txt{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.link .t{ font-weight:600; font-size:15px; }
.link .s{ font-size:12.8px; color:var(--muted); }
.link .arrow{ color:var(--muted); flex:0 0 auto; }

/* ---------- Legal pages --------------------------------------------------- */

.legal{ padding-top:56px; }
.legal h1{ font-size:clamp(2rem,6vw,2.7rem); margin-bottom:6px; }
.legal .updated{ color:var(--muted); font-size:13.5px; margin-bottom:34px; }
.legal h2{ font-size:1.24rem; margin:36px 0 10px; font-family:'Inter',sans-serif; font-weight:600; letter-spacing:-.005em; }
.legal p,.legal li{ color:#C9CDD0; font-size:15.4px; }
.legal ul{ padding-left:20px; margin:0 0 14px; }
.legal li{ margin-bottom:7px; }
.legal .callout{
  background:var(--bg-card);
  border:1px solid var(--teal);
  border-left-width:3px;
  border-radius:10px;
  padding:18px 20px;
  margin:22px 0;
}
.back{ display:inline-block; margin-bottom:26px; font-size:13.5px; }

/* ---------- Footer -------------------------------------------------------- */

footer{
  margin-top:60px;
  padding-top:28px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:13.2px;
  color:var(--muted);
  line-height:1.6;
}
footer .brandline{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:1.16rem;
  color:var(--fg);
  margin-bottom:4px;
}
footer .legalname{ color:#B4BABE; }
footer .footlinks{ display:flex; gap:16px; flex-wrap:wrap; margin:4px 0 6px; }
footer a{ color:var(--muted); border-bottom-color:rgba(155,161,166,.3); }
footer a:hover{ color:var(--gold); }

/* ---------- Responsive ---------------------------------------------------- */

@media (min-width:640px){
  .card.about{ grid-template-columns:1fr 1fr; align-items:center; }
  .card.about .abouttext{ grid-column:1 / -1; }
}

@media (max-width:520px){
  .work{ grid-template-columns:1fr 1fr; }
  .work img:nth-child(3){ display:none; }
  .hero{ min-height:56vh; }
}