body { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, h5, h6, .font-display { font-family: 'Montserrat', sans-serif; }
/* Fallback colour = average of pattern-dark.webp (#424a53), so there's no
   bright flash before the texture/images load. White text on it is 9:1. */
.hero-gradient,
.hero-home {
    background-color: #424a53;
    background-image: url('img/pattern-dark.webp');
    background-repeat: repeat;
    background-size: auto;
}
/* Vertical padding only, so hero text lines up with the header logo and
   body sections (all share max-w-7xl + px-4 / sm:px-6 / lg:px-8). */
.hero-gradient img,
.hero-home img {
    background-color: #424a53;
}
.hero-content-panel {
    padding: 1.25rem 0;
}
@media (min-width: 768px) {
    .hero-content-panel {
        padding: 1.75rem 0;
    }
}

/* Tighten vertical rhythm for page hero headers and bottom CTA blocks */
.hero-gradient.py-20 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
@media (min-width: 768px) {
    .hero-gradient.md\:py-28 {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}

/* Modern nav */
.nav-glass {
    background: #142756;
}
.nav-glass.scrolled {
    background: #142756;
    box-shadow: 0 1px 30px rgba(0,0,0,0.2);
}

/* Nav link hover pill */
.nav-link {
    position: relative;
    transition: color 0.2s;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #3fcc93;
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: var(--underline-origin, 50%) 0;
    transition: transform 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

.nav-dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Bridge the gap between the Solutions button and its menu so hover isn't lost */
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -0.5rem;
    left: 0;
    right: 0;
    height: 0.5rem;
}

/* Mobile slide-in (hidden from keyboard/AT while closed) */
.mobile-panel {
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
}
.mobile-panel.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}
.mobile-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.mobile-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* ---------- Accessibility ---------- */

/* Skip link: visible on keyboard focus */
.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: #ffffff;
    color: #142756;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.skip-link:focus {
    top: 1rem;
}
#main-content:focus {
    outline: none;
}

/* Visible focus indicator (WCAG 2.4.7 / 2.4.11) */
:focus-visible {
    outline: 3px solid #1457de;
    outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #0c7351;
    outline-offset: 1px;
}
.nav-glass :focus-visible,
#mobile-panel :focus-visible,
footer :focus-visible,
.hero-gradient :focus-visible,
.hero-home :focus-visible,
.bg-primary-900 :focus-visible,
.bg-primary-950 :focus-visible {
    outline-color: #76e1b4;
}

/* Sticky header shouldn't cover focused/anchored content */
html {
    scroll-padding-top: 110px;
}

/* Respect reduced-motion preferences (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Forms ---------- */
.hp-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.form-status {
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    border: 1px solid;
}
.form-status--success {
    background: #edfcf5;
    border-color: #0c7351;
    color: #0b4b37;
}
.form-status--error {
    background: #fef2f2;
    border-color: #b91c1c;
    color: #7f1d1d;
}
.form-status:focus {
    outline: 3px solid #1457de;
    outline-offset: 2px;
}
[aria-invalid="true"] {
    border-color: #b91c1c !important;
}
.turnstile-wrap {
    min-height: 65px;
    max-width: 100%;
}
button[aria-busy="true"] {
    opacity: 0.75;
    cursor: progress;
}