*, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
  body { margin: 0; }
  img { display: block; max-width: 100%; }

  /* Focus visible for accessibility */
  :focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; border-radius: 4px; }

  /* Selection color */
  ::selection { background: #ccfbf1; color: #042f2e; }

  /* Subtle pattern for visual interest */
  .pattern-dots {
    background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px);
    background-size: 24px 24px;
  }

  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .group img { transition: none; }
    .group:hover img { transform: none; }
  }

  /* Mobile menu transitions */
  #mobile-menu { transition: max-height 0.3s ease, opacity 0.2s ease; }
  #mobile-menu.hidden { max-height: 0; opacity: 0; overflow: hidden; }
  #mobile-menu:not(.hidden) { max-height: 400px; opacity: 1; }

  /* Header shadow on scroll */
  #site-header.scrolled {
    box-shadow: 0 1px 8px rgba(15, 23, 42, 0.08);
  }