/* ======================================================================
   ThinkValley — site-wide polish layer
   Loaded after tailwind.css on every public page. Not purged by Tailwind,
   so anything here is always available.
   ====================================================================== */
:root {
    --tv-blue: #0064d2;
    --tv-blue-dark: #0052ab;
    --tv-ink: #0f172a;
    --tv-ring: 0 0 0 3px rgba(0, 100, 210, 0.35);
    --tv-ease: cubic-bezier(.22, .61, .36, 1);
    color-scheme: light;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
/* Smooth scroll ONLY for focused-navigation (anchor clicks, keyboard).
   Global scroll-behavior:smooth made scrollbar drags rubber-band/lag —
   that was the "page drags behind the mouse" complaint. */
html:focus-within { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
img, video { max-width: 100%; height: auto; }
img[width][height] { height: auto; }
::selection { background: rgba(0, 100, 210, 0.18); color: var(--tv-ink); }

/* ---- Keyboard focus: visible for keyboard users only ---- */
:focus-visible { outline: 2px solid var(--tv-blue) !important; outline-offset: 3px !important; border-radius: 6px; }
input:focus, input:focus-visible, textarea:focus, textarea:focus-visible, select:focus, select:focus-visible { outline: none !important; box-shadow: none !important; }

/* ---- Skip link ---- */
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 10000; padding: 10px 16px; border-radius: 999px; background: var(--tv-ink); color: #fff; font-weight: 700; font-size: 13px; transform: translateY(-200%); transition: transform .2s var(--tv-ease); }
.skip-link:focus { transform: translateY(0); }

/* ---- Base type ---- Inter is variable (300–800) — medium body text
   reads noticeably bolder than the 400 default without touching markup.
   break-word stops long words/URLs overflowing on narrow screens. ---- */
body { font-weight: 500; overflow-wrap: break-word; }

/* ---- Fixed top bar: lift on scroll ---- */
.top-bar { background: #fff; border-bottom: 1px solid rgba(15, 23, 42, 0.06); transition: background-color .25s var(--tv-ease), box-shadow .25s var(--tv-ease), border-color .25s var(--tv-ease), transform .32s var(--tv-ease); }
.top-bar.is-hidden { transform: translateY(-105%); }
.top-bar.is-scrolled { background: rgba(255, 255, 255, 0.95) !important; border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important; box-shadow: 0 6px 24px -12px rgba(15, 23, 42, 0.18); }
/* backdrop-filter repaints the blurred backdrop on every scroll frame —
   it was the main scroll-jank source, so it stays off everywhere. */

/* ---- iPhone Safari zoom fix: focused form fields under 16px force a
   page zoom. Keep desktop sizes; bump to 16px on mobile widths. ---- */
@media (max-width: 768px) {
    input, textarea, select { font-size: 16px !important; }
}

/* No content-visibility on sections: unrendered sections used a 600px size
   guess and snapped to their real height mid-scroll, making the page jump
   (worst when scrolling back up). Stable layout beats skipped paint here. */

/* ---- Scroll reveal ---- transform/opacity only; no permanent will-change
   (a GPU layer per card exhausted mobile memory and caused stutter). */
.reveal { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .6s var(--tv-ease), transform .6s var(--tv-ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---- Buttons / cards: shared micro-interactions ---- */
a[class*="bg-blue-600"], button[class*="bg-blue-600"] { transition: background-color .2s var(--tv-ease), transform .2s var(--tv-ease), box-shadow .2s var(--tv-ease); }
a[class*="bg-blue-600"]:hover, button[class*="bg-blue-600"]:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(0, 100, 210, 0.6); }
a[class*="bg-blue-600"]:active, button[class*="bg-blue-600"]:active { transform: translateY(0); box-shadow: none; }
.tv-lift { transition: transform .22s var(--tv-ease), box-shadow .22s var(--tv-ease), border-color .22s var(--tv-ease); }
.tv-lift:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -18px rgba(15, 23, 42, 0.25); border-color: rgba(0, 100, 210, 0.35) !important; }
/* Touch screens: no sticky hover lift — a tapped card stayed shifted until the next tap. */
@media (hover: none) {
    .tv-lift:hover, .card:hover, a[class*="bg-blue-600"]:hover, button[class*="bg-blue-600"]:hover { transform: none; box-shadow: none; }
}

/* ---- Clickable-card affordance ----
   .tv-cardlink marks a card that navigates — a > chevron sits centred on
   the right edge so visitors can see it's clickable at a glance.
   .tv-stretch goes on the card's primary <a>: its ::before covers the
   whole card so the entire surface clicks through (other links stay
   above it via the z-index rule). */
.tv-cardlink { position: relative; }
.tv-cardlink::after { content: "›"; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 16px; font-weight: 800; line-height: 24px; text-align: center; z-index: 2; pointer-events: none; transition: background-color .2s var(--tv-ease), color .2s var(--tv-ease), transform .2s var(--tv-ease); }
.tv-cardlink:hover::after { background: var(--tv-blue); color: #fff; transform: translateY(-50%) translateX(2px); }
.tv-stretch::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.tv-cardlink a:not(.tv-stretch) { position: relative; z-index: 3; }
@media (hover: none) { .tv-cardlink::after { background: #e2e8f0; color: #475569; } }

/* ---- Smooth, stable scrolling ---- */
/* Horizontal marquees/carousels never chain into or block vertical page scroll. */
.rail-mask { contain: layout paint; }
.rail-track { backface-visibility: hidden; }
/* Snap rails: keep horizontal swipes chained inside the rail (no page
   back/forward gestures) and give iOS native momentum. */
[class*="snap-x"], .sig-track { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }

/* ---- Images: fade in as they load ---- */
img[loading="lazy"] { transition: opacity .4s var(--tv-ease); }
/* Native lazy loading must not hide decoded images when JavaScript is delayed. */
img[loading="lazy"].is-loaded { opacity: 1; }
/* Unloaded lazy images sit on a shimmering skeleton instead of blank space —
   on slow connections the frame reads as intentional rather than broken. */
img[loading="lazy"]:not(.is-loaded) {
    background: linear-gradient(90deg, #e2e8f0 25%, #eef2f7 37%, #e2e8f0 63%);
    background-size: 400% 100%;
    animation: tv-img-skeleton 1.4s ease infinite;
}
@keyframes tv-img-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { img[loading="lazy"]:not(.is-loaded) { animation: none; } }

/* ---- Skeleton placeholders for loading content ---- */
.tv-skeleton { position: relative; overflow: hidden; background: #e2e8f0; }
.tv-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); animation: tv-shimmer 1.4s infinite; }
@keyframes tv-shimmer { 100% { transform: translateX(100%); } }

/* ---- Back to top ---- */
.tv-top { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 8900; width: 44px; height: 44px; border-radius: 999px; background: #fff; color: var(--tv-ink); border: 1px solid rgba(15, 23, 42, 0.1); box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.35); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .25s var(--tv-ease), transform .25s var(--tv-ease), background-color .2s; }
.tv-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.tv-top:hover { background: var(--tv-blue); color: #fff; border-color: var(--tv-blue); }
body.no-wa .tv-top { bottom: calc(20px + env(safe-area-inset-bottom)); }

/* ---- Site footer ---- */
.site-footer { border-top: 1px solid #e2e8f0; background: #fff; }
.site-footer a { transition: color .15s var(--tv-ease); }
/* Footer nav links — bold sky chevron bullet on the row, not inline in the
   text: wrapped lines stay under the text (hanging indent) instead of
   sliding under the arrow. Icon-carrying rows keep their icon. */
.site-footer li:has(> a) { display: flex; align-items: baseline; gap: .35em; justify-content: flex-start; }
.site-footer li:has(> a)::before { content: "›"; font-weight: 900; color: #0ea5e9; }
/* Any row that already carries an icon never gets a chevron. */
.site-footer li:has(i)::before { content: none; }
/* Contact icons — real colors */
.site-footer .fa-phone { color: #16a34a; }
.site-footer .fa-envelope { color: #2563eb; }
.site-footer .fa-location-dot { color: #dc2626; }
.site-footer .fa-clock { color: #ea580c; }
/* Legal links — bold with a sky arrow that slides on hover */
.footer-legal a { font-weight: 800; color: #334155; }
.footer-legal a::after { content: "→"; color: #0ea5e9; font-weight: 900; margin-left: .3em; display: inline-block; transition: transform .2s var(--tv-ease); }
.footer-legal a:hover { color: #0f4fc7; }
.footer-legal a:hover::after { transform: translateX(3px); }
.site-footer .social a { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #f1f5f9; color: #475569; transition: background-color .2s var(--tv-ease), color .2s var(--tv-ease), transform .2s var(--tv-ease), filter .2s var(--tv-ease); }
/* Real brand colors */
.site-footer .social a[aria-label="Facebook"] { background: #1877F2; color: #fff; }
.site-footer .social a[aria-label="Instagram"] { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }
.site-footer .social a[aria-label="LinkedIn"] { background: #0A66C2; color: #fff; }
.site-footer .social a[aria-label="X"] { background: #111; color: #fff; }
.site-footer .social a[aria-label="TikTok"] { background: #010101; color: #fff; }
.site-footer .social a[aria-label^="WhatsApp"] { background: #25D366; color: #fff; }
.site-footer .social a:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* ---- Toast (status messages) ---- */
.tv-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 24px); z-index: 9500; max-width: min(92vw, 420px); padding: 12px 18px; border-radius: 14px; background: var(--tv-ink); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 20px 50px -20px rgba(15, 23, 42, 0.6); opacity: 0; pointer-events: none; transition: opacity .3s var(--tv-ease), transform .3s var(--tv-ease); display: flex; align-items: center; gap: 10px; }
.tv-toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tv-toast.is-error { background: #b91c1c; }
.tv-toast.is-success { background: #047857; }

/* ---- Misc ---- */
.tv-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #94a3b8; }
/* ---- Page hero — shared inner-page header band. Pure CSS gradients:
   instant paint, no image download, consistent with the homepage hero. ---- */
.page-hero {
    background:
        radial-gradient(60% 85% at 12% 0%, rgba(56, 189, 248, .20), transparent 62%),
        radial-gradient(55% 80% at 88% 10%, rgba(0, 100, 210, .16), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f2f7fd 100%);
    border-bottom: 1px solid #e2e8f0;
}
details .faq-icon { transition: transform .25s var(--tv-ease); }
.scroll-mt-nav { scroll-margin-top: 88px; }

/* ---- Mobile drawer (#mobileMenu) — slide-over nav below lg ----
   Purely additive: pages keep toggling -translate-x-full / .hidden in
   their own scripts; these rules only restyle and choreograph it.
   --i (set by site-ui.js) drives the open cascade. */
@media (max-width: 1023.98px) {
    /* Overlay fades instead of snapping. display:block intentionally beats
       .hidden's display:none — visibility/pointer-events keep it inert. */
    #mobileMenuOverlay {
        display: block; visibility: hidden; opacity: 0; pointer-events: none;
        background: rgba(2, 6, 23, .5);
        transition: opacity .3s var(--tv-ease), visibility .3s;
    }
    #mobileMenuOverlay:not(.hidden) { visibility: visible; opacity: 1; pointer-events: auto; }

    /* Panel — roomier, rounded trailing edge, deeper shadow, springy ease */
    #mobileMenu {
        width: min(20rem, 86vw); max-width: 86vw;
        background: #f8fafc;
        border-right: 1px solid rgba(15, 23, 42, .07);
        border-radius: 0 1.4rem 1.4rem 0;
        box-shadow: 32px 0 80px -28px rgba(2, 6, 23, .45);
        transition: transform .5s cubic-bezier(.16, 1, .3, 1);
    }

    /* Hamburger icon quarter-turns into the X while open */
    #mobileMenuBtn i { transition: transform .3s var(--tv-ease); }
    #mobileMenuBtn[aria-expanded="true"] i { transform: rotate(90deg); }
    /* FA glyphs ignore font-weight — a hairline stroke thickens the icons. */
    #mobileMenuBtn i { -webkit-text-stroke: .45px currentColor; }
    #mobileSearchBtn i { -webkit-text-stroke: .95px currentColor; color: #334155; }

    /* Slim in-drawer scrollbar */
    #mobileMenu nav::-webkit-scrollbar { width: 5px; }
    #mobileMenu nav::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

    /* Section headers: icon chip + trailing hairline */
    #mobileMenu h4 { display: flex; align-items: center; gap: .6rem; margin-left: .15rem; }
    #mobileMenu h4 i {
        width: 1.55rem; height: 1.55rem; flex: none;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: .66rem; color: var(--tv-blue);
        background: linear-gradient(135deg, #e0f2fe, #eff6ff);
        border: 1px solid rgba(14, 165, 233, .2); border-radius: .55rem;
    }
    #mobileMenu h4::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #e2e8f0, transparent); }

    /* Rows: flex so the slanted arrow can pin to the right edge */
    #mobileMenu nav a, #mobileMenu nav button {
        position: relative; display: flex; align-items: center; gap: .5rem;
        transition: background-color .18s var(--tv-ease), color .18s var(--tv-ease), transform .18s var(--tv-ease), box-shadow .18s var(--tv-ease);
    }
    #mobileMenu nav a::after {
        content: "→"; margin-left: auto; flex: none;
        font-weight: 800; font-size: .95em; line-height: 1;
        color: #94a3b8; opacity: .55; transform: rotate(-45deg);
        transition: transform .2s var(--tv-ease), color .2s var(--tv-ease), opacity .2s var(--tv-ease);
    }
    #mobileMenu nav a:hover::after { opacity: 1; color: var(--tv-blue); transform: rotate(-45deg) translate(2px, 0); }
    #mobileMenu nav a:hover, #mobileMenu nav button:hover { transform: translateX(4px); box-shadow: 0 4px 14px -6px rgba(0, 100, 210, .18); }
    #mobileMenu nav a:active, #mobileMenu nav button:active { transform: scale(.97); transition-duration: .06s; }

    /* Filled CTAs keep a white arrow */
    #mobileMenu nav a[class*="bg-"]::after { color: #fff; opacity: .85; }
    #mobileMenu nav a[class*="bg-"]:hover::after { color: #fff; }

    /* Current page — accent bar, set by site-ui.js */
    #mobileMenu nav a.is-current { background: #fff; color: var(--tv-blue); box-shadow: 0 2px 10px -4px rgba(0, 100, 210, .18); }
    #mobileMenu nav a.is-current::before {
        content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px;
        border-radius: 999px; background: linear-gradient(180deg, #0ea5e9, #0064d2);
    }
    #mobileMenu nav a.is-current::after { opacity: 1; color: var(--tv-blue); }

    /* Open cascade: groups slide/fade in one after another. The closed
       state carries no delay so each open replays cleanly. */
    #mobileMenu nav > div > div, #mobileMenu nav > a {
        opacity: 0; transform: translate3d(-22px, 0, 0);
        transition: opacity .3s var(--tv-ease), transform .42s cubic-bezier(.16, 1, .3, 1);
    }
    #mobileMenu:not(.-translate-x-full) nav > div > div,
    #mobileMenu:not(.-translate-x-full) nav > a {
        opacity: 1; transform: none;
        transition-delay: calc(.08s + var(--i, 0) * .045s);
    }
}
/* Touch screens: hover states must not leave rows shifted/elevated. */
@media (hover: none) {
    #mobileMenu nav a:hover, #mobileMenu nav button:hover { transform: none; box-shadow: none; }
}

/* ---- Signature panel (home) — "Built to make an impact" card ----
   Mobile: card overlaps the image's bottom edge so there's no dead gap
   (the image also uses its natural height below sm — no letterbox).
   Desktop: card overlaps the image's right edge for a layered layout. */
#systems .sig-panel { position: relative; }
@media (max-width: 639.98px) {
    #systems .sig-panel { margin-top: -1.15rem; margin-inline: .4rem; z-index: 2; box-shadow: 0 16px 38px -20px rgba(2, 6, 23, .3); }
}
@media (min-width: 640px) {
    #systems .sig-panel { margin-left: -2.5rem; z-index: 2; box-shadow: 0 20px 48px -24px rgba(2, 6, 23, .3); }
}
/* Slim gradient accent bar along the card's top edge */
#systems .sig-panel::before {
    content: ""; position: absolute; top: 0; left: 1.15rem; right: 1.15rem; height: 3px;
    border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #0ea5e9, #0064d2);
}

/* ---- Signature CTA — gradient pill that floats, glows and color-pulses
   so the "Explore services" action is unmissable. Arrow nudges ↗. ---- */
.sig-cta {
    position: relative; display: inline-flex; align-items: center; gap: .6rem;
    margin-top: 1rem; padding: .85rem 1.5rem; border-radius: 999px;
    font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: #fff !important; text-decoration: none;
    background: linear-gradient(135deg, #0ea5e9, #0064d2 60%, #0450b4);
    box-shadow: 0 12px 28px -10px rgba(0, 100, 210, .55);
    animation: sigCtaFloat 2.4s ease-in-out infinite, sigCtaGlow 2.4s ease-in-out infinite, sigCtaHue 3.8s ease-in-out infinite;
    transition: filter .2s var(--tv-ease);
}
.sig-cta i { transform: rotate(-45deg); animation: sigCtaArrow 1.5s ease-in-out infinite; }
.sig-cta:hover { animation-play-state: paused; filter: brightness(1.07); }
.sig-cta:hover i { animation-play-state: paused; }
.sig-cta:active { transform: scale(.96); }
@keyframes sigCtaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes sigCtaGlow { 0%, 100% { box-shadow: 0 12px 28px -10px rgba(0, 100, 210, .5); } 50% { box-shadow: 0 18px 40px -10px rgba(14, 165, 233, .8); } }
@keyframes sigCtaHue { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(-22deg); } }
@keyframes sigCtaArrow { 0%, 100% { transform: rotate(-45deg) translateX(0); } 50% { transform: rotate(-45deg) translateX(4px); } }
@media (min-width: 640px) {
    .sig-cta { margin-top: 1.5rem; padding: .95rem 1.7rem; font-size: .85rem; }
}
@media (hover: none) { .sig-cta:hover { transform: none; } }
/* In the hero action row / close section the card margin isn't needed
   (their own gaps already space things out) */
.hero-live .sig-cta, .cta-bg .sig-cta { margin-top: 0; }

/* Static variant — same pill look, no motion (used for the primary
   "Build your digital future" CTA); slightly smaller on phones. */
.sig-cta-static, .sig-cta-static i { animation: none; }
@media (max-width: 639.98px) {
    .sig-cta-static { padding: .65rem 1.15rem; font-size: .7rem; letter-spacing: .11em; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}

@media print {
    .top-bar, .tv-top, .wa-w, #tv-splash, .skip-link, .tv-toast { display: none !important; }
    body { padding-top: 0 !important; background: #fff !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #64748b; }
}

/* Hide the browser's own clear/decoration inside type="search" fields —
   pages render their own clear button so the two don't overlap. */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; }
input[type="search"]::-ms-clear, input[type="search"]::-ms-reveal { display: none; width: 0; height: 0; }
/* iOS keeps its own magnifier inside search fields regardless of the
   pseudo-element rules above — only none on the field itself removes it. */
input[type="search"] { -webkit-appearance: none; appearance: none; }

/* ---- Busy buttons ----
   .is-busy marks a control mid-action: contents hidden, spinner badge centred,
   clicks blocked (the button is disabled too, so it's inert either way).
   Works on light and dark fills — the white chip keeps the spinner readable. */
.is-busy { position: relative; pointer-events: none; opacity: .8; }
.is-busy, .is-busy > * { color: transparent !important; }
.is-busy > * { visibility: hidden; }
.is-busy::before {
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 22px; height: 22px; border-radius: 9999px;
    background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
}
.is-busy::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px;
    margin: -7px 0 0 -7px; border-radius: 50%;
    border: 2px solid rgba(100, 116, 139, .35); border-top-color: #2563eb;
    animation: tv-spin .6s linear infinite;
}
@keyframes tv-spin { to { transform: rotate(360deg); } }

/* ---- Inline loading indicator — animated spinner + label for "Loading…" states ---- */
.tv-loading { display: inline-flex; align-items: center; gap: 8px; color: #94a3b8; font-size: 13px; }
.tv-loading::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid rgba(148,163,184,.4); border-top-color: #2563eb; animation: tv-spin .6s linear infinite; }

/* ---- Navigation progress bar — shows while the browser loads the next page ---- */
#tv-navprog { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 10002; pointer-events: none;
    background: linear-gradient(90deg, #0064d2, #38bdf8); border-radius: 0 3px 3px 0;
    box-shadow: 0 0 8px rgba(0,100,210,.45);
    transition: width .9s cubic-bezier(.2,.6,.3,1), opacity .25s ease; }
#tv-navprog.is-out { opacity: 0; }

/* ---- Instant press feedback — every button visibly registers the first tap ---- */
button:active:not(:disabled):not(.is-busy), [role="button"]:active:not(:disabled):not(.is-busy) { transform: translateY(1px); }