/* ════════════════════════════════════════════════════════════
   SEBASTIÁN SARMIENTO — Portfolio Audiovisual
   css/styles.css — Complete production stylesheet
   ════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────── */
:root {
  --bg:          #080808;
  --bg2:         #0e0e0e;
  --surface:     #131313;
  --border:      rgba(255,255,255,0.07);
  --border-h:    rgba(255,255,255,0.15);
  --text:        #ededed;
  --text-m:      #6b6b6b;
  --text-s:      #444;
  --red:         #E63946;
  --red-d:       #c62b38;
  --red-a:       rgba(230,57,70,0.12);
  --white:       #ffffff;
  --font-disp:   'Bebas Neue', sans-serif;
  --font-body:   'DM Sans', sans-serif;
  --ease:        cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-b:      cubic-bezier(0.34,1.56,0.64,1);
  --ease-c:      cubic-bezier(0.76,0,0.24,1);
  --nav-h:       68px;
  --gap:         clamp(1.5rem,4vw,4rem);
  --max:         1440px;
}

/* ── RESET ──────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-weight:300;line-height:1.65;cursor:none;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{background:none;border:none;cursor:none;font-family:inherit;color:inherit}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--red);border-radius:2px}

/* ── PRELOADER ──────────────────────────────── */
#preloader{
  position:fixed;inset:0;z-index:9999;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s var(--ease-c),visibility .8s;
}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.pre__wrap{display:flex;flex-direction:column;align-items:center;gap:1.2rem;width:180px}
.pre__name{font-family:var(--font-disp);font-size:2.5rem;letter-spacing:.15em;color:var(--text)}
.pre__bar{width:100%;height:1px;background:var(--border);overflow:hidden;position:relative}
.pre__fill{position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--red);animation:fill-bar 1.6s var(--ease-c) forwards}
@keyframes fill-bar{to{left:0}}
.pre__label{font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-m)}

/* ── CURSOR ─────────────────────────────────── */
#cursor{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;mix-blend-mode:difference}
.cur__dot{position:absolute;width:5px;height:5px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);transition:transform .15s var(--ease)}
.cur__ring{position:absolute;width:32px;height:32px;border:1px solid rgba(255,255,255,.5);border-radius:50%;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),border-color .3s}
body.c-hover .cur__dot{transform:translate(-50%,-50%) scale(3)}
body.c-hover .cur__ring{width:56px;height:56px;border-color:var(--red);opacity:.5}
@media(hover:none){#cursor{display:none}body,button,a{cursor:auto}}

/* ── NAVBAR ─────────────────────────────────── */
#navbar{
  position:fixed;top:0;left:0;width:100%;height:var(--nav-h);z-index:1000;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
#navbar.scrolled{
  background:rgba(8,8,8,.9);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
}
.nav__inner{
  max-width:var(--max);margin:0 auto;
  padding:0 var(--gap);height:100%;
  display:flex;align-items:center;justify-content:space-between;
}
.nav__logo{display:flex;flex-direction:column;line-height:1.1;transition:opacity .2s}
.nav__logo:hover{opacity:.6}
.nav__logo-top{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-m)}
.nav__logo-bot{font-family:var(--font-disp);font-size:1rem;letter-spacing:.1em}
.nav__links{display:flex;align-items:center;gap:clamp(1.5rem,3vw,2.5rem)}
.nav__link{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-m);
  position:relative;transition:color .2s;
}
.nav__link::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--red);transition:width .4s var(--ease-c)}
.nav__link:hover,.nav__link.active{color:var(--text)}
.nav__link:hover::after,.nav__link.active::after{width:100%}
.nav__link--cta{
  color:var(--text);border:1px solid var(--border);
  padding:.5em 1.3em;border-radius:2px;
  transition:border-color .2s,background .2s,color .2s;
}
.nav__link--cta::after{display:none}
.nav__link--cta:hover{border-color:var(--red);background:var(--red-a);color:#fff}
.nav__burger{display:none;flex-direction:column;gap:6px;width:26px;padding:4px 0;z-index:1001}
.nav__burger span{display:block;width:100%;height:1px;background:var(--text);transition:transform .4s var(--ease-c),opacity .3s,width .4s var(--ease-c);transform-origin:center}
.nav__burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.open span:nth-child(2){transform:translateY(-7px) rotate(-45deg)}

/* ── MOBILE MENU ────────────────────────────── */
.mob{
  position:fixed;inset:0;z-index:999;
  background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--gap);
  opacity:0;visibility:hidden;
  clip-path:inset(0 0 100% 0);
  transition:opacity .7s var(--ease-c),visibility .7s,clip-path .7s var(--ease-c);
}
.mob.open{opacity:1;visibility:visible;clip-path:inset(0)}
.mob__list{display:flex;flex-direction:column;gap:.3rem}
.mob__link{
  font-family:var(--font-disp);font-size:clamp(3rem,10vw,5rem);
  letter-spacing:.03em;color:var(--text-m);
  display:inline-flex;align-items:center;gap:1rem;
  opacity:0;transform:translateY(24px);
  transition:color .3s,opacity .6s var(--ease-c),transform .6s var(--ease-c);
}
.mob__link::before{content:attr(data-n);font-family:var(--font-body);font-size:.65rem;letter-spacing:.2em;color:var(--red);transform:translateY(-.3em)}
.mob.open .mob__link{opacity:1;transform:translateY(0)}
.mob.open .mob__link:nth-child(1){transition-delay:.08s}
.mob.open .mob__link:nth-child(2){transition-delay:.15s}
.mob.open .mob__link:nth-child(3){transition-delay:.22s}
.mob.open .mob__link:nth-child(4){transition-delay:.29s}
.mob__link:hover{color:var(--text)}
.mob__foot{position:absolute;bottom:var(--gap);left:var(--gap);display:flex;gap:2rem}
.mob__foot a{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-m);transition:color .2s}
.mob__foot a:hover{color:var(--red)}

/* ── UTILITIES ──────────────────────────────── */
.container{max-width:var(--max);margin:0 auto;padding:0 var(--gap)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--red);
  margin-bottom:1.2rem;
}
.eyebrow::before{content:'';display:block;width:20px;height:1px;background:var(--red)}
.reveal{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease-c),transform 1s var(--ease-c)}
.reveal.vis{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.32s}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.9em 2em;border-radius:2px;transition:all .3s var(--ease-c);
}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-d);gap:1rem}
.btn--red svg{transition:transform .3s var(--ease-b)}
.btn--red:hover svg{transform:translateY(3px)}
.btn--ghost{border:1px solid var(--border);color:var(--text-m)}
.btn--ghost:hover{border-color:var(--border-h);color:var(--text)}
.link-arrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-m);border-bottom:1px solid var(--border);padding-bottom:.25em;
  transition:color .3s,border-color .3s,gap .3s var(--ease-b);
}
.link-arrow:hover{color:var(--text);border-color:var(--red);gap:1.2rem}
.sep{display:inline-block;width:20px;height:1px;background:var(--red);opacity:.5;margin:0 .5rem}

/* ── HERO ───────────────────────────────────── */
.hero{
  position:relative;width:100%;height:100svh;min-height:600px;
  display:flex;align-items:flex-end;overflow:hidden;
}
.hero__bg{position:absolute;inset:0}
.hero__vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  image-rendering:auto;
  filter:contrast(1.05) saturate(1.1);
}
.hero__grad{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,8,.97) 0%,rgba(8,8,8,.6) 35%,rgba(8,8,8,.2) 65%,transparent 100%);
}
.hero__vign{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(8,8,8,.6) 100%);
}
.hero__grain{
  position:absolute;inset:0;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
  animation:grain .7s steps(2) infinite;
}
@keyframes grain{
  0%{background-position:0 0}25%{background-position:-12px 18px}
  50%{background-position:25px -8px}75%{background-position:-18px -22px}100%{background-position:12px 8px}
}
.hero__body{
  position:relative;z-index:10;width:100%;max-width:var(--max);
  margin:0 auto;padding:0 var(--gap) clamp(4rem,8vh,6.5rem);
}
.hero__eyebrow{
  display:flex;align-items:center;gap:.6rem;
  font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;color:var(--text-m);
  margin-bottom:1rem;
  opacity:0;transform:translateY(10px);
  animation:h-in .8s var(--ease-c) 1.8s forwards;
}
.hero__dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);
  animation:pulse 2s ease-in-out 2.5s infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.6)}}
.hero__name{
  font-family:var(--font-disp);line-height:.88;
  font-size:clamp(4.5rem,13vw,14rem);
  letter-spacing:.02em;margin-bottom:1.5rem;
}
.hero__name-l1{
  display:block;color:var(--text);
  opacity:0;transform:translateY(50px) skewY(1.5deg);
  animation:h-slide 1s var(--ease-c) 1.9s forwards;
}
.hero__name-l2{
  display:block;color:var(--red);
  opacity:0;transform:translateY(50px) skewY(1.5deg);
  animation:h-slide 1s var(--ease-c) 2.05s forwards;
}
@keyframes h-slide{to{opacity:1;transform:translateY(0) skewY(0)}}
@keyframes h-in{to{opacity:1;transform:translateY(0)}}
.hero__roles{
  display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;
  font-size:clamp(.65rem,1vw,.82rem);letter-spacing:.22em;text-transform:uppercase;color:var(--text-m);
  margin-bottom:2.5rem;
  opacity:0;animation:h-in .8s var(--ease-c) 2.3s forwards;
}
.hero__ctas{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  opacity:0;animation:h-in .8s var(--ease-c) 2.5s forwards;
}
.hero__scroll{
  position:absolute;bottom:clamp(1.5rem,4vh,3rem);right:var(--gap);
  z-index:10;display:flex;flex-direction:column;align-items:center;gap:.7rem;
  opacity:0;animation:h-in .8s var(--ease-c) 3s forwards;
}
.hero__scroll-line{
  width:1px;height:44px;
  background:linear-gradient(to bottom,var(--red),transparent);
  animation:scroll-line 1.8s ease-in-out 3.2s infinite;
}
@keyframes scroll-line{
  0%{transform:scaleY(0);transform-origin:top;opacity:0}
  20%{transform:scaleY(1);transform-origin:top;opacity:1}
  80%{transform:scaleY(1);transform-origin:bottom;opacity:1}
  100%{transform:scaleY(0);transform-origin:bottom;opacity:0}
}
.hero__scroll span{writing-mode:vertical-rl;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-m)}
.hero__num{
  position:absolute;bottom:clamp(1.5rem,4vh,3rem);left:var(--gap);
  font-family:var(--font-disp);font-size:6rem;color:rgba(255,255,255,.025);
  line-height:1;pointer-events:none;user-select:none;z-index:10;
}

/* ── WORK ───────────────────────────────────── */
.work{padding:clamp(5rem,10vw,10rem) 0;position:relative}
.work::before{
  content:'';position:absolute;top:0;left:var(--gap);
  width:1px;height:100%;
  background:linear-gradient(to bottom,transparent,var(--border) 15%,var(--border) 85%,transparent);
  pointer-events:none;
}
.work__head{display:flex;flex-direction:column;margin-bottom:clamp(2.5rem,5vw,4rem)}
.work__heading{
  font-family:var(--font-disp);
  font-size:clamp(3rem,7vw,7rem);
  line-height:.9;letter-spacing:.02em;
  margin-bottom:2rem;
}
.work__filters{display:flex;flex-wrap:wrap;gap:.4rem}
.pill{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-m);
  padding:.52em 1.3em;border:1px solid transparent;border-radius:100px;
  transition:color .2s,border-color .3s,background .3s;
  cursor:none;
}
.pill:hover{color:var(--text);border-color:var(--border)}
.pill.is-on{color:#fff;border-color:var(--red);background:var(--red-a)}

/* ── WORK GRID ──────────────────────────────── */
.work__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:auto;
  gap:clamp(.7rem,1.2vw,1.2rem);
}

/*
  Layout system:
  card--featured  → 12 cols, 16:9 landscape
  card--land      → landscape cards
    card--wide    → 7 cols
    card--narrow  → 5 cols
  card--port      → portrait cards (9:16)
    card--half    → 6 cols
    card--third   → 4 cols
*/
.card--featured { grid-column: span 12 }
.card--wide     { grid-column: span 7 }
.card--narrow   { grid-column: span 5 }
.card--half     { grid-column: span 6 }
.card--third    { grid-column: span 4 }

/* ── CARD ───────────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:3px;
  overflow:hidden;
  transition:border-color .4s var(--ease-c),transform .5s var(--ease-c),box-shadow .4s;
}
.card:hover{border-color:var(--border-h);transform:translateY(-5px);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.card.is-hidden{display:none}
.card__wrap{
  display:flex;flex-direction:column;width:100%;height:100%;
  text-align:left;
  transition:opacity .3s;
}
.card__wrap:focus-visible{outline:2px solid var(--red);outline-offset:4px}

/* ── CARD MEDIA ────────────────────────────── */
.card__media{
  position:relative;overflow:hidden;
  background:#0a0a0a;flex-shrink:0;
}

/* Landscape aspect ratios */
.card--featured .card__media{ aspect-ratio:16/7 }
.card--land .card__media     { aspect-ratio:16/9 }

/* Portrait aspect ratio — 9:16 properly */
.card--port .card__media{
  aspect-ratio:9/16;
  max-height:70vh;        /* cap height on large screens */
}

.card__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;
  transition:transform 1.2s var(--ease-c),opacity .4s var(--ease-c);
  image-rendering:auto;
}
.card:hover .card__img{transform:scale(1.04)}

.card__vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;
  opacity:0;z-index:1;
  transition:opacity .5s var(--ease-c);
}
.card.vid-ready:hover .card__vid{opacity:1}
.card.vid-ready:hover .card__img{opacity:.15;transform:scale(1.02)}

.card__overlay{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(8,8,8,.92) 0%,rgba(8,8,8,.25) 45%,transparent 70%);
  transition:opacity .4s;
}
.card:hover .card__overlay{opacity:.75}

.card__play{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.75);
  z-index:4;
  width:52px;height:52px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  background:rgba(230,57,70,.18);
  backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity .3s var(--ease-c),transform .35s var(--ease-b),border-color .3s;
}
.card__play svg{margin-left:3px}
.card:hover .card__play{opacity:1;transform:translate(-50%,-50%) scale(1);border-color:var(--red)}

.card__badge{
  position:absolute;top:1rem;right:1rem;z-index:5;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:rgba(230,57,70,.88);
  backdrop-filter:blur(4px);padding:.32em .85em;border-radius:2px;
}

/* ── CARD INFO ─────────────────────────────── */
.card__info{
  padding:clamp(1rem,1.8vw,1.6rem);
  display:flex;flex-direction:column;gap:.35rem;flex:1;
}
.card__meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:.2rem}
.card__n{font-family:var(--font-disp);font-size:.7rem;letter-spacing:.2em;color:var(--red)}
.card__yr{font-size:.65rem;letter-spacing:.15em;color:var(--text-m)}
.card__title{
  font-family:var(--font-disp);
  font-size:clamp(1.2rem,2vw,1.7rem);
  letter-spacing:.03em;line-height:1;color:var(--text);
  transition:color .2s;
}
.card--featured .card__title{font-size:clamp(1.6rem,3vw,2.6rem)}
.card:hover .card__title{color:#fff}
.card__desc{font-size:.78rem;color:var(--text-m);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__cta{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);
  margin-top:.4rem;
  opacity:0;transform:translateX(-6px);
  transition:opacity .3s var(--ease-c),transform .3s var(--ease-c);
}
.card:hover .card__cta{opacity:1;transform:translateX(0)}

/* ── WORK FOOTER ───────────────────────────── */
.work__foot{margin-top:clamp(2.5rem,5vw,4.5rem);display:flex;justify-content:center}

/* ── ABOUT ──────────────────────────────────── */
.about{padding:clamp(5rem,10vw,10rem) 0;background:var(--bg2);border-top:1px solid var(--border)}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,7rem);align-items:start}
.about__heading{
  font-family:var(--font-disp);
  font-size:clamp(2.8rem,5vw,5.5rem);
  line-height:.92;letter-spacing:.02em;
  margin-bottom:2.5rem;
}
.about__heading em{color:var(--red);font-style:normal}
.about__stats{display:flex;gap:2.5rem;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:.3rem}
.stat__n{font-family:var(--font-disp);font-size:3rem;letter-spacing:.04em;color:var(--text);line-height:1}
.stat__l{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-m);line-height:1.4}
.about__bio{font-size:.92rem;color:var(--text-m);line-height:1.8;margin-bottom:1.2rem}
.about__tools{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.tool-tag{
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-m);border:1px solid var(--border);
  padding:.38em .9em;border-radius:100px;
  transition:border-color .2s,color .2s;
}
.tool-tag:hover{border-color:var(--red);color:var(--text)}
.about__cta{margin-top:.5rem}

/* ── SERVICES ───────────────────────────────── */
.services{padding:clamp(5rem,10vw,10rem) 0;position:relative}
.services__heading{
  font-family:var(--font-disp);
  font-size:clamp(2.8rem,5vw,5.5rem);
  letter-spacing:.02em;line-height:.9;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.services__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--border);
  border:1px solid var(--border);
}
.svc{
  padding:clamp(2rem,3.5vw,3rem);
  background:var(--bg);
  transition:background .3s var(--ease-c);
}
.svc:hover{background:var(--surface)}
.svc__icon{width:36px;height:36px;color:var(--red);margin-bottom:1.5rem;opacity:.8}
.svc__title{font-family:var(--font-disp);font-size:clamp(1.4rem,2vw,1.9rem);letter-spacing:.04em;margin-bottom:.8rem}
.svc__desc{font-size:.84rem;color:var(--text-m);line-height:1.7;margin-bottom:1.2rem}
.svc__list{display:flex;flex-direction:column;gap:.35rem}
.svc__list li{font-size:.76rem;letter-spacing:.06em;color:var(--text-s);padding-left:1rem;position:relative}
.svc__list li::before{content:'—';position:absolute;left:0;color:var(--red);font-size:.7rem}

/* ── CONTACT ────────────────────────────────── */
.contact{
  padding:clamp(5rem,10vw,10rem) 0 clamp(3rem,6vw,6rem);
  background:var(--bg2);border-top:1px solid var(--border);
  position:relative;overflow:hidden;
}
.contact__inner{position:relative;z-index:2}
.contact__heading{
  font-family:var(--font-disp);
  font-size:clamp(3.5rem,8vw,9rem);
  line-height:.88;letter-spacing:.02em;
  margin-bottom:1.5rem;
}
.contact__heading em{color:var(--red);font-style:normal}
.contact__sub{font-size:.9rem;color:var(--text-m);max-width:44ch;margin-bottom:3rem;line-height:1.7}
.contact__links{display:flex;flex-direction:column;gap:0;margin-bottom:3rem;border-top:1px solid var(--border)}
.contact__link{
  display:flex;align-items:center;gap:1.5rem;
  padding:1.4rem 0;border-bottom:1px solid var(--border);
  transition:background .3s,padding-left .4s var(--ease-c);
  cursor:none;
}
.contact__link:hover{padding-left:.8rem}
.contact__link-label{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-s);width:70px;flex-shrink:0}
.contact__link-val{font-size:clamp(.85rem,1.5vw,1.1rem);color:var(--text);flex:1;transition:color .2s}
.contact__link:hover .contact__link-val{color:#fff}
.contact__link-arr{font-size:1.2rem;color:var(--text-m);margin-left:auto;transition:transform .3s var(--ease-b),color .2s}
.contact__link:hover .contact__link-arr{transform:translate(3px,-3px);color:var(--red)}
.contact__link--main .contact__link-val{font-family:var(--font-disp);font-size:clamp(1.1rem,2.5vw,1.8rem);letter-spacing:.02em}
.contact__avail{
  display:flex;align-items:center;gap:.7rem;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-m);
}
.contact__avail-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;background:#22c55e;
  animation:pulse 2s ease-in-out infinite;
}
.contact__deco{
  position:absolute;bottom:-2rem;right:-2rem;
  font-family:var(--font-disp);
  font-size:clamp(5rem,15vw,18rem);
  color:rgba(255,255,255,.025);
  line-height:1;pointer-events:none;user-select:none;white-space:nowrap;
}

/* ── FOOTER ─────────────────────────────────── */
.footer{padding:2rem 0;border-top:1px solid var(--border)}
.footer__inner{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:1.5rem;
}
.footer__logo{display:flex;flex-direction:column;gap:.2rem;transition:opacity .2s}
.footer__logo:hover{opacity:.6}
.footer__logo span{font-size:.85rem;font-weight:400;color:var(--text)}
.footer__logo-sub{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-m)}
.footer__nav{display:flex;gap:2rem}
.footer__nav a{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-m);transition:color .2s}
.footer__nav a:hover{color:var(--text)}
.footer__copy{font-size:.68rem;letter-spacing:.06em;color:var(--text-s)}

/* ── LIGHTBOX ───────────────────────────────── */
.lb{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease-c),visibility .5s;
}
.lb.open{opacity:1;visibility:visible}
.lb__back{position:absolute;inset:0;background:rgba(4,4,4,.96);backdrop-filter:blur(10px);cursor:none}
.lb__panel{
  position:relative;z-index:1;
  width:min(90vw,1100px);
  background:var(--surface);border:1px solid var(--border);
  border-radius:4px;overflow:hidden;
  transform:translateY(20px) scale(.97);
  transition:transform .5s var(--ease-b);
}
.lb.open .lb__panel{transform:translateY(0) scale(1)}
.lb__close{
  position:absolute;top:1rem;right:1rem;z-index:10;
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-m);background:rgba(20,20,20,.8);
  transition:border-color .2s,color .2s,transform .3s var(--ease-b);
  cursor:none;
}
.lb__close:hover{border-color:var(--red);color:var(--red);transform:rotate(90deg)}
.lb__media{position:relative;background:#000}
.lb__vid{
  width:100%;display:block;
  max-height:78vh;object-fit:contain;
  background:#000;
}
.lb__meta{
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.5rem;border-top:1px solid var(--border);
}
.lb__badge{
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:var(--red);padding:.3em .8em;border-radius:2px;
}
.lb__title{font-family:var(--font-disp);font-size:1.1rem;letter-spacing:.04em}

/* ── RESPONSIVE ─────────────────────────────── */
@media(max-width:1024px){
  .about__grid{grid-template-columns:1fr}
  .card--wide{grid-column:span 8}
  .card--narrow{grid-column:span 4}
}

@media(max-width:768px){
  :root{--nav-h:60px}
  .nav__links{display:none}
  .nav__burger{display:flex}

  /* Work grid — portrait cards go 6 col (2 per row) on tablet */
  .card--featured,.card--land,.card--wide,.card--narrow{grid-column:span 12}
  .card--half{grid-column:span 6}
  .card--third{grid-column:span 6}

  /* Portrait media — aspect ratio stays 9:16 */
  .card--port .card__media{aspect-ratio:9/16;max-height:55vw}

  /* Always show play button on touch */
  .card__play{opacity:.7;transform:translate(-50%,-50%) scale(.85)}
  .card__cta{opacity:1;transform:translateX(0);color:var(--text-m)}

  /* Filters scroll horizontal */
  .work__filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:.5rem}
  .work__filters::-webkit-scrollbar{display:none}
  .pill{flex-shrink:0}

  .services__grid{grid-template-columns:1fr}
  .about__stats{gap:1.5rem}
  .footer__inner{flex-direction:column;align-items:flex-start}
  .hero__scroll{display:none}
  .hero__num{display:none}

  .contact__link{gap:1rem}
  .contact__link-label{width:55px}
}

@media(max-width:480px){
  .card--third{grid-column:span 12}
  .card--half{grid-column:span 12}
  .card--port .card__media{max-height:none;aspect-ratio:9/16}
  .work::before{display:none}
  .hero__roles{flex-direction:column;align-items:flex-start;gap:.3rem}
  .sep{display:none}
  .hero__ctas{flex-direction:column;align-items:stretch}
  .btn{justify-content:center;max-width:100%}
}