* { box-sizing: border-box; }
  body { margin: 0; background: var(--bone); }
  .page { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
  .foot-mark, .foot-mark.navy { border-bottom-color: var(--red) !important; }

  /* ---------- header ---------- */
  .hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 90;
    background: rgba(250,249,246,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    transition: transform .3s var(--ease); }
  .hdr.hide { transform: translateY(-100%); }
  .navlink { font-family: var(--font-sans); font-size: 15px; font-weight: 500; text-decoration: none; color: var(--navy); opacity: .82; transition: opacity .2s var(--ease), background-color .2s var(--ease); }
  .navlink:hover { opacity: 1; }
  .hdr-link { position: relative; z-index: 1; padding: 8px 15px; border-radius: 999px; }
  .hdr-link:hover { background: rgba(20,33,61,.05); }

  /* ---------- reveal ---------- */
  .rv { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .rv.in { opacity: 1; transform: none; }
  .rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; } .rv.d4 { transition-delay: .32s; }

  /* ---------- texture ---------- */
  .halftone-l { background-image: radial-gradient(rgba(21,34,61,.08) 1.1px, transparent 1.2px); background-size: 12px 12px; background-position: 0 0; }
  .halftone-d { background-image: radial-gradient(rgba(249,248,245,.07) 1.1px, transparent 1.2px); background-size: 12px 12px; background-position: 0 0; }

  /* ---------- card lift ---------- */
  .lift { transition: transform .16s cubic-bezier(.4,0,.2,1), box-shadow .16s cubic-bezier(.4,0,.2,1), border-color .16s cubic-bezier(.4,0,.2,1); }
  .lift:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--line-2); transition: transform .12s cubic-bezier(.2,.7,.3,1), box-shadow .12s ease-out, border-color .12s ease-out; }

  @media (max-width: 980px) {
    .nav-links { display: none !important; }
    .bento { grid-template-columns: 1fr !important; }
    .bento .span2 { grid-row: auto !important; }
    .about-grid { grid-template-columns: 1fr !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  }
  [data-motion="off"] .rv { opacity: 1 !important; transform: none !important; transition: none !important; }