/* ════════════════════════════════════════
   RESET & BASE
════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;
  font-size:16px;
  background:#000;           /* color del rebote arriba */
  overscroll-behavior:none;  /* elimina el rebote/stretch */
}
body{
  font-family:'Figtree',sans-serif;
  background:#000;           /* zona blanca → negro */
  color:#000;
  overflow-x:hidden;
  overscroll-behavior:none;
}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{display:block;max-width:100%;object-fit:cover}

:root{
  --red:#E8400A;
  --black:#000;
  --white:#fff;
  --grey:#f2f2f0;
  --border:#e0e0e0;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

/* ════════════════════════════════════════
   HEADER
════════════════════════════════════════ */
#header{
  position:fixed;top:0;left:0;right:0;
  z-index:1000;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(12px);
  border-bottom:1.5px solid #000;
  transition:background 0.3s;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 3%;
  height:64px;
}

/* Logo SVG */
.logo{
  display:flex;align-items:center;
  flex-shrink:0;
  opacity:0;
}
.logo-svg{
  height:36px;
  width:auto;
  display:block;
  transition:filter 0.3s;
}
/* On dark bg (hero), invert the logo so black bg becomes white */
.logo.on-dark .logo-svg{
  filter:invert(1);
}

/* Nav */
.nav-center{
  display:flex;gap:2.5rem;align-items:center;
  position:absolute;left:50%;transform:translateX(-50%);
}
.nav-center a{
  font-size:0.75rem;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  color:#000;transition:color 0.2s;
  position:relative;
}
.nav-center a:hover{color:var(--red);}

/* Counter badge */
.nav-counter{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  font-size:0.55rem;font-weight:700;
  color:var(--red);letter-spacing:0.1em;
  background:#fff;padding:0 2px;
  pointer-events:none;opacity:0;
  transition:opacity 0.2s;
}
.nav-center a:hover .nav-counter{opacity:0.65;}

/* Hamburger */
.hamburger{
  display:flex;flex-direction:column;gap:7px;
  background:none;border:none;cursor:pointer;padding:6px;
  flex-shrink:0;
}
.hamburger span{
  display:block;width:28px;height:2px;background:#000;
  transition:transform 0.35s var(--ease),opacity 0.25s;
}
.hamburger.open span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.hamburger.open span:nth-child(2){transform:translateY(-9px) rotate(-45deg);}

/* Mobile Menu */
.mobile-menu{
  display:none;position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:var(--red);
  z-index:999;
  flex-direction:column;
  align-items:center;justify-content:center;
  gap:0.3rem;
  padding-bottom:5rem;
}
.mobile-menu.open{display:flex;}
.mob-link{
  font-size:clamp(2.5rem,8vw,5rem);
  font-weight:800;letter-spacing:0.04em;
  text-transform:uppercase;color:#fff;
  padding:0.4rem 0;
  transition:opacity 0.2s;
}
.mob-link:hover{opacity:0.7;}
.mobile-footer{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.2rem 5%;
  border-top:1px solid rgba(255,255,255,0.2);
}
.mobile-footer span,.mobile-footer a{
  font-size:0.75rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.7);
}
.mob-close{
  position:absolute;top:20px;right:3%;
  background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;gap:0;
  padding:6px;
}
.mob-close span{
  display:block;width:28px;height:2px;background:#fff;
}
.mob-close span:nth-child(1){transform:translateY(1px) rotate(45deg);}
.mob-close span:nth-child(2){transform:translateY(-1px) rotate(-45deg);}

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
#hero{
  position:relative;
  width:100vw;
  height:100svh;
  min-height:500px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:#0a0a0a;
}

.hero-bg{
  position:absolute;inset:0;
  overflow:hidden;
  background:#000;
  transform:translateZ(0);
}
.hero-bg video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0.65;
  transform:translateZ(0);
  will-change:transform;
  pointer-events:none;
}
/* Scanline texture */
.hero-bg::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(
    0deg,transparent,transparent 3px,
    rgba(255,255,255,0.012) 3px,rgba(255,255,255,0.012) 4px
  );
  pointer-events:none;
}
/* Film grain */
.hero-bg::after{
  content:'';position:absolute;inset:0;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  opacity:0.28;animation:grain 1.2s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}60%{transform:translate(-1%,3%)}
  80%{transform:translate(3%,-1%)}100%{transform:translate(0,0)}
}

.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.3) 100%),
    radial-gradient(ellipse 100% 90% at 55% 50%, rgba(20,3,0,0.08) 0%, transparent 60%, transparent 100%);
}

/* Cinematic film mask */
.hero-glass{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;
  /* Removed backdrop-filter: triggers full repaint on every scroll frame.
     Visual softening handled by the overlay gradient instead. */
}
/* Heavy grain layer */
.hero-grain{
  position:absolute;inset:-50%;z-index:2;
  width:200%;height:200%;
  pointer-events:none;
  opacity:0.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  animation:grainShift 0.6s steps(2) infinite;
  /* Own layer — animation stays on GPU */
  transform:translateZ(0);
  will-change:transform;
}
/* Halation glow — blooms light like real film */
.hero-halation{
  position:absolute;inset:0;z-index:2;
  pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 40%, rgba(232,64,10,0.04) 0%, transparent 70%);
  mix-blend-mode:screen;
  animation:halationPulse 4s ease-in-out infinite;
  transform:translateZ(0);
  will-change:opacity;
}
@keyframes grainShift{
  0%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(-2%,1%) rotate(0.3deg)}
  50%{transform:translate(1%,-2%) rotate(-0.2deg)}
  75%{transform:translate(-1%,2%) rotate(0.1deg)}
  100%{transform:translate(0,0) rotate(0deg)}
}
@keyframes halationPulse{
  0%,100%{opacity:0.6} 50%{opacity:1}
}

/* Red vignette pulse — subtle */
.hero-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 50%, transparent 40%, rgba(232,64,10,0.07) 100%);
  animation:vignettePulse 6s ease-in-out infinite;
  pointer-events:none;
  transform:translateZ(0);
  will-change:opacity;
}
@keyframes vignettePulse{
  0%,100%{opacity:0.6}50%{opacity:1}
}

.hero-content{
  position:relative;z-index:2;
  padding:0 4% 5vh;
  width:100%;
}

/* ADAPTIVE HERO TITLE — fits any screen */
.hero-title{
  font-weight:900;
  line-height:0.85;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  color:#fff;
  display:flex;
  flex-direction:column;
  user-select:none;
  /* Key: font-size driven by viewport width so text always fits */
  font-size:min(20.5vw, calc((100svh - 160px) * 0.48));
  width:100%;
}
.hero-t32{
  display:block;
  opacity:0; /* GSAP will animate */
  will-change:transform,opacity;
}
.hero-studios{
  display:flex;align-items:baseline;gap:0.04em;
  opacity:0; /* GSAP will animate */
  will-change:transform,opacity;
}
.red-dot{
  display:inline-block;
  width:0.38em;height:0.38em;
  background:var(--red);
  flex-shrink:0;
  border-radius:50%;
  transform:translateY(-0.06em);
  opacity:0;
  will-change:transform,opacity;
}

.hero-est{
  position:absolute;bottom:2.5rem;right:4%;
  font-size:0.72rem;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.4);z-index:2;
  opacity:0;
}
.copyright-top{
  position:absolute;top:50%;right:4%;
  transform:translateY(-50%);
  font-size:clamp(1.2rem,3vw,2.5rem);
  font-weight:900;letter-spacing:0.04em;
  color:rgba(255,255,255,0.12);z-index:2;
  writing-mode:vertical-rl;
  opacity:0;
}

/* ════════════════════════════════════════
   ABOUT
════════════════════════════════════════ */
#about{
  background:var(--grey);
  padding:80px 4% 0;
}

.about-label{
  display:flex;align-items:center;gap:0.6rem;
  font-size:0.72rem;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  color:#000;margin-bottom:2rem;
}
.about-label .tri{color:var(--red);font-size:0.65rem;}

.about-heading{
  font-size:clamp(4rem,10vw,9rem);
  font-weight:900;
  letter-spacing:-0.02em;
  line-height:0.9;
  color:#000;
  margin-bottom:0;
}
.about-heading .red-period{color:var(--red);}

.about-top{
  display:block;
  padding-bottom:3rem;
  border-bottom:1.5px solid #ccc;
}

.about-body{
  display:grid;grid-template-columns:1fr 1fr;
  gap:4rem;
  padding:3rem 0;
}
.about-para{
  font-size:clamp(1rem,1.8vw,1.25rem);
  font-weight:400;line-height:1.6;
  color:#222;
}
.about-para strong{font-weight:700;}
.about-para em{font-style:italic;}

.about-list-col{}
.about-list li{
  display:flex;align-items:flex-start;gap:0.7rem;
  font-size:0.95rem;font-weight:400;line-height:1.55;
  color:#333;
  padding:0.9rem 0;
  border-bottom:1px solid #d0d0d0;
}
.about-list li:first-child{border-top:1px solid #d0d0d0;}
.about-list .tri{color:var(--red);font-size:0.6rem;margin-top:0.4em;flex-shrink:0;}

/* ════════════════════════════════════════
   WORKS
════════════════════════════════════════ */
/* ════════════════════════════════════════
   WORKS — GLASSMORPHISM CARDS
════════════════════════════════════════ */
#works{
  background:#0a0a0a;
  padding:80px 4%;
}
.works-label{
  display:flex;align-items:center;gap:0.6rem;
  font-size:0.72rem;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.4);margin-bottom:3rem;
}
.works-label .tri{color:var(--red);font-size:0.65rem;}

/* ── Grid ── */
.works-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto auto;
  gap:12px;
}
.work-card.featured{grid-row:span 2;}

/* ── Card base ── */
.work-card{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  background:#111;
  /* Isolate stacking for backdrop-filter children */
  isolation:isolate;
}

/* ── Image wrapper ── */
.work-img{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  display:block;
}
.work-card.featured .work-img{
  aspect-ratio:unset;
  height:100%;
  min-height:440px;
}

/* ── Background image / gradient ── */
.work-img-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  background:#1a1a1a;
  transition:transform 0.7s var(--ease);
  transform:scale(1) translateZ(0);
  will-change:transform;
}
.work-card:hover .work-img-bg{
  transform:scale(1.06) translateZ(0);
}

/* ── Glassmorphism overlay ── */
.work-glass{
  position:absolute;inset:0;
  /* El glass empieza completamente transparente */
  background:linear-gradient(
    160deg,
    rgba(255,255,255,0.07) 0%,
    rgba(0,0,0,0.55) 100%
  );
  backdrop-filter:blur(0px) saturate(100%);
  -webkit-backdrop-filter:blur(0px) saturate(100%);
  opacity:0;
  transition:
    opacity       0.45s var(--ease),
    backdrop-filter 0.45s var(--ease),
    -webkit-backdrop-filter 0.45s var(--ease);
  will-change:opacity, backdrop-filter;
  z-index:1;
}
.work-card:hover .work-glass{
  backdrop-filter:blur(8px) saturate(160%);
  -webkit-backdrop-filter:blur(8px) saturate(160%);
  opacity:1;
}

/* ── Glass inner content ── */
.work-glass-content{
  position:absolute;inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:1.6rem 1.4rem 1.4rem;
  pointer-events:none;
}

/* Tags row — siempre visibles, arriba */
.work-tags{
  position:absolute;top:1rem;left:1rem;
  z-index:3;
  display:flex;flex-wrap:wrap;gap:0.4rem;
}
.work-tag{
  font-size:0.58rem;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.75);
  border:1px solid rgba(255,255,255,0.2);
  padding:3px 8px;
  background:rgba(0,0,0,0.25);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* ── Slide-up text block ── */
.work-glass-body{
  transform:translateY(18px);
  opacity:0;
  transition:
    transform 0.45s var(--ease),
    opacity   0.4s var(--ease);
  will-change:transform,opacity;
}
.work-card:hover .work-glass-body{
  transform:translateY(0);
  opacity:1;
}

/* Thin separator line above title */
.work-glass-body::before{
  content:'';
  display:block;
  width:28px;height:1.5px;
  background:var(--red);
  margin-bottom:0.7rem;
}

.work-glass-title{
  font-size:clamp(0.95rem,1.6vw,1.2rem);
  font-weight:800;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:#fff;
  line-height:1.15;
  margin-bottom:0.9rem;
}

/* ── CTA button ── */
.work-glass-btn{
  display:inline-flex;align-items:center;gap:0.5rem;
  background:rgba(255,255,255,0.1);
  border:1.5px solid rgba(255,255,255,0.3);
  color:#fff;
  font-family:'Figtree',sans-serif;
  font-size:0.62rem;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  padding:0.55rem 1rem;
  cursor:pointer;
  pointer-events:auto;
  transition:background 0.25s, border-color 0.25s;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.work-glass-btn:hover{
  background:var(--red);
  border-color:var(--red);
}
.work-glass-btn svg{
  width:12px;height:12px;
  flex-shrink:0;
  transition:transform 0.25s var(--ease);
}
.work-glass-btn:hover svg{transform:translate(2px,-2px);}

/* ── Card bottom label (always visible) ── */
.work-info{
  padding:0.85rem 1rem 1rem;
  background:#0d0d0d;
  border-top:1px solid rgba(255,255,255,0.06);
}
.work-info h3{
  font-size:0.82rem;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);
  transition:color 0.25s;
}
.work-card:hover .work-info h3{color:#fff;}

/* ── Responsive ── */
@media(max-width:1200px){
  .works-grid{grid-template-columns:1fr 1fr;}
  .work-card.featured{grid-row:auto;}
  .work-card.featured .work-img{min-height:unset;}
}
@media(max-width:640px){
  #works{padding:60px 4%;}
  .works-grid{
    grid-template-columns:1fr !important; /* override inline style */
    gap:16px;
  }
  .work-img{aspect-ratio:16/10;}
  .work-glass-title{font-size:1.1rem;}

  /* En móvil no hay hover — mostrar glass y texto siempre */
  .work-glass{
    backdrop-filter:blur(6px) saturate(140%);
    -webkit-backdrop-filter:blur(6px) saturate(140%);
    opacity:1;
  }
  .work-glass-body{
    transform:translateY(0);
    opacity:1;
  }
  /* Ocultar tags en móvil para no saturar */
  .work-tags{display:none;}
}

/* ════════════════════════════════════════
   SERVICES
════════════════════════════════════════ */
#services{
  background:#fff;
  padding:80px 4%;
}
.services-label{
  display:flex;align-items:center;gap:0.6rem;
  font-size:0.72rem;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  color:#000;margin-bottom:3rem;
}
.services-label .tri{color:var(--red);font-size:0.65rem;}

.accordion{border-top:1.5px solid #000;}
.acc-item{border-bottom:1.5px solid #000;overflow:hidden;}

.acc-header{
  display:grid;
  grid-template-columns:120px 1fr 50px;
  align-items:center;
  gap:1rem;
  padding:1.4rem 0;
  cursor:pointer;
}
.acc-header:hover .acc-title{color:var(--red);}

.acc-num{
  font-size:1rem;font-weight:700;
  letter-spacing:0.06em;color:#000;
}
.acc-title{
  font-size:clamp(1.2rem,2.5vw,1.9rem);
  font-weight:700;letter-spacing:-0.01em;
  color:#000;transition:color 0.2s;
}
.acc-plus{
  font-size:1.8rem;font-weight:300;
  color:var(--red);line-height:1;
  text-align:right;
  transition:transform 0.3s var(--ease);
}
.acc-item[data-open="true"] .acc-plus{transform:rotate(45deg);}

.acc-body{
  max-height:0;overflow:hidden;
  transition:max-height 0.55s var(--ease);
  padding-left:120px;
  /* Isolate layout recalc from rest of document */
  contain:layout;
}
.acc-item[data-open="true"] .acc-body{max-height:600px;}

.acc-inner{
  padding-bottom:2rem;
  display:grid;grid-template-columns:1fr 1fr;
  gap:3rem;align-items:start;
}
.acc-left{}
.acc-desc{
  font-size:0.92rem;line-height:1.65;
  color:#555;margin-bottom:1.2rem;max-width:480px;
}
.acc-list li{
  display:flex;align-items:flex-start;gap:0.6rem;
  font-size:0.88rem;font-weight:600;
  color:#222;padding:0.3rem 0;
}
.acc-list .tri{color:var(--red);font-size:0.55rem;margin-top:0.35em;flex-shrink:0;}

.acc-images{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;
}
.acc-img{
  aspect-ratio:4/3;
  background:#0d0d0d;
  overflow:hidden;
  border:1px solid #1c1c1c;
}
.acc-img img,.acc-img svg{width:100%;height:100%;display:block;}
/* remove old placeholder style */
.acc-img.ph{
  display:flex;align-items:center;justify-content:center;
  font-size:0.6rem;letter-spacing:0.2em;color:#333;
  font-weight:700;text-transform:uppercase;
}

/* ════════════════════════════════════════
   STATS
════════════════════════════════════════ */
#stats{
  background:var(--grey);
  padding:80px 4%;
}
.stats-top-text{
  max-width:700px;margin-left:auto;
  font-size:clamp(0.95rem,1.6vw,1.1rem);
  line-height:1.65;color:#444;
  margin-bottom:4rem;
  text-align:right;
}
.stats-top-text strong{font-weight:700;color:#000;}

.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1.5px solid #ccc;
}
.stat-item{
  padding:2.5rem 2rem;
  border-right:1.5px solid #ccc;
  transition:background 0.3s;
}
.stat-item:last-child{border-right:none;}
.stat-item:hover{background:#eaeae8;}

.stat-num{
  font-size:clamp(2.8rem,5vw,4.5rem);
  font-weight:800;letter-spacing:-0.02em;
  color:#000;line-height:1;
  display:flex;align-items:flex-start;gap:0.05em;
  margin-bottom:0.6rem;
}
.stat-arrow{
  font-size:0.35em;color:var(--red);
  margin-top:0.3em;
}
.stat-label{
  font-size:0.62rem;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;
  color:#888;
}

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
#footer{
  background:#000;
  border-top:1.5px solid #1a1a1a;
  /* iPhone home bar — rellena el espacio con negro */
  padding-bottom:env(safe-area-inset-bottom, 0px);
}

.footer-cta{
  display:flex;align-items:center;justify-content:space-between;
  padding:4rem 4%;
  border-bottom:1.5px solid #1a1a1a;
  transition:background 0.4s var(--ease);
  cursor:pointer;
  text-decoration:none;
}
.footer-cta:hover{background:#0d0d0d;}
.footer-cta:hover .footer-cta-text{color:var(--red);}
.footer-cta-text{
  font-size:clamp(2.5rem,7vw,7rem);
  font-weight:900;letter-spacing:-0.02em;
  text-transform:uppercase;color:#fff;
  line-height:1;
  transition:color 0.4s var(--ease);
}
.footer-cta-arrow{
  font-size:clamp(2rem,5vw,5rem);
  color:var(--red);font-weight:300;
  transition:transform 0.4s var(--ease);
  flex-shrink:0;
}
.footer-cta:hover .footer-cta-arrow{transform:translateX(18px);}

.footer-body{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:1.5px solid #1a1a1a;
}
.footer-col{
  padding:3rem 4%;
  border-right:1.5px solid #1a1a1a;
}
.footer-col:last-child{border-right:none;}

.footer-col-label{
  display:flex;align-items:center;gap:0.5rem;
  font-size:0.62rem;font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(255,255,255,0.25);
  margin-bottom:1.8rem;
}
.footer-col-label .tri{color:var(--red);font-size:0.6rem;}

.footer-col a,.footer-col span{
  display:block;
  font-size:1rem;font-weight:600;
  color:rgba(255,255,255,0.7);
  line-height:1;
  padding:0.4rem 0;
  transition:color 0.2s;
}
.footer-col a:hover{color:#fff;}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.4rem 4%;flex-wrap:wrap;gap:0.8rem;
}
.footer-bottom span,.footer-bottom a{
  font-size:0.62rem;letter-spacing:0.12em;
  color:rgba(255,255,255,0.2);
  text-transform:uppercase;
}
.footer-bottom a:hover{color:rgba(255,255,255,0.6);}
.footer-bottom-links{display:flex;gap:2rem;}

/* ════════════════════════════════════════
   PREMIUM ANIMATION STATES
════════════════════════════════════════ */
/* GSAP handles all animations — no CSS opacity:0 fallbacks */

/* Cursor follower — own compositing layer for sub-frame smooth tracking */
#cursor-follower{
  position:fixed;
  width:12px;height:12px;
  border-radius:50%;
  background:var(--red);
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%) translateZ(0);
  mix-blend-mode:difference;
  transition:width 0.3s,height 0.3s,opacity 0.3s;
  opacity:0;
  will-change:transform;
}
#cursor-ring{
  position:fixed;
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid rgba(232,64,10,0.5);
  pointer-events:none;
  z-index:9998;
  transform:translate(-50%,-50%) translateZ(0);
  opacity:0;
  transition:opacity 0.3s;
  will-change:transform;
}

/* Page load overlay */
#page-loader{
  position:fixed;inset:0;
  background:#000;
  z-index:10000;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.loader-logo{
  font-family:'Figtree',sans-serif;
  font-weight:900;
  font-size:clamp(3rem,10vw,8rem);
  color:#fff;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  overflow:hidden;
}
.loader-bar{
  position:absolute;bottom:0;left:0;
  height:3px;background:var(--red);
  width:0%;
}

/* Horizontal scroll marquee for works section header */
.works-marquee-wrap{
  overflow:hidden;
  margin-bottom:3rem;
}
.works-marquee{
  display:flex;gap:4rem;
  white-space:nowrap;
  will-change:transform;
}
.works-marquee-item{
  font-size:0.72rem;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  flex-shrink:0;
}
.works-marquee-item .tri{color:var(--red);}

/* Work card stagger animations */
.work-card{
  /* will-change applied by GSAP before animation */
}

/* Stat number count-up animation */
.stat-num{
  font-size:clamp(2.8rem,5vw,4.5rem);
  font-weight:800;letter-spacing:-0.02em;
  color:#000;line-height:1;
  display:flex;align-items:flex-start;gap:0.05em;
  margin-bottom:0.6rem;
}
.stat-count{
  display:inline-block;
}

/* Horizontal line wipe effect */
.line-wipe{
  display:block;
  overflow:hidden;
}
.line-wipe-inner{
  display:block;
  transform:translateY(110%);
  will-change:transform;
}

/* Services section animate-in */
.acc-item{
  /* will-change applied by GSAP before animation */
}

/* About section */
.about-para{
  /* will-change applied by GSAP before animation */
}
.about-list li{
  /* will-change applied by GSAP before animation */
}

/* Magnetic buttons */
.magnetic{
  display:inline-block;
  transition:transform 0.3s cubic-bezier(0.23,1,0.32,1);
}

/* Header right group — hamburger + lang together */
.header-right{
  display:flex;align-items:center;gap:0.6rem;
  flex-shrink:0;
}

/* Language Switcher */
.lang-switcher{
  position:relative;
  flex-shrink:0;
  margin-left:0.6rem;
}
.lang-btn{
  display:flex;align-items:center;gap:0.3rem;
  background:none;border:none;
  cursor:pointer;padding:4px 2px;
  font-family:'Figtree',sans-serif;
  font-size:0.7rem;font-weight:700;
  letter-spacing:0.12em;
  color:#fff;
  transition:opacity 0.2s;
}
.lang-btn:hover{opacity:0.7;}
.lang-flag{display:none;} /* hidden — siglas only */
.lang-code{font-size:0.7rem;font-weight:700;letter-spacing:0.12em;}
.lang-chevron{
  font-size:0.5rem;
  transition:transform 0.25s;
  opacity:0.6;
}
.lang-switcher.open .lang-chevron{transform:rotate(180deg);}

/* On light bg (scrolled header) */
.lang-switcher.on-light .lang-btn{color:#000;}

.lang-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  background:#fff;
  border:1.5px solid #000;
  min-width:160px;
  display:none;
  z-index:2000;
  box-shadow:3px 3px 0 rgba(0,0,0,0.15);
  overflow:hidden;
}
.lang-switcher.open .lang-dropdown{display:block;}
.lang-opt{
  display:flex;align-items:center;gap:0.7rem;
  width:100%;
  background:none;border:none;border-bottom:1px solid #eee;
  font-family:'Figtree',sans-serif;
  font-size:0.72rem;font-weight:600;
  letter-spacing:0.05em;
  text-align:left;
  padding:0.6rem 1rem;
  cursor:pointer;
  color:#000;
  transition:background 0.15s;
}
.lang-opt:last-child{border-bottom:none;}
.lang-opt:hover{background:#f5f5f5;}
.lang-opt.active{color:var(--red);font-weight:700;}
.lang-opt-flag{font-size:1.1rem;}
.lang-opt-name{flex:1;}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media(max-width:1200px){
  .nav-center{display:none;}
  .works-grid{grid-template-columns:1fr 1fr;}
  .work-card.featured{grid-row:auto;}
  .work-card.featured .work-img{min-height:unset;}
  .about-top{grid-template-columns:1fr;}
  .about-img-thumb{display:none;}
  .about-body{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stat-item:nth-child(2){border-right:none;}
  .stat-item:nth-child(3){border-top:1.5px solid #ccc;}
  .acc-body{padding-left:0;}
  .acc-inner{grid-template-columns:1fr;}
  .acc-header{grid-template-columns:80px 1fr 40px;}
}
@media(max-width:640px){
  .works-grid{grid-template-columns:1fr;}
  .footer-body{grid-template-columns:1fr;}
  .footer-col{border-right:none;border-bottom:1.5px solid #222;padding:2rem 4%;}
  .footer-col:last-child{border-bottom:none;}
  .about-heading{font-size:clamp(3rem,15vw,6rem);}
  .acc-num{font-size:0.8rem;}
  .acc-images{grid-template-columns:1fr;}
  .header-inner{padding:0 4%;}
}

/* ════════════════════════════════════════
   HERO CAROUSEL
════════════════════════════════════════ */
.hero-slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.2s ease-in-out;
  transform:translateZ(0);
  will-change:opacity;
  overflow:hidden;
}
.hero-slide picture{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}
.hero-slide img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  opacity:0.65;
}
.hero-slide-active{
  opacity:1;
}

/* Carousel dots — removed */