/* ==========================================================================
   GEMINI ASSOCIATES — SITE QUALITY LAYER
   Shared final-pass rules for predictable responsive behaviour, accessibility
   and visual consistency across the legacy PHP templates.
   ========================================================================== */

:root {
    --ga-content-max: 1240px;
    --ga-page-gutter: clamp(1rem, 3vw, 3rem);
    --ga-copy-measure: 68ch;
}

/* Keep the page surface full width. Bootstrap containers are used for content,
   not as a decorative frame around the whole website. */
html,
body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

body {
    overflow-x: clip;
}

body > .container-fluid,
#main-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.container {
    width: min(100% - (var(--ga-page-gutter) * 2), var(--ga-content-max));
    max-width: var(--ga-content-max);
}

/* The previous design used many independent section paddings. This keeps the
   rhythm generous on desktop without making mobile pages feel like a box. */
.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-inline: 0;
}

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */
.gemini-header-wrapper {
    isolation: isolate;
}

.gemini-header-wrapper .container-fluid {
    min-width: 0;
}

.gemini-header-wrapper .navbar {
    min-height: var(--ga-header-h);
}

.gemini-header-wrapper .navbar-brand {
    flex: 0 0 auto;
    min-width: 0;
}

.gemini-logo {
    display: block;
    max-width: min(148px, 31vw);
}

.gemini-header-wrapper .navbar-nav {
    min-width: 0;
}

.gemini-header-wrapper .navbar-nav .nav-link {
    white-space: nowrap;
}

.gemini-nav-cta {
    white-space: nowrap;
}

/* Keep the full desktop navigation usable between 1200px and 1399px. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .gemini-header-wrapper > .container-fluid {
        padding-inline: 1.25rem !important;
    }

    .gemini-header-wrapper .navbar-brand {
        margin-right: 1rem !important;
    }

    .gemini-header-wrapper .navbar-nav {
        flex-wrap: nowrap;
        gap: 0.05rem;
    }

    .gemini-header-wrapper .navbar-nav .nav-link {
        padding-inline: 0.62rem !important;
        font-size: 0.86rem;
        letter-spacing: 0;
    }

    .gemini-header-wrapper .nav-link-highlight {
        gap: 4px;
    }

    .whats-next-badge {
        font-size: 0.57rem;
        padding-inline: 5px;
    }

    .gemini-nav-cta {
        padding-inline: 1rem;
        font-size: 0.82rem;
    }
}

/* Collapse panels should read as an extension of the header, not a floating
   white box inset inside the page. */
@media (max-width: 1199.98px) {
    .gemini-header-wrapper .navbar-collapse {
        width: 100%;
        margin-top: 0 !important;
        border-radius: 0 0 var(--ga-radius-lg) var(--ga-radius-lg) !important;
        border-left: 0;
        border-right: 0;
        padding: 0.65rem 0.25rem 1rem !important;
        box-shadow: 0 16px 26px rgba(12, 30, 56, 0.10) !important;
    }

    .gemini-header-wrapper .navbar-nav .nav-link {
        white-space: normal;
    }
}

/* --------------------------------------------------------------------------
   Shared type and content measure
   -------------------------------------------------------------------------- */
.gemini-section-badge,
.pillars-badge,
.hero-eyebrow-badge,
.product-hero-badge,
.spec-pill,
.pack-badge,
.grade-pill-badge,
.alcohol-tabs-pill,
.alcohol-brand-pill {
    white-space: nowrap !important;
    max-width: 100%;
}

/* Dedicated pillar heroes use dark photographic/gradient surfaces. Their
   title classes inherit the global dark heading colour unless explicitly
   corrected, which makes the non-accent part of the headline disappear. */
.pillar-page :is(.semi-hero-title, .bio-hero-title, .water-hero-title, .lab-hero-title, .mfg-hero-title, .aroma-hero-title) {
    color: #f8fafc !important;
}

.gemini-about-section p,
.gemini-innovation-section p,
.gemini-services-section p,
.gemini-products-section p,
.gemini-projects-section p,
.gemini-values-section p,
.gemini-certifications-section p,
.gemini-contact-section p {
    max-width: var(--ga-copy-measure);
}

.gemini-about-section .text-center p,
.gemini-innovation-section .text-center p,
.gemini-services-section .text-center p,
.gemini-products-section .text-center p,
.gemini-projects-section .text-center p,
.gemini-values-section .text-center p,
.gemini-certifications-section .text-center p,
.gemini-contact-section .text-center p {
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Forms and interactive controls
   -------------------------------------------------------------------------- */
button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button,
.btn,
.gemini-nav-cta,
.hero-btn-primary,
.hero-btn-secondary,
.custom-button,
.about-cta-btn,
.contact-cta-btn {
    min-height: 44px;
}

input,
select,
textarea {
    max-width: 100%;
}

textarea {
    resize: vertical;
    min-height: 120px;
}

.form-label,
.form-floating > label {
    font-weight: 500;
}

/* Keep validation messages visible but unobtrusive when a template supplies
   the standard Bootstrap invalid-feedback class. */
.invalid-feedback,
.valid-feedback {
    font-size: 0.82rem;
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Footer and utility links
   -------------------------------------------------------------------------- */
.footer {
    overflow: hidden;
}

.footer .btn-link {
    color: rgba(255, 255, 255, 0.78) !important;
    text-decoration: none;
    transition: color 160ms ease, transform 160ms ease;
}

.footer .btn-link:hover,
.footer .btn-link:focus-visible {
    color: #ffffff !important;
    transform: translateX(3px);
}

.footer .copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* --------------------------------------------------------------------------
   Responsive refinement
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    :root {
        --ga-page-gutter: 1rem;
    }

    .container,
    .container-fluid {
        max-width: 100%;
    }

    .gemini-header-wrapper > .container-fluid {
        padding-inline: 0.75rem !important;
    }

    .gemini-logo {
        max-width: 132px;
        height: 38px !important;
    }

    .gemini-header-wrapper .navbar-collapse > .d-flex > .d-lg-none {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.25rem !important;
    }

    .gemini-header-wrapper .navbar-collapse > .d-flex > .d-lg-none > a {
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    .gemini-header-wrapper .navbar-collapse > .d-flex > .d-lg-none > span {
        display: none;
    }

    .gemini-hero-container {
        padding-inline: 1rem !important;
    }

    .gemini-section-badge,
    .pillars-badge,
    .hero-eyebrow-badge {
        max-width: 100%;
        white-space: nowrap !important;
        font-size: 0.72rem;
        padding: 4px 12px;
    }

    .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: clamp(2.75rem, 9vw, 4rem);
        padding-bottom: clamp(2.75rem, 9vw, 4rem);
    }

    .footer .btn-link {
        width: 100%;
        justify-content: flex-start;
        padding-inline: 0 !important;
    }

    /* ------------------------------------------------------------------
       Universal Mobile Swipe Rails (All sections across homepage)
       1. Active card fully visible with generous right-side clearance.
       2. Next card deliberately, slightly visible on right edge (50-60px peek).
       3. Container breakout: full viewport width scrolling, cleanly aligned.
       4. Flex-start alignment: rails always begin at Card 0.
       ------------------------------------------------------------------ */
    .gemini-pillars-section > .container,
    .gemini-pillars-section .pillars-container,
    .gemini-innovation-section > .container,
    .gemini-services-section > .container,
    .gemini-products-section > .container,
    .gemini-projects-section > .container,
    .gemini-values-section > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .gemini-pillars-section > .container > .text-center,
    .gemini-pillars-section .pillars-container > .text-center,
    .gemini-innovation-section > .container > .text-center,
    .gemini-services-section > .container > .text-center,
    .gemini-products-section > .container > .text-center,
    .gemini-projects-section > .container > .text-center,
    .gemini-values-section > .container > .text-center {
        padding-inline: 1rem !important;
    }

    .mobile-swipe-rail {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        padding: 0.5rem 1rem 1.75rem 1rem !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        scroll-padding-left: 1rem !important;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mobile-swipe-rail::-webkit-scrollbar {
        display: none !important;
    }

    .mobile-swipe-rail > [class*="col-"] {
        flex: 0 0 78vw !important;
        width: 78vw !important;
        max-width: 305px !important;
        min-width: 250px !important;
        scroll-snap-align: start !important;
        padding: 0 !important;
        display: flex !important;
        align-self: stretch !important;
    }

    .mobile-swipe-rail > [class*="col-"]:last-child {
        margin-right: 1rem !important;
    }

    .mobile-swipe-rail .pillar-card,
    .mobile-swipe-rail .innovation-card,
    .mobile-swipe-rail .service-industrial-card,
    .mobile-swipe-rail .gemini-product-card,
    .mobile-swipe-rail .project-horizon-card,
    .mobile-swipe-rail .gemini-value-card {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .gemini-pillars-section .mobile-swipe-rail .pillar-card {
        width: 100% !important;
        min-height: 520px !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        isolation: isolate;
        position: relative !important;
        background: linear-gradient(160deg, #0b1728 0%, #10233d 60%, #152f52 100%) !important;
        box-shadow: 0 14px 34px rgba(4, 16, 31, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
        text-decoration: none !important;
    }

    .gemini-pillars-section .mobile-swipe-rail .pillar-card::before {
        display: none !important;
    }

    .gemini-pillars-section .mobile-swipe-rail .pillar-media-window {
        position: relative !important;
        width: 100% !important;
        height: 180px !important;
        flex: 0 0 180px !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        overflow: hidden !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        order: -1 !important;
        background: #0b1728 !important;
    }

    .gemini-pillars-section .mobile-swipe-rail .pillar-media-window::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(4, 16, 31, 0.05) 40%, rgba(4, 16, 31, 0.35) 100%);
        pointer-events: none;
    }

    .gemini-pillars-section .mobile-swipe-rail .pillar-media-window::before {
        display: none !important;
    }

    .gemini-pillars-section .mobile-swipe-rail .pillar-media-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .gemini-pillars-section .mobile-swipe-rail .pillar-semi .pillar-media-img { object-position: 50% 50% !important; }
    .gemini-pillars-section .mobile-swipe-rail .pillar-bio .pillar-media-img { object-position: 50% 45% !important; }
    .gemini-pillars-section .mobile-swipe-rail .pillar-aqua .pillar-media-img { object-position: 50% 50% !important; }
    .gemini-pillars-section .mobile-swipe-rail .pillar-lab .pillar-media-img { object-position: 50% 45% !important; }
    .gemini-pillars-section .mobile-swipe-rail .pillar-scale .pillar-media-img { object-position: 50% 50% !important; }
    .gemini-pillars-section .mobile-swipe-rail .pillar-aroma .pillar-media-img { object-position: 50% 45% !important; }

    .gemini-pillars-section .mobile-swipe-rail .pillar-tech-tag {
        top: 12px !important;
        right: 12px !important;
        z-index: 5 !important;
        background: rgba(11, 23, 40, 0.85) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        color: #ffffff !important;
        font-size: 0.68rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        padding: 4px 10px !important;
        border-radius: 30px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        white-space: nowrap !important;
    }

    .gemini-pillars-section .mobile-swipe-rail .pillar-body {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        border-radius: 0 0 20px 20px !important;
        padding: 1.35rem 1.25rem 1.4rem 1.25rem !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        background: transparent !important;
        z-index: 2 !important;
        overflow: visible !important;
    }

    .gemini-pillars-section .mobile-swipe-rail .pillar-body > * {
        position: relative;
        z-index: 1;
    }

    .gemini-pillars-section .mobile-swipe-rail .pillar-body::before {
        display: none !important;
    }

    .gemini-pillars-section .mobile-swipe-rail .pillar-tag {
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        margin-bottom: 0.45rem !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .gemini-pillars-section .mobile-swipe-rail .pillar-heading {
        color: #ffffff !important;
        font-family: "Jost", sans-serif !important;
        font-size: 1.22rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        margin-bottom: 0.55rem !important;
        letter-spacing: -0.01em !important;
    }

    .gemini-pillars-section .mobile-swipe-rail .pillar-desc {
        color: #cbd5e1 !important;
        font-size: 0.85rem !important;
        line-height: 1.55 !important;
        margin-bottom: 0.95rem !important;
    }

    .gemini-pillars-section .mobile-swipe-rail .pillar-spec-chip {
        font-size: 0.74rem !important;
        font-weight: 600 !important;
        padding: 5px 12px !important;
        border-radius: 20px !important;
        margin-bottom: 1.15rem !important;
        width: fit-content !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        line-height: 1.35 !important;
    }

    .gemini-pillars-section .mobile-swipe-rail .pillar-spec-chip i {
        color: inherit !important;
    }

    .gemini-pillars-section .mobile-swipe-rail .pillar-action {
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: auto !important;
        padding-top: 0.5rem !important;
        text-decoration: none !important;
    }

    /* 6 Pillar Accent Themes in Rail */
    .gemini-pillars-section .mobile-swipe-rail .pillar-semi {
        border: 1px solid rgba(56, 189, 248, 0.35) !important;
        box-shadow: 0 14px 34px rgba(4, 16, 31, 0.45), 0 0 0 1px rgba(56, 189, 248, 0.15) !important;
    }
    .gemini-pillars-section .mobile-swipe-rail .pillar-semi .pillar-tag { color: #38bdf8 !important; }
    .gemini-pillars-section .mobile-swipe-rail .pillar-semi .pillar-spec-chip {
        background: rgba(56, 189, 248, 0.14) !important;
        border: 1px solid rgba(56, 189, 248, 0.4) !important;
        color: #38bdf8 !important;
    }
    .gemini-pillars-section .mobile-swipe-rail .pillar-semi .pillar-action { color: #38bdf8 !important; }

    .gemini-pillars-section .mobile-swipe-rail .pillar-bio {
        border: 1px solid rgba(52, 211, 153, 0.35) !important;
        box-shadow: 0 14px 34px rgba(4, 16, 31, 0.45), 0 0 0 1px rgba(52, 211, 153, 0.15) !important;
    }
    .gemini-pillars-section .mobile-swipe-rail .pillar-bio .pillar-tag { color: #34d399 !important; }
    .gemini-pillars-section .mobile-swipe-rail .pillar-bio .pillar-spec-chip {
        background: rgba(52, 211, 153, 0.14) !important;
        border: 1px solid rgba(52, 211, 153, 0.4) !important;
        color: #34d399 !important;
    }
    .gemini-pillars-section .mobile-swipe-rail .pillar-bio .pillar-action { color: #34d399 !important; }

    .gemini-pillars-section .mobile-swipe-rail .pillar-aqua {
        border: 1px solid rgba(56, 189, 248, 0.35) !important;
        box-shadow: 0 14px 34px rgba(4, 16, 31, 0.45), 0 0 0 1px rgba(56, 189, 248, 0.15) !important;
    }
    .gemini-pillars-section .mobile-swipe-rail .pillar-aqua .pillar-tag { color: #38bdf8 !important; }
    .gemini-pillars-section .mobile-swipe-rail .pillar-aqua .pillar-spec-chip {
        background: rgba(56, 189, 248, 0.14) !important;
        border: 1px solid rgba(56, 189, 248, 0.4) !important;
        color: #38bdf8 !important;
    }
    .gemini-pillars-section .mobile-swipe-rail .pillar-aqua .pillar-action { color: #38bdf8 !important; }

    .gemini-pillars-section .mobile-swipe-rail .pillar-lab {
        border: 1px solid rgba(167, 139, 250, 0.35) !important;
        box-shadow: 0 14px 34px rgba(4, 16, 31, 0.45), 0 0 0 1px rgba(167, 139, 250, 0.15) !important;
    }
    .gemini-pillars-section .mobile-swipe-rail .pillar-lab .pillar-tag { color: #a78bfa !important; }
    .gemini-pillars-section .mobile-swipe-rail .pillar-lab .pillar-spec-chip {
        background: rgba(167, 139, 250, 0.14) !important;
        border: 1px solid rgba(167, 139, 250, 0.4) !important;
        color: #a78bfa !important;
    }
    .gemini-pillars-section .mobile-swipe-rail .pillar-lab .pillar-action { color: #a78bfa !important; }

    .gemini-pillars-section .mobile-swipe-rail .pillar-scale {
        border: 1px solid rgba(96, 165, 250, 0.35) !important;
        box-shadow: 0 14px 34px rgba(4, 16, 31, 0.45), 0 0 0 1px rgba(96, 165, 250, 0.15) !important;
    }
    .gemini-pillars-section .mobile-swipe-rail .pillar-scale .pillar-tag { color: #60a5fa !important; }
    .gemini-pillars-section .mobile-swipe-rail .pillar-scale .pillar-spec-chip {
        background: rgba(96, 165, 250, 0.14) !important;
        border: 1px solid rgba(96, 165, 250, 0.4) !important;
        color: #60a5fa !important;
    }
    .gemini-pillars-section .mobile-swipe-rail .pillar-scale .pillar-action { color: #60a5fa !important; }

    .gemini-pillars-section .mobile-swipe-rail .pillar-aroma {
        border: 1px solid rgba(251, 113, 133, 0.35) !important;
        box-shadow: 0 14px 34px rgba(4, 16, 31, 0.45), 0 0 0 1px rgba(251, 113, 133, 0.15) !important;
    }
    .gemini-pillars-section .mobile-swipe-rail .pillar-aroma .pillar-tag { color: #fb7185 !important; }
    .gemini-pillars-section .mobile-swipe-rail .pillar-aroma .pillar-spec-chip {
        background: rgba(251, 113, 133, 0.14) !important;
        border: 1px solid rgba(251, 113, 133, 0.4) !important;
        color: #fb7185 !important;
    }
    .gemini-pillars-section .mobile-swipe-rail .pillar-aroma .pillar-action { color: #fb7185 !important; }
}

@media (max-width: 380px) {
    .gemini-header-wrapper .navbar-brand {
        margin-right: 0.25rem !important;
    }

    .gemini-logo {
        max-width: 118px;
    }
}

/* Do not let decorative motion create a usability problem. */
@media (prefers-reduced-motion: reduce) {
    .footer .btn-link:hover,
    .footer .btn-link:focus-visible {
        transform: none;
    }
}