/* ═══ BASE — variables, reset, shared buttons ═══ */
:root{
  --bg:#0A0A0A; --surface:#141414; --surface-alt:#1A1A1A;
  --text:#F5F4EF; --muted:#A7A7A2; --dim:#6E6E6E;
  --cut:#C8FF00; --border:rgba(245,244,239,.11);
  --gut:clamp(20px,4.2vw,72px);
  /* floating nav: gap above the bar + bar height. --nav-h is the total space it takes up */
  --nav-top:14px; --nav-bar:84px; --nav-h:calc(var(--nav-top) + var(--nav-bar));
}
@media(max-width:760px){:root{--nav-top:10px; --nav-bar:68px}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);
  font-family:Archivo,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--cut);color:#0A0A0A}
:focus-visible{outline:2px solid var(--cut);outline-offset:3px}
/* striped .ph placeholders only show when the image before them is missing
   (a missing image removes itself via onerror, so the placeholder shows instead).
   !important because each section sets .ph{display:grid} with a more specific selector */
img + .ph{display:none!important}

/* buttons — used in section 1 (hero) and section 5 (work) */
.btn{display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.14em;
  padding:15px 28px;position:relative;overflow:hidden;border:1px solid transparent}
.btn span{position:relative;z-index:1;transition:color .3s}
.btn-primary{background:var(--cut);color:#0A0A0A}
.btn-primary::before{content:"";position:absolute;inset:0;background:var(--text);
  transform:translateX(-101%) skewX(-14deg);transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.btn-primary:hover::before{transform:translateX(0) skewX(-14deg)}
.btn-ghost{border-color:var(--border);color:var(--text)}
.btn-ghost::before{content:"";position:absolute;inset:-1px;background:var(--surface-alt);
  transform:translateX(-101%) skewX(-14deg);transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.btn-ghost:hover::before{transform:translateX(0) skewX(-14deg)}
.btn-ghost:hover{border-color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}