/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
  --base-100: #fff;
  --base-200: #3a3a3a;
  --base-300: #0f0f0f;
  --safe-top: env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);
}

/* ============================================
   RESET & BASE
   ============================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  background-color:var(--base-300);
}
html.lenis,html.lenis body{
  height:auto;
}
.lenis.lenis-smooth{
  scroll-behavior:auto!important;
}
.lenis.lenis-stopped{
  overflow:hidden;
}

body{
  background-color:var(--base-300);color:var(--base-100);
  font-family:'DM Sans',sans-serif;
  touch-action:manipulation;
  overscroll-behavior:none;
}

#smooth-wrapper{
  position:relative;width:100%;
}
#smooth-content{
  position:relative;width:100%;
}

img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

/* ============================================
   TYPOGRAPHY BASE
   ============================================ */
.preloader-counter h1,.card h1,.header h1,.manifesto__text h1,
.outro h1,.works-header h1,.project-hero h1,.project-footer h1,
.about-footer h1,.slider__title h1{
  font-family:'Satoshi',sans-serif;line-height:1;font-weight:600;
}

/* ============================================
   NAVIGATION
   ============================================ */
nav{
  position:fixed;top:0;left:0;width:100%;
  padding:1rem;padding-top:max(1rem,var(--safe-top));
  display:flex;justify-content:space-between;align-items:flex-start;
  z-index:1000000;mix-blend-mode:exclusion;
}
nav a,nav p{
  color:#fff!important;text-decoration:none;
  font-family:'Satoshi',sans-serif;font-size:.85rem;font-weight:500;line-height:1;
}
.nav-logo{display:inline-block;line-height:0;cursor:pointer}
.nav-links{display:flex;gap:.2rem}
.nav-links a{opacity:1;transition:opacity .3s ease;cursor:pointer}
.nav-links:hover a{opacity:.5!important}
.nav-links a:hover{opacity:1!important}

/* Active page nav highlight */
body[data-nav-page="about"] .nav-links a[data-nav="about"]{opacity:1!important}
body[data-nav-page="about"] .nav-links a:not([data-nav="about"]){opacity:.5!important}
body[data-nav-page="works"] .nav-links a[data-nav="works"]{opacity:1!important}
body[data-nav-page="works"] .nav-links a:not([data-nav="works"]){opacity:.5!important}

/* Mobile Menu Button */
.nav-menu-btn{
  display:none;cursor:pointer;
  font-family:'Satoshi',sans-serif;font-size:.85rem;font-weight:500;
  color:#fff!important;line-height:1;
}
.nav-menu-btn p{color:#fff!important;margin:0}

@media(max-width:768px){
  .nav-links{display:none}
  .nav-menu-btn{display:block}
}

/* ============================================
   SCROLL DOWN
   ============================================ */
.scroll-down{
  position:fixed;bottom:max(1rem,var(--safe-bottom));right:1rem;
  font-family:'Satoshi',sans-serif;font-size:.85rem;font-weight:500;line-height:1;
  color:#fff!important;mix-blend-mode:exclusion;opacity:0;
  z-index:99998;pointer-events:none;
  transition:opacity .5s ease;
}
.scroll-down.visible{opacity:.5}

/* ============================================
   PRELOADER
   ============================================ */
.preloader{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background-color:var(--base-300);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  z-index:999999;
}
.preloader-counter{
  position:fixed;top:50svh;left:50%;
  transform:translate(-50%,-50%);z-index:2;
}
.preloader-counter h1{
  font-size:clamp(3.5rem,10vw,6rem);
  font-variant-numeric:tabular-nums;
}
.preloader-progress{
  position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);
  width:calc(100% - 4rem);height:2px;
  background-color:var(--base-200);border-radius:2px;overflow:hidden;
}
.preloader-progress-bar{
  width:100%;height:100%;background-color:var(--base-100);
  transform-origin:left;transform:scaleX(0);will-change:transform;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero{position:relative;width:100%;height:100svh;overflow:hidden}

.hero-bg{
  position:absolute;top:0;left:0;width:100%;height:100%;
  overflow:hidden;z-index:0;
  pointer-events:none;
}
.hero-bg iframe{
  position:absolute;
  top:50%;left:50%;
  width:300%;height:300%;
  transform:translate(-50%,-50%);
  border:0;
  pointer-events:none;
}
.hero-overlay{
  position:absolute;top:0;left:0;width:100%;height:100%;
  background-color:#000;opacity:0;z-index:0;pointer-events:none;
}
.hero .header{
  position:absolute;bottom:4rem;width:100%;padding:2rem;z-index:1;
}
.hero .header h1{
  font-size:clamp(3rem,18.5vw,20rem);
  letter-spacing:-.03em;color:var(--base-100);overflow:hidden;
}
.hero .header h1 .char{
  display:inline-block;transform:translateY(100%);will-change:transform;
}

/* ============================================
   CARD (centered overlay)
   ============================================ */
.card{
  --card-width:clamp(320px,25vw,460px);
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:var(--card-width);aspect-ratio:368/527;
  max-width:368px;max-height:527px;
  padding:calc(var(--card-width)*.05);
  display:flex;flex-direction:column;
  background-color:#000;color:#fff;
  clip-path:polygon(0% 100%,100% 100%,100% 100%,0% 100%);
  z-index:5;container-type:inline-size;pointer-events:none;
}
.card-top-left{width:100%;display:flex;flex-direction:column;align-items:flex-start;margin-top:calc(var(--card-width)*.02)}
.card-bottom-right{display:flex;flex-direction:column;align-items:flex-end;margin-top:auto}
.card h1{
  font-size:clamp(2.5rem,24cqi,6rem);font-weight:650;color:#fff;
  letter-spacing:-.035em;line-height:.95;
}
.card-bottom-right h1{font-size:clamp(3.5rem,38cqi,9rem);line-height:.85}
.card .label{
  font-family:'Satoshi',sans-serif;
  font-size:clamp(.5rem,6cqi,.95rem);font-weight:500;
  color:gray;margin-left:.3em;margin-bottom:.3em;
}
.card-bottom-right .label{margin-bottom:-.25rem;z-index:1}

/* ============================================
   FULL-SCREEN PROJECT SLIDER
   ============================================ */
.slider{
  position:relative;width:100%;
  /* Height = number_of_slides * 100vh — set by JS */
}
.slider__viewport{
  position:sticky;top:0;width:100%;height:100vh;overflow:hidden;
}
.slider__slides{position:relative;width:100%;height:100%}

.slider__slide{
  position:absolute;top:0;left:0;width:100%;height:100%;
  clip-path:polygon(0% 100%,100% 100%,100% 100%,0% 100%);
  will-change:clip-path;overflow:hidden;
}
.slider__slide:first-child{
  clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);
}
.slider__slide img{
  width:100%;height:100%;object-fit:cover;
  will-change:transform;
}
.slider__slide-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 50%);
  pointer-events:none;
}

/* Slider Title (bottom left) */
.slider__title{
  position:absolute;bottom:2rem;left:2rem;z-index:10;
  pointer-events:none;
}
.slider__title h1{
  font-size:clamp(3rem,12vw,8rem);
  letter-spacing:-.03em;line-height:.9;
  color:#fff;
}
.slider__title h1 .char{
  display:inline-block;will-change:transform;
}

/* Slider Indices (right side) */
.slider__indices{
  position:absolute;right:2rem;bottom:2rem;z-index:10;
  display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;
  pointer-events:none;
}
.slider__index{
  font-family:'Satoshi',sans-serif;font-size:.85rem;font-weight:500;
  color:rgba(255,255,255,.3);transition:color .4s ease,opacity .4s ease;
  line-height:1;display:flex;align-items:baseline;gap:.15rem;
}
.slider__index-label{font-size:.75rem}
.slider__index-num{
  font-size:clamp(1.2rem,3vw,2rem);font-weight:600;
  transition:font-size .4s ease;
}
.slider__index.active{color:#fff}
.slider__index.active .slider__index-num{
  font-size:clamp(2rem,5vw,3.5rem);
}

/* ============================================
   MANIFESTO SECTION
   ============================================ */
.manifesto{
  position:relative;width:100%;
  height:400vh; /* long scroll distance for scrub */
  background-color:var(--base-300);z-index:10;
}
.manifesto__pin{
  position:sticky;top:0;width:100%;height:100vh;
  display:flex;justify-content:center;align-items:center;
  overflow:hidden;
}

/* Preview images — full viewport cover behind text */
.manifesto__previews{
  position:absolute;top:0;left:50%;
  transform:translateX(-50%);
  width:100vw;height:100%;
  z-index:0;
}
.manifesto__preview{
  position:absolute;top:0;left:0;width:100%;height:100%;
  clip-path:polygon(0% 0%,0% 0%,0% 100%,0% 100%);
  will-change:clip-path;overflow:hidden;
  transition:clip-path .6s cubic-bezier(.77,0,.175,1);
}
.manifesto__preview.active{
  clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);
}
.manifesto__preview::after{
  content:"";position:absolute;inset:0;
  background:rgba(0,0,0,.4);z-index:1;
}
.manifesto__preview img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
}

/* Manifesto text */
.manifesto__text{
  position:relative;z-index:1;text-align:center;
  padding:0 2rem;max-width:900px;
}
.manifesto__text h1{
  font-size:clamp(2.5rem,7vw,5.5rem);
  font-weight:600;line-height:1.1;letter-spacing:-.02em;
}

/* Individual words with background block effect */
.manifesto__word{
  display:inline-block;position:relative;
  opacity:.15;will-change:opacity;
  padding:0 .08em;margin:0 -.04em;
  transition:opacity .15s ease;
}
.manifesto__word-bg{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background-color:rgba(80,80,80,.55);
  transform:scaleX(0);transform-origin:left;
  will-change:transform;z-index:-1;
  transition:transform .25s cubic-bezier(.25,.46,.45,.94);
}
.manifesto__word.revealed{opacity:1}
.manifesto__word.revealed .manifesto__word-bg{transform:scaleX(1)}

/* Camera Grid Overlay */
.showreel__grid{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  padding:clamp(1rem,3vw,2.5rem);
}
.showreel__grid-v{
  position:absolute;top:0;bottom:0;width:1px;
  background:rgba(255,255,255,.12);
}
.showreel__grid-v:nth-child(1){left:33.33%}
.showreel__grid-v:nth-child(2){left:50%}
.showreel__grid-v:nth-child(3){left:66.66%}
.showreel__grid-h{
  position:absolute;left:0;right:0;height:1px;
  background:rgba(255,255,255,.12);
}
.showreel__grid-h:nth-child(4){top:33.33%}
.showreel__grid-h:nth-child(5){top:50%}
.showreel__grid-h:nth-child(6){top:66.66%}

/* Corner brackets */
.showreel__corner{
  position:absolute;width:clamp(18px,3vw,30px);height:clamp(18px,3vw,30px);
  z-index:6;
}
.showreel__corner::before,.showreel__corner::after{
  content:"";position:absolute;background:rgba(255,255,255,.4);
}
.showreel__corner.tl{top:clamp(1rem,3vw,2.5rem);left:clamp(1rem,3vw,2.5rem)}
.showreel__corner.tl::before{top:0;left:0;width:100%;height:1px}
.showreel__corner.tl::after{top:0;left:0;width:1px;height:100%}
.showreel__corner.tr{top:clamp(1rem,3vw,2.5rem);right:clamp(1rem,3vw,2.5rem)}
.showreel__corner.tr::before{top:0;right:0;width:100%;height:1px}
.showreel__corner.tr::after{top:0;right:0;width:1px;height:100%}
.showreel__corner.bl{bottom:clamp(1rem,3vw,2.5rem);left:clamp(1rem,3vw,2.5rem)}
.showreel__corner.bl::before{bottom:0;left:0;width:100%;height:1px}
.showreel__corner.bl::after{bottom:0;left:0;width:1px;height:100%}
.showreel__corner.br{bottom:clamp(1rem,3vw,2.5rem);right:clamp(1rem,3vw,2.5rem)}
.showreel__corner.br::before{bottom:0;right:0;width:100%;height:1px}
.showreel__corner.br::after{bottom:0;right:0;width:1px;height:100%}

/* CTA Button */
.showreel__cta{
  position:absolute;bottom:clamp(1.5rem,4vw,2.5rem);left:50%;
  transform:translateX(-50%);z-index:10;
}
.showreel__btn{
  display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(30,30,30,.75);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);border-radius:100px;
  padding:.7rem 1.4rem;cursor:pointer;
  font-family:'Satoshi',sans-serif;font-size:.8rem;font-weight:500;
  color:rgba(255,255,255,.85);letter-spacing:.08em;
  transition:all .3s ease;
}
.showreel__btn:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.25);
}
.showreel__dot{
  width:8px;height:8px;border-radius:50%;
  background:#e8b931;flex-shrink:0;
  animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{opacity:1}
  50%{opacity:.4}
}

/* ============================================
   SHOWREEL LIGHTBOX
   ============================================ */
.lightbox{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.95);
  display:flex;align-items:center;justify-content:center;
  visibility:hidden;opacity:0;
  pointer-events:none;
  transition:opacity .4s ease,visibility .4s ease;
}
.lightbox.active{
  visibility:visible;opacity:1;
  pointer-events:auto;
}
.lightbox.closing{
  opacity:0;visibility:hidden;
}

/* Video wrapper */
.lightbox__video-wrap{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}
.lightbox__video-wrap iframe,
.lightbox__video-wrap div{
  width:100%;height:100%;
}
#lightbox-player{
  width:100%!important;height:100%!important;
}
#lightbox-player iframe{
  width:100%!important;height:100%!important;
  border:0;
}

/* Controls overlay */
.lightbox__controls{
  position:absolute;inset:0;z-index:10;
  display:flex;flex-direction:column;
  justify-content:space-between;
  padding:clamp(1rem,3vw,2rem);
  pointer-events:none;
}
.lightbox__controls > *{
  pointer-events:auto;
}

/* Top bar: SHOWREEL + CLOSE */
.lightbox__top{
  display:flex;justify-content:space-between;align-items:center;
}
.lightbox__label{
  font-family:'Satoshi',sans-serif;font-size:.75rem;
  font-weight:600;letter-spacing:.15em;
  color:rgba(255,255,255,.6);margin:0;
}
.lightbox__close{
  background:none;border:none;cursor:pointer;
  font-family:'Satoshi',sans-serif;font-size:.75rem;
  font-weight:600;letter-spacing:.15em;
  color:rgba(255,255,255,.6);
  transition:color .2s ease;padding:.5rem;
}
.lightbox__close:hover{color:#fff}

/* Center play/pause */
.lightbox__center-btn{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:none;border:none;cursor:pointer;
  font-family:'Satoshi',sans-serif;font-size:.85rem;
  font-weight:500;letter-spacing:.12em;
  color:rgba(255,255,255,.7);
  padding:1.5rem 2rem;
  transition:color .2s ease,transform .2s ease;
  pointer-events:auto;
}
.lightbox__center-btn:hover{
  color:#fff;transform:translate(-50%,-50%) scale(1.05);
}

/* Bottom bar: time + progress + mute */
.lightbox__bottom{
  display:flex;align-items:center;gap:clamp(.75rem,2vw,1.5rem);
}
.lightbox__time{
  font-family:'Geist Mono',monospace;font-size:.7rem;
  color:rgba(255,255,255,.5);white-space:nowrap;
  min-width:6rem;
}

/* Progress bar (range input) */
.lightbox__progress{
  flex:1;height:3px;
  -webkit-appearance:none;appearance:none;
  background:rgba(255,255,255,.15);
  border-radius:2px;outline:none;cursor:pointer;
}
.lightbox__progress::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:10px;height:10px;border-radius:50%;
  background:#fff;cursor:pointer;
  margin-top:-3.5px;
}
.lightbox__progress::-moz-range-thumb{
  width:10px;height:10px;border-radius:50%;
  background:#fff;border:none;cursor:pointer;
}
.lightbox__progress::-webkit-slider-runnable-track{
  height:3px;background:rgba(255,255,255,.15);border-radius:2px;
}
.lightbox__progress::-moz-range-track{
  height:3px;background:rgba(255,255,255,.15);border-radius:2px;
}

/* Mute button */
.lightbox__mute{
  background:none;border:none;cursor:pointer;
  font-family:'Satoshi',sans-serif;font-size:.7rem;
  font-weight:600;letter-spacing:.12em;
  color:rgba(255,255,255,.5);white-space:nowrap;
  padding:.5rem;transition:color .2s ease;
}
.lightbox__mute:hover{color:#fff}

/* ============================================
   OUTRO
   ============================================ */
.outro{
  position:relative;width:100%;height:100vh;
  display:flex;justify-content:center;align-items:center;
  background-color:var(--base-300);z-index:10;overflow:hidden;
}
.outro__text{text-align:center}
.outro__text h1{
  font-size:clamp(4rem,15vw,12rem);font-weight:600;
  line-height:.95;letter-spacing:-.03em;
}
.outro__line{display:block;overflow:hidden}
.outro__word{display:inline-block;will-change:transform}

/* ============================================
   CLIENT LOGOS MARQUEE
   ============================================ */
.clients{
  position:relative;width:100%;
  padding:clamp(3rem,6vw,5rem) 0;
  background-color:var(--base-300);z-index:10;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.06);
}
.clients__label{
  text-align:center;margin-bottom:2rem;
}
.clients__label p{
  font-family:'Satoshi',sans-serif;font-size:.7rem;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.3);
}
.clients__marquee{
  overflow:hidden;width:100%;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.clients__track{
  display:flex;gap:clamp(2rem,5vw,4rem);
  align-items:center;white-space:nowrap;
  animation:marquee 30s linear infinite;
  width:max-content;
}
.clients__logo{
  font-family:'Satoshi',sans-serif;font-size:clamp(.85rem,1.5vw,1.1rem);
  font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.2);
  flex-shrink:0;padding:0 .5rem;
  transition:color .3s ease;
}
.clients__logo:hover{color:rgba(255,255,255,.5)}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ============================================
   SITE FOOTER
   ============================================ */
.site-footer{
  position:relative;width:100%;
  background:var(--base-300);z-index:10;
  border-top:1px solid rgba(255,255,255,.06);
}

/* Follow My Work */
.footer__follow{
  padding:clamp(4rem,10vw,8rem) 2rem;
  text-align:center;
}
.footer__follow-title{
  font-family:'Satoshi',sans-serif;
  font-size:clamp(2.5rem,8vw,5rem);
  font-weight:800;line-height:1;letter-spacing:-.02em;
  text-transform:uppercase;margin-bottom:2rem;
}
.footer__follow-icons{
  display:flex;justify-content:center;gap:1.5rem;
}
.footer__follow-icons a{
  color:var(--base-100);display:flex;
  align-items:center;justify-content:center;
  width:48px;height:48px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  transition:all .3s ease;
}
.footer__follow-icons a:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.3);
  transform:translateY(-2px);
}

/* Google Map */
.footer__map{
  width:100%;height:clamp(250px,40vw,400px);
  overflow:hidden;
}
.footer__map iframe{
  width:100%;height:100%;
  filter:grayscale(1) invert(.92) contrast(.85);
  transition:filter .4s ease;
}
.footer__map:hover iframe{
  filter:grayscale(.3) invert(.92) contrast(.9);
}

/* Info Grid: Address / Contact / Socials */
.footer__info{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  padding:0 clamp(1.5rem,4vw,3rem);
}
.footer__info-block{
  padding:clamp(1.5rem,3vw,2.5rem) 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer__info-label{
  font-family:'Satoshi',sans-serif;font-size:.65rem;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.3);margin-bottom:1rem;
}
.footer__info-block p,
.footer__info-block a{
  display:block;
  font-family:'DM Sans',sans-serif;font-size:clamp(.95rem,1.5vw,1.1rem);
  font-weight:400;line-height:1.8;
  color:rgba(255,255,255,.7);
  text-decoration:none;transition:color .2s ease;
}
.footer__info-block a:hover{color:#fff}

/* MUNNA text logo */
.footer__brand{
  padding:clamp(3rem,8vw,6rem) clamp(1.5rem,4vw,3rem) clamp(1rem,2vw,2rem);
  overflow:hidden;
}
.footer__brand-text{
  font-family:'Satoshi',sans-serif;
  font-size:clamp(5rem,22vw,18rem);
  font-weight:900;line-height:.85;letter-spacing:-.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,.04);
  user-select:none;
}

/* Bottom bar */
.footer__bottom{
  padding:1.5rem clamp(1.5rem,4vw,3rem);
  border-top:1px solid rgba(255,255,255,.06);
}
.footer__bottom p{
  font-family:'DM Sans',sans-serif;font-size:.75rem;
  color:rgba(255,255,255,.25);
}

/* ============================================
   WHATSAPP FLOATING BUTTON
   ============================================ */
.whatsapp-float{
  position:fixed;bottom:clamp(1.2rem,3vw,2rem);right:clamp(1.2rem,3vw,2rem);
  z-index:999;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(30,30,30,.75);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  color:rgba(255,255,255,.7);
  text-decoration:none;
  transition:all .3s ease;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.whatsapp-float:hover{
  background:rgba(37,211,102,.15);
  border-color:rgba(37,211,102,.4);
  color:#25d366;
  transform:translateY(-3px);
  box-shadow:0 8px 30px rgba(37,211,102,.2);
}

@media(min-width:768px){
  .footer__info{
    grid-template-columns:1fr 1fr 1fr;
  }
  .footer__info-block{
    border-top:none;
    border-left:1px solid rgba(255,255,255,.08);
    padding-left:clamp(1.5rem,3vw,2.5rem);
  }
  .footer__info-block:first-child{
    border-left:none;padding-left:0;
  }
}

/* ============================================
   MENU OVERLAY
   ============================================ */
.menu{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  display:flex;flex-direction:column;justify-content:space-between;
  background-color:var(--base-300);
  padding:1rem;padding-top:max(1rem,var(--safe-top));
  z-index:1000001;
  clip-path:polygon(0% 100%,100% 100%,100% 100%,0% 100%);
  pointer-events:none;
}
.menu.open{pointer-events:all}
.menu-nav{display:flex;justify-content:space-between;align-items:flex-start;width:100%;flex-shrink:0}
.menu .nav-logo{line-height:0}
.menu-nav a,.menu-nav p,.menu-close p{
  font-family:'Satoshi',sans-serif;font-size:.85rem;font-weight:500;
  color:#fff;line-height:1;
}
.menu-close{cursor:pointer;display:inline-flex;align-items:center}
.menu-links{flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:1rem}
.menu-link a{
  font-family:'Satoshi',sans-serif;
  font-size:clamp(3.5rem,12vw,6rem);font-weight:600;
  line-height:.95;letter-spacing:-.03em;
  color:var(--base-100);cursor:pointer;
  display:inline-block;
}
.menu-footer{display:flex;justify-content:flex-start;padding-bottom:max(.5rem,var(--safe-bottom))}
.socials{display:flex;gap:1rem}
.socials p{
  font-family:'Satoshi',sans-serif;font-size:.85rem;font-weight:500;
  color:rgba(255,255,255,.5);cursor:pointer;transition:opacity .3s ease;
}
.socials p:hover{color:#fff}

/* ============================================
   ABOUT PAGE
   ============================================ */
#about-section{background-color:#000;min-height:100vh}
.about-content-wrapper{position:relative}

.about-hero{position:relative;width:100%;height:100vh;overflow:hidden}
.about-img-container{position:relative;width:100%;height:100%}
.about-img-container img{width:100%;height:100%;object-fit:cover;object-position:center 20%;will-change:transform}
.about-img-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0)0%,rgba(0,0,0,.7)100%);pointer-events:none}

.about-bio{position:relative;padding:8rem 2rem;max-width:1200px;margin:0 auto;display:flex;gap:2rem}
.about-bio__label{flex-shrink:0;width:120px}
.about-bio__label p{font-family:'Satoshi',sans-serif;font-size:.85rem;font-weight:500;color:rgba(255,255,255,.5);white-space:nowrap}
.about-bio__text h2{font-family:'Satoshi',sans-serif;font-size:clamp(1.8rem,4vw,3rem);font-weight:500;line-height:1.2;letter-spacing:-.02em;color:var(--base-100)}

/* About bio word reveal */
.about-bio__text .word{display:inline-block;opacity:.15;will-change:opacity;transition:opacity .15s ease}
.about-bio__text .word.revealed{opacity:1}

.about-img-block{position:relative;width:100%;padding:0 2rem;margin:4rem 0}
.about-img-block__container{position:relative;width:100%;height:60vh;overflow:hidden;border-radius:4px}
.about-img-block__container img{width:100%;height:120%;object-fit:cover;will-change:transform}
.about-img-block__overlay{position:absolute;inset:0;background-color:rgba(0,0,0,.3);pointer-events:none}

.about-values{position:relative;padding:8rem 2rem;max-width:1200px;margin:0 auto}
.about-values__label{margin-bottom:4rem}
.about-values__label p{font-family:'Satoshi',sans-serif;font-size:.85rem;font-weight:500;color:rgba(255,255,255,.5)}
.about-values__list{display:flex;flex-direction:column}
.about-values__item{display:flex;gap:2rem;padding:2.5rem 0;border-top:1px solid rgba(255,255,255,.1);opacity:.3;transition:opacity .5s ease}
.about-values__item:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.about-values__item.active{opacity:1}
.about-values__number p{font-family:'Geist Mono',monospace;font-size:.8rem;font-weight:400;color:rgba(255,255,255,.4);min-width:2rem}
.about-values__content h3{font-family:'Satoshi',sans-serif;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:600;margin-bottom:.75rem;letter-spacing:-.02em}
.about-values__content p{font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:400;line-height:1.5;color:rgba(255,255,255,.6);max-width:500px}

.about-footer{position:relative;padding:8rem 2rem;text-align:center}
.about-footer__cta{max-width:800px;margin:0 auto 6rem}
.about-footer__cta h2{font-family:'Satoshi',sans-serif;font-size:clamp(2rem,5vw,4rem);font-weight:600;line-height:1.1;letter-spacing:-.02em;margin-bottom:2rem}
.about-footer__link{display:inline-flex;align-items:center;gap:.5rem;font-family:'Satoshi',sans-serif;font-size:1.1rem;font-weight:500;color:var(--base-100);padding:1rem 2rem;border:1px solid rgba(255,255,255,.2);border-radius:100px;transition:all .3s ease}
.about-footer__link:hover{background-color:var(--base-100);color:var(--base-300);border-color:var(--base-100)}
.about-footer__link svg{transition:transform .3s ease}
.about-footer__link:hover svg{transform:translate(3px,-3px)}
.about-footer__outro{margin-top:4rem}
.about-footer__outro h1{font-size:clamp(4rem,15vw,12rem);font-weight:600;line-height:.95;letter-spacing:-.03em;color:rgba(255,255,255,.05)}

/* ============================================
   WORKS PAGE
   ============================================ */
#work-selection-page{background-color:var(--base-300);min-height:100vh}
.works-content{padding-top:6rem}
.works-header{display:flex;justify-content:space-between;align-items:flex-end;padding:2rem;margin-bottom:2rem}
.works-header__title h1{font-size:clamp(3rem,10vw,7rem);letter-spacing:-.03em}
.works-header__count p{font-family:'Satoshi',sans-serif;font-size:.85rem;font-weight:500;color:rgba(255,255,255,.5)}
.works-grid{display:flex;flex-direction:column}

.works-item{
  position:relative;display:flex;justify-content:space-between;align-items:center;
  padding:2.5rem 2rem;border-top:1px solid rgba(255,255,255,.08);
  cursor:pointer;transition:background-color .3s ease;
  text-decoration:none;color:var(--base-100);
}
.works-item:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.works-item:hover{background-color:rgba(255,255,255,.03)}
.works-item__left{display:flex;align-items:center;gap:2rem}
.works-item__number{font-family:'Geist Mono',monospace;font-size:.8rem;font-weight:400;color:rgba(255,255,255,.3);min-width:2.5rem}
.works-item__title{font-family:'Satoshi',sans-serif;font-size:clamp(1.5rem,4vw,3rem);font-weight:600;letter-spacing:-.02em;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.works-item:hover .works-item__title{transform:translateX(1rem)}
.works-item__right{display:flex;align-items:center;gap:2rem}
.works-item__category{font-family:'Satoshi',sans-serif;font-size:.85rem;font-weight:500;color:rgba(255,255,255,.4)}
.works-item__thumb{width:120px;height:80px;overflow:hidden;border-radius:4px;opacity:0;transform:scale(.9);transition:all .4s cubic-bezier(.22,1,.36,1)}
.works-item:hover .works-item__thumb{opacity:1;transform:scale(1)}
.works-item__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.works-item:hover .works-item__thumb img{transform:scale(1.1)}
.works-item__arrow{width:24px;height:24px;opacity:0;transform:translateX(-10px);transition:all .4s cubic-bezier(.22,1,.36,1)}
.works-item:hover .works-item__arrow{opacity:.5;transform:translateX(0)}

/* ============================================
   PROJECT PAGE
   ============================================ */
#project-page{background-color:var(--base-300);min-height:100vh}
.project-content{position:relative}
.project-hero{position:relative;display:flex;justify-content:space-between;align-items:flex-end;padding:0 2rem;padding-top:8rem;padding-bottom:2rem;min-height:40vh}
.project-hero__header h1{font-size:clamp(3rem,10vw,7rem);letter-spacing:-.03em;line-height:.95;max-width:70vw}
.project-hero__header h1 .char{display:inline-block;will-change:transform}
.project-hero__number{display:flex;align-items:baseline;gap:.25rem;flex-shrink:0}
.project-number__label{font-family:'Satoshi',sans-serif;font-size:1rem;font-weight:500;color:rgba(255,255,255,.4)}
.project-hero__number h1{font-size:clamp(4rem,12vw,10rem);font-weight:600;color:rgba(255,255,255,.2);line-height:.85}

.project-hero-img{width:100%;overflow:hidden}
.project-hero-img__container{width:100%;height:70vh;overflow:hidden}
.project-hero-img__container img{width:100%;height:120%;object-fit:cover;will-change:transform}

.project-info{display:flex;justify-content:space-between;gap:4rem;padding:4rem 2rem;max-width:1200px;margin:0 auto}
.project-info__details{display:flex;gap:3rem;flex-shrink:0}
.project-info__label{font-family:'Satoshi',sans-serif;font-size:.75rem;font-weight:500;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
.project-info__value{font-family:'Satoshi',sans-serif;font-size:.9rem;font-weight:500;color:var(--base-100)}
.project-info__description{max-width:500px}
.project-info__description p{font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:400;line-height:1.6;color:rgba(255,255,255,.7)}

.project-images{display:flex;flex-direction:column;gap:2rem;padding:2rem}
.project-images__row{display:flex;gap:2rem;width:100%}
.project-images__row--single{display:block}
.project-images__img{flex:1;overflow:hidden;border-radius:4px}
.project-images__img img{width:100%;height:100%;object-fit:cover;will-change:transform}
.project-images__img--full{width:100%;height:60vh}
.project-images__img--half{height:50vh}

.project-footer{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8rem 2rem;text-align:center;cursor:pointer;min-height:50vh}
.project-footer__label p{font-family:'Satoshi',sans-serif;font-size:.85rem;font-weight:500;color:rgba(255,255,255,.4);margin-bottom:1.5rem}
.project-footer__title h1{font-size:clamp(2.5rem,8vw,6rem);letter-spacing:-.03em;line-height:.95;transition:opacity .3s ease}
.project-footer:hover .project-footer__title h1{opacity:.6}
.next-project-progress-bar{position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:rgba(255,255,255,.1)}
.next-project-progress-fill{width:100%;height:100%;background-color:var(--base-100);transform-origin:left;transform:scaleX(0);will-change:transform}

/* ============================================
   RESPONSIVE / MOBILE
   ============================================ */
@media(max-width:768px){
  nav{padding:.75rem}
  nav a,nav p{font-size:.75rem}
  .hero .header{bottom:2rem;padding:1rem}
  .hero .header h1{font-size:clamp(2.5rem,14vw,6rem)}
  .card{--card-width:clamp(260px,72vw,340px)}
  .slider__title{bottom:1.5rem;left:1.5rem}
  .slider__title h1{font-size:clamp(2.5rem,10vw,5rem)}
  .slider__indices{right:1.5rem;bottom:1.5rem}
  .manifesto__text h1{font-size:clamp(2rem,6.5vw,3.5rem)}
  .manifesto__previews{width:clamp(260px,75vw,360px)}
  .about-bio{flex-direction:column;padding:4rem 1.5rem;gap:1rem}
  .about-bio__label{width:auto}
  .about-bio__text h2{font-size:clamp(1.4rem,5vw,2rem)}
  .about-values{padding:4rem 1.5rem}
  .about-values__item{flex-direction:column;gap:.75rem;padding:2rem 0}
  .about-footer{padding:4rem 1.5rem}
  .works-header{flex-direction:column;align-items:flex-start;gap:1rem;padding:1.5rem}
  .works-item{padding:2rem 1.5rem}
  .works-item__thumb,.works-item__category{display:none}
  .project-hero{flex-direction:column;align-items:flex-start;gap:1rem;padding:6rem 1.5rem 1.5rem}
  .project-hero__number{align-self:flex-end}
  .project-hero-img__container{height:45vh}
  .project-info{flex-direction:column;gap:2rem;padding:3rem 1.5rem}
  .project-info__details{gap:2rem;flex-wrap:wrap}
  .project-images{padding:1rem;gap:1rem}
  .project-images__row{flex-direction:column;gap:1rem}
  .project-images__img--full{height:40vh}
  .project-images__img--half{height:35vh}
  .project-footer{padding:4rem 1.5rem;min-height:35vh}
  .menu-link a{font-size:clamp(2.5rem,10vw,4rem)}
  .outro__text h1{font-size:clamp(3rem,12vw,8rem)}
}

@media(max-width:480px){
  .hero .header h1{font-size:clamp(2rem,12vw,4rem)}
  .card{--card-width:clamp(220px,68vw,300px)}
  .works-header__title h1{font-size:clamp(2.5rem,12vw,4rem)}
}