 <style>


/* manrope-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/manrope-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/manrope-v20-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* manrope-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/manrope-v20-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/manrope-v20-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* manrope-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/manrope-v20-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/manrope-v20-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}





/* space-grotesk-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: "Instrument Sans", Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  src: url('fonts/space-grotesk-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* instrument-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/instrument-sans-v4-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



    :root {
      --bg: #070707;
      --surface: #101010;
      --text: #f5f5f2;
      --muted: rgba(245, 245, 242, .62);
      --line: rgba(255,255,255,.14);
      --pad: clamp(22px, 5vw, 76px);
    }


    

    *, *::before, *::after { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      background: var(--bg);
    }

 body {
   font-family: "Instrument Sans", Arial, sans-serif;
  color: var(--text);
}

h1,
h2,
h3,
.menu-overlay a,
.reference-project__title {
  font-family: "Instrument Sans", Arial, sans-serif;
  font-weight: 400;

}

    

    body.menu-open { overflow: hidden; }

    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    img, video { max-width: 100%; }

    .site-header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px var(--pad);
      pointer-events: none;
      transition: background .35s ease, backdrop-filter .35s ease;
    }

    .site-header.is-scrolled {
      background: rgba(7,7,7,.42);
      backdrop-filter: blur(18px);
    }


    .site-logo {
      display: inline-block;
      flex: 0 0 auto;
      width: clamp(180px, 22vw, 320px);
      pointer-events: auto;
    }
    
    .site-logo img {
      display: block;
      width: 90%;
      height: auto;
    }

    .brand,
    .menu-toggle { pointer-events: auto; }

    .brand img {
      display: block;
      width: clamp(168px, 17vw, 245px);
      height: auto;
    }

    .menu-toggle {
      width: 50px;
      height: 50px;
      border: 1px solid rgba(255,255,255,.24);
      border-radius: 50%;
      background: rgba(0,0,0,.18);
      backdrop-filter: blur(14px);
      color: #fff;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: transform .25s ease, background .25s ease;
    }

    .menu-toggle:hover { transform: scale(1.05); background: rgba(255,255,255,.1); }

    .menu-lines {
      position: relative;
      width: 22px;
      height: 14px;
    }

    .menu-lines::before,
    .menu-lines::after {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      border-radius: 10px;
      background: currentColor;
      transition: top .3s ease, bottom .3s ease, transform .3s ease;
    }

    .menu-lines::before { top: 1px; }
    .menu-lines::after { bottom: 1px; }

    .menu-toggle[aria-expanded="true"] .menu-lines::before {
      top: 6px;
      transform: rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] .menu-lines::after {
      bottom: 6px;
      transform: rotate(-45deg);
    }

    .menu-overlay {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: grid;
      align-items: center;
      padding: 120px var(--pad) 60px;
      background: rgba(7,7,7,.96);
      backdrop-filter: blur(22px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .35s ease, visibility .35s ease;
    }

    .menu-overlay.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .menu-overlay nav { display: grid; gap: 12px; }

.menu-overlay a {
    width: fit-content;
    font-family: "Instrument Sans", Arial, sans-serif;
    font-size: clamp(34px, 6vw, 90px);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(255, 255, 255, .92);
    transition: color .2s ease, transform .25s ease;
}
    .menu-overlay a:hover {
      color: #fff;
      transform: translateX(14px);
    }

    .hero {
      position: relative;
      min-height: 100svh;
      overflow: hidden;
      isolation: isolate;
      background: #111;
    }

    .hero-media {
      position: absolute;
      inset: 0;
      z-index: -3;
      overflow: hidden;
    }

    .hero-media video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
     
      filter: brightness(.74) saturate(.92);
      will-change: transform, filter;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        linear-gradient(90deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.2) 52%, rgba(0,0,0,.22) 100%),
        linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.62));
    }

    .hero-content {
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 22vh var(--pad) 10vh;
    }

    .eyebrow {
      margin: 0 0 22px;
      color: rgba(255,255,255,.66);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    .hero h1 {
      max-width: 1120px;
      margin: 0;
      font-size: clamp(42px, 8vw, 100px);

      line-height: .86;
  
      text-transform: uppercase;
      text-wrap: balance;
    }

    .hero-bottom {
      margin-top: clamp(32px, 5vh, 64px);
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 28px;
    }

    .hero-copy {
      max-width: 570px;
      margin: 0;
      color: rgba(255,255,255,.72);
      font-size: clamp(17px, 1.35vw, 22px);
      line-height: 1.45;
    }

    .scroll-cue {
      display: flex;
      align-items: center;
      gap: 12px;
      color: rgba(255,255,255,.62);
      font-size: 12px;
      letter-spacing: .18em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .scroll-cue::before {
      content: "";
      width: 48px;
      height: 1px;
      background: currentColor;
      transform-origin: left;
      animation: cue 1.8s ease-in-out infinite;
    }

    @keyframes cue {
      0%,100% { transform: scaleX(.35); opacity: .45; }
      50% { transform: scaleX(1); opacity: 1; }
    }

    .statement {
      min-height: 90svh;
      display: grid;
      align-items: center;
      padding: 14vh var(--pad);
      background: var(--bg);
    }

  .statement p {
    max-width: 1250px;
    margin: 0;
    font-size: clamp(30px, 5.3vw, 90px);
}

    .section-head {
      padding: 12vh var(--pad) 6vh;
      border-top: 1px solid var(--line);
      background: var(--bg);
    }

    .section-head span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
    }

  .section-head h2 {
    max-width: 11ch;
    margin: 18px 0 0;
    font-size: clamp(42px, 8vw, 100px);
    line-height: .88;
    text-transform: uppercase;
    text-wrap: balance;
}

    .work-list { background: var(--bg); }

    .work-item {
      position: relative;
      min-height: 100svh;
      overflow: hidden;
      border-top: 1px solid var(--line);
      background: #111;
      isolation: isolate;
    }

      .work-media {
        position: absolute;
        inset: 0;
        z-index: -3;
        overflow: hidden;
      }


 .work-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, .45) 0%,
        rgba(0, 0, 0, .08) 30%,
        transparent 55%
    );
}

    .work-media video,
    .work-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
     
      transition: transform 1s cubic-bezier(.2,.7,.2,1), filter .6s ease;
    }

    .work-item:hover .work-media video,
    .work-item:hover .work-media img {
     
      filter: brightness(.92) saturate(.96);
    }

    .work-item::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      
    }

    .work-content {
      min-height: 100svh;
      padding: 15vh var(--pad) 9vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .work-number {
      margin-bottom: 18px;
      color: rgba(255,255,255,.55);
      font-size: 12px;
      letter-spacing: .2em;
    }

  .work-title {
    max-width: 1100px;
    margin: 0;
    font-size: clamp(36px, 5.8vw, 100px);
    font-weight: 900;
    line-height: .87;
    text-transform: uppercase;
}
    .work-meta {
      margin: 22px 0 0;
      color: rgba(255,255,255,.67);
      font-size: clamp(16px, 1.25vw, 21px);
    }

    .work-arrow {
      position: absolute;
      right: var(--pad);
      bottom: 9vh;
      width: 58px;
      height: 58px;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 24px;
      transition: transform .25s ease, background .25s ease;
    }

    .work-item:hover .work-arrow {
      transform: translate(5px,-5px);
      background: rgba(255,255,255,.12);
    }

    .services {
      padding: 14vh var(--pad) 16vh;
      background: var(--surface);
    }

    .services-grid {
      margin-top: 70px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      border-top: 1px solid var(--line);
    }

.service {
    padding-top: 32px;
    padding-bottom: 38px;
}

.services-grid .service:nth-child(odd) {
    padding-right: clamp(28px, 3vw, 48px);
}

.services-grid .service:nth-child(even) {
    padding-left: clamp(28px, 3vw, 48px);
}

    .service small {
      display: block;
      color: var(--muted);
      letter-spacing: .16em;
    }

    .service h3 {
      margin: 24px 0 14px;
      font-size: clamp(30px, 3.5vw, 58px);
      line-height: .95;
      letter-spacing: -.045em;
    }

    .service p {
      max-width: 540px;
      margin: 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.55;
    }

    .contact {
      min-height: 100svh;
      padding: 13vh var(--pad) 7vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: var(--bg);
      border-top: 1px solid var(--line);
    }

    .contact h2 {
      max-width: 1200px;
      margin: 0;
      font-size: clamp(58px, 10vw, 170px);
      line-height: .84;
      letter-spacing: -.08em;
      text-transform: uppercase;
    }

    .contact-mail {
      width: fit-content;
      margin-top: 48px;
      border-bottom: 1px solid currentColor;
      font-size: clamp(20px, 2vw, 32px);
      padding-bottom: 6px;
    }

    .site-footer {
      padding: 28px var(--header-pad, 32px);
      border-top: 1px solid rgba(255, 255, 255, .14);
      background: #070707;
  }
  
  .footer-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
  }
  
  .footer-copyright,
  .footer-legal a {
      font-size: 14px;
      line-height: 1.4;
      color: rgba(255, 255, 255, .62);
  }
  
  .footer-legal {
      display: flex;
      gap: 24px;
  }
  
  .footer-legal a {
      text-decoration: none;
      transition: color .2s ease;
  }
  
  .footer-legal a:hover {
      color: #fff;
  }

    .reveal {
      opacity: 0;
      transform: translateY(34px);
      transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
    }

    .reveal.is-visible { opacity: 1; transform: none; }

    @media (max-width: 780px) {
      .hero-content { padding-bottom: 7vh; }
      .hero-bottom { align-items: flex-start; flex-direction: column; }
      .scroll-cue { display: none; }
      .work-arrow { right: 24px; bottom: 32px; }
      .work-content { padding-bottom: 110px; }
      .services-grid { grid-template-columns: 1fr; }
      .service:nth-child(odd) { border-right: 0; }
      .service:nth-child(even) { padding-left: 0; }
      .footer-row { flex-direction: column; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation: none !important; transition: none !important; }
      .reveal { opacity: 1; transform: none; }
    }


    



#container
{
	
	 background-size: 100px 100px;
	background: linear-gradient(-45deg, #000265, #ad262f, #61336b, #497368, #409f3f, #f4e400, #00698c, #00a7a2, #c23a26);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
	 -ms-animation:  Gradient 15s ease infinite;
  -o-animation:  Gradient 15s ease infinite;
background-image: -webkit-linear-gradient(-45deg, #000265, #ad262f, #61336b, #497368, #409f3f, #f4e400, #00698c, #00a7a2, #c23a26);
}


.logo {
    width: 315px;
    float: left;
    padding: 20px;
}
.logo {
    display: inline-block;
}


img.logo_def {
    display: -webkit-box;
    max-width: 100%;
}


  </style>