@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root{--bg:#000;--fg:#f4f4f4;--muted:rgba(255,255,255,.42);--line:rgba(255,255,255,.14);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{background:#000;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:#000;color:var(--fg);font-family:Inter,Arial,sans-serif;overflow-x:hidden;cursor:none}
a{color:inherit;text-decoration:none}
.grain{position:fixed;inset:-45%;z-index:100;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");animation:grain .18s steps(2) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(1.5%,-1%)}50%{transform:translate(-1%,1.5%)}75%{transform:translate(1%,1%)}100%{transform:translate(-1.5%,-1%)}}
.cursor,.cursor-dot{position:fixed;z-index:120;left:0;top:0;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;mix-blend-mode:difference}
.cursor{width:34px;height:34px;border:1px solid rgba(255,255,255,.55);transition:width .45s var(--ease),height .45s var(--ease),background .4s,border-color .4s}
.cursor-dot{width:4px;height:4px;background:#fff}
body.is-hovering .cursor{width:72px;height:72px;background:rgba(255,255,255,.08);border-color:transparent}
.scroll-progress{position:fixed;top:0;left:0;z-index:110;width:100%;height:2px;background:#fff;transform-origin:left;transform:scaleX(0)}
.page{position:relative;width:min(1440px,100%);margin:0 auto;padding:56px 7.4vw 120px;isolation:isolate}
.header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:62px;opacity:0;transform:translateY(-16px);animation:headerIn .9s var(--ease) .1s forwards}
@keyframes headerIn{to{opacity:1;transform:none}}
.back{justify-self:start;display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:300;color:rgba(255,255,255,.72)}
.back-arrow{font-size:28px;line-height:0;transition:transform .6s var(--ease)}
.back:hover .back-arrow{transform:translateX(-5px)}
.page-title{margin:0;font-size:clamp(2rem,3.4vw,4rem);line-height:.82;font-weight:900;letter-spacing:-.09em;text-transform:uppercase;color:#3d3d3d;transform:translateY(105%) skewY(3deg);animation:titleIn 1.25s var(--ease) .18s forwards}
@keyframes titleIn{to{transform:none}}
.cta{justify-self:end;display:inline-flex;align-items:center;justify-content:center;min-width:96px;height:27px;padding:0 12px;border:1px solid rgba(255,255,255,.19); background: transparent; border-radius:999px;font-size:8px;color:rgba(255,255,255,.76);transition:color .4s,background .5s var(--ease),border-color .4s,transform .5s var(--ease)}
.cta:hover{color:#000;background:#fff;border-color:#fff;transform:translateY(-2px)}
.intro{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:44px;opacity:0;animation:fadeUp .9s var(--ease) .45s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.intro-kicker{margin:0 0 8px;font-size:8px;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.33)}
.intro-copy{margin:0;max-width:620px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.5)}
.intro-count{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.32)}
.gallery{display:grid;grid-template-columns:1.78fr 1fr 1.78fr;gap:16px 42px}
.project{position:relative;display:block;overflow:hidden;background:#0b0b0b;opacity:0;transform:translateY(45px);animation:galleryIn 1.05s var(--ease) forwards}
.project:nth-child(1){animation-delay:.55s}.project:nth-child(2){animation-delay:.65s}.project:nth-child(3){animation-delay:.75s}.project:nth-child(4){animation-delay:.85s}.project:nth-child(5){animation-delay:.95s}.project:nth-child(6){animation-delay:1.05s}
@keyframes galleryIn{to{opacity:1;transform:none}}
.project:nth-child(1),.project:nth-child(3),.project:nth-child(4),.project:nth-child(6){aspect-ratio:1.78/1}
.project:nth-child(2),.project:nth-child(5){aspect-ratio:1/0.98}
.project img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(.96);transform:scale(1.001);transition:transform 1.15s var(--ease),filter 1s var(--ease)}
.project::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.06),transparent 32%,rgba(0,0,0,.28));opacity:.55;transition:opacity .8s}
.project-meta{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:flex;justify-content:space-between;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.project-meta span{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.76)}
.project-dot{width:7px;height:7px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .6s var(--ease)}
.project:hover img{transform:scale(1.06);filter:saturate(1) contrast(1.01)}
.project:hover::after{opacity:.9}.project:hover .project-meta{opacity:1;transform:none}.project:hover .project-dot{transform:scale(1)}
@media(max-width:900px){body{cursor:auto}.cursor,.cursor-dot{display:none}.page{padding:30px 5vw 80px}.gallery{grid-template-columns:1.5fr 1fr;gap:12px}.project:nth-child(1){grid-column:1}.project:nth-child(2){grid-column:2}.project:nth-child(3){grid-column:1/3}.project:nth-child(4){grid-column:1}.project:nth-child(5){grid-column:2}.project:nth-child(6){grid-column:1/3}.project:nth-child(n){aspect-ratio:1.5/1}.project:nth-child(2),.project:nth-child(5){aspect-ratio:1/1}}
@media(max-width:560px){.page{padding:22px 18px 70px}.header{grid-template-columns:1fr auto;grid-template-areas:"back cta" "title title";gap:22px}.back{grid-area:back}.cta{grid-area:cta}.page-title{grid-area:title;font-size:2.7rem}.intro{display:block}.intro-count{display:block;margin-top:18px}.gallery{grid-template-columns:1fr}.project:nth-child(n){grid-column:1;aspect-ratio:1.45/1}.project:nth-child(2),.project:nth-child(5){aspect-ratio:1.2/1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.page-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;

  width: min(230px, 24vw);
  height: 60px;

  overflow: visible;
}

.page-title-logo {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;

  opacity: 0;

  transform:
    translateY(35px)
    scale(.94);

  animation:
    brandingLogoIn
    1.1s cubic-bezier(.16,1,.3,1)
    .2s forwards;

  /* Remove this if your SVG is already the correct color */
  /* filter: invert(1); */
}

@keyframes brandingLogoIn {
  from {
    opacity: 0;
    transform:
      translateY(35px)
      scale(.94);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}
/* =========================================================
   BRANDING CONTINUATION
========================================================= */

.branding-continuation {
  width: 100%;
  margin-top: 150px;
  padding-top: 34px;

  border-top: 1px solid rgba(255,255,255,.08);
}


/* tiny editorial metadata */

.continuation-meta {
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 22px;

  font-size: 8px;
  font-weight: 400;
  line-height: 1;

  text-transform: uppercase;
  letter-spacing: .14em;

  color: rgba(255,255,255,.28);
}


/* 3 × 2 gallery */

.gallery-secondary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}


/* image */

.secondary-project {
  position: relative;
  display: block;

  aspect-ratio: 16 / 9;

  overflow: hidden;
  background: #090909;

  opacity: 0;
  transform: translateY(45px) scale(.985);

  transition:
    transform 1s cubic-bezier(.16,1,.3,1),
    opacity 1s cubic-bezier(.16,1,.3,1);

  will-change: transform;
}


/* reveal */

.branding-continuation.is-visible .secondary-project {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.branding-continuation.is-visible
.secondary-project:nth-child(1) {
  transition-delay: .05s;
}

.branding-continuation.is-visible
.secondary-project:nth-child(2) {
  transition-delay: .12s;
}

.branding-continuation.is-visible
.secondary-project:nth-child(3) {
  transition-delay: .19s;
}

.branding-continuation.is-visible
.secondary-project:nth-child(4) {
  transition-delay: .26s;
}

.branding-continuation.is-visible
.secondary-project:nth-child(5) {
  transition-delay: .33s;
}

.branding-continuation.is-visible
.secondary-project:nth-child(6) {
  transition-delay: .40s;
}


/* image */

.secondary-project img {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;

  transform: scale(1.001);

  transition:
    transform 1.2s cubic-bezier(.16,1,.3,1),
    filter 1s cubic-bezier(.16,1,.3,1);

  filter: saturate(.92) contrast(.98);
}


/* subtle glass/gradient on hover */

.secondary-project::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.02),
      transparent 55%,
      rgba(0,0,0,.16)
    );

  opacity: .35;

  transition:
    opacity .8s ease;
}


/* hover */

.secondary-project:hover {
  transform:
    translateY(-4px)
    scale(1.005);
}

.secondary-project:hover img {
  transform: scale(1.045);

  filter:
    saturate(1)
    contrast(1.02);
}

.secondary-project:hover::after {
  opacity: .8;
}

@media (max-width: 700px) {
  .gallery-secondary {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* =========================================================
   SQUARE BRANDING SECTION
========================================================= */

.branding-squares {
  width: 100%;
  margin-top: 150px;
  padding-top: 34px;

  border-top: 1px solid rgba(255,255,255,.08);
}

.square-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.square-project {
  position: relative;
  display: block;

  aspect-ratio: 1 / 1;

  overflow: hidden;
  background: #090909;

  opacity: 0;
  transform: translateY(45px) scale(.985);

  transition:
    opacity 1s cubic-bezier(.16,1,.3,1),
    transform 1s cubic-bezier(.16,1,.3,1);
}

.branding-squares.is-visible .square-project {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.branding-squares.is-visible .square-project:nth-child(1) {
  transition-delay: .05s;
}

.branding-squares.is-visible .square-project:nth-child(2) {
  transition-delay: .13s;
}

.branding-squares.is-visible .square-project:nth-child(3) {
  transition-delay: .21s;
}

.square-project img {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;

  transform: scale(1.001);

  filter: saturate(.92) contrast(.98);

  transition:
    transform 1.1s cubic-bezier(.16,1,.3,1),
    filter .9s cubic-bezier(.16,1,.3,1);
}

.square-project:hover img {
  transform: scale(1.045);
  filter: saturate(1) contrast(1.02);
}

.square-project::after {
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.03),
      transparent 60%,
      rgba(0,0,0,.14)
    );

  opacity: .45;

  transition: opacity .7s ease;
}

.square-project:hover::after {
  opacity: .8;
}

/* =========================================================
   CONTACT MODAL
========================================================= */

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  visibility: hidden;
  opacity: 0;

  transition:
    opacity .55s var(--ease),
    visibility .55s;
}

.contact-modal.is-open {
  visibility: visible;
  opacity: 1;
}


/* backdrop */

.contact-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(0,0,0,.72);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  cursor: auto;
}


/* panel */

.contact-panel {
  position: relative;
  z-index: 2;

  width: min(560px, 100%);

  padding: 42px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );

  border: 1px solid rgba(255,255,255,.14);

  box-shadow:
    0 40px 100px rgba(0,0,0,.55);

  transform:
    translateY(28px)
    scale(.965);

  transition:
    transform .75s var(--ease);
}

.contact-modal.is-open .contact-panel {
  transform:
    translateY(0)
    scale(1);
}


/* close */

.contact-close {
  position: absolute;

  top: 18px;
  right: 18px;

  width: 34px;
  height: 34px;

  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;

  background: transparent;
  color: rgba(255,255,255,.65);

  display: grid;
  place-items: center;

  font-size: 20px;
  font-weight: 300;

  cursor: pointer;

  transition:
    background .4s var(--ease),
    color .35s ease,
    transform .5s var(--ease);
}

.contact-close:hover {
  background: #fff;
  color: #000;
  transform: rotate(90deg);
}


/* header */

.contact-header {
  padding-right: 45px;

  margin-bottom: 34px;
}

.contact-kicker {
  display: block;

  margin-bottom: 13px;

  font-size: 8px;
  font-weight: 500;

  letter-spacing: .16em;
  text-transform: uppercase;

  color: rgba(255,255,255,.3);
}

.contact-header h2 {
  margin: 0 0 10px;

  font-size: clamp(2.5rem, 6vw, 4.8rem);
  line-height: .85;

  font-weight: 800;

  letter-spacing: -.08em;
}

.contact-header p {
  margin: 0;

  font-size: 11px;
  line-height: 1.5;

  color: rgba(255,255,255,.4);
}


/* links */

.contact-links {
  border-top: 1px solid rgba(255,255,255,.1);
}

.contact-link {
  position: relative;

  display: grid;

  grid-template-columns: 40px 1fr 34px;

  align-items: center;

  min-height: 82px;

  border-bottom: 1px solid rgba(255,255,255,.1);

  transition:
    padding .65s var(--ease),
    background .45s ease;
}

.contact-link:hover {
  padding-left: 10px;
  padding-right: 6px;

  background: rgba(255,255,255,.035);
}

.contact-number {
  font-size: 8px;

  letter-spacing: .12em;

  color: rgba(255,255,255,.28);
}

.contact-main {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.contact-main strong {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.04em;
}

.contact-main small {
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;

  color: rgba(255,255,255,.34);
}

.contact-arrow {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;

  color: rgba(255,255,255,.45);

  transform: rotate(-45deg);

  transition:
    transform .6s var(--ease),
    background .4s ease,
    color .4s ease,
    border-color .4s ease;
}

.contact-link:hover .contact-arrow {
  transform: rotate(0deg);

  background: #fff;
  color: #000;

  border-color: #fff;
}


/* footer */

.contact-footer {
  margin-top: 25px;

  display: flex;
  justify-content: space-between;
  gap: 20px;

  font-size: 7px;
  letter-spacing: .14em;
  text-transform: uppercase;

  color: rgba(255,255,255,.23);
}


/* mobile */

@media (max-width: 600px) {

  .contact-modal {
    padding: 14px;
  }

  .contact-panel {
    padding: 30px 22px 24px;
  }

  .contact-link {
    min-height: 76px;
  }

  .contact-main strong {
    font-size: 15px;
  }

  .contact-footer {
    font-size: 6px;
  }

}