@font-face {
    font-family:'Outfit';
    src:url('../font/static/Outfit-Regular.ttf') format('truetype');
    font-weight:400;
    font-style:normal
    }
@font-face {
    font-family:'Outfit';
    src:url('../font/static/Outfit-Medium.ttf') format('truetype');
    font-weight:500;
    font-style:normal
    }
@font-face {
    font-family:'Outfit';
    src:url('../font/static/Outfit-SemiBold.ttf') format('truetype');
    font-weight:600;
    font-style:normal
    }
@font-face {
    font-family:'Outfit';
    src:url('../font/static/Outfit-Bold.ttf') format('truetype');
    font-weight:700;
    font-style:normal
    }

/* === Typography tokens mapped from Figma ===
Supertext, H1, H2, Descriptor, B1, B2, Button
Letter-spacing: Figma % -> CSS em (e.g., 5% = 0.05em)
*/

*{
    margin:0;padding:0;
    box-sizing:border-box
}

body{
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background-color:#000;
  color:#FFFFFF;
  line-height:1.4;overflow-x:hidden
}

.container{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:0 0 0 0;
}

/* ================= Main Content ================= */
.main-content{padding-top:var(--header-h)}

/* ===================== Figma Typography Tokens ===================== */

.supertext {                 /* Bold 60 / 120% / 0% */
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Outfit', Roboto, sans-serif;
  font-weight: 700;
  font-size: 60px;
  line-height: 1.2;
  letter-spacing: 0;
}

 /* H1 elements and h1 class styling - Figma: Outfit Bold 80 */
 h1, .h1 {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Outfit', Roboto, sans-serif;
  font-weight: 700;
  font-size: clamp(30px, calc(80 / 1440 * 100vw), 80px);
  line-height: 1.0;
  /* Figma 5% tracking → 0.05em (5% of font size) */
  letter-spacing: 0.05em;
}

@media (max-width: 768px){
   /* H1 elements and h1 class styling - Figma: Outfit Bold 80 */
  h1, .h1 {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Outfit', Roboto, sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.0;
    /* Figma 5% tracking → 0.05em (5% of font size) */
    letter-spacing: 0.05em;
  }
}

.h2 {                        /* Bold 40 / 120% / 0% */
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Outfit', Roboto, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: 0;
}

.descriptor {                /* Regular 15 / 100% / +20% (Uppercase) */
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Outfit', Roboto, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.b1 {                        /* Regular 25 / 140% / 0% */
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Outfit', Roboto, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, calc(25 / 1440 * 100vw), 25px);
  line-height: 1.4;
  letter-spacing: 0;
}

@media (max-width: 768px){
  .b1 {                        /* Regular 25 / 140% / 0% */
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Outfit', Roboto, sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0;
  }
}

.b2 {                        /* Regular 15 / 140% / 0% */
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Outfit', Roboto, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0;
}

.button-text {               /* SemiBold 15 / 100% / +20% (Uppercase) */
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Outfit', Roboto, sans-serif; 
  font-weight: 600;
  font-size: clamp(10px, calc(15 / 1440 * 100vw), 15px);
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ===================== Token Context Overrides (so tokens beat components) == */
/* Use only where components set their own type. Keep this list short & exact. */

.nav-link.descriptor,
.footer-col .descriptor,
.footer-legal.descriptor,
.footer-social p.descriptor {
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

.project-client.descriptor {
  font-weight: 400 !important;
  font-size: clamp(10px, calc(15 / 1440 * 100vw), 15px) !important;
  line-height: 1 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

.filter-title.descriptor {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Outfit', Roboto, sans-serif;
  font-weight: 600;
  font-size: 39px;
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: none;
}

.filter-btn.button-text {
  font-weight: 600 !important;
  font-size: clamp(10px, calc(15 / 1440 * 100vw), 15px) !important;
  line-height: 1.3 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

.footer-cta.button-text {
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

/* Ensure project buttons use the Button token when requested */
.project-tag.tag-text {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Outfit', Roboto, sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(10px, calc(15 / 1440 * 100vw), 15px) !important;
  line-height: 1 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.project-title.b1 {
  font-weight: 300 !important;
  font-size: clamp(19px, calc(25 / 1440 * 100vw), 25px) !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

.footer-heading.h2 {
  font-weight: 700 !important;
  font-size: 40px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}