/* ============================================================
   PERCEPTUAL ART — dark editorial, video-forward studio site.
   Hand-rolled, no framework. Cloning the systms.ai vibe.
   ============================================================ */
:root{
  --bg:#0a0a0b;
  --bg-2:#0f0f11;
  --ink:#f4f3ef;
  --ink-dim:#9b9a95;
  --ink-faint:#54534f;
  --line:#1f1f22;
  --acc:#e8482b;            /* raking-light orange-red */
  --maxw:1280px;
  --pad:clamp(20px,5vw,72px);
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
b{font-weight:700; color:#fff}
img,video{display:block; max-width:100%}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}
.acc{color:var(--acc)}
.u-dot::after{content:"."; color:var(--acc)}

/* section number chip */
.sec-num{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em;
  color:var(--ink-faint);
}

/* -------- reveal-on-scroll -------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* ===================== NAV ===================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  mix-blend-mode:difference; color:#fff;
}
.nav-mark{font-family:var(--mono); font-size:.82rem; letter-spacing:.22em; font-weight:700}
.nav-links{display:flex; gap:clamp(14px,2.4vw,34px); align-items:center;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em}
.nav-links a{color:#fff; opacity:.78; transition:opacity .2s}
.nav-links a:hover{opacity:1}
.nav-cta{opacity:1 !important}
@media (max-width:640px){ .nav-links a:not(.nav-cta){display:none} }

/* ===================== HERO ===================== */
.hero--cover{height:100svh; min-height:560px; padding:10px; background:var(--bg)}
.hero-stage{
  position:relative; height:100%; width:100%;
  border-radius:14px; overflow:hidden; isolation:isolate;
  background:#000;
}
.hero-stage-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
  filter:saturate(1.05) contrast(1.02);
}
.hero-stage-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, transparent 60%, rgba(0,0,0,.6));
}
.hero-wordmark{
  position:absolute; left:var(--pad); bottom:clamp(96px,18vh,180px); z-index:3;
  margin:0; font-weight:800; letter-spacing:-.02em; line-height:.86;
  font-size:clamp(3.4rem,13vw,11rem); text-transform:uppercase;
  text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.hero-cover-tag{
  position:absolute; right:var(--pad); bottom:clamp(96px,18vh,180px); z-index:3;
  max-width:36ch; margin:0; color:var(--ink-dim); font-size:.96rem; line-height:1.5;
}
.hero-cover-tag .sec-num{display:block; margin-bottom:10px; color:var(--acc)}
.hero-meta{
  position:absolute; left:var(--pad); bottom:34px; z-index:3;
  display:flex; gap:12px; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.16em; color:var(--ink-dim);
}
.hero-audio{
  position:absolute; right:var(--pad); bottom:30px; z-index:4;
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  color:#fff; font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  padding:9px 14px; border-radius:100px; cursor:pointer; backdrop-filter:blur(6px);
  transition:background .2s, border-color .2s;
}
.hero-audio:hover{background:rgba(255,255,255,.12)}
.hero-audio .dot{width:7px; height:7px; border-radius:50%; background:var(--ink-faint); transition:background .2s, box-shadow .2s}
.hero-audio[aria-pressed="true"] .dot{background:var(--acc); box-shadow:0 0 10px var(--acc)}
@media (max-width:640px){ .hero-cover-tag{display:none} }

/* ===================== SECTIONS ===================== */
.section{padding-block:clamp(64px,9vw,140px); border-top:1px solid var(--line)}
.section-pad{position:relative}
.sec-head{display:grid; gap:8px; margin-bottom:clamp(28px,5vw,56px)}
.sec-h{font-size:clamp(1.8rem,5vw,3.4rem); font-weight:800; letter-spacing:-.02em; margin:.2em 0 0; text-transform:uppercase}
.sec-sub{color:var(--ink-dim); margin:.2em 0 0}

/* statement */
.stmt-grid{display:grid; gap:18px}
.stmt{font-size:clamp(1.5rem,3.6vw,2.7rem); line-height:1.28; font-weight:500; letter-spacing:-.015em; max-width:22ch; color:var(--ink)}
.stmt b{color:var(--acc)}

/* ===================== WORK GRID (justified rows) ===================== */
.work-grid{
  display:flex; flex-wrap:wrap; gap:10px;
  padding-inline:var(--pad); max-width:1600px; margin:0 auto;
}
.tile{
  position:relative; flex:1 1 var(--tw,33%); width:var(--tw,33%);
  aspect-ratio:var(--ta,1.4); min-width:240px;
  background:var(--bg-2); border:1px solid var(--line);
  overflow:hidden; cursor:pointer; border-radius:6px;
}
.tile video,.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.tile::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.45), transparent 45%); opacity:.7; transition:opacity .3s}
.tile:hover::after{opacity:.25}
.tile .crop{position:absolute; width:12px; height:12px; z-index:2; opacity:0; transition:opacity .3s}
.tile:hover .crop{opacity:.9}
.crop.tl{top:8px; left:8px; border-top:1.5px solid #fff; border-left:1.5px solid #fff}
.crop.br{bottom:8px; right:8px; border-bottom:1.5px solid #fff; border-right:1.5px solid #fff}
.tile-label{position:absolute; left:10px; bottom:9px; z-index:3; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.7)}

/* ===================== CASE STUDY ===================== */
.case-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); align-items:center}
.case-grid .sec-num{grid-column:1/-1}
.case-body{display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.case-p{color:var(--ink-dim); margin:0; max-width:46ch; font-size:1.02rem}
.case-cta{margin-top:8px}
.case-media{position:relative; aspect-ratio:4/5; background:var(--bg-2); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.case-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.case-media .crop{position:absolute; width:16px; height:16px; z-index:2}
.case-media .crop.tl{top:10px; left:10px; border-top:1.5px solid var(--acc); border-left:1.5px solid var(--acc)}
.case-media .crop.br{bottom:10px; right:10px; border-bottom:1.5px solid var(--acc); border-right:1.5px solid var(--acc)}
.frame-meta{position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; justify-content:space-between; padding:12px 14px; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; color:#fff; background:linear-gradient(0deg, rgba(0,0,0,.7), transparent)}
@media (max-width:760px){ .case-grid{grid-template-columns:1fr} }

/* ===================== PROCESS ===================== */
.num-body{display:flex; flex-direction:column; gap:clamp(20px,3vw,36px)}
.steps{list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px)}
.steps li{border-top:1px solid var(--line); padding-top:18px; display:grid; gap:6px}
.step-n{font-family:var(--mono); font-size:.78rem; color:var(--acc); letter-spacing:.14em}
.steps h3{margin:0; font-size:1.18rem; font-weight:700}
.steps p{margin:0; color:var(--ink-dim); font-size:.96rem; max-width:40ch}
@media (max-width:640px){ .steps{grid-template-columns:1fr} }

/* ===================== CONTACT / END ===================== */
.section-end{text-align:center}
.end-grid{display:grid; justify-items:center; gap:24px}
.end-h{font-size:clamp(2rem,6vw,4.4rem); font-weight:800; letter-spacing:-.025em; line-height:1.02; margin:.3em 0 0}
.end-meta{display:flex; gap:12px; font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; color:var(--ink-dim)}

/* ===================== BUTTONS ===================== */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; padding:13px 22px; border-radius:100px; border:1px solid var(--ink-faint); color:var(--ink); transition:.2s}
.btn:hover{border-color:var(--ink); background:var(--ink); color:#000}
.btn-primary{background:var(--acc); border-color:var(--acc); color:#fff}
.btn-primary:hover{background:#fff; border-color:#fff; color:#000}
.btn-big{font-size:1rem; padding:18px 30px}

/* ===================== FOOTER ===================== */
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:30px var(--pad); border-top:1px solid var(--line); font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--ink-faint)}

/* ===================== LIGHTBOX ===================== */
.lightbox{position:fixed; inset:0; z-index:90; display:none; place-items:center; padding:5vmin; background:rgba(5,5,6,.94); backdrop-filter:blur(8px)}
.lightbox.open{display:grid}
.lb-inner{max-width:92vw; max-height:88vh}
.lb-inner img,.lb-inner video{max-width:92vw; max-height:88vh; border-radius:8px; box-shadow:0 30px 100px rgba(0,0,0,.6)}
.lb-close{position:absolute; top:18px; right:22px; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.05); color:#fff; font-size:1rem; cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.15)}