/* ============================================================
   UGC PORTFOLIO — stylesheet
   Change the whole look from the variables below.
   ============================================================ */

:root{
  --cream:      #faf1e6;   /* page background      */
  --cream-deep: #f2e5d3;   /* alt section band     */
  --ink:        #232924;   /* body + headline text */
  --brown:      #2e1410;   /* accent / buttons     */
  --white:      #ffffff;

  --pad:   clamp(20px, 5vw, 72px);   /* page side padding */
  --gap:   clamp(12px, 1.6vw, 24px); /* grid gap          */
  --maxw:  1500px;

  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --script: "Bangers", cursive;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

/* menu links jump to a section top; stop clear of the fixed bar */
main > section[id]{ scroll-margin-top:96px; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }

/* ---------- media placeholders (disappear once files exist) ---------- */
.ph{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:12px; text-align:center;
  border:1px dashed rgba(35,41,36,.35);
  background:rgba(35,41,36,.04);
  color:rgba(35,41,36,.55);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.ph span{ font-weight:700; font-size:12px; }
.ph small{ font-size:10px; letter-spacing:.06em; opacity:.75; text-transform:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  padding:.72em 1.5em;
  border:2px solid var(--brown);
  border-radius:999px;
  background:var(--cream);
  color:var(--brown);
  font-weight:800; font-size:clamp(12px,1.05vw,16px);
  letter-spacing:.04em; white-space:nowrap;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.btn:hover{ background:var(--brown); color:var(--cream); transform:translateY(-2px); }
.btn.big{ font-size:clamp(15px,1.6vw,22px); padding:.8em 2em; }

.eyebrow{
  margin:0;
  font-size:clamp(9px,.78vw,12px);
  font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}

.section-label{
  margin:0 0 clamp(20px,3vw,44px);
  font-size:clamp(11px,1vw,14px);
  font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  text-align:center;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; padding:clamp(14px,2.2vw,30px) var(--pad);
  mix-blend-mode:normal;
  transition:background .3s ease, padding .3s ease;
}
.topbar.stuck{ background:rgba(250,241,230,.92); backdrop-filter:blur(10px); padding-top:12px; padding-bottom:12px; }
.topbar-left{ display:grid; gap:2px; }
.topbar-right{ display:flex; gap:12px; align-items:center; }
.socials{ display:flex; gap:8px; align-items:center; }
.social{
  display:grid; place-items:center;
  width:40px; height:40px;
  border:2px solid var(--brown); border-radius:999px;
  background:var(--cream);
  color:var(--brown);
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.social svg{ width:20px; height:20px; display:block; }
.social:hover{ background:var(--brown); color:var(--cream); transform:translateY(-2px); }

.burger{
  position:absolute; left:50%; top:clamp(14px,2.2vw,30px); transform:translateX(-50%);
  display:grid; place-content:center; gap:5px;
  width:40px; height:40px; padding:0;
  background:var(--cream); border:0; border-radius:999px;
  cursor:pointer; color:var(--brown);
}
.burger span{ display:block; width:18px; height:2px; background:currentColor; transition:transform .3s ease, opacity .2s ease; }

/* while the fullscreen menu is open the bar sits on brown — flip it to cream */
body.nav-open .topbar{ color:var(--cream); background:none; backdrop-filter:none; }
body.nav-open .btn,
body.nav-open .social{ color:var(--cream); border-color:var(--cream); background:none; }
body.nav-open .burger{ background:none; color:var(--cream); }
body.nav-open .social:hover{ background:var(--cream); color:var(--brown); }
body.nav-open .btn:hover{ background:var(--cream); color:var(--brown); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* ============================================================
   FULLSCREEN MENU
   ============================================================ */
.menu{
  position:fixed; inset:0; z-index:55;
  background:var(--brown); color:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(28px,6vh,60px);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s;
}
.menu.open{ opacity:1; visibility:visible; }
.menu ul{ display:grid; gap:clamp(6px,1.4vh,16px); text-align:center; }
.menu li a{
  font-size:clamp(34px,7vw,84px); font-weight:800; letter-spacing:-.03em;
  opacity:.75; transition:opacity .2s ease, transform .2s ease; display:inline-block;
}
.menu li a:hover{ opacity:1; transform:translateX(6px); }
.menu-foot{ display:flex; gap:22px; font-size:12px; font-weight:700; letter-spacing:.2em; opacity:.7; }

/* ============================================================
   HERO  —  split: copy left, photo right
   ============================================================ */
.hero{
  position:relative;
  /* deliberately short of a full screen, so the next section peeks above the
     fold and the page reads as one piece rather than a cover slide */
  min-height:clamp(540px,80svh,840px);
  display:grid;
  grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  align-items:stretch;
  padding:0;
  overflow:hidden;
}

.hero-copy{
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(96px,13vh,140px) clamp(28px,4vw,64px) clamp(60px,9vh,96px) var(--pad);
}

.hero-eyebrow{
  margin:0 0 clamp(14px,2vh,22px);
  font-size:clamp(11px,1vw,14px);
  font-weight:800; letter-spacing:.26em; text-transform:uppercase;
  color:var(--brown);
}

.hero-name{
  margin:0;
  display:grid;
  font-family:var(--script);
  font-size:clamp(46px,6.2vw,104px);
  line-height:.94; letter-spacing:.02em;
  color:var(--brown);
}

.hero-stroke{
  width:min(100%,420px); height:clamp(26px,3vw,44px);
  margin:clamp(6px,1.2vh,14px) 0 clamp(18px,2.6vh,30px);
}
.hero-stroke path{
  fill:none; stroke:var(--brown);
  stroke-width:5; stroke-linecap:round;
  stroke-dasharray:900; stroke-dashoffset:900;
  animation:draw 1.4s .3s ease forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

.hero-sub{
  margin:0;
  max-width:34ch;
  font-size:clamp(15px,1.25vw,19px); font-weight:300; line-height:1.55;
  letter-spacing:-.01em;
}

.hero-photo{
  position:relative; margin:0;
  min-height:0;
  background:var(--cream-deep);
  overflow:hidden;
}
.hero-photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 42%;
  opacity:0; transition:opacity .6s ease;
}
.hero-photo img.loaded{ opacity:1; }

.scroll-cue{
  position:absolute; left:var(--pad); bottom:clamp(20px,4vh,40px);
  font-size:20px; opacity:.5;
  animation:bob 2s infinite ease-in-out;
}
@keyframes bob{ 50%{ transform:translateY(8px); } }

/* ============================================================
   ABOUT
   ============================================================ */
.about{
  position:relative;
  /* text sits high in the band and the empty space falls below it, so the
     lower two-thirds of the background video stays unobstructed */
  padding:clamp(72px,10vh,130px) var(--pad) clamp(150px,28.8vh,370px);
  overflow:hidden;
}
.about-inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; }

/* background video layer */
.about-bg-wrap{ position:absolute; inset:0; z-index:0; background:var(--cream-deep); }
.about-bg{ width:100%; height:100%; object-fit:cover; }
.about-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to right,
    rgba(250,241,230,.74) 0%,
    rgba(250,241,230,.46) 34%,
    rgba(250,241,230,.16) 62%,
    rgba(250,241,230,.06) 100%);
}
.ph-aboutbg{ border:0; }

.traits{ display:grid; gap:clamp(3px,.6vh,8px); }
.traits li{
  font-size:clamp(16px,2.3vw,34px);
  font-weight:800; letter-spacing:-.03em; line-height:1.15;
  color:var(--ink);
  transition:color .25s ease, transform .25s ease;
}
.traits li:hover{ color:var(--brown); transform:translateX(8px); }

.about-copy{
  max-width:60ch; margin:clamp(28px,4.5vh,64px) 0 0;
  font-size:clamp(15px,1.35vw,21px); font-weight:300; line-height:1.6;
  letter-spacing:-.01em;
}

/* ============================================================
   BRAND MARQUEE
   ============================================================ */
.brands{
  padding:clamp(48px,7vh,100px) 0;
  background:var(--cream-deep);
  overflow:hidden;
}
.marquee{ display:flex; width:max-content; animation:slide 60s linear infinite; }
.marquee.reverse{ animation-direction:reverse; margin-top:clamp(10px,2vh,26px); }
.marquee:hover{ animation-play-state:paused; }
.marquee-track{ display:flex; align-items:center; gap:clamp(14px,1.8vw,28px); padding-right:clamp(14px,1.8vw,28px); }

/* each brand sits in its own circle */
.marquee-track li{
  flex:0 0 auto;
  width:clamp(112px,12vw,170px); height:clamp(112px,12vw,170px);
  display:grid; place-items:center;
  padding:clamp(16px,1.8vw,26px);
  border:2px solid rgba(46,20,16,.22); border-radius:50%;
  background:var(--cream);
}
.marquee-track li span{
  font-size:clamp(10px,.95vw,13px); font-weight:800; letter-spacing:.1em;
  line-height:1.2; text-align:center; color:var(--brown); opacity:.75;
}
.marquee-track img{
  /* cap the height so square symbols and wide wordmarks read at the same weight */
  max-height:clamp(26px,3vw,46px); max-width:100%;
  width:auto; height:auto;
}

/* an app-icon logo fills its circle edge to edge instead of floating inside it */
.marquee-track li.fill{ padding:0; overflow:hidden; border-color:transparent; }
.marquee-track li.fill img{
  width:100%; height:100%; max-width:none; max-height:none;
  object-fit:cover;
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================================================
   PORTFOLIO GRIDS
   ============================================================ */
.work{ padding:clamp(64px,8.5vh,120px) var(--pad); max-width:var(--maxw); margin:0 auto; }

.gallery-title{
  margin:0 0 clamp(22px,3.8vh,50px);
  font-size:clamp(38px,7.4vw,116px);
  font-weight:800; letter-spacing:-.045em; line-height:.92;
}
.gallery-title em{ font-style:normal; font-weight:300; }

.grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:var(--gap);
}

.tile{
  position:relative;
  background:var(--cream-deep);
  overflow:hidden;
}
.tile::before{ content:""; display:block; padding-top:177.78%; } /* 9:16 */
.tile video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.tile:hover video{ transform:scale(1.04); }

/* per-tile controls — tiles hold a still frame until the viewer presses play,
   so the buttons stay visible rather than waiting for a hover */
.tile-ctrls{
  position:absolute; top:10px; right:10px; z-index:4;
  display:flex; gap:8px;
}

.tile-ctrls button{
  width:38px; height:38px; border:0; border-radius:999px;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(20,10,8,.5); color:#fff;
  backdrop-filter:blur(4px);
  transition:background .2s ease;
}
.tile-ctrls button:hover{ background:rgba(20,10,8,.82); }
.tile-ctrls svg{ width:19px; height:19px; display:block; }

.tile-mute .ico-on{ display:none; }
.tile-mute.on .ico-on{ display:block; }
.tile-mute.on .ico-off{ display:none; }

.tile-play .ico-play{ display:none; }
.tile-play.paused .ico-play{ display:block; }
.tile-play.paused .ico-pause{ display:none; }

.tile-cap{
  position:absolute; left:0; right:0; bottom:0; margin:0;
  padding:clamp(14px,2vw,22px);
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  color:var(--white);
  font-size:clamp(10px,.85vw,12px); font-weight:700; letter-spacing:.16em;
  opacity:0; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.tile:hover .tile-cap{ opacity:1; transform:none; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{
  padding:clamp(64px,8.5vh,120px) var(--pad);
  background:var(--brown); color:var(--cream);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(36px,6vw,90px);
  max-width:none;
}
.quote blockquote{
  margin:0 0 20px;
  font-size:clamp(17px,1.9vw,30px); font-weight:300; line-height:1.42;
  letter-spacing:-.02em;
}
.quote-by{ margin:0; font-size:11px; font-weight:700; letter-spacing:.24em; opacity:.65; }

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta{
  padding:clamp(72px,11vh,150px) var(--pad);
  text-align:center;
}
.cta-title{
  margin:0 0 clamp(22px,3.8vh,44px);
  font-size:clamp(56px,14vw,220px);
  font-weight:800; letter-spacing:-.05em; line-height:.86;
}
.cta-title em{ font-family:var(--script); font-style:normal; font-weight:400; color:var(--brown); letter-spacing:0; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-mail{ margin:clamp(26px,4vh,44px) 0 0; font-size:clamp(11px,1vw,14px); font-weight:700; letter-spacing:.2em; }
.cta-socials{
  display:flex; gap:14px; justify-content:center; align-items:center;
  margin-top:clamp(18px,2.6vh,28px);
}
/* the icon buttons ride a little larger down here than in the top bar */
.cta-socials .social{ width:52px; height:52px; }
.cta-socials .social svg{ width:24px; height:24px; }

.footer{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:22px var(--pad) 30px;
  border-top:1px solid rgba(35,41,36,.15);
  font-size:10px; font-weight:700; letter-spacing:.2em;
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
/* scoped to .js so content still shows if JavaScript never runs */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .grid{ grid-template-columns:repeat(4,1fr); }
}

@media (max-width:900px){
  /* phones: keep the social icons, drop the EMAIL ME pill, clear the burger */
  .topbar-right{ margin-right:46px; }
  .topbar-right .btn{ display:none; }
  .social{ width:34px; height:34px; }
  .social svg{ width:17px; height:17px; }
  .burger{ left:auto; right:var(--pad); transform:none; }

  /* hero stacks: copy first so the name is above the fold, photo below */
  .hero{ grid-template-columns:1fr; grid-template-rows:auto auto; min-height:0; }
  .hero-copy{ padding:clamp(84px,12vh,112px) var(--pad) clamp(22px,3.5vh,32px); }
  .hero-sub{ max-width:none; }
  .hero-photo{ min-height:clamp(300px,44svh,440px); height:auto; }
  .hero-photo img{ object-position:50% 38%; }
  .scroll-cue{ display:none; }

  .grid{ grid-template-columns:repeat(2,1fr); }
  .about-scrim{ background:rgba(250,241,230,.8); }
}

@media (max-width:560px){
  .grid{ grid-template-columns:1fr; }
  .footer{ justify-content:center; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}