/* === FONT-FACE DECLARATIONS === */
@font-face {
    font-family: 'sk-modernist';
    src: url('fonts/Sk-Modernist-Regular.otf');
  }

  @font-face {
    font-family: 'sk-modernist, bold';
    src: url('fonts/Sk-Modernist-Bold.otf');
  }
  
  @font-face {
    font-family: 'NeueMontreal';
    src: url('fonts/NeueMontreal-Regular.woff2') format('woff2'),
         url('fonts/NeueMontreal-Regular.woff') format('woff'),
         url('fonts/NeueMontreal-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'NeueMontreal';
    src: url('fonts/NeueMontreal-Medium.woff2') format('woff2'),
         url('fonts/NeueMontreal-Medium.woff') format('woff'),
         url('fonts/NeueMontreal-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
  }
  
  /* === GLOBAL STYLES === */

  #preloader{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    z-index: 100;
    background-color: #FFF;
    flex-direction: column;
}

#percent{
    color: #333;
    font-family: 'NeueMontreal', sans-serif;
    font-weight: 400;
    font-size: clamp(2rem, 2vw + 1rem, 3rem);
  }

#bar{
    width: 60%;
    margin-top: 20px;
}

body.loading {
  overflow: hidden;
}
  
  body {
    width: 100%;
    box-sizing: border-box;
    font-family: 'NeueMontreal-Regular';
    overflow-x: hidden;
    margin: 0;
    background-color: #FFF;
  }
  
  h1, h2, h4, h5, h6, strong, .logo, h3 {
    font-family: 'NeueMontreal', sans-serif;
    font-weight: 500;
    color: #333;
    line-height: normal;
  }
  
  h1 {
    font-size: clamp(1.75rem, 3.5vw + 1rem, 3.75rem);
    max-width: 100%;
  }

  .contact {
    padding-block: clamp(60px, 5vw, 120px);
  }

  .contact h1{
    line-height: 0.75;
  }

  .contact p {
    padding-bottom: clamp(20px, 5vw, 40px);
  }
  
  #welcome {
    font-size: clamp(2.125rem, 3.5vw + 1rem, 4rem);
    font-family: 'NeueMontreal', sans-serif;
    font-weight: 600;
    max-width: 100%;
    padding-block: clamp(60px, 5vw, 120px);
    color: #333;
  }

  @media (max-width: 650px) {
    #welcome {
      max-width: 99%;
      font-weight: 550;
    }
  }
  
  h2 {
    font-size: clamp(1.5rem, 2vw + 1rem, 1.75rem);
    margin: 0;
  }
  
  h3 {
    font-size: clamp(1rem, 1.5vw + 1rem, 1.5rem);
    margin: 0;
  }
  
  h4 {
    font-size: clamp(0.75rem, 1vw + 1rem, 1.25rem);
    margin: 0;
  }
  
  p, li {
    font-size: clamp(1.125rem, 0.36vw + 0.93rem, 1.25rem);
    font-family: 'NeueMontreal', sans-serif;
    font-weight: 400;
    line-height: 1.25;
    color: #444;
  }
  
  a {
    color: #007AFF;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
  }
  
  a:hover, a:focus {
    color: #005CBF;
    text-decoration: underline;
  }

  a.navbar-logo,
  a.navbar-logo:hover,
  a.navbar-logo:focus {
  text-decoration: none;
}


  /* === BUTTONS === */
  
  .button {
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    transition-duration: 0.3s;
    cursor: pointer;
    border-radius: 100px;
  }
  
  .primary-cta {
    font-family: 'NeueMontreal', sans-serif;
    font-size: 1.125rem;
    background-color: transparent;
    color: #444;
    border: 1px solid #ddd;
    padding: 16px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    transition: all 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
  }

  .primary-cta.primary {
    background-color: #333;
    color: #FFF;
    border: 1px solid #333;
  }
  
  .primary-cta.primary:hover,
  .primary-cta.primary:focus {
    color: #fff;
    background-color: #111;
  }
  
  .primary-cta.primary .cta-icon {
    fill: #fff; /* in case it's an SVG icon */
  }

  .disabled {
    font-family: 'NeueMontreal', sans-serif;
    font-size: 1.125rem;
    background-color: #FAFAFA;
    color: #999;
    border: 1px solid #ddd;
    padding: 16px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    transition: all 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
    cursor: default; /* or use "not-allowed" if you want the "🚫" style */
  pointer-events: none; /* ensures it’s completely non-interactive */
  opacity: 0.6; /* optional: visual cue it's inactive */
  }
  
  .primary-cta .cta-label {
    transition: padding-right 0.3s ease;
  }
  
  .primary-cta .cta-icon {
    display: inline-flex;
    opacity: 0;
    width: 0;
    margin-left: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, width 0.3s ease, margin-left 0.3s ease;
  }
  
  .primary-cta:hover,
  .primary-cta:focus {
    color: #111;
    border: 1px solid #666;
  }
  
  .primary-cta:hover .cta-icon,
  .primary-cta:focus .cta-icon {
    width: 20px;
    opacity: 1;
    margin-left: 2px;
  }
  
  .primary-cta:hover .cta-label,
  .primary-cta:focus .cta-label {
    padding-right: 8px;
    text-decoration: none !important;
  }
  
  .primary-cta:focus {
    outline: #333 auto 1px;
  }
  
  @media screen and (max-width: 425px) {
    .primary-cta {
      padding: 20px 22px;
    }
  }

  /* === SITE HEADER === */
  .site-header {
    background-color: #FFFFFF;
    border-bottom: 1px solid #E5E5E5;
    position: relative;
    z-index: 10;
  }

/* === NAVIGATION === */

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* max-width: clamp(850px, 85vw, 1600px); */
  max-width: 100%;
  padding: 20px clamp(20px, 4vw, 48px);
  margin: 0 auto;
  font-size: 17px;
}

.navbar-logo {
  font-family: 'sk-modernist';
  /* font-family: 'NeueMontreal', sans-serif; */
  font-size: 20px;
  color: #a3a3a3;
  font-weight: 400;
  line-height: normal;
}

/* Desktop nav menu */
.navbar__menu {
  display: flex;
  gap: 0.25;
  list-style: none;
  padding: 0;
  margin: 0;
}

.navbar__menu a {
  color: #A3A3A3;
  text-decoration: none;
  font-size: clamp(1.125rem, 0.36vw + 0.93rem, 1.125rem);
  font-family: 'NeueMontreal', sans-serif;
  font-weight: 400; /* Regular */
  padding: 8px 12px;
  transition: color 0.2s ease;
}

.navbar__menu a.active,
.navbar__menu a:hover,
.navbar__menu a:focus {
  color: #222;
}

.navbar__menu a:focus {
  border-bottom: 1px solid #222;
  color: #222;
}

.navbar-logo:hover{
  color: #222;
  transition: color 0.2s ease;
}

/* Mobile nav styles */
@media (max-width: 650px) {

  .navbar-logo {
  font-size: 19px;
  color: #a3a3a3;
  }

  .navbar__menu {
    gap: 0;
    padding: 2px 0px 0px 0px;
  }

  .navbar__menu a {
    font-size: 18px;
    width: 100%;
    padding: 8px 6px;
  }

  .navbar__menu a:hover,
  .navbar__menu a.active {
    color: #000;
  } 
}


/* === SCROLL LOCK === */
body.nav-open {
  overflow: hidden;
  height: 100vh;
}


  
  /* === LAYOUT === */

  .section-header {
    margin-bottom: clamp(16px, 2vw, 24px);
    margin-top: clamp(24px, 5vw, 48px);
    line-height: 0px;
  }
  
  .featured-work-parent-container {
    display: grid;
    width: 100%;
    max-width: 1150px;
    grid-template-columns: repeat(1, minmax(300px, 1fr)); /* Always max 2 columns */
    column-gap: clamp(25px, 2vw, 50px); /* Fluid column gap */
    margin: 0 auto;
  }

  .projects-grid {
    display: grid;
    grid-template-columns: 1fr; /* Or switch to 2 columns on larger screens */
    row-gap: clamp(32px, 5vw, 80px); /* Controls spacing *between* project containers */
    /* margin-top: clamp(32px, 5vw, 64px); */
  }

  .project-container__image {
    width: 100%;
    max-height: clamp(400px, 80vh, 750px);  
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Ensures image doesn’t spill out */
    box-sizing: border-box;
  }
  
  .project-container__image img {
    display: block;
    /* padding: clamp(30px, 4vw, 120px); Controls spacing *between* project containers */
    max-height: 100%;  /* ✅ Keeps image inside container */
    max-width: 100%;   /* ✅ Prevents stretching horizontally */
    height: auto;      /* ✅ Keeps aspect ratio */
    width: auto;       /* ✅ Prevents squashing */
  }
  
  img {
    max-width: 100%;
    height: auto;
  }  

  .context-pills {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.5rem, 1vw + 0.75rem, 0.75rem);
    /* gap: 0.75rem; */
  }
  
  .pill {
    background-color: #F5F5F5;
    color: #333;
    font-size: clamp(1rem, 0.36vw + 0.93rem, 1.125rem);
    font-family: 'NeueMontreal', sans-serif;
    padding: 12px 16px;
    border-radius: 100px;
    font-weight: 400;
    line-height: 1.25;
    white-space: nowrap;
  }
  
  
  
  .project-container__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* ✅ Vertical alignment */
    justify-content: space-between;
    gap: 1rem;
    width: 100%; /* ✅ Forces it to stretch */
  }
  
  .project-container__text {
    flex: 1 1 500px;
    min-width: 240px;
    max-width: 750px;
  }
  
  .project-container__button-wrapper {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  
  /* Headings and paragraph spacing */
  .project-container__text h3 {
    margin-bottom: 0.5rem;
  }
  
  .project-container__text p {
    margin-top: 0;
  }
  
  @media (max-width: 768px) {
    .project-container__content {
      flex-direction: column;
      align-items: flex-start;
      row-gap: clamp(0.5rem, 2.5vw, 2rem);
      margin-bottom: 2rem;
    }
  
    .project-container__text {
      flex: 1 1 100%;
      max-width: 100%;
    }
  
    .project-container__button-wrapper {
      width: 100%;
      justify-content: flex-start;
    }
  
    .primary-cta {
      width: auto;
      margin-top: 0.5rem;
    }

    .disabled {
      width: auto;
      margin-top: 0.5rem;
    }
  }

  .featured-work-image-container img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: clamp(16px, 3vw, 24px);
  }
  
  .featured-work-image-container { 
    max-width: clamp(800px, 100vw, 1150px); /* 👈 This is the key line */
    /* margin: 0 auto; */
  }

  /* main {
    margin: 0 auto;
    width: min(100%, 2000px);
  } */

  main{
    max-width: clamp(800px, 75vw, 1150px);
    margin: 0 auto;
    padding-inline: clamp(20px, 5vw, 48px);
    padding-bottom: clamp(80px, 5vw, 160px);
  }
  
  .intro {
    max-width: clamp(800px, 75vw, 1150px);
    margin: 0 auto;
    padding-inline: clamp(16px, 5vw, 64px);
    padding-top: clamp(40px, 5vw, 96px);
    text-align: left;
  }

  #tldr{
    padding-block: clamp(40px, 5vw, 80px);
  }
  
  .case-study-container {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    max-width: 1600px;
    margin: 0 auto;
    padding-inline: clamp(16px, 5vw, 64px);
    padding-bottom: clamp(40px, 5vw, 80px);
  }
  
  .case-study-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: clamp(16px, 5vw, 24px);
    width: 100%;
  }
  
  .text-container {
    max-width: 800px;
    width: 100%;
  }
  
  .image-container img {
    width: 100%;
    height: auto;
    display: block;
  }

  figure {
    margin: 2rem 0;
    text-align: center;
  }
  
  figcaption {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
    font-family: 'NeueMontreal', sans-serif;
  }
  
  
  .image-container.small { max-width: 800px; }
  .image-container.smedium { max-width: 1000px; }
  .image-container.medium { max-width: clamp(900px, 75vw, 1200px); }
  .image-container.large { max-width: 1600px; }
  
  .image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    margin: 0 auto;
    gap: 30px;
  }
  
  .image-grid img {
    object-fit: contain;
    height: auto;
  }
  
  @media (max-width: 768px) {
    .case-study-container {
      padding-inline: clamp(16px, 5vw, 32px);
    }
    .image-grid {
      grid-template-columns: 1fr;
      gap: clamp(12px, 3vw, 24px);
    }
  }
  
  .asset-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2vw, 24px);
    max-width: 800px;
    width: 100%;
    padding-top: clamp(16px, 5vw, 20px);
  }
  
  .asset img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
  
  @media (max-width: 600px) {
    .asset-grid {
      grid-template-columns: 1fr;
    }
  }
  
  .full-width-image {
    width: 100vw;
    height: auto;
    display: block;
  }
  
  /* === UTILITIES === */
  .mt-12 { margin-top: clamp(6px, 5vw, 12px); }
  .mt-16 { margin-top: clamp(8px, 5vw, 16px); }
  .mt-24 { margin-top: clamp(12px, 5vw, 24px); }
  .mt-32 { margin-top: clamp(16px, 5vw, 32px); }
  .mb-12 { margin-block: clamp(6px, 5vw, 12px); }
  .mb-24 { margin-block: clamp(12px, 5vw, 24px); }
  .mb-32 { margin-block: clamp(16px, 5vw, 32px); }
  .mb-64 { margin-block: clamp(32px, 5vw, 128px); }
  .margin-bottom-40 { margin-bottom: clamp(20px, 5vw, 40px); }
  .hero-mb { margin-bottom: 5%; }
  
  /* === COMPONENTS === */

  .accordion {
    border: 1px solid #CCC;
    /* background-color: #fcfcfc; */
    border-radius: 12px;
    font-family: 'NeueMontreal', sans-serif;
    overflow: hidden;
    width: 100%;
    max-width: 790px;
    margin-block: clamp(4px, 5vw, 6px);
    padding-inline: clamp(2px, 5vw, 6px);
    padding-block: clamp(2px, 5vw, 4px);
    transition: all 0.3s ease;
  }
  
  .accordion:hover {
    border-color: #222;
    color: #222;
  }
  
  .accordion__header {
    padding: clamp(2px, 5vw, 8px);
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 1.15rem;
  }
  
  .accordion__left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
  }
  
  .accordion__icon-left img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
  }
  
  .accordion__icon {
    padding-right: 6px;
    padding-top: 4px;
  }
  
  .accordion__icon svg {
    color: #A3A3A3;
    transition: transform 0.3s ease, color 0.3s ease;
  }
  
  .accordion:hover .accordion__icon svg {
    color: #222;
  }
  
  .accordion.open .accordion__icon svg {
    transform: rotate(180deg);
  }
  
  .accordion__header h4 {
    font-weight: 450;
    margin: 0;
    font-size: clamp(0.75rem, 1vw + 0.8rem, 1.2rem);
    color: #444;
  }
  
  .accordion__content {
    max-height: 0;
    overflow: hidden;
    padding: 0 8px;
    transition: max-height 0.3s ease, padding-top 0.3s ease, padding-bottom 0.3s ease;
  }
  
  .accordion.open .accordion__content {
    max-height: 500px;
    padding-block: clamp(4px, 5vw, 12px);
  }
  
  .accordion__content p {
    margin: 0;
    font-size: clamp(1.125rem, 0.36vw + 0.93rem, 1.125rem);
    font-family: 'NeueMontreal', sans-serif;
  }

  .accordion__content p + p {
    margin-top: 12px; /* or whatever spacing fits your vibe */
  }
  

  /* === HIGHLIGHT === */
  
  .highlight {
    background: #FFF4B8;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  
  
  /* === PROJECT GRID === */
  .more-projects {
    text-align: center;
    /* background-color: #FAFAFA; */
    background-color: #FFFFFF;
    width: 100%;
    padding-block: min(8vw, 4rem) 1rem;
    border-top: 1px solid #E5E5E5;
  }
  
  .project-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto 2rem;
    padding: 2rem;
    /* width: 100%; */
  }
  
  .project-card {
    display: block;
    text-decoration: none;
    transition: transform 0.2s ease;
  }
  
  .project-card:hover {
    transform: translateY(-4px);
    text-decoration: none;
  }
  
  .project-card img {
    width: clamp(300px, 30vw, 400px);
    height: clamp(225px, 30vw, 300px);
    display: block;
  }

  /* === Footer === */
  .footer {
    width: 100%;
    height: clamp(400px, 50vh, 600px); /* 🔥 Scales between 300px and 600px */
    background-color: #FBFBFB;
    padding: clamp(48px, 6vw, 80px) 0; /* Top/bottom breathing room */
    box-sizing: border-box;
    padding-inline: clamp(20px, 5vw, 64px);
    margin-top: clamp(60px, 5vw, 160px);
  }
  
  .footer__text-container {
    margin: 0 auto;
    max-width: clamp(800px, 75vw, 1150px);
    text-align: left; /* Optional: feels more welcoming */
  }
  
  .footer__text-container p {
    margin-bottom: 2rem;
    max-width: 600px;
  }
  
  /* === SCROLL TO TOP === */
  .progress-wrap {
    position: fixed;
    right: 40px;
    bottom: 40px;
    height: 48px;
    width: 48px;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    background: white;
  }
  
  .progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .progress-wrap svg path {
    fill: none;
  }
  
  .progress-wrap svg.progress-circle path {
    stroke: #666;
    stroke-width: 4;
    transition: stroke 0.3s ease, stroke-dashoffset 0.3s linear;
  }
  
  .progress-wrap:hover svg.progress-circle path {
    stroke: #111;
  }
  
  .scroll-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: #666;
    transition: color 0.2s ease;
  }
  
  .progress-wrap:hover .scroll-arrow {
    color: #111;
  }