:root {
  --bg: #080808;
  --fg: #f5f5f5;
  --muted: rgba(245,245,245,.47);
  --border: rgba(255,255,255,.12);
  --accent: #0057b8;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter Tight", Arial, sans-serif;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.muted { color: var(--muted); }
.glass {
  background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Navigation */
.navbar { position:fixed; inset:0 0 auto 0; z-index:50; }
.nav-inner { height:72px; padding:0 32px; display:flex; align-items:center; justify-content:space-between; transition:.5s ease; }
.navbar.scrolled .nav-inner { background:rgba(10,10,12,.55); backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); }
.nav-side { flex:1; display:flex; align-items:center; }
.nav-right { justify-content:flex-end; }
.micro-link, .contact-btn { min-height:44px; display:flex; align-items:center; font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; }
.micro-link { color:var(--muted); transition:.3s; }
.micro-link:hover { color:var(--fg); }
.navbar.scrolled .micro-link { opacity:0; pointer-events:none; }
.brand-wrap { flex:0 0 auto; display:flex; justify-content:center; }
.brand { width:160px; height:64px; display:flex; align-items:center; justify-content:center; perspective:600px; }
.brand img { width:100%; height:100%; object-fit:contain; mix-blend-mode:screen; transition:transform .5s ease, filter .5s ease; }
.brand:hover img { transform:rotateY(14deg) rotateX(-6deg) scale(1.08); filter:drop-shadow(0 8px 24px rgba(0,71,171,.55)); }
.contact-wrap { position:relative; }
.contact-btn { color:var(--fg); cursor:pointer; border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:10px 24px; background:linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); backdrop-filter:blur(24px) saturate(160%); }
.contact-btn:hover { border-color:rgba(255,255,255,.3); }
.contact-card { position:absolute; top:calc(100% + 12px); right:0; width:288px; padding:20px; border-radius:16px; background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); backdrop-filter:blur(32px) saturate(180%); border:1px solid rgba(255,255,255,.16); box-shadow:0 12px 40px rgba(0,0,0,.45); }
.contact-title { margin:0 0 12px; font-family:"Archivo Black", sans-serif; font-size:1.05rem; }
.contact-lines { display:grid; gap:7px; font-size:.72rem; }
.contact-lines p { margin:0; }
.contact-lines a:hover { color:#4f8cff; }
.contact-nip { padding-top:6px; }

/* Hero */
.hero { position:relative; width:100%; height:100svh; min-height:560px; overflow:hidden; background:#080808; }
.hero-slides, .hero-slide { position:absolute; inset:0; }
.hero-slide { opacity:0; transition:opacity 1.8s ease-in-out; }
.hero-slide.active { opacity:1; }
.hero-slide img { width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(8,8,8,.45), rgba(8,8,8,.15), rgba(8,8,8,.60)); }
.cinema-bar { position:absolute; left:0; right:0; height:7vh; min-height:34px; background:#000; z-index:3; }
.cinema-top { top:0; }
.cinema-bottom { bottom:0; }

/* Portfolio */
.portfolio { position:relative; scroll-margin-top:96px; padding:15vh 5vw; }
.portfolio-inner { max-width:1600px; margin:0 auto; }
.section { margin-bottom:80px; }
.section:last-child { margin-bottom:0; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:40px; }
.section-title { margin:0; font-family:"Archivo Black", sans-serif; font-size:clamp(1.8rem,5vw,3.5rem); line-height:.9; letter-spacing:-.01em; }
.section-subtitle, .subgroup-label, .card-subtitle { font-size:.68rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); }
.section-subtitle { text-align:right; }
.subgroup { margin-bottom:48px; }
.subgroup:last-child { margin-bottom:0; }
.subgroup-label { margin:0 0 16px; }
.grid { display:grid; }
.grid.portrait { grid-template-columns:repeat(5,minmax(0,1fr)); gap:40px 20px; }
.grid.landscape { grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px 24px; }
.card { padding:12px; border-radius:16px; transition:transform .5s ease, box-shadow .5s ease; }
.card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,.45); }
.media { position:relative; width:100%; overflow:hidden; border-radius:12px; background:rgba(255,255,255,.05); margin-bottom:16px; }
.media.portrait { aspect-ratio:9/16; }
.media.landscape { aspect-ratio:16/9; }
.media img, .media iframe, .media video { position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; }
.media button { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer; background:transparent; color:white; }
.thumb-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.25); transition:.3s; }
.media:hover .thumb-overlay { background:rgba(0,0,0,.10); }
.play { width:56px; height:56px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.16); }
.play::before { content:""; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:13px solid white; margin-left:3px; }
.card-meta { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:0 4px 4px; }
.card-title { margin:0; font-family:"Archivo Black", sans-serif; font-size:clamp(1rem,1.6vw,1.25rem); line-height:1.15; }
.card-subtitle { flex:0 0 auto; font-size:.62rem; }

/* Reveal */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity:1; transform:none; }

/* Footer */
.footer-card-wrap { padding:40px 32px 0; }
.footer-card { border-radius:24px; padding:10vh 6vw; display:grid; grid-template-columns:repeat(3,1fr); gap:40px 24px; }
.footer-col { display:flex; flex-direction:column; gap:9px; min-width:0; }
.footer-col h3 { margin:0 0 10px; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.footer-col a, .footer-col span { font-size:clamp(.85rem,1.5vw,1.05rem); word-break:break-word; }
.footer-col a:hover { color:#4f8cff; }
.signature-wrap { border-top:1px solid rgba(255,255,255,.1); overflow:hidden; margin-top:56px; }
.signature { font-family:"Archivo Black", sans-serif; font-size:12vw; line-height:.85; letter-spacing:-.04em; white-space:nowrap; padding:8vh 0 8vh 5vw; }
.bottom-bar { margin:24px 32px; padding:16px 20px; border-radius:16px; display:flex; justify-content:space-between; gap:12px; font-size:.6rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); }

@media (max-width:1023px) {
  .grid.portrait { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid.landscape { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px) {
  .nav-inner { padding:0 20px; height:64px; }
  .brand { width:128px; height:56px; }
  .contact-btn { padding:9px 14px; }
  .micro-link { font-size:.62rem; }
  .hero-slide img { object-fit:contain; }
  .section-head { flex-direction:column; align-items:flex-start; }
  .section-subtitle { text-align:left; }
  .grid.portrait { grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 16px; }
  .grid.landscape { grid-template-columns:1fr; gap:40px; }
  .card { padding:10px; }
  .card-meta { display:block; }
  .card-subtitle { display:block; margin-top:7px; }
  .footer-card-wrap { padding:40px 20px 0; }
  .footer-card { grid-template-columns:repeat(2,1fr); }
  .bottom-bar { margin:24px 20px; flex-direction:column; align-items:flex-start; }
}
@media (max-width:480px) {
  .nav-left { display:none; }
  .nav-side { flex:1; }
  .brand-wrap { position:absolute; left:50%; transform:translateX(-50%); }
  .contact-card { right:-4px; width:min(288px, calc(100vw - 32px)); }
  .portfolio { padding-left:16px; padding-right:16px; }
  .footer-card { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }
}