
:root{--bg:#0a0a0a;--text:#f5f3ef;--muted:#aaa7a0;--line:#2a2a2a}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;line-height:1.5}
img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit;text-decoration:none}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:22px 36px;background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,0))}
.brand{font-family:"Space Grotesk",sans-serif;font-size:20px;font-weight:600;letter-spacing:.02em}

.nav nav{display:flex;gap:26px;align-items:center;font-size:13px}.nav nav a{opacity:.78;transition:.2s}.nav nav a:hover{opacity:1}
.nav .ig{border:1px solid rgba(255,255,255,.25);padding:9px 13px;border-radius:999px}
.hero{min-height:100svh;position:relative;overflow:hidden}.hero img{position:absolute;inset:0;filter:saturate(.88) contrast(1.03)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.42) 44%,rgba(0,0,0,.08) 73%),linear-gradient(0deg,rgba(0,0,0,.50),transparent 40%)}
.hero-copy{position:absolute;left:7vw;bottom:10vh;max-width:680px}
.eyebrow{margin:0 0 22px;text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:#b8b4ad}
h1,h2{font-family:"Space Grotesk",sans-serif;margin:0;font-weight:500;line-height:.98}
h1{font-size:clamp(64px,10vw,150px);letter-spacing:-.055em}
.intro{max-width:560px;font-size:clamp(16px,1.6vw,21px);color:#d2cec7;margin:28px 0 32px}
.cta{display:inline-flex;gap:16px;align-items:center;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:6px;font-size:14px}
.scroll{position:absolute;right:28px;bottom:50px;writing-mode:vertical-rl;font-size:9px;letter-spacing:.3em;color:#b6b2ac}
.work{padding:130px 6vw}.section-head{display:grid;grid-template-columns:1fr 2.2fr;gap:40px;margin-bottom:70px}
.section-head h2,.about h2,.contact h2{font-size:clamp(42px,6vw,82px);letter-spacing:-.045em;max-width:1000px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid figure{margin:0;height:58vw;max-height:720px;position:relative;overflow:hidden;background:#141414}
.grid .wide{grid-column:span 2;height:66vw;max-height:900px}
.grid figure img{transition:transform .7s ease,filter .5s ease}.grid figure:hover img{transform:scale(1.02);filter:brightness(.88)}
figcaption{position:absolute;left:18px;bottom:16px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:rgba(0,0,0,.55);padding:7px 9px}
.statement{padding:130px 6vw 160px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statement>p:first-child{font-family:"Space Grotesk",sans-serif;font-size:clamp(42px,7vw,104px);line-height:.98;letter-spacing:-.05em;margin:0}
.statement span{color:#686662}.statement .small{max-width:520px;margin:32px 0 0 auto;color:var(--muted);font-size:18px}
.about{padding:150px 6vw;display:grid;grid-template-columns:1.2fr .8fr;gap:9vw}
.about h2{font-size:clamp(42px,5vw,72px)}.about-copy{align-self:end;color:#c7c3bc;font-size:18px}
.about-copy p{max-width:520px;margin:0 0 20px}
.brands{padding:45px 6vw 110px;border-top:1px solid var(--line)}
.brandline{font-family:"Space Grotesk",sans-serif;font-size:clamp(22px,3vw,42px);line-height:1.35;color:#d7d2ca}
.contact{min-height:72vh;padding:130px 6vw;display:flex;flex-direction:column;justify-content:center;background:#efede8;color:#111}
.contact .eyebrow{color:#615f5b}.contact h2{max-width:900px}.contact-links{display:flex;gap:34px;flex-wrap:wrap;margin-top:48px;font-size:18px}
.contact-links a{border-bottom:1px solid #777;padding-bottom:5px}
footer{display:flex;justify-content:space-between;padding:28px 6vw;color:#777;font-size:11px;border-top:1px solid var(--line)}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}


/* =========================
   REVIEWS
   ========================= */

.reviews{
  padding:130px 6vw;
  background:var(--bg);
  color:var(--text);
  border-top:1px solid var(--line);
}

.reviews .section-head{
  max-width:1400px;
  margin:0 auto 55px auto;
}

.review-list{
  max-width:1400px;
  margin:0 auto;
}

.review-card{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:55px;
  align-items:center;
  color:inherit;
  text-decoration:none;
  padding:30px 0;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}

.review-image{
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:#141414;
}

.review-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .5s ease,filter .5s ease;
}

.review-card:hover .review-image img{
  transform:scale(1.03);
  filter:brightness(.9);
}

.review-copy{
  max-width:650px;
}

.review-copy .eyebrow{
  margin:0 0 12px;
}

.review-copy h3{
  margin:0 0 18px;
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(28px,3vw,42px);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.025em;
}

.review-description{
  margin:0 0 28px;
  font-family:Inter,Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  color:rgba(255,255,255,.66);
}

.review-link{
  display:inline-block;
  font-family:Inter,Arial,sans-serif;
  font-size:15px;
  font-weight:500;
  padding-bottom:5px;
  border-bottom:1px solid rgba(255,255,255,.5);
}

@media(max-width:760px){
  .nav{padding:18px 18px}.nav nav a:not(.ig){display:none}.nav .ig{font-size:11px}
  .hero-copy{left:20px;right:20px;bottom:7vh}h1{font-size:clamp(58px,18vw,94px)}
  .hero-shade{background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.10) 80%)}.scroll{display:none}
  .work,.statement,.about,.reviews,.contact{padding-left:20px;padding-right:20px}
  .section-head,.about{grid-template-columns:1fr}.section-head{gap:10px}
  .grid{grid-template-columns:1fr}.grid figure,.grid .wide{grid-column:auto;height:120vw;max-height:none}.statement .small{margin-left:0}

  .reviews{
    padding-top:80px;
    padding-bottom:80px;
  }

  .reviews .section-head{
    margin-bottom:35px;
  }

  .review-card{
    grid-template-columns:1fr;
    gap:28px;
    padding:24px 0 32px;
  }

  .review-image{
    max-width:100%;
  }

  .review-copy h3{
    font-size:30px;
  }

  .review-description{
    font-size:16px;
  }
}
