/* ============================================================
   Polish layer – loaded after style.css.
   Accessibility (contrast, focus), a more formal finish, and
   subtle motion. Everything here is additive/overriding so it
   can be reviewed or rolled back in one place.
   ============================================================ */

:root {
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --reveal-distance: 18px;
    --reveal-duration: 0.6s;
    --focus-ring: 0 0 0 3px #fff, 0 0 0 5px var(--primary);
}

/* ---------- Typography: a slightly tighter, more formal finish ---------- */
.section-header h2,
.about-text h2,
.services-content h2,
.cta-text h2,
.page-banner h1 { letter-spacing: -0.02em; }
.section-subtitle { color: var(--text-light); max-width: 680px; margin-left: auto; margin-right: auto; }

/* ---------- Section tag: quieter label, AA contrast ---------- */
.section-tag {
    letter-spacing: 2px;
    border-radius: 4px;
    padding: 5px 12px;
    color: var(--primary);
    background: rgba(var(--brand-rgb), 0.1);
    border-left: 3px solid var(--brand);
}
.section-tag.light {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-left-color: var(--brand-light);
}


/* Decorative rules keep the bright brand color (no text on them). */
.section-line {
    background: linear-gradient(90deg, var(--brand), var(--brand-light));
    transform-origin: left center;
}
.section-header .section-line { transform-origin: center; }
.footer-col h3::after { background: var(--brand); }

/* ---------- Buttons ---------- */
.btn {
    border-radius: 4px;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease,
                box-shadow 0.25s ease, transform 0.25s var(--ease-out);
}
.btn i { transition: transform 0.25s var(--ease-out); }
.btn:hover i.fa-arrow-right { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-primary:hover { box-shadow: 0 8px 22px rgba(var(--primary-rgb), 0.28); }
.btn-outline:hover { color: var(--primary-dark); }

/* ---------- Keyboard focus (was missing on most controls) ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ---------- Contrast fixes on dark / colored sections ---------- */
.hero-tag { font-size: 0.72rem; color: #fff; border-color: rgba(255, 255, 255, 0.45); background: rgba(0, 0, 0, 0.18); }
.hero-content p { opacity: 1; font-weight: 400; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.hero-scroll a { color: rgba(255, 255, 255, 0.85); }

.stat-card i,
.stat-plus { color: #fff; opacity: 0.9; }
.stat-card h4 { opacity: 0.92; }

.page-banner .breadcrumb { color: rgba(255, 255, 255, 0.82); }
.page-banner .breadcrumb a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.45); }
.page-banner .breadcrumb a:hover { text-decoration-color: #fff; }

.cta-text p { color: rgba(255, 255, 255, 0.85); }
.contact-info-card > p,
.contact-details span { opacity: 0.92; }

.footer-top { color: rgba(255, 255, 255, 0.78); }
.footer-col p,
.footer-col ul li a,
.contact-list li { color: rgba(255, 255, 255, 0.78); }
.footer-col ul li a:hover { color: #fff; }
.footer-bottom p { color: rgba(255, 255, 255, 0.68); }
.footer-bottom a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-socials a { color: rgba(255, 255, 255, 0.78); border-color: rgba(255, 255, 255, 0.25); }
.top-bar-right a:not(.top-bar-social) { color: rgba(255, 255, 255, 0.85); }

/* ---------- Header ---------- */
.header { transition: box-shadow 0.3s ease, background-color 0.3s ease; }
.header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14); }

/* ---------- Cards: consistent, restrained hover lift ---------- */
.application-card,
.cert-card,
.why-us-point-card,
.value-card-new,
.highlight-item,
.product-card,
.stat-card {
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}
.application-card:hover,
.cert-card:hover,
.why-us-point-card:hover,
.value-card-new:hover,
.highlight-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(16, 24, 40, 0.1);
}
.value-card-icon,
.why-point-icon,
.cert-icon { transition: transform 0.35s var(--ease-out); }
.value-card-new:hover .value-card-icon,
.why-us-point-card:hover .why-point-icon,
.cert-card:hover .cert-icon { transform: scale(1.06); }

/* ---------- Scroll reveal (smaller travel, smoother curve) ---------- */
[data-animate] {
    transform: translateY(var(--reveal-distance));
    transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) var(--ease-out);
    will-change: opacity, transform;
}
[data-animate="fade-right"] { transform: translateX(calc(var(--reveal-distance) * -1.4)); }
[data-animate="fade-left"]  { transform: translateX(calc(var(--reveal-distance) * 1.4)); }
[data-animate].animated { will-change: auto; }

/* Children of revealed grids rise in sequence (stagger set by main.js). */
.reveal-child {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s var(--ease-out);
    transition-delay: var(--stagger, 0ms);
}
.animated .reveal-child,
.reveal-child.animated { opacity: 1; transform: none; }

/* Section rule draws in once its header is revealed. */
[data-animate] .section-line { transform: scaleX(0); transition: transform 0.7s var(--ease-out) 0.2s; }
[data-animate].animated .section-line { transform: scaleX(1); }

/* ---------- Hero: slow push-in on the active slide, staggered copy ---------- */
.hero-slide { background-size: cover; }
.hero-slide::before {
    content: '';
    position: absolute; inset: 0;
    background: inherit;
    transform: scale(1.06);
    transition: transform 7s ease-out;
    z-index: 0;
}
.hero-slide.active::before { transform: scale(1); }
.hero-slide .hero-overlay { z-index: 1; }
.hero-slide .hero-content > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s var(--ease-out);
}
.hero-slide.active .hero-content > * { opacity: 1; transform: none; }
.hero-slide.active .hero-content > :nth-child(1) { transition-delay: 0.25s; }
.hero-slide.active .hero-content > :nth-child(2) { transition-delay: 0.4s; }
.hero-slide.active .hero-content > :nth-child(3) { transition-delay: 0.55s; }
.hero-slide.active .hero-content > :nth-child(4) { transition-delay: 0.7s; }
.hero-dot { width: 10px; height: 10px; transition: width 0.35s var(--ease-out), background-color 0.3s, border-color 0.3s; }
.hero-dot.active { width: 28px; border-radius: 6px; box-shadow: none; }

/* ---------- Forms ---------- */
.form-group input,
.form-group textarea,
.form-group select { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15); }
.contact-alert { animation: polish-pop 0.45s var(--ease-out) both; }
@keyframes polish-pop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Back to top ---------- */
.back-to-top { transform: translateY(10px); }
.back-to-top.visible { transform: none; }

/* ---------- Reduced motion: show everything, move nothing ---------- */
@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: 0ms !important;
    }
    [data-animate],
    .reveal-child,
    .hero-slide .hero-content > * { opacity: 1 !important; transform: none !important; }
    [data-animate] .section-line { transform: none; }
    .hero-slide::before { transform: none !important; }
    .clients-track { animation: none !important; }
}

/* ---------- Paragraphs ----------
   Alignment lives in refresh.css ("Paragraph alignment"). */

/* ---------- Light bands: Why Us, Value Proposition, Stats ----------
   These three sections were cyan with white text; they now sit on the same
   #FAF9F6 as Our Clients, so text, cards and controls switch to the light
   treatment. A hairline separates them where they meet other light bands. */
.why-us,
.services-bar,
.stats-section {
    background: #FAF9F6;
    color: var(--text);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.stats-overlay { display: none; }

/* Section headers */
.why-us .section-tag,
.services-bar .section-tag,
.services-bar .section-tag.light,
.stats-section .section-tag,
.stats-section .section-tag.light {
    color: var(--primary-dark);
    background: rgba(var(--brand-rgb), 0.1);
    border-left-color: var(--brand);
}
.why-us .section-header h2,
.services-content h2,
.stats-section .section-header h2 { color: var(--dark); }
.why-us .section-subtitle,
.services-content p,
.stats-section .section-subtitle { color: var(--text-light); }
.why-us .section-line,
.services-content .section-line,
.stats-section .section-line { background: linear-gradient(90deg, var(--brand), var(--brand-light)); }

/* Why Us: point cards become white cards */
.why-us-point-card {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.why-us-point-card:hover { background: #fff; border-color: rgba(var(--brand-rgb), 0.5); }
.why-point-icon { background: rgba(var(--brand-rgb), 0.12); }
.why-point-icon i { color: var(--primary-dark); }
.value-card-new { border: 1px solid var(--border); }

/* Value Proposition: button + accordion */
.services-content .btn-outline {
    color: var(--primary-dark);
    border-color: var(--primary-dark);
}
.services-content .btn-outline:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}
.services-bar .accordion-item { border: 1px solid var(--border); background: #fff; }
.services-bar .accordion-header { background: #fff; color: var(--dark); }
.services-bar .accordion-header:hover,
.services-bar .accordion-header.active { background: rgba(var(--brand-rgb), 0.06); color: var(--primary-dark); }
.services-bar .accordion-icon { color: var(--primary-dark); }
.services-bar .accordion-body { background: #fff; }
.services-bar .accordion-body p { color: var(--text); }

/* Stats: white cards, dark figures, brand icons */
.stats-section .stat-card {
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.stats-section .stat-card:hover { background: #fff; box-shadow: 0 14px 34px rgba(16, 24, 40, 0.1); }
.stats-section .stat-card i { color: var(--brand); opacity: 1; }
.stats-section .stat-number { color: var(--dark); }
.stats-section .stat-plus { color: var(--brand); opacity: 1; }
.stats-section .stat-card h4 { color: var(--text-light); opacity: 1; }
/* Stats header uses .section-header.light (white text) – override for the light band. */
.stats-section .section-header.light h2 { color: var(--dark); }
.stats-section .section-header.light .section-subtitle { color: var(--text-light); }
.stats-section .section-header.light .section-line { background: linear-gradient(90deg, var(--brand), var(--brand-light)); }

/* ---------- "Let's Talk" contact card: light treatment ---------- */
.contact-info-card {
    background: #FAF9F6;
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.contact-info-card h3,
.contact-details strong { color: var(--dark); }
.contact-info-card > p,
.contact-details span { color: var(--text-light); opacity: 1; }
.contact-icon { background: rgba(var(--brand-rgb), 0.12); color: var(--primary-dark); }
.contact-socials a { color: var(--primary-dark); border-color: var(--border); background: #fff; }
.contact-socials a:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

/* ---------- About Us – Vision & Mission: light treatment ---------- */
.aboutus-vision-mission {
    background: #FAF9F6;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.vm-overlay,
.vm-card-glow { display: none; }
.aboutus-vision-mission .section-header.light h2 { color: var(--dark); }
.aboutus-vision-mission .section-header.light .section-subtitle { color: var(--text-light); }
.aboutus-vision-mission .section-header.light .section-line { background: linear-gradient(90deg, var(--brand), var(--brand-light)); }
.aboutus-vision-mission .section-tag.light {
    color: var(--primary-dark);
    background: rgba(var(--brand-rgb), 0.1);
    border-left-color: var(--brand);
}

.vm-card-inner,
.vm-card:hover .vm-card-inner {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border);
}
.vm-card-inner { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.vm-card:hover .vm-card-inner { border-color: rgba(var(--brand-rgb), 0.5); box-shadow: 0 14px 34px rgba(16, 24, 40, 0.1); }
.vm-card-inner::before,
.vm-card:last-child .vm-card-inner::before { background: linear-gradient(90deg, var(--brand), rgba(var(--brand-rgb), 0)); }

.vm-icon,
.vm-icon.mission {
    background: rgba(var(--brand-rgb), 0.12);
    border: 1px solid rgba(var(--brand-rgb), 0.25);
    box-shadow: none;
}
.vm-icon i { color: var(--primary-dark); }
.vm-label,
.vm-label.mission { color: var(--dark); }
.vm-divider,
.vm-divider.mission { background: linear-gradient(90deg, var(--brand), transparent); }
.vm-richtext,
.vm-card p { color: var(--text-light); }

.vm-pillar,
.vm-goal { background: #FAF9F6; border: 1px solid var(--border); }
.vm-pillar:hover,
.vm-goal:hover { background: #fff; border-color: rgba(var(--brand-rgb), 0.5); }
.vm-pillar i { color: var(--primary-dark); }
.vm-pillar span,
.vm-goal span { color: var(--dark); }
.vm-goal-check { background: rgba(var(--brand-rgb), 0.12); border-color: rgba(var(--brand-rgb), 0.4); }
.vm-goal-check i { color: var(--primary-dark); }