html {
        scroll-behavior: smooth;
      }
      body {
        font-family:
          "Inter",
          ui-sans-serif,
          system-ui,
          sans-serif;
        background: #fffbf4;
        color: #1a120b;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      h1,
      h2,
      h3,
      .font-display {
        font-family:
          "Fraunces",
          ui-serif,
          Georgia,
          serif;
        font-feature-settings:
          "ss01",
          "ss02";
        letter-spacing: -0.02em;
      }
      h1,
      h2,
      h3 {
        color: #000;
      }
      .font-mono,
      code {
        font-family:
          "JetBrains Mono",
          ui-monospace,
          monospace;
      }
      /* Grain overlay for warmth */
      .grain::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        opacity: 0.035;
        mix-blend-mode: multiply;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
      }
      /* Marquee */
      @keyframes marquee {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }
      .marquee-track {
        animation: marquee 40s linear infinite;
      }
      .marquee:hover .marquee-track {
        animation-play-state: paused;
      }
      /* Reveal on scroll */
      .reveal {
        opacity: 0;
        transform: translateY(16px);
        transition:
          opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
          transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
      }
      .reveal.in {
        opacity: 1;
        transform: none;
      }
      /* Underline squiggle */
      .squiggle {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12'><path d='M0 6 Q 12.5 -2 25 6 T 50 6 T 75 6 T 100 6' stroke='%23FF5C39' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
        background-repeat: no-repeat;
        background-position: 0 100%;
        background-size: 100% 0.35em;
        padding-bottom: 0.1em;
      }
      /* Subtle peanut shell pattern */
      .shell-pattern {
        background-image: radial-gradient(
            circle at 25% 25%,
            rgba(143, 114, 69, 0.08) 1.5px,
            transparent 2px
          ),
          radial-gradient(
            circle at 75% 75%,
            rgba(143, 114, 69, 0.06) 1.2px,
            transparent 2px
          );
        background-size:
          18px 18px,
          24px 24px;
      }
      /* Floating peanut */
      @keyframes float-y {
        0%,
        100% {
          transform: translateY(0) rotate(-8deg);
        }
        50% {
          transform: translateY(-14px) rotate(-4deg);
        }
      }
      .float-peanut {
        animation: float-y 6s ease-in-out infinite;
      }
      @keyframes wiggle {
        0%,
        100% {
          transform: rotate(-2deg);
        }
        50% {
          transform: rotate(2deg);
        }
      }
      .wiggle {
        animation: wiggle 4s ease-in-out infinite;
      }
      /* Reduced motion */
      @media (prefers-reduced-motion: reduce) {
        .float-peanut,
        .wiggle,
        .marquee-track {
          animation: none !important;
        }
        .reveal {
          opacity: 1;
          transform: none;
          transition: none;
        }
        html {
          scroll-behavior: auto;
        }
      }
      /* Focus ring */
      :focus-visible {
        outline: 2px solid #ff5c39;
        outline-offset: 3px;
        border-radius: 6px;
      }
      /* Pricing card highlight glow */
      .glow {
        background:
          radial-gradient(
            120% 80% at 50% 0%,
            rgba(255, 92, 57, 0.18),
            transparent 60%
          ),
          #fffbf4;
      }
      /* Sticky nav backdrop */
      .nav-blur {
        backdrop-filter: saturate(140%) blur(10px);
        -webkit-backdrop-filter: saturate(140%) blur(10px);
      }
      /* Project card "screenshot" mock — used as placeholder */
      .mock-grad-1 {
        background:
          linear-gradient(135deg, #ffd9c2 0%, #ffb48a 50%, #ff8a5c 100%);
      }
      .mock-grad-2 {
        background:
          linear-gradient(135deg, #e6d5b3 0%, #b89968 60%, #8f7245 100%);
      }
      .mock-grad-3 {
        background:
          linear-gradient(135deg, #ffe8a8 0%, #f4b942 60%, #e3a31a 100%);
      }
      .mock-grad-4 {
        background:
          linear-gradient(135deg, #f1e7d2 0%, #d9c39b 60%, #a88463 100%);
      }
      .mock-grad-5 {
        background:
          linear-gradient(135deg, #ffd9c2 0%, #ff8a5c 60%, #b33216 100%);
      }
      .mock-grad-6 {
        background:
          linear-gradient(135deg, #faf4e8 0%, #e6d5b3 60%, #7a5a41 100%);
      }

/* block: swiper */

/* Prevent peeking slides from causing horizontal scroll on the page */
section:has(.np-swiper) {
  overflow-x: clip;
}

.np-swiper {
  overflow: visible;
  padding-bottom: 2.5rem;
}

.np-swiper .swiper-pagination-bullet-active { background: #FF5C39; }

/* Dark-section variant: inactive bullets are near-invisible with the default
   rgba(0,0,0,0.2) fill on bg-coal. Override to cream at reduced opacity. */
.np-swiper--dark .swiper-pagination-bullet {
  background: #FFFBF4;
  opacity: 0.4;
}
.np-swiper--dark .swiper-pagination-bullet-active {
  background: #FF5C39;
  opacity: 1;
}

/* Equal-height cards: stretch only kicks in when the slide has height:auto,
   so override Swiper's default height:100% and let the inner card grow. */
.np-swiper .swiper-slide {
  height: auto !important;
  display: flex;
  flex-direction: column;
}

.np-swiper .swiper-slide > * {
  flex: 1;
}

@media (min-width: 1024px) {
  /* Swiper disabled at desktop (enabled:false in JS) — CSS grid takes over.
     No padding on the container: avoids Swiper overcounting offsetWidth
     which would cause the next slide to peek on wide viewports. */
  .np-swiper {
    padding-bottom: 0;
    width: calc(100% - 4rem);
    max-width: calc(80rem - 4rem);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
  .np-swiper .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(var(--desktop-cols, 3), 1fr);
    gap: 1.5rem;
    transform: none !important;
    width: auto !important;
  }
  .np-swiper .swiper-slide {
    width: auto !important;
    margin-right: 0 !important;
  }
  .np-swiper .swiper-pagination {
    display: none;
  }
}