/* ═══════════════════════════════════════════
   FOURTH EYE — alternative studio site
   ═══════════════════════════════════════════ */
:root{
  --ink:#0c0b09;
  --ink-2:#161411;
  --bone:#f1ece3;
  --bone-dim:#a89f92;
  --acid:#ff4d00;
  --acid-soft:#ff6a2b;
  --font-display:'Anton',sans-serif;
  --font-body:'Space Grotesk',sans-serif;
  --font-serif:'Instrument Serif',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-body);
  overflow-x:hidden;
  cursor:none;
}
a{color:inherit;text-decoration:none;cursor:none}
img,video{display:block;max-width:100%}
::selection{background:var(--acid);color:var(--ink)}

/* ── grain ── */
.grain{
  position:fixed;inset:-100%;z-index:9000;pointer-events:none;opacity:.07;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}
  30%{transform:translate(3%,-12%)}50%{transform:translate(-8%,4%)}
  70%{transform:translate(6%,8%)}90%{transform:translate(-3%,6%)}
}

/* ── cursor ── */
.cursor,.cursor-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;mix-blend-mode:difference}
.cursor__dot{width:10px;height:10px;border-radius:50%;background:var(--bone);transform:translate(-50%,-50%)}
.cursor-ring{width:38px;height:38px;border:1.5px solid var(--bone);border-radius:50%;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s}
.cursor-ring.is-hover{width:70px;height:70px;background:rgba(241,236,227,.15)}
@media (hover:none){.cursor,.cursor-ring{display:none}body,a{cursor:auto}}

/* ── preloader ── */
.preloader{
  position:fixed;inset:0;z-index:10000;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:transform .8s cubic-bezier(.76,0,.24,1);
}
.preloader.is-done{transform:translateY(-101%)}
.preloader__inner{text-align:center;color:var(--acid)}
.preloader__eye{width:120px;animation:blink 1.6s ease-in-out infinite}
.preloader__text{font-family:var(--font-display);letter-spacing:.35em;margin-top:1rem;color:var(--bone)}
@keyframes blink{0%,42%,58%,100%{transform:scaleY(1)}50%{transform:scaleY(.06)}}

/* ── nav ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem 1.6rem;mix-blend-mode:difference;color:#fff;
}
.nav__logo{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-size:1.05rem;letter-spacing:.12em}
.nav__logo em{font-style:normal;font-size:.55em;vertical-align:super}
.nav__eye{width:34px}
.nav__links{display:flex;gap:1.6rem;align-items:center;font-size:.92rem;letter-spacing:.06em;font-weight:700}
.nav__links a{position:relative}
.nav__links a:not(.nav__cta)::after{
  content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:0;background:#fff;transition:width .3s;
}
.nav__links a:not(.nav__cta):hover::after{width:100%}
.nav__cta{border:1.5px solid #fff;border-radius:99px;padding:.45rem 1rem;transition:.3s}
.nav__cta:hover{background:#fff;color:#000}

/* ── hero ── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hero__video-wrap{position:absolute;inset:0;z-index:-1}
.hero__video{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(12,11,9,.55) 0%,rgba(12,11,9,.25) 45%,rgba(12,11,9,.92) 100%)}
.hero__content{padding:0 4vw;margin-top:6vh}
.hero__kicker{font-size:.95rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:1.2rem}
.hero__title{font-family:var(--font-display);font-size:clamp(4.5rem,17vw,15.5rem);line-height:.88;letter-spacing:.005em}
.hero__row{display:flex;align-items:center;gap:.06em;overflow:hidden}
.hero__row--offset{margin-left:.55em}
.hero-eye{width:.85em;flex:none;color:var(--acid);animation:blink 5.5s ease-in-out infinite}
.hero__word .char{display:inline-block;transform:translateY(110%)}
.hero__sub{display:flex;flex-wrap:wrap;gap:1rem 3rem;align-items:baseline;margin-top:2.2rem}
.hero__roles{letter-spacing:.05em;font-weight:500}
.hero__roles i{color:var(--acid);font-style:normal;padding:0 .25em}
.hero__tag{font-size:1.1rem;color:var(--bone-dim)}
.hero__tag em{font-family:var(--font-serif);font-style:italic;color:var(--acid-soft);font-size:1.15em}
.hero__bottom{
  position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  padding:1.2rem 4vw;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim);
}
.hero__arrow{display:inline-block;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ── brands marquee ── */
.brands{padding:5.5rem 0 5rem;border-top:1px dashed rgba(241,236,227,.25);border-bottom:1px dashed rgba(241,236,227,.25)}
.brands__label{padding:0 4vw;margin-bottom:2rem;font-family:var(--font-serif);font-style:italic;font-size:clamp(1.3rem,2.4vw,1.9rem);color:var(--bone-dim)}
.marquee{overflow:hidden;white-space:nowrap}
.marquee__track{display:inline-flex;align-items:center;gap:2.2rem;padding-right:2.2rem;will-change:transform}
/* left → right */
.marquee--ltr .marquee__track{animation:mq-ltr 24s linear infinite}
@keyframes mq-ltr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.marquee:hover .marquee__track{animation-play-state:paused}
.brand-chip{
  flex:none;background:var(--bone);border-radius:16px;
  padding:1rem 1.8rem;height:88px;display:flex;align-items:center;justify-content:center;
  transform:rotate(var(--tilt,0deg));transition:transform .3s;
  box-shadow:0 4px 0 rgba(255,77,0,.9);
}
.brand-chip:nth-child(odd){--tilt:-1.6deg}
.brand-chip:nth-child(even){--tilt:1.4deg}
.brand-chip:hover{transform:rotate(0) scale(1.06)}
.brand-chip img{height:52px;width:auto;max-width:170px;object-fit:contain}
.brand-chip--text{font-family:var(--font-display);color:var(--ink);font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase}

/* ── section head ── */
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem;
  padding:0 4vw;margin-bottom:3rem;
}
.section-head__title{
  font-family:var(--font-display);font-size:clamp(3.4rem,11vw,9.5rem);line-height:.9;
  -webkit-text-stroke:2px var(--bone);color:transparent;overflow:hidden;
}
.section-head__title .char{display:inline-block;transform:translateY(110%)}
.section-head__note{text-align:right;color:var(--bone-dim);font-size:.98rem;line-height:1.5}
.section-head__note em{font-family:var(--font-serif);font-style:italic;color:var(--acid-soft);font-size:1.12em}

/* ── reels ── */
.reels{padding:7rem 0 3.5rem}
.reels__row{
  display:flex;gap:1.4rem;overflow-x:auto;padding:0 4vw 1.5rem;
  scroll-snap-type:x proximity;scrollbar-width:none;
}
.reels__row::-webkit-scrollbar{display:none}
.reel{
  position:relative;flex:none;width:min(300px,72vw);aspect-ratio:9/16;
  border-radius:18px;overflow:hidden;scroll-snap-align:start;
  background:var(--ink-2);border:1px solid rgba(241,236,227,.14);
  transition:transform .35s;
}
.reel:hover{transform:translateY(-10px) rotate(-.6deg)}
.reel video{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.reel:hover video{transform:scale(1.04)}
.reel__meta{
  position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1.1rem 1rem;
  background:linear-gradient(0deg,rgba(12,11,9,.92),transparent);
}
.reel__meta h3{font-family:var(--font-display);font-size:1.15rem;letter-spacing:.03em}
.reel__meta span{font-size:.82rem;color:var(--bone-dim)}
.reel__num{
  position:absolute;top:.8rem;right:.9rem;font-family:var(--font-display);
  color:var(--bone);opacity:.85;font-size:.95rem;
  background:rgba(12,11,9,.55);border-radius:99px;padding:.2rem .6rem;
}
.reels__hint{text-align:center;color:var(--bone-dim);font-size:.85rem;letter-spacing:.25em;text-transform:uppercase}

/* ── ticker ── */
.ticker{
  background:var(--acid);color:var(--ink);overflow:hidden;white-space:nowrap;
  padding:.9rem 0;transform:rotate(-1.2deg) scale(1.02);margin:3.5rem 0;
}
.ticker__track{display:inline-flex;font-family:var(--font-display);font-size:1.3rem;letter-spacing:.08em;animation:mq-rtl 22s linear infinite}
@keyframes mq-rtl{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── photos ── */
.photos{padding:5.5rem 0 4rem}
.photos__grid{columns:3 320px;column-gap:1.3rem;padding:0 4vw}
.ph{
  break-inside:avoid;margin-bottom:1.3rem;position:relative;border-radius:14px;overflow:hidden;
  opacity:0;transform:translateY(40px);
}
.ph.is-in{opacity:1;transform:none;transition:opacity .7s,transform .7s cubic-bezier(.22,1,.36,1)}
.ph img{width:100%;transition:transform .6s cubic-bezier(.22,1,.36,1);filter:saturate(.96)}
.ph:hover img{transform:scale(1.05)}
.ph figcaption{
  position:absolute;left:.7rem;bottom:.7rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(12,11,9,.72);backdrop-filter:blur(4px);border-radius:99px;padding:.32rem .75rem;
  opacity:0;transform:translateY(8px);transition:.3s;
}
.ph:hover figcaption{opacity:1;transform:none}

/* ── about ── */
.about{padding:7rem 4vw;border-top:1px dashed rgba(241,236,227,.25)}
.about__grid{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:4rem;align-items:center;max-width:1300px;margin:0 auto}
.about__photo-wrap{position:relative}
.about__photo{border-radius:18px;transform:rotate(-2deg);border:1px solid rgba(241,236,227,.15)}
.about__sticker{
  position:absolute;top:-1.6rem;right:-1.2rem;background:var(--acid);color:var(--ink);
  font-family:var(--font-display);font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;
  padding:.85rem 1.1rem;border-radius:99px;transform:rotate(7deg);text-align:center;line-height:1.15;
}
.about__kicker{font-family:var(--font-serif);font-style:italic;color:var(--acid-soft);font-size:1.4rem;margin-bottom:.6rem}
.about__title{font-family:var(--font-display);font-size:clamp(2.6rem,6vw,5rem);line-height:.95;margin-bottom:1.4rem}
.about__title span{display:inline-block;overflow:hidden}
.about__title .char{display:inline-block;transform:translateY(110%)}
.about__bio{font-size:1.12rem;line-height:1.65;color:var(--bone-dim);max-width:56ch}
.about__bio strong{color:var(--bone)}
.about__bio em{font-family:var(--font-serif);font-style:italic;color:var(--bone)}
.about__stats{display:flex;flex-wrap:wrap;gap:2.4rem;list-style:none;margin:2.2rem 0}
.about__stats li{display:flex;flex-direction:column}
.stat__num,.stat__plus{font-family:var(--font-display);font-size:2.6rem;color:var(--acid);display:inline}
.about__stats li{flex-direction:row;align-items:baseline;gap:.15rem;flex-wrap:wrap}
.stat__label{width:100%;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim)}
.about__gear{border:1px dashed rgba(241,236,227,.3);border-radius:14px;padding:1.1rem 1.3rem;max-width:60ch}
.about__gear-label{font-family:var(--font-serif);font-style:italic;color:var(--acid-soft);margin-bottom:.35rem}
.about__gear p:last-child{color:var(--bone-dim);font-size:.95rem;line-height:1.6}

/* ── press feature ── */
.about__press{
  display:block;margin-top:1.4rem;max-width:60ch;
  background:var(--ink-2);border:1px solid rgba(241,236,227,.18);border-radius:14px;
  padding:1.2rem 1.4rem;transition:.3s;
}
.about__press:hover{border-color:var(--acid);transform:translateY(-3px) rotate(-.4deg)}
.about__press-label{
  display:inline-block;background:var(--acid);color:var(--ink);border-radius:99px;
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.32rem .8rem;margin-bottom:.7rem;
}
.about__press blockquote{
  font-family:var(--font-serif);font-style:italic;font-size:1.35rem;line-height:1.35;
  color:var(--bone);margin-bottom:.6rem;
}
.about__press-cta{font-size:.85rem;color:var(--bone-dim);letter-spacing:.08em;text-transform:uppercase}
.about__press:hover .about__press-cta{color:var(--acid-soft)}

/* ── services ── */
.services{padding:6.5rem 0}
.services__list{list-style:none;padding:0 4vw;max-width:1300px;margin:0 auto}
.service{
  display:grid;grid-template-columns:70px minmax(220px,320px) 1fr;gap:1.5rem;align-items:baseline;
  padding:1.6rem 0;border-bottom:1px solid rgba(241,236,227,.14);transition:padding-left .3s;
}
.service:first-child{border-top:1px solid rgba(241,236,227,.14)}
.service:hover{padding-left:1rem}
.service__idx{font-family:var(--font-serif);font-style:italic;color:var(--acid);font-size:1.2rem}
.service h3{font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:.02em}
.service p{color:var(--bone-dim);line-height:1.55}

/* ── cta ── */
.cta{padding:8rem 4vw 7rem;text-align:center;border-top:1px dashed rgba(241,236,227,.25)}
.cta__kicker{font-family:var(--font-serif);font-style:italic;font-size:1.5rem;color:var(--bone-dim);margin-bottom:1rem}
.cta__mail{
  display:inline-block;font-family:var(--font-display);
  font-size:clamp(3rem,11vw,9rem);line-height:.95;color:var(--bone);overflow:hidden;
  transition:color .3s;
}
.cta__mail:hover{color:var(--acid)}
.cta__mail .char{display:inline-block;transform:translateY(110%)}
.cta__form{max-width:640px;margin:3rem auto 0;text-align:left}
.cta__form-row{display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.cta__form input,.cta__form textarea{
  flex:1;min-width:200px;width:100%;background:var(--ink-2);color:var(--bone);
  border:1px solid rgba(241,236,227,.25);border-radius:12px;
  font-family:var(--font-body);font-size:1rem;padding:.95rem 1.1rem;
  transition:border-color .3s;resize:vertical;
}
.cta__form input:focus,.cta__form textarea:focus{outline:none;border-color:var(--acid)}
.cta__form input::placeholder,.cta__form textarea::placeholder{color:var(--bone-dim)}
.cta__form textarea{margin-bottom:1rem}
.cta__send{
  display:block;width:100%;background:var(--acid);color:var(--ink);border:none;border-radius:12px;
  font-family:var(--font-display);font-size:1.35rem;letter-spacing:.08em;text-transform:uppercase;
  padding:1rem;cursor:none;transition:.3s;
}
.cta__send:hover{background:var(--bone);transform:translateY(-3px)}
.cta__form-note{text-align:center;color:var(--bone-dim);font-size:.85rem;margin-top:.8rem;font-style:italic;font-family:var(--font-serif)}
.cta__row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.5rem}
.cta__pill{
  border:1.5px solid rgba(241,236,227,.4);border-radius:99px;padding:.8rem 1.5rem;
  font-size:.95rem;letter-spacing:.04em;transition:.3s;
}
.cta__pill:hover{background:var(--bone);color:var(--ink);transform:translateY(-3px)}

/* ── footer ── */
.footer{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  padding:1.4rem 4vw;font-size:.82rem;color:var(--bone-dim);letter-spacing:.06em;
  border-top:1px solid rgba(241,236,227,.12);
}

/* ── lightbox ── */
.lightbox{
  position:fixed;inset:0;z-index:9500;background:rgba(12,11,9,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .35s;
}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox__content img,.lightbox__content video{max-width:92vw;max-height:86vh;border-radius:12px}
.lightbox__close{
  position:absolute;top:1.2rem;right:1.6rem;background:none;border:1.5px solid var(--bone);
  color:var(--bone);border-radius:50%;width:52px;height:52px;font-size:1.2rem;cursor:none;
  transition:.3s;
}
.lightbox__close:hover{background:var(--bone);color:var(--ink);transform:rotate(90deg)}

/* ── reveal helpers ── */
.reveal-line span{display:inline-block;transform:translateY(120%);opacity:0}

/* ── responsive ── */
@media (max-width:760px){
  .nav__links a:not(.nav__cta){display:none}
  .hero__row--offset{margin-left:.2em}
  .section-head__note{text-align:left}
  .about__grid{grid-template-columns:1fr;gap:3rem}
  .about__photo{max-width:340px;margin:0 auto}
  .service{grid-template-columns:44px 1fr;grid-template-rows:auto auto}
  .service p{grid-column:2}
  .photos__grid{columns:2 160px}
}