/* ===========================================================
   JZ Creates — Direction A "Reel"
   Fonts: Fraunces (display) + Inter (body) — matches TwoTakesUGC
   =========================================================== */

@font-face{
  font-family:"Display";
  src:url("fonts/fraunces.woff2") format("woff2");
  font-weight:600 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Body";
  src:url("fonts/inter.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
}

:root{
  --bg:#14120e;
  --bg2:#1c1912;
  --ink:#f4eee0;
  --ink-dim:#b7ad98;
  --accent:#d9a441;
  --line:rgba(244,238,224,.14);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Body",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img,video{ max-width:100%; display:block; }
h1,h2,h3{
  font-family:"Display",system-ui,serif;
  font-weight:700;
  text-wrap:balance;
  margin:0;
}

.wrap{ max-width:1180px; margin:0 auto; padding:0 6vw; }
.eyebrow{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); font-weight:600;
}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:44svh; display:flex; flex-direction:column;
  justify-content:flex-end; padding:5vw 6vw 4vw; overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  background: radial-gradient(130% 100% at 75% 0%, #2a2216 0%, var(--bg) 60%);
}
/* Swap in the real hero video: replace .hero-media's contents with
   <video autoplay muted loop playsinline src="assets/hero-reel.mp4"></video>
   sized via CSS (object-fit: cover) — the gradient stays as a fallback background. */
.hero-media video{
  width:100%; height:100%; object-fit:cover;
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, var(--bg) 96%);
}
.hero-id{
  position:relative; z-index:2; display:flex; align-items:center; gap:1.6rem; margin-bottom:.4rem;
}
.hero-avatar{
  width:clamp(72px,11vw,132px); height:clamp(72px,11vw,132px); border-radius:50%;
  object-fit:cover; object-position:50% 28%; flex-shrink:0;
  border:3px solid var(--accent); box-shadow:0 0 0 6px rgba(217,164,65,.12);
  opacity:0; animation:riseIn .7s ease forwards; animation-delay:.05s;
}
.hero-id > div{ opacity:0; animation:riseIn .7s ease forwards; animation-delay:.25s; }
.hero h1{
  position:relative; z-index:2; font-size:clamp(3.2rem,11vw,8.5rem); line-height:.88; letter-spacing:-.01em;
}
.hero-sub{
  position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:baseline; gap:1.6rem;
  margin-top:1.6rem; padding-top:1.6rem; border-top:1px solid var(--line);
  opacity:0; animation:riseIn .7s ease forwards; animation-delay:.45s;
}
@keyframes riseIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
.hero-sub .role{ font-size:1rem; color:var(--ink-dim); letter-spacing:.02em; }
.hero-sub a{
  color:var(--accent); text-decoration:none; font-weight:600; font-size:1rem;
  border-bottom:1px solid transparent;
}
.hero-sub a:hover{ border-color:var(--accent); }

/* ---------- niches ---------- */
.niches{ padding:clamp(2.75rem,6vw,4.5rem) 0 clamp(2rem,4.5vw,3.5rem); border-bottom:1px solid var(--line); }
.niches h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:.4rem; }
.niches .lede{ color:var(--ink-dim); max-width:38ch; font-size:1rem; margin-bottom:clamp(1.6rem,3vw,2.6rem); }
.niche-rail{
  display:flex; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:2px; overflow:hidden;
}
.niche{
  flex:1; min-width:0; background:var(--bg2); padding:1.6rem 1.4rem 1.8rem; position:relative;
}
.niche:nth-child(1){ transition-delay:0s; }
.niche:nth-child(2){ transition-delay:.12s; }
.niche .n-frames{
  display:grid; grid-template-columns:repeat(2,1fr); gap:2px; aspect-ratio:4/5; margin-bottom:1.1rem;
  background:#0d0b08; border:1px solid var(--line); overflow:hidden; transition:border-color .25s ease;
}
/* Swap in real clips: replace each <div> in .n-frames with an <img> or
   short looping <video muted loop autoplay playsinline> for that niche's proof frames. */
.niche .n-frames div{ background:linear-gradient(160deg,#241f16,#14120e); }
.niche.open .n-frames div{
  background:repeating-linear-gradient(45deg,#1a170f,#1a170f 6px,#14120e 6px,#14120e 12px);
}
.niche .n-tag, .tech-card .n-tag{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  display:block; margin-bottom:.4rem; font-weight:600;
}
.niche h3, .tech-card h3{ font-size:1.3rem; margin-bottom:.35rem; }
.niche p, .tech-card p{ color:var(--ink-dim); font-size:.88rem; line-height:1.5; margin:0; }

/* ---------- tech work ---------- */
.tech-work{ padding:clamp(2.75rem,6vw,4.5rem) 0 clamp(2rem,4.5vw,3.5rem); border-bottom:1px solid var(--line); }
.tech-work h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:.4rem; }
.tech-work .lede{ color:var(--ink-dim); max-width:38ch; font-size:1rem; margin-bottom:clamp(1.6rem,3vw,2.6rem); }
.tech-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:2px; overflow:hidden;
}
.tech-card{ background:var(--bg2); padding:1.6rem 1.4rem 1.8rem; }
.tech-card:hover{ background-color:#242018; }
.tech-card:nth-child(1){ transition-delay:0s; }
.tech-card:nth-child(2){ transition-delay:.12s; }
.tech-card:nth-child(3){ transition-delay:.24s; }
.tech-card:nth-child(4){ transition-delay:.36s; }
.tech-video{
  aspect-ratio:9/16; margin-bottom:1.1rem; background:#0d0b08; border:1px solid var(--line); overflow:hidden;
  transition:border-color .25s ease;
}
.tech-card:hover .tech-video, .niche:hover .n-frames{ border-color:var(--accent); }
.tech-video video{ width:100%; height:100%; object-fit:cover; }

.wellness-grid{ grid-template-columns:repeat(2,1fr); max-width:640px; }

/* ---------- brands ---------- */
.brands{ padding:clamp(2.5rem,5.5vw,4rem) 0 clamp(2rem,4.5vw,3.5rem); border-bottom:1px solid var(--line); }
.brands .eyebrow{ display:block; margin-bottom:.9rem; }
.brands h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:clamp(1.4rem,3vw,2.4rem); }
.brand-strip{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem 3rem;
}
.brand-strip li{
  font-family:"Display",system-ui,serif; font-weight:600;
  font-size:clamp(1.15rem,2.6vw,1.7rem); letter-spacing:.01em;
  color:var(--ink-dim); display:inline-block;
  transition:color .25s ease, transform .25s ease;
}
.brand-strip li:hover{ color:var(--accent); transform:scale(1.12); }

/* ---------- bio ---------- */
.bio{
  padding:clamp(2.75rem,6vw,4.5rem) 0; display:grid; grid-template-columns:1.15fr .85fr; gap:5vw; border-bottom:1px solid var(--line);
}
.bio .eyebrow,
.why .eyebrow{ display:block; margin-bottom:1rem; }
.bio p{ color:var(--ink-dim); font-size:1.05rem; line-height:1.7; max-width:56ch; }
.why ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.1rem; }
.why li{
  padding-left:1.6rem; position:relative; color:var(--ink-dim); font-size:.96rem; line-height:1.55;
}
.why li::before{
  content:""; position:absolute; left:0; top:.5em; width:.6rem; height:1px; background:var(--accent);
}

/* ---------- cta ---------- */
.cta{ padding:clamp(3rem,6.5vw,4.75rem) 0 clamp(2.25rem,5vw,3.75rem); text-align:center; }
.status{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:1.6rem;
}
.status i{ width:7px; height:7px; border-radius:50%; background:#77c17f; box-shadow:0 0 0 3px #77c17f26; }
.cta h2{ font-size:clamp(2rem,5.4vw,3.4rem); max-width:22ch; margin:0 auto 1.8rem; line-height:1.05; }
.cta a.btn{
  display:inline-block; margin-top:.5rem; padding:1rem 2.1rem; background:var(--accent); color:#14120e;
  text-decoration:none; font-weight:700; border-radius:2px; letter-spacing:.02em;
  transition:transform .15s ease;
}
.cta a.btn:hover{ transform:translateY(-2px); }
.cta .mail{ display:block; margin-top:1.3rem; color:var(--ink-dim); text-decoration:none; font-size:.95rem; }
.cta .mail:hover{ color:var(--accent); }

footer{ padding:2.4rem 0; text-align:center; color:#5c5648; font-size:.76rem; letter-spacing:.06em; }

/* ---------- reveal-on-scroll ---------- */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease, background-color .25s ease;
}
.reveal.in{ opacity:1; transform:none; transition-delay:0s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-avatar, .hero-id > div, .hero-sub{ opacity:1; animation:none; }
}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .bio{ grid-template-columns:1fr; gap:2.4rem; }
  .niche-rail{ flex-direction:column; }
  .tech-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .hero{ min-height:38svh; }
  .hero-id{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .hero h1{ font-size:clamp(2.6rem,16vw,8.5rem); }

  .niches, .tech-work{ padding:2.4rem 0 2rem; }
  .brands{ padding:2.2rem 0 2rem; }
  .bio{ padding:2.4rem 0; }
  .cta{ padding:2.75rem 0 2.25rem; }

  .tech-card{ padding:1.1rem 1rem 1.3rem; }
  .tech-video{ margin-bottom:.8rem; }
  .brand-strip{ gap:.5rem 1.6rem; }
}