@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:#f5f5f5;--line:rgba(255,255,255,.13);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{background:#000;scroll-behavior:smooth}
body{margin:0;background:#000;color:#fff;font-family:Inter,Arial,sans-serif;overflow-x:hidden;cursor:none}
a{color:inherit;text-decoration:none}
.grain{position:fixed;inset:-45%;z-index:1000;pointer-events:none;opacity:.055;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='.92' 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.4%,-1%)}50%{transform:translate(-1%,1.4%)}75%{transform:translate(1%,1%)}100%{transform:translate(-1.4%,-1%)}}
.cursor,.cursor-dot{position:fixed;left:0;top:0;z-index:1100;pointer-events:none;transform:translate(-50%,-50%);border-radius:50%;mix-blend-mode:difference}
.cursor{width:34px;height:34px;border:1px solid rgba(255,255,255,.52);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:76px;height:76px;border-color:transparent;background:rgba(255,255,255,.08)}
.scroll-progress{position:fixed;top:0;left:0;z-index:1050;width:100%;height:2px;background:#fff;transform:scaleX(0);transform-origin:left}
.page{width:min(1440px,100%);margin:0 auto;padding:48px 7vw 130px;isolation:isolate}
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;margin-bottom:74px;opacity:0;transform:translateY(-14px);animation:topbarIn .95s var(--ease) .05s forwards}
@keyframes topbarIn{to{opacity:1;transform:none}}
.back{justify-self:start;display:inline-flex;align-items:center;gap:11px;font-size:13px;font-weight:300;color:rgba(255,255,255,.7)}
.back-arrow{font-size:27px;line-height:0;transition:transform .6s var(--ease)}.back:hover .back-arrow{transform:translateX(-5px)}
.title-wrap{width:min(240px,28vw);min-height:56px;display:flex;align-items:center;justify-content:center}
.page-title{margin:0;font-size:clamp(2rem,3.4vw,4rem);line-height:.82;font-weight:900;letter-spacing:-.09em;text-transform:uppercase;color:#3b3b3b;transform:translateY(110%);animation:titleIn 1.15s var(--ease) .12s forwards}
@keyframes titleIn{to{transform:none}}
.work-pill{justify-self:end;min-width:108px;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0 13px; background: transparent; border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:8px;color:rgba(255,255,255,.75);transition:background .5s var(--ease),color .4s,border-color .4s,transform .5s var(--ease)}
.work-pill:hover{background:#fff;color:#000;border-color:#fff;transform:translateY(-2px)}
.intro{display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px;margin-bottom:44px;opacity:0;animation:fadeUp .9s var(--ease) .28s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.eyebrow{margin:0 0 10px;font-size:8px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.headline{margin:0;max-width:820px;font-size:clamp(1.45rem,2.3vw,2.45rem);line-height:1.05;font-weight:350;letter-spacing:-.045em;color:rgba(255,255,255,.72)}
.headline strong{font-weight:750;color:#fff}
.count{align-self:end;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.28)}
.campaign{margin-top:26px}
.campaign-label{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px;font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.campaign-title-row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:24px}
.campaign-title{margin:0;font-size:clamp(2.1rem,4.8vw,5.8rem);line-height:.86;font-weight:800;letter-spacing:-.085em;text-transform:uppercase}
.campaign-side-copy{max-width:280px;font-size:11px;line-height:1.45;color:rgba(255,255,255,.38);text-align:right}
.campaign-stage{position:relative;overflow:hidden;aspect-ratio:16/9;background:#090909;border:1px solid rgba(255,255,255,.1);opacity:0;transform:translateY(36px) scale(.99);animation:stageIn 1.1s var(--ease) .5s forwards}
@keyframes stageIn{to{opacity:1;transform:none}}
.campaign-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.001);filter:saturate(.9) contrast(.98);transition:transform 1.3s var(--ease),filter 1s var(--ease)}
.campaign-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.08),transparent 36%,rgba(0,0,0,.24));opacity:.5;transition:opacity .8s}
.campaign-stage:hover .campaign-video{transform:scale(1.03);filter:saturate(1) contrast(1.02)}.campaign-stage:hover::after{opacity:.8}
.campaign-overlay{position:absolute;left:22px;right:22px;bottom:20px;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.campaign-stage:hover .campaign-overlay{opacity:1;transform:none}
.campaign-meta{display:flex;flex-direction:column;gap:6px}.campaign-meta .small{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.52)}.campaign-meta .big{font-size:16px;font-weight:700;letter-spacing:-.04em;text-transform:uppercase}
.scroll-word{padding:8px 11px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(0,0,0,.18);backdrop-filter:blur(12px);font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.mockup-section{margin-top:82px;padding-top:28px;border-top:1px solid rgba(255,255,255,.08)}
.mockup-heading{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;margin-bottom:22px}
.mockup-number{font-size:8px;letter-spacing:.16em;color:rgba(255,255,255,.28)}
.mockup-copy{max-width:650px}.mockup-copy h2{margin:0 0 8px;font-size:clamp(1.5rem,2.3vw,2.6rem);line-height:.95;letter-spacing:-.06em;font-weight:700}.mockup-copy p{margin:0;max-width:560px;font-size:11px;line-height:1.5;color:rgba(255,255,255,.36)}
.mockup-frame{position:relative;overflow:hidden;aspect-ratio:16/9;background:#090909;border:1px solid rgba(255,255,255,.1);opacity:0;transform:translateY(38px)}
.mockup-frame.is-visible{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}
.mockup-frame img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.002);transition:transform 1.25s var(--ease),filter 1s var(--ease)}.mockup-frame:hover img{transform:scale(1.035);filter:saturate(1.02)}
.flyers-section{margin-top:150px;padding-top:34px;border-top:1px solid rgba(255,255,255,.08)}
.section-meta{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px;font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.flyers-heading{margin:0 0 25px;font-size:clamp(2rem,4vw,4.8rem);line-height:.88;font-weight:800;letter-spacing:-.08em;text-transform:uppercase}
.flyer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.flyer{position:relative;overflow:hidden;aspect-ratio:1/1;background:#090909;opacity:0;transform:translateY(42px) scale(.985)}
.flyers-section.is-visible .flyer{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}
.flyers-section.is-visible .flyer:nth-child(1){transition-delay:.05s}.flyers-section.is-visible .flyer:nth-child(2){transition-delay:.13s}.flyers-section.is-visible .flyer:nth-child(3){transition-delay:.21s}
.flyer img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.2s var(--ease),filter 1s var(--ease)}
.flyer::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0),transparent 42%,rgba(0,0,0,.3));opacity:.28;transition:opacity .7s}
.flyer:hover img{transform:scale(1.055);filter:saturate(1.02) contrast(1.02)}.flyer:hover::after{opacity:.72}
.flyer-label{position:absolute;left:16px;right:16px;bottom:15px;z-index:2;display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .7s var(--ease)}.flyer:hover .flyer-label{opacity:1;transform:none}.flyer-label span{font-size:7px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.closing{margin-top:110px;padding-top:25px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:flex-start;gap:30px;opacity:0;transform:translateY(18px)}.closing.is-visible{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}.closing-label{font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.28)}.closing-copy{margin:0;max-width:540px;font-size:clamp(1rem,1.55vw,1.45rem);line-height:1.12;letter-spacing:-.045em;font-weight:300;color:rgba(255,255,255,.58)}.closing-copy strong{color:#fff;font-weight:700}
@media(max-width:800px){body{cursor:auto}.cursor,.cursor-dot{display:none}.page{padding:28px 5vw 80px}.topbar{grid-template-columns:1fr auto;grid-template-areas:"back work" "title title";gap:25px;margin-bottom:50px}.back{grid-area:back}.work-pill{grid-area:work}.title-wrap{grid-area:title;justify-content:flex-start;width:auto}.intro{grid-template-columns:1fr}.campaign-title-row{grid-template-columns:1fr}.campaign-side-copy{text-align:left}
.flyer-grid{display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;}.campaign-overlay{opacity:1;transform:none}.flyer-label{opacity:1;transform:none}.closing{display:block}.closing-copy{margin-top:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* =========================================================
   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;
  }

}