@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700&display=swap');
    
    @font-face {
      font-family: 'Luthon Southard Script';
      src: url('assets/fonts/Luthon Southard Script.ttf') format('truetype');
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Regular.otf') format('opentype');
      font-weight: 400;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Medium.otf') format('opentype');
      font-weight: 500;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Semibold.otf') format('opentype');
      font-weight: 600;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Bold.otf') format('opentype');
      font-weight: 700;
      font-display: swap;
    }
    @font-face {
      font-family: 'Scalter';
      src: url('assets/fonts/Scalter-SerifCondensed.otf') format('opentype');
      font-display: swap;
    }

    /* Global Scrollbar Disable */
    * {
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
    }
    *::-webkit-scrollbar {
      display: none; /* Chrome, Safari and Opera */
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Satoshi', sans-serif;
      overflow-x: hidden;
      cursor: default; 
      background-color: transparent; 
    }

    h1, h2, h3, h4, h5, h6, .font-main { font-family: 'Chillax', sans-serif; }
    .font-synaptive { font-family: 'Luthon Southard Script', cursive; }
    .font-scalter { font-family: 'Scalter', serif; }

    .scalter-style {
      font-family: 'Scalter', serif;
      color: #ffb703; 
      -webkit-text-stroke: 2px #111111; 
      text-transform: uppercase;
      letter-spacing: 0.05em;
      text-shadow:
        1px 1px 0px #fb8500, 2px 2px 0px #fb8500, 3px 3px 0px #fb8500,
        4px 4px 0px #fb8500, 5px 5px 0px #fb8500, 6px 6px 0px #fb8500,
        7px 6px 0px #111111, 6px 7px 0px #111111, 7px 7px 0px #111111,
        8px 8px 0px #111111;
      line-height: 1;
      padding: 0 4px;
    }

    /* ---------------- PREMIUM SCROLL REVEALS ---------------- */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
      will-change: opacity, transform;
    }
    .reveal.active {
      opacity: 1;
      transform: translateY(0);
    }
    .delay-100 { transition-delay: 100ms; }
    .delay-200 { transition-delay: 200ms; }
    .delay-300 { transition-delay: 300ms; }

    /* ---------------- MOBILE DOCK NAV ---------------- */
    #mobile-dock {
      position: fixed;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%) translateY(100px) scale(0.9);
      opacity: 0;
      transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 100;
      pointer-events: none;
      width: max-content;
    }
    #mobile-dock.visible {
      transform: translateX(-50%) translateY(0) scale(1);
      opacity: 1;
      pointer-events: auto;
    }

    /* ---------------- MAGNETIC BUTTONS & LINKS ---------------- */
    .magnetic { display: inline-block; will-change: transform; }

    .nav-link {
      position: relative;
      display: inline-block;
      padding: 0.25rem 0;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 1.5px;
      bottom: 0px;
      left: 0;
      background-color: currentColor;
      transform: scaleX(0);
      transform-origin: bottom right;
      transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
    }
    @media (hover: hover) {
      .nav-link:hover::after, .nav-link.js-hovered::after {
        transform: scaleX(1);
        transform-origin: bottom left;
      }
    }

    .btn-elegant-fill {
      position: relative;
      overflow: hidden;
      transition: color 0.4s ease, border-color 0.4s ease;
      z-index: 1;
    }
    .btn-elegant-fill::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #0C2B1C;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
      z-index: -1;
    }
    @media (hover: hover) {
      .btn-elegant-fill:hover { color: #E3E7D3; border-color: #0C2B1C; }
      .btn-elegant-fill:hover::before { transform: scaleX(1); transform-origin: left; }
    }

    /* ---------------- LIVE MINIMAL GRID COMPONENTS ---------------- */
    .editorial-grid-item {
      transition: background-color 0.4s ease;
      position: relative; /* Fixed: Removed 3D transform that breaks mobile z-index rendering */
    }
    
    /* Grid 1: Dot Matrix Canvas */
    .bg-blueprint {
      background-color: #E3E7D3;
      background-image: 
        linear-gradient(rgba(12, 43, 28, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12, 43, 28, 0.05) 1px, transparent 1px);
      background-size: 40px 40px;
      background-position: center center;
    }
    .dot-matrix-canvas {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none;
      z-index: 1; /* Explicit background layer */
    }

    /* Grid 2: Glassmorphic 3D Stack (Auto-Expanded & Perfectly Centered) */
    .stack-container {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 260px; height: 180px;
      perspective: 1800px;
      z-index: 1; /* Explicit background layer */
      pointer-events: none;
    }
    .stack-wrapper {
      width: 100%; height: 100%;
      transform-style: preserve-3d;
      transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.2, 1);
      transform: rotateX(55deg) rotateZ(35deg);
    }
    .stack-layer {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      border-radius: 20px;
      border: 1px solid rgba(12, 43, 28, 0.1);
      background: rgba(227, 231, 211, 0.5);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Chillax', sans-serif; font-weight: 700; font-size: 2.2rem; letter-spacing: 0.1em;
    }
    
    /* Permanent Expanded 3D States */
    .stack-layer-1 { transform: translateZ(-90px); opacity: 1; box-shadow: inset 0 0 20px rgba(255,255,255,0.3), 0 30px 50px -15px rgba(0,0,0,0.1); color: rgba(12, 43, 28, 0.4); border-color: rgba(12, 43, 28, 0.2); }
    .stack-layer-2 { transform: translateZ(-30px) scale(0.98); opacity: 0.95; background: rgba(12, 43, 28, 0.03); color: rgba(12, 43, 28, 0.5); border-color: rgba(12, 43, 28, 0.2); }
    .stack-layer-3 { transform: translateZ(30px) scale(0.96); opacity: 0.9; background: rgba(12, 43, 28, 0.05); border-color: rgba(12, 43, 28, 0.3); color: rgba(12, 43, 28, 0.7); }
    .stack-layer-4 { transform: translateZ(90px) scale(0.94); opacity: 0.85; background: rgba(214, 40, 40, 0.1); border-color: rgba(214, 40, 40, 0.5); box-shadow: inset 0 0 20px rgba(255,255,255,0.2), 0 40px 60px rgba(214, 40, 40, 0.15); color: #d62828; }

    @media (max-width: 767px) {
      .stack-container { width: 220px; height: 150px; }
      .stack-layer { font-size: 1.8rem; }
      .stack-layer-1 { transform: translateZ(-60px); }
      .stack-layer-2 { transform: translateZ(-20px) scale(0.98); }
      .stack-layer-3 { transform: translateZ(20px) scale(0.96); }
      .stack-layer-4 { transform: translateZ(60px) scale(0.94); }
    }

    /* Grid 3: Design Intuition (Minimal Aura) */
    .aura-follower {
      position: absolute;
      top: 0; left: 0;
      width: 400px; height: 400px;
      background: radial-gradient(circle, rgba(255, 183, 3, 0.15) 0%, rgba(214, 40, 40, 0.05) 50%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 1; /* Explicit background layer */
      transform: translate(-50%, -50%);
      will-change: transform;
    }

    /* Grid 4: Zero Shortcuts (Minimal Crosshair) */
    .crosshair-container {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1; /* Explicit background layer */
      overflow: hidden;
    }
    .crosshair-x {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(214, 40, 40, 0.3) 50%, transparent);
      will-change: transform;
    }
    .crosshair-y {
      position: absolute;
      top: 0; left: 0;
      width: 1px; height: 100%;
      background: linear-gradient(180deg, transparent, rgba(214, 40, 40, 0.3) 50%, transparent);
      will-change: transform;
    }
    .crosshair-center {
      position: absolute;
      top: 0; left: 0;
      width: 8px; height: 8px;
      border: 1px solid rgba(214, 40, 40, 0.8);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      will-change: transform;
    }

    /* Content Typography inside Grids - Strictly above background/canvas */
    .grid-title { position: relative; z-index: 10; pointer-events: none; }
    .grid-desc { position: relative; z-index: 10; pointer-events: none; }

    /* ---------------- LOADER & SITE BACKGROUND ---------------- */
    #loader {
      transition: opacity 0.8s cubic-bezier(0.85, 0, 0.15, 1), transform 1s cubic-bezier(0.85, 0, 0.15, 1);
      will-change: transform, opacity;
    }
    .loader-exit {
      transform: scale(2.5);
      opacity: 0 !important;
      pointer-events: none;
    }

    @keyframes colorJumble1 { 0%, 100% { color: #0C2B1C; } 25% { color: #d62828; } 50% { color: #ffb703; } 75% { color: #023e8a; } }
    @keyframes colorJumble2 { 0%, 100% { color: #0C2B1C; } 25% { color: #ffb703; } 50% { color: #023e8a; } 75% { color: #d62828; } }
    @keyframes colorJumble3 { 0%, 100% { color: #0C2B1C; } 25% { color: #023e8a; } 50% { color: #d62828; } 75% { color: #ffb703; } }
    .jumble-text span { display: inline-block; }
    .jumble-text span:nth-child(3n+1) { animation: colorJumble1 0.6s infinite steps(1); }
    .jumble-text span:nth-child(3n+2) { animation: colorJumble2 0.7s infinite steps(1); }
    .jumble-text span:nth-child(3n) { animation: colorJumble3 0.5s infinite steps(1); }
    .jumble-text.stop-jumble span { animation: none !important; color: #0C2B1C !important; }

    .mesh-bg {
      position: fixed; inset: 0; z-index: -2; background-color: #E3E7D3; 
    }
    .static-grain {
      position: fixed; inset: 0; z-index: -1; pointer-events: none;
      opacity: 0.15; mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      transform: translate3d(0, 0, 0); 
    }

/* --- Next block --- */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700&display=swap');
    
    @font-face {
      font-family: 'Luthon Southard Script';
      src: url('assets/fonts/Luthon Southard Script.ttf') format('truetype');
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Regular.otf') format('opentype');
      font-weight: 400;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Medium.otf') format('opentype');
      font-weight: 500;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Semibold.otf') format('opentype');
      font-weight: 600;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Bold.otf') format('opentype');
      font-weight: 700;
      font-display: swap;
    }
    @font-face {
      font-family: 'Scalter';
      src: url('assets/fonts/Scalter-SerifCondensed.otf') format('opentype');
      font-display: swap;
    }

    /* Global Scrollbar Disable */
    * {
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
    }
    *::-webkit-scrollbar {
      display: none; /* Chrome, Safari and Opera */
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Satoshi', sans-serif;
      overflow-x: hidden;
      cursor: default; 
      background-color: transparent; 
    }

    h1, h2, h3, h4, h5, h6, .font-main { font-family: 'Chillax', sans-serif; }
    .font-synaptive { font-family: 'Luthon Southard Script', cursive; }
    .font-scalter { font-family: 'Scalter', serif; }

    .scalter-style {
      font-family: 'Scalter', serif;
      font-weight: normal; /* THIS FIXES THE DARK FAUX-BOLD ISSUE */
      color: #ffb703; 
      -webkit-text-stroke: 2px #111111; 
      text-transform: uppercase;
      letter-spacing: 0.05em;
      text-shadow:
        1px 1px 0px #fb8500, 2px 2px 0px #fb8500, 3px 3px 0px #fb8500,
        4px 4px 0px #fb8500, 5px 5px 0px #fb8500, 6px 6px 0px #fb8500,
        7px 6px 0px #111111, 6px 7px 0px #111111, 7px 7px 0px #111111,
        8px 8px 0px #111111;
      line-height: 1;
      padding: 0 4px;
    }

    /* ---------------- PREMIUM SCROLL REVEALS ---------------- */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
      will-change: opacity, transform;
    }
    .reveal.active { opacity: 1; transform: translateY(0); }
    .delay-100 { transition-delay: 100ms; }
    .delay-200 { transition-delay: 200ms; }

    /* ---------------- HERO LETTERS ---------------- */
    .hero-letter {
      display: inline-block;
      will-change: transform;
      transform-origin: center;
    }
    @media (min-width: 768px) {
      .hero-letter { transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
    }

    /* ---------------- MOBILE DOCK NAV ---------------- */
    #mobile-dock {
      position: fixed; bottom: 1.5rem; left: 50%;
      transform: translateX(-50%) translateY(100px) scale(0.9);
      opacity: 0; transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 100; pointer-events: none; width: max-content;
    }
    #mobile-dock.visible {
      transform: translateX(-50%) translateY(0) scale(1);
      opacity: 1; pointer-events: auto;
    }

    /* ---------------- MAGNETIC BUTTONS & LINKS ---------------- */
    .magnetic { display: inline-block; will-change: transform; }

    .nav-link { position: relative; display: inline-block; padding: 0.25rem 0; }
    .nav-link::after {
      content: ''; position: absolute; width: 100%; height: 1.5px;
      bottom: 0px; left: 0; background-color: currentColor;
      transform: scaleX(0); transform-origin: bottom right;
      transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
    }
    @media (hover: hover) {
      .nav-link:hover::after, .nav-link.js-hovered::after {
        transform: scaleX(1); transform-origin: bottom left;
      }
    }

    .btn-elegant-fill {
      position: relative; overflow: hidden;
      transition: color 0.4s ease, border-color 0.4s ease; z-index: 1;
    }
    .btn-elegant-fill::before {
      content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      background-color: #0C2B1C; transform: scaleX(0); transform-origin: right;
      transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); z-index: -1;
    }
    @media (hover: hover) {
      .btn-elegant-fill:hover { color: #E3E7D3; border-color: #0C2B1C; }
      .btn-elegant-fill:hover::before { transform: scaleX(1); transform-origin: left; }
    }

    /* ---------------- BACKGROUNDS & GRAIN ---------------- */
    .mesh-bg { position: fixed; inset: 0; z-index: -2; background-color: #E3E7D3; }
    .static-grain {
      position: fixed; inset: 0; z-index: -1; pointer-events: none;
      opacity: 0.15; mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      transform: translate3d(0, 0, 0); 
    }

    /* ---------------- FORM INPUTS ---------------- */
    .contact-input:-webkit-autofill,
    .contact-input:-webkit-autofill:hover, 
    .contact-input:-webkit-autofill:focus, 
    .contact-input:-webkit-autofill:active{
        -webkit-box-shadow: 0 0 0 30px #E3E7D3 inset !important;
        -webkit-text-fill-color: #0C2B1C !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    /* ---------------- LOADER ---------------- */
    #loader { transition: opacity 0.8s cubic-bezier(0.85, 0, 0.15, 1), transform 1s cubic-bezier(0.85, 0, 0.15, 1); will-change: transform, opacity; }
    .loader-exit { transform: scale(2.5); opacity: 0 !important; pointer-events: none; }
    @keyframes colorJumble1 { 0%, 100% { color: #0C2B1C; } 25% { color: #d62828; } 50% { color: #ffb703; } 75% { color: #023e8a; } }
    @keyframes colorJumble2 { 0%, 100% { color: #0C2B1C; } 25% { color: #ffb703; } 50% { color: #023e8a; } 75% { color: #d62828; } }
    @keyframes colorJumble3 { 0%, 100% { color: #0C2B1C; } 25% { color: #023e8a; } 50% { color: #d62828; } 75% { color: #ffb703; } }
    .jumble-text span { display: inline-block; }
    .jumble-text span:nth-child(3n+1) { animation: colorJumble1 0.6s infinite steps(1); }
    .jumble-text span:nth-child(3n+2) { animation: colorJumble2 0.7s infinite steps(1); }
    .jumble-text span:nth-child(3n) { animation: colorJumble3 0.5s infinite steps(1); }
    .jumble-text.stop-jumble span { animation: none !important; color: #0C2B1C !important; }

/* --- Next block --- */

/* Import Satoshi for Subcontents (Body) */
    @import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700&display=swap');
    
    /* Fonts */
    @font-face {
      font-family: 'Luthon Southard Script';
      src: url('assets/fonts/Luthon Southard Script.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Regular.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Medium.otf') format('opentype');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Semibold.otf') format('opentype');
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Bold.otf') format('opentype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Scalter';
      src: url('assets/fonts/Scalter-SerifCondensed.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    /* Global Scrollbar Disable */
    * {
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
    }
    *::-webkit-scrollbar {
      display: none; /* Chrome, Safari and Opera */
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Satoshi', sans-serif;
      overflow-x: hidden;
      cursor: default; 
      background-color: transparent; 
    }

    h1, h2, h3, h4, h5, h6, .font-main {
      font-family: 'Chillax', sans-serif;
    }

    .font-synaptive {
      font-family: 'Luthon Southard Script', cursive;
    }

    .font-scalter {
      font-family: 'Scalter', serif;
    }

    .scalter-style {
      font-family: 'Scalter', serif;
      color: #ffb703; 
      -webkit-text-stroke: 2px #111111; 
      text-transform: uppercase;
      letter-spacing: 0.05em;
      text-shadow:
        1px 1px 0px #fb8500, 2px 2px 0px #fb8500, 3px 3px 0px #fb8500,
        4px 4px 0px #fb8500, 5px 5px 0px #fb8500, 6px 6px 0px #fb8500,
        7px 6px 0px #111111, 6px 7px 0px #111111, 7px 7px 0px #111111,
        8px 8px 0px #111111;
      line-height: 1;
      padding: 0 4px;
    }

    /* ---------------- PREMIUM SCROLL REVEALS ---------------- */
    .reveal {
      opacity: 0;
      transform: translateY(35px);
      transition: opacity 0.85s cubic-bezier(0.25, 1, 0.5, 1), transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
      will-change: opacity, transform;
    }
    .reveal.active { opacity: 1; transform: translateY(0); }
    .delay-100 { transition-delay: 100ms; }
    .delay-200 { transition-delay: 200ms; }
    .delay-300 { transition-delay: 300ms; }
    @media (max-width: 768px) { .reveal { transform: translateY(20px); } }

    /* ---------------- HERO LETTERS SCROLL PHYSICS ---------------- */
    .hero-letter {
      display: inline-block;
      will-change: transform;
      transform-origin: center;
    }
    @media (min-width: 768px) {
      .hero-letter { transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
    }

    /* ---------------- MOBILE DOCK NAV ---------------- */
    #mobile-dock {
      position: fixed; bottom: 1.5rem; left: 50%;
      transform: translateX(-50%) translateY(100px) scale(0.9);
      opacity: 0; transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 100; pointer-events: none; width: max-content;
    }
    #mobile-dock.visible {
      transform: translateX(-50%) translateY(0) scale(1);
      opacity: 1; pointer-events: auto;
    }

    /* ---------------- CONTINUOUS JS INTERACTIONS ---------------- */
    .magnetic { display: inline-block; will-change: transform; }

    .nav-link { position: relative; display: inline-block; padding: 0.25rem 0; }
    .nav-link::after {
      content: ''; position: absolute; width: 100%; height: 1.5px;
      bottom: 0px; left: 0; background-color: #0C2B1C;
      transform: scaleX(0); transform-origin: bottom right;
      transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
    }
    @media (hover: hover) {
      .nav-link:hover::after, .nav-link.js-hovered::after {
        transform: scaleX(1); transform-origin: bottom left;
      }
    }

    .btn-elegant-fill {
      position: relative; overflow: hidden;
      transition: color 0.4s ease, border-color 0.4s ease; z-index: 1;
    }
    .btn-elegant-fill::before {
      content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      background-color: #0C2B1C; transform: scaleX(0); transform-origin: right;
      transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); z-index: -1;
    }
    @media (hover: hover) {
      .btn-elegant-fill:hover { color: #E3E7D3; border-color: #0C2B1C; }
      .btn-elegant-fill:hover::before { transform: scaleX(1); transform-origin: left; }
    }

    /* Interactive Live Cards */
    .card-hover {
      transition: border-color 0.4s ease, background-color 0.4s ease, border-radius 0.4s ease, box-shadow 0.4s ease;
      border: 1px solid transparent; transform-style: preserve-3d; will-change: transform;
    }
    .card-hover.js-hovered {
      background-color: rgba(12, 43, 28, 0.03); border-color: rgba(12, 43, 28, 0.1);
      border-radius: 1.5rem; box-shadow: 0 20px 40px -15px rgba(12, 43, 28, 0.08);
    }

    /* ---------------- AWWWARDS RECENT WORK HOVER EFFECT ---------------- */
    .work-item {
      transition: padding-left 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease;
    }
    .work-item.js-hovered { padding-left: 1rem; background-color: rgba(12, 43, 28, 0.02); }
    
    .work-hover-img {
      position: absolute; top: 0; left: 0;
      width: 380px; height: 260px; object-fit: cover;
      border-radius: 1rem; pointer-events: none; opacity: 0;
      transform: translate(-50%, -50%) scale(0.8);
      transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
      z-index: 50;
      box-shadow: 0 30px 60px -12px rgba(0,0,0,0.3);
      background-color: #E3E7D3; /* Fallback Color */
      color: #0C2B1C;
      font-family: 'Chillax', sans-serif;
      display: flex; align-items: center; justify-content: center;
      will-change: transform, opacity;
    }
    .work-item.js-hovered .work-hover-img {
      opacity: 1;
    }
    @media (max-width: 768px) {
      .work-hover-img { display: none !important; }
      .work-item.js-hovered { padding-left: 0; background-color: transparent; }
    }

    /* Form Input Styles */
    .input-line {
      background: transparent; border: none; border-bottom: 1px solid #0C2B1C;
      border-radius: 0; padding: 8px 0; color: #0C2B1C; font-size: 15px; width: 100%;
      transition: border-bottom-width 0.3s ease, padding-bottom 0.3s ease;
    }
    .input-line:focus { outline: none; border-bottom-width: 2px; padding-bottom: 12px; }
    .input-line::placeholder { color: #0C2B1C; opacity: 0.6; }
    textarea.input-line { resize: vertical; min-height: 40px; }

    /* FAQ Smooth Grid Expansion */
    .faq-content {
      display: grid; grid-template-rows: 0fr; opacity: 0; padding-bottom: 0;
      transition: grid-template-rows 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease, padding 0.5s ease;
      will-change: grid-template-rows, opacity;
    }
    .faq-content > div { overflow: hidden; }
    .faq-content.open { grid-template-rows: 1fr; opacity: 0.9; padding-bottom: 1.5rem; }
    .faq-icon { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .faq-icon.open { transform: rotate(180deg); }

    /* ---------------- LOADER & ANIMATIONS ---------------- */
    #loader { transition: opacity 0.8s cubic-bezier(0.85, 0, 0.15, 1), transform 1s cubic-bezier(0.85, 0, 0.15, 1); will-change: transform, opacity; }
    .loader-exit { transform: scale(2.5); opacity: 0 !important; pointer-events: none; }

    @keyframes colorJumble1 { 0%, 100% { color: #0C2B1C; } 25% { color: #d62828; } 50% { color: #ffb703; } 75% { color: #023e8a; } }
    @keyframes colorJumble2 { 0%, 100% { color: #0C2B1C; } 25% { color: #ffb703; } 50% { color: #023e8a; } 75% { color: #d62828; } }
    @keyframes colorJumble3 { 0%, 100% { color: #0C2B1C; } 25% { color: #023e8a; } 50% { color: #d62828; } 75% { color: #ffb703; } }

    .jumble-text span { display: inline-block; }
    .jumble-text span:nth-child(3n+1) { animation: colorJumble1 0.6s infinite steps(1); }
    .jumble-text span:nth-child(3n+2) { animation: colorJumble2 0.7s infinite steps(1); }
    .jumble-text span:nth-child(3n) { animation: colorJumble3 0.5s infinite steps(1); }
    .jumble-text.stop-jumble span { animation: none !important; color: #0C2B1C !important; }

    /* ---------------- SITE BACKGROUND ---------------- */
    .mesh-bg { position: fixed; inset: 0; z-index: -2; background-color: #E3E7D3; }
    .static-grain {
      position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.15; mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); will-change: transform;
    }

/* --- Next block --- */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700&display=swap');
    
    @font-face {
      font-family: 'Luthon Southard Script';
      src: url('assets/fonts/Luthon Southard Script.ttf') format('truetype');
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Regular.otf') format('opentype');
      font-weight: 400;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Medium.otf') format('opentype');
      font-weight: 500;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Semibold.otf') format('opentype');
      font-weight: 600;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Bold.otf') format('opentype');
      font-weight: 700;
      font-display: swap;
    }
    @font-face {
      font-family: 'Scalter';
      src: url('assets/fonts/Scalter-SerifCondensed.otf') format('opentype');
      font-display: swap;
    }

    /* Global Scrollbar Disable */
    * {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    *::-webkit-scrollbar {
      display: none;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Satoshi', sans-serif;
      overflow-x: hidden;
      cursor: default; 
      background-color: transparent; 
    }

    h1, h2, h3, h4, h5, h6, .font-main { font-family: 'Chillax', sans-serif; }
    .font-synaptive { font-family: 'Luthon Southard Script', cursive; }
    .font-scalter { font-family: 'Scalter', serif; }

    /* ---------------- PREMIUM SCROLL REVEALS ---------------- */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
      will-change: opacity, transform;
    }
    .reveal.active { opacity: 1; transform: translateY(0); }
    .delay-100 { transition-delay: 100ms; }

    /* ---------------- MOBILE DOCK NAV ---------------- */
    #mobile-dock {
      position: fixed; bottom: 1.5rem; left: 50%;
      transform: translateX(-50%) translateY(100px) scale(0.9);
      opacity: 0; transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 100; pointer-events: none; width: max-content;
    }
    #mobile-dock.visible {
      transform: translateX(-50%) translateY(0) scale(1);
      opacity: 1; pointer-events: auto;
    }

    /* ---------------- MAGNETIC BUTTONS & LINKS ---------------- */
    .magnetic { display: inline-block; will-change: transform; }

    .nav-link { position: relative; display: inline-block; padding: 0.25rem 0; }
    .nav-link::after {
      content: ''; position: absolute; width: 100%; height: 1.5px;
      bottom: 0px; left: 0; background-color: currentColor;
      transform: scaleX(0); transform-origin: bottom right;
      transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
    }
    @media (hover: hover) {
      .nav-link:hover::after, .nav-link.js-hovered::after {
        transform: scaleX(1); transform-origin: bottom left;
      }
    }

    .btn-elegant-fill {
      position: relative; overflow: hidden;
      transition: color 0.4s ease, border-color 0.4s ease; z-index: 1;
    }
    .btn-elegant-fill::before {
      content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      background-color: #0C2B1C; transform: scaleX(0); transform-origin: right;
      transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); z-index: -1;
    }
    @media (hover: hover) {
      .btn-elegant-fill:hover { color: #E3E7D3; border-color: #0C2B1C; }
      .btn-elegant-fill:hover::before { transform: scaleX(1); transform-origin: left; }
    }

    /* ---------------- BACKGROUNDS & GRAIN ---------------- */
    .mesh-bg { position: fixed; inset: 0; z-index: -2; background-color: #E3E7D3; }
    .static-grain {
      position: fixed; inset: 0; z-index: -1; pointer-events: none;
      opacity: 0.15; mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      transform: translate3d(0, 0, 0); 
    }

    /* ---------------- LOADER ---------------- */
    #loader { transition: opacity 0.8s cubic-bezier(0.85, 0, 0.15, 1), transform 1s cubic-bezier(0.85, 0, 0.15, 1); will-change: transform, opacity; }
    .loader-exit { transform: scale(2.5); opacity: 0 !important; pointer-events: none; }
    @keyframes colorJumble1 { 0%, 100% { color: #0C2B1C; } 25% { color: #d62828; } 50% { color: #ffb703; } 75% { color: #023e8a; } }
    @keyframes colorJumble2 { 0%, 100% { color: #0C2B1C; } 25% { color: #ffb703; } 50% { color: #023e8a; } 75% { color: #d62828; } }
    @keyframes colorJumble3 { 0%, 100% { color: #0C2B1C; } 25% { color: #023e8a; } 50% { color: #d62828; } 75% { color: #ffb703; } }
    .jumble-text span { display: inline-block; }
    .jumble-text span:nth-child(3n+1) { animation: colorJumble1 0.6s infinite steps(1); }
    .jumble-text span:nth-child(3n+2) { animation: colorJumble2 0.7s infinite steps(1); }
    .jumble-text span:nth-child(3n) { animation: colorJumble3 0.5s infinite steps(1); }
    .jumble-text.stop-jumble span { animation: none !important; color: #0C2B1C !important; }

    /* LEGAL PROSE STYLES */
    .prose h2 {
      font-family: 'Chillax', sans-serif;
      font-size: 2.25rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: -0.02em;
      margin-top: 4rem;
      margin-bottom: 1.5rem;
      color: #0C2B1C;
      border-bottom: 2px solid rgba(12, 43, 28, 0.1);
      padding-bottom: 0.5rem;
    }
    .prose h3 {
      font-family: 'Chillax', sans-serif;
      font-size: 1.5rem;
      font-weight: 700;
      margin-top: 2rem;
      margin-bottom: 1rem;
      color: #0C2B1C;
    }
    .prose p {
      font-size: 1.125rem;
      line-height: 1.8;
      margin-bottom: 1.5rem;
      opacity: 0.9;
    }
    .prose ul {
      list-style-type: disc;
      padding-left: 1.5rem;
      margin-bottom: 1.5rem;
      opacity: 0.9;
      font-size: 1.125rem;
      line-height: 1.8;
    }
    .prose li {
      margin-bottom: 0.5rem;
    }
    .prose blockquote {
      border-left: 4px solid #d62828;
      padding-left: 1.5rem;
      margin: 1.5rem 0;
      background-color: rgba(12, 43, 28, 0.03);
      padding: 1.5rem;
      border-radius: 0 0.5rem 0.5rem 0;
      font-size: 1rem;
      line-height: 1.6;
    }
    @media (max-width: 768px) {
      .prose h2 { font-size: 1.75rem; margin-top: 3rem; }
      .prose h3 { font-size: 1.25rem; }
      .prose p, .prose ul, .prose blockquote { font-size: 1rem; }
    }

/* --- Next block --- */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700&display=swap');
    
    @font-face {
      font-family: 'Luthon Southard Script';
      src: url('assets/fonts/Luthon Southard Script.ttf') format('truetype');
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Regular.otf') format('opentype');
      font-weight: 400;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Medium.otf') format('opentype');
      font-weight: 500;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Semibold.otf') format('opentype');
      font-weight: 600;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Bold.otf') format('opentype');
      font-weight: 700;
      font-display: swap;
    }
    @font-face {
      font-family: 'Scalter';
      src: url('assets/fonts/Scalter-SerifCondensed.otf') format('opentype');
      font-display: swap;
    }

    /* Global Scrollbar Disable */
    * {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    *::-webkit-scrollbar {
      display: none;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Satoshi', sans-serif;
      overflow-x: hidden;
      cursor: default; 
      background-color: transparent; 
    }

    h1, h2, h3, h4, h5, h6, .font-main { font-family: 'Chillax', sans-serif; }
    .font-synaptive { font-family: 'Luthon Southard Script', cursive; }
    .font-scalter { font-family: 'Scalter', serif; }

    /* ---------------- PREMIUM SCROLL REVEALS ---------------- */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
      will-change: opacity, transform;
    }
    .reveal.active { opacity: 1; transform: translateY(0); }
    .delay-100 { transition-delay: 100ms; }

    /* ---------------- MOBILE DOCK NAV ---------------- */
    #mobile-dock {
      position: fixed; bottom: 1.5rem; left: 50%;
      transform: translateX(-50%) translateY(100px) scale(0.9);
      opacity: 0; transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 100; pointer-events: none; width: max-content;
    }
    #mobile-dock.visible {
      transform: translateX(-50%) translateY(0) scale(1);
      opacity: 1; pointer-events: auto;
    }

    /* ---------------- MAGNETIC BUTTONS & LINKS ---------------- */
    .magnetic { display: inline-block; will-change: transform; }

    .nav-link { position: relative; display: inline-block; padding: 0.25rem 0; }
    .nav-link::after {
      content: ''; position: absolute; width: 100%; height: 1.5px;
      bottom: 0px; left: 0; background-color: currentColor;
      transform: scaleX(0); transform-origin: bottom right;
      transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
    }
    @media (hover: hover) {
      .nav-link:hover::after, .nav-link.js-hovered::after {
        transform: scaleX(1); transform-origin: bottom left;
      }
    }

    .btn-elegant-fill {
      position: relative; overflow: hidden;
      transition: color 0.4s ease, border-color 0.4s ease; z-index: 1;
    }
    .btn-elegant-fill::before {
      content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      background-color: #0C2B1C; transform: scaleX(0); transform-origin: right;
      transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); z-index: -1;
    }
    @media (hover: hover) {
      .btn-elegant-fill:hover { color: #E3E7D3; border-color: #0C2B1C; }
      .btn-elegant-fill:hover::before { transform: scaleX(1); transform-origin: left; }
    }

    /* ---------------- BACKGROUNDS & GRAIN ---------------- */
    .mesh-bg { position: fixed; inset: 0; z-index: -2; background-color: #E3E7D3; }
    .static-grain {
      position: fixed; inset: 0; z-index: -1; pointer-events: none;
      opacity: 0.15; mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      transform: translate3d(0, 0, 0); 
    }

    /* ---------------- LOADER ---------------- */
    #loader { transition: opacity 0.8s cubic-bezier(0.85, 0, 0.15, 1), transform 1s cubic-bezier(0.85, 0, 0.15, 1); will-change: transform, opacity; }
    .loader-exit { transform: scale(2.5); opacity: 0 !important; pointer-events: none; }
    @keyframes colorJumble1 { 0%, 100% { color: #0C2B1C; } 25% { color: #d62828; } 50% { color: #ffb703; } 75% { color: #023e8a; } }
    @keyframes colorJumble2 { 0%, 100% { color: #0C2B1C; } 25% { color: #ffb703; } 50% { color: #023e8a; } 75% { color: #d62828; } }
    @keyframes colorJumble3 { 0%, 100% { color: #0C2B1C; } 25% { color: #023e8a; } 50% { color: #d62828; } 75% { color: #ffb703; } }
    .jumble-text span { display: inline-block; }
    .jumble-text span:nth-child(3n+1) { animation: colorJumble1 0.6s infinite steps(1); }
    .jumble-text span:nth-child(3n+2) { animation: colorJumble2 0.7s infinite steps(1); }
    .jumble-text span:nth-child(3n) { animation: colorJumble3 0.5s infinite steps(1); }
    .jumble-text.stop-jumble span { animation: none !important; color: #0C2B1C !important; }

    /* LEGAL PROSE STYLES */
    .prose h3 {
      font-family: 'Chillax', sans-serif;
      font-size: 1.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: -0.02em;
      margin-top: 3rem;
      margin-bottom: 1rem;
      color: #0C2B1C;
    }
    .prose p {
      font-size: 1.125rem;
      line-height: 1.8;
      margin-bottom: 1.5rem;
      opacity: 0.9;
    }
    .prose ul {
      list-style-type: disc;
      padding-left: 1.5rem;
      margin-bottom: 1.5rem;
      opacity: 0.9;
      font-size: 1.125rem;
      line-height: 1.8;
    }
    .prose li {
      margin-bottom: 0.5rem;
    }
    @media (max-width: 768px) {
      .prose h3 { font-size: 1.5rem; margin-top: 2.5rem; }
      .prose p, .prose ul { font-size: 1rem; }
    }

/* --- Next block --- */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700&display=swap');
    
    @font-face {
      font-family: 'Luthon Southard Script';
      src: url('assets/fonts/Luthon Southard Script.ttf') format('truetype');
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Regular.otf') format('opentype');
      font-weight: 400;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Medium.otf') format('opentype');
      font-weight: 500;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Semibold.otf') format('opentype');
      font-weight: 600;
      font-display: swap;
    }
    @font-face {
      font-family: 'Chillax';
      src: url('assets/fonts/Chillax-Bold.otf') format('opentype');
      font-weight: 700;
      font-display: swap;
    }
    @font-face {
      font-family: 'Scalter';
      src: url('assets/fonts/Scalter-SerifCondensed.otf') format('opentype');
      font-display: swap;
    }

    /* Global Scrollbar Disable */
    * {
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
    }
    *::-webkit-scrollbar {
      display: none; /* Chrome, Safari and Opera */
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Satoshi', sans-serif;
      overflow-x: hidden;
      cursor: default; 
      background-color: transparent; 
    }

    h1, h2, h3, h4, h5, h6, .font-main { font-family: 'Chillax', sans-serif; }
    .font-synaptive { font-family: 'Luthon Southard Script', cursive; }
    .font-scalter { font-family: 'Scalter', serif; }

    .scalter-style {
      font-family: 'Scalter', serif;
      color: #ffb703; 
      -webkit-text-stroke: 2px #111111; 
      text-transform: uppercase;
      letter-spacing: 0.05em;
      text-shadow:
        1px 1px 0px #fb8500, 2px 2px 0px #fb8500, 3px 3px 0px #fb8500,
        4px 4px 0px #fb8500, 5px 5px 0px #fb8500, 6px 6px 0px #fb8500,
        7px 6px 0px #111111, 6px 7px 0px #111111, 7px 7px 0px #111111,
        8px 8px 0px #111111;
      line-height: 1;
      padding: 0 4px;
    }

    /* ---------------- PREMIUM SCROLL REVEALS ---------------- */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
      will-change: opacity, transform;
    }
    .reveal.active { opacity: 1; transform: translateY(0); }
    .delay-100 { transition-delay: 100ms; }

    /* ---------------- MOBILE DOCK NAV ---------------- */
    #mobile-dock {
      position: fixed; bottom: 1.5rem; left: 50%;
      transform: translateX(-50%) translateY(100px) scale(0.9);
      opacity: 0; transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 100; pointer-events: none; width: max-content;
    }
    #mobile-dock.visible {
      transform: translateX(-50%) translateY(0) scale(1);
      opacity: 1; pointer-events: auto;
    }

    /* ---------------- MAGNETIC BUTTONS & LINKS ---------------- */
    .magnetic { display: inline-block; will-change: transform; }

    .nav-link { position: relative; display: inline-block; padding: 0.25rem 0; }
    .nav-link::after {
      content: ''; position: absolute; width: 100%; height: 1.5px;
      bottom: 0px; left: 0; background-color: currentColor;
      transform: scaleX(0); transform-origin: bottom right;
      transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
    }
    @media (hover: hover) {
      .nav-link:hover::after, .nav-link.js-hovered::after {
        transform: scaleX(1); transform-origin: bottom left;
      }
    }

    .btn-elegant-fill {
      position: relative; overflow: hidden;
      transition: color 0.4s ease, border-color 0.4s ease; z-index: 1;
    }
    .btn-elegant-fill::before {
      content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      background-color: #0C2B1C; transform: scaleX(0); transform-origin: right;
      transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); z-index: -1;
    }
    @media (hover: hover) {
      .btn-elegant-fill:hover { color: #E3E7D3; border-color: #0C2B1C; }
      .btn-elegant-fill:hover::before { transform: scaleX(1); transform-origin: left; }
    }

    /* ---------------- BACKGROUNDS & GRAIN ---------------- */
    .mesh-bg { position: fixed; inset: 0; z-index: -2; background-color: #E3E7D3; }
    .static-grain {
      position: fixed; inset: 0; z-index: -1; pointer-events: none;
      opacity: 0.15; mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      transform: translate3d(0, 0, 0); 
    }

    /* ---------------- LOADER ---------------- */
    #loader { transition: opacity 0.8s cubic-bezier(0.85, 0, 0.15, 1), transform 1s cubic-bezier(0.85, 0, 0.15, 1); will-change: transform, opacity; }
    .loader-exit { transform: scale(2.5); opacity: 0 !important; pointer-events: none; }
    @keyframes colorJumble1 { 0%, 100% { color: #0C2B1C; } 25% { color: #d62828; } 50% { color: #ffb703; } 75% { color: #023e8a; } }
    @keyframes colorJumble2 { 0%, 100% { color: #0C2B1C; } 25% { color: #ffb703; } 50% { color: #023e8a; } 75% { color: #d62828; } }
    @keyframes colorJumble3 { 0%, 100% { color: #0C2B1C; } 25% { color: #023e8a; } 50% { color: #d62828; } 75% { color: #ffb703; } }
    .jumble-text span { display: inline-block; }
    .jumble-text span:nth-child(3n+1) { animation: colorJumble1 0.6s infinite steps(1); }
    .jumble-text span:nth-child(3n+2) { animation: colorJumble2 0.7s infinite steps(1); }
    .jumble-text span:nth-child(3n) { animation: colorJumble3 0.5s infinite steps(1); }
    .jumble-text.stop-jumble span { animation: none !important; color: #0C2B1C !important; }

    /* ---------------- SERVICE ROW HOVERS ---------------- */
    .service-row {
      transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .service-num {
      transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }
    @media (hover: hover) {
      .service-row:hover { background-color: rgba(12, 43, 28, 0.03); }
      .service-row:hover .service-num { transform: translateX(10px); }
      
      .service-row.color-1:hover .service-num { color: #d62828; }
      .service-row.color-2:hover .service-num { color: #ffb703; }
      .service-row.color-3:hover .service-num { color: #023e8a; }
      .service-row.color-4:hover .service-num { color: #d62828; }
      .service-row.color-5:hover .service-num { color: #ffb703; }
      .service-row.color-6:hover .service-num { color: #0C2B1C; }
      .service-row.color-7:hover .service-num { color: #0C2B1C; }
    }