/* Kanvtech theme overrides — fonts + brand colors, layered on top of the compiled Tailwind bundle */

/* On real mobile viewports, #topnav (position:fixed; left:0; right:0) was
   measuring wider than the actual screen (confirmed ~478px on a 390px-wide
   device), pushing the hamburger icon and phone number off past the visible
   edge and forcing a horizontal scrollbar site-wide. Pinning its width
   explicitly instead of relying on left/right alone, plus a hard
   overflow-x:hidden safety net on the page, eliminates both regardless of
   what specific content triggered the wider measurement. */
html, body {
    /* clip, not hidden: overflow-x:hidden computes overflow-y to auto on
       elements where it was visible, which silently turns html/body into a
       scroll container and breaks every position:sticky descendant on the
       page (found via tally-solutions.html's horizontal card gallery going
       blank). overflow:clip has no such side effect. */
    overflow-x: clip;
    max-width: 100vw;
}
#topnav {
    width: 100%;
    max-width: 100vw;
}
#topnav .container {
    max-width: 100%;
    box-sizing: border-box;
}

/* Fonts: Poppins (headings) + Inter (body), matching the logo's rounded-geometric wordmark */
:root {
    --font-nunito: "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Poppins", "Helvetica Neue", Arial, sans-serif;

    /* Brand colors from the logo: cyan K, deep-cyan/navy wordmark, coral swoosh */
    --color-accent: #F26A3D;
    --color-brand-navy: #0B1B2B;
}

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

/* Coral accent — use sparingly: one highlight word, one underline, hover states */
.text-accent { color: var(--color-accent); }
.border-accent { border-color: var(--color-accent); }
.bg-accent { background-color: var(--color-accent); }
.hover\:text-accent:hover { color: var(--color-accent); }
.hover\:border-accent:hover { border-color: var(--color-accent); }

/* Hero/heading gradient: bright cyan -> deep cyan */
.text-gradient-brand {
    background-image: linear-gradient(90deg, #05B4F3, #039ECE);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* WhatsApp brand green for the floating button (fixed hex, not a theme token) */
.bg-whatsapp { background-color: #25D366; }

/* ============================================================
   CLEANLINESS PASS
   ============================================================ */

/* Heading / body neutrals from the logo palette.
   Wrapped in @layer base so utility classes (text-white, text-primary, etc.)
   from Tailwind's `utilities` layer always win, matching how Tailwind v4's
   cascade layers (theme, base, components, utilities) are meant to resolve —
   unlayered CSS would otherwise beat utilities regardless of specificity. */
@layer base {
    h1, h2, h3, h4, h5, h6 { color: var(--color-brand-navy); }
    .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: var(--color-white); }
    body { color: #5B6472; }
    .dark body { color: var(--color-white); }
}

/* Font weight ceiling: never render above 700 */
h1, h2, h3, h4, h5, h6, .font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

/* Eyebrow labels: consistent small-caps style, primary color, wide tracking */
h6.text-primary.text-sm.font-bold.uppercase,
span.text-primary.text-xs.font-bold.uppercase {
    letter-spacing: .08em;
}

/* Section background wash: soft cyan instead of gray, used sparingly for alternating sections */
.bg-gray-50 { background-color: #F2FBFE; }
.dark .bg-gray-50 { background-color: var(--color-slate-800); }

/* Cards: consistent radius + hairline border, minimal shadow */
.rounded-md, .rounded-xl { border-radius: 14px; }
.shadow-sm, .shadow-xs {
    box-shadow: 0 1px 2px rgba(11, 27, 43, .04);
    border: 1px solid #EAEEF2;
}
.dark .shadow-sm, .dark .shadow-xs { border-color: rgba(255, 255, 255, .08); }

/* Buttons: unified pill shape, smooth hover, consistent everywhere */
a.rounded-md, button.rounded-md { border-radius: 999px; }
a[class*="bg-primary"], button[class*="bg-primary"] {
    transition: transform .25s ease-out, box-shadow .25s ease-out, background-color .25s ease-out, border-color .25s ease-out;
}
a[class*="bg-primary"]:hover, button[class*="bg-primary"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(3, 158, 206, .18);
}
a.border-primary.bg-transparent, a.border-primary.text-primary {
    transition: transform .25s ease-out, background-color .25s ease-out, color .25s ease-out;
}
a.border-primary.bg-transparent:hover, a.border-primary.text-primary:hover {
    transform: translateY(-2px);
}

/* ============================================================
   ANIMATION LAYER
   ============================================================ */

/* Card / feature hover lift (buttons handled above) */
.group.rounded-xl, .group.rounded-md, .counter-box, .card-hover {
    transition: transform .25s ease-out, border-color .25s ease-out, box-shadow .25s ease-out;
}
.group.rounded-xl:hover, .group.rounded-md:hover {
    transform: translateY(-4px);
}

/* Nav: smooth background/shadow transition on scroll-triggered sticky state */
#topnav { transition: background-color .3s ease-out, box-shadow .3s ease-out, backdrop-filter .3s ease-out; }
#topnav.nav-sticky { backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid #BEEBFA; }

/* Nav links: animated underline in primary color on hover/active */
.navigation-menu > li > a {
    position: relative;
}
.navigation-menu > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width .25s ease-out;
}
.navigation-menu > li > a:hover::after,
.navigation-menu > li.active > a::after {
    width: 100%;
}

/* Hero entrance: fade-up, staggered per line, runs once on load */
.hero-animate {
    opacity: 0;
    transform: translateY(16px);
    animation: kv-fade-up .6s ease-out forwards;
}
.hero-animate.hero-delay-1 { animation-delay: .15s; }
.hero-animate.hero-delay-2 { animation-delay: .3s; }
.hero-animate.hero-delay-3 { animation-delay: .45s; }

@keyframes kv-fade-up {
    to { opacity: 1; transform: translateY(0); }
}

/* Gentle float loop for hero illustration/imagery */
.float-loop {
    animation: kv-float 5s ease-in-out infinite;
}
@keyframes kv-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* AOS timing/easing overrides — calm, not bouncy */
[data-aos] {
    transition-duration: 500ms !important;
    transition-timing-function: ease-out !important;
}

/* Stagger card reveals within a grid, ~80-100ms apart */
.grid > [data-aos]:nth-child(2) { transition-delay: 90ms !important; }
.grid > [data-aos]:nth-child(3) { transition-delay: 180ms !important; }
.grid > [data-aos]:nth-child(4) { transition-delay: 270ms !important; }
.grid > [data-aos]:nth-child(5) { transition-delay: 360ms !important; }
.grid > [data-aos]:nth-child(6) { transition-delay: 450ms !important; }

/* Respect prefers-reduced-motion: disable all transforms/reveals */
@media (prefers-reduced-motion: reduce) {
    [data-aos], .hero-animate, .float-loop, .group.rounded-xl, .group.rounded-md,
    a[class*="bg-primary"], button[class*="bg-primary"], .counter-box {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ============================================================
   TESTIMONIAL MARQUEE (two-row, opposite-direction, CSS-only)
   ============================================================ */

.testimonial-marquee-row {
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* Fade-to-smoke edges so cards appear to dissolve in/out at left & right */
.testimonial-marquee-row::before,
.testimonial-marquee-row::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(48px, 10vw, 160px);
    z-index: 2;
    pointer-events: none;
}
.testimonial-marquee-row::before {
    left: 0;
    background: linear-gradient(to right, #FFFFFF, rgba(255, 255, 255, 0));
}
.testimonial-marquee-row::after {
    right: 0;
    background: linear-gradient(to left, #FFFFFF, rgba(255, 255, 255, 0));
}
.dark .testimonial-marquee-row::before {
    background: linear-gradient(to right, var(--color-slate-900), rgba(15, 23, 42, 0));
}
.dark .testimonial-marquee-row::after {
    background: linear-gradient(to left, var(--color-slate-900), rgba(15, 23, 42, 0));
}

.testimonial-track {
    display: flex;
    width: max-content;
    gap: 1.5rem;
    will-change: transform;
}

.testimonial-track-ltr { animation: kv-marquee-ltr 38s linear infinite; }
.testimonial-track-rtl { animation: kv-marquee-rtl 38s linear infinite; }

@keyframes kv-marquee-ltr {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}
@keyframes kv-marquee-rtl {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.testimonial-marquee-row:hover .testimonial-track {
    animation-play-state: paused;
}

.testimonial-card {
    flex: 0 0 320px;
    background: #FFFFFF;
    border: 1px solid #EAEEF2;
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(11, 27, 43, .04);
}
.dark .testimonial-card {
    background: var(--color-slate-900);
    border-color: rgba(255, 255, 255, .08);
}

.testimonial-card .stars i {
    color: var(--color-accent);
    font-size: 14px;
}

.testimonial-card .quote {
    color: #5B6472;
    font-size: .9375rem;
    line-height: 1.6;
    margin-top: .75rem;
    margin-bottom: 1.25rem;
}
.dark .testimonial-card .quote { color: var(--color-white); }

.testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    font-weight: 600;
    font-size: .8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.testimonial-card .name {
    color: var(--color-brand-navy);
    font-weight: 600;
    font-size: .9375rem;
}
.dark .testimonial-card .name { color: var(--color-white); }

.testimonial-card .role {
    color: #5B6472;
    font-size: .8125rem;
}

@media (max-width: 640px) {
    .testimonial-card { flex-basis: 260px; padding: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
    .testimonial-track-ltr, .testimonial-track-rtl {
        animation: none !important;
    }
}

/* ============================================================
   INDUSTRIES — sticky scroll-stacking cards
   ============================================================ */

.industry-stack {
    position: relative;
    margin-top: 1rem;
}

.industry-sticky {
    position: sticky;
    top: 96px;
    padding-bottom: 2.5rem;
}

.industry-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #EAEEF2;
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    box-shadow: 0 1px 2px rgba(11, 27, 43, .04);
    transition: transform .4s ease-out, opacity .4s ease-out, box-shadow .4s ease-out;
}
.industry-card-tint { background: #F2FBFE; }
.dark .industry-card { background: var(--color-slate-900); border-color: rgba(255, 255, 255, .08); }
.dark .industry-card-tint { background: var(--color-slate-800); }

.industry-card-media {
    min-height: 280px;
}
.industry-card-media img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    display: block;
}

.industry-card-body {
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    justify-content: center;
}

@media (min-width: 768px) {
    .industry-card {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: stretch;
    }
    .industry-card-reverse {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
    .industry-card-reverse .industry-card-media {
        order: 2;
    }
    .industry-card-media { min-height: 460px; }
    .industry-card-media img { min-height: 460px; }
    .industry-card-body { padding: 3rem 3.5rem; }
}

.industry-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    color: var(--color-primary);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.industry-card-title {
    color: var(--color-brand-navy);
    font-weight: 600;
    font-size: 1.375rem;
    margin-top: .5rem;
}
.dark .industry-card-title { color: var(--color-white); }

.industry-card-desc {
    color: #5B6472;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 46rem;
}
.dark .industry-card-desc { color: rgba(255, 255, 255, .7); }

/* Coral detail accent, used sparingly on the icon's inner ring */
.industry-card-icon::after {
    content: "";
    position: absolute;
    margin-top: -56px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--color-accent);
    transform: translate(20px, -4px);
}

/* Last card in the stack reads as the "active" one on top: stronger shadow */
.industry-sticky:last-child .industry-card {
    box-shadow: 0 16px 34px rgba(11, 27, 43, .14);
}

/* Cards behind the next one: scaled + dimmed, toggled via JS as the next card reaches the pin line */
.industry-sticky.is-covered .industry-card {
    transform: scale(.95);
    opacity: .85;
    box-shadow: 0 1px 2px rgba(11, 27, 43, .04);
}

/* Mobile: keep the same sticky-stack overlap as desktop, just sized for small screens */
@media (max-width: 767px) {
    .industry-sticky {
        padding-bottom: 1.75rem;
    }
    .industry-card-body { padding: 1.75rem 1.5rem; }
    .industry-card-media, .industry-card-media img { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
    .industry-sticky { position: static; }
    .industry-card, .industry-sticky.is-covered .industry-card {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
}

/* ============================================================
   FOOTER REVEAL — footer sits fixed at the bottom; page content
   scrolls over it and only uncovers it at the very end of the page.
   #site-content wraps everything except <footer>; JS sets its
   margin-bottom to the footer's real height so the reveal gap is exact.
   ============================================================ */

#site-content {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
}
.dark #site-content {
    background: var(--color-slate-900);
}

footer.site-footer-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 0;
}


@media (prefers-reduced-motion: reduce) {
    /* Reduced motion: keep the footer in normal document flow instead of a scroll-reveal effect */
    footer.site-footer-fixed {
        position: static;
    }
    #site-content {
        margin-bottom: 0 !important;
    }
}

/* ============================================================
   "Why Businesses Choose Kanvtech" tabs — short, uniform image height
   ============================================================ */
.why-tab-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}
@media (min-width: 768px) {
    .why-tab-img { height: 160px; }
}

/* ============================================================
   NAVBAR — breathing room + a sane megamenu
   ============================================================ */

#topnav .container {
    padding-top: 16px;
    padding-bottom: 16px;
    transition: padding .3s ease-out;
}
@media (min-width: 992px) {
    #topnav .container { max-width: 1400px; }
}
#topnav.nav-sticky .container {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Contact snippet in the nav action zone */
.nav-contact-email {
    color: #5B6472;
    font-weight: 500;
    font-size: .875rem;
    white-space: nowrap;
}
.nav-contact-email:hover { color: var(--color-primary); }
.dark .nav-contact-email { color: rgba(255, 255, 255, .75); }

.nav-contact-phone {
    color: #5B6472;
    font-weight: 500;
    font-size: .875rem;
    white-space: nowrap;
}
.nav-contact-phone:hover { color: var(--color-primary); }
.dark .nav-contact-phone { color: rgba(255, 255, 255, .75); }

/* Keep logo, nav links and the phone number on one row instead of the
   phone floating up to the top of the bar on its own line. */
@media (min-width: 992px) {
    #topnav .container { display: flex; align-items: center; flex-wrap: nowrap; }
    #topnav .container > .menu-extras { display: none; }
    #topnav .container > .logo { order: 1; flex: 0 0 auto; margin-inline-start: 1.5rem; }
    #topnav .container > #navigation { order: 2; flex: 1 1 auto; }
    #topnav .container > .buy-button { order: 3; flex: 0 0 auto; float: none; margin-inline-end: 5rem; }
}

/* Megamenu: the stock template centers this on the viewport at ~1100px wide,
   which drifts far away from the "Solutions & Services" trigger. Pin it under
   the trigger instead, and let it wrap into two compact columns (Services / Solutions).
   Desktop only (the mobile menu uses its own simple in-flow accordion submenu —
   applying this unconditionally forced a fixed 460px, 2-column grid onto the
   mobile dropdown too, which made it overflow horizontally and overlap the
   menu items below it). */
@media (min-width: 992px) {
    #topnav .navigation-menu > li .submenu.megamenu {
        position: absolute !important;
        inset-inline-start: 0 !important;
        top: 100% !important;
        translate: 0 0 !important;
        width: 460px !important;
        max-width: min(460px, 92vw) !important;
        white-space: normal !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
        padding: 1.5rem !important;
        box-shadow: 0 12px 30px rgba(11, 27, 43, .12);
    }
    #topnav .navigation-menu > li .submenu.megamenu > li {
        width: auto !important;
        flex: none !important;
    }
    #topnav .navigation-menu > li .submenu.megamenu > li > ul {
        padding: 0 !important;
    }
    #topnav .navigation-menu > li .submenu.megamenu .sub-menu-item {
        white-space: normal !important;
    }
}

/* ============================================================
   MOBILE NAV — rebuilt from scratch for <992px.
   The stock theme's mobile submenu only opens when the parent
   link's href is literally "javascript:void(0)" (see app.js);
   our menu items use real page URLs instead, so that toggle
   never fired and taps fell through to the desktop hover/absolute
   megamenu styling — a fixed 460px box that overflowed the
   screen and sat on top of the items below it. This block
   replaces the whole mobile presentation with a plain, in-flow
   stacked list, and the paired script (mobile-nav.js) drives the
   Solutions & Services arrow so tapping it expands the submenu
   in place instead of navigating away.
   ============================================================ */
@media (max-width: 991px) {
    #topnav .container { position: relative; }
    #navigation {
        position: static !important;
        clear: both !important;
        inset: auto !important;
        width: 100% !important;
        height: calc(100vh - 93px) !important;
        height: calc(100dvh - 93px) !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-shadow: none !important;
    }
    #topnav .navigation-menu,
    #topnav .navigation-menu > li {
        float: none !important;
        width: 100% !important;
    }
    /* "Solutions & Services" stays expanded on mobile instead of collapsing —
       simpler than a tap-to-expand accordion when there are only two groups. */
    #topnav .navigation-menu > li .submenu {
        position: static !important;
        inset: auto !important;
        translate: 0 0 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: .25rem 0 .5rem 1.25rem !important;
        box-shadow: none !important;
        background: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    #topnav .navigation-menu > li .submenu.megamenu {
        grid-template-columns: none !important;
        gap: 0 !important;
    }
    #topnav .navigation-menu > li .submenu.megamenu > li {
        width: 100% !important;
        overflow: visible !important;
    }
    #topnav .navigation-menu > li .submenu.megamenu > li > ul {
        padding-inline-start: 0 !important;
    }
    /* No longer a toggle — the submenu is always open, so the arrow has
       nothing left to indicate. */
    #topnav .navigation-menu > li.has-submenu > .menu-arrow {
        display: none !important;
    }
    /* Drop the "Solutions & Services" label itself — its submenu (Services /
       Solutions groups) already sits always-open right where it was, so the
       label was just a redundant extra heading above them. */
    #topnav .navigation-menu > li.has-submenu > a {
        display: none !important;
    }

    /* "Services" and "Solutions" stay expanded, same as the parent
       "Solutions & Services" — all links show right away, nothing to tap. */
    #topnav .navigation-menu .mm-group-title {
        display: flex !important;
        align-items: center;
        margin-top: .5rem !important;
    }
    #topnav .navigation-menu .mm-group-body {
        display: block !important;
    }
}

/* Reset default <ul> spacing/markers on the nested items list at all widths
   (desktop keeps it always visible, just without browser bullet styling). */
#topnav .navigation-menu .mm-group-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================================================
   DELIGHT LAYER — small touches that make the page feel alive
   ============================================================ */

/* 1. Top scroll-progress bar */
#scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #05B4F3, #039ECE);
    z-index: 1001;
    transition: width .1s linear;
}

/* 2. Back-to-top: circular scroll-progress ring around the button */
.back-to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.back-to-top-ring {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
}
.back-to-top-ring-bg {
    fill: none;
    stroke: rgba(11, 27, 43, .1);
    stroke-width: 3;
}
.dark .back-to-top-ring-bg { stroke: rgba(255, 255, 255, .15); }
.back-to-top-ring-fg {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 132;
    stroke-dashoffset: 132;
    transition: stroke-dashoffset .1s linear;
}
.back-to-top-icon {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: transform .25s ease-out;
}
.back-to-top:hover .back-to-top-icon {
    transform: translateY(-2px);
}

/* 3. WhatsApp floating button: gentle pulsing halo to invite a tap */
.whatsapp-fab {
    position: fixed;
}
/* On mobile the footer's bottom bar (copyright + policy links) reaches the
   true end of the page with nothing left to scroll past, so the fixed
   WhatsApp button was left permanently covering "Disclaimer" with no way
   to scroll it clear. Reserve space so the footer never sits under it. */
@media (max-width: 991px) {
    #site-footer {
        padding-bottom: 5rem;
    }
}
.whatsapp-fab-halo {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #25D366;
    opacity: .55;
    animation: kv-whatsapp-pulse 2.4s ease-out infinite;
    z-index: -1;
}
@keyframes kv-whatsapp-pulse {
    0% { transform: scale(1); opacity: .45; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* 4. Click ripple on every primary button/link */
.kv-ripple {
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    transform: scale(0);
    animation: kv-ripple-anim .55s ease-out forwards;
    pointer-events: none;
}
@keyframes kv-ripple-anim {
    to { transform: scale(2.6); opacity: 0; }
}

/* 5. Testimonial card 3D tilt on hover */
.testimonial-card {
    transform-style: preserve-3d;
    transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.testimonial-card:hover {
    box-shadow: 0 14px 28px rgba(11, 27, 43, .12);
}

/* 6. Counter "pop" once it finishes counting up */
.counter-value.kv-counted {
    display: inline-block;
    animation: kv-counter-pop .4s ease-out;
}
@keyframes kv-counter-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-fab-halo { animation: none !important; display: none; }
    .kv-ripple { animation: none !important; display: none; }
    .testimonial-card { transition: none !important; }
    .counter-value.kv-counted { animation: none !important; }
    #scroll-progress-bar, .back-to-top-ring-fg { transition: none !important; }
}

/* ============================================================
   HERO — full-bleed background photo, centered white text
   ============================================================ */

.hero-kv-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 27, 43, .55) 0%, rgba(11, 27, 43, .65) 100%);
    z-index: 0;
}

.hero-kv .container { position: relative; z-index: 1; }

.hero-eyebrow {
    letter-spacing: .06em;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
}

.hero-trust-row i {
    font-size: 1rem;
}
.hero-trust-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, .35);
}
@media (max-width: 480px) {
    .hero-trust-divider { display: none; }
}

@media (max-width: 767px) {
    .hero-kv-blob { display: none; }
}

/* ============================================================
   FOOTER — multi-column grid layout
   ============================================================ */

/* Footer cols wrapper spans 8 columns in the outer 12-column grid */
.footer-cols-wrapper {
    grid-column: span 8;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

/* Reset the old col-span classes for the first 3 columns */
.footer-cols-wrapper > div:nth-child(1),
.footer-cols-wrapper > div:nth-child(2),
.footer-cols-wrapper > div:nth-child(3) {
    grid-column: span 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
}

.footer-cols-wrapper > div:nth-child(2) {
    margin-left: -1.5rem !important;
}

.footer-cols-wrapper > div:nth-child(3) {
    margin-left: 0 !important;
}

/* HR and newsletter span full width of wrapper */
.footer-cols-wrapper > hr,
.footer-cols-wrapper > div:nth-child(5) {
    grid-column: 1 / -1 !important;
}

/* Reduce top margin of newsletter section */
.footer-newsletter {
    margin-top: 0.5rem !important;
}

/* Remove padding from footer column headings */
.footer-cols-wrapper h5 {
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 767px) {
    .footer-cols-wrapper {
        /* The outer footer grid is grid-cols-1 (one explicit column) below
           768px, so this must span 1, not 12 - spanning 12 into a 1-column
           parent forces 11 extra implicit 0-width columns, which squeezes
           the sibling logo column down to ~146px and wraps its text into
           far more lines than it needs, ballooning the fixed footer's
           height on mobile. (A 2-per-row layout was tried here instead of
           stacking all 3 groups, but the narrower columns made the longer
           links - "Spine Payroll & HRMS" etc - wrap onto more lines than
           they saved, so full-width stacking is actually shorter overall.) */
        grid-column: auto;
        grid-template-columns: 1fr;
    }
    .footer-cols-wrapper > div:nth-child(1),
    .footer-cols-wrapper > div:nth-child(2),
    .footer-cols-wrapper > div:nth-child(3),
    .footer-cols-wrapper > hr,
    .footer-cols-wrapper > div:nth-child(5) {
        grid-column: auto !important;
    }
    .footer-cols-wrapper > div:nth-child(2) {
        margin-left: 0 !important;
    }
    .footer-cols-wrapper > div:nth-child(2),
    .footer-cols-wrapper > div:nth-child(3) {
        margin-top: 0.5rem !important;
    }

    /* The footer is position:fixed (see FOOTER REVEAL above), so its full
       height must fit a short mobile viewport or the top of it is pushed
       off-screen and never becomes visible. Link groups wrap horizontally
       instead of one link per line, and vertical spacing is tightened,
       to keep the whole footer short enough to show completely. Desktop
       is untouched — this block only applies below 768px. */
    #site-footer .footer-list {
        display: flex;
        flex-wrap: wrap;
        column-gap: 1rem;
        row-gap: 0.4rem;
        margin-top: 0.6rem !important;
        font-size: 0.875rem;
    }
    #site-footer .footer-list li {
        margin: 0 !important;
    }

    /* The logo file is a wide, short wordmark (256x82) with no size
       constraint elsewhere, so it renders at full natural height. Cap it
       on mobile only; desktop is unaffected. */
    #site-footer .py-15 .grid > div:first-child img {
        max-height: 32px;
        width: auto;
    }
    /* The description paragraph wraps to 3 lines at the default 16px on a
       phone-width column; a touch smaller keeps it to 2. */
    #site-footer .py-15 .grid > div:first-child p {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    #site-footer .py-15 {
        padding-block: 0.75rem;
    }
    #site-footer .gap-7\.5 {
        gap: 0.75rem;
    }
    #site-footer .mt-6 {
        margin-top: 0.5rem;
    }
    #site-footer .py-7\.5 {
        padding-block: 0.5rem;
    }
    .footer-newsletter form.mt-4 {
        margin-top: 0.5rem;
    }
    /* Copyright line is long enough to wrap to 2 lines at the default
       text-sm on a phone-width column; text-xs keeps it to 1. */
    #site-footer .py-7\.5 .text-sm {
        font-size: 0.75rem;
        line-height: 1.4;
    }
}