/* ============================================
   Another Media — Creative Agency
   Tokens · Layout · Components · Responsive
   ============================================ */

:root{
  --bg: #0b0b0c;
  --bg-2: #111113;
  --fg: #f3f1ec;
  --fg-dim: #a6a39c;
  --line: rgba(243,241,236,.12);
  --line-2: rgba(243,241,236,.22);
  --accent: #e7ff52;
  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  --pad-x: clamp(20px, 4vw, 64px);
  --maxw: 1440px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
::selection{background:var(--accent);color:#000}

/* ===== Loader ===== */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__bar{
  width:min(40vw,320px);height:1px;background:var(--line);position:relative;overflow:hidden;
}
.loader__bar::after{
  content:"";position:absolute;inset:0;background:var(--fg);
  transform-origin:left;animation:load 1.4s var(--ease) forwards;
}
.loader__name{
  font-family:var(--sans);font-size:11px;letter-spacing:.3em;color:var(--fg-dim);
}
@keyframes load{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}

/* ===== Custom cursor (desktop) ===== */
.cursor{
  position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;
  background:var(--fg);pointer-events:none;z-index:150;mix-blend-mode:difference;
  transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),background .25s;
  display:none;
}
.cursor.is-hover{width:54px;height:54px;background:var(--accent)}
@media (hover:hover) and (pointer:fine){ .cursor{display:block} body{cursor:none} a,button{cursor:none} }

/* ===== Nav ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad-x);
  transition:background .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(11,11,12,.7);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--line);
}
.nav__logo{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:500;letter-spacing:-.01em;
}
.nav__logo .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px var(--accent);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.7);opacity:.6}}
.nav__links{display:flex;gap:28px}
.nav__links a{font-size:13px;color:var(--fg-dim);transition:color .25s}
.nav__links a:hover{color:var(--fg)}
.nav__cta{
  font-size:13px;padding:10px 16px;border:1px solid var(--line-2);border-radius:999px;
  transition:background .3s,color .3s,border-color .3s;
}
.nav__cta:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.nav__burger{display:none;width:38px;height:38px;border:1px solid var(--line-2);border-radius:999px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav__burger span{display:block;width:14px;height:1px;background:var(--fg);transition:transform .3s var(--ease), opacity .3s}
.nav__burger.is-open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* Mobile menu */
.menu{
  position:fixed;inset:0;z-index:90;background:var(--bg);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:8px;padding:0 var(--pad-x);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.menu.is-open{opacity:1;visibility:visible}
.menu a{
  font-family:var(--serif);font-size:clamp(40px,9vw,72px);font-weight:400;line-height:1.05;letter-spacing:-.02em;
  transform:translateY(20px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.menu.is-open a{transform:translateY(0);opacity:1}
.menu.is-open a:nth-child(1){transition-delay:.05s}
.menu.is-open a:nth-child(2){transition-delay:.1s}
.menu.is-open a:nth-child(3){transition-delay:.15s}
.menu.is-open a:nth-child(4){transition-delay:.2s}
.menu.is-open a:nth-child(5){transition-delay:.25s}

@media (max-width: 860px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
}

/* ===== Reveal animation ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:translateY(0)}

/* ===== Typography helpers ===== */
.eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim);
  display:flex;align-items:center;gap:12px;margin:0 0 32px;
}
.eyebrow span{color:var(--fg)}
em{font-style:italic;font-family:var(--serif);font-weight:400}

/* ===== Section base ===== */
.section{
  padding:clamp(80px,12vw,160px) var(--pad-x);
  max-width:var(--maxw);margin:0 auto;
}
.section__head{margin-bottom:clamp(40px,6vw,72px)}
.section__head h2{
  font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(36px,6vw,72px);margin:0;
}
.big{
  font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(36px,5.4vw,76px);margin:0;
  max-width:18ch;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border:1px solid var(--line-2);border-radius:999px;
  font-size:14px;letter-spacing:.01em;
  transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease);
}
.btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg);transform:translateY(-2px)}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn.ghost{border-color:var(--line-2)}

/* ===== HERO ===== */
.hero{
  position:relative;min-height:100svh;
  padding:140px var(--pad-x) 60px;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:grayscale(30%) contrast(1.05) brightness(.7);
  transform:scale(1.04);
  animation:slowZoom 18s var(--ease) infinite alternate;
}
.hero__overlay{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(11,11,12,.55) 0%, rgba(11,11,12,.2) 35%, rgba(11,11,12,.85) 100%);
}
.hero__content{max-width:var(--maxw);margin:0 auto;width:100%}
.hero__title{
  font-family:var(--serif);font-weight:400;letter-spacing:-.025em;line-height:.98;
  font-size:clamp(52px,11vw,168px);
  margin:24px 0 48px;
}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line.reveal{transform:translateY(110%);opacity:1}
.hero__title .line.reveal.is-in{transform:translateY(0)}
.hero__title .line:nth-child(2){padding-left:clamp(40px,8vw,180px)}
.hero__title .line:nth-child(3){padding-left:clamp(20px,4vw,100px)}

.hero__meta{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;max-width:1100px}
.hero__meta p{max-width:42ch;color:var(--fg-dim);font-size:15px;margin:0}

.hero__bottom{
  position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:24px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim);
}
.ticker{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

/* ===== Marquee ===== */
.clients{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--bg-2)}
.marquee{padding:28px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{
  display:flex;gap:48px;width:max-content;
  font-family:var(--serif);font-size:clamp(24px,3vw,40px);font-weight:400;letter-spacing:-.01em;
  animation:scroll 45s linear infinite;color:var(--fg);
}
.marquee__track span{white-space:nowrap;opacity:.85}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== Intro ===== */
.intro h2{max-width:22ch}

/* ===== Work grid ===== */
.work__grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,40px);
}
.case{grid-column:span 6;display:flex;flex-direction:column;gap:20px}
.case:nth-child(3n+1){grid-column:span 7}
.case:nth-child(3n+2){grid-column:span 5}
.case:nth-child(3n+3){grid-column:span 12}
.case__media{
  position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:6px;background:var(--bg-2);
}
.case:nth-child(3n+3) .case__media{aspect-ratio:21/9}
.case__media img,.case__media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease), opacity .6s var(--ease);
}
.case__media video{opacity:0}
.case.is-playing .case__media img{transform:scale(1.05);opacity:0}
.case.is-playing .case__media video{opacity:1;transform:scale(1.02)}
.case:hover .case__media img{transform:scale(1.04)}
.case__meta{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.case__client{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim)}
.case h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(20px,2vw,28px);line-height:1.15;letter-spacing:-.01em;
  margin:6px 0 0;flex:1;
}
.case__tag{font-size:12px;color:var(--fg-dim);letter-spacing:.04em}

.work__more{margin-top:64px;text-align:center}

@media (max-width: 860px){
  .case,.case:nth-child(3n+1),.case:nth-child(3n+2),.case:nth-child(3n+3){grid-column:span 12}
  .case:nth-child(3n+3) .case__media{aspect-ratio:16/10}
}

/* ===== Services ===== */
.services__list{border-top:1px solid var(--line)}
.services__list li{
  display:grid;grid-template-columns:80px 1fr 1fr 1fr;gap:24px;align-items:start;
  padding:36px 0;border-bottom:1px solid var(--line);
  transition:padding .4s var(--ease), background .4s var(--ease);
  position:relative;
}
.services__list li:hover{padding-left:24px;padding-right:24px}
.services__list li::before{
  content:"";position:absolute;left:0;top:0;height:100%;width:0;background:var(--fg);
  transition:width .5s var(--ease);z-index:-1;
}
.services__list .num{font-size:12px;color:var(--fg-dim);letter-spacing:.2em}
.services__list h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,44px);
  line-height:1.05;letter-spacing:-.015em;margin:0;
}
.services__list p{margin:0;color:var(--fg-dim);max-width:38ch}
.services__list .tag{font-size:12px;color:var(--fg-dim);letter-spacing:.1em;text-align:right}
@media (max-width: 860px){
  .services__list li{grid-template-columns:1fr;gap:10px;padding:28px 0}
  .services__list .tag{text-align:left}
}

/* ===== Results ===== */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stat{background:var(--bg);padding:48px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.stat__num{
  font-family:var(--serif);font-weight:400;font-size:clamp(56px,7vw,108px);line-height:1;letter-spacing:-.03em;
}
.stat__sym{font-family:var(--serif);font-size:clamp(24px,3vw,40px);color:var(--accent);margin-top:-12px}
.stat p{color:var(--fg-dim);font-size:14px;margin:8px 0 0;max-width:30ch}
@media (max-width: 860px){.stats{grid-template-columns:1fr 1fr}}
@media (max-width: 520px){.stats{grid-template-columns:1fr}}

.quotes{
  margin-top:80px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
}
.quote{margin:0;padding:32px;border:1px solid var(--line);border-radius:6px;background:var(--bg-2)}
.quote blockquote{
  margin:0 0 24px;font-family:var(--serif);font-size:clamp(20px,1.6vw,24px);line-height:1.35;letter-spacing:-.005em;
}
.quote figcaption{font-size:12px;color:var(--fg-dim);letter-spacing:.04em}
@media (max-width: 860px){.quotes{grid-template-columns:1fr}}

/* ===== Studio ===== */
.studio__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
.studio__copy h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.4vw,56px);line-height:1.05;letter-spacing:-.02em;margin:0 0 24px}
.studio__copy p{color:var(--fg-dim);max-width:48ch;font-size:16px}
.studio__facts{margin-top:40px;border-top:1px solid var(--line)}
.studio__facts li{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;gap:16px}
.studio__facts span{color:var(--fg-dim)}
.studio__media{border-radius:6px;overflow:hidden;aspect-ratio:4/5;background:var(--bg-2)}
.studio__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.studio__media:hover img{transform:scale(1.04)}
@media (max-width: 860px){.studio__grid{grid-template-columns:1fr}}

/* ===== Contact ===== */
.contact{border-top:1px solid var(--line)}
.contact__link{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(28px,4vw,56px);margin-top:24px;color:var(--accent);transition:opacity .3s}
.contact__link:hover{opacity:.8}
.contact__grid{
  margin-top:80px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  border-top:1px solid var(--line);padding-top:48px;
}
.contact__grid h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim);margin:0 0 12px;font-weight:500}
.contact__grid p{margin:0;font-size:15px;line-height:1.7}
.contact__grid a:hover{color:var(--accent)}
@media (max-width: 860px){.contact__grid{grid-template-columns:1fr;gap:24px}}

/* ===== Footer ===== */
.footer{padding:60px var(--pad-x) 32px;border-top:1px solid var(--line)}
.footer__big{
  font-family:var(--serif);font-weight:400;letter-spacing:-.03em;line-height:.9;
  font-size:clamp(80px,18vw,260px);margin:0 0 48px;
}
.footer__bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  font-size:12px;color:var(--fg-dim);letter-spacing:.04em;
  border-top:1px solid var(--line);padding-top:24px;
}
.footer__bottom a:hover{color:var(--fg)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
  .reveal{opacity:1;transform:none}
}