:root {
  --joint-bg: #faf9f6;
  --joint-surface: #ffffff;
  --joint-tone: #2e5a36; /* Deep organic forest green */
  --joint-tone-hover: #1f3d24;
  --joint-ink: #2b2e2a; /* Dark warm charcoal */
  --joint-light: #f3efe6; /* Sand/cream light shade */
  --joint-accent: #d17538; /* Warm rust orange/terracotta */
  --joint-shadow: 0 8px 30px rgba(46, 90, 54, 0.06);
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  --joint-border-radius: 16px; /* Soft style as per prompt instructions */
}

/* Base resets */
* {
  scroll-behavior: smooth;
  font-family: var(--font-body);
}

h1, h2, h3, h4, .joint-font-heading {
  font-family: var(--font-display);
}

/* Custom Scroll Progress Bar via only CSS animations */
@keyframes progress-grow {
  to { width: 100%; }
}
.scroll-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 0;
  background: var(--joint-accent);
  animation: progress-grow linear;
  animation-timeline: scroll();
  z-index: 100;
}

/* Custom Scroll Reveal Animations (Scroll-driven) */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}
.joint-segment-plate {
  animation: slide-up 0.6s linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Specific component styling with neuromorphism-inspired hints */
.joint-info-pod {
  box-shadow: var(--joint-shadow);
  border: 1px solid rgba(46, 90, 54, 0.03);
}

/* CSS Only Mobile Drawer Toggle */
.joint-nav-links {
  display: flex;
}

@media (max-width: 767px) {
  .joint-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--joint-surface);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 2rem 1.5rem;
    border-top: 1px solid var(--joint-light);
  }

  #joint-drawer-toggle:checked ~ .joint-nav-links {
    display: block;
  }
}

/* Custom layout asymmetry styling */
.joint-hero-frame {
  clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
  border-radius: var(--joint-border-radius);
}

@media (max-width: 767px) {
  .joint-hero-frame {
    clip-path: none;
  }
}

/* Input Fields Focus State */
input:focus {
  border-color: var(--joint-tone) !important;
  box-shadow: 0 0 0 3px rgba(46, 90, 54, 0.15);
}

/* Micro-interactions */
.joint-click-anchor:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(209, 117, 56, 0.2);
}

.joint-info-pod:hover {
  transform: translateY(-4px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 15px 35px rgba(46, 90, 54, 0.1);
}