/* ==========================================================================
   GEMINI ASSOCIATES — DESIGN SYSTEM
   --------------------------------------------------------------------------
   Single source of truth for brand tokens, typography, elevation and motion.
   Loaded AFTER bootstrap.min.css and style.css so it can harmonise the
   page-level <style> blocks that already exist across the site.

   Layers:
     01. Design tokens
     02. Base + typography
     03. Accessibility
     04. Layout rhythm
     05. Components
     06. Motion / reveal
     07. Responsive
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
    /* --- Brand ramp (derived from the legacy #01A2D3 cyan) --- */
    --ga-brand-50:  #f0f9ff;
    --ga-brand-100: #e0f2fe;
    --ga-brand-200: #bae6fd;
    --ga-brand-300: #7dd3fc;
    --ga-brand-400: #38bdf8;
    --ga-brand-500: #01a2d3;
    --ga-brand-600: #0284c7;
    --ga-brand-700: #0369a1;
    --ga-brand-800: #075985;
    --ga-brand-900: #0c4a6e;

    /* --- Neutral ramp (slate) --- */
    --ga-ink-50:  #f8fafc;
    --ga-ink-100: #f1f5f9;
    --ga-ink-200: #e2e8f0;
    --ga-ink-300: #cbd5e1;
    --ga-ink-400: #94a3b8;
    --ga-ink-500: #64748b;
    --ga-ink-600: #475569;
    --ga-ink-700: #334155;
    --ga-ink-800: #1e293b;
    --ga-ink-900: #0f172a;
    --ga-ink-950: #0c1e38;

    /* --- Semantic surfaces --- */
    --ga-surface:        #ffffff;
    --ga-surface-subtle: var(--ga-ink-50);
    --ga-surface-muted:  var(--ga-ink-100);
    --ga-surface-dark:   #08172c;
    --ga-border:         var(--ga-ink-200);
    --ga-border-strong:  var(--ga-ink-300);
    --ga-border-brand:   var(--ga-brand-200);

    /* --- Semantic text --- */
    --ga-text-strong: var(--ga-ink-950);
    --ga-text-body:   var(--ga-ink-700);
    --ga-text-muted:  var(--ga-ink-500);
    --ga-text-invert: #ffffff;
    --ga-text-link:   var(--ga-brand-600);

    /* --- Accents --- */
    --ga-accent-amber:   #f59e0b;
    --ga-accent-emerald: #10b981;
    --ga-accent-rose:    #f43f5e;
    --ga-accent-indigo:  #6366f1;

    /* --- Gradients --- */
    --ga-gradient-brand: linear-gradient(135deg, var(--ga-brand-500) 0%, #0085a8 100%);
    --ga-gradient-brand-hover: linear-gradient(135deg, #0085a8 0%, #006b87 100%);
    --ga-gradient-sheen: linear-gradient(135deg, var(--ga-brand-400) 0%, var(--ga-brand-600) 100%);
    --ga-gradient-dark: linear-gradient(160deg, #0f172a 0%, #08172c 100%);

    /* --- Typography --- */
    --ga-font-display: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ga-font-body: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Fluid type scale — clamp(min, preferred, max) */
    --ga-text-xs:   0.78rem;
    --ga-text-sm:   0.875rem;
    --ga-text-base: 1rem;
    --ga-text-lg:   1.09rem;
    --ga-text-xl:   clamp(1.15rem, 1.4vw, 1.3rem);
    --ga-text-2xl:  clamp(1.4rem, 2vw, 1.75rem);
    --ga-text-3xl:  clamp(1.75rem, 2.6vw, 2.2rem);
    --ga-text-4xl:  clamp(2rem, 3.2vw, 2.75rem);
    --ga-text-5xl:  clamp(2.4rem, 4.6vw, 3.6rem);

    --ga-leading-tight: 1.2;
    --ga-leading-snug: 1.4;
    --ga-leading-normal: 1.65;
    --ga-tracking-tight: -0.022em;
    --ga-tracking-wide: 0.08em;

    /* --- Spacing scale (8pt grid) --- */
    --ga-space-1: 0.25rem;
    --ga-space-2: 0.5rem;
    --ga-space-3: 0.75rem;
    --ga-space-4: 1rem;
    --ga-space-5: 1.5rem;
    --ga-space-6: 2rem;
    --ga-space-7: 3rem;
    --ga-space-8: 4rem;
    --ga-space-9: 6rem;

    /* Vertical rhythm for full-bleed sections */
    --ga-section-y: clamp(3.5rem, 6vw, 6rem);

    /* --- Radii --- */
    --ga-radius-sm: 8px;
    --ga-radius-md: 12px;
    --ga-radius-lg: 18px;
    --ga-radius-xl: 24px;
    --ga-radius-pill: 999px;

    /* --- Elevation (tinted toward brand ink, never pure black) --- */
    --ga-shadow-xs: 0 1px 2px rgba(12, 30, 56, 0.06);
    --ga-shadow-sm: 0 2px 8px rgba(12, 30, 56, 0.06);
    --ga-shadow-md: 0 6px 20px rgba(12, 30, 56, 0.08);
    --ga-shadow-lg: 0 14px 36px rgba(12, 30, 56, 0.10);
    --ga-shadow-xl: 0 24px 60px rgba(12, 30, 56, 0.14);
    --ga-shadow-brand: 0 8px 24px rgba(1, 162, 211, 0.30);
    --ga-shadow-brand-lg: 0 14px 34px rgba(1, 162, 211, 0.42);

    /* --- Motion --- */
    --ga-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ga-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ga-duration-fast: 160ms;
    --ga-duration: 260ms;
    --ga-duration-slow: 520ms;

    /* --- Layout --- */
    --ga-header-h: 76px;
    --ga-focus-ring: 0 0 0 3px rgba(1, 162, 211, 0.45);
}

/* ==========================================================================
   02. BASE + TYPOGRAPHY
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Anchor links land below the sticky header instead of under it */
    scroll-padding-top: calc(var(--ga-header-h) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--ga-font-body);
    font-size: var(--ga-text-base);
    line-height: var(--ga-leading-normal);
    color: var(--ga-text-body);
    background-color: var(--ga-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ga-font-display);
    color: var(--ga-text-strong);
    line-height: var(--ga-leading-tight);
    letter-spacing: var(--ga-tracking-tight);
    text-wrap: balance; /* progressive enhancement */
}

h1, .h1 { font-size: var(--ga-text-5xl); font-weight: 700; }
h2, .h2 { font-size: var(--ga-text-4xl); font-weight: 700; }
h3, .h3 { font-size: var(--ga-text-2xl); font-weight: 600; }
h4, .h4 { font-size: var(--ga-text-xl);  font-weight: 600; }

p {
    text-wrap: pretty;
}

/* Long-form copy stays within a comfortable measure (~70ch) */
.ga-measure { max-width: 68ch; }
.ga-measure-narrow { max-width: 52ch; }

a {
    color: var(--ga-text-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--ga-duration-fast) ease;
}

a:hover { color: var(--ga-brand-700); }

img, video, svg {
    max-width: 100%;
    height: auto;
}

/* Prevent layout shift while images stream in */
img[width][height] { height: auto; }

::selection {
    background: var(--ga-brand-200);
    color: var(--ga-ink-950);
}

/* Branded scrollbar (WebKit + Firefox) */
@supports (scrollbar-color: red blue) {
    html {
        scrollbar-color: var(--ga-brand-300) var(--ga-ink-100);
        scrollbar-width: thin;
    }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ga-ink-100); }
::-webkit-scrollbar-thumb {
    background: var(--ga-brand-300);
    border-radius: var(--ga-radius-pill);
    border: 2px solid var(--ga-ink-100);
}
::-webkit-scrollbar-thumb:hover { background: var(--ga-brand-500); }

/* ==========================================================================
   03. ACCESSIBILITY
   ========================================================================== */

/* Skip link — visible only on keyboard focus */
.ga-skip-link {
    position: absolute;
    top: -100px;
    left: var(--ga-space-4);
    z-index: 100000;
    padding: 12px 22px;
    background: var(--ga-brand-600);
    color: #fff !important;
    font-family: var(--ga-font-display);
    font-weight: 600;
    border-radius: 0 0 var(--ga-radius-md) var(--ga-radius-md);
    text-decoration: none !important;
    transition: top var(--ga-duration) var(--ga-ease-out);
}

.ga-skip-link:focus {
    top: 0;
    outline: 3px solid var(--ga-brand-200);
}

/* Consistent, visible focus for keyboard users only */
:focus-visible {
    outline: 2px solid var(--ga-brand-600);
    outline-offset: 2px;
    border-radius: 4px;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ga-brand-600);
    outline-offset: 2px;
    box-shadow: var(--ga-focus-ring);
}

/* Mouse users don't get a ring */
:focus:not(:focus-visible) { outline: none; }

.ga-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Honour the OS "reduce motion" setting across the whole site */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html { scroll-behavior: auto; }

    .ga-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   04. LAYOUT RHYTHM
   --------------------------------------------------------------------------
   Normalises the inconsistent py-5 / py-lg-4 pairs used across sections into
   one fluid vertical scale, and alternates surfaces so adjacent sections are
   visually separated without hard borders.
   ========================================================================== */
.gemini-about-section,
.gemini-innovation-section,
.gemini-services-section,
.gemini-products-section,
.gemini-projects-section,
.gemini-values-section,
.gemini-certifications-section,
.gemini-contact-section,
.gemini-pillars-section {
    padding-top: var(--ga-section-y);
    padding-bottom: var(--ga-section-y);
    position: relative;
}

/* Inner containers no longer need to add their own vertical padding */
.gemini-about-section > .container.py-lg-4,
.gemini-innovation-section > .container.py-lg-4,
.gemini-services-section > .container.py-lg-4,
.gemini-products-section > .container.py-lg-4,
.gemini-projects-section > .container.py-lg-4,
.gemini-values-section > .container.py-lg-4,
.gemini-certifications-section > .container.py-lg-4,
.gemini-contact-section > .container.py-lg-4 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Alternating surface tint replaces the old 1px grey borders */
.gemini-innovation-section,
.gemini-products-section,
.gemini-values-section {
    background: var(--ga-surface-subtle) !important;
    border-top: 1px solid var(--ga-ink-100);
    border-bottom: 1px solid var(--ga-ink-100);
}

.gemini-about-section,
.gemini-services-section,
.gemini-projects-section,
.gemini-certifications-section {
    background: var(--ga-surface) !important;
}

/* Section heading block */
.ga-section-head {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: var(--ga-space-7);
    text-align: center;
}

/* ==========================================================================
   05. COMPONENTS
   ========================================================================== */

/* ---------- 5.1 Eyebrow badge (unified across all sections) ---------- */
.gemini-section-badge,
.pillars-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ga-brand-50);
    border: 1px solid var(--ga-border-brand);
    padding: 7px 16px;
    border-radius: var(--ga-radius-pill);
    color: var(--ga-brand-700);
    font-family: var(--ga-font-display);
    font-size: var(--ga-text-xs);
    font-weight: 700;
    letter-spacing: var(--ga-tracking-wide);
    text-transform: uppercase;
    line-height: 1.4;
}

/* Dark-background variant (hero) */
.hero-eyebrow-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: var(--ga-radius-pill);
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(125, 211, 252, 0.35);
    color: #e0f2fe;
    font-family: var(--ga-font-display);
    font-size: var(--ga-text-xs);
    font-weight: 700;
    letter-spacing: var(--ga-tracking-wide);
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ---------- 5.2 Section titles ---------- */
.about-title,
.values-main-title,
.services-main-title,
.products-main-title,
.projects-main-title,
.innovation-main-title,
.certifications-main-title,
.contact-main-title,
.pillars-main-title {
    font-family: var(--ga-font-display);
    font-size: var(--ga-text-4xl);
    font-weight: 700;
    color: var(--ga-text-strong);
    line-height: var(--ga-leading-tight);
    letter-spacing: var(--ga-tracking-tight);
}

.values-main-subtitle,
.services-main-subtitle,
.products-main-subtitle,
.projects-main-subtitle,
.innovation-main-subtitle,
.certifications-main-subtitle,
.contact-main-subtitle,
.pillars-main-subtitle {
    font-family: var(--ga-font-body);
    font-size: var(--ga-text-lg);
    line-height: var(--ga-leading-normal);
    color: var(--ga-text-muted);
    max-width: 68ch;
    margin-inline: auto;
}

/* ---------- 5.3 Unified card system ---------- */
.gemini-value-card,
.about-bento-card,
.innovation-card,
.contact-dept-card {
    background: var(--ga-surface);
    border: 1px solid var(--ga-border);
    border-radius: var(--ga-radius-lg);
    box-shadow: var(--ga-shadow-sm);
    height: 100%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition:
        transform var(--ga-duration) var(--ga-ease-out),
        box-shadow var(--ga-duration) var(--ga-ease-out),
        border-color var(--ga-duration) var(--ga-ease-out);
}

/* Gradient top-edge that wipes in on hover */
.gemini-value-card::before,
.about-bento-card::before,
.innovation-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--ga-gradient-sheen);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ga-duration-slow) var(--ga-ease-out);
    z-index: 2;
}

.gemini-value-card:hover::before,
.about-bento-card:hover::before,
.innovation-card:hover::before {
    transform: scaleX(1);
}

.gemini-value-card:hover,
.about-bento-card:hover,
.innovation-card:hover,
.contact-dept-card:hover,
.gemini-value-card:focus-within,
.about-bento-card:focus-within,
.innovation-card:focus-within {
    transform: translateY(-6px);
    border-color: var(--ga-border-brand);
    box-shadow: var(--ga-shadow-lg);
}

/* ---------- 5.4 Icon tiles ---------- */
.value-icon-box,
.bento-icon-box,
.innovation-icon-wrapper,
.product-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: var(--ga-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: var(--ga-space-4);
    transition: transform var(--ga-duration) var(--ga-ease-out);
}

.gemini-value-card:hover .value-icon-box,
.about-bento-card:hover .bento-icon-box,
.innovation-card:hover .innovation-icon-wrapper {
    transform: scale(1.08) rotate(-3deg);
}

/* Subtle tinted tile backgrounds */
.bg-blue-subtle    { background: #eff6ff; }
.bg-cyan-subtle    { background: #ecfeff; }
.bg-indigo-subtle  { background: #eef2ff; }
.bg-teal-subtle    { background: #f0fdfa; }
.bg-sky-subtle     { background: var(--ga-brand-50); }
.bg-emerald-subtle { background: #ecfdf5; }
.bg-amber-subtle   { background: #fffbeb; }
.bg-rose-subtle    { background: #fff1f2; }

.text-indigo { color: var(--ga-accent-indigo) !important; }

/* ---------- 5.5 Card typography ---------- */
.value-card-title,
.innovation-card-title {
    font-family: var(--ga-font-display);
    font-size: var(--ga-text-xl);
    font-weight: 600;
    color: var(--ga-text-strong);
    margin-bottom: var(--ga-space-2);
    line-height: var(--ga-leading-snug);
}

.value-card-desc,
.innovation-card-desc,
.bento-desc {
    font-family: var(--ga-font-body);
    font-size: var(--ga-text-sm);
    line-height: var(--ga-leading-normal);
    color: var(--ga-text-muted);
    margin-bottom: 0;
}

/* ---------- 5.6 Buttons ---------- */
.custom-button,
.about-cta-btn,
.hero-btn-primary,
.gemini-nav-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--ga-font-display);
    font-weight: 600;
    border: none;
    border-radius: var(--ga-radius-pill);
    background: var(--ga-gradient-brand);
    color: var(--ga-text-invert) !important;
    text-decoration: none !important;
    box-shadow: var(--ga-shadow-brand);
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    transition:
        transform var(--ga-duration) var(--ga-ease-out),
        box-shadow var(--ga-duration) var(--ga-ease-out);
}

/* Gradient cross-fade without repainting background */
.custom-button::after,
.about-cta-btn::after,
.hero-btn-primary::after,
.gemini-nav-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ga-gradient-brand-hover);
    opacity: 0;
    z-index: -1;
    transition: opacity var(--ga-duration) var(--ga-ease-out);
}

.custom-button:hover,
.about-cta-btn:hover,
.hero-btn-primary:hover,
.gemini-nav-cta:hover {
    transform: translateY(-3px);
    box-shadow: var(--ga-shadow-brand-lg);
    color: var(--ga-text-invert) !important;
}

.custom-button:hover::after,
.about-cta-btn:hover::after,
.hero-btn-primary:hover::after,
.gemini-nav-cta:hover::after {
    opacity: 1;
}

.custom-button:active,
.about-cta-btn:active,
.hero-btn-primary:active,
.gemini-nav-cta:active {
    transform: translateY(-1px);
}

/* Ghost / secondary button */
.hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--ga-font-display);
    font-weight: 600;
    border-radius: var(--ga-radius-pill);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #fff !important;
    text-decoration: none !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all var(--ga-duration) var(--ga-ease-out);
}

.hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-3px);
    color: #fff !important;
}

/* ---------- 5.7 Pills & chips ---------- */
.highlight-pill,
.cert-trust-pill,
.pillar-spec-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ga-surface-subtle);
    border: 1px solid var(--ga-border);
    padding: 8px 15px;
    border-radius: var(--ga-radius-pill);
    font-family: var(--ga-font-body);
    font-size: var(--ga-text-sm);
    font-weight: 600;
    color: var(--ga-ink-800);
    transition: all var(--ga-duration-fast) var(--ga-ease-out);
}

.highlight-pill:hover,
.cert-trust-pill:hover,
.pillar-spec-chip:hover {
    background: var(--ga-brand-50);
    border-color: var(--ga-border-brand);
    color: var(--ga-brand-700);
    transform: translateY(-2px);
}

/* ---------- 5.8 Forms ---------- */
.form-control,
.form-select {
    border: 1px solid var(--ga-border);
    border-radius: var(--ga-radius-md);
    padding: 0.8rem 1rem;
    font-family: var(--ga-font-body);
    font-size: var(--ga-text-base);
    color: var(--ga-text-strong);
    background-color: var(--ga-surface);
    transition:
        border-color var(--ga-duration-fast) ease,
        box-shadow var(--ga-duration-fast) ease;
}

.form-control::placeholder { color: var(--ga-ink-400); }

.form-control:focus,
.form-select:focus {
    border-color: var(--ga-brand-500);
    box-shadow: var(--ga-focus-ring);
    outline: none;
}

.form-floating > label { color: var(--ga-ink-500); }

/* ---------- 5.9 Back-to-top ----------
   jQuery fadeIn() sets display:block, so the glyph is centred with
   line-height rather than flex to stay robust under both states. */
.back-to-top {
    position: fixed;
    right: clamp(16px, 3vw, 40px);
    bottom: clamp(16px, 3vw, 40px);
    z-index: 99;
    display: none;
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border: none;
    border-radius: 50%;
    background: var(--ga-gradient-brand);
    color: #fff !important;
    font-size: 1.15rem;
    text-decoration: none !important;
    box-shadow: var(--ga-shadow-brand);
    transition:
        transform var(--ga-duration) var(--ga-ease-out),
        box-shadow var(--ga-duration) var(--ga-ease-out),
        background var(--ga-duration) var(--ga-ease-out);
}

.back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: var(--ga-shadow-brand-lg);
    background: var(--ga-gradient-brand-hover);
    color: #fff !important;
}

/* ---------- 5.10 Header & navigation ---------- */
.gemini-topbar {
    background: var(--ga-gradient-dark);
    color: var(--ga-ink-300);
    font-size: var(--ga-text-xs);
    font-family: var(--ga-font-body);
}

.topbar-badge,
.topbar-info { color: #ffffff !important; }
.topbar-divider { color: rgba(255, 255, 255, 0.25) !important; }

.topbar-link {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: color var(--ga-duration-fast) ease;
}

.topbar-link:hover { color: var(--ga-brand-300) !important; }

.gemini-header-wrapper {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--ga-ink-100);
    transition:
        box-shadow var(--ga-duration) var(--ga-ease-out),
        background var(--ga-duration) var(--ga-ease-out);
    z-index: 1030;
}

/* .is-stuck is toggled by main.js on scroll */
.gemini-header-wrapper.is-stuck {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--ga-shadow-md);
}

/* Scroll progress indicator along the bottom of the header */
.ga-scroll-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 3px;
    width: 100%;
    transform: scaleX(var(--ga-progress, 0));
    transform-origin: left;
    background: var(--ga-gradient-sheen);
    will-change: transform;
    pointer-events: none;
}

/* ==========================================================================
   06. MOTION / SCROLL REVEAL
   --------------------------------------------------------------------------
   IntersectionObserver-driven replacement for WOW.js. Elements are hidden
   only when JS is available (.ga-js guard) so no-JS users still see content.
   ========================================================================== */
.ga-js .ga-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity var(--ga-duration-slow) var(--ga-ease-out),
        transform var(--ga-duration-slow) var(--ga-ease-out);
    transition-delay: calc(var(--ga-i, 0) * 70ms);
    will-change: opacity, transform;
}

.ga-js .ga-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Directional variants */
.ga-js .ga-reveal-left  { transform: translateX(-30px); }
.ga-js .ga-reveal-right { transform: translateX(30px); }
.ga-js .ga-reveal-scale { transform: scale(0.96); }

.ga-js .ga-reveal-left.is-visible,
.ga-js .ga-reveal-right.is-visible,
.ga-js .ga-reveal-scale.is-visible {
    transform: none;
}

/* ==========================================================================
   07. RESPONSIVE REFINEMENTS
   ========================================================================== */
@media (max-width: 991.98px) {
    :root { --ga-header-h: 64px; }
}

/* Touch devices: no hover lift (avoids sticky :hover state after tap) */
@media (hover: none) {
    .gemini-value-card:hover,
    .about-bento-card:hover,
    .innovation-card:hover,
    .contact-dept-card:hover {
        transform: none;
        box-shadow: var(--ga-shadow-sm);
    }

    .custom-button:hover,
    .about-cta-btn:hover,
    .hero-btn-primary:hover,
    .hero-btn-secondary:hover {
        transform: none;
    }
}

@media (max-width: 575.98px) {
    .custom-button,
    .about-cta-btn,
    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
    }
}

/* ==========================================================================
   08. PRINT
   ========================================================================== */
@media print {
    .gemini-topbar,
    .gemini-header-wrapper,
    .back-to-top,
    .gemini-hero-video,
    .ga-scroll-progress,
    .footer .btn-social {
        display: none !important;
    }

    body { color: #000; background: #fff; }

    .ga-reveal { opacity: 1 !important; transform: none !important; }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
    }
}