@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root{--blk:#000;--wht:#fff;--mu:rgba(255,255,255,.36);--dim:rgba(255,255,255,.1);--hair:rgba(255,255,255,.13)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--blk);color:var(--wht);font-family:'Space Mono',monospace;font-size:11px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}

/* ── HEADER ────────────────────────── */
.hd{position:fixed;z-index:50;top:0;left:0;right:0;
  display:grid;grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--hair);
  mix-blend-mode:normal;
  background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  backdrop-filter:blur(18px) saturate(1.15)}
.hd__name{
  font-family:'Bebas Neue',sans-serif;
  font-size:14px;letter-spacing:.25em;
  padding:20px 32px;border-right:1px solid var(--hair)}
.hd__nav{
  display:flex;align-items:center;justify-content:flex-end;gap:28px;
  padding:20px 32px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mu)}
.hd__nav a{transition:color .15s}.hd__nav a:hover{color:var(--wht)}

/* ── HERO ──────────────────────────── */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.hero__img{position:absolute;inset:0;filter:grayscale(0) contrast(1.15) brightness(1)}
.hero__img img{width:100%;height:100%;object-fit:contain;object-position:center center}
/* Slideshow crossfade */
#hero-img2{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center center;
  opacity:0;transition:opacity 1.2s cubic-bezier(.4,0,.2,1)}
#hero-img2.hero__slide--entering{opacity:1}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 38%,transparent 100%)}
.hero__body{position:relative;z-index:2;padding:0 32px 48px;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:end;border-top:1px solid var(--hair)}
.hero__left{}
.hero__tag{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--mu);margin-bottom:14px;display:block}
.hero__h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(42px,6.8vw,96px);line-height:.92;letter-spacing:.01em;text-transform:uppercase;max-width:980px}
.hero__right{
  display:grid;grid-template-rows:1fr 1fr;gap:0;
  border-left:1px solid var(--hair);
  padding-left:32px;
  padding-bottom:4px;
  height:100%;min-height:120px}
.hero__right-top{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mu);
  border-bottom:1px solid var(--hair);padding-bottom:16px;
  display:flex;align-items:flex-end}
.hero__right-bot{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mu);
  padding-top:16px;
  display:flex;align-items:flex-start}

/* ── WORK ──────────────────────────── */
.work{padding-top:88px}
.work__head{
  display:grid;grid-template-columns:1fr 1fr;
  padding:24px 32px;
  border-bottom:1px solid var(--hair)}
.work__head-label{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--mu)}
.work__head-count{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--mu);text-align:right;font-family:'Bebas Neue',sans-serif;font-size:11px}

/* ── PROJECT ROW ───────────────────── */
.proj{border-bottom:1px solid var(--hair)}
.proj__img{position:relative;overflow:hidden;display:block;cursor:pointer;width:100%}
.proj__img img{width:100%;height:75vh;min-height:440px;object-fit:cover;filter:grayscale(0) contrast(1.12) brightness(.72);
  transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter 1.2s cubic-bezier(.16,1,.3,1)}
.proj__img:hover img{transform:scale(1.025);filter:grayscale(0) contrast(1.18) brightness(.9)}

/* Big Stone Paper number overlay */
.proj__num{
  position:absolute;bottom:0;right:0;
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(80px,14vw,220px);
  line-height:.82;
  color:rgba(255,255,255,.06);
  letter-spacing:-.03em;
  pointer-events:none;
  padding-right:16px}

/* Two-column meta row */
.proj__meta{
  display:grid;grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--hair)}
.proj__meta-left{
  padding:20px 32px 28px;
  border-right:1px solid var(--hair)}
.proj__meta-cat{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--mu);margin-bottom:10px;display:block}
.proj__meta-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(40px,6.4vw,100px);
  line-height:.88;letter-spacing:.01em;text-transform:uppercase}
.proj__meta-right{
  padding:20px 32px 28px;
  display:flex;flex-direction:column;justify-content:space-between}
.proj__meta-desc{
  font-size:9px;letter-spacing:.15em;line-height:1.9;color:var(--mu);
  text-transform:uppercase;max-width:340px}
.proj__links{
  display:flex;gap:24px;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mu)}
.proj__links a{transition:color .15s}.proj__links a:hover{color:var(--wht)}

/* ── ABOUT ─────────────────────────── */
.about{display:grid;grid-template-columns:1.22fr .78fr;border-top:1px solid var(--hair)}
.about__left{
  border-right:1px solid var(--hair);
  padding:64px 32px 80px}
.about__ey{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--mu);margin-bottom:20px;display:block}
.about__h2{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(36px,5.8vw,88px);
  line-height:.88;letter-spacing:.01em;text-transform:uppercase;
  margin-bottom:28px}
.about__body{font-size:11px;line-height:1.8;color:var(--mu);max-width:420px;margin-bottom:32px;letter-spacing:.04em}
.about__links{display:flex;gap:24px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mu)}
.about__links a{transition:color .15s}.about__links a:hover{color:var(--wht)}
.about__right{background:#050505;display:flex;align-items:stretch;overflow:hidden}
.about__photo{width:100%;height:100%;min-height:360px}
.about__photo img{width:100%;height:100%;object-fit:cover;object-position:left center;filter:grayscale(0) contrast(1.1) brightness(.85)}
.about__photo--empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;border:1px solid var(--hair);min-height:360px}
.about__photo--empty .ph-box{
  width:72px;height:90px;border:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.about__photo--empty .ph-hint{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:center;line-height:1.9}

/* ── FOOTER ────────────────────────── */
.ft{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--hair)}
.ft__left{padding:20px 32px;border-right:1px solid var(--hair);font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:.22em;color:rgba(255,255,255,.18)}
.ft__right{padding:20px 32px;text-align:right;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.18)}

/* ── PROJECT PAGE ──────────────────── */
.pp{padding-top:88px}
.pp__head{
  display:grid;grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--hair)}
.pp__head-left{padding:28px 32px 32px;border-right:1px solid var(--hair)}
.pp__head-ey{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--mu);margin-bottom:12px;display:block}
.pp__head h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,8vw,130px);line-height:.87;letter-spacing:.01em;text-transform:uppercase}
.pp__head-right{padding:28px 32px 32px;display:flex;flex-direction:column;justify-content:flex-end}
.pp__head-note{font-size:9px;letter-spacing:.18em;line-height:1.9;text-transform:uppercase;color:var(--mu)}
.gallery{display:grid;gap:0}
.gallery figure{border-bottom:1px solid var(--hair)}
.gallery img{width:100%;height:82vh;min-height:540px;object-fit:cover;filter:grayscale(0) contrast(1.08) brightness(.88)}
.gallery figcaption{padding:13px 32px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mu);border-bottom:1px solid var(--hair)}
.pp__foot{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--hair)}
.pp__foot-left{padding:20px 32px;border-right:1px solid var(--hair)}
.pp__foot-right{padding:20px 32px;text-align:right}
.back{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mu);transition:color .15s}
.back:hover{color:var(--wht)}

/* ── MOBILE ────────────────────────── */
@media(max-width:760px){
  .hd{grid-template-columns:1fr}.hd__name{border-right:none}.hd__nav{justify-content:flex-start;padding-top:0;padding-bottom:18px;border-top:1px solid var(--hair)}
  .hero__body{grid-template-columns:1fr;padding:0 20px 36px}.hero__right{display:none}
  .work__head,.proj__meta,.about,.ft,.pp__head,.pp__foot{grid-template-columns:1fr}
  .proj__meta-left,.about__left,.ft__left,.pp__head-left,.pp__foot-left{border-right:none;border-bottom:1px solid var(--hair)}
  .about__right,.pp__head-right,.pp__foot-right{border-top:none}
  .work__head,.work__head-count{text-align:left}
  .proj__meta-left,.proj__meta-right,.about__left,.pp__head-left,.pp__head-right,.pp__foot-left,.pp__foot-right,.ft__left,.ft__right{padding-left:20px;padding-right:20px}
  .ft__right{text-align:left;padding-top:0}
  .pp__foot-right{text-align:left}
  .proj__links{flex-wrap:wrap}
  .hd__name,.hd__nav{padding-left:20px;padding-right:20px}
}




/* ── CONTACT + SOCIAL (ABOUT) ──────── */
.about__contact{margin-bottom:20px}
.about__contact-label{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--mu);display:block;margin-bottom:6px}
.about__email-text{font-size:11px;letter-spacing:.12em;color:var(--wht);transition:color .15s;word-break:break-all}
.about__email-text:hover{color:var(--mu)}
.about__social{display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:32px}
.about__social-link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mu);
  border:1px solid var(--hair);padding:6px 12px;
  transition:color .15s,border-color .15s}
.about__social-link:hover{color:var(--wht);border-color:rgba(255,255,255,.36)}
.about__social-link svg{flex-shrink:0}

/* ── CLIENTS LOGO GRID ─────────────── */
.about__clients-label{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--mu);margin-top:8px;margin-bottom:14px;display:block;border-top:1px solid var(--hair);padding-top:24px}
.about__clients{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.about__client{
  display:flex;align-items:center;justify-content:center;
  width:calc(33.333% - 0px);
  min-height:64px;
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:14px 18px;
  transition:background .2s}
.about__client:hover{background:rgba(255,255,255,.04)}
.about__client img{
  width:auto;height:28px;max-width:100%;
  object-fit:contain;
  filter:brightness(0) invert(1);opacity:.38;
  transition:opacity .2s}
.about__client:hover img{opacity:.78}
/* fallback text when no logo */
.about__client:not(:has(img)){
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mu)}

/* ── FOOTER (3-col with social) ─────── */
.ft{display:grid;grid-template-columns:1fr auto 1fr;border-top:1px solid var(--hair)}
.ft__left{padding:20px 32px;border-right:1px solid var(--hair);font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:.22em;color:rgba(255,255,255,.18)}
.ft__mid{padding:20px 24px;border-right:1px solid var(--hair);display:flex;align-items:center;gap:16px}
.ft__social-link{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.28);transition:color .15s}
.ft__social-link:hover{color:var(--wht)}
.ft__right{padding:20px 32px;text-align:right;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.28)}
.ft__right a{color:inherit;transition:color .15s}.ft__right a:hover{color:var(--wht)}

/* ── MOBILE additions ──────────────── */
@media(max-width:760px){
  .about__client{width:50%}
  .ft{grid-template-columns:1fr}
  .ft__left,.ft__mid{border-right:none;border-bottom:1px solid var(--hair)}
  .ft__right{text-align:left;padding-top:16px}
}