/* ===== GLOBAL ===== */
    *{
      box-sizing: border-box;
    }

    body{
      margin: 0px;
      background: #2E3C24;
      font-family: "Aaux Next", sans-serif;
      color: #F2EEE3;
      overflow-x: hidden;
    }

    /* ===== FONTS ===== */
    @font-face {
      font-family: "Pilsen Plakat";
      src: url("fonts/PilsenPlakat-Regular.woff2") format("woff2");
      font-weight: 400;
    }

    @font-face {
      font-family: "Aaux Next";
      src: url("fonts/AauxNext-Light.woff2") format("woff2");
      font-weight: 300;
    }

    @font-face {
      font-family: "Aaux Next";
      src: url("fonts/AauxNext-Medium.woff2") format("woff2");
      font-weight: 500;
    }

    @font-face {
      font-family: "Aaux Next";
      src: url("fonts/AauxNext-Black.woff2") format("woff2");
      font-weight: 900;
    }

    /* ===== TYPE SYSTEM ===== */
    .type-h1{
      font-family: "Aaux Next";
      font-weight: 200;
      font-size: 56pt;
      text-transform: uppercase;
      letter-spacing: 0.0em;
      color: rgba(245, 245, 220, 0.798);
    }

    .type-h2{
      font-family: "Aaux Next";
      font-size: 38pt;
      font-weight: 400;
      line-height: 1.25;
      color: rgb(84, 104, 61);
    }

    .type-h3{
      font-family: "Aaux Next";
      font-size: 36pt;
      font-weight: 500;
      line-height: 1.25;
      color: beige;
    }

    .type-caption{
      font-family: "Aaux Next";
      font-size: 12pt;
      font-weight: 100;
      letter-spacing: 0.12em;
      color: beige;
    }

    /* ===== TOP ===== */
    .top-caption{
      padding: 24px 40px;
    }

    .top-line{
      height: 4px;
      background: #3A4A32;
      margin: 0 40px 60px 40px;
    }

    /* ===== LAYOUT ===== */
    .page-grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      padding: 0 40px;
      margin: 0;
    }

    /* ===== LEFT ===== */
    .left-col{
      display: flex;
      justify-content: flex-start;
    }

    .portrait-frame{
      width: 520px;
      height: 340px;
      border-radius: 16px;
      overflow: hidden;
      margin-top: 290px;
    }

    .portrait{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ===== RIGHT ===== */
    .right-col{
      display: flex;
      flex-direction: column;
    }

    .intro-box{
      max-width: 520px;
    }

    .type-p{
      font-family: "Aaux Next";
      font-size: 13pt;
      font-weight: 300;
      line-height: 1.45;
    }

    .intro-box{
      max-width: 920px;
      display: flex;
      flex-direction: column;
    }
    .projects-title{
      max-width: 520px;
      text-align: right;
      white-space: nowrap;
    }

    .hand-icon{
      width: 70px;       /* default size */
      margin-top: 0px;  /* space below text */
      align-self: flex-start; /* keeps it aligned to left of text block */
    }

    /* ===== PROJECTS ===== */
    .projects-section{
      margin-top: 335px;
      font-size: 40pt;
    }

    .projects-list{
      margin-top: 0px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }


    .project-item{
      display: inline-block;
      font-size: 36px;
      font-weight: lighter;
      cursor: pointer;
      opacity: 0.8;
      transition: transform 0.25s ease, opacity 0.25s ease;
      transform-origin: left center;
      will-change: transform;
    }

    .project-item:hover{
      transform: scale(1.4);
      opacity: 1;
      font-weight: bolder;
    }

    /* ===== FULL WIDTH IMAGES ===== */
    .projects-images-full img{
      width: 100%;
      aspect-ratio: 5/3;
      object-fit: cover;
      border-radius: 10px;  /* adjust this value */
    }
    .projects-images-full{
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      padding: 0 40px;
      margin-top: 60px;
      margin-bottom: 20px;
    }

    .projects-images-full img{
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      border-radius: 16px;

      transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .projects-images-full video{
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      border-radius: 16px;
      transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .projects-images-full img{
      transition: opacity 0.6s ease;
    }
    .middle-media{
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      border-radius: 16px;
    }

    #middle-image,
#middle-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

#middle-video {
  display: none;
}


.fade-in {
  opacity: 1;
}
.fade-out {
  opacity: 0;
}

.projects-images-full img,
.projects-images-full video {
  transition: opacity 2.2s ease;
}

.media-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
}

.media-slot .layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  opacity: 0;
  transition: opacity 2.2s ease;
}

.media-slot .layer.active {
  opacity: 1;
}

.media-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
}

.media-slot .layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  opacity: 0;
  transition: opacity 2.2s ease;
}

.media-slot .layer.active {
  opacity: 1;
}

    /* ===== SHOWREEL ===== */

    .showreel-section{
      width: 100%;
      margin-bottom: 120px; /* space below section */
    }

    .showreel-line{
      height: 4px;
      background: #3A4A32;
      margin: 20px 20px; /* small gap around lines */
    }

    .showreel-wrapper{
      overflow: hidden;
      width: 100%;
    }

    .showreel-track{
      display: inline-block;
      white-space: nowrap;
      animation: scrollLeft 35s linear infinite;
    }

    .showreel-track h2{
      display: inline-block;
      padding: 20px 0;
    }

    /* scrolling animation */
    @keyframes scrollLeft{
      from{
        transform: translateX(0);
      }
      to{
        transform: translateX(-50%);
      }
    }

    /* showreel layout */

    .showreel-wrapper{
      overflow: hidden;
      width: 100%;
    }

    .showreel-track{
      display: inline-block;
      white-space: nowrap;
      animation: scrollLeft 40s linear infinite;
    }

    .showreel-content{
      display: inline-flex;
      align-items: center;
      gap: 60px; /* spacing between names */
    }

    /* vertical divider */
    .showreel-content span{
      position: relative;
      padding-right: 60px;
    }

    .showreel-content span:not(:last-child)::after{
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 20px;
      background: #3A4A32;
    }

    /* ===== SHOWREEL LOGOS ===== */

    .showreel-section{
      margin-bottom: 140px;
    }

    .showreel-line{
      height: 4px;
      background: #3A4A32;
      margin: 20px 40px;
    }

    .showreel-wrapper{
      overflow: hidden;
      width: 100%;
    }

    .showreel-track{
      display: flex;
      width: max-content;
      animation: scrollLeft 65s linear infinite;
      gap: 100px; /* spacing between logos */
    }

    .logo-row{
      display: flex;
      align-items: center;
      gap: 100px;
      padding: 30px 0;
    }

    .logo-row img{
      height: 60px;      /* adjust size here */
      width: auto;
      object-fit: contain;

      opacity: 0.9;
      transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .logo-row img:hover{
      opacity: 1;
    }

    /* scrolling animation */
    @keyframes scrollLeft{
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    /* ===== BOTTOM LINKS ===== */

    .bottom-links{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: 140px; /* space under showreel */
    }

    .bottom-link{
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 60px 0;
    }

    .bottom-link h1{
      font-size: 28pt; /* smaller than your main H1 */
      transition: transform 0.3s ease;
      cursor: pointer;
    }

    /* subtle hover */
    .bottom-link h1:hover{
      transform: translateY(-4px);
    }

    /* bottom framing line */
    .bottom-line{
      height: 4px;
      background: #3A4A32;
      margin: 0 80px 80px 80px; /* 80px left and right like you wanted */
    }
    /* ===== BOTTOM LINKS ===== */

    .bottom-links{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: 160px;
    }

    .bottom-link{
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 150px 0;
      overflow: visible;
    }

    /* SVG base styling */
    /* Base shape styling */
    .shape{
      position: absolute;
      width: 260px;
      height: 500px;
      transform: translateY(-40px); /* your current alignment */
      transition: 
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        stroke 0.4s ease;
    }

    .shape path{
      fill: none;
      stroke: #3A4A32;   /* LIGHT GREEN (edit this if needed) */
      stroke-width: 19;
      transition: stroke 0.4s ease;
    }

    /* Text stays centered */
    .bottom-link h1{
      position: relative;
      z-index: 2;
      font-size: 28pt;
    }

    /* Bottom line */
    .bottom-line{
      height: 4px;
      background: #3A4A32;
      margin: 80px 80px 100px 80px;
    }

    .shape-1 { transform: translateY(-45px); }
    .shape-2 { 
    transform: translateY(-25px); 
    width: 300px;   /* middle bigger */
    }
    .shape-3 { transform: translateY(-5px); 
    width: 310px;   
    }

    /* LEFT — rotate right into more of a V shape */
    .bottom-link:hover .shape-1{
      transform: translateY(-40px) rotate(40deg);
    }

    /* MIDDLE — rotate 90° left (vertical orientation) */
    .bottom-link:hover .shape-2{
      transform: translateY(-10px) rotate(-90deg);
    }

    /* RIGHT — subtle tilt for organic feel */
    .bottom-link:hover .shape-3{
      transform: translateY(-20px) rotate(-60deg);
    }

    .bottom-link:hover .shape path{
      stroke: beige; /* Beige */
    }

    #media-2 {
  position: relative;
}