/* ============================================================
   Benny Morgan — UGC portfolio
   Pure black, off-white, one accent. Mobile-first.
   ============================================================ */

:root{
  --bg:        #000000;
  --ink:       #ece9e1;   /* off-white text            */
  --ink-dim:   #8a8880;   /* dim labels / secondary     */
  --ink-faint: #4a4944;   /* borders / hairlines        */
  --accent:    #e3a94e;   /* single warm accent — swap this one line to re-theme */
  --accent-ink:#000000;   /* text on accent             */

  --maxw: 1160px;
  --pad: clamp(20px, 5vw, 40px);
  --gap-section: clamp(96px, 16vw, 200px);

  --font-display: "Georgia", "Times New Roman", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--accent); color:var(--accent-ink); }

/* ---------- shared bits ---------- */
.kicker{
  margin:0 0 18px;
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-dim);
  font-weight:600;
}

.section-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.02;
  font-size:clamp(2.2rem, 7vw, 4rem);
}

.section-head{
  max-width:var(--maxw);
  margin:0 auto clamp(40px,7vw,72px);
  padding:0 var(--pad);
}
.section-head--split{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.rates{
  margin:0;
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-dim);
  white-space:nowrap;
  padding-bottom:.4em;
}

/* ---------- nav ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(0,0,0,.72);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.nav.is-scrolled{ border-bottom-color:var(--ink-faint); }
.nav__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav__mark{
  font-family:var(--font-display);
  font-size:20px;
  letter-spacing:.06em;
  font-weight:400;
}
.nav__links{
  display:flex;
  align-items:center;
  gap:clamp(16px,4vw,32px);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.nav__links a{ color:var(--ink-dim); transition:color .2s ease; }
.nav__links a:hover{ color:var(--ink); }
.nav__cta{
  color:var(--ink) !important;
  border:1px solid var(--ink-faint);
  padding:8px 16px;
  transition:border-color .2s ease, color .2s ease;
}
.nav__cta:hover{ border-color:var(--accent); color:var(--accent) !important; }

/* ---------- hero ---------- */
.hero{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(56px,12vw,120px) var(--pad) var(--gap-section);
}
.hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(40px,7vw,72px);
  align-items:center;
}
.hero__name{
  margin:0 0 28px;
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.03em;
  line-height:.92;
  font-size:clamp(3.4rem, 18vw, 9rem);
}
.hero__lede{
  margin:0 0 36px;
  max-width:40ch;
  font-size:clamp(1rem,2.6vw,1.25rem);
  color:#c7c4bc;
}
.hero__portrait img{
  width:100%;
  height:auto;
  border:1px solid var(--ink-faint);
  filter:grayscale(100%) contrast(1.02);
}

/* button */
.btn{
  display:inline-block;
  background:var(--accent);
  color:var(--accent-ink);
  font-weight:600;
  font-size:14px;
  letter-spacing:.06em;
  padding:16px 30px;
  border:1px solid var(--accent);
  transition:background .2s ease, color .2s ease;
}
.btn:hover{ background:transparent; color:var(--accent); }

/* ---------- work ---------- */
.work{ padding-bottom:var(--gap-section); }
.work__row{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px,5vw,40px);
}
.card{ margin:0; }
.card__media{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:1px solid var(--ink-faint);
  background:#0d0d0d;
  cursor:pointer;
  overflow:hidden;
  aspect-ratio:9/16;
  transition:border-color .25s ease;
}
.card__media:hover{ border-color:var(--ink-dim); }
.card__media:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.card__video{
  width:100%;
  height:100%;
  object-fit:cover;
}
.card__play{
  position:absolute;
  inset:0;
  margin:auto;
  width:60px; height:60px;
  border:1px solid rgba(236,233,225,.7);
  border-radius:50%;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.card__play::after{
  content:"";
  position:absolute;
  top:50%; left:54%;
  transform:translate(-50%,-50%);
  border-style:solid;
  border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--ink);
}
.card__media:hover .card__play{ opacity:0; transform:scale(.85); }
.card__meta{
  padding:16px 2px 0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.card__brand{
  font-family:var(--font-display);
  font-size:1.4rem;
  letter-spacing:-.01em;
}
.card__format{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

/* ---------- services ---------- */
.services{ padding-bottom:var(--gap-section); }
.services__row{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid var(--ink-faint);
}
.svc{
  padding:clamp(28px,5vw,44px) 0;
  border-bottom:1px solid var(--ink-faint);
}
.svc__title{
  margin:0 0 20px;
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.01em;
  font-size:clamp(1.6rem,4vw,2.1rem);
}
.svc__list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
  max-width:44ch;
}
.svc__list li{
  position:relative;
  padding-left:22px;
  color:#c2bfb7;
  font-size:1rem;
}
.svc__list li::before{
  content:"";
  position:absolute;
  left:0; top:.7em;
  width:8px; height:1px;
  background:var(--accent);
}

/* ---------- cta ---------- */
.cta{
  padding:0 var(--pad) var(--gap-section);
  text-align:center;
}
.cta__inner{ max-width:820px; margin:0 auto; }
.cta__title{
  margin:0 0 24px;
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.03em;
  line-height:1;
  font-size:clamp(2.6rem,10vw,5.5rem);
}
.cta__line{
  margin:0 auto 32px;
  max-width:46ch;
  color:#c7c4bc;
  font-size:clamp(1rem,2.6vw,1.15rem);
}
.cta__email{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,5vw,2rem);
  letter-spacing:-.01em;
  border-bottom:1px solid var(--ink-faint);
  padding-bottom:4px;
  transition:color .2s ease, border-color .2s ease;
}
.cta__email:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------- footer ---------- */
.footer{
  border-top:1px solid var(--ink-faint);
  padding:40px var(--pad);
}
.footer__inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.footer__social{
  margin:0; padding:0;
  list-style:none;
  display:flex;
  gap:24px;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.footer__social a{ color:var(--ink-dim); transition:color .2s ease; }
.footer__social a:hover{ color:var(--accent); }
.footer__copy{
  margin:0;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--ink-dim);
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  place-items:center;
  padding:clamp(16px,4vw,48px);
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.lightbox.is-open{ display:grid; }
.lightbox__stage{
  width:min(92vw, calc((100vh - 96px) * 9 / 16));
}
.lightbox__video{
  width:100%;
  height:auto;
  max-height:calc(100vh - 96px);
  aspect-ratio:9/16;
  background:#000;
  border:1px solid var(--ink-faint);
  object-fit:contain;
}
.lightbox__close{
  position:absolute;
  top:clamp(12px,3vw,24px);
  right:clamp(12px,3vw,24px);
  width:44px; height:44px;
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink-faint);
  font-size:18px;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.lightbox__close:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- scroll reveal (only hidden when JS is present) ---------- */
.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- desktop ---------- */
@media (min-width:760px){
  .hero__grid{ grid-template-columns:1.1fr .9fr; }
  .work__row{ grid-template-columns:repeat(3,1fr); }
  .services__row{
    grid-template-columns:repeat(3,1fr);
    gap:clamp(28px,4vw,48px);
  }
  .svc{ border-bottom:none; padding-top:clamp(28px,4vw,44px); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}