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

    body {
      height: auto;
      width: 100%;
      font-family: "GrotesqueMTStd", Times, serif;
      background: black;
      overflow: hidden;
      letter-spacing: 0px;
    }

    a { 
      color: var(--text-color); 
      text-decoration:none; 
      font-size:1.15rem; }

    /* Theme variables */
    body { --text-color: white; }
    body.theme-dark { --text-color: white; }
    body.theme-light { background: white; --text-color: black; }
    body.project-page { height: auto; width: 100%; overflow: scroll; background: white; --text-color: black; }
    body.project-page .navbar { background: white}
    body.profile-page { height: auto; width: 100%; overflow: scroll; background: white; --text-color: black; }
    body.profile-page .navbar { background: white}
    body.project-type { height: auto; width: 100%; overflow: scroll; background: #000; --text-color: white; }
    body.project-type .navbar { background: #000}
    body.case-study-page { height: auto; width: 100%; overflow: scroll; background: white; --text-color: black; }
    body.case-study-page .navbar { background: white}


    /* Navbar */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: 20px 2%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 40;
      color: var(--text-color);
      pointer-events: none; /* don't block click-zones beneath */
    }
    
    .navbar * { pointer-events: auto; } /* links clickable */
    
    .logo {  
      text-transform: none;
      font-size:1.15rem; 
    }
    
    .menu { display:flex; gap:48px; align-items:center; }
    .menu a { color: var(--text-color); text-decoration:none; font-size:1.15rem; }

    /* Carousel */
    .carousel { position: relative; width:100%; height:100vh; }
    .slides { position: relative; width:100%; height:100%; }
    .slide {
      position:absolute; 
      inset:0;
      background-size:cover;
      background-position:center;
      opacity:0; transition: opacity 0.5s ease-in-out;
    }

    .slide.active { opacity:1; z-index:1; }

    /* Overlay typography */
    .overlay {
      position:absolute; 
      bottom:3%; 
      left:2%; 
      max-width:72%;
      z-index: 500;
      color:var(--text-color);
    }
    .overlay h1 { 
      font-size: clamp(1.15rem, 1.2vw, 1.2rem);
      line-height: 1.2;
      margin-bottom: 0rem;
      font-weight: 400;
      display: inline-block;
      text-transform: none;
    }
    .overlay p { 
      font-size: clamp(1.15rem, 1.2vw, 1.2rem);
      line-height: 1.2;
      font-family: "GrotesqueMTStd", Times, serif;
      display: inline-block;
      text-transform: none;
    }

    .slide.active .overlay h1,
    .slide.active .overlay p { opacity:1; transform:translateY(0); }

    /* Global corner overlay (bottom-right) */
    .corner-overlay {
      position: absolute;
      bottom: 3%;
      right: 2%;
      z-index: 150;
      color: var(--text-color);
      font-size: 1.15rem;
      pointer-events: auto;
    }

    .corner-overlay a {
      color: var(--text-color);
      text-decoration: none;
}

    /* Click zones (hide native cursor inside them) */
    .click-zone {
      position:absolute; top:0; height:100%; width:50%; z-index:30;
      cursor:none; /* hide system cursor */
    }
    .click-zone.left { left:0; }
    .click-zone.right { right:0; }

    /* Custom SVG cursor wrapper */
    .svg-cursor {
      position: fixed;
      pointer-events: none;
      z-index: 60;
      width: 56px;
      height: 56px;
      transform: translate(-50%,-50%) scale(1);
      transition: transform .12s ease, opacity .12s ease;
      opacity: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-color); /* SVG uses currentColor */
    }
    .svg-cursor.visible { opacity: .95; }
    .svg-cursor:active { transform: translate(-50%,-50%) scale(.92); }

    /* Hide custom cursors on touch devices */
    @media (hover: none), (pointer: coarse) {
      .svg-cursor { display: none !important; }
      .click-zone { cursor: auto; } /* show normal finger/tap cursor */
    }


    html, body, .carousel, .slides, .slide {
        height: 100dvh; /* dynamic viewport height, better for mobile */
      }

    /* minor responsive typography */
    @media (max-width: 788px) {
      .overlay { left:2%; bottom:2%; max-width:72%; }
      .overlay h1 { font-size: clamp(1.15rem,0.7vw,0.7rem); display: inline-block; }
      .overlay p { font-size: clamp(1.15rem,0.7vw,0.7rem); display: inline-block;}
      .navbar { padding: 16px 2%; }
      .menu { gap: 21px; }
      .menu a { font-size: 1.15rem; }
      .logo a { font-size: 1.15rem; margin-bottom: 19px; }
      .corner-overlay { bottom: 2%; font-size: clamp(1.15rem,0.7vw,0.7rem);}
      .corner-overlay a { font-size: clamp(1.15rem,0.7vw,0.7rem);}
      .navbar {display: inline;}
    }
    }


/* PROJECT PAGE */


    /* Project Page wrapper */
    .content {
      padding: 150px 2% 60px; /* offset for navbar */
      max-width: 100%;
      margin: 0 auto;
    }

    /* Project Grid */
    .projects {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 60px 100px;
      padding: 150px 2% 60px; /* offset for navbar */
      max-width: 100%;
      margin: 0 auto;
    }

    .project {
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
      position: relative;
      overflow: hidden;
    }

    .project img {
      width: 100%;
      height: auto;
      display: block;
      transition: opacity .2s ease;
    }
    
    .project:hover img { 
      opacity: 0.75; 
    }

    .projects-page .project video {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.3s ease;
      object-fit: cover;
}

    .projects-page .project:hover video {
      opacity: 1;
}

    .project-title {
      margin-top: 15px;
      font-size: 1.15rem;
    }

    .project-subtitle {
      font-family: "GrotesqueMTStd", Times, serif;
      font-size: 1.15rem;
      text-transform: none;
      letter-spacing: 0px;
      color: #aaa;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .projects { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 788px) {
      .projects { grid-template-columns: 1fr; gap: 28px;  }
      .project-title { font-size: 1.15rem;}
      .project-subtitle { font-size: 1.15rem;}
    }

    .project-type .project:hover img { 
      opacity: 1;
      filter: invert(100%); 
    }

    .project-type .project-title {
      color: #fff; 
    }



    /* PROFILE PAGE*/


    .profile-page .content {
      padding: 150px 2% 60px; /* offset for navbar */
      max-width: 100%;
      margin: 0 auto;
    }

    /* Profile Grid */

    .profile-content {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 60px 100px;
    }

    .profile-column {
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
      position: relative;
      overflow: hidden;
    }

    .profile-page h1 {
      font-size: 1.15rem;
      font-weight: 400;
      line-height: 1.2;
      font-family: "GrotesqueMTStd", Times, serif;
      display: inline-block;
      text-transform: none;
      text-indent: 0px;
    }

    .profile-page p {
      font-size: 1.15rem;
      line-height: 1.2;
      font-family: "GrotesqueMTStd", Times, serif;
      display: inline-block;
      text-transform: none;
    }

    /* Responsive adjustments */
    @media (max-width: 1024px) {
      
      .profile-page .content  {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

      .profile-content {
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
    }
      .profile-column {
      grid-template-columns: repeat(2, 1fr);
    }

  
    }


    @media (max-width: 788px) {
      .profile-page .profiles {
        grid-template-columns: 1fr;
      }

        .profile-page .content  {
        grid-template-columns: 1fr;

    }

      .profile-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
      .profile-column {
        grid-template-columns: 1fr;
    }
    }


    /* CASE STUDY PAGE */


    body.case-study-page {
      padding: 150px 2% 60px; /* offset for navbar */
      max-width: 100%;
      margin: 0 auto;
    }

    .case-study-page .content {
      max-width: 100%;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 30px;
    }

    .case-study-page .video-wrapper {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 aspect ratio */
      height: 0;
      overflow: hidden;
      border-radius: 6px;
    }

    .case-study-page .video-wrapper iframe {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    /* ===== Grid Items ===== */
    .case-study-page .block {
      border-radius: 0px;
    }

    /* Column spans */
    .case-study-page .span-1 {
      grid-column: span 1;
    }
    .case-study-page .span-2 {
      grid-column: span 2;
    }
    .case-study-page .span-3 {
      grid-column: span 3;
    }
    .case-study-page .span-4 {
      grid-column: span 4;
    }
    .case-study-page .span-5 {
      grid-column: span 5;
    }
    .case-study-page .span-6 {
      grid-column: span 6;
    }

    /* Images and videos fill their container */
    .case-study-page img,
    .case-study-page video {
      width: 100%;
      height: auto;
      border-radius: 0px;
      display: block;
      object-fit: cover;
    }

    /* Typography */
    .case-study-page h1 {
      font-size: 1.15rem;
      font-weight: 400;
    }

    .case-study-page h2 {
      font-size: 0.8rem;
      font-weight: 400;
      padding-bottom: 10px;
    }

    .case-study-page p {
      font-size: 1.15rem;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .case-study-page .content {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
      }
      
      .case-study-page .span-1 {
        grid-column: span 3;
      }

      .case-study-page .span-2,
      .case-study-page .span-3,
      .case-study-page .span-4,
      .case-study-page .span-5,
      .case-study-page .span-6 {
        grid-column: span 6;
      }
    }

    @media (max-width: 788px) {
      .case-study-page .content {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .case-study-page .span-2,
      .case-study-page .span-3,
      .case-study-page .span-4,
      .case-study-page .span-5,
      .case-study-page .span-6 {
        grid-column: span 6;
      }