/* Color variables */

:root {
    --color-black: #2F2C3E;
    --color-white: #FDFDFD;
    --color-grey-1: #EDEDED;
    --color-grey-2: #726D6D;
    --color-grey-3: #454545;
  }
  

/* Reset some default margins/paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* html {
    font-size: 16px;
  }
   */

  /* body {
    font-family: 'Geist', sans-serif;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
  } */
  
  a {
    text-decoration: none;
    color: inherit;
  }

  ul {
    list-style: none; /* remove bullets */
    margin: 0;        /* remove default margin */
    padding: 0;       /* remove default padding */
  }
  
  li {
    margin: 0;
    padding: 0;
  }
  
  body {
    background-color: var(--color-white);
    width: 100%;
  }

  img {
      display: block;
      width: 100%;
      object-fit: cover;
  }
  
  /* ========== Font import ========== */

@font-face {
    font-family: 'Sentient-Regular';
    src: url('../fonts/Sentient-Regular.woff2') format('woff2'),
         url('../fonts/Sentient-Regular.woff') format('woff'),
         url('../fonts/Sentient-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }

/* ========== Text styles ========== */

/* H1 */
h1 {
    font-family: 'Sentient', 'Source Serif Pro', serif;
    font-weight: 300;
    font-size: clamp(2rem, 5vw, 3.75rem); /* min 36px, max 60px */
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-black);

  }
  
  /* H2 */
  h2 {
    font-family: 'Sentient', 'Source Serif Pro', serif;
    font-weight: 300;
    font-size: clamp(2rem, 4.2vw, 3.125rem); /* min 32px, max 50px */
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-black);

  }
  
  /* H3 */
  h3 {
    font-family: 'Sentient', 'Source Serif Pro', serif;
    font-weight: 300;
    font-size: clamp(1.5rem, 3vw, 2.25rem); /* min 24px, max 36px */
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-black);

  }
  
  /* H4 */
  h4 {
    font-family: 'Sentient', 'Source Serif Pro', serif;
    font-weight: 300;
    font-size: clamp(1.375rem, 3vw, 1.75rem); /* min 22px, max 28px */
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-grey-2);
  }
  
  /* H5 */
  h5 {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-size: clamp(1.125rem, 2vw, 1.25rem); /* min 18px, max 20px */
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: normal;
    color: var(--color-grey-2);
  }
  
  /* H6 */
  h6 {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-size: clamp(1.125rem, 2vw, 1.25rem); /* min 18px, max 20px */
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--color-black);

  }
  
  /* Body text */
p {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-size: 1rem; /* 16px base */
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--color-grey-3);

  }

  .copyright-text {
    color: var(--color-grey-2);
}

.grey {
    color: var(--color-grey-2);
}

.callout {
    font-family: 'Sentient', 'Source Serif Pro', serif;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-grey-3);
    font-style: italic;
    padding: 0.75rem 1.25rem;
    border-left: 2px solid var(--color-grey-3);
}

  /* ========== Button styles ========== */

  button {
    background: none;
    border: none;
  }

  .nav-button {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-size: 1rem; /* 16px base */
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--color-black);

  }

  /* .nav-button:hover {
    color: var(--color-grey-2);
    transition: 0.7s;
  } */

.aside-nav-button {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-size: clamp(1.125rem, 2vw, 1.25rem); /* min 18px, max 20px */
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--color-grey-2);
    text-align: left;
    transition: color 0.2s ease;

}

.aside-nav-button:hover {
    color: var(--color-black);
}

.aside-nav-button.active {
    color: var(--color-black);
}



/* ========== Navbar ========== */
header {
    position: sticky;
    top: 2.25rem;
    z-index: 1000;
    width: 100vw;
  }
  
  /* Blur background always visible */
  header::before {
    content: "";
    position: fixed;
    top: calc(2.25rem);       /* aligns with header top */
    left: 50%;
    transform: translateX(-50%);
    width: 95vw;              /* same width as navbar */
    height: var(--nav-blur-height); /* controlled by JS */
    background: rgba(250, 250, 250, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 0.75rem;
    z-index: 999;
    pointer-events: none;
    transition: height 0.25s ease;
  }
  
  .navbar {
    position: relative;
    max-width: 95vw;
    margin: 0 auto;
    padding: 0.75rem 1.25rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    z-index: 1000; /* above blur */
  }
  
  /* top row: logo + hamburger */
  .navbar-small {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
  }
  
  .hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  
  .navbar-items {
    display: flex;
    justify-content: flex-end;
    gap: 3rem;
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
  }

  .logo {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.75rem;
      font-family: 'Sentient', 'Source Serif Pro', serif;
      font-weight: 300;
      font-size: clamp(1.25rem, 3vw, 1.5rem); /* min 22px, max 28px */
      line-height: 1.2;
      letter-spacing: -0.02em;
  }
  
  .logo-gif {
      height: 34px;
      width: auto;
  }

/* ========== Footer ========== */
footer {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 3.75rem;
}

.footer-text {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
}

.footer-nav {
    display: flex;
    flex-direction: row;
    gap: 5rem;
    flex-wrap: wrap;
    align-items: top;
}

.footer-nav-col {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.copyright {
    border-top: solid 0.0625rem var(--color-grey-2);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}


/* ========== Layout ========== */

/* basics */

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-row-desktop {
    flex-direction: row;
}

.space-between {
    justify-content: space-between;

}

.width-100 {
    width: 100%;
}

.gap-xs {
    gap: 0.25rem;
}

.gap-s {
    gap: 0.75rem;
}

.gap-m {
    gap: 1.25rem; /*20px*/
}

.gap-l {
    gap: 2rem;
}

.gap-xl {
    gap: 6.25rem;
}

.gap-xl-m {
    gap: clamp(1.25rem, 5.5vw, 6.25rem);

}

.gap-clamp {
    gap: clamp(0.75rem, 4vw, 1.25rem);
}

.none-desktop {
    display: none;
}

.right-align {
    align-items: flex-end;
}


/* home page */

  .hero {
    width: 100%; /* fill the viewport width */
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 12px */
    padding-top: clamp(3.75rem, 10vw, 5rem); /* 100–140px */
    padding-right: clamp(1.25rem, 4vw, 3.75rem); /* 32–60px */
    padding-bottom: clamp(2.5rem, 6vw, 5rem);   /* 40–80px */
    padding-left: clamp(1.25rem, 4vw, 3.75rem);   /* 32–60px */
  }
  
  .featured {
    width: 100%; /* fill the viewport width */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 11.25rem 2.5rem 11.25rem;
  }

    .featured-work-wrapper {
    display: flex;
    flex-direction: column;
    width: auto;
    gap: 0.75rem; /* 12px */
  }

    .body-heading {
    text-align: left;
    width: 100%;
  }

  .featured-work {
    max-width: 1000px;
  }

  /* case study pages */

  .case-study-hero {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding-top: clamp(3.75rem, 10vw, 5rem); /* 100–140px */
      padding-right: clamp(1.25rem, 4vw, 2.5rem);
      padding-bottom: clamp(2.5rem, 6vw, 5rem);   /* 40–80px */
      padding-left: clamp(1.25rem, 4vw, 2.5rem);
  }

  .case-study-details-left {
      width: auto;
  }

  .case-study-content {
      display: grid;
      grid-template-columns: minmax(16%, 20%) 1fr minmax(16%, 20%);
      padding: clamp(1.25rem, 4vw, 2.5rem);  
      overflow: visible;

    }

    /* .grid-centre {
        grid-column: 2 / span 1;
    }

    .with-right {
        grid-column: 2 / span 2;
    } */

  .content-nav {
    position: sticky;
    top: 7.5rem;   /* adjust this for your desired offset */
    align-self: start;
  }

  .case-study-body {
      gap: clamp(0.75rem, 4vw, 1.255rem);
  }

  .case-study-content-frame {
      border: 2px solid var(--color-grey-1);

  }

  /* .case-study-content-img {
    width: auto;
  height: auto;
  max-height: 400px;       /* optional limit */
  /* max-width: 100%;
  object-fit: cover;
  } */ 

  .pt-l {
      padding-top: clamp(1.25rem, 2.22vw, 2rem);
  }

  .pt-xl {
    padding-top: 3rem;
}

.mt-xxl {
    margin-top: 3.5rem;
}

  .mt-l {
    margin-top: clamp(1.25rem, 2.22vw, 2rem);
}
  

/* ========== Case study card contents ========== */

  .case-study-card {
      display: flex;
      flex-direction: row;
      width: 100%;
      max-width: 1000px;
      padding: 1.25rem;
      /* margin: 10px; */
      gap: 2rem;
      border-radius: 0.75rem;
      position: relative;       /* needed for pseudo-element */
      overflow: hidden;          /* clips SVG edges */
      transition: transform 0.2s ease;

  }

  .case-study-card:hover, .case-study-card-2:hover {
    background-color: var(--color-white);
  }

/* SVG overlay layer */
.border-svg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  
  .case-study-card:hover .border-svg {
    opacity: 1;
  }

  .case-study-card-2:hover .border-svg {
      opacity: 1;
  }
  
  /* make SVG fill the card */
  .border-svg svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  
  /* draw the dashed outline */
  .border-rect {
    x: 1px;
    y: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    fill: none;
    stroke: var(--color-grey-1);
    stroke-width: 2px;
    stroke-dasharray: 8px 8px; /* dash + gap length */
    stroke-linecap: round; /* rounded ends */
    rx: 12px; /* rounded card corners */
    ry: 12px;
  }



  .square-viz {
    /* width: 315px;            */
    max-width: 40%;         
    min-width: 25%;       
    height: auto;
    aspect-ratio: 1 / 1;     /* square */
    object-fit: cover;       /* crop if needed */
    flex-shrink: 1;          /* allow shrinking first */
  }

  .case-study-card-text {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      width: auto;
      min-width: 60%;
      
  }

  .case-study-card-info {
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: center;
      gap: 0.25rem;
      }

  /* ========== Figma prototype iframe ========== */
     
  .mobile-prototype {
    aspect-ratio: 9 / 16;
  }

  /* ========== Read more section ========== */

  .read-more {
    padding: clamp(1.25rem, 4vw, 2.5rem);
  }

  .more-work {
    display:grid;
    grid-template-columns: 1fr 1fr;
  }



       .case-study-card-2 {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 1000px;
      padding: 1.25rem;
      /* margin: 10px; */
      gap: 2rem;
      border-radius: 0.75rem;
      position: relative;       /* needed for pseudo-element */
      overflow: hidden;          /* clips SVG edges */
      transition: transform 0.2s ease;

  }


  .horizontal-viz {
    aspect-ratio: 16 / 9;

  }



  /* ========== Media queries ========== */

  /* Tablet: smaller than desktop */
  @media (max-width: 800px) {
    .hamburger {
      display: block;
    }

    .navbar-small {
        width: 100%;
    }
  
    .navbar-items {
      display: none;
      position: absolute;
      top: 100%; /* below .navbar-small */
      left: 0;
      width: 100%;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
      padding: 1rem;
      background: transparent; /* blur handled by ::before */
      z-index: 1001;
    }

  
    header.open .navbar-items {
      display: flex;
    }
  
    /* when open, extend the blur background down */
    header.open::before {
      height: var(--nav-blur-height, 250px);
    }

    header::before {
     max-width: 90vw;
    }
    
    .navbar {
        width: 90vw;
    }

.case-study-content {
    grid-template-columns: minmax(12%, 16%) 1fr ;

}
/* ========== Footer ========== */

    footer {
        padding: 2rem;
    }

    .footer-text {
        gap: 0.75rem;
    }

    .featured {
      padding-left: 7rem;
      padding-right: 7rem;
    }

    /* .case-study-card {
        flex-direction: column;
        height: auto;
        gap: 0.75rem;
      } */

    .square-viz {
        width: 100%;
        height: auto;
        max-width: none;
        min-width: none;
        flex-shrink: 1;
    }

    .featured {
        padding: 2.5rem 6rem 2.5rem 6rem;
    }

    .case-study-card-text {
        gap: 0.75rem;
        flex-shrink: 1;
    }

  }


  
  /* Mobile: smaller than tablet */
  @media (max-width: 425px) {
    .featured {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .featured-work {
        gap: 0.75rem;
    }

    .case-study-details-all {
        order: 1;
    }

    .case-study-content {
        display: grid;
        grid-template-columns: 1fr;
    }
    .content-nav {
        display: none;
    }

    .flex-row-desktop {
        flex-direction: column;
    }

    .none-mobile {
        display: none;
    }

    .none-desktop {
        display: flex;
    }

  }