/* --- SERVICES PAGE STYLES --- */
#services-hero { padding-top: 10rem; padding-bottom: 0; text-align: center; background-color: var(--background); position: relative; z-index: var(--z-raised);}
.dark #services-hero { background: linear-gradient(145deg, var(--dark-bg-deep) 0%, var(--dark-bg-accent) 96%); }
#services-section { background-color: var(--secondary); padding-top: 0; overflow: visible; position: relative; z-index: var(--z-base); }
#services-section .container { padding-top: 4rem; }
@media (min-width: 1024px) { #services-section .container { padding-top: 6rem; } }
#services-section .cs-container { width: 100%; max-width: 67.5rem; margin: auto; display: flex; flex-direction: column; align-items: center; gap: clamp(2rem, 4vw, 3rem); position: relative; z-index: var(--z-raised); padding-bottom: 4rem;}
@media (min-width: 1024px) { #services-section .cs-container { padding-bottom: 6rem;} }
#services-section .cs-content { text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; }
#services-section .cs-flex-group { width: 100%; display: flex; flex-direction: column; gap: 2rem; position: relative; }
#services-section .cs-button-group { display: flex; justify-content: center; align-items: stretch; align-content: flex-start; gap: 0.75rem; align-self: stretch; flex-wrap: wrap; margin-bottom: 1rem; }
#services-section .cs-option { font-family: var(--font-inter); font-size: clamp(0.875rem, 2vw, 1rem); font-weight: 700; text-transform: uppercase; line-height: 1.2em; box-sizing: border-box; padding: 0.75rem 1.5rem; background-color: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius-sm); position: relative; z-index: var(--z-raised); transition: all var(--transition-base) var(--ease-out-cubic), transform var(--transition-fast) var(--ease-out-cubic); cursor: pointer; }
#services-section .cs-option:before { content: ""; width: 100%; height: 100%; background: var(--primary); opacity: 0; display: block; position: absolute; top: 0; left: 0; z-index: var(--z-below); transition: opacity var(--transition-base); border-radius: var(--radius-sm); }
#services-section .cs-option:hover { cursor: pointer; border-color: var(--primary); transform: translateY(2px); }
#services-section .cs-option:hover:before { opacity: 0.15; }
#services-section .cs-option.cs-active { color: var(--primary); border-color: var(--primary); transform: scale(1.05) translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-xs); }
#services-section .cs-option.cs-active:before { opacity: 0.1; }
#services-section .cs-wrapper { position: relative; width: 100%; }
#services-section .cs-services-group { width: 100%; margin: 0; padding: clamp(1.5rem, 4vw, 2.5rem); display: block; background: var(--card); border-radius: var(--radius-card); border: 1px solid transparent; box-shadow: var(--shadow-sm); transition: transform var(--transition-slower) ease-out, opacity var(--transition-slow) ease-out, visibility var(--transition-slow), border-color var(--transition-slow) ease-out; transform-origin: top; will-change: transform, opacity; }
#services-section .cs-services-group.service-active { border-color: var(--border); }
#services-section .cs-services-group.cs-hidden { pointer-events: none; opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; transform: translateY(20px) scale(0.98); }
#services-section .service-content-block h3 { font-size: 1.75rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--foreground); letter-spacing: -0.02em; }
#services-section .service-content-block h4 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; font-weight: 600; margin-top: 2rem; margin-bottom: 1rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em;}
#services-section .service-content-block h4 i { font-size: 1.3em; }
#services-section .service-content-block p { line-height: var(--bodyLineHeight); margin-bottom: 1rem; color: var(--muted-foreground); }
#services-section .service-content-block ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1.5rem; }
#services-section .service-content-block li { position: static; padding-left: 0; margin-bottom: 0.75rem; line-height: var(--bodyLineHeight); color: var(--muted-foreground); }
#services-section .service-content-block li::before { content: none; }
#services-section .service-content-block p a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition-base) ease-out;}
#services-section .service-content-block p a:hover { color: var(--accent); }
.dark #services-section .cs-option { color: var(--muted-foreground); background-color: transparent; border-color: var(--border); }
.dark #services-section .cs-option:hover { border-color: var(--dark-foreground); color: var(--dark-foreground); }
.dark #services-section .cs-option.cs-active { 
  border-color: var(--dark-foreground);
  color: var(--dark-foreground);
  animation: ulGlow 7.2s forwards infinite;
  box-shadow:
    var(--dark-glow) 0px 0px 14px,
    inset var(--dark-glow) 0px 0px 10px,
    inset var(--dark-glow) 0px 0px 25px,
    var(--dark-glow) 0px 0px 25px;
}
.dark #services-section .cs-services-group { background-color: var(--card); border-color: var(--border); box-shadow: none; }
.dark #services-section .cs-services-group.service-active { border-color: hsla(var(--primary-hsl), 0.5); }

/* --- DECORATIVE BUBBLES (positions only; base in root.css) --- */
#services-section { overflow: visible; }
#services-section .cs-container { position: relative; }
#services-section .cs-bubbles:not(.cs-bubbles2) { bottom: 0.625em; right: -16.25em; }
#services-section .cs-bubbles.cs-bubbles2 { font-size: min(1.5vw, 0.5rem); height: 26.6875em; width: 26.1875em; bottom: auto; right: auto; left: -7.5rem; top: 15.625rem; transform: rotate(45deg); }

/* CTA styles consolidated in root.css */

/* --- Footer Swoosh --- */
.cs-footer-swoosh-container { color: var(--secondary); background-color: transparent; position: relative; z-index: var(--z-raised); line-height: 0; pointer-events: none;}
.cs-footer-swoosh { width: 100%; height: auto; display: block; }

#services-community { background-color: var(--secondary); padding-top: 0; padding-bottom: 8rem; }

.dark #services-section .cs-services-group.service-active {
    border-color: hsla(var(--primary-hsl), 0.5);
    /* This animation creates the pulsing glow effect */
    animation: ulGlow 7.2s forwards infinite;
    /* This is the base box-shadow for the glow */
    box-shadow: var(--dark-glow) 0px 0px 14px, inset var(--dark-glow) 0px 0px 10px, inset var(--dark-glow) 0px 0px 25px, var(--dark-glow) 0px 0px 25px;
  }

    /* community-card: canonical definition lives in root.css */

    /* reveal-up: canonical definition lives in root.css */