:root{
  --bg: #0b0b0a;
  --bg-alt: #171615;
  --ink: #f5f3ee;
  --ink-soft: #9c988f;
  --line: rgba(255,255,255,.14);
  --accent: #c9603e;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

/* ---------- PASSWORD GATE ---------- */
.password-gate{
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
}
.password-gate.is-hidden{ display:none; }
.password-gate__box{
  width:100%; max-width:320px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.password-gate__logo{ width:34px; margin-bottom:1.6rem; filter:invert(1) brightness(2); }
.password-gate__label{
  font-family:'Inter', sans-serif; font-size:.85rem; color:var(--ink-soft);
  margin-bottom:1.4rem;
}
.password-gate__box input{
  width:100%; font-family:'Inter', sans-serif; font-size:.95rem;
  padding:.8rem 1rem; margin-bottom:.8rem;
  border:1px solid var(--line); border-radius:6px;
  background:var(--bg-alt); color:var(--ink); text-align:center;
}
.password-gate__box input:focus{ outline:none; border-color:var(--ink-soft); }
.password-gate__box button{
  width:100%; font-family:'Inter', sans-serif; font-weight:500; font-size:.9rem;
  padding:.8rem 1rem;
  border:none; border-radius:6px;
  background:var(--ink); color:var(--bg);
  cursor:pointer;
}
.password-gate__box button:hover{ opacity:.9; }
.password-gate__error{
  font-family:'Inter', sans-serif; font-size:.8rem; color:var(--accent);
  margin-top:.9rem;
}
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.section-label{
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:1.2rem;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem clamp(1.2rem, 4vw, 3rem);
  color:#fff;
  transition:background .35s ease, color .35s ease, backdrop-filter .35s ease;
}
.nav.is-scrolled{
  background:rgba(11,11,10,.78);
  backdrop-filter:blur(10px);
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.nav__mark{ display:block; width:34px; }
.nav__logo{ width:34px; }
.nav__logo--light{ display:none; }

.nav__links{ display:flex; gap:2.2rem; font-size:.9rem; letter-spacing:.02em; }
.nav__links a{ opacity:.85; transition:opacity .2s; }
.nav__links a:hover{ opacity:1; }

.nav__social{ display:flex; gap:1rem; align-items:center; }
.nav__social a{ opacity:.85; transition:opacity .2s, transform .2s; }
.nav__social a:hover{ opacity:1; transform:translateY(-1px); }

@media (max-width: 640px){
  .nav{ padding:1.1rem 1rem; }
  .nav__links{ gap:.9rem; font-size:.68rem; }
  .nav__social{ gap:.6rem; }
  .nav__social svg{ width:15px; height:15px; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  height:100svh;
  min-height:560px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.hero__bg{
  position:absolute; inset:-10% 0 0 0; height:120%; width:100%;
  background-size:cover; background-position:center;
  object-fit:cover; object-position:center;
  will-change:transform;
}
.hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 45%, rgba(10,10,10,.7) 100%);
}
.hero__content{
  position:relative; z-index:2; text-align:center; color:#fff;
  padding:0 1.5rem;
}
.eyebrow{
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  opacity:.85; margin-bottom:1.1rem;
}
.hero h1{
  font-family:var(--serif);
  font-weight:440;
  font-size:clamp(3rem, 9vw, 6.5rem);
  line-height:1;
  letter-spacing:-.01em;
}
.hero__tag{
  margin-top:1.2rem;
  font-size:1.05rem;
  opacity:.9;
}
.hero__tag--about{
  color:var(--ink-soft);
  font-size:1.05rem;
  margin:-.4rem 0 1.6rem;
}

.scroll-cue{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
  z-index:2; width:26px; height:42px;
  border:1.5px solid rgba(255,255,255,.75);
  border-radius:14px;
  background:transparent; cursor:pointer;
}
.scroll-cue span{
  position:absolute; top:7px; left:50%; width:4px; height:8px;
  margin-left:-2px; border-radius:2px; background:#fff;
  animation:cue 1.8s ease infinite;
}
@keyframes cue{
  0%{ transform:translateY(0); opacity:1; }
  70%{ transform:translateY(12px); opacity:0; }
  100%{ opacity:0; }
}

/* ---------- REVEAL ---------- */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s ease, transform .8s ease;
}
[data-reveal].in-view{ opacity:1; transform:translateY(0); }

/* ---------- ABOUT ---------- */
.about{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem, 6vw, 6rem);
  align-items:start;
  padding:clamp(5rem,10vw,8rem) clamp(1.2rem,4vw,3rem);
  max-width:1280px; margin:0 auto;
}
.about__portrait{
  position:sticky; top:6rem;
  border-radius:16px; overflow:hidden;
  aspect-ratio:4/5;
}
.about__portrait img{ width:100%; height:100%; object-fit:cover; }
.about__lead{
  font-family:var(--serif);
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  font-weight:440;
  line-height:1.3;
  margin-bottom:1.4rem;
}
.about__text p{ color:var(--ink-soft); max-width:56ch; }
.about__text p + p{ margin-top:1rem; }

.stats{
  display:flex; gap:clamp(1.5rem,4vw,3rem);
  margin:2.6rem 0 3rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
}
.stats__item{ font-size:.82rem; color:var(--ink-soft); }
.stats__item span{
  display:block; font-family:var(--serif); font-size:2rem; color:var(--ink);
  margin-bottom:.2rem;
}

.timeline__row{
  display:flex; flex-wrap:wrap; gap:.3rem 1rem;
  padding:.9rem 0;
  border-top:1px solid var(--line);
  font-size:.92rem;
}
.timeline__row:last-child{ border-bottom:1px solid var(--line); }
.timeline__date{ color:var(--ink-soft); min-width:160px; }
.timeline__role em{ font-style:normal; color:var(--ink-soft); }

/* ---------- CLIENTS ---------- */
.clients{
  padding:3rem clamp(1.2rem,4vw,3rem) 4rem;
  max-width:1280px; margin:0 auto;
  border-top:1px solid var(--line);
}
.clients__list{
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem;
}
.clients__list li{
  font-family:var(--serif);
  font-size:clamp(1.1rem,2.4vw,1.5rem);
  color:var(--ink-soft);
}

/* ---------- WORK ---------- */
.work{
  padding:2rem clamp(1.2rem,4vw,3rem) 6rem;
  max-width:1400px; margin:0 auto;
}
.work__heading{
  font-family:var(--serif); font-weight:440;
  font-size:clamp(2rem,4.5vw,3.2rem);
  margin-bottom:3rem;
}
.work__grid{
  display:flex;
  flex-direction:column;
  gap:1rem;
  opacity:0; transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.work__grid.in-view{ opacity:1; transform:translateY(0); }

.work__tile{
  position:relative;
  width:100%;
  height:min(72vh, 620px);
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  background:var(--bg-alt);
  border:1px solid var(--line);
  padding:0;
  display:block;
}
.work__tile img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.7,.2,1);
}
.work__tile:hover img{ transform:scale(1.04); }

.work__tile__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0) 45%, rgba(10,10,10,.72) 100%);
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:2rem 2.2rem;
  color:#fff;
  text-align:left;
}
.work__tile__client{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; opacity:.85;
  margin-bottom:.4rem;
}
.work__tile__title{
  font-family:var(--serif); font-size:clamp(1.8rem, 3.5vw, 2.6rem);
}

@media (max-width: 720px){
  .work__tile{ height:340px; }
  .work__tile__overlay{ padding:1.4rem 1.6rem; }
}

/* ---------- AWARDS ---------- */
.awards{
  padding:5rem clamp(1.2rem,4vw,3rem);
  max-width:1280px; margin:0 auto;
  border-top:1px solid var(--line);
}
.awards__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:.9rem 2rem;
}
.awards__grid p{ font-size:.92rem; color:var(--ink-soft); }
.awards__grid strong{ color:var(--ink); font-weight:500; }

/* ---------- PLAYGROUND ---------- */
.playground{
  padding:5rem clamp(1.2rem,4vw,3rem) 6rem;
  max-width:760px; margin:0 auto;
  text-align:center;
  border-top:1px solid var(--line);
}
.playground__heading{
  font-family:var(--serif); font-weight:440;
  font-size:clamp(2rem,4.5vw,2.8rem);
  margin-bottom:.8rem;
}
.playground__intro{
  color:var(--ink-soft);
  max-width:44ch; margin:0 auto 2.6rem;
}
.playground__controls{
  display:flex; flex-direction:column; gap:1.6rem;
  margin-bottom:2.2rem;
}
.playground__label{
  display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:.7rem;
}
.playground__pills{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
}
.pill{
  font-family:var(--sans); font-size:.88rem;
  padding:.55rem 1.2rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bg);
  color:var(--ink);
  cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.pill:hover{ border-color:var(--ink-soft); }
.pill.is-active{
  background:var(--ink); color:var(--bg); border-color:var(--ink);
}
.playground__generate{
  font-family:var(--sans); font-weight:500; font-size:.95rem;
  padding:.9rem 2.2rem;
  border:none; border-radius:999px;
  background:var(--accent); color:#fff;
  cursor:pointer;
  transition:transform .2s, opacity .2s;
}
.playground__generate:hover{ opacity:.9; }
.playground__generate:active{ transform:scale(.97); }
.playground__generate:disabled{ opacity:.4; cursor:not-allowed; }

.playground__result{
  margin-top:2.6rem;
  min-height:3.5rem;
}
.playground__result-name{
  font-family:var(--serif); font-weight:440;
  font-size:clamp(1.6rem,4.5vw,2.4rem);
  opacity:0; transform:translateY(10px) scale(.97);
  transition:opacity .45s ease, transform .45s ease;
}
.playground__result-name.is-visible{
  opacity:1; transform:translateY(0) scale(1);
}
.playground__again{
  margin-top:1rem;
  font-family:var(--sans); font-size:.85rem;
  background:none; border:none; text-decoration:underline;
  color:var(--ink-soft); cursor:pointer;
}
.playground__again:hover{ color:var(--ink); }

/* ---------- CONTACT ---------- */
.contact{
  position:relative;
  overflow:hidden;
  background:var(--bg);
  color:#f4f2ee;
  padding:clamp(5rem,12vw,9rem) clamp(1.2rem,4vw,3rem) 3rem;
  text-align:center;
}
.contact__bg{
  position:absolute; inset:-10% 0 0 0; height:120%;
  background-size:cover; background-position:center;
  will-change:transform;
}
.contact__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,9,.82) 0%, rgba(10,10,9,.78) 60%, rgba(10,10,9,.9) 100%);
}
.contact__content{ position:relative; z-index:2; }
.contact .section-label{ color:rgba(244,242,238,.6); }
.contact h2{
  font-family:var(--serif); font-weight:440;
  font-size:clamp(2.4rem,6vw,4rem);
  margin-bottom:1rem;
}
.contact__sub{ color:rgba(244,242,238,.7); margin-bottom:2.2rem; }

.contact__form{
  max-width:480px; margin:0 auto 2rem;
  display:flex; flex-direction:column; gap:.9rem;
  text-align:left;
}
.contact__form-row{
  display:flex; gap:.9rem;
  flex-wrap:wrap;
}
.contact__form-row input{ flex:1 1 180px; }
.contact__form input,
.contact__form textarea{
  font-family:var(--sans); font-size:.92rem;
  background:rgba(244,242,238,.06);
  border:1px solid rgba(244,242,238,.25);
  border-radius:6px;
  padding:.8rem 1rem;
  color:#f4f2ee;
  resize:vertical;
}
.contact__form input::placeholder,
.contact__form textarea::placeholder{ color:rgba(244,242,238,.45); }
.contact__form input:focus,
.contact__form textarea:focus{
  outline:none; border-color:rgba(244,242,238,.6);
}
.contact__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.contact__submit{
  align-self:flex-start;
  font-family:var(--sans); font-weight:500; font-size:.9rem;
  padding:.85rem 2rem;
  border:1px solid rgba(244,242,238,.5);
  border-radius:999px;
  background:transparent; color:#f4f2ee;
  cursor:pointer;
  transition:background .2s, color .2s;
}
.contact__submit:hover{ background:#f4f2ee; color:var(--ink); }
.contact__submit:disabled{ opacity:.5; cursor:not-allowed; }
.contact__form-status{
  font-size:.85rem; min-height:1.2em;
  color:rgba(244,242,238,.75);
}
.contact__form-status.is-error{ color:#e79a8a; }
.contact__or{
  font-size:.85rem; color:rgba(244,242,238,.55);
  margin-bottom:.6rem;
}
.contact__mail{
  display:inline-block;
  font-family:var(--serif);
  font-size:clamp(1.3rem,3vw,1.8rem);
  border-bottom:1px solid rgba(244,242,238,.4);
  padding-bottom:.2rem;
  transition:opacity .2s;
}
.contact__mail:hover{ opacity:.7; }
.contact__social{
  display:flex; justify-content:center; gap:2rem;
  margin:3rem 0 5rem;
  font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
}
.contact__social a{ opacity:.8; transition:opacity .2s; }
.contact__social a:hover{ opacity:1; }
.contact__copy{ font-size:.78rem; color:rgba(244,242,238,.45); }

/* ---------- GALLERY OVERLAY ---------- */
.gallery-overlay{
  position:fixed; inset:0; z-index:500;
  background:var(--bg);
  transform:translateY(100%);
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
  overflow-y:auto;
}
.gallery-overlay.is-open{ transform:translateY(0); }
.gallery-overlay__bar{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:1.6rem clamp(1.2rem,4vw,3rem);
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.gallery-overlay__client{
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:.3rem;
}
.gallery-overlay__bar h3{
  font-family:var(--serif); font-weight:440; font-size:clamp(1.5rem,3.4vw,2.2rem);
}
.gallery-overlay__close{
  background:none; border:1px solid var(--line); border-radius:50%;
  width:42px; height:42px; font-size:1.6rem; line-height:1; cursor:pointer;
  color:var(--ink); flex:none;
}

/* ---------- ABOUT OVERLAY ---------- */
.gallery-overlay__body.about-overlay__body{
  max-width:none; padding:0;
}
.about-overlay__hero{
  position:relative;
  height:min(50vh, 420px);
  overflow:hidden;
}
.about-overlay__hero-bg{
  position:absolute; inset:-10% 0 0 0; height:120%;
  background-size:cover; background-position:center;
  will-change:transform;
}
.about-overlay__hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,9,.3) 0%, rgba(10,10,9,.5) 55%, var(--bg) 100%);
}
.about-overlay__greeting{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding-bottom:2.4rem;
  text-align:center;
  color:var(--ink);
  font-family:var(--serif); font-weight:440;
  font-size:clamp(1.9rem,4.6vw,3rem);
  line-height:1.3;
}
.greet-line{
  display:block;
  opacity:0; transform:translateY(18px);
}
.about-overlay.is-open .greet-line--1{
  animation:greetIn .6s cubic-bezier(.2,.8,.2,1) forwards .15s;
}
.about-overlay.is-open .greet-line--2{
  animation:greetIn .6s cubic-bezier(.2,.8,.2,1) forwards .55s;
}
@keyframes greetIn{
  to{ opacity:1; transform:translateY(0); }
}
.greet-emoji{
  display:inline-block;
  opacity:0; transform:scale(.3) rotate(-20deg);
}
.about-overlay.is-open .greet-emoji{
  animation:discoIn .7s cubic-bezier(.2,.8,.2,1) forwards .95s,
            discoSpin 9s linear infinite 1.65s;
}
@keyframes discoIn{
  0%{ opacity:0; transform:scale(.3) rotate(-20deg); }
  65%{ opacity:1; transform:scale(1.25) rotate(8deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}
@keyframes discoSpin{
  from{ transform:scale(1) rotate(0deg); }
  to{ transform:scale(1) rotate(360deg); }
}
.about-overlay__body .about{ padding-top:clamp(3rem,7vw,5rem); }

.about-overlay__contact{
  max-width:640px; margin:0 auto;
  padding:5rem clamp(1.2rem,4vw,3rem) 6rem;
  text-align:center;
  border-top:1px solid var(--line);
}
.about-overlay__contact h2{
  font-family:var(--serif); font-weight:440;
  font-size:clamp(2.1rem,5vw,3rem);
  margin-bottom:1rem;
}
.about-overlay__contact .contact__sub{ color:var(--ink-soft); margin-bottom:2.2rem; }
.about-overlay__contact .contact__form{ text-align:left; }

/* ---------- OVERLAY BACK BUTTON ---------- */
.overlay-back{
  display:flex; align-items:center; gap:.5rem;
  width:fit-content;
  margin:1rem auto 4rem; padding:.8rem 1.6rem;
  font-family:var(--sans); font-size:.85rem; letter-spacing:.02em;
  color:var(--ink-soft);
  background:none; border:1px solid var(--line); border-radius:999px;
  cursor:pointer;
  transition:color .2s ease, border-color .2s ease;
}
.overlay-back:hover{ color:var(--ink); border-color:var(--ink-soft); }
.overlay-back__arrow{ transition:transform .2s ease; }
.overlay-back:hover .overlay-back__arrow{ transform:translateX(-3px); }

/* ---------- CASE STUDY BODY ---------- */
.gallery-overlay__body{
  max-width:1000px; margin:0 auto;
  padding:2.4rem clamp(1.2rem,4vw,3rem) 7rem;
}
.case__intro{
  max-width:62ch;
  font-family:var(--serif); font-weight:440;
  font-size:clamp(1.25rem,2.4vw,1.6rem);
  line-height:1.5;
  margin-bottom:2rem;
}
.case__media{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:.9rem 1rem;
  margin-bottom:2.6rem;
  align-items:start;
}
.case__media-item{ margin:0; }
.case__media-item--video,
.case__media-item--audio{
  grid-column:1 / -1;
}
.case__media-item img{
  width:100%; border-radius:12px; cursor:zoom-in;
  display:block;
  transition:opacity .3s;
}
.case__media-item img:hover{ opacity:.85; }
.case__media-item video{
  width:100%; max-height:70vh; border-radius:12px;
  display:block; background:#0a0a09;
}
.case__media-item audio{
  width:100%;
}
.case__media-caption{
  font-size:.78rem; color:var(--ink-soft);
  margin-top:.4rem;
}
.case__group-heading{
  grid-column:1 / -1;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft);
  margin:.4rem 0 -.2rem;
}
.case__group-heading:first-child{ margin-top:0; }
.case__group-text{
  grid-column:1 / -1;
  max-width:62ch;
  color:var(--ink-soft);
  margin:-.2rem 0 .2rem;
}

.case__section{
  padding-top:2.6rem; margin-top:2.6rem;
  border-top:1px solid var(--line);
}
.case__section-heading{
  font-family:var(--serif); font-weight:440;
  font-size:clamp(1.3rem,2.6vw,1.7rem);
  margin-bottom:.6rem;
}
.case__section-text{
  max-width:62ch;
  color:var(--ink-soft);
  margin-bottom:1.6rem;
}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:600;
  background:rgba(8,8,7,.95);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox img{
  max-width:88vw; max-height:86vh;
  object-fit:contain;
  border-radius:2px;
}
.lightbox__close{
  position:absolute; top:1.6rem; right:1.8rem;
  background:none; border:0; color:#fff; font-size:2rem; cursor:pointer;
}
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:0; color:#fff; font-size:3rem; cursor:pointer;
  padding:1rem; opacity:.75; transition:opacity .2s;
}
.lightbox__nav:hover{ opacity:1; }
.lightbox__nav--prev{ left:.5rem; }
.lightbox__nav--next{ right:.5rem; }

@media (max-width: 720px){
  .about{ grid-template-columns:1fr; }
  .about__portrait{ position:static; max-width:280px; }
}