:root {
  /* Thematic Design Variables for Eye clarity theme */
  --vis-clarity-bg: #F5FAF6;
  --vis-clarity-surface: #FFFFFF;
  --vis-clarity-leaf: #2A7B54;
  --vis-clarity-leaf-hover: #1E5C3D;
  --vis-clarity-amber: #E07A25;
  --vis-clarity-ink: #112117;
  --vis-clarity-border: #DDE8E1;
  --vis-clarity-gradient: linear-gradient(135deg, #E6F3EC 0%, #FFFFFF 100%);
  
  /* Selected Random Fonts: Montserrat (Heading), Open Sans (Text) */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  
  /* Soft Rounded Style & Standard Shadows */
  --vis-radius: 16px;
  --vis-shadow: 0 10px 25px -5px rgba(42, 123, 84, 0.08), 0 8px 16px -6px rgba(42, 123, 84, 0.04);
}

/* Base Body Styles */
body {
  font-family: var(--font-body);
  background-color: var(--vis-clarity-bg);
  color: var(--vis-clarity-ink);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

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

/* CSS-Only Page Progress Bar */
@keyframes progress-grow { 
  to { width: 100%; } 
}
.scroll-progress {
  height: 4px;
  width: 0;
  background: var(--vis-clarity-amber);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  animation: progress-grow linear;
  animation-timeline: scroll();
}

/* Custom Interactive Buttons */
.sight-interactive-btn {
  border: none;
  background-color: var(--vis-clarity-amber);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: var(--vis-shadow);
}

.sight-interactive-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.sight-interactive-btn-underline {
  position: relative;
  text-decoration: none;
}

.sight-interactive-btn-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--vis-clarity-amber);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.sight-interactive-btn-underline:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* CSS-Only Animated Viewport Reveals */
@supports (animation-timeline: view()) {
  @keyframes slide-up {
    from { 
      opacity: 0; 
      transform: translateY(40px); 
    }
    to { 
      opacity: 1; 
      transform: translateY(0); 
    }
  }
  .reveal-step {
    animation: slide-up ease-in-out both;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
  }
}

/* Responsive Structural Layout Overrides without using Forbidden class names */
.eye-haven-wrap {
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Timeline Custom Connector styling */
.opti-milestone-list::before {
  content: '';
  position: absolute;
  left: calc(1.5rem - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--vis-clarity-border);
  z-index: 1;
}

/* CSS-Only Responsive Side Drawer Menu logic */
@media (max-width: 767px) {
  .iris-navigation {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background-color: var(--vis-clarity-ink);
    padding: 6rem 2rem;
    transition: right 0.3s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    z-index: 90;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
  }
  #eye-menu-checkbox:checked ~ .iris-navigation {
    right: 0;
  }
  #eye-menu-checkbox:checked ~ #burger-trigger-label span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
  }
  #eye-menu-checkbox:checked ~ #burger-trigger-label span:nth-child(2) {
    opacity: 0;
  }
  #eye-menu-checkbox:checked ~ #burger-trigger-label span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
  }
}

/* Form focus elements styling */
input:focus, textarea:focus {
  border-color: var(--vis-clarity-leaf) !important;
  box-shadow: 0 0 0 3px rgba(42, 123, 84, 0.15);
}

/* Subtle image tint rotation */
.animate-tint {
  filter: hue-rotate(15deg);
}