:root {
  --bg:#0d0d0c; --fg:#f2f0ea; --mute:#7d7b74; --line:#2a2a27; --accent:#d4ff3f;
  --lb-bg:#0d0d0c; --lb-fg:#f2f0ea; --lb-accent:#d4ff3f; --lb-on-accent:#0d0d0c;
}
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--fg); font-family:'Inter Tight',sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
em { font-family:'Instrument Serif',serif; font-weight:400; color:var(--accent); }
.about h2 em { font-size:1.14em; line-height:0; }

@media (pointer:fine) { body, a, button { cursor:none; } }
.cursor { position:fixed; left:0; top:0; width:14px; height:14px; border-radius:50%; background:var(--accent); pointer-events:none; z-index:200;
  transform:translate(-50%,-50%); display:grid; place-items:center; color:var(--bg); font-size:0; font-weight:500;
  transition:width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1), font-size .2s; }
body:not(.moved) .cursor { opacity:0; }
.cursor.big { width:84px; height:84px; font-size:14px; }
@media (pointer:coarse) { .cursor { display:none; } }

header { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; padding:22px 40px; font-size:18px;
  background:rgba(13,13,12,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.logo { display:flex; flex-direction:column; line-height:1.15; }
.logo b { font-weight:800; font-size:clamp(20px,1.7vw,30px); }
.logo span { color:var(--mute); font-size:clamp(14px,1vw,17px); }
header nav { display:flex; align-items:center; gap:36px; }
header nav a { position:relative; font-size:clamp(16px,1.15vw,20px); }
/* on hover the link switches to the same lime italic serif as "explains" */
/* both spellings sit in the same grid cell, so the link is always as wide as the wider one and nothing shifts */
header nav a.swap { display:inline-grid; place-items:center; }
header nav a.swap > span, header nav a.swap::after { grid-area:1 / 1; transition:opacity .2s; }
header nav a.swap::after { content:attr(data-t); color:var(--accent); font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(20px,1.45vw,25px); opacity:0; }
header nav a.swap:hover > span { opacity:0; }
header nav a.swap:hover::after { opacity:1; }
header .cta { background:var(--accent); color:var(--bg); padding:12px 22px; border-radius:40px; font-weight:500; transition:transform .3s; }
header .cta:hover { transform:rotate(-3deg) scale(1.04); }

/* landing */
.hero { padding:clamp(48px,7vh,100px) 40px clamp(56px,7vh,96px); text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero h1 { font-weight:800; font-size:clamp(54px,9.6vw,230px); line-height:.94; max-width:14ch; }
.hero .lead { margin-top:clamp(52px,7vh,88px); max-width:900px; text-wrap:balance; color:var(--mute); font-size:clamp(17px,1.3vw,22px); line-height:1.5; }
.cta-row { display:flex; gap:12px; margin-top:clamp(48px,6.5vh,80px); flex-wrap:wrap; justify-content:center; }
.btn { border:1px solid var(--line); border-radius:40px; padding:15px 26px; font-size:clamp(15px,1vw,18px); transition:border-color .2s, transform .3s; }
.btn:hover { border-color:var(--fg); transform:translateY(-2px); }
.btn.primary { background:var(--fg); color:var(--bg); border-color:var(--fg); }

.facts { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.facts div { padding:40px; text-align:center; }
.facts div + div { border-left:1px solid var(--line); }
.facts b { display:block; font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; color:var(--accent); font-size:clamp(44px,4.6vw,84px); line-height:1; }
.facts span { display:block; margin:14px auto 0; max-width:min(460px,100%); text-wrap:balance; color:var(--mute); font-size:clamp(15px,1vw,18px); line-height:1.45; }

.services { padding:clamp(90px,10vh,140px) 40px; text-align:center; }
.services h2 { font-size:clamp(40px,5vw,88px); font-weight:800; line-height:1; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:56px; text-align:left; }
.cards div { border:1px solid var(--line); border-radius:14px; padding:28px; transition:border-color .3s, transform .4s cubic-bezier(.2,.8,.2,1); }
.cards div:hover { border-color:var(--accent); transform:translateY(-6px); }
.cards b { font-size:clamp(19px,1.4vw,26px); font-weight:500; line-height:1.15; display:block; }
.cards p { margin-top:14px; color:var(--mute); font-size:clamp(15px,1vw,18px); line-height:1.5; }

.clients { padding:0 40px 120px; display:flex; flex-direction:column; align-items:center; gap:24px; }
.clients span { color:var(--mute); font-size:15px; }
.clients { padding-left:0 !important; padding-right:0 !important; }
.marquee { width:100%; overflow:hidden; display:flex; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee ul { list-style:none; padding:0; margin:0; display:flex; flex:none; gap:clamp(36px,4vw,72px); padding-right:clamp(36px,4vw,72px); animation:marquee 38s linear infinite; }
.marquee:hover ul { animation-play-state:paused; }
@keyframes marquee { to { transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce) { .marquee ul { animation:none; } }
.clients li { font-size:clamp(22px,2.2vw,40px); font-weight:500; color:#bdbab2; transition:color .2s; white-space:nowrap; }
.clients li:hover { color:var(--fg); }

.label { padding:0 40px 18px; color:var(--mute); font-size:15px; display:flex; justify-content:space-between; }
.rows { border-top:1px solid var(--line); }
.row { display:grid; grid-template-columns:64px 1fr 160px 40px; align-items:center; padding:26px 40px; border-bottom:1px solid var(--line); transition:background .3s, color .3s; }
.row .num { color:var(--mute); font-size:15px; }
.row h3 { font-size:clamp(34px,5vw,80px); font-weight:500; line-height:1; transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.row .count { color:var(--mute); font-size:15px; }
.row .arrow { font-size:28px; transform:rotate(-45deg); transition:transform .4s; }
.row:hover { background:var(--accent); color:var(--bg); }
.row:hover .num, .row:hover .count { color:var(--bg); }
.row:hover h3 { transform:translateX(24px); }
.row:hover .arrow { transform:rotate(0); }
.float { position:fixed; left:0; top:0; width:240px; aspect-ratio:9/16; border-radius:6px; overflow:hidden; pointer-events:none; z-index:15; background:#000;
  transform:translate(-50%,-50%) rotate(-4deg) scale(0); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.float.show { transform:translate(-50%,-50%) rotate(-4deg) scale(1); }
.float.wide { width:clamp(340px,28vw,520px); aspect-ratio:16/9; }
.float video, .float img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.about { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; padding:140px 40px; align-items:end; }
.about img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:6px; filter:grayscale(1); transition:filter .5s; }
.about img:hover { filter:none; }
.about h2 { font-size:clamp(36px,4.6vw,72px); font-weight:500; line-height:1; }
.about p { margin-top:28px; color:var(--mute); font-size:18px; line-height:1.55; max-width:560px; }
.about ul { list-style:none; padding:0; margin-top:36px; display:flex; flex-wrap:wrap; gap:8px; }
.about li { border:1px solid var(--line); border-radius:30px; padding:9px 16px; font-size:14px; }

footer { padding:120px 40px 40px; border-top:1px solid var(--line); }
footer h2 { font-size:clamp(48px,9vw,150px); font-weight:800; line-height:.88; }
footer .mail { display:inline-block; margin-top:44px; font-size:clamp(22px,2.4vw,34px); border-bottom:2px solid var(--accent); padding-bottom:6px; }
footer .mail:hover { color:var(--accent); }
footer .bottom { display:flex; justify-content:space-between; align-items:center; margin-top:120px; color:var(--mute); font-size:14px; }
footer .social { display:flex; gap:12px; }
footer .social a { width:52px; height:52px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--fg);
  transition:background .25s, color .25s, border-color .25s, transform .3s; }
footer .social a:hover { background:var(--accent); color:var(--bg); border-color:var(--accent); transform:rotate(-8deg); }
footer .social svg { width:22px; height:22px; fill:currentColor; }
body:has(footer .social a:hover) .cursor { opacity:0; }

/* category page */
.back { display:inline-block; margin:24px 40px 0; color:var(--mute); font-size:15px; }
.back:hover { color:var(--fg); }
.cat-head { padding:40px 40px 48px; display:grid; grid-template-columns:1fr 360px; gap:40px; align-items:end; }
.cat-head h1 { font-size:clamp(56px,9vw,150px); font-weight:800; line-height:.88; }
.cat-head h1 sup { font-size:.22em; font-weight:500; color:var(--accent); vertical-align:top; margin-left:10px; }
.cat-head p { color:var(--mute); font-size:17px; line-height:1.5; }
.tabs { display:flex; gap:8px; padding:0 40px 40px; overflow-x:auto; scrollbar-width:none; }
.tabs a { flex:none; border:1px solid var(--line); border-radius:30px; padding:10px 18px; font-size:14px; transition:border-color .2s; }
.tabs a:hover { border-color:var(--fg); }
.tabs a.on { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.grid { columns:3; column-gap:16px; padding:0 40px; }
.grid.tall { columns:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(clamp(220px,18vw,340px),1fr)); gap:16px; align-items:start; }
.grid.tall .tile { margin-bottom:0; }
.tile { break-inside:avoid; margin-bottom:16px; border-radius:6px; overflow:hidden; position:relative; background:#1a1a18;
  opacity:0; transform:translateY(40px); transition:opacity .7s, transform .7s cubic-bezier(.2,.8,.2,1); }
.tile.in { opacity:1; transform:none; }
.tile video, .tile img { width:100%; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.tile:hover video, .tile:hover img { transform:scale(1.04); }
.tile .n { position:absolute; left:14px; top:12px; font-size:13px; color:#fff; mix-blend-mode:difference; }
.next { display:block; margin:120px 40px 0; padding:48px 0; border-top:1px solid var(--line); }
.next span { color:var(--mute); font-size:15px; }
.next h2 { font-size:clamp(44px,7vw,110px); font-weight:800; line-height:.9; margin-top:12px; transition:color .3s, transform .45s cubic-bezier(.2,.8,.2,1); }
.next:hover h2 { color:var(--accent); transform:translateX(24px); }

@media (max-width:900px) {
  .hero .lead br.wide { display:none; }
  .hero, .label, .row, .about, footer, .cat-head, .tabs, .grid { padding-left:16px; padding-right:16px; }
  header { padding-left:16px; padding-right:16px; } header nav { gap:14px; } header nav a:not(.cta) { display:none; } header .cta { padding:10px 16px; }
  .facts { grid-template-columns:1fr; } .facts div + div { border-left:0; border-top:1px solid var(--line); } .facts div { padding:28px 16px; }
  .cards { grid-template-columns:1fr 1fr; } .services, .clients { padding-left:16px; padding-right:16px; }
  .row { grid-template-columns:36px 1fr 28px; } .row .count { display:none; }
  .about { grid-template-columns:1fr; padding-top:80px; padding-bottom:80px; }
  .cat-head { grid-template-columns:1fr; }
  .grid { columns:2; column-gap:10px; } .tile { margin-bottom:10px; }
  .grid.tall { grid-template-columns:repeat(2,1fr); gap:10px; }
  .back, .next { margin-left:16px; margin-right:16px; }
}
@media (max-width:520px) { .grid { columns:1; } .cards { grid-template-columns:1fr; } }
body:has(header nav a.swap:hover) .cursor { opacity:0; }