:root {
  --joint-care-bg: #F5F9F7;
  --joint-care-surface: #FFFFFF;
  --joint-care-tint: #D4EDE4;
  --joint-care-tone: #247C5A;
  --joint-care-tone-hover: #17543C;
  --joint-care-ink: #0F3124;
  --joint-care-ink-muted: #4B6E60;
  --joint-care-gradient: linear-gradient(135deg, #247C5A 0%, #0F3124 100%);
  --joint-care-accent-gold: #D4AF37;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  --joint-care-radius: 16px;
  --joint-care-shadow: 0 10px 30px -10px rgba(15, 49, 36, 0.08), 0 1px 3px rgba(15, 49, 36, 0.03);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  text-transform: uppercase;
}

/* Scroll-driven animations */
@keyframes progress-grow { 
  to { width: 100%; } 
}

.joint-scroll-prog { 
  height: 4px; 
  width: 0; 
  background: var(--joint-care-accent-gold); 
  animation: progress-grow linear; 
  animation-timeline: scroll(); 
  position: fixed; 
  top: 0; 
  left: 0; 
  z-index: 100; 
}

@keyframes slide-up { 
  from { opacity: 0; transform: translateY(40px); } 
  to { opacity: 1; transform: none; } 
}

.joint-reveal { 
  animation: slide-up 0.6s linear both; 
  animation-timeline: view(); 
  animation-range: entry 0% entry 40%; 
}

/* Header & Hamburger drawer styles */
#joint-menu-trigger:checked ~ .joint-mobile-drawer {
    transform: translateX(0);
}

#joint-menu-trigger:checked ~ #joint-hamburger-lbl span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

#joint-menu-trigger:checked ~ #joint-hamburger-lbl span:nth-child(2) {
    opacity: 0;
}

#joint-menu-trigger:checked ~ #joint-hamburger-lbl span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.joint-mobile-drawer {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.joint-mobile-link {
  color: var(--joint-care-ink);
  transition: color 0.2s ease;
}

.joint-mobile-link:hover {
  color: var(--joint-care-tone);
}

/* Bento Grid */
.joint-bento-pack {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}

.joint-bento-cell {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.joint-bento-cell:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px -5px rgba(15, 49, 36, 0.12);
}

.joint-bento-cell-large {
  grid-column: span 4;
}

.joint-bento-cell-narrow {
  grid-column: span 2;
}

.joint-bento-cell-medium {
  grid-column: span 3;
}

.joint-bento-cell-wide {
  grid-column: span 6;
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
  .joint-bento-cell-large,
  .joint-bento-cell-narrow,
  .joint-bento-cell-medium,
  .joint-bento-cell-wide {
    grid-column: span 6 !important;
  }
  
  .joint-bento-pack {
    gap: 1rem;
  }
}