/* NEW PARALLAX TRANSITION BEFORE SHOWREEL */
.showreel-transition{
  position:relative;
  height:120vh;
  min-height:760px;
  overflow:hidden;
  background-image:url("../assets/images/aa1-current.png");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#071b24;
  background-image:url("../assets/images/aa1-current.png");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  margin-top:0;
  border-top:1px solid rgba(255,255,255,.06);
}
.showreel-transition:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../assets/images/aa1-current.png");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  opacity:1;
  z-index:0;
}
.transition-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image:url("../assets/images/aa1-current.png");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#071b24;
}
.transition-layer{
  position:absolute;
  inset:-14vh -8vw;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  will-change:transform,opacity,filter;
}
.transition-bg{
  background-image:url("../assets/images/aa1-current.png");
  z-index:1;
  opacity:1;
  transform:translate3d(0,0,0) scale(1.04);
  filter:saturate(1.22) contrast(1.05) brightness(1.18);
}
.transition-clutter{
  background-image:url("../assets/images/aa3-current.png");
  z-index:2;
  background-size:min(108vw,2000px) auto;
  background-position:center bottom;
  opacity:1;
  transform:translate3d(0,16vh,0) scale(.86);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.32)) saturate(1.02) brightness(1.02);
  mix-blend-mode:screen;
  isolation:auto;
}
.transition-blue-boost{
  display:none;
}
.transition-vignette{
  display:none;
}
.transition-title{
  position:absolute;
  z-index:4;
  left:4vw;
  top:calc(var(--nav-height) + 28px);
  max-width:980px;
  opacity:1;
  will-change:transform,opacity;
  text-shadow:0 18px 54px rgba(0,0,0,.55);
}
.transition-title span{
  display:block;
  color:#ff6616;
  font-size:clamp(13px,1vw,17px);
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.transition-title h1{
  font-size:clamp(64px,10vw,182px);
  line-height:.86;
  /* letter-spacing:-.035em; */
  font-weight:400;
}

/* SHOWREEL */
.showreel{width:var(--page-width);margin:-34vh auto 0;padding:0 0 100px;position:relative;z-index:5}
.section-title{font-size:clamp(42px,7vw,116px);line-height:.9;/* letter-spacing:-.025em; */font-weight:400;margin-bottom:24px}
.video-shell{width:100%;aspect-ratio:16/9;overflow:hidden;background:#070706;border:1px solid rgba(255,255,255,.1);box-shadow:0 35px 110px rgba(0,0,0,.55)}
.video-shell video,.video-shell iframe{width:100%;height:100%;object-fit:cover;display:block;background:#000;border:0}
.video-shell video:not([src]){background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.025)),radial-gradient(circle at 30% 30%,rgba(255,102,22,.22),transparent 36%)}

.about-section{width:100%;padding:90px 0 120px;background:linear-gradient(180deg,#11100b 0%,#32180c 34%,#9e3508 100%);position:relative;overflow:hidden}
.about-section:before{content:"";position:absolute;right:-12vw;top:12%;width:48vw;height:48vw;border-radius:50%;background:radial-gradient(circle,rgba(255,102,22,.22),transparent 62%);filter:blur(10px)}
.about-inner{width:var(--page-width);margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,120px);align-items:center;position:relative}
.about-copy h2{font-size:clamp(34px,4.5vw,84px);line-height:.92;/* letter-spacing:-.025em; */font-weight:400;margin-bottom:22px}
.about-copy p{max-width:540px;color:rgba(255,255,255,.75);font-size:clamp(16px,1.25vw,24px);line-height:1.35;letter-spacing: 0.05em}
.gif-slot{aspect-ratio:1.45/1;border-radius:50% 50% 6% 6%;background:radial-gradient(circle at 50% 65%,rgba(0,0,0,.92),rgba(0,0,0,.22) 38%,transparent 69%),linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 50px 120px rgba(0,0,0,.38)}
.gif-slot img{width:100%;height:100%;object-fit:cover;display:block}
.gif-placeholder{color:rgba(255,255,255,.55);font-size:22px;letter-spacing: 0.05em}

.clients{width:var(--page-width);margin:0 auto;padding:70px 0 110px}
.clients h2{text-align:right;color:rgba(255,255,255,.25);font-size:clamp(42px,5vw,92px);font-weight:400;/*letter-spacing:-  .025em;*/margin-bottom:30px}
.client-loop{border:1px solid rgba(255,255,255,.28);border-radius:999px;overflow:hidden;padding:28px 0;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 8px rgba(255,255,255,.025)}
.client-track{display:flex;gap:80px;width:max-content;animation:clientMove 22s linear infinite;align-items:center}
.client-item{font-size:clamp(24px,2vw,42px);/* letter-spacing:-.015em; */color:rgba(255,255,255,.78);white-space:nowrap;padding-left:40px}
.client-dot{width:8px;height:8px;border-radius:50%;background:#315aff;display:inline-block;margin-left:4px}

.projects-wrap{padding:30px 0 100px;background:linear-gradient(180deg,#11100b 0%,#3c1d10 32%,#c4490d 100%)}
.projects{width:var(--page-width);margin:0 auto}
.projects h2{text-align:center;color:rgba(255,255,255,.24);font-size:clamp(42px,5vw,92px);font-weight:400;/*letter-spacing:-.025em;*/margin-bottom:45px}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.project-card{aspect-ratio:16/9;background:rgba(0,0,0,.45);overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.07)}
.project-card img,.project-card video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.project-card:hover img,.project-card:hover video{transform:scale(1.05)}
.project-card:after{content:"Project Preview";position:absolute;left:18px;bottom:16px;font-size:18px;color:#fff;opacity:0;transform:translateY(10px);transition:.35s ease}
.project-card:hover:after{opacity:1;transform:translateY(0)}
.project-placeholder{width:100%;height:100%;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(0,0,0,.34)),radial-gradient(circle at 40% 35%,rgba(255,102,22,.25),transparent 42%);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.48);font-size:22px}

.footer-separator{width:100%;height:clamp(120px,18vw,230px);overflow:hidden;background:#060606;border-top:1px solid rgba(255,255,255,.08)}
.footer-separator img,.footer-separator video{width:100%;height:100%;object-fit:cover;display:block}
.separator-placeholder{height:100%;background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,102,22,.18),rgba(255,255,255,.08));display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.48);font-size:22px}
.footer{background:#11100b;min-height:240px;padding:60px 0 48px}
.footer-inner{width:var(--page-width);margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.footer h3{font-size:clamp(26px,2.2vw,44px);font-weight:400;/* letter-spacing:-.015em; */margin-bottom:8px}
.footer p,.footer a{font-size:clamp(16px,1.2vw,22px);color:#fff;text-decoration:none;line-height:1.45}
.footer-logo{width:154px;height:auto}


/* FINAL FIX: explicit aa1 bottom layer + aa3 top layer */
.showreel-transition{
  background:#071b24 !important;
  height:120vh;
  min-height:760px;
}

.transition-sticky{
  background:#071b24 !important;
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
}

.showreel-transition::before,
.transition-sticky::before,
.transition-blue-boost,
.transition-vignette,
.transition-layer{
  display:none !important;
}

.parallax-img{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  pointer-events:none;
  user-select:none;
  will-change:transform,opacity;
}

.parallax-bg{
  z-index:1;
  opacity:1;
  transform:translate(-50%,-50%) scale(1.04);
  filter:saturate(1.12) contrast(1.04) brightness(1.08);
}

.parallax-fg{
  z-index:2;
  width:min(108vw,2000px);
  height:auto;
  top:auto;
  bottom:-5vh;
  transform:translateX(-50%) translateY(10vh) scale(.9);
  object-fit:contain;
  opacity:1;
  filter:drop-shadow(0 34px 70px rgba(0,0,0,.34)) saturate(1.02);
  /*
    If aa3 has a black background instead of transparency, this makes the black disappear
    visually while keeping the colored clutter visible on top of aa1.
  */
  mix-blend-mode:screen;
}



/* FINAL PARALLAX LAYER FIX */
.showreel-transition{
  position:relative !important;
  height:135vh !important;
  min-height:860px !important;
  overflow:hidden !important;
  background:#061822 !important;
  margin-top:0 !important;
}

.transition-sticky{
  position:sticky !important;
  top:0 !important;
  width:100vw !important;
  height:100vh !important;
  overflow:hidden !important;
  background:#061822 !important;
  display:block !important;
}

.transition-layer,
.transition-bg,
.transition-clutter,
.transition-blue-boost,
.transition-vignette,
.showreel-transition::before,
.transition-sticky::before,
.parallax-img{
  display:none !important;
}

.reel-layer{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  display:block !important;
  pointer-events:none !important;
  user-select:none !important;
  will-change:transform !important;
  max-width:none !important;
}

.reel-bg{
  z-index:1 !important;
  width:100vw !important;
  height:100vh !important;
  object-fit:cover !important;
  opacity:1 !important;
  transform:translate(-50%, -50%) scale(1.04);
  filter:saturate(1.12) contrast(1.04) brightness(1.05);
}

.reel-fg{
  z-index:2 !important;
  width:min(118vw, 2200px) !important;
  height:auto !important;
  object-fit:contain !important;
  top:58% !important;
  opacity:1 !important;
  transform:translate(-50%, -50%) scale(.9);
  filter:drop-shadow(0 42px 80px rgba(0,0,0,.35)) saturate(1.04);
  /*
    Keep this because the provided aa3 file has black pixels around the artwork.
    It lets the black visually disappear while keeping aa3 on top.
  */
  mix-blend-mode:screen;
}

.transition-title{
  z-index:5 !important;
  position:absolute !important;
  left:4vw !important;
  top:calc(var(--nav-height) + 28px) !important;
  max-width:980px !important;
  opacity:1;
  pointer-events:none;
}



/* CLEAN IMAGE FIX: no tint, no gradient, no screen overlay */
.showreel-transition,
.transition-sticky{
  background:#000 !important;
}

.transition-blue-boost,
.transition-vignette,
.background-grid{
  display:none !important;
}

.reel-bg{
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}

.reel-fg{
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}

/* keep the images crisp and fully opaque */
.reel-layer{
  opacity:1 !important;
  filter:none !important;
  isolation:isolate !important;
}


/* SMOOTH COLOR TRANSITION FIX: blend orange/black into blue */
.hero.hero-compact{
  position:relative !important;
  min-height:30vh !important;
  padding:calc(var(--nav-height) + 26px) 0 10vh !important;
  background:
    radial-gradient(circle at 72% 35%, rgba(255,102,22,.22) 0%, rgba(255,102,22,.10) 18%, rgba(255,102,22,0) 48%),
    linear-gradient(180deg,
      #080604 0%,
      #110a06 24%,
      #2a150b 48%,
      #4a210d 64%,
      rgba(20,74,108,.75) 86%,
      rgba(18,116,172,0) 100%) !important;
  overflow:visible !important;
  z-index:3 !important;
}

.hero.hero-compact::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:22vh;
  pointer-events:none;
  z-index:2;
  background:
    linear-gradient(180deg,
      rgba(255,102,22,.14) 0%,
      rgba(123,53,20,.18) 22%,
      rgba(34,86,120,.28) 58%,
      rgba(28,126,182,.10) 78%,
      rgba(28,126,182,0) 100%);
}

.hero.hero-compact .hero-text{
  position:relative;
  z-index:3;
}

.showreel-transition{
  margin-top:-10vh !important;
  padding-top:10vh !important;
  background:transparent !important;
  border-top:none !important;
}

.transition-sticky{
  background:transparent !important;
}

.transition-title{
  top:max(calc(var(--nav-height) + 6px), 12vh) !important;
}


/* FINAL SMOOTH TRANSITION FIX: remove boxed band and blend directly over image */
.hero.hero-compact{
  min-height:0 !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  overflow:visible !important;
}

.hero.hero-compact::after{
  display:none !important;
}

.hero.hero-compact .hero-text{
  display:none !important;
}

/* Pull the image scene upward so it starts under the navbar, not after a separate gradient block */
.showreel-transition{
  margin-top:0 !important;
  padding-top:0 !important;
  height:135vh !important;
  min-height:860px !important;
  background:#061822 !important;
  border-top:none !important;
}

/* Keep the image full-screen and add only a transparent overlay on top of it */
.transition-sticky{
  background:#061822 !important;
}

.transition-sticky::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(8,6,4,1) 0%,
      rgba(15,9,5,.96) 7%,
      rgba(42,18,8,.78) 16%,
      rgba(94,38,10,.45) 27%,
      rgba(42,93,120,.22) 42%,
      rgba(20,138,190,.06) 58%,
      rgba(20,138,190,0) 72%);
}

/* Navbar sits above the blend */
.navbar{
  background:rgba(17,16,11,.82) !important;
}

/* Title must sit above the image but below navbar */
.transition-title{
  z-index:6 !important;
  top:calc(var(--nav-height) + 26px) !important;
}

/* Images remain clean and non-transparent */
.reel-bg,
.reel-fg,
.reel-layer{
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}



/* REMOVE DARK SEPARATION BAND: brown blends directly into image */
.transition-sticky::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:4 !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg,
      rgba(20,10,4,1) 0%,
      rgba(35,16,7,.94) 10%,
      rgba(62,27,10,.72) 22%,
      rgba(92,39,12,.46) 34%,
      rgba(85,58,28,.26) 46%,
      rgba(35,126,170,.12) 58%,
      rgba(24,151,205,0) 74%) !important;
}

/* keep the top part warm, but don't add a separate dark block */
.showreel-transition{
  background:#061822 !important;
}

.transition-sticky{
  background:#061822 !important;
}

/* make sure no old vignette or black overlays return */
.transition-vignette,
.transition-blue-boost{
  display:none !important;
  background:transparent !important;
}

/* image should remain visible underneath the blend */
.reel-bg,
.reel-fg,
.reel-layer{
  opacity:1 !important;
  mix-blend-mode:normal !important;
  filter:none !important;
}


/* Slight overlap: bring the playable showreel upward over the image section */
.showreel{
  margin-top:-22vh !important;
  position:relative !important;
  z-index:8 !important;
}

.video-shell{
  box-shadow:0 45px 120px rgba(0,0,0,.55) !important;
}



/* Hide the dark blue gap completely by pulling showreel over the bottom of the image section */
.showreel{
  margin-top:-48vh !important;
  position:relative !important;
  z-index:20 !important;
}

.video-shell{
  position:relative !important;
  z-index:21 !important;
  box-shadow:0 50px 140px rgba(0,0,0,.62) !important;
}




/* Match the section behind the showreel to the blue image transition */
.content{
  background:
    linear-gradient(180deg,
      #061822 0%,
      #062535 18%,
      #082f45 34%,
      #0a2a3b 48%,
      #11100b 64%,
      #2a160c 82%,
      #8f3209 100%) !important;
}

/* The showreel area now begins with the same blue as the image section */
.showreel{
  background:
    linear-gradient(180deg,
      #061822 0%,
      #062535 42%,
      #0a2534 68%,
      rgba(17,16,11,0) 100%) !important;
  padding-top:10vh !important;
  padding-bottom:120px !important;
}

/* Remove the brown side glow directly behind the video */
.video-shell{
  background:#080808 !important;
}

/* Make the next section transition from blue/dark into the existing orange world more naturally */
.about-section{
  background:
    linear-gradient(180deg,
      #061822 0%,
      #082637 12%,
      #11100b 32%,
      #32180c 58%,
      #9e3508 100%) !important;
}


/* EXACT COLOR MATCH FIX: remove dark bands between gradients */
:root{
  --transition-blue:#0c8fc1;
  --transition-blue-deep:#0876a8;
  --transition-blue-mid:#0a6f9e;
  --warm-orange:#9e3508;
}

/* Keep the main flow blue after the parallax image so no dark strip appears */
.content{
  background:
    linear-gradient(180deg,
      var(--transition-blue) 0%,
      var(--transition-blue-deep) 28%,
      var(--transition-blue-mid) 52%,
      #346c6e 70%,
      #6e4c2f 84%,
      var(--warm-orange) 100%) !important;
}

/* Behind the video: start with the same blue the image section ends with */
.showreel{
  background:
    linear-gradient(180deg,
      var(--transition-blue) 0%,
      var(--transition-blue-deep) 48%,
      var(--transition-blue-mid) 100%) !important;
  padding-top:10vh !important;
  padding-bottom:120px !important;
}

/* The parallax section fades into the exact same blue, not black */
.transition-sticky::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:4 !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg,
      rgba(20,10,4,1) 0%,
      rgba(35,16,7,.88) 8%,
      rgba(90,38,11,.52) 20%,
      rgba(12,143,193,.18) 42%,
      rgba(12,143,193,0) 62%,
      rgba(12,143,193,.22) 86%,
      var(--transition-blue) 100%) !important;
}

/* Ensure the transition section itself has the same blue base */
.showreel-transition,
.transition-sticky{
  background:var(--transition-blue) !important;
}

/* Remove old dark overlays and vignettes completely */
.transition-vignette,
.transition-blue-boost,
.background-grid{
  display:none !important;
  background:transparent !important;
}

/* About begins from the same blue and then warms up gradually */
.about-section{
  background:
    linear-gradient(180deg,
      var(--transition-blue-mid) 0%,
      #1c7b87 18%,
      #4b674d 36%,
      #704524 56%,
      #8a350d 76%,
      var(--warm-orange) 100%) !important;
}

/* Remove any dark video-section side/under glow */
.video-shell{
  background:#000 !important;
  box-shadow:0 45px 120px rgba(0,0,0,.38) !important;
}


/* Temporary about image fit */
.gif-slot{
  background:transparent !important;
}

.gif-slot img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}


/* NAVBAR VISIBILITY FIX:
   Transparent at the start; visible only after logo reaches navbar position. */
.navbar{
  background:rgba(17,16,11,0) !important;
  backdrop-filter:none !important;
  border-bottom-color:transparent !important;
  box-shadow:none !important;
  transition:
    background .55s ease,
    backdrop-filter .55s ease,
    border-color .55s ease,
    box-shadow .55s ease !important;
}

.navbar:not(.is-visible){
  background:rgba(17,16,11,0) !important;
  backdrop-filter:none !important;
  border-bottom-color:transparent !important;
  box-shadow:none !important;
}

.navbar:not(.is-visible) .nav-links{
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateY(-12px) !important;
}

.navbar.is-visible{
  background:rgba(17,16,11,.88) !important;
  backdrop-filter:blur(16px) !important;
  border-bottom-color:rgba(255,255,255,.055) !important;
  box-shadow:0 18px 55px rgba(0,0,0,.22) !important;
}

.navbar.is-visible .nav-links{
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}


/* REMOVE SMALL BLUE RECTANGLE BEFORE SHOWREEL */
.showreel{
  margin-top:-56vh !important;
  padding-top:0 !important;
  background:transparent !important;
}

.showreel::before,
.showreel::after{
  display:none !important;
  content:none !important;
}

.showreel-transition{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

.video-shell{
  margin-top:0 !important;
}


/* Updated footer separator image */
.footer-separator{
  width:100% !important;
  height:clamp(120px, 14vw, 220px) !important;
  overflow:hidden !important;
  background:#060606 !important;
}

.footer-separator img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}


/* About section looping video */
.gif-slot{
  background:transparent !important;
}

.gif-slot video{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}


/* ABOUT VIDEO SHAPE UPDATE:
   Replace the dome/arched frame with a clean rounded-rectangle frame */
.about-inner{
  align-items:center !important;
}

.gif-slot{
  position:relative !important;
  width:100% !important;
  aspect-ratio: 1.85 / 1 !important;
  border-radius: 72px !important;
  overflow:hidden !important;
  background:#14110c !important;
  border:4px solid rgba(112,112,112,.72) !important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.26),
    inset 0 0 0 1px rgba(255,255,255,.03) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}

.gif-slot::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.gif-slot img,
.gif-slot video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  border-radius:inherit !important;
  background:#14110c !important;
}



/* ABOUT SECTION REDESIGN — slashed divider, image above lines, slight parallax */
.about-section{
  position:relative !important;
  width:100% !important;
  padding:110px 0 130px !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:
    radial-gradient(circle at 22% 16%, rgba(255,146,84,.12), transparent 24%),
    linear-gradient(180deg,
      #a24819 0%,
      #8b3a14 24%,
      #6e2c12 46%,
      #2f1710 72%,
      #0a0908 100%) !important;
}

.about-section::before,
.about-section::after{
  display:none !important;
  content:none !important;
}

.about-slashed-bg{
  position:absolute;
  inset:auto 0 0 0;
  height:78%;
  background:#050505;
  clip-path:polygon(0 100%, 0 70%, 45% 26%, 100% 26%, 100% 100%);
  z-index:1;
  pointer-events:none;
}

.about-divider{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.about-divider span{
  position:absolute;
  left:-6%;
  width:64%;
  border-top:2px solid rgba(102,102,102,.78);
  transform-origin:left center;
  transform:rotate(-38deg);
}

.about-divider span:nth-child(1){ top:72%; }
.about-divider span:nth-child(2){
  top:69.9%;
  left:-5.4%;
  width:64.8%;
  border-top-color:rgba(90,90,90,.64);
}
.about-divider span:nth-child(3){
  top:67.8%;
  left:-4.8%;
  width:65.6%;
  border-top-color:rgba(76,76,76,.52);
}

.about-inner{
  width:var(--page-width) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:.82fr 1.18fr !important;
  gap:clamp(36px,5vw,92px) !important;
  align-items:start !important;
  position:relative !important;
  z-index:4 !important;
}

.about-copy{
  position:relative;
  z-index:4;
  padding-top:4px;
}

.about-copy h2{
  font-size:clamp(34px,4.4vw,78px) !important;
  line-height:.92 !important;
  font-weight:400 !important;
  margin-bottom:16px !important;
  color:#fff !important;
}

.about-copy p{
  max-width:430px !important;
  color:rgba(255,255,255,.75) !important;
  font-size:clamp(16px,1.15vw,22px) !important;
  line-height:1.18 !important;
}

.about-art{
  position:relative;
  z-index:5;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  padding-top:28px;
}

.gif-slot{
  position:relative !important;
  width:min(52vw, 620px) !important;
  aspect-ratio:1.08 / 1 !important;
  border-radius:34px !important;
  overflow:hidden !important;
  background:#111 !important;
  border:0 !important;
  box-shadow:0 44px 90px rgba(0,0,0,.34) !important;
}

.gif-slot::before{
  display:none !important;
  content:none !important;
}

.gif-slot video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  border-radius:inherit !important;
  background:#111 !important;
}




/* ABOUT SECTION RESET: no slash lines, full gradient, circular video */
.about-section{
  position:relative !important;
  width:100% !important;
  padding:110px 0 130px !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:
    radial-gradient(circle at 78% 38%, rgba(255,255,255,.08), transparent 28%),
    radial-gradient(circle at 70% 64%, rgba(0,0,0,.34), transparent 34%),
    linear-gradient(180deg,
      #0a6f9e 0%,
      #1f6f82 18%,
      #5d5835 38%,
      #8b3a14 64%,
      #9e3508 100%) !important;
}

.about-section::before,
.about-section::after,
.about-slashed-bg,
.about-divider{
  display:none !important;
  content:none !important;
}

.about-inner{
  width:var(--page-width) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:.9fr 1.1fr !important;
  gap:clamp(40px,7vw,120px) !important;
  align-items:center !important;
  position:relative !important;
  z-index:4 !important;
}

.about-copy{
  position:relative !important;
  z-index:5 !important;
}

.about-copy h2{
  font-size:clamp(34px,4.5vw,84px) !important;
  line-height:.92 !important;
  font-weight:400 !important;
  margin-bottom:22px !important;
  color:#fff !important;
}

.about-copy p{
  max-width:540px !important;
  color:rgba(255,255,255,.78) !important;
  font-size:clamp(16px,1.25vw,24px) !important;
  line-height:1.35 !important;
}

.about-art{
  position:relative !important;
  z-index:5 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:clamp(360px, 42vw, 660px) !important;
}

.gif-slot{
  position:relative !important;
  width:min(42vw, 620px) !important;
  aspect-ratio:1 / 1 !important;
  border-radius:50% !important;
  overflow:hidden !important;
  background:#11100b !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 44px 110px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.05) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}

.gif-slot::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:50% !important;
  z-index:2 !important;
  pointer-events:none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 -80px 90px rgba(0,0,0,.22) !important;
}

.gif-slot video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  border-radius:50% !important;
  background:#11100b !important;
}




/* Make About video larger and give it more space on the right */
.about-inner{
  grid-template-columns:.65fr 1.35fr !important;
  gap:clamp(28px,5vw,80px) !important;
}

.about-art{
  justify-content:flex-end !important;
  min-height:clamp(520px, 55vw, 820px) !important;
}

.gif-slot{
  width:min(58vw, 860px) !important;
  max-width:none !important;
}




/* Project thumbnail updates */
.project-card img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}

.project-card:nth-child(1) img{
  object-position:center center !important;
}

.project-card:nth-child(2) img{
  object-position:center center !important;
}

.project-card:nth-child(3) img{
  object-position:center center !important;
}

.project-card:nth-child(4) img{
  object-position:center center !important;
}


/* Project 5 and 6 thumbnail updates */
.project-card:nth-child(5) img,
.project-card:nth-child(6) img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}


/* NAV LINKING UPDATE */
.nav-logo-target{
  display:block !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  text-decoration:none !important;
}

.navbar:not(.is-visible) .nav-logo-target{
  pointer-events:none !important;
}