/* ========================================================================== 
   GEMINI ASSOCIATES — DEDICATED PILLAR PAGE MOBILE SYSTEM
   --------------------------------------------------------------------------
   Shared mobile treatment for:
   semiconductor-cdmo, green-bio-chemistry, speciality-ultrapure-waters,
   laboratory-testing-facilities, accelerated-manufacturing and
   fragrance-specialities.
   ========================================================================== */

@media (max-width: 767.98px) {
    .pillar-page {
        overflow-x: hidden;
        background: #f8fafc;
    }

    .pillar-page img,
    .pillar-page svg,
    .pillar-page iframe {
        max-width: 100%;
    }

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

    /* ------------------------------------------------------------------
       HERO: reduce dead space, keep the visual hierarchy centered, and
       prevent badges and buttons from colliding with narrow screens.
       ------------------------------------------------------------------ */
    .pillar-page :is(.semi-hero, .bio-hero, .water-hero, .lab-hero, .mfg-hero, .aroma-hero) {
        padding: 3.25rem 0 3.5rem !important;
    }

    .pillar-page :is(.semi-hero, .bio-hero, .water-hero, .lab-hero, .mfg-hero, .aroma-hero) > .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .pillar-page :is(.semi-hero, .bio-hero, .water-hero, .lab-hero, .mfg-hero, .aroma-hero) nav {
        margin-bottom: 1.4rem !important;
        overflow: hidden;
    }

    .pillar-page :is(.semi-hero, .bio-hero, .water-hero, .lab-hero, .mfg-hero, .aroma-hero) .breadcrumb {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem 0.45rem;
        font-size: 0.75rem;
        line-height: 1.35;
        text-align: center;
    }

    .pillar-page :is(.semi-hero, .bio-hero, .water-hero, .lab-hero, .mfg-hero, .aroma-hero) .row {
        --bs-gutter-x: 1rem !important;
        --bs-gutter-y: 1.75rem !important;
    }

    .pillar-page :is(.semi-hero, .bio-hero, .water-hero, .lab-hero, .mfg-hero, .aroma-hero) .col-lg-7,
    .pillar-page :is(.semi-hero, .bio-hero, .water-hero, .lab-hero, .mfg-hero, .aroma-hero) .col-lg-5 {
        text-align: center;
    }

    .pillar-page :is(.semi-pill-tag, .bio-pill-tag, .water-pill-tag, .lab-pill-tag, .mfg-pill-tag, .aroma-pill-tag) {
        max-width: 100%;
        justify-content: center;
        padding: 0.45rem 0.8rem !important;
        font-size: 0.72rem !important;
        line-height: 1.35;
        letter-spacing: 0.04em;
        white-space: normal;
    }

    .pillar-page :is(.semi-hero-title, .bio-hero-title, .water-hero-title, .lab-hero-title, .mfg-hero-title, .aroma-hero-title) {
        max-width: 22rem;
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(1.9rem, 9vw, 2.45rem) !important;
        line-height: 1.08 !important;
        text-wrap: balance;
    }

    .pillar-page :is(.semi-hero-lead, .bio-hero-lead, .water-hero-lead, .lab-hero-lead, .mfg-hero-lead, .aroma-hero-lead) {
        max-width: 36rem;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.5rem !important;
        color: #dbe7f3 !important;
        font-size: 0.97rem !important;
        line-height: 1.6 !important;
    }

    .pillar-page :is(.semi-hero, .bio-hero, .water-hero, .lab-hero, .mfg-hero, .aroma-hero) .d-flex.flex-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        max-width: 22rem;
        margin-left: auto;
        margin-right: auto;
        gap: 0.65rem !important;
    }

    .pillar-page :is(.semi-hero, .bio-hero, .water-hero, .lab-hero, .mfg-hero, .aroma-hero) .d-flex.flex-wrap > .btn {
        width: 100% !important;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1rem !important;
        line-height: 1.25;
    }

    .pillar-page :is(.semi-hero, .bio-hero, .water-hero, .lab-hero, .mfg-hero, .aroma-hero) :is(.text-white-50, .text-white-50 *) {
        color: rgba(255, 255, 255, 0.78) !important;
    }

    .pillar-page :is(.semi-hero-frame, .bio-hero-frame, .water-hero-frame, .lab-hero-frame, .mfg-hero-frame, .aroma-hero-frame) {
        width: 100%;
        max-width: 30rem;
        margin: 0 auto;
        border-radius: 18px !important;
    }

    .pillar-page :is(.semi-hero-frame, .bio-hero-frame, .water-hero-frame, .lab-hero-frame, .mfg-hero-frame, .aroma-hero-frame) img {
        width: 100% !important;
        height: 250px !important;
        max-height: 250px !important;
        object-fit: cover;
    }

    .pillar-page :is(.semi-frame-overlay-badge, .bio-frame-overlay-badge, .water-frame-overlay-badge, .lab-frame-overlay-badge, .mfg-frame-overlay-badge, .aroma-frame-overlay-badge) {
        right: 10px;
        bottom: 10px;
        left: 10px;
        max-width: none;
        padding: 0.65rem 0.75rem !important;
        border-radius: 12px !important;
        font-size: 0.76rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .pillar-page :is(.semi-frame-overlay-badge, .bio-frame-overlay-badge, .water-frame-overlay-badge, .lab-frame-overlay-badge, .mfg-frame-overlay-badge, .aroma-frame-overlay-badge) .d-flex {
        gap: 0.55rem !important;
    }

    /* ------------------------------------------------------------------
       STATS: keep the 2x2 rhythm but make every item a centered, stable
       tile so long labels do not pull the row out of alignment.
       ------------------------------------------------------------------ */
    .pillar-page :is(.semi-stats-strip, .bio-stats-strip, .water-stats-strip, .lab-stats-strip, .mfg-stats-strip, .aroma-stats-strip) {
        padding: 0.65rem 0 !important;
    }

    .pillar-page :is(.semi-stats-strip, .bio-stats-strip, .water-stats-strip, .lab-stats-strip, .mfg-stats-strip, .aroma-stats-strip) .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .pillar-page :is(.semi-stats-strip, .bio-stats-strip, .water-stats-strip, .lab-stats-strip, .mfg-stats-strip, .aroma-stats-strip) .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
    }

    .pillar-page :is(.semi-stats-strip, .bio-stats-strip, .water-stats-strip, .lab-stats-strip, .mfg-stats-strip, .aroma-stats-strip) .row > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .pillar-page :is(.semi-stat-item, .bio-stat-item, .water-stat-item, .lab-stat-item, .mfg-stat-item, .aroma-stat-item) {
        min-height: 5.6rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.7rem 0.5rem !important;
        text-align: center !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
    }

    .pillar-page :is(.semi-stat-item, .bio-stat-item, .water-stat-item, .lab-stat-item, .mfg-stat-item, .aroma-stat-item):nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.13) !important;
    }

    .pillar-page :is(.semi-stat-item, .bio-stat-item, .water-stat-item, .lab-stat-item, .mfg-stat-item, .aroma-stat-item):nth-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
    }

    .pillar-page :is(.semi-stat-val, .bio-stat-val, .water-stat-val, .lab-stat-val, .mfg-stat-val, .aroma-stat-val) {
        max-width: 100%;
        font-size: clamp(0.88rem, 3.8vw, 1.08rem) !important;
        line-height: 1.18 !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    .pillar-page :is(.semi-stat-lbl, .bio-stat-lbl, .water-stat-lbl, .lab-stat-lbl, .mfg-stat-lbl, .aroma-stat-lbl) {
        max-width: 15ch;
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
        color: #cbd5e1 !important;
    }

    /* ------------------------------------------------------------------
       CONTENT: reduce oversized desktop spacing and make the repeated
       cards, headings, controls and copy sit comfortably on a phone.
       ------------------------------------------------------------------ */
    .pillar-page .section-py {
        padding: 3.35rem 0 !important;
    }

    .pillar-page .section-py > .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .pillar-page .section-header-wrap {
        max-width: none !important;
        margin-bottom: 2rem !important;
    }

    .pillar-page .section-eyebrow {
        font-size: 0.75rem !important;
        line-height: 1.35;
        letter-spacing: 0.08em;
    }

    .pillar-page .section-main-heading {
        font-size: clamp(1.65rem, 7.6vw, 2.15rem) !important;
        line-height: 1.15 !important;
        text-wrap: balance;
    }

    .pillar-page .section-lead-text {
        font-size: 0.96rem !important;
        line-height: 1.6 !important;
        color: #475569 !important;
    }

    .pillar-page .section-py .row {
        --bs-gutter-x: 1rem !important;
        --bs-gutter-y: 1rem !important;
    }

    .pillar-page :is(.overview-card, .intro-card, .bio-cat-card, .about-val-card, .expertise-card, .process-step-card, .equip-card, .industry-card, .service-card, .doc-card, .logistics-card, .aroma-val-card, .ingredient-card, .app-card) {
        height: 100% !important;
        border-radius: 16px !important;
        padding: 1.2rem !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
    }

    .pillar-page :is(.overview-card, .intro-card, .bio-cat-card, .about-val-card, .expertise-card, .process-step-card, .equip-card, .industry-card, .service-card, .doc-card, .logistics-card, .aroma-val-card, .ingredient-card, .app-card) :is(h3, h4, h5) {
        line-height: 1.25;
        text-wrap: balance;
    }

    .pillar-page :is(.overview-card, .intro-card, .bio-cat-card, .about-val-card, .expertise-card, .process-step-card, .equip-card, .industry-card, .service-card, .doc-card, .logistics-card, .aroma-val-card, .ingredient-card, .app-card) p {
        color: #475569;
        line-height: 1.55;
    }

    .pillar-page .app-card-img {
        height: 175px !important;
        object-fit: cover;
    }

    .pillar-page .text-secondary,
    .pillar-page .text-muted {
        color: #52657a !important;
    }

    .pillar-page .section-py :is(h2, h3, h4, h5).text-dark,
    .pillar-page .section-py :is(h2, h3, h4, h5) {
        color: #0c1e38 !important;
    }

    /* ------------------------------------------------------------------
       TABLES + FORMS: horizontal movement stays inside the table, and
       controls never force the document wider than the viewport.
       ------------------------------------------------------------------ */
    .pillar-page .table-responsive,
    .pillar-page .catalogue-table-card {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px;
    }

    .pillar-page :is(.matrix-table, .catalogue-table) {
        min-width: 640px;
        font-size: 0.78rem !important;
    }

    .pillar-page :is(.matrix-table, .catalogue-table) :is(th, td) {
        padding: 0.65rem 0.55rem !important;
        line-height: 1.4;
        vertical-align: top;
    }

    .pillar-page .catalogue-toolbar {
        padding: 1rem !important;
        border-radius: 16px !important;
    }

    .pillar-page .catalogue-search-input {
        min-height: 48px;
        font-size: 0.9rem !important;
    }

    .pillar-page .enquiry-card-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 18px !important;
        overflow: hidden;
    }

    .pillar-page .enquiry-header-bar,
    .pillar-page .enquiry-form-body {
        padding: 1.1rem !important;
    }

    .pillar-page .custom-form-control,
    .pillar-page .form-control,
    .pillar-page .form-select {
        min-height: 48px;
        max-width: 100%;
        font-size: 0.94rem !important;
        padding: 0.7rem 0.8rem !important;
    }

    .pillar-page textarea.custom-form-control,
    .pillar-page textarea.form-control {
        min-height: 120px;
    }

    .pillar-page .btn-submit-enquiry,
    .pillar-page #enquiry-form button[type="submit"] {
        width: 100% !important;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .pillar-page :is(.contact-info-panel, .enquiry-card-wrapper) a,
    .pillar-page :is(.contact-info-panel, .enquiry-card-wrapper) button {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 380px) {
    .pillar-page :is(.semi-hero, .bio-hero, .water-hero, .lab-hero, .mfg-hero, .aroma-hero) {
        padding-top: 2.75rem !important;
    }

    .pillar-page :is(.semi-hero-frame, .bio-hero-frame, .water-hero-frame, .lab-hero-frame, .mfg-hero-frame, .aroma-hero-frame) img {
        height: 220px !important;
        max-height: 220px !important;
    }

    .pillar-page :is(.semi-stat-item, .bio-stat-item, .water-stat-item, .lab-stat-item, .mfg-stat-item, .aroma-stat-item) {
        min-height: 5.2rem;
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
    }
}