/* Moved out of base.html so it's cached instead of re-sent in every page. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-400.woff2") format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter-500.woff2") format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-600.woff2") format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter-700.woff2") format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/inter-800.woff2") format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/inter-900.woff2") format('woff2');
}
@font-face {
    font-family: 'Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/plex-mono-500.woff2") format('woff2');
}
@font-face {
    font-family: 'Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/plex-mono-600.woff2") format('woff2');
}
:root {
    --primary-color: #1978e5;
}
.truncateText {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:root {
--primary-color: #1978e5;
--background-color: #ffffff;
--text-primary: #111827;
--text-secondary: #6b7280;
--surface-color: #f3f4f6;
--footer-background: #0f172a;
--footer-text: #94a3b8;
--footer-heading: #e2e8f0;
          }
          body {
font-family: 'Inter', sans-serif;
background-color: var(--background-color);
          }
          .logo-text {
font-weight: 700;
font-size: 1.25rem;
line-height: 1.75rem;
letter-spacing: -0.025em;
color: var(--text-primary);
          }
          .case-file-prose ul {
list-style-type: disc;
margin-left: 1.5rem;
padding-left: 1.5rem;
          }
          .case-file-prose ol {
list-style-type: decimal;
margin-left: 1.5rem;
padding-left: 1.5rem;
          }
          /* Tailwind's overflow-x-hidden turns these full-height wrappers into
 vertical scroll containers (hidden on one axis computes the other
 to auto), which made "which element scrolls" viewport-dependent
 and breaks ScrollTrigger pinning. clip prevents horizontal
 overflow without creating a scroll container, so the window is
 always the scroller. */
          .overflow-x-hidden {
overflow-x: clip;
overflow-y: visible;
          }

          /* Above-the-fold entrances are pure CSS: they start at first paint
 with zero JS dependency, so the LCP element (hero headline) is
 never gated on script download. GSAP handles scroll-driven work
 only. Do NOT add hero/heading selectors back to the JS-gated
 hidden list below — that put mobile LCP at 12s on slow networks. */
          @media (prefers-reduced-motion: no-preference) {
.anim-rise {
  opacity: 0;
  animation: anim-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.anim-rise.anim-d1 { animation-delay: 0.10s; }
.anim-rise.anim-d2 { animation-delay: 0.24s; }
.anim-rise.anim-d3 { animation-delay: 0.38s; }
.anim-rise.anim-d4 { animation-delay: 0.52s; }
@keyframes anim-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
          }

          /* Hidden only when the motion system is active (class added by an
 inline head script, gated on prefers-reduced-motion). Only
 below-the-fold decorative pieces may live here. */
          .js-motion [data-console] .console-line {
opacity: 0;
          }

          /* Auto-hiding header (class toggled by the motion system) */
          header.sticky {
transition: transform 0.35s ease;
          }
          header.nav-hidden {
transform: translateY(-100%);
          }

          /* Keyword marquee */
          .marquee-viewport {
overflow: hidden;
white-space: nowrap;
          }
          .marquee-track {
display: inline-flex;
align-items: center;
will-change: transform;
          }

          /* Custom cursor — homepage hero only (fine pointers, motion
 allowed). The class is added to the hero section by the motion
 system; everywhere else keeps the native cursor. */
          .hero-cursor,
          .hero-cursor a,
          .hero-cursor button {
cursor: none;
          }
          #cursor-dot, #cursor-ring {
position: fixed;
top: 0; left: 0;
pointer-events: none;
border-radius: 9999px;
z-index: 9999;
mix-blend-mode: difference;
          }
          #cursor-dot {
width: 8px; height: 8px;
background: #fff;
          }
          #cursor-ring {
width: 38px; height: 38px;
border: 1.5px solid rgba(255, 255, 255, 0.75);
          }