/* ── RESET & TOKENS ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:       #4f4e4e;
  --bg2:      #0f0f0f;
  --bg3:      #141414;
  --text:     #ede8e0;
  --muted:    #6b6560;
  --gold:     #c9a96e;
  --gold-dim: rgba(201,169,110,.15);
  --border:   rgba(255,255,255,.07);
  --hh:       68px;
  --serif:    'Cormorant Garamond', Georgia, serif;
  --sans:     'Inter', system-ui, sans-serif;
  --ease:     cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
button { cursor: pointer; }
a { text-decoration: none; color: inherit; }

/* ── HEADER ── */
#header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--hh);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6%;
  background: rgba(7,7,7,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: background .3s var(--ease);
}

.brand {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text);
}
.brand em { font-style: normal; color: var(--gold); }

nav { display: flex; align-items: center; gap: 2.4rem; }

nav a {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  transition: color .25s;
}
nav a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .3s var(--ease);
}
nav a:hover, nav a.active { color: var(--gold); }
nav a:hover::after, nav a.active::after { width: 100%; }

/* hamburger */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px 4px;
}
.burger span {
  display: block;
  width: 22px; height: 1px;
  background: var(--text);
  transition: transform .3s, opacity .3s;
}
.burger.open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }

#nav-drawer {
  display: none;
  position: fixed;
  top: var(--hh); left: 0;
  width: 100%; z-index: 850;
  background: rgba(7,7,7,.97);
  padding: 2rem 6%;
  border-bottom: 1px solid var(--border);
  flex-direction: column;
  gap: 1.6rem;
}
#nav-drawer.open { display: flex; }
#nav-drawer a {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s;
}
#nav-drawer a:hover { color: var(--gold); }

/* ── HERO ── */
#home {
  position: relative;
  width: 90%;
  max-width: 1400px;
  margin: calc(var(--hh) + 40px) auto 60px;
  height: clamp(320px, 55vh, 600px);
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
}

#hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .45;
  transition: opacity .6s;
}

.hero-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(7,7,7,.55) 0%, transparent 35%),
    linear-gradient(to top,    rgba(7,7,7,.85) 0%, transparent 45%);
  pointer-events: none;
  z-index: 1;
}

#hero-copy {
  position: relative; z-index: 2;
  text-align: center;
  padding: 0 5%;
  pointer-events: none;
  transition: opacity .4s, transform .4s;
}
#hero-copy.hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }

.hero-tag {
  font-size: .65rem;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
}

.hero-h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: .04em;
  color: var(--text);
  margin-bottom: 1.4rem;
}

.hero-sub {
  font-size: .82rem;
  letter-spacing: .18em;
  color: rgba(237,232,224,.5);
  max-width: 340px;
  margin: 0 auto;
}

/* play overlay */
#hero-play {
  position: absolute; inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: none;
  border: none;
}
#hero-play.hidden { display: none; }

.play-ring {
  width: 78px; height: 78px;
  border-radius: 50%;
  border: 1.5px solid rgba(201,169,110,.7);
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,169,110,.08);
  backdrop-filter: blur(4px);
  transition: background .3s, border-color .3s, transform .3s;
}
#hero-play:hover .play-ring {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.08);
}
.play-ring svg { fill: var(--gold); width: 26px; height: 26px; margin-left: 5px; transition: fill .3s; }
#hero-play:hover .play-ring svg { fill: #000; }
.play-label { font-size: .65rem; letter-spacing: .4em; text-transform: uppercase; color: rgba(237,232,224,.6); }

/* hero video */
#hero-frame {
  display: none;
  position: absolute; inset: 0; z-index: 4;
}
#hero-frame.on { display: block; }
#hero-frame video {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #000;
  object-fit: cover;
}

#close-hero {
  display: none;
  position: absolute;
  top: 14px; right: 5%;
  z-index: 5;
  background: rgba(0,0,0,.6);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--sans);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 8px 18px;
  transition: background .2s;
}
#close-hero.on { display: block; }
#close-hero:hover { background: rgba(255,255,255,.08); }

/* scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.scroll-cue span { font-size: .58rem; letter-spacing: .4em; text-transform: uppercase; color: var(--muted); }
.scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue { 0%,100%{opacity:.3;transform:scaleY(.9)} 50%{opacity:1;transform:scaleY(1.1)} }

/* ── SECTION SHELL ── */
.section {
  padding: 110px 6%;
}

.eyebrow {
  font-size: .62rem;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .6rem;
}

.section-h {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.5vw, 3.4rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--text);
}

/* ── ABOUT ── */
#about { background: var(--bg2); }

.about-inner {
  max-width: 1080px; margin: 0 auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
  align-items: center;
}

.about-photo-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.about-photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(201,169,110,.18);
  pointer-events: none;
}
.about-photo-wrap::before {
  content: '';
  position: absolute;
  top: -14px; left: -14px;
  right: 14px; bottom: -14px;
  border: 1px solid rgba(201,169,110,.2);
  pointer-events: none;
  z-index: 0;
}

.about-photo-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  position: relative; z-index: 1;
  filter: grayscale(15%) contrast(1.05);
  transition: transform 6s var(--ease);
}
.about-photo-wrap:hover img { transform: scale(1.03); }

.about-photo-placeholder {
  width: 100%; height: 100%;
  background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.about-photo-placeholder svg { width: 64px; opacity: .15; fill: var(--gold); }

.about-text { display: flex; flex-direction: column; gap: 1rem; }
.about-text .section-h { margin-bottom: .4rem; }

.about-body {
  font-size: .95rem;
  color: rgba(237,232,224,.6);
  line-height: 1.9;
}

.divider {
  width: 40px; height: 1px;
  background: var(--gold);
  opacity: .4;
  margin: 1rem 0;
}

.stats {
  display: flex; gap: 2.5rem;
  margin-top: .5rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--border);
}
.stat-n {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--gold);
  display: block;
  line-height: 1;
}
.stat-l {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .35rem;
}

/* ── WORK ── */
#work { background: var(--bg); }

.work-head {
  max-width: 1080px; margin: 0 auto 3.5rem;
}

.work-grid {
  max-width: 1080px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.v-card {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg3);
  cursor: pointer;
  border-radius: 12px;
}

.v-card video,
.v-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease), opacity .3s;
}
.v-card:hover video,
.v-card:hover img { transform: scale(1.05); }

.v-card-mask {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.18) 48%, rgba(0,0,0,.38)),
    rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s;
}
.v-card:hover .v-card-mask {
  background:
    linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.08) 48%, rgba(0,0,0,.28)),
    rgba(0,0,0,.08);
}

.v-ring {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1.5px solid rgba(201,169,110,.85);
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,169,110,.1);
  transition: background .3s, border-color .3s, transform .3s;
}
.v-card:hover .v-ring {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.12);
}
.v-ring svg { fill: var(--gold); width: 18px; margin-left: 3px; transition: fill .3s; }
.v-card:hover .v-ring svg { fill: #000; }

.v-title {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  color: var(--text);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1.35;
  text-transform: uppercase;
  text-wrap: balance;
}

/* ── MODAL ── */
#modal {
  display: none;
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.93);
  align-items: center; justify-content: center;
}
#modal.on { display: flex; }

.modal-box {
  position: relative;
  width: min(940px, 92vw);
  aspect-ratio: 16/9;
}
.modal-box video,
.modal-box iframe { width: 100%; height: 100%; border: none; display: block; background: #000; }
#modal-iframe { display: none; }

#modal-close {
  position: absolute;
  top: -38px; right: 0;
  background: none; border: none;
  color: rgba(237,232,224,.55);
  font-family: var(--sans);
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 7px;
  transition: color .2s;
}
#modal-close:hover { color: var(--text); }
#modal-close svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ── CONTACT ── */
#contact { background: var(--bg2); }

.contact-inner {
  max-width: 600px; margin: 0 auto;
  text-align: center;
}
.contact-inner .section-h { margin-bottom: .8rem; }

.contact-sub {
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: 3.2rem;
}

.cform {
  text-align: left;
  display: flex; flex-direction: column; gap: 1.2rem;
}

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

.field { display: flex; flex-direction: column; gap: .35rem; }
.field label {
  font-size: .62rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field textarea {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 300;
  padding: 12px 14px;
  outline: none;
  resize: none;
  transition: border-color .25s;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(107,101,96,.6); }
.field input:focus, .field textarea:focus { border-color: rgba(201,169,110,.5); }
.field textarea { min-height: 120px; }

.submit-btn {
  align-self: flex-start;
  background: var(--gold);
  color: #000;
  border: none;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  padding: 14px 38px;
  transition: background .25s, opacity .25s;
}
.submit-btn:hover { background: var(--text); }
.submit-btn:disabled { opacity: .5; }

#form-msg {
  font-size: .82rem;
  display: none;
  padding: 4px 0;
}
#form-msg.ok  { display: block; color: #7ed4a4; }
#form-msg.err { display: block; color: #e87070; }

/* ── FOOTER ── */
footer {
  background: #000;
  padding: 2.2rem 6%;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--border);
}
.foot-brand {
  font-family: var(--serif);
  font-size: .95rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.foot-brand em { font-style: normal; color: var(--gold); }
.foot-copy { font-size: .72rem; color: var(--muted); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .about-inner { grid-template-columns: 1fr; gap: 48px; }
  .about-photo-wrap { max-width: 420px; margin: 0 auto; }
  #home {
    width: 95%;
    height: clamp(260px, 45vh, 480px);
  }
}

@media (max-width: 680px) {
  nav { display: none; }
  .burger { display: flex; }
  .work-grid { grid-template-columns: 1fr; gap: 20px; }
  .row2 { grid-template-columns: 1fr; }
  .section { padding: 75px 6%; }
  .stats { gap: 1.8rem; }
  #home {
    width: 100%;
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    height: clamp(240px, 40vh, 400px);
  }
}

@media (max-width: 400px) {
  .hero-h1 { font-size: 2rem; }
}