@font-face { font-family: "Oldschool Grotesk"; src: url("fonts/OldschoolGrotesk-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
  @font-face { font-family: "Oldschool Grotesk"; src: url("fonts/OldschoolGrotesk-Heavy.ttf") format("truetype"); font-weight: 900; font-display: swap; }
  @font-face { font-family: "Aeonik"; src: url("fonts/Aeonik-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
  @font-face { font-family: "Aeonik"; src: url("fonts/Aeonik-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
  @font-face { font-family: "Aeonik"; src: url("fonts/Aeonik-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
  :root {
    --ink: #141414;
    --ink-2: #222;
    --cream: #FDF9F0;
    --lime: #C7FF69;
    --green: #00A652;
    --yellow: #FFC412;
    --blue: #478BFF;
    --orange: #FF6D38;
    --purple: #7A78FF;
    --pink: #FF8FB1;
    --yellow-300: #FFEEBA;
    --orange-300: #FFCDBA;
    --blue-300: #B9DDFD;
    --purple-300: #CCCCFF;
    --n-out: cubic-bezier(.22, 1, .36, 1);
    --n-in-out: cubic-bezier(.84, 0, .16, 1);
    --display: "Oldschool Grotesk", "Bricolage Grotesque", system-ui, sans-serif;
    --body: "Aeonik", "DM Sans", system-ui, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-font-smoothing: antialiased; }
  body { background: var(--ink); color: var(--cream); font-family: var(--body); font-weight: 500; letter-spacing: .01em; font-size: 17px; line-height: 1.4; overflow-x: hidden; }
  a { color: inherit; text-decoration: none; }
  img, svg { display: block; }
  .display { font-family: var(--display); font-weight: 900; letter-spacing: -0.04em; line-height: 0.86; }
  /* Tile shapes carry a thin ink outline, like the reference icons. */
  .sh { stroke: var(--ink); stroke-width: 1.4; }
  .eyebrow { font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
  .eyebrow::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: currentColor; }

  /* ---------- nav ---------- */
  .nav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(21,21,21,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.08); }
  .nav .logo { width: 34px; height: 34px; }
  .nav a.link { font-size: 14px; padding: 8px 12px; border-radius: 999px; color: rgba(251,246,238,.75); transition: color .2s, background .2s; }
  .nav a.link:hover { color: var(--cream); background: rgba(255,255,255,.08); }
  .nav .cta { font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 999px; background: var(--lime); color: var(--ink); margin-left: 4px; }
  @media (max-width: 640px) { .nav a.link.opt { display: none; } }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 24px 0 10px; border-radius: 24px; border: 1px solid var(--ink); background: var(--lime); color: var(--ink); font-weight: 500; font-size: 15px; transition: border-radius .3s var(--n-out), transform .3s var(--n-out); }
  .btn:hover { border-radius: 10px; }
  .btn .dot { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--lime); display: grid; place-items: center; }

  /* ---------- work: stacked sticky cards ---------- */
  .card { position: sticky; top: calc(84px + var(--i) * 18px); min-height: min(78vh, 680px); border-radius: 32px; color: var(--ink); padding: clamp(24px, 4vw, 56px); display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; margin-bottom: 6vh; overflow: hidden; box-shadow: 0 -10px 40px rgba(0,0,0,.25); }
  .card .meta { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; z-index: 1; }
  .card .num { font-family: var(--display); font-weight: 700; font-size: 15px; }
  .card h3 { font-size: clamp(44px, 6.4vw, 104px); }
  .card p { max-width: 38ch; margin-top: 18px; }
  .tags { display: flex; flex-wrap: wrap; gap: 8px; }
  .tags span { font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--ink); }
  .card .view { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; font-weight: 700; border-bottom: 2px solid var(--ink); padding-bottom: 2px; }
  .media { position: relative; border-radius: 22px; background: rgba(255,255,255,.35); border: 2px solid var(--ink); overflow: hidden; min-height: 300px; }
  .media img { width: 100%; height: 100%; object-fit: cover; }
  .media .shape { position: absolute; border: 2px solid var(--ink); }
  @media (max-width: 820px) { .card { grid-template-columns: 1fr; top: calc(76px + var(--i) * 12px); } .media { min-height: 240px; } }


  /* ---------- footer ---------- */
  footer { padding: 18vh 16px 32px; text-align: center; position: relative; overflow: hidden; }
  footer h2 { font-size: clamp(64px, 15vw, 240px); }
  footer .btn { margin-top: 40px; }
  .mini-tiles { display: flex; justify-content: center; gap: 10px; margin: 0 auto 40px; }
  .mini-tiles .tile { width: 54px; aspect-ratio: 1; }
  .mini-tiles .tile svg { width: 100%; height: 100%; overflow: visible; }
  .mini-tiles .tile:hover { animation: hop .5s cubic-bezier(.3,1.6,.5,1); }
  @keyframes hop { 50% { transform: translateY(-14px) rotate(-8deg); } }
  .foot { margin-top: 16vh; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 14px; color: rgba(251,246,238,.6); }
  .foot nav { display: flex; gap: 20px; }
  .foot a:hover { color: var(--cream); }

  .reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s, transform .8s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }


  /* ---------- case study pages ---------- */
  .cs-hero { background: var(--accent); color: var(--ink); padding: 140px 16px 0; overflow: hidden; }
  .cs-hero-inner { max-width: 1280px; margin: 0 auto; }
  .cs-back { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 500; margin-bottom: 40px; border-bottom: 1.5px solid var(--ink); }
  .cs-hero h1 { font-size: clamp(56px, 12vw, 200px); }
  .cs-tagline { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; font-size: clamp(22px, 2.8vw, 38px); max-width: 26ch; margin: 28px 0 56px; }
  .cs-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 2px solid var(--ink); padding: 22px 0 64px; }
  .cs-meta dt { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
  .cs-meta dd { font-size: 15px; }
  .cs-meta a { border-bottom: 1.5px solid var(--ink); }
  @media (max-width: 720px) { .cs-meta { grid-template-columns: 1fr 1fr; } }
  .cs-cover { max-width: 1280px; margin: 0 auto; transform: translateY(0); }
  .cs-cover img { width: 100%; border-radius: 28px 28px 0 0; border: 2px solid var(--ink); border-bottom: 0; display: block; }

  .cs-body { max-width: 1280px; margin: 0 auto; padding: 12vh 16px 4vh; }
  .cs-sec { display: grid; grid-template-columns: 280px 1fr; gap: 40px; padding: 7vh 0; border-top: 1px solid rgba(251,246,238,.16); }
  .cs-sec:first-child { border-top: 0; padding-top: 0; }
  .cs-sec h2 { position: sticky; top: 96px; align-self: start; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: 0; color: var(--accent); display: flex; gap: 10px; }
  .cs-sec h2 span { color: rgba(251,246,238,.45); }
  .cs-text { max-width: 760px; }
  .cs-text .lead { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; font-size: clamp(26px, 3.2vw, 44px); margin-bottom: 28px; }
  .cs-text p { color: rgba(251,246,238,.78); margin-bottom: 16px; font-size: 18px; }
  .cs-text ul { list-style: none; display: grid; gap: 14px; margin: 8px 0 16px; }
  .cs-text li { padding-left: 30px; position: relative; color: rgba(251,246,238,.78); font-size: 18px; }
  .cs-text li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 4px; background: var(--accent); }
  .cs-text li b, .cs-text p b { color: var(--cream); }
  .cs-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 12px; }
  .cs-point { background: var(--ink-2); border-radius: 20px; padding: 24px; }
  .cs-point b { display: block; font-family: var(--display); font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 10px; color: var(--cream); }
  .cs-point p { font-size: 16px; margin: 0; }
  @media (max-width: 860px) { .cs-sec { grid-template-columns: 1fr; gap: 20px; } .cs-sec h2 { position: static; } .cs-points { grid-template-columns: 1fr; } }

  .cs-quote { background: var(--accent); color: var(--ink); border-radius: 28px; padding: clamp(28px, 5vw, 64px); margin: 4vh 0; }
  .cs-quote blockquote { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; font-size: clamp(30px, 4.6vw, 64px); }
  .cs-quote cite { display: block; margin-top: 20px; font-style: normal; font-weight: 500; }

  .cs-gallery { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 16px; margin: 4vh 0; }
  .cs-gallery figure { margin: 0; }
  .cs-gallery figure.wide { grid-column: 1 / -1; }
  .cs-gallery img { width: 100%; height: auto; border-radius: 20px; display: block; background: var(--ink-2); }
  .cs-gallery figcaption { font-size: 14px; color: rgba(251,246,238,.55); margin-top: 10px; }
  @media (max-width: 720px) { .cs-gallery { grid-template-columns: repeat(calc(var(--cols, 2) - 1), 1fr); } }

  .cs-next { display: block; max-width: 1280px; margin: 6vh auto 0; padding: 0 16px; }
  .cs-next-card { background: var(--next); color: var(--ink); border-radius: 32px; padding: clamp(28px, 5vw, 64px); display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
  .cs-next:hover .cs-next-card { transform: scale(1.015) rotate(-.4deg); }
  .cs-next small { font-weight: 700; display: block; margin-bottom: 12px; }
  .cs-next h2 { font-size: clamp(48px, 9vw, 140px); }
  .cs-next .arrow { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 7vw, 96px); line-height: 1; }

  /* card media with real screenshots on the home page */
  .media.shot { background: var(--ink); }
  .media.shot img { position: absolute; inset: 0; }
  a.card { text-decoration: none; }
  a.card:hover .view { border-bottom-width: 3px; }
  .cs-hero .eyebrow { display: flex; }

  .cs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 14px; }
  .cs-stats div { background: var(--accent); color: var(--ink); border-radius: 20px; padding: 22px 24px; }
  .cs-stats b { display: block; font-family: var(--display); font-weight: 800; letter-spacing: -0.05em; line-height: 1; font-size: clamp(44px, 5.5vw, 76px); }
  .cs-stats span { display: block; margin-top: 8px; font-weight: 500; }
  .cs-text .cs-note { font-size: 14px; color: rgba(251,246,238,.55); }
  .cs-text a { color: var(--cream); border-bottom: 1.5px solid var(--accent); }
  @media (max-width: 600px) { .cs-stats { grid-template-columns: 1fr; } }

  /* Previous / Draft switch on case study pages */
  .ver-toggle { position: fixed; left: 18px; bottom: 18px; z-index: 60; display: flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--ink); border: 1.5px solid var(--ink); box-shadow: 0 8px 30px rgba(0,0,0,.25); }
  .ver-toggle a { padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: rgba(253,249,240,.7); transition: background .3s var(--n-out), color .3s; }
  .ver-toggle a:hover { color: var(--cream); }
  .ver-toggle a[aria-current="page"] { background: var(--lime); color: var(--ink); }

/* Nav hides on scroll down, returns on scroll up (assets/nav.js) */
.nav { transition: translate .5s cubic-bezier(.22,1,.36,1), opacity .4s; }
.nav.nav-away { translate: 0 calc(-100% - 24px); opacity: 0; pointer-events: none; }

/* ---------- Next project handoff (assets/next.js) ---------- */
.nx { padding: 10vh 16px 16px; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; background: var(--ink); }
.nx-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; min-height: min(72vh, 680px); padding: 16px; border-radius: 28px; background: var(--nx); color: var(--ink); overflow: hidden; max-width: 1280px; width: 100%; margin: 0 auto; transition: border-radius .5s cubic-bezier(.22,1,.36,1); }
.nx-card:hover { border-radius: 18px; }
.nx-info { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(12px, 2vw, 28px); }
.nx-info small { font-size: 14px; font-weight: 500; letter-spacing: .02em; }
.nx-info h2 { font-size: clamp(56px, 8vw, 132px); line-height: .88; margin: auto 0 18px; }
.nx-info p { max-width: 34ch; font-size: 16px; line-height: 1.4; opacity: .8; }
.nx-media { position: relative; border-radius: 18px; overflow: hidden; background: rgba(20,20,20,.15); }
.nx-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.08 - var(--nx-p, 0) * .08)); transition: transform .2s linear; }
.nx-ring { position: absolute; right: 28px; bottom: 28px; width: 72px; height: 72px; border-radius: 50%; background: var(--ink); color: var(--cream); display: grid; place-items: center; font-size: 22px; z-index: 2; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.nx-card:hover .nx-ring { transform: rotate(-45deg) scale(1.06); }
.nx-ring svg { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); transform: rotate(-90deg); }
.nx-ring circle { fill: none; stroke-width: 2.5; }
.nx-ring .track { stroke: rgba(253,249,240,.18); }
.nx-ring .bar { stroke: var(--nx); stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.nx-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--nx-p, 0) * 100%); background: var(--ink); }
.nx-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 1280px; width: 100%; margin: 0 auto; color: rgba(253,249,240,.6); font-size: 14px; min-height: 36px; }
.nx-stay { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(253,249,240,.25); background: transparent; color: var(--cream); font: 500 13px var(--body); cursor: pointer; }
.nx-stay:hover { background: rgba(253,249,240,.08); }
.nx-counting .nx-hint { color: var(--cream); }
@media (max-width: 760px) {
  .nx-card { grid-template-columns: 1fr; grid-template-rows: auto minmax(240px, 1fr); min-height: 78vh; }
  .nx-info h2 { margin: 18vh 0 12px; }
  .nx-ring { width: 60px; height: 60px; right: 24px; bottom: 24px; }
}
.nx-veil { position: fixed; z-index: 400; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 18px; overflow: hidden; background: var(--nx, var(--ink)); transition: left .75s cubic-bezier(.84,0,.16,1), top .75s cubic-bezier(.84,0,.16,1), width .75s cubic-bezier(.84,0,.16,1), height .75s cubic-bezier(.84,0,.16,1), border-radius .75s; }
.nx-veil img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-veil.full { left: 0; top: 0; width: 100vw; height: 100vh; border-radius: 0; }
.nx-arrive { position: fixed; inset: 0; z-index: 400; background: var(--ink); pointer-events: none; transition: opacity .9s cubic-bezier(.22,1,.36,1); }
.nx-arrive.lift { opacity: 0; }
.at-next .visit { opacity: 0 !important; pointer-events: none; transition: opacity .3s; }