/* ===========================================
Responsive Styles
=========================================== */

@media(max-width:992px) {}

@media(max-width:768px) {}

@media(max-width:576px) {}

/*=========================================================
ABOUT PAGE
=========================================================*/

@media(max-width:991px) {

    .about-hero {

        min-height: 430px;

        padding: 80px 0;

    }

    .about-hero h1 {

        font-size: 42px;

    }

    .about-hero p {

        font-size: 18px;

    }

}

@media(max-width:768px) {

    .about-hero {

        min-height: 360px;

        text-align: center;

    }

    .about-hero h1 {

        font-size: 34px;

    }

    .about-hero p {

        font-size: 16px;

    }

}

@media(max-width:1100px) {

    .founder-wrapper {

        grid-template-columns: 1fr;

    }

    .founder-left {

        border-right: none;

        border-bottom: 1px solid #ececec;

    }

    .founder-quote {

        border-top: 1px solid rgba(255, 255, 255, .15);

    }

}



@media(max-width:992px) {

    .closing-wrapper {

        grid-template-columns: 1fr;

        text-align: center;

        gap: 28px;

    }

    .closing-logo-left img,

    .closing-logo-right img {

        margin: auto;

    }

}

@media(max-width:576px) {

    .closing-content h2 {

        font-size: 28px;

    }

    .closing-content p {

        font-size: 17px;

        letter-spacing: 1px;

    }

}

/*==========================================================
MS-OS-01 (OUR SERVICES - 10 Points)
Responsive
==========================================================*/

/*==========================================================
MS-OS-01
Responsive
==========================================================*/

@media(max-width:1400px) {

    .services-grid {

        grid-template-columns: repeat(4, 1fr);

    }

}

@media(max-width:1200px) {

    .services-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}

@media(max-width:992px) {

    .services-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:768px) {

    .services-grid {

        grid-template-columns: 1fr;

    }

}

/*==========================================================
MS-OS-04 (SUPPORTING CUSTOMERS THROUGHOUT...)
==========================================================*/

@media(max-width:1200px) {

    .lifecycle-process {

        flex-wrap: wrap;

        row-gap: 24px;

    }

    .step-arrow {

        display: none;

    }

}

@media(max-width:768px) {

    .lifecycle-title {

        font-size: 24px;

    }

    .lifecycle-step {

        width: 46%;

        margin-bottom: 20px;

    }

}

@media(max-width:576px) {

    .lifecycle-step {

        width: 100%;

    }

}

/*==========================================================
MS-OS-05 (WE COMMIT TO BE WITH YOU IN EVERY....)
Responsive
==========================================================*/

@media(max-width:1200px) {

    .commitment-wrapper {

        flex-direction: column;

        padding: 30px;

    }

    .commitment-logo {

        position: relative;

        left: auto;

        top: auto;

        transform: none;

        margin-bottom: 20px;

    }

    .commitment-message {

        padding: 0;

        text-align: center;

        margin-bottom: 25px;

    }

    .commitment-items {

        flex-wrap: wrap;

        justify-content: center;

    }

    .commitment-item {

        border-left: none;

        border-top: 1px solid rgba(201, 158, 52, .35);

        padding: 20px;

        width: 50%;

        justify-content: center;

    }

}

@media(max-width:768px) {

    .commitment-item {

        width: 100%;

    }

    .commitment-message h2 {

        font-size: 22px;

    }

    .commitment-message h3 {

        font-size: 16px;

    }
}

/*==========================================================
MS-OS-06 (SERVICES - GLOBAL PRESENCE STRIP)
Responsive
==========================================================*/

@media(max-width:992px) {

    .presence-wrapper {

        flex-direction: column;

        gap: 30px;

    }

    .presence-divider {

        display: none;

    }

    .presence-box {

        justify-content: center;

        text-align: center;

        flex-direction: column;

    }

}

/*==========================================================
5. INDUSTRIES & CUSTOMER SEGMENTS
MS-ICS-01
INDUSTRIES HERO
==========================================================*/

@media(max-width:992px) {

    .industries-hero-wrapper {

        flex-direction: column;

    }

    .industries-hero-left {

        flex: unset;

    }

    .industries-hero-curve {

        display: none;

    }

    .industries-left-content {

        padding: 50px 28px;

    }

    .industries-left-content h1 {

        font-size: 42px;

    }

    .industries-left-content h2 {

        font-size: 22px;

    }

    .industries-left-content p {

        font-size: 17px;

    }

    .industries-hero-right {

        height: 420px;

    }

}

/*==========================================================
MS-ICS-02
CUSTOMER SEGMENTS
==========================================================*/

@media(max-width:1200px) {

    .customer-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:768px) {

    .customer-grid {

        grid-template-columns: 1fr;

    }

    .customer-card {

        min-height: auto;

    }

}

/*==========================================================
MS-ICS-03
GLOBAL SUPPLY CHAIN BANNER (Supporting customers across...)
==========================================================*/

@media(max-width:992px) {

    .industry-banner-wrapper {

        flex-direction: column;

    }

    .industry-banner-left {

        flex: unset;

    }

    .industry-banner-content {

        padding: 35px 28px;

    }

    .industry-banner-content h2 {

        font-size: 28px;

    }

    .industry-banner-right {

        height: 280px;

    }

}

/*==========================================================
MS-ICS-04A
INDUSTRY SECTORS — MOBILE RESPONSIVE
==========================================================*/

@media(max-width:768px) {

    .industries-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 30px;
    }

    .industries-card {
        width: 100%;
        display: flex;
        flex-direction: row;
        min-width: 0;
    }

    .industries-image {
        flex: 0 0 38%;
        min-width: 0;
    }

    .industries-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .industries-details {
        flex: 1;
        min-width: 0;
        padding: 18px 16px;
    }

    .industries-header {
        gap: 10px;
        margin-bottom: 12px;
        align-items: center;
    }

    .industries-icon {
        width: 46px;
        height: 46px;
        flex-shrink: 0;
    }

    .industries-header h3 {
        font-size: 17px;
        line-height: 1.2;
        word-break: normal;
    }

    .industries-details p {
        font-size: 14px;
        line-height: 1.55;
    }

}

/*==========================================================
MS-ICS-05
RESPONSIVE (Why industries trust... 6 boxes)
==========================================================*/

@media(max-width:1200px) {

    .trust-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}

@media(max-width:768px) {

    .trust-grid {

        grid-template-columns: 1fr;

    }

}

/*==========================================================
MS-ICS-06
RESPONSIVE - OUR GLOBAL PRESENCE
==========================================================*/

@media(max-width:1200px) {

    .presence-wrapper {

        grid-template-columns: repeat(2, 1fr);

    }

    .presence-map {

        grid-column: 1/-1;

    }

}

@media(max-width:768px) {

    .presence-wrapper {

        grid-template-columns: 1fr;

    }

    .presence-column {

        border-left: none;

        border-top: 1px solid #f2e6ca;

    }

}

/*==========================================================
MS-ICS-07
RESPONSIVE (EXPLORE OUR PRODUCTS...)
==========================================================*/

@media(max-width:992px) {

    .partner-buttons {

        grid-template-columns: 1fr;

    }

    .partner-text h2 {

        font-size: 32px;

    }

}

/*==========================================================
INTERNATIONAL STANDARDS
==========================================================*/

@media(max-width:1200px) {

    .standards-grid {

        grid-template-columns: repeat(4, 1fr);

    }

}

@media(max-width:768px) {

    .standards-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:480px) {

    .standards-grid {

        grid-template-columns: 1fr;

    }

}

/*==========================================================
MATERIAL SELECTION CONSIDERATION
==========================================================*/

@media(max-width:992px) {

    .expertise-grid {

        grid-template-columns: 1fr;

    }

}

/*==========================================================
ADVANTAGES BELT RESPONSIVE (5 columns under multi-country sourcing capability)
==========================================================*/

@media(max-width:992px) {

    .advantages-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}

@media(max-width:768px) {

    .advantages-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:480px) {

    .advantages-grid {

        grid-template-columns: 1fr;

    }

}

/*==========================================================
IMPORTANT NOTE & OUR COMMITMENT
==========================================================*/

@media(max-width:992px) {

    .specifications-commitment-grid {

        grid-template-columns: 1fr;

    }

    .specifications-commitment-content {

        grid-template-columns: 1fr;

    }

}

/*==========================================================
    DOWNLOADS PAGE
    IMPORTANT NOTE & OUR COMMITMENT — MOBILE RESPONSIVE
==========================================================*/

@media (max-width:768px){

    .downloads-note-grid{

        grid-template-columns:1fr;

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;
    }

}

/*==========================================================
NEED ASSISTANCE SELECTING...
==========================================================*/

@media(max-width:992px) {

    .specifications-cta-wrapper {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .specifications-cta-buttons {

        padding-top: 0;

    }

}

/*==========================================================
SPECIFICATIONS CONTINUE JOURNEY RESPONSIVE
==========================================================*/

@media(max-width:1200px) {

    .specifications-journey-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}

@media(max-width:768px) {

    .specifications-journey-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:480px) {

    .specifications-journey-grid {

        grid-template-columns: 1fr;

    }

}


/*==========================================================
WEIGHT CALCULATION PAGE — MOBILE RESPONSIVE
==========================================================*/

/*----------------------------------------------------------
  1. WEIGHT HERO
----------------------------------------------------------*/

@media (max-width: 992px) {

    .weight-hero-grid {
        grid-template-columns: 1fr;
    }

    .weight-hero-text {
        padding: 50px 30px;
    }

    .weight-hero-text h1 {
        font-size: 44px;
    }

    .weight-hero-text h3 {
        font-size: 22px;
    }

    .weight-hero-image {
        height: auto;
    }

    .weight-hero-image img {
        display: block;
        width: 100%;
        height: auto;
    }
}

@media (max-width:768px) {

    .weight-hero-text {
        padding: 40px 25px;
    }

    .weight-hero-text h1 {
        font-size: 36px;
        line-height: 1.12;
    }

    .weight-hero-text h3 {
        font-size: 20px;
        line-height: 1.45;
    }

    .weight-hero-text p {
        font-size: 16px;
        line-height: 1.6;
    }

    .weight-hero-note {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .weight-hero-note img {
        max-width: 45px;
    }
}


/*----------------------------------------------------------
  2. WHY USE THESE ENGINEERING TOOLS
----------------------------------------------------------*/

@media(max-width:768px) {

    .weight-tools-wrapper {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .weight-tools-wrapper h2 {
        font-size: 24px;
        line-height: 1.25;
        color: #ffffff !important;
        text-align: center;
        margin-bottom: 25px;
    }

    .weight-tools-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .weight-tool-item {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .weight-tool-item img {
        max-width: 70px;
        height: auto;
    }

    .weight-tool-item h4 {
        font-size: 15px;
        line-height: 1.3;
    }
}

@media(max-width:480px) {

    .weight-tools-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .weight-tool-item {
        padding: 18px 12px;
    }
}


/*----------------------------------------------------------
  3. ENGINEERING REFERENCE CENTER
     DESKTOP TWO-ZONE → MOBILE ONE-ZONE
----------------------------------------------------------*/

@media(max-width:992px) {

    .weight-reference-grid {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        gap: 30px;
    }

    .weight-sidebar,
    .weight-main {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .weight-calculator-grid {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
    }

    .weight-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media(max-width:768px) {

    .weight-reference {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .weight-reference-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .weight-sidebar {
        width: 100%;
    }

    .weight-main {
        width: 100%;
        min-width: 0;
    }

    .weight-main-title {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 28px;
        line-height: 1.2;
        text-align: center;
        margin-bottom: 20px;
    }

    .weight-calculator-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .weight-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .weight-card h3 {
        font-size: 22px;
        line-height: 1.25;
    }

    .weight-card h4 {
        font-size: 17px;
        line-height: 1.35;
    }

    .weight-card p,
    .weight-card li {
        font-size: 15px;
        line-height: 1.55;
    }

    .weight-card img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}


/*----------------------------------------------------------
  4. REFERENCE TABLES
----------------------------------------------------------*/

@media(max-width:768px) {

    .weight-panel {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .weight-panel h3 {
        font-size: 21px;
        line-height: 1.3;
    }

    .weight-density-table,
    .weight-rebar-table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
    }

    .weight-density-table th,
    .weight-density-table td,
    .weight-rebar-table th,
    .weight-rebar-table td {
        padding: 9px 6px;
        font-size: 13px;
        word-break: break-word;
    }

    .weight-sidebar-image {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .weight-reference-list {
        padding-left: 20px;
    }

    .weight-reference-list li {
        font-size: 14px;
        line-height: 1.5;
    }
}


/*----------------------------------------------------------
  5. TECHNICAL CONSULTATION
----------------------------------------------------------*/

@media(max-width:992px) {

    .weight-consultation-grid {
        grid-template-columns: 1fr;
    }

    .weight-consultation-content {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {

    .weight-consultation-content {
        width: 100%;
    }

    .weight-consultation-text,
    .weight-consultation-image {
        width: 100%;
        min-width: 0;
    }

    .weight-consultation-image img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}


/*----------------------------------------------------------
  6. OUR COMMITMENT
----------------------------------------------------------*/

@media(max-width:992px) {

    .weight-commitment-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .weight-commitment-left {
        width: 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .weight-commitment-middle {
        width: 100%;
        min-width: 0;
        border: none;
        padding: 20px 0;
        justify-content: center;
    }

    .weight-commitment-right {
        width: 100%;
        min-width: 0;
        text-align: center;
        padding-left: 0;
    }
}

@media(max-width:768px) {

    .weight-commitment-left {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .weight-commitment-icon {
        flex: 0 0 auto;
    }

    .weight-commitment-icon img {
        width: 90px;
        max-width: 90px;
        height: auto;
    }

    .weight-commitment-text {
        width: 100%;
    }

    .weight-commitment-text h3 {
        font-size: 24px;
        line-height: 1.25;
    }

    .weight-commitment-text p {
        font-size: 15px;
        line-height: 1.6;
    }

    .weight-commitment-middle {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 20px 0;
    }

    .weight-commitment-middle-icon img {
        width: 110px;
        max-width: 110px;
        height: auto;
    }

    .weight-commitment-middle h3 {
        font-size: 20px;
        line-height: 1.35;
    }

    .weight-commitment-right {
        text-align: center;
    }

    .weight-commitment-right h3 {
        font-size: 22px;
    }

    .weight-commitment-right strong {
        font-size: 30px;
        line-height: 1.2;
    }
}


/*----------------------------------------------------------
  7. INTERNATIONAL STANDARDS
----------------------------------------------------------*/

@media(max-width:768px) {

    .weight-standards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media(max-width:480px) {

    .weight-standards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}


/*----------------------------------------------------------
  8. QUICK NAVIGATION
----------------------------------------------------------*/

@media(max-width:1200px) {

    .weight-quick-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width:768px) {

    .weight-quick-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media(max-width:576px) {

    .weight-quick-grid {
        grid-template-columns: 1fr;
    }
}


/*----------------------------------------------------------
  9. MOBILE PAGE SAFETY
----------------------------------------------------------*/

@media(max-width:768px) {

    .weight-hero,
    .weight-tools,
    .weight-reference,
    .weight-consultation-section,
    .weight-commitment,
    .weight-quick-links,
    .weight-standards {
        max-width: 100%;
        overflow-x: hidden;
    }

    .weight-hero *,
    .weight-tools *,
    .weight-reference *,
    .weight-consultation-section *,
    .weight-commitment *,
    .weight-quick-links *,
    .weight-standards * {
        max-width: 100%;
    }
}


@media(max-width:768px) {

    .weight-quick-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:576px) {

    .weight-quick-grid {

        grid-template-columns: 1fr;

    }

}



@media(max-width:1200px) {

    .tradeally-workflow-grid {

        grid-template-columns: repeat(4, 1fr);

        gap: 18px;

        background: none;

        border: none;

    }

    .tradeally-step {

        border: 1px solid #e5e5e5;

        border-radius: 8px;

    }

    .tradeally-step-arrow {

        display: none;

    }

}

@media(max-width:768px) {

    .tradeally-workflow-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:480px) {

    .tradeally-workflow-grid {

        grid-template-columns: 1fr;

    }

}

/*==========================================================
TRADEALLY™ ERP
MOBILE RESPONSIVE — COMPLETE SURGICAL OVERRIDE
==========================================================*/

/*----------------------------------------------------------
1. TRADEALLY HERO
Desktop:
Text | Divider | Image

Mobile:
Text
Buttons
Image
----------------------------------------------------------*/

@media (max-width: 768px) {

    .tradeally-hero {
        height: auto;
        overflow: hidden;
    }

    .tradeally-hero-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    .tradeally-hero-left {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 38px 24px 34px;
    }

    .tradeally-hero-left h1 {
        font-size: 30px;
        line-height: 1.15;
        margin-bottom: 14px;
    }

    .tradeally-hero-left h2 {
        font-size: 24px;
        line-height: 1.30;
        margin-bottom: 18px;
    }

    .tradeally-hero-left p {
        font-size: 15px;
        line-height: 1.65;
    }

    .tradeally-divider {
        display: none;
    }

    .tradeally-hero-right {
        width: 100%;
        height: 280px;
        flex: none;
    }

    .tradeally-hero-right img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }

    .hero-buttons a {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }


    /*------------------------------------------------------
    2. WHY WE BUILT + CORE FUNCTIONAL AREAS

    Desktop:
    WHY WE BUILT | CORE FUNCTIONAL AREAS

    Mobile:
    WHY WE BUILT
    CORE FUNCTIONAL AREAS
    ------------------------------------------------------*/

    .tradeally-overview-grid {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        gap: 35px;
    }

    .tradeally-why,
    .tradeally-core {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .tradeally-heading {
        width: 100%;
    }

    .tradeally-heading h2,
    .tradeally-core h2 {
        font-size: 28px;
        line-height: 1.18;
        overflow-wrap: break-word;
    }

    .tradeally-why p,
    .tradeally-core-intro {
        font-size: 15px;
        line-height: 1.65;
    }

    .tradeally-why-image {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }


    /*------------------------------------------------------
    3. WHY WE BUILT — FOUR VALUES
    ------------------------------------------------------*/

    .tradeally-values {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        gap: 12px;
    }

    .tradeally-value {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .tradeally-value img {
        max-width: 60px;
        height: auto;
    }

    .tradeally-value h4 {
        font-size: 15px;
        line-height: 1.25;
    }

    .tradeally-value p {
        font-size: 13px;
        line-height: 1.45;
    }


    /*------------------------------------------------------
    4. CORE FUNCTIONAL AREAS

    Four desktop columns
    →
    One full-width card per row on mobile
    ------------------------------------------------------*/

    .tradeally-core-grid {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        gap: 16px;
    }

    .tradeally-core-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .tradeally-core-card h3 {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        font-size: 18px;
        line-height: 1.25;
    }

    .tradeally-core-card h3 img {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        object-fit: contain;
    }

    .tradeally-core-card h3 span {
        min-width: 0;
    }

    .tradeally-core-card ul {
        width: 100%;
        box-sizing: border-box;
    }

    .tradeally-core-card li {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 14px;
        line-height: 1.5;
    }

    .tradeally-core-card li img {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        margin-top: 4px;
    }

    .tradeally-core-card li span {
        min-width: 0;
        overflow-wrap: break-word;
    }


    /*------------------------------------------------------
    5. KEY CAPABILITIES

    Four desktop columns
    →
    One full-width card per row
    ------------------------------------------------------*/

    .tradeally-capabilities-grid {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        gap: 18px;
    }

    .tradeally-capability-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;

        background-size: 18% auto;
        background-position: right center;
        background-repeat: no-repeat;
    }

    .tradeally-capability-content {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;

        padding: 28px 22% 28px 24px;
    }

    .tradeally-capability-content h3 {
        font-size: 21px;
        line-height: 1.25;
    }

    .tradeally-capability-content p {
        font-size: 15px;
        line-height: 1.65;
    }


    /*------------------------------------------------------
    6. TECHNOLOGY PHILOSOPHY + FUTURE VISION

    Desktop:
    Technology Philosophy | Future Vision

    Mobile:
    Technology Philosophy
    Future Vision
    ------------------------------------------------------*/

    .tradeally-philosophy-grid {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        gap: 30px;
    }

    .technology-philosophy,
    .future-vision {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .technology-photo,
    .future-image {
        width: 100%;
        max-width: 100%;
    }

    .technology-photo img,
    .future-image img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

    .technology-content,
    .future-content {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .technology-content h2,
    .future-content h2 {
        font-size: 28px;
        line-height: 1.2;
    }

    .technology-content p,
    .future-content p {
        font-size: 15px;
        line-height: 1.65;
    }

}


/*----------------------------------------------------------
EXTRA SMALL PHONES
375px AND BELOW
----------------------------------------------------------*/

@media (max-width: 375px) {

    .tradeally-hero-left {
        padding: 34px 20px 30px;
    }

    .tradeally-hero-left h1 {
        font-size: 28px;
    }

    .tradeally-hero-left h2 {
        font-size: 22px;
    }

    .tradeally-hero-left p {
        font-size: 14.5px;
    }

    .tradeally-hero-right {
        height: 240px;
    }

    .tradeally-heading h2,
    .tradeally-core h2,
    .technology-content h2,
    .future-content h2 {
        font-size: 26px;
    }

    .tradeally-values {
        gap: 10px;
    }

    .tradeally-value {
        padding: 12px 8px;
    }

    .tradeally-value h4 {
        font-size: 14px;
    }

    .tradeally-value p {
        font-size: 12.5px;
    }

    .tradeally-core-card h3 {
        font-size: 17px;
    }

    .tradeally-core-card li {
        font-size: 13.5px;
    }

    .tradeally-capability-content {
        padding: 24px 28% 24px 20px;
    }

    .tradeally-capability-content h3 {
        font-size: 19px;
    }

    .tradeally-capability-content p {
        font-size: 14px;
    }

}

/*==========================================================
SUBMIT US PAGE  - UNDER DEVELOPMENT
==========================================================*/

@media(max-width:768px) {

    .submit-under-development {

        padding: 70px 0;

    }

    .submit-under-development-card {

        padding: 45px 25px;

    }

    .submit-under-development-card h2 {

        font-size: 28px;

    }

    .submit-under-development-card p {

        font-size: 16px;

    }

}


/*==========================================================
CAREERS PAGE  - UNDER DEVELOPMENT
==========================================================*/

@media(max-width:768px) {

    .careers-under-development {

        padding: 70px 0;

    }

    .careers-under-development-card {

        padding: 45px 25px;

    }

    .careers-under-development-card h2 {

        font-size: 28px;

    }

    .careers-under-development-card p {

        font-size: 16px;

    }

}

/*==========================================================
TECHNOLOGY, MANUAL & SOP  - UNDER DEVELOPMENT
==========================================================*/

@media(max-width:768px) {

    .technology-under-development {

        padding: 70px 0;

    }

    .technology-under-development-card {

        padding: 45px 25px;

    }

    .technology-under-development-card h2 {

        font-size: 28px;

    }

    .technology-under-development-card p {

        font-size: 16px;

    }

}

/*==========================================================
SAFE SOURCING & RISK MANAGEMENT  - UNDER DEVELOPMENT
==========================================================*/

@media(max-width:768px) {

    .sourcing-under-development {

        padding: 70px 0;

    }

    .sourcing-under-development-card {

        padding: 45px 25px;

    }

    .sourcing-under-development-card h2 {

        font-size: 28px;

    }

    .sourcing-under-development-card p {

        font-size: 16px;

    }

}


/*==========================================================
KNOWLEDGE CENTER  - UNDER DEVELOPMENT
==========================================================*/

@media(max-width:768px) {

    .knowledge-under-development {

        padding: 70px 0;

    }

    .knowledge-under-development-card {

        padding: 45px 25px;

    }

    .knowledge-under-development-card h2 {

        font-size: 28px;

    }

    .knowledge-under-development-card p {

        font-size: 16px;

    }

}


/*==========================================================
SUPPLIERS PAGE  - UNDER DEVELOPMENT
==========================================================*/

@media(max-width:768px) {

    .suppliers-under-development {

        padding: 70px 0;

    }

    .suppliers-under-development-card {

        padding: 45px 25px;

    }

    .suppliers-under-development-card h2 {

        font-size: 28px;

    }

    .suppliers-under-development-card p {

        font-size: 16px;

    }

}

/*==========================================================
CONFIDENTIALITY & ETHICS PAGE  - UNDER DEVELOPMENT
==========================================================*/

@media(max-width:768px) {

    .confidentiality-under-development {

        padding: 70px 0;

    }

    .confidentiality-under-development-card {

        padding: 45px 25px;

    }

    .confidentiality-under-development-card h2 {

        font-size: 28px;

    }

    .confidentiality-under-development-card p {

        font-size: 16px;

    }

}

/*==========================================================
FAQ PAGE  - UNDER DEVELOPMENT
==========================================================*/

@media(max-width:768px) {

    .faq-under-development {

        padding: 70px 0;

    }

    .faq-under-development-card {

        padding: 45px 25px;

    }

    .faq-under-development-card h2 {

        font-size: 28px;

    }

    .faq-under-development-card p {

        font-size: 16px;

    }

}

/*=========================================================
    HOME PAGE
    SURGERY #5
    FEATURE INFORMATION STRIP
    MOBILE + SMALL TABLET
=========================================================*/

/*---------------------------------------------------------
    SMALL TABLET
    769px - 992px
    6 CARDS → 3 COLUMNS
---------------------------------------------------------*/

@media (max-width:992px) {

    .feature-strip-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .feature-strip-box {
        min-width: 0;
        padding: 18px 12px;
    }

}


/*---------------------------------------------------------
    SMALL IPAD / TABLET
    481px - 768px
    6 CARDS → 2 COLUMNS
---------------------------------------------------------*/

@media (max-width:768px) {

    .feature-strip-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .feature-strip-box {
        min-width: 0;
        padding: 18px 12px;
    }

    .feature-strip-box img {
        width: 64px;
        height: 48px;
        margin-bottom: 10px;
    }

    .feature-strip-box h3 {
        font-size: 18px;
        line-height: 24px;
        min-height: 48px;
        margin-bottom: 6px;
    }

    .feature-strip-box p {
        font-size: 14px;
        line-height: 21px;
    }

}


/*---------------------------------------------------------
    MOBILE PHONE
    361px - 480px
    2 COLUMNS
---------------------------------------------------------*/

@media (max-width:480px) {

    .feature-strip-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .feature-strip-box {
        padding: 16px 9px;
    }

    .feature-strip-box img {
        width: 58px;
        height: 46px;
    }

    .feature-strip-box h3 {
        font-size: 17px;
        line-height: 22px;
        min-height: 44px;
    }

    .feature-strip-box p {
        font-size: 13px;
        line-height: 19px;
    }

}


/*---------------------------------------------------------
    VERY SMALL PHONES
    360px AND BELOW
    1 COLUMN
---------------------------------------------------------*/

@media (max-width:360px) {

    .feature-strip-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

}


/*=========================================================
    SURGERY #8
    HOME CTA BUTTONS — MOBILE
=========================================================*/

@media (max-width:768px) {

    #hero-buttons {
        width: 100%;
        box-sizing: border-box;
        padding: 12px 12px;
    }

    #hero-buttons .index-button-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0;
    }

    #hero-buttons .index-gold-btn,
    #hero-buttons .index-outline-btn {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 320px;

        box-sizing: border-box;

        padding: 15px 18px;

        text-align: center;
        line-height: 22px;

        white-space: normal;
        overflow-wrap: break-word;
    }

}


/*=========================================================
    SMALL MOBILE
=========================================================*/

@media (max-width:480px) {

    #hero-buttons {
        padding-left: 10px;
        padding-right: 10px;
    }

    #hero-buttons .index-gold-btn,
    #hero-buttons .index-outline-btn {
        width: 100%;
        max-width: 300px;
        padding: 14px 16px;
    }

}


/*=========================================================
    HOME PAGE
    SURGERY #6
    WHO WE ARE — MOBILE STACK
=========================================================*/

@media (max-width:768px) {

    .who-container {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .who-left {
        width: 100%;
    }

    .who-right {
        width: 100%;
    }

    .who-right img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

}

@media (max-width:480px) {

    .who-container {
        gap: 24px;
    }

    .who-left h2 {
        font-size: 30px;
        line-height: 36px;
    }

    .who-left h3 {
        font-size: 18px;
        line-height: 27px;
    }

    .who-left li {
        font-size: 15px;
        line-height: 22px;
        margin-bottom: 14px;
        padding-left: 30px;
    }

}

/*=========================================================
    SURGERY #6A
    WHO WE ARE — MOBILE STATISTICS
=========================================================*/

@media (max-width:768px) {

    .stats-box {
        grid-template-columns: repeat(2, 1fr);
        padding: 18px 8px;
    }

    .stat {
        padding: 8px 6px;
    }

    .stat:nth-child(2) {
        border-right: none;
    }

    .stat:nth-child(3),
    .stat:nth-child(4) {
        border-top: 1px solid rgba(255, 255, 255, .15);
    }

    .stat h2 {
        font-size: 38px;
        margin-bottom: 6px;
    }

    .stat p {
        font-size: 14px;
        line-height: 20px;
    }

}

/*=========================================================
    SURGERY #7
    WHY CUSTOMERS — MOBILE GRID
=========================================================*/

@media (max-width:768px) {

    #why-customers h2 {
        font-size: 30px;
        line-height: 38px;
        padding: 12px 14px;
    }

    #why-customers .section-subtitle {
        font-size: 17px;
        line-height: 27px;
        margin-bottom: 30px;
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .why-card {
        min-height: 300px;
        padding: 18px 12px;
    }

    .why-card img {
        width: 60px;
        height: 60px;
        margin-bottom: 16px;
    }

    .why-card h3 {
        font-size: 18px;
        line-height: 25px;
        margin-bottom: 12px;
    }

    .why-card p {
        font-size: 14px;
        line-height: 22px;
    }

}

@media (max-width:480px) {

    #why-customers h2 {
        font-size: 28px;
        line-height: 36px;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .why-card {
        min-height: auto;
    }

}



/*=========================================================
    SURGERY #9
    HOME — 5 CARD OVERVIEW SECTION
    SERVICES / INDUSTRIES / PRODUCTS / SOURCING / TRADEALLY
=========================================================*/

@media (max-width:768px) {

    #services-overview {
        padding-left: 12px;
        padding-right: 12px;
    }

    #services-overview .overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    #services-overview .overview-box {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 18px 14px;
    }

    #services-overview .overview-box h3 {
        font-size: 18px;
        line-height: 25px;
        margin-bottom: 14px;
    }

    #services-overview .small-title {
        font-size: 14px;
        line-height: 21px;
        margin-bottom: 16px;
    }

    #services-overview .overview-list {
        font-size: 13px;
        line-height: 20px;
    }

    #services-overview .overview-list li {
        margin-bottom: 8px;
    }

    #services-overview .overview-box img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    #services-overview .small-btn {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: 12px 10px;
        font-size: 13px;
    }

}


@media (max-width:480px) {

    #services-overview {
        padding-left: 10px;
        padding-right: 10px;
    }

    #services-overview .overview-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #services-overview .overview-box {
        padding: 20px 16px;
    }

    #services-overview .overview-box h3 {
        font-size: 20px;
        line-height: 27px;
    }

    #services-overview .small-title {
        font-size: 15px;
        line-height: 22px;
    }

    #services-overview .overview-list {
        font-size: 14px;
        line-height: 22px;
    }

    #services-overview .small-btn {
        width: 90%;
        max-width: 260px;
        margin-left: auto;
        margin-right: auto;
    }

}


/*=========================================================
    SURGERY #10
    HOME — 6 CARD BUSINESS FEATURES
    TECHNOLOGY / PROCESS / RISK / KNOWLEDGE /
    PARTNERSHIP / CONFIDENTIALITY
=========================================================*/

@media (max-width:768px) {

    #business-features {
        padding-left: 12px;
        padding-right: 12px;
    }

    #business-features .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    #business-features .feature-box {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 20px 14px;
    }

    #business-features .feature-box img {
        width: 58px;
        height: 58px;
        object-fit: contain;
        margin-bottom: 14px;
    }

    #business-features .feature-box h3 {
        font-size: 17px;
        line-height: 23px;
        margin-bottom: 12px;
    }

    #business-features .feature-box p {
        font-size: 13px;
        line-height: 21px;
    }

    #business-features .feature-box a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-width: 120px;
        padding: 10px 14px;
        margin-top: 12px;
        font-size: 13px;
        text-align: center;
    }

}


@media (max-width:480px) {

    #business-features {
        padding-left: 10px;
        padding-right: 10px;
    }

    #business-features .feature-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #business-features .feature-box {
        padding: 22px 18px;
    }

    #business-features .feature-box img {
        width: 64px;
        height: 64px;
    }

    #business-features .feature-box h3 {
        font-size: 20px;
        line-height: 26px;
    }

    #business-features .feature-box p {
        font-size: 14px;
        line-height: 22px;
    }

    #business-features .feature-box a {
        min-width: 130px;
        padding: 11px 16px;
    }

}








/*=========================================================
    SURGERY #8
    HOME — QUICK ACCESS CARDS — MOBILE
    FAQ / SUBMIT ENQUIRY / DOWNLOADS
=========================================================*/

@media (max-width:768px) {

    #quick-access {
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }

    #quick-access .quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        width: 100%;
        max-width: 100%;
    }

    #quick-access .quick-box {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 22px 16px;
    }

    #quick-access .quick-box img {
        max-width: 90px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }

    #quick-access .quick-box h3 {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 14px;
    }

    #quick-access .quick-box p {
        font-size: 15px;
        line-height: 23px;
    }

    #quick-access .quick-box a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        max-width: 100%;
        padding: 12px 18px;
        text-align: center;
    }

}


/*=========================================================
    SMALL MOBILE
=========================================================*/

@media (max-width:480px) {

    #quick-access {
        padding-left: 10px;
        padding-right: 10px;
    }

    #quick-access .quick-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #quick-access .quick-box {
        width: 100%;
        padding: 24px 18px;
    }

    #quick-access .quick-box img {
        max-width: 85px;
    }

    #quick-access .quick-box h3 {
        font-size: 21px;
        line-height: 27px;
    }

    #quick-access .quick-box p {
        font-size: 15px;
        line-height: 23px;
    }

}


/*==========================================================
  MS-OS-HERO
  OUR SERVICES HERO — MOBILE RESPONSIVE
==========================================================*/

@media (max-width: 768px) {

    #services-hero {
        height: auto;
        overflow: hidden;
    }

    #services-hero .container {
        height: auto;
    }

    .services-hero-wrapper {
        flex-direction: column;
        height: auto;
    }

    /*------------------------------------------
      LEFT CONTENT PANEL
    ------------------------------------------*/

    .services-hero-left {
        flex: unset;
        width: 100%;
        min-height: auto;
    }

    .services-left-content {
        width: 100%;
        max-width: none;
        padding: 38px 24px 34px;
        box-sizing: border-box;
    }

    .services-subtitle {
        font-size: 20px;
        margin-bottom: 14px;
        letter-spacing: .4px;
    }

    .services-left-content h1 {
        font-size: 25px;
        line-height: 1.20;
        margin-bottom: 20px;
    }

    .services-left-content p {
        font-size: 15.5px;
        line-height: 1.65;
        margin-bottom: 25px;
    }

    /*------------------------------------------
      GOLD CURVED DIVIDER
      Hidden on mobile
    ------------------------------------------*/

    .services-divider {
        display: none;
    }

    /*------------------------------------------
      HERO IMAGE
    ------------------------------------------*/

    .services-hero-right {
        width: 100%;
        height: 250px;
        flex: none;
    }

    .services-hero-right img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

}


/*==========================================================
  EXTRA SMALL MOBILE
==========================================================*/

@media (max-width: 375px) {

    .services-left-content {
        padding: 34px 22px 30px;
    }

    .services-subtitle {
        font-size: 19px;
    }

    .services-left-content h1 {
        font-size: 23px;
        line-height: 1.20;
    }

    .services-left-content p {
        font-size: 15px;
        line-height: 1.60;
    }

    .services-hero-right {
        height: 230px;
    }

}


/*==========================================================
PRODUCTS PAGE - MOBILE RESPONSIVE
==========================================================*/

@media(max-width:768px) {

    /*----------------------------------------------------------
    SECTION HEADINGS
    ----------------------------------------------------------*/

    .product-portfolio .section-title,
    .why-source .section-title,
    .industries-supported .section-title {
        gap: 12px;
        margin-bottom: 12px;
    }

    .product-portfolio .section-title h2,
    .why-source .section-title h2,
    .industries-supported .section-title h2 {
        font-size: 26px;
        line-height: 1.2;
        text-align: center;
    }

    .product-portfolio .title-line,
    .why-source .title-line,
    .industries-supported .title-line {
        width: 38px;
        height: 6px;
        flex-shrink: 0;
    }


    /*----------------------------------------------------------
    OUR PRODUCT PORTFOLIO
    One card per row on mobile
    ----------------------------------------------------------*/

    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .portfolio-card {
        min-height: auto;
    }

    .portfolio-image {
        height: 240px;
    }

    .portfolio-body {
        padding: 18px;
    }

    .portfolio-body h3 {
        font-size: 24px;
        line-height: 1.2;
    }

    .portfolio-body p {
        font-size: 16px;
        line-height: 1.5;
    }

    .portfolio-body ul {
        columns: 1;
        column-gap: 0;
        margin: 10px 0 20px;
    }

    .portfolio-body li {
        font-size: 15px;
        margin-bottom: 7px;
    }

    .portfolio-btn {
        font-size: 13px;
        padding: 10px;
    }


    /*----------------------------------------------------------
    SPECIALIZED & CUSTOM SOURCING
    ----------------------------------------------------------*/

    .enquiry-card {
        min-height: auto;
    }

    .enquiry-card-content {
        padding: 20px;
    }

    .enquiry-icon-circle {
        width: 78px;
        height: 78px;
        margin-bottom: 12px;
    }

    .enquiry-card h3 {
        font-size: 26px;
        line-height: 1.25;
    }

    .enquiry-card p {
        font-size: 16px;
        line-height: 1.6;
    }

    .enquiry-button {
        padding: 11px;
        font-size: 14px;
    }


    /*----------------------------------------------------------
    WHY CUSTOMERS SOURCE THROUGH MOON SHINE GROUP
    ----------------------------------------------------------*/

    .source-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .source-card {
        padding: 18px 15px;
    }

    .source-card img {
        width: 60px;
        margin-bottom: 10px;
    }

    .source-card h4 {
        font-size: 18px;
        line-height: 1.3;
    }

    .source-card p {
        font-size: 15px;
        line-height: 1.5;
    }


    /*----------------------------------------------------------
    MULTI-COUNTRY SOURCING NETWORK
    ----------------------------------------------------------*/

    .network-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .network-map h3 {
        font-size: 23px;
        line-height: 1.2;
        text-align: center;
    }

    .network-map img {
        width: 100%;
    }

    .network-countries {
        width: 100%;
    }

    .country-group {
        margin-bottom: 18px;
    }

    .country-group h4 {
        font-size: 20px;
    }

    .country-group li {
        padding-left: 28px;
        font-size: 16px;
        line-height: 1.4;
    }

    .network-description {
        width: 100%;
    }

    .network-description p {
        font-size: 16px;
        line-height: 1.6;
    }

    .network-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-box {
        padding: 12px 8px;
    }

    .stat-box img {
        width: 60px;
        height: 60px;
        margin-bottom: 8px;
    }

    .stat-box h4 {
        font-size: 24px;
        margin-bottom: 6px;
    }

    .stat-box span {
        font-size: 14px;
        line-height: 1.3;
    }


    /*----------------------------------------------------------
    SUPPORTING CUSTOMERS ACROSS MULTIPLE INDUSTRIES
    ----------------------------------------------------------*/

    .industry-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 12px;
        margin-top: 15px;
        text-align: center;
    }

    .industry-item img {
        width: 65px;
        height: 65px;
        margin: 0 auto 8px;
        display: block;
    }

    .industry-item span {
        font-size: 14px;
        line-height: 1.35;
    }


    /*----------------------------------------------------------
    PRODUCTS COMMITMENT
    ----------------------------------------------------------*/

    .products-commitment {
        padding: 10px 0;
    }

    .products-commitment .container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
        padding: 0;
    }

    .products-commitment-left {
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 25px 20px;
    }

    .products-commitment-left img {
        width: 80px;
        margin: 0 auto 15px;
    }

    .products-commitment-text h3 {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .products-commitment-text p {
        font-size: 15px;
        line-height: 1.6;
    }

    .products-commitment-center {
        width: 100%;
        text-align: center;
        padding: 20px;
    }

    .products-commitment-center h4 {
        font-size: 17px;
        line-height: 1.5;
        margin-bottom: 12px;
    }

    .products-commit-script {
        font-size: 28px;
    }

    .products-commitment-center h2 {
        font-size: 20px;
        line-height: 1.3;
    }

    .products-commitment-right {
        width: 100%;
        height: 220px;
        align-self: auto;
    }

    .products-commitment-right img {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }


    /*----------------------------------------------------------
    BOTTOM CTA BUTTONS
    ----------------------------------------------------------*/

    #partner-cta {
        padding: 12px 0;
    }

    .partner-buttons {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .partner-buttons a {
        min-height: 58px;
        padding: 12px 15px;
        font-size: 15px;
        line-height: 1.3;
        text-align: center;
    }

    .partner-buttons img {
        width: 32px;
        flex-shrink: 0;
    }

}


@media(max-width:480px) {

    .product-portfolio .section-title h2,
    .why-source .section-title h2,
    .industries-supported .section-title h2 {
        font-size: 24px;
    }

    .product-portfolio .title-line,
    .why-source .title-line,
    .industries-supported .title-line {
        width: 28px;
        height: 5px;
    }

    .portfolio-image {
        height: 220px;
    }

    .network-stats {
        grid-template-columns: 1fr 1fr;
    }

    .industry-grid {
        grid-template-columns: 1fr 1fr;
    }

}


/* ==========================================================
   SPECIFICATIONS PAGE — MOBILE OPTIMIZATION
   Surgical Mobile Override
   ========================================================== */

@media (max-width: 767px) {

    /* ------------------------------------------------------
       1. SPECIFICATIONS HERO
       Desktop: Left Content | Divider | Image
       Mobile: Content -> Buttons -> Image
       ------------------------------------------------------ */

    .specifications-hero-content {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .specifications-hero-left {
        width: 100%;
        max-width: 100%;
    }

    .specifications-divider {
        display: none;
    }

    .specifications-hero-right {
        width: 100%;
        max-width: 100%;
    }

    .specifications-hero-right img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }


    /* ------------------------------------------------------
       2. WHY MATERIAL SELECTION MATTERS
       Four desktop cards -> one card per row
       ------------------------------------------------------ */

    .material-selection-grid {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 16px;
    }

    .material-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       3. TECHNICAL PRODUCT REFERENCE LIBRARY
       Desktop two-zone layout -> mobile vertical layout
       ------------------------------------------------------ */

    .technical-library-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        overflow: visible;
    }

    .library-menu {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .library-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        gap: 16px;
    }

    .library-column,
    .library-image-panel {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        flex: none;
        box-sizing: border-box;
    }

    .library-column ul {
        height: auto;
        min-height: 0;
        max-height: none;
        margin: 0;
        padding: 18px 20px 20px 38px;
        box-sizing: border-box;
    }

    .library-column li {
        height: auto;
        min-height: 0;
        margin-bottom: 8px;
        line-height: 1.5;
    }




    .library-category {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .library-category span {
        min-width: 0;
        white-space: normal;
        overflow-wrap: break-word;
    }

    .library-category img {
        flex-shrink: 0;
    }

    .library-category i {
        flex-shrink: 0;
    }

    .library-image-panel img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    .library-image-panel {
        height: auto;
        min-height: 0;
    }

    .library-image-panel img {
        height: auto;
        max-height: 280px;
        object-fit: contain;
    }


    /* ------------------------------------------------------
       4. SECTION TITLES
       Prevent long headings from creating overflow
       ------------------------------------------------------ */

    .specifications-section-title,
    .section-title {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .specifications-section-title h2,
    .section-title h2 {
        max-width: 100%;
        overflow-wrap: break-word;
    }


    /* ------------------------------------------------------
       5. GLOBAL SAFETY
       Prevent desktop fixed widths from causing
       horizontal scrolling on this page
       ------------------------------------------------------ */

    .specifications-hero,
    #why-material-selection,
    #technical-library,
    .standards-section,
    .material-expertise,
    .advantages-belt,
    .specifications-commitment-section,
    .specifications-cta-section,
    .specifications-journey-section,
    .global-presence {
        max-width: 100%;
        overflow-x: hidden;
    }

}


/*==========================================================
TRADEALLY™ ERP — FUTURE VISION
MOBILE SURGERY
==========================================================*/

@media (max-width: 768px) {

    .future-vision {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .future-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .future-image {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-top: 20px;
        box-sizing: border-box;
    }

    .future-image img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

}

/*==========================================================
TRADEALLY™ ERP
MOBILE SURGERY — CAPABILITY CARDS + TECHNOLOGY PHILOSOPHY
==========================================================*/

@media (max-width: 768px) {

    /*--------------------------------------------------------
      1. KEY CAPABILITIES
      Mobile:
      Image → Content
      One full-width card per row
    --------------------------------------------------------*/

    .tradeally-capabilities-grid {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        gap: 20px;
    }

    .tradeally-capability-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;

        /*
         * The desktop cards use background images.
         * On mobile, show the image prominently above
         * the textual content.
         */
        background-size: 100% auto;
        background-position: top center;
        background-repeat: no-repeat;

        /*
         * Reserve proper vertical space for the image.
         */
        padding-top: 180px;
    }

    .tradeally-capability-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;

        /*
         * Remove the desktop/mobile side reservation.
         */
        padding-right: 22px;
        padding-left: 22px;
    }

    .tradeally-capability-content h3 {
        max-width: 100%;
        overflow-wrap: break-word;
    }


    /*--------------------------------------------------------
  2. TECHNOLOGY PHILOSOPHY
  Mobile:
  Photograph completely separated from content
--------------------------------------------------------*/

    .technology-philosophy {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .technology-photo {
        order: 1;
        position: relative;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .technology-photo img {
        display: block;
        position: relative;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        object-fit: cover;
    }

    .technology-content {
        order: 2;
        position: relative;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        margin: 0;
        padding: 22px 20px;
        box-sizing: border-box;
        background: #ffffff;
        z-index: 2;
    }

    .technology-content h2 {
        position: relative;
        margin: 0 0 20px 0;
        padding: 0;
        top: auto;
        left: auto;
        transform: none;
        z-index: 3;
    }


    /*--------------------------------------------------------
      3. FUTURE VISION
      Mobile:
      Content → Image
    --------------------------------------------------------*/

    .future-vision {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .future-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .future-image {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-top: 20px;
        box-sizing: border-box;
    }

    .future-image img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

}


/* =========================================================
   OUR PROCESS — MOBILE SURGERY
   ========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------------------
       1. PROCESS MAIN — SINGLE COLUMN
       ----------------------------------------------------- */

    .process-main {
        width: 100%;
        overflow-x: hidden;
    }

    .process-main .container {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    .process-layout {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        gap: 30px;
        box-sizing: border-box;
    }

    .process-left,
    .process-right {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       2. STEP-BY-STEP PROCESS
       ----------------------------------------------------- */

    .process-left {
        overflow: hidden;
    }

    .section-title-green {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .process-timeline {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .process-step {
        display: grid;
        grid-template-columns: 42px 58px minmax(0, 1fr);
        align-items: start;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .step-number {
        position: relative;
        width: 42px;
        height: 42px;
        min-width: 42px;
        margin: 0;
        box-sizing: border-box;
    }

    .step-icon {
        width: 58px;
        min-width: 58px;
        box-sizing: border-box;
    }

    .step-icon img {
        display: block;
        width: 46px;
        height: 46px;
        max-width: 100%;
        object-fit: contain;
    }

    .step-content {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        padding-right: 15px;
    }

    .step-content h3 {
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .step-content p {
        width: 100%;
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
    }


    /* -----------------------------------------------------
       3. POST-DELIVERY SUPPORT
       ----------------------------------------------------- */

    .post-support-box {
        width: calc(100% - 30px);
        max-width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       4. PROCESS PRINCIPLES
       ----------------------------------------------------- */

    .process-principles {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .process-principles h2,
    .enabling-process h2,
    .customer-benefits h2 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .principles-grid {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        gap: 15px;
        box-sizing: border-box;
    }

    .principle-card {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }


    /* -----------------------------------------------------
       5. ENABLING OUR PROCESS
       ----------------------------------------------------- */

    .enabling-process {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .enable-card {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .enable-content {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       6. CUSTOMER BENEFITS
       ----------------------------------------------------- */

    .customer-benefits {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .benefits-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .benefit-item {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       7. PROCESS JOURNEY
       ----------------------------------------------------- */

    .process-journey {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .process-journey .container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .journey-flow {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
        gap: 25px 10px;
        box-sizing: border-box;
    }

    .journey-item {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .journey-arrow {
        display: none;
    }


    /* -----------------------------------------------------
       8. BOTTOM CTA — SINGLE COLUMN
       ----------------------------------------------------- */

    .process-cta {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .process-cta .container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .process-cta-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .cta-graphic,
    .cta-text,
    .cta-quote {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .cta-graphic {
        order: 1;
    }

    .cta-text {
        order: 2;
    }

    .cta-quote {
        order: 3;
    }

    .cta-graphic img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    .cta-text h2,
    .cta-text p {
        max-width: 100%;
        overflow-wrap: break-word;
    }

}


/* ==========================================================
   TECHNOLOGY — MOBILE HERO FIX
   ========================================================== */

@media (max-width: 768px) {

    .technology-hero-wrapper {
        height: auto;
        min-height: 0;
    }

    .technology-hero-grid {
        height: auto;
        padding: 35px 20px 30px;
    }

}


/*==========================================================
   TECHNOLOGY — EXECUTION DISCIPLINE
   MOBILE VERTICAL LIFECYCLE
==========================================================*/

@media (max-width: 768px) {

    .execution-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        overflow-x: hidden;
        overflow-y: visible;
        padding: 18px 12px;
    }

    .execution-item {
        width: 100%;
        flex: none;
        align-items: center;
        text-align: center;
    }

    .execution-item ul {
        margin: 0 auto;
        width: max-content;
        max-width: 100%;
    }

    .execution-arrow {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 0;
    }

    .execution-arrow img {
        width: 22px;
        transform: rotate(90deg);
    }

}


/*==========================================================
KNOWLEDGE CENTER
MOBILE & TABLET RESPONSIVE SURGERY
==========================================================*/

/*----------------------------------------------------------
KNOWLEDGE HERO
----------------------------------------------------------*/

@media (max-width: 991px) {

    .knowledge-hero-box {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .knowledge-hero-left {
        padding: 25px 20px;
    }

    .knowledge-hero-right {
        min-height: 260px;
    }

    .knowledge-hero-right img {
        width: 100%;
        height: 260px;
        object-fit: cover;
    }

}

/*----------------------------------------------------------
KNOWLEDGE HERO FEATURES
----------------------------------------------------------*/

@media (max-width: 768px) {

    .knowledge-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .knowledge-feature {
        align-items: flex-start;
    }

    .knowledge-feature img {
        width: 42px;
    }

    .knowledge-feature span {
        font-size: 12px;
    }

    .knowledge-feature small {
        font-size: 11px;
    }

}

/*----------------------------------------------------------
KNOWLEDGE CATEGORIES
----------------------------------------------------------*/

@media (max-width: 768px) {

    .knowledge-categories-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .knowledge-card {
        width: 100%;
    }

    .knowledge-card-header {
        padding: 18px;
        gap: 14px;
    }

    .knowledge-card-header img {
        width: 48px;
        flex-shrink: 0;
    }

    .knowledge-card-header h3 {
        font-size: 18px;
        line-height: 1.3;
    }

    .knowledge-card ul {
        padding: 0 22px 18px 40px;
    }

    .knowledge-card li {
        font-size: 14px;
        line-height: 1.5;
    }

    .knowledge-card-image {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }

}

/*----------------------------------------------------------
ADDITIONAL TOPICS WE STRONGLY RECOMMEND
----------------------------------------------------------*/

@media (max-width: 768px) {

    .knowledge-recommend {
        padding: 10px 0;
    }

    .knowledge-recommend-title {
        margin: 0 0 22px;
        font-size: 24px;
        line-height: 1.2;
        text-align: center;
    }

    .knowledge-recommend-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .recommend-card {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .recommend-content {
        padding: 18px;
    }

    .recommend-header {
        gap: 12px;
        margin-bottom: 14px;
    }

    .recommend-header img {
        width: 48px;
        flex-shrink: 0;
    }

    .recommend-header h3 {
        font-size: 18px;
        line-height: 1.3;
    }

    .recommend-header h4 {
        font-size: 13px;
    }

    .recommend-content ul {
        padding-left: 20px;
    }

    .recommend-content li {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 7px;
    }

    .recommend-image {
        width: 100%;
        height: 200px;
    }

    .recommend-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

}

/*----------------------------------------------------------
KNOWLEDGE BENEFITS STRIP
----------------------------------------------------------*/

@media (max-width: 768px) {

    .knowledge-benefits {
        padding: 10px 0;
    }

    .knowledge-benefits-box {
        grid-template-columns: 1fr;
    }

    .knowledge-benefit {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ececec;
        padding: 16px 18px;
    }

    .knowledge-benefit:last-child {
        border-bottom: none;
    }

    .knowledge-benefit img {
        width: 54px;
        flex-shrink: 0;
    }

}

/*----------------------------------------------------------
KNOWLEDGE SHARED IS VALUE CREATED
----------------------------------------------------------*/

@media (max-width: 768px) {

    .knowledge-cta-box {
        grid-template-columns: 1fr;
    }

    .knowledge-cta-left {
        padding: 20px 15px;
        gap: 15px;
    }

    .knowledge-cta-left img {
        width: 60px;
    }

    .knowledge-cta-left h3 {
        font-size: 20px;
        line-height: 1.3;
    }

    .knowledge-cta-left p {
        font-size: 14px;
        line-height: 1.6;
    }

    .knowledge-cta-right {
        padding: 20px 15px;
        border-left: none;
        border-top: 2px solid rgba(213, 168, 72, .45);
    }

    .knowledge-cta-right h4 {
        font-size: 22px;
    }

    .knowledge-cta-right h2 {
        font-size: 24px;
        line-height: 1.15;
        margin: 6px 0 18px;
    }

    .knowledge-cta-btn {
        width: 100%;
        max-width: 220px;
    }

}


/*=========================================================
    SUPPLIERS PAGE
    SURGERY #1
    SUPPLIER PARTNERSHIP HERO — MOBILE
=========================================================*/

@media (max-width:768px) {

    .supplier-hero {
        padding: 0;
    }

    .supplier-hero-box {
        grid-template-columns: 1fr;
        height: auto;
        border-radius: 10px;
    }

    .supplier-hero-left {
        padding: 22px 18px 20px;
    }

    .supplier-hero-left h1 {
        font-size: 32px;
        line-height: 1.05;
        margin-bottom: 12px;
    }

    .supplier-hero-left h2 {
        font-size: 19px;
        line-height: 1.4;
        margin-bottom: 16px;
    }

    .supplier-hero-left p {
        font-size: 14px;
        line-height: 1.65;
        margin-bottom: 20px;
    }

    .supplier-features {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 22px;
    }

    .supplier-feature {
        justify-content: flex-start;
    }

    .supplier-feature img {
        width: 44px;
        flex-shrink: 0;
    }

    .supplier-feature span {
        font-size: 14px;
        line-height: 1.3;
    }

    .supplier-feature small {
        font-size: 12px;
    }

    .supplier-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    .supplier-btn {
        width: 100%;
        max-width: 320px;
        min-height: 48px;
        padding: 10px 16px;
        box-sizing: border-box;
        text-align: center;
        line-height: 1.35;
    }

    .supplier-hero-right {
        height: auto;
        padding: 0;
    }

    .supplier-hero-right img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
    }

}

/*=========================================================
    SUPPLIERS PAGE
    SURGERY #2
    SUPPLIER STATISTICS — MOBILE
=========================================================*/

@media (max-width:768px) {

    .supplier-stats {
        padding: 4px 0 0;
    }

    .supplier-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        border-radius: 0 0 10px 10px;
    }

    .supplier-stat {
        min-width: 0;
        padding: 16px 8px 14px;
        border-right: 1px solid rgba(255, 255, 255, .12);
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .supplier-stat:nth-child(2),
    .supplier-stat:nth-child(4),
    .supplier-stat:nth-child(6) {
        border-right: none;
    }

    .supplier-stat:nth-child(5),
    .supplier-stat:nth-child(6) {
        border-bottom: none;
    }

    .supplier-stat img {
        width: 42px;
        height: 42px;
        object-fit: contain;
        margin-bottom: 7px;
    }

    .supplier-stat h2 {
        font-size: 28px;
        line-height: 1.1;
        margin: 0;
    }

    .supplier-stat h4 {
        font-size: 13px;
        line-height: 1.3;
        margin: 5px 0 3px;
    }

    .supplier-stat p {
        font-size: 11px;
        line-height: 1.35;
    }

}

/*=========================================================
    SUPPLIERS PAGE
    SURGERY #3
    WHY PARTNER WITH MOON SHINE GROUP — MOBILE
=========================================================*/

@media (max-width:768px) {

    .supplier-partnership-overview {
        padding: 16px 0;
    }

    .supplier-overview-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .supplier-overview-card {
        width: 100%;
        border-radius: 10px;
    }

    .supplier-overview-header {
        gap: 10px;
        padding: 14px;
        align-items: center;
    }

    .supplier-overview-header img {
        width: 42px;
        height: 42px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .supplier-overview-header h3 {
        font-size: 17px;
        line-height: 1.3;
    }

    .supplier-overview-card ul {
        padding: 14px 14px 16px;
    }

    .supplier-overview-card li {
        padding-left: 28px;
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 1.45;
    }

    .supplier-overview-card li::before {
        left: 2px;
        top: 0;
        font-size: 15px;
    }

}

/*=========================================================
    SUPPLIERS PAGE
    SURGERY #4
    INDUSTRIES WE SERVE — MOBILE
=========================================================*/

@media (max-width:768px) {

    .supplier-industries {
        padding: 16px 0;
    }

    .supplier-industries-title {
        font-size: 24px;
        line-height: 1.25;
        margin-bottom: 14px;
    }

    .supplier-industries-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .industry-card {
        width: 100%;
        border-radius: 10px;
    }

    .industry-card img {
        width: 100%;
        height: 150px;
        object-fit: cover;
    }

    .industry-card h3 {
        font-size: 17px;
        line-height: 1.3;
        padding: 10px 12px;
    }

}

/*=========================================================
    SUPPLIERS PAGE
    SURGERY #5
    PREFERRED PRODUCT CATEGORIES — MOBILE
=========================================================*/

@media (max-width:768px) {

    .preferred-products {
        padding: 16px 0;
    }

    .preferred-products .section-title {
        margin-bottom: 18px;
    }

    .preferred-products .section-title h2 {
        font-size: 24px;
        line-height: 1.25;
    }

    .preferred-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px 10px;
    }

    .preferred-product {
        min-width: 0;
    }

    .preferred-product img {
        width: 58px;
        height: 58px;
        margin: 0 auto 8px;
    }

    .preferred-product span {
        font-size: 12px;
        line-height: 1.35;
    }

}

/*=========================================================
    SUPPLIERS PAGE
    SURGERY #6
    OUR SUPPLIER PARTNERSHIP & SUPPLIER JOURNEY — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      SECTION TITLE
    ------------------------------------------------------*/

    .supplier-journey {
        padding: 16px 0;
    }

    .supplier-journey-title {
        margin-bottom: 18px;
    }

    .supplier-journey-title h2 {
        font-size: 22px;
        line-height: 1.3;
        padding: 12px 10px;
    }


    /*------------------------------------------------------
      THREE-COLUMN DESKTOP GRID → ONE MOBILE COLUMN
    ------------------------------------------------------*/

    .supplier-journey-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }


    /*------------------------------------------------------
      LEFT CARD — SUPPLIER ASSESSMENT
    ------------------------------------------------------*/

    .supplier-journey-card,
    .supplier-tier-card {
        width: 100%;
        box-sizing: border-box;
        border-radius: 10px;
        padding: 16px;
    }

    .supplier-journey-card h3,
    .supplier-tier-card h3 {
        font-size: 18px;
        line-height: 1.35;
        margin-bottom: 12px;
    }

    .supplier-journey-card p,
    .supplier-tier-card p {
        font-size: 14px;
        line-height: 1.6;
    }


    /*------------------------------------------------------
      TEN SUPPLIER ASSESSMENT ICONS
      Desktop = 5 columns
      Mobile = 2 columns
    ------------------------------------------------------*/

    .journey-icons {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 10px;
        margin-bottom: 18px;
    }

    .journey-item {
        min-width: 0;
    }

    .journey-item img {
        width: 48px;
        height: 48px;
        object-fit: contain;
        margin-bottom: 7px;
    }

    .journey-item span {
        font-size: 12px;
        line-height: 1.4;
    }


    /*------------------------------------------------------
      SUPPLIER ASSESSMENT NOTE
    ------------------------------------------------------*/

    .journey-note {
        padding: 12px;
        font-size: 13px;
        line-height: 1.55;
    }


    /*------------------------------------------------------
      TIER-1 TO 3 SUPPLIER QUALIFICATION IMAGE
    ------------------------------------------------------*/

    .supplier-tier-card img {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-top: 12px;
        display: block;
    }


    /*------------------------------------------------------
      BEYOND WEBSITES & MARKETING CLAIMS
    ------------------------------------------------------*/

    .supplier-journey-card ul {
        margin: 16px 0;
    }

    .supplier-journey-card li {
        padding-left: 24px;
        margin-bottom: 9px;
        font-size: 14px;
        line-height: 1.5;
    }

    .supplier-journey-card blockquote {
        margin: 16px 0 0;
        padding: 12px;
        font-size: 13px;
        line-height: 1.55;
    }

}

/*=========================================================
    SUPPLIERS PAGE
    SURGERY #7
    SUPPLIER ASSESSMENT — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      THREE ASSESSMENT CARDS
      DESKTOP = 3 COLUMNS
      MOBILE = 1 COLUMN
    ------------------------------------------------------*/

    .supplier-assessment {
        padding: 16px 0;
    }

    .supplier-assessment-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }


    /*------------------------------------------------------
      ASSESSMENT CARD
    ------------------------------------------------------*/

    .assessment-card {
        width: 100%;
        box-sizing: border-box;
        padding: 16px;
        border-radius: 10px;
    }


    /*------------------------------------------------------
      CARD HEADER
    ------------------------------------------------------*/

    .assessment-header {
        gap: 12px;
        margin-bottom: 14px;
        align-items: center;
    }

    .assessment-header img {
        width: 44px;
        height: 44px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .assessment-header h3 {
        font-size: 18px;
        line-height: 1.3;
    }


    /*------------------------------------------------------
      CARD DESCRIPTION
    ------------------------------------------------------*/

    .assessment-card p {
        font-size: 14px;
        line-height: 1.55;
        margin-bottom: 16px;
    }


    /*------------------------------------------------------
      ASSESSMENT IMAGE
    ------------------------------------------------------*/

    .assessment-image-box {
        height: 180px;
        width: 100%;
        overflow: hidden;
    }

    .assessment-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

}

/*=========================================================
    SUPPLIERS PAGE
    SURGERY #8
    SUPPLIER VALUES — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      SUPPLIER VALUES — THREE COLUMNS → ONE COLUMN
    ------------------------------------------------------*/

    .supplier-values {
        padding: 16px 0;
        overflow: hidden;
    }

    .supplier-values-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }


    /*------------------------------------------------------
      VALUE CARD
    ------------------------------------------------------*/

    .supplier-value-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 16px;
        border-radius: 10px;
        overflow: hidden;
    }


    /*------------------------------------------------------
      CARD HEADER
    ------------------------------------------------------*/

    .supplier-value-header {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-width: 0;
        margin-bottom: 14px;
    }

    .supplier-value-header img {
        width: 46px;
        max-width: 46px;
        flex-shrink: 0;
    }

    .supplier-value-header h3 {
        flex: 1;
        min-width: 0;
        margin: 0;
        font-size: 18px;
        line-height: 1.3;
        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*------------------------------------------------------
      CARD DESCRIPTION
    ------------------------------------------------------*/

    .supplier-value-card p {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        font-size: 14px;
        line-height: 1.55;
        margin-bottom: 14px;
        text-align: left;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      VALUE CHECKLIST
    ------------------------------------------------------*/

    .supplier-value-card ul {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .supplier-value-card li {
        width: 100%;
        box-sizing: border-box;
        padding-left: 24px;
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .supplier-value-card li::before {
        left: 0;
        top: 0;
        font-size: 14px;
    }


    /*------------------------------------------------------
      TECHNOLOGY CARD — SIX ICONS → THREE COLUMNS
    ------------------------------------------------------*/

    .supplier-tech-icons {
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px 8px;
        margin: 14px 0;
    }

    .supplier-tech-icons div {
        min-width: 0;
        text-align: center;
    }

    .supplier-tech-icons img {
        width: 36px;
        max-width: 100%;
        margin: 0 auto 5px;
    }

    .supplier-tech-icons span {
        display: block;
        font-size: 10px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      TECHNOLOGY IMAGE
    ------------------------------------------------------*/

    .supplier-tech-image {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        margin: 12px auto 0;
    }

}

/*=========================================================
    SUPPLIERS PAGE
    SURGERY #9
    READY TO EXPLORE A PARTNERSHIP — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      CTA BOX
      DESKTOP = 65% / 35%
      MOBILE = ONE COLUMN
    ------------------------------------------------------*/

    .supplier-cta {
        padding: 16px 0;
    }

    .supplier-cta-box {
        grid-template-columns: 1fr;
        width: 100%;
    }


    /*------------------------------------------------------
      LEFT CTA PANEL
    ------------------------------------------------------*/

    .supplier-cta-left {
        padding: 20px 16px;
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .supplier-cta-icon img {
        width: 58px;
    }

    .supplier-cta-content h2 {
        font-size: 21px;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .supplier-cta-content p {
        font-size: 14px;
        line-height: 1.55;
    }


    /*------------------------------------------------------
      RIGHT CTA PANEL
    ------------------------------------------------------*/

    .supplier-cta-right {
        padding: 18px 16px;
        gap: 10px;
        align-items: center;
    }

    .supplier-cta-btn {
        width: 100%;
        max-width: 300px;
        min-height: 48px;
        box-sizing: border-box;
        text-align: center;
        padding: 10px 14px;
        line-height: 1.35;
    }

}

/*=========================================================
    SUPPLIERS PAGE
    SURGERY #10
    OUR COMMITMENT — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      THREE-COLUMN DESKTOP → ONE MOBILE COLUMN
    ------------------------------------------------------*/

    .supplier-commitment {
        padding: 18px 0;
    }

    .supplier-commitment-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        align-items: center;
    }


    /*------------------------------------------------------
      LEFT — OUR COMMITMENT
    ------------------------------------------------------*/

    .supplier-commitment-left {
        width: 100%;
        text-align: center;
    }

    .supplier-commitment-left h2 {
        font-size: 24px;
        line-height: 1.25;
        margin-bottom: 10px;
    }

    .supplier-commitment-left p {
        font-size: 14px;
        line-height: 1.6;
    }


    /*------------------------------------------------------
      CENTRE — COMMITMENT IMAGE
    ------------------------------------------------------*/

    .supplier-commitment-center {
        width: 100%;
        text-align: center;
    }

    .supplier-commitment-center img {
        width: 100px;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }


    /*------------------------------------------------------
      RIGHT — COMMITMENT MESSAGE
    ------------------------------------------------------*/

    .supplier-commitment-right {
        width: 100%;
        text-align: center;
    }

    .supplier-commitment-right h3 {
        font-size: 20px;
        line-height: 1.35;
        margin-bottom: 12px;
    }

    .supplier-commitment-right p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 14px;
    }

    .supplier-commitment-right h4 {
        font-size: 15px;
        line-height: 1.6;
    }

    .supplier-commitment-right span {
        font-size: 14px;
    }

}

/*=========================================================
    CONFIDENTIALITY PAGE
    SURGERY #1
    CONFIDENTIALITY & ETHICS HERO — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      HERO CONTAINER
    ------------------------------------------------------*/

    .ethics-hero {
        padding: 0;
        overflow: hidden;
    }

    .ethics-hero-box {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        min-width: 0;
        border-radius: 10px;
        overflow: hidden;
    }


    /*------------------------------------------------------
      HERO LEFT CONTENT
    ------------------------------------------------------*/

    .ethics-hero-left {
        width: 100%;
        box-sizing: border-box;
        padding: 22px 18px 18px;
        min-width: 0;
    }


    /*------------------------------------------------------
      HERO MAIN HEADING
    ------------------------------------------------------*/

    .ethics-hero-left h1 {
        margin: 0 0 12px;
        font-size: 30px;
        line-height: 1.1;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      HERO SUB-HEADING
    ------------------------------------------------------*/

    .ethics-hero-left h2 {
        margin: 0 0 16px;
        font-size: 18px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      HERO DESCRIPTION
    ------------------------------------------------------*/

    .ethics-hero-left p {
        margin: 0 0 14px;
        font-size: 14px;
        line-height: 1.6;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      HERO FEATURES — 4 ITEMS → 2 × 2
    ------------------------------------------------------*/

    .ethics-features {
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 10px;
        margin-top: 16px;
    }


    /*------------------------------------------------------
      INDIVIDUAL FEATURE
    ------------------------------------------------------*/

    .ethics-feature {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }


    /*------------------------------------------------------
      FEATURE ICON
    ------------------------------------------------------*/

    .ethics-feature img {
        width: 38px;
        max-width: 38px;
        flex-shrink: 0;
    }


    /*------------------------------------------------------
      FEATURE LABEL
    ------------------------------------------------------*/

    .ethics-feature span {
        min-width: 0;
        font-size: 12px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      HERO IMAGE
    ------------------------------------------------------*/

    .ethics-hero-right {
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        min-width: 0;
    }

    .ethics-hero-right img {
        width: 100%;
        height: auto;
        max-height: 240px;
        object-fit: cover;
        display: block;
    }

}

/*=========================================================
    CONFIDENTIALITY PAGE
    SURGERY #2
    CONFIDENTIALITY & ETHICS CARDS — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      ETHICS CARDS SECTION
    ------------------------------------------------------*/

    .ethics-cards {
        padding: 10px 0;
        overflow: hidden;
    }


    /*------------------------------------------------------
      8 CARDS → ONE COLUMN
    ------------------------------------------------------*/

    .ethics-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        width: 100%;
        min-width: 0;
    }


    /*------------------------------------------------------
      INDIVIDUAL ETHICS CARD
    ------------------------------------------------------*/

    .ethics-card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 16px;
        border-radius: 10px;
        overflow: hidden;
    }


    /*------------------------------------------------------
      CARD HEADER
    ------------------------------------------------------*/

    .ethics-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
        min-width: 0;
    }


    /*------------------------------------------------------
      CARD ICON
    ------------------------------------------------------*/

    .ethics-header img {
        width: 44px;
        max-width: 44px;
        height: auto;
        flex-shrink: 0;
        object-fit: contain;
    }


    /*------------------------------------------------------
      CARD TITLE
    ------------------------------------------------------*/

    .ethics-header h3 {
        min-width: 0;
        margin: 0;
        font-size: 18px;
        line-height: 1.25;
        font-weight: 800;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      CARD DESCRIPTION
    ------------------------------------------------------*/

    .ethics-card p {
        margin: 0 0 13px;
        font-size: 14px;
        line-height: 1.6;
        text-align: left;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      CARD CHECKLIST
    ------------------------------------------------------*/

    .ethics-card ul {
        width: 100%;
        margin: 0;
        padding: 0;
    }


    .ethics-card li {
        position: relative;
        padding-left: 22px;
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      CHECKLIST BULLET
    ------------------------------------------------------*/

    .ethics-card li::before {
        left: 0;
        top: 1px;
        font-size: 10px;
    }


    /*------------------------------------------------------
      LAST PARAGRAPH / DATA PROTECTION CARD
    ------------------------------------------------------*/

    .ethics-card p:last-child {
        margin-bottom: 0;
    }


    /*------------------------------------------------------
      DATA PROTECTION HIGHLIGHT
    ------------------------------------------------------*/

    .ethics-highlight {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-top: 14px;
        min-width: 0;
    }


    .ethics-highlight img {
        width: 38px;
        max-width: 38px;
        flex-shrink: 0;
    }


    .ethics-highlight span {
        min-width: 0;
        font-size: 13px;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

}

/*=========================================================
    CONFIDENTIALITY PAGE
    SURGERY #3
    ETHICS COMMITMENT CARDS — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      ETHICS COMMITMENT SECTION
    ------------------------------------------------------*/

    .ethics-values {
        padding: 10px 0;
        overflow: hidden;
    }


    /*------------------------------------------------------
      THREE CARDS → ONE COLUMN
    ------------------------------------------------------*/

    .ethics-values-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        width: 100%;
        min-width: 0;
    }


    /*------------------------------------------------------
      INDIVIDUAL VALUE CARD
    ------------------------------------------------------*/

    .ethics-value-card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 16px;
        border-radius: 10px;
        overflow: hidden;
    }


    /*------------------------------------------------------
      CARD HEADER
    ------------------------------------------------------*/

    .ethics-value-header {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-width: 0;
        margin-bottom: 14px;
    }


    /*------------------------------------------------------
      CARD ICON
    ------------------------------------------------------*/

    .ethics-value-header img {
        width: 46px;
        max-width: 46px;
        height: auto;
        flex-shrink: 0;
        object-fit: contain;
    }


    /*------------------------------------------------------
      CARD TITLE
    ------------------------------------------------------*/

    .ethics-value-header h3 {
        min-width: 0;
        margin: 0;
        font-size: 18px;
        line-height: 1.3;
        font-weight: 800;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      CARD DESCRIPTION
    ------------------------------------------------------*/

    .ethics-value-card p {
        margin: 0 0 12px;
        font-size: 14px;
        line-height: 1.6;
        text-align: left;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      CARD LIST
    ------------------------------------------------------*/

    .ethics-value-card ul {
        width: 100%;
        margin: 0;
        padding: 0;
    }


    .ethics-value-card li {
        position: relative;
        padding-left: 22px;
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      LIST BULLET
    ------------------------------------------------------*/

    .ethics-value-card li::before {
        left: 0;
        top: 1px;
        font-size: 10px;
    }


    /*------------------------------------------------------
      LAST LIST ITEM
    ------------------------------------------------------*/

    .ethics-value-card li:last-child {
        margin-bottom: 0;
    }

}

/*=========================================================
    CONFIDENTIALITY PAGE
    SURGERY #4
    OUR GUIDING PRINCIPLES — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      GUIDING PRINCIPLES SECTION
    ------------------------------------------------------*/

    .guiding-principles {
        width: 100%;
        max-width: 100%;
        padding: 10px 0;
        overflow: hidden;
        box-sizing: border-box;
    }


    /*------------------------------------------------------
      GUIDING BOX
    ------------------------------------------------------*/

    .guiding-box {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        padding: 16px;
        border-radius: 10px;
    }


    /*------------------------------------------------------
      SECTION TITLE
    ------------------------------------------------------ */

    .guiding-title {
        width: 100%;
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-sizing: border-box;
        overflow: hidden;
    }


    .guiding-title span {
        flex: 1;
        min-width: 0;
    }


    .guiding-title h2 {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        font-size: 22px;
        line-height: 1.25;
        text-align: center;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      SEVEN PRINCIPLES
      DESKTOP HORIZONTAL → MOBILE TWO COLUMNS
    ------------------------------------------------------ */

    .guiding-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    /*------------------------------------------------------
      INDIVIDUAL PRINCIPLE
    ------------------------------------------------------ */

    .guiding-item {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 10px 6px;
        text-align: center;
        overflow: hidden;
    }


    /*------------------------------------------------------
      PRINCIPLE ICON
    ------------------------------------------------------ */

    .guiding-item img {
        display: block;
        width: 52px;
        max-width: 100%;
        height: auto;
        margin: 0 auto 8px;
        object-fit: contain;
    }


    /*------------------------------------------------------
      PRINCIPLE NAME
    ------------------------------------------------------ */

    .guiding-item h4 {
        margin: 0;
        font-size: 14px;
        line-height: 1.3;
        text-align: center;
        overflow-wrap: anywhere;
    }

}

/*=========================================================
    CONFIDENTIALITY PAGE
    SURGERY #5
    ETHICS QUOTATION — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      ETHICS QUOTATION SECTION
    ------------------------------------------------------*/

    .ethics-quote {
        width: 100%;
        max-width: 100%;
        padding: 10px 0;
        box-sizing: border-box;
        overflow: hidden;
    }


    /*------------------------------------------------------
      MAIN QUOTE BOX
      DESKTOP TWO COLUMNS → MOBILE ONE COLUMN
    ------------------------------------------------------*/

    .ethics-quote-box {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow: hidden;
        border-radius: 10px;
    }


    /*------------------------------------------------------
      LEFT QUOTE AREA
    ------------------------------------------------------*/

    .ethics-quote-left {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 18px 16px;
    }


    /*------------------------------------------------------
      QUOTE ICON
    ------------------------------------------------------*/

    .ethics-quote-icon {
        flex: 0 0 58px;
        width: 58px;
        min-width: 58px;
    }


    .ethics-quote-icon img {
        display: block;
        width: 58px;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }


    /*------------------------------------------------------
      QUOTE CONTENT
    ------------------------------------------------------*/

    .ethics-quote-content {
        flex: 1;
        min-width: 0;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }


    .ethics-quote-content h2 {
        margin: 0 0 10px;
        font-size: 22px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }


    .ethics-quote-content h3 {
        margin: 0;
        font-size: 18px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      RIGHT COMMITMENT PANEL
    ------------------------------------------------------*/

    .ethics-quote-right {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 16px;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.35);
    }


    .ethics-quote-right h4 {
        margin: 0 0 8px;
        font-size: 20px;
        line-height: 1.3;
    }


    .ethics-quote-right p {
        margin: 0;
        font-size: 24px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

}

/*=========================================================
    CONFIDENTIALITY PAGE
    SURGERY #6
    OUR BUSINESS PHILOSOPHY — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      BUSINESS PHILOSOPHY SECTION
    ------------------------------------------------------*/

    .ethics-features-strip {
        width: 100%;
        max-width: 100%;
        padding: 10px 0;
        box-sizing: border-box;
        overflow: hidden;
    }


    /*------------------------------------------------------
      PHILOSOPHY CONTAINER
      DESKTOP FOUR COLUMNS → MOBILE ONE COLUMN
    ------------------------------------------------------*/

    .ethics-strip-box {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        overflow: hidden;
    }


    /*------------------------------------------------------
      INDIVIDUAL PHILOSOPHY CARD
    ------------------------------------------------------*/

    .ethics-strip-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 16px;
        text-align: center;
        overflow: hidden;
    }


    /*------------------------------------------------------
      PHILOSOPHY ICON
    ------------------------------------------------------*/

    .ethics-strip-item img {
        display: block;
        width: 58px;
        max-width: 100%;
        height: auto;
        margin: 0 auto 10px;
        object-fit: contain;
    }


    /*------------------------------------------------------
      PHILOSOPHY HEADING
    ------------------------------------------------------*/

    .ethics-strip-item h3 {
        margin: 0 0 10px;
        font-size: 18px;
        line-height: 1.3;
        text-align: center;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      PHILOSOPHY DESCRIPTION
    ------------------------------------------------------*/

    .ethics-strip-item p {
        margin: 0;
        font-size: 14px;
        line-height: 1.55;
        text-align: center;
        overflow-wrap: anywhere;
    }

}

/*=========================================================
    FAQ PAGE
    SURGERY #1
    FAQ HERO — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      FAQ HERO — OUTER SECTION
    ------------------------------------------------------*/

    .faq-hero {
        padding: 24px 0 20px;
    }


    /*------------------------------------------------------
      FAQ HERO — MAIN CONTENT
    ------------------------------------------------------*/

    .faq-hero-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }


    /*------------------------------------------------------
      FAQ HERO — LEFT CONTENT
    ------------------------------------------------------*/

    .faq-hero-left {
        width: 100%;
        box-sizing: border-box;
        text-align: left;
    }


    /*------------------------------------------------------
      FAQ HERO — BADGE
    ------------------------------------------------------*/

    .faq-badge {
        display: inline-block;
        font-size: 12px;
        line-height: 1.2;
        padding: 7px 12px;
        margin-bottom: 12px;
    }


    /*------------------------------------------------------
      FAQ HERO — MAIN HEADING
    ------------------------------------------------------*/

    .faq-hero-left h1 {
        font-size: 30px;
        line-height: 1.12;
        margin: 0 0 12px;
    }

    .faq-hero-left h1 span {
        display: block;
    }


    /*------------------------------------------------------
      FAQ HERO — SUB HEADING
    ------------------------------------------------------*/

    .faq-hero-left h2 {
        font-size: 20px;
        line-height: 1.3;
        margin: 0 0 12px;
    }


    /*------------------------------------------------------
      FAQ HERO — DESCRIPTION
    ------------------------------------------------------*/

    .faq-hero-left p {
        font-size: 14px;
        line-height: 1.6;
        margin: 0 0 18px;
    }


    /*------------------------------------------------------
      FAQ SEARCH BOX
    ------------------------------------------------------*/

    .faq-search-box {
        width: 100%;
        box-sizing: border-box;
        display: flex;
    }

    .faq-search-box input {
        min-width: 0;
        width: 100%;
        font-size: 14px;
        padding: 12px 14px;
        box-sizing: border-box;
    }

    .faq-search-box button {
        flex: 0 0 46px;
        width: 46px;
        min-width: 46px;
    }


    /*------------------------------------------------------
      POPULAR SEARCHES
    ------------------------------------------------------*/

    .popular-searches {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
        align-items: center;
    }

    .popular-searches>span {
        width: 100%;
        font-size: 13px;
        margin-bottom: 2px;
    }

    .popular-searches a {
        font-size: 12px;
        line-height: 1.3;
        padding: 6px 9px;
        white-space: normal;
    }


    /*------------------------------------------------------
      FAQ HERO — IMAGE
    ------------------------------------------------------*/

    .faq-hero-right {
        width: 100%;
        box-sizing: border-box;
    }

    .faq-hero-right img {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
        border-radius: 10px;
    }

}

/*=========================================================
    FAQ PAGE
    SURGERY #2
    FAQ STATISTICS — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      STATISTICS SECTION
    ------------------------------------------------------*/

    .faq-statistics {
        padding: 14px 0;
        overflow: hidden;
    }


    /*------------------------------------------------------
      FIVE STATISTICS — ONE COLUMN
    ------------------------------------------------------*/

    .faq-statistics-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    /*------------------------------------------------------
      INDIVIDUAL STATISTIC
    ------------------------------------------------------*/

    .faq-stat-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;

        display: flex;
        align-items: center;

        padding: 12px 14px;
        gap: 14px;

        overflow: hidden;
    }


    /*------------------------------------------------------
      STATISTIC ICON
    ------------------------------------------------------*/

    .faq-stat-icon {
        flex: 0 0 52px;
        width: 52px;
        min-width: 52px;
    }

    .faq-stat-icon img {
        display: block;
        width: 52px;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }


    /*------------------------------------------------------
      STATISTIC CONTENT
    ------------------------------------------------------*/

    .faq-stat-content {
        flex: 1;
        min-width: 0;
        width: auto;
        box-sizing: border-box;
    }


    /*------------------------------------------------------
      TOP LABEL
    ------------------------------------------------------*/

    .faq-stat-content .stat-top {
        display: block;
        margin-bottom: 2px;
        font-size: 11px;
        line-height: 1.2;
    }


    /*------------------------------------------------------
      MAIN NUMBER
    ------------------------------------------------------*/

    .faq-stat-content h3 {
        margin: 0 0 2px;
        font-size: 26px;
        line-height: 1.1;
    }


    /*------------------------------------------------------
      STATISTIC TITLE
    ------------------------------------------------------*/

    .faq-stat-content h4 {
        margin: 0;
        font-size: 14px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      SUPPORTING DESCRIPTION
    ------------------------------------------------------*/

    .faq-stat-content p {
        margin: 3px 0 0;
        font-size: 12px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

}

/*=========================================================
    FAQ PAGE
    SURGERY #3
    FAQ CATEGORY CARDS — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      CATEGORY SECTION
    ------------------------------------------------------*/

    .faq-category-section {
        padding: 16px 0;
        overflow: hidden;
    }


    /*------------------------------------------------------
      THREE CATEGORY CARDS → ONE COLUMN
    ------------------------------------------------------*/

    .faq-category-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    /*------------------------------------------------------
      INDIVIDUAL FAQ CARD
    ------------------------------------------------------*/

    .faq-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 16px;
        border-radius: 10px;
        overflow: hidden;
    }


    /*------------------------------------------------------
      CARD HEADER
    ------------------------------------------------------*/

    .faq-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-width: 0;
        margin-bottom: 14px;
    }


    /*------------------------------------------------------
      CARD ICON
    ------------------------------------------------------*/

    .faq-card-icon {
        flex: 0 0 48px;
        width: 48px;
        min-width: 48px;
    }

    .faq-card-icon img {
        display: block;
        width: 48px;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }


    /*------------------------------------------------------
      CARD TITLE AREA
    ------------------------------------------------------*/

    .faq-card-header>div:last-child {
        flex: 1;
        min-width: 0;
    }


    .faq-card-header h3 {
        margin: 0 0 4px;
        font-size: 18px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }


    .question-count {
        display: block;
        font-size: 12px;
        line-height: 1.3;
        margin-bottom: 3px;
    }


    .faq-card-header p {
        margin: 0;
        font-size: 12px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      CATEGORY LIST AREA
    ------------------------------------------------------*/

    .faq-list {
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px 18px;
        margin: 14px 0 16px;
    }


    .faq-list.single-column {
        grid-template-columns: 1fr;
    }


    /*------------------------------------------------------
      LISTS
    ------------------------------------------------------*/

    .faq-list ul {
        min-width: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }


    .faq-list li {
        position: relative;
        padding-left: 18px;
        margin-bottom: 7px;
        font-size: 13px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }


    .faq-list li::before {
        content: "✓";
        position: absolute;
        left: 0;
        top: 0;
        font-size: 11px;
    }


    /*------------------------------------------------------
      EXPLORE BUTTON
    ------------------------------------------------------*/

    .faq-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        width: 100%;
        max-width: 100%;
        min-height: 46px;

        box-sizing: border-box;
        padding: 10px 14px;

        font-size: 13px;
        line-height: 1.3;
        text-align: center;
    }

    .faq-btn span {
        flex-shrink: 0;
    }

}

/*=========================================================
    FAQ PAGE
    SURGERY #4
    FAQ WORKBENCH OUTER STRUCTURE — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      WORKBENCH SECTION
    ------------------------------------------------------*/

    .faq-workbench {
        width: 100%;
        max-width: 100%;
        padding: 20px 0;
        box-sizing: border-box;
        overflow: hidden;
    }


    /*------------------------------------------------------
      WORKBENCH HEADER
    ------------------------------------------------------*/

    .faq-engine-header {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        text-align: left;
        margin-bottom: 16px;
    }

    .faq-engine-header h2 {
        margin: 0 0 8px;
        font-size: 23px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .faq-engine-header p {
        margin: 0;
        font-size: 13px;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      FAQ WORKSPACE
      DESKTOP TWO COLUMNS → MOBILE ONE COLUMN
    ------------------------------------------------------*/

    .faq-workspace {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        gap: 14px;
        overflow: hidden;
    }


    /*------------------------------------------------------
      LEFT SIDEBAR
    ------------------------------------------------------*/

    .faq-sidebar {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }


    /*------------------------------------------------------
      RIGHT MAIN PANEL
    ------------------------------------------------------*/

    .faq-main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }


    /*------------------------------------------------------
      PREVENT CHILD CONTENT FROM CREATING HORIZONTAL
      OVERFLOW
    ------------------------------------------------------*/

    .faq-workspace *,
    .faq-sidebar *,
    .faq-main * {
        min-width: 0;
        box-sizing: border-box;
    }

}

/*=========================================================
    FAQ PAGE
    SURGERY #5
    FAQ SIDEBAR / CATEGORY NAVIGATION — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      SIDEBAR CONTAINER
    ------------------------------------------------------*/

    .faq-sidebar {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        border-radius: 10px;
        overflow: hidden;
    }


    /*------------------------------------------------------
      SIDEBAR HEADER
    ------------------------------------------------------*/

    .faq-sidebar-header {
        width: 100%;
        box-sizing: border-box;
        padding: 14px 16px;
        text-align: left;
    }

    .faq-sidebar-header h3 {
        margin: 0 0 5px;
        font-size: 18px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .faq-sidebar-header p {
        margin: 0;
        font-size: 12px;
        line-height: 1.4;
    }


    /*------------------------------------------------------
      NAVIGATION GROUP
    ------------------------------------------------------*/

    .faq-nav-group {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }


    /*------------------------------------------------------
      NAVIGATION TITLE BUTTON
    ------------------------------------------------------*/

    .faq-nav-title {
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 10px;
        padding: 11px 14px;

        text-align: left;
    }


    /*------------------------------------------------------
      CATEGORY TITLE
    ------------------------------------------------------*/

    .faq-nav-title>span {
        flex: 1;
        min-width: 0;

        font-size: 14px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      RIGHT SIDE — COUNT + ARROW
    ------------------------------------------------------*/

    .faq-nav-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;

        flex: 0 0 auto;
        min-width: 0;
    }


    .faq-count {
        min-width: 28px;
        height: 24px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0 6px;
        box-sizing: border-box;

        font-size: 11px;
        line-height: 1;
    }


    .faq-arrow {
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
    }


    /*------------------------------------------------------
      CATEGORY LIST
      IMPORTANT:
      DO NOT FORCE display/block/none HERE.
      EXISTING JAVASCRIPT CONTROLS EXPANSION.
    ------------------------------------------------------*/

    .faq-nav-list {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;

        padding: 4px 10px 8px;
        margin: 0;
    }


    /*------------------------------------------------------
      INDIVIDUAL CATEGORY
    ------------------------------------------------------*/

    .faq-nav-list li {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;

        padding: 9px 10px 9px 14px;

        font-size: 13px;
        line-height: 1.4;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*------------------------------------------------------
      ACTIVE CATEGORY
    ------------------------------------------------------*/

    .faq-nav-list li.active {
        border-radius: 6px;
    }


    /*------------------------------------------------------
      KEEP THE THREE GROUPS VISUALLY DISTINCT
    ------------------------------------------------------*/

    .faq-nav-group+.faq-nav-group {
        margin-top: 1px;
    }

}

/*=========================================================
    FAQ PAGE
    SURGERY #6
    FAQ MAIN HEADER + SEARCH — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      MAIN HEADER
    ------------------------------------------------------*/

    .faq-main-header {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        gap: 14px;

        padding: 16px;
        overflow: hidden;
    }


    /*------------------------------------------------------
      MAIN TITLE / SUBTITLE
    ------------------------------------------------------*/

    .faq-main-header>div:first-child {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .faq-main-header h2 {
        margin: 0 0 7px;

        font-size: 21px;
        line-height: 1.25;

        overflow-wrap: anywhere;
    }

    .faq-main-header p {
        margin: 0;

        font-size: 12px;
        line-height: 1.5;

        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      SEARCH AREA
    ------------------------------------------------------ */

    .faq-main-search {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    /*------------------------------------------------------
      SEARCH WRAPPER
    ------------------------------------------------------*/

    .faq-search-wrapper {
        position: relative;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }


    /*------------------------------------------------------
      SEARCH ICON
    ------------------------------------------------------*/

    .faq-search-icon {
        position: absolute;

        left: 12px;
        top: 50%;

        width: 18px;
        height: 18px;

        transform: translateY(-50%);

        z-index: 2;
        pointer-events: none;
    }


    /*------------------------------------------------------
      SEARCH INPUT
    ------------------------------------------------------*/

    .faq-search-wrapper input {
        display: block;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        height: 44px;

        box-sizing: border-box;

        padding: 10px 12px 10px 38px;

        font-size: 13px;
        line-height: 1.3;

        border-radius: 8px;

        overflow: hidden;
        text-overflow: ellipsis;
    }


    /*------------------------------------------------------
      SEARCH RESULTS DROPDOWN
      Keep it inside the viewport.
    ------------------------------------------------------*/

    .faq-search-results {
        position: absolute;

        left: 0;
        right: 0;

        width: 100%;
        max-width: 100%;

        box-sizing: border-box;

        z-index: 20;

        overflow: hidden;
    }

}

/*=========================================================
    FAQ PAGE
    SURGERY #7
    FAQ QUESTION LIST — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      QUESTION LIST OUTER AREA
    ------------------------------------------------------*/

    .faq-question-list {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 14px 0;
        overflow: hidden;
    }


    /*------------------------------------------------------
      DYNAMIC QUESTION CONTAINER
    ------------------------------------------------------*/

    .faq-question-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }


    /*------------------------------------------------------
      DYNAMIC QUESTION ELEMENTS
      These broad rules protect generated content from
      creating horizontal overflow.
    ------------------------------------------------------ */

    .faq-question-container>* {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*------------------------------------------------------
      QUESTION HEADINGS / TITLES
    ------------------------------------------------------ */

    .faq-question-container h1,
    .faq-question-container h2,
    .faq-question-container h3,
    .faq-question-container h4 {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        line-height: 1.35;
        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*------------------------------------------------------
      QUESTION TEXT
    ------------------------------------------------------ */

    .faq-question-container p {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        font-size: 14px;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      QUESTION LINKS / BUTTONS
    ------------------------------------------------------ */

    .faq-question-container a,
    .faq-question-container button {
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      IMAGES INSIDE GENERATED CONTENT
    ------------------------------------------------------ */

    .faq-question-container img {
        display: block;
        max-width: 100%;
        height: auto;
    }


    /*------------------------------------------------------
      LISTS INSIDE GENERATED CONTENT
    ------------------------------------------------------ */

    .faq-question-container ul,
    .faq-question-container ol {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding-left: 20px;
    }

    .faq-question-container li {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        font-size: 14px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      TABLES / WIDE CONTENT
    ------------------------------------------------------ */

    .faq-question-container table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        box-sizing: border-box;
    }

}

/*=========================================================
    FAQ PAGE
    SURGERY #8
    FAQ ANSWER VIEW — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      ANSWER PANEL
    ------------------------------------------------------*/

    .faq-answer-panel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;

        padding: 16px;

        overflow: hidden;
        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*------------------------------------------------------
      GENERATED ANSWER CONTENT
    ------------------------------------------------------*/

    .faq-answer-panel>* {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*------------------------------------------------------
      ANSWER HEADINGS
    ------------------------------------------------------*/

    .faq-answer-panel h1,
    .faq-answer-panel h2,
    .faq-answer-panel h3,
    .faq-answer-panel h4,
    .faq-answer-panel h5 {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;

        line-height: 1.35;
        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      ANSWER BODY TEXT
    ------------------------------------------------------*/

    .faq-answer-panel p {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;

        font-size: 14px;
        line-height: 1.6;

        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      ANSWER LISTS
    ------------------------------------------------------*/

    .faq-answer-panel ul,
    .faq-answer-panel ol {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;

        padding-left: 20px;
    }

    .faq-answer-panel li {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;

        font-size: 14px;
        line-height: 1.5;

        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      ANSWER LINKS
    ------------------------------------------------------*/

    .faq-answer-panel a {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }


    /*------------------------------------------------------
      ANSWER IMAGES
    ------------------------------------------------------*/

    .faq-answer-panel img {
        display: block;

        width: auto;
        max-width: 100%;
        height: auto;

        margin-left: auto;
        margin-right: auto;
    }


    /*------------------------------------------------------
      ANSWER TABLES
    ------------------------------------------------------*/

    .faq-answer-panel table {
        display: block;

        width: 100%;
        max-width: 100%;

        overflow-x: auto;
        box-sizing: border-box;
    }


    /*------------------------------------------------------
      ANSWER BUTTONS / CONTROLS
    ------------------------------------------------------*/

    .faq-answer-panel button {
        max-width: 100%;
        box-sizing: border-box;

        overflow-wrap: anywhere;
    }

}

/*=========================================================
    FAQ PAGE
    SURGERY #8A
    FAQ MAIN HEADER — MOBILE ALIGNMENT
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      MAIN HEADER
    ------------------------------------------------------*/

    .faq-main-header {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        display: block;

        box-sizing: border-box;

        overflow: hidden;
    }


    /*------------------------------------------------------
      HEADER TEXT AREA
    ------------------------------------------------------*/

    .faq-main-header>div {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow: hidden;
    }


    /*------------------------------------------------------
      WORKSPACE TITLE
    ------------------------------------------------------*/

    #faqWorkspaceTitle {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin: 0;

        font-size: 22px;
        line-height: 1.3;

        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;

        text-align: left;
    }


    /*------------------------------------------------------
      WORKSPACE SUBTITLE
    ------------------------------------------------------*/

    #faqWorkspaceSubtitle {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin: 6px 0 12px;

        font-size: 13px;
        line-height: 1.5;

        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*------------------------------------------------------
      SEARCH AREA
    ------------------------------------------------------*/

    .faq-main-search {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin: 0;
    }


    /*------------------------------------------------------
      SEARCH WRAPPER
    ------------------------------------------------------*/

    .faq-search-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        position: relative;

        overflow: hidden;
    }


    /*------------------------------------------------------
      SEARCH INPUT
    ------------------------------------------------------*/

    .faq-search-wrapper input {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        padding-left: 38px;

        font-size: 14px;
    }


    /*------------------------------------------------------
      SEARCH ICON
    ------------------------------------------------------*/

    .faq-search-icon {
        left: 12px;
        max-width: 18px;
        height: auto;
    }

}

/*=========================================================
    FAQ PAGE
    SURGERY #8B
    FAQ WORKSPACE — MOBILE ALIGNMENT REVISION
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      MAIN FAQ PANEL
      Keep the complete FAQ workspace inside the viewport
    ------------------------------------------------------*/

    .faq-main {
        width: calc(100% - 24px);
        max-width: 100%;
        min-width: 0;

        margin-left: auto;
        margin-right: auto;

        box-sizing: border-box;

        overflow: hidden;
    }


    /*------------------------------------------------------
      MAIN HEADER
      Restore clean internal spacing
    ------------------------------------------------------*/

    .faq-main-header {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        padding: 18px 20px !important;

        margin: 0;
    }


    /*------------------------------------------------------
      HEADER CONTENT
    ------------------------------------------------------*/

    .faq-main-header>div {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin: 0;
    }


    /*------------------------------------------------------
      QUESTION LIST
      Keep the list safely inside the panel
    ------------------------------------------------------*/

    .faq-question-list {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        padding: 16px 12px !important;

        margin: 0;

        overflow-x: hidden;
    }


    /*------------------------------------------------------
      QUESTION CONTAINER
    ------------------------------------------------------*/

    .faq-question-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin: 0;
    }


    /*------------------------------------------------------
      QUESTION CARD
      Full width within the question list
    ------------------------------------------------------*/

    .faq-question-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        padding: 18px 16px !important;

        margin-left: 0;
        margin-right: 0;

        transform: none;
    }


    /*------------------------------------------------------
      ACTIVE QUESTION
      Prevent horizontal movement on mobile
    ------------------------------------------------------*/

    .faq-question-card.active {
        transform: none;
    }


    /*------------------------------------------------------
      QUESTION TITLE
    ------------------------------------------------------*/

    .faq-question-title {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        font-size: 16px;
        line-height: 1.45;

        margin: 0;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*------------------------------------------------------
      SEARCH AREA
      Keep search box fully inside the header
    ------------------------------------------------------*/

    .faq-search {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }


    .faq-search input {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }

}

/*=========================================================
    FAQ PAGE
    SURGERY #8C
    PREVENT CATEGORY-SELECTION HORIZONTAL SHIFT
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      FAQ MAIN PANEL
      Prevent scrollIntoView() from horizontally shifting
      the entire FAQ workspace.
    ------------------------------------------------------*/

    .faq-main {
        overflow-x: clip !important;
        overflow-y: visible;
    }


    /*------------------------------------------------------
      FAQ MAIN BODY
      Keep the dynamically loaded category content
      inside the mobile panel.
    ------------------------------------------------------*/

    .faq-main-body {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow-x: clip;
    }


    /*------------------------------------------------------
      QUESTION LIST
    ------------------------------------------------------*/

    .faq-question-list {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow-x: clip;
    }


    /*------------------------------------------------------
      QUESTION CONTAINER
    ------------------------------------------------------*/

    .faq-question-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow-x: clip;
    }


    /*------------------------------------------------------
      QUESTION CARDS
    ------------------------------------------------------*/

    .faq-question-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin-left: 0 !important;
        margin-right: 0 !important;

        transform: none !important;
    }


    /*------------------------------------------------------
      ACTIVE QUESTION
      Prevent the desktop active-card movement on mobile.
    ------------------------------------------------------*/

    .faq-question-card.active {
        transform: none !important;
    }

}

/*=========================================================
    FAQ PAGE
    SURGERY #8D
    ANSWER PANEL — MOBILE WIDTH CONTROL
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      ANSWER PANEL
    ------------------------------------------------------*/

    .faq-answer-panel {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin: 25px 0 0 !important;

        padding: 24px 16px !important;

        overflow-x: clip;
    }


    /*------------------------------------------------------
      ANSWER CONTENT
    ------------------------------------------------------*/

    .faq-answer-panel h3,
    .faq-answer-panel p,
    .faq-answer-panel ul,
    .faq-answer-panel li {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*------------------------------------------------------
      ANSWER HEADING
    ------------------------------------------------------*/

    .faq-answer-panel h3 {
        width: 100%;
        font-size: 26px;
        line-height: 1.4;
    }


    /*------------------------------------------------------
      ANSWER PARAGRAPHS
    ------------------------------------------------------*/

    .faq-answer-panel p {
        width: 100%;
        font-size: 15px;
        line-height: 1.7;
    }


    /*------------------------------------------------------
      ANSWER LIST
    ------------------------------------------------------*/

    .faq-answer-panel ul {
        width: 100%;
        padding-left: 20px;
        margin-left: 0;
        margin-right: 0;
    }

}

/*=========================================================
    FAQ PAGE
    SURGERY #8E
    CONTINUE EXPLORING — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      RELATED QUESTIONS CONTAINER
    ------------------------------------------------------*/

    .faq-related-questions {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin: 20px 0 0 !important;

        padding: 20px 16px !important;

        overflow-x: clip;
    }


    /*------------------------------------------------------
      CONTINUE EXPLORING TITLE
    ------------------------------------------------------*/

    .faq-related-title {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        font-size: 22px;
        line-height: 1.3;

        margin-bottom: 16px;

        overflow-wrap: break-word;
    }


    /*------------------------------------------------------
      RELATED QUESTIONS LIST
    ------------------------------------------------------*/

    .faq-related-list {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        display: flex;
        flex-direction: column;

        gap: 12px;

        overflow-x: clip;
    }


    /*------------------------------------------------------
      RELATED QUESTION ITEM
    ------------------------------------------------------*/

    .faq-related-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        padding: 14px 16px;

        margin: 0;

        border-left: 4px solid #C9A227;

        font-size: 15px;
        line-height: 1.5;

        overflow-wrap: anywhere;
        word-break: normal;

        transform: none !important;
    }


    /*------------------------------------------------------
      DISABLE DESKTOP HOVER MOVEMENT
    ------------------------------------------------------*/

    .faq-related-item:hover {
        transform: none !important;
    }

}

/*=========================================================
    FAQ PAGE
    SURGERY #8F
    FINAL CALL-TO-ACTION — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      FINAL CTA SECTION
    ------------------------------------------------------*/

    .faq-final-cta {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        padding: 16px 0 !important;

        overflow-x: clip;
    }


    /*------------------------------------------------------
      FINAL CTA BOX
    ------------------------------------------------------*/

    .faq-final-cta-box {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin: 0 !important;

        padding: 24px 18px !important;

        display: flex;

        flex-direction: column;

        align-items: stretch !important;

        justify-content: flex-start;

        gap: 24px;

        overflow: hidden;
    }


    /*------------------------------------------------------
      LEFT CONTENT
    ------------------------------------------------------*/

    .faq-final-left {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 16px;

        text-align: center;
    }


    /*------------------------------------------------------
      CTA ICON
    ------------------------------------------------------*/

    .faq-final-icon {
        width: 72px;
        height: 72px;

        flex: 0 0 72px;

        box-sizing: border-box;
    }


    .faq-final-icon img {
        width: 42px;
        max-width: 100%;
        height: auto;
    }


    /*------------------------------------------------------
      CTA TEXT
    ------------------------------------------------------*/

    .faq-final-text {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }


    .faq-final-text h2 {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        font-size: 22px;

        line-height: 1.3;

        margin: 0 0 10px !important;

        overflow-wrap: break-word;
        word-break: normal;
    }


    .faq-final-text p {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        font-size: 15px;

        line-height: 1.6;

        margin: 0;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*------------------------------------------------------
      CTA BUTTON GROUP
    ------------------------------------------------------*/

    .faq-final-buttons {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

        margin: 0;
    }


    /*------------------------------------------------------
      CTA BUTTONS
    ------------------------------------------------------*/

    .faq-submit-btn,
    .faq-contact-btn {

        width: 100% !important;
        max-width: 100%;
        min-width: 0;

        height: auto;
        min-height: 52px;

        box-sizing: border-box;

        padding: 14px 16px;

        font-size: 15px;

        line-height: 1.3;

        text-align: center;

        white-space: normal;

        overflow-wrap: break-word;

        justify-content: center;
    }


    /*------------------------------------------------------
      CTA ARROW
    ------------------------------------------------------*/

    .faq-submit-btn span,
    .faq-contact-btn span {
        font-size: 20px;

        flex-shrink: 0;
    }

}

/*==========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #1
    MOBILE PROCUREMENT LAYOUT
==========================================================*/

@media (max-width:900px) {

    .procurement-layout {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .procurement-left {
        width: 100%;
        min-width: 0;
    }

}

/*==========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #2
    WORKBENCH FORM — MOBILE SINGLE COLUMN
==========================================================*/

@media (max-width:768px) {

    .procurement-workbench {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .workbench-header {
        padding: 18px 16px;
    }

    .workbench-header h2 {
        font-size: 26px;
        line-height: 1.15;
    }

    .workbench-header p {
        font-size: 14px;
        line-height: 1.45;
    }

    .progress-area {
        padding: 16px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #3
    MOBILE NUMBER FIELD — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      MOBILE NUMBER ROW
    ------------------------------------------------------*/

    .mobile-box {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        gap: 10px;
        box-sizing: border-box;
    }


    /*------------------------------------------------------
      COUNTRY CODE
    ------------------------------------------------------*/

    .mobile-box .country-code {
        flex: 0 0 68px;
        width: 68px;
        min-width: 68px;
        max-width: 68px;

        box-sizing: border-box;
        text-align: center;
    }


    /*------------------------------------------------------
      MOBILE NUMBER
    ------------------------------------------------------*/

    .mobile-box #mobile {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: 100%;

        box-sizing: border-box;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #4
    PROCUREMENT WORKBENCH — MOBILE WIDTH
=========================================================*/

@media (max-width:768px) {

    .procurement-layout {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .procurement-main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .workbench {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .workbench-header,
    .progress-area,
    #enquiryForm,
    .workbench-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #5
    FORM GRID — MOBILE SINGLE COLUMN
=========================================================*/

@media (max-width:768px) {

    .procurement-workbench .form-grid {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        gap: 18px;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #5B
    FORM CONTROLS — MOBILE WIDTH CONTROL
=========================================================*/

@media (max-width:768px) {

    .procurement-workbench .form-group input,
    .procurement-workbench .form-group select,
    .procurement-workbench .form-group textarea {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }


    /*------------------------------------------------------
      MOBILE NUMBER FIELD
    ------------------------------------------------------*/

    .procurement-workbench .mobile-box {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        gap: 10px;
    }


    .procurement-workbench .mobile-box .country-code {
        width: 72px;
        min-width: 72px;
        max-width: 72px;

        box-sizing: border-box;
    }


    .procurement-workbench .mobile-box #mobile {
        flex: 1;
        width: auto;
        min-width: 0;
        max-width: none;

        box-sizing: border-box;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #5C
    FORM LABELS & FIELD SPACING — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      FORM GROUP
    ------------------------------------------------------*/

    .procurement-workbench .form-group {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin: 0;
    }


    /*------------------------------------------------------
      LABEL
    ------------------------------------------------------*/

    .procurement-workbench .form-group label {
        display: block;

        width: 100%;
        max-width: 100%;

        box-sizing: border-box;

        margin: 0 0 7px;

        font-size: 13px;
        line-height: 1.4;
    }


    /*------------------------------------------------------
      INPUT / SELECT / TEXTAREA HEIGHT
    ------------------------------------------------------*/

    .procurement-workbench .form-group input,
    .procurement-workbench .form-group select {
        min-height: 44px;

        padding: 10px 12px;

        font-size: 14px;
        line-height: 1.3;
    }


    .procurement-workbench .form-group textarea {
        min-height: 120px;

        padding: 10px 12px;

        font-size: 14px;
        line-height: 1.5;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #6
    STEP NAVIGATION BUTTONS — MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      STEP BUTTON AREA
    ------------------------------------------------------*/

    .procurement-workbench .step-buttons {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin-top: 20px;

        display: flex;
        flex-direction: column;

        gap: 12px;
    }


    /*------------------------------------------------------
      NEXT / PREVIOUS BUTTONS
    ------------------------------------------------------*/

    .procurement-workbench .step-buttons button {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        min-height: 48px;

        box-sizing: border-box;

        padding: 12px 16px;

        font-size: 14px;
        line-height: 1.3;

        white-space: normal;

        text-align: center;

        overflow-wrap: break-word;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #7
    STEP 2 — PROCUREMENT SUMMARY HEADER
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      STEP 2 SECTION HEADING
    ------------------------------------------------------*/

    .procurement-workbench #step2 .section-heading {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        font-size: 20px;
        line-height: 1.3;

        margin-bottom: 12px;

        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      STEP 2 EXPLANATORY NOTE
    ------------------------------------------------------*/

    .procurement-workbench #step2 .section-note {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        font-size: 13px;
        line-height: 1.55;

        margin-bottom: 18px;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*------------------------------------------------------
      STEP 2 SUBHEADINGS
    ------------------------------------------------------*/

    .procurement-workbench #step2 .form-subheading {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        font-size: 15px;
        line-height: 1.35;

        margin-top: 18px;
        margin-bottom: 12px;

        overflow-wrap: anywhere;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #8
    STEP 2 — FIELD CONTROLS
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      STEP 2 FORM GROUPS
    ------------------------------------------------------*/

    .procurement-workbench #step2 .form-group {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }


    /*------------------------------------------------------
      STEP 2 INPUTS / SELECTS / TEXTAREAS
    ------------------------------------------------------*/

    .procurement-workbench #step2 input,
    .procurement-workbench #step2 select,
    .procurement-workbench #step2 textarea {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        font-size: 14px;
    }


    /*------------------------------------------------------
      STEP 2 SELECTS
    ------------------------------------------------------*/

    .procurement-workbench #step2 select {
        min-height: 44px;

        padding: 10px 12px;

        line-height: 1.3;
    }


    /*------------------------------------------------------
      STEP 2 TEXT INPUTS
    ------------------------------------------------------*/

    .procurement-workbench #step2 input {
        min-height: 44px;

        padding: 10px 12px;
    }


    /*------------------------------------------------------
      STEP 2 LABELS
    ------------------------------------------------------*/

    .procurement-workbench #step2 .form-group label {
        display: block;

        width: 100%;
        max-width: 100%;

        box-sizing: border-box;

        margin-bottom: 7px;

        font-size: 13px;
        line-height: 1.4;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #9
    STEP 2 — SUBSECTION SPACING
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      PRODUCT INFORMATION
    ------------------------------------------------------*/

    .procurement-workbench #step2 .form-subheading {
        padding-top: 4px;
        margin-top: 20px;
        margin-bottom: 12px;
    }


    /*------------------------------------------------------
      SEPARATION BETWEEN FORM GROUPS
    ------------------------------------------------------*/

    .procurement-workbench #step2 .form-grid {
        row-gap: 18px;
    }


    /*------------------------------------------------------
      NOTE / SUPPORTING TEXT
    ------------------------------------------------------*/

    .procurement-workbench #step2 .section-note {
        padding: 0;
        margin-top: 0;
        margin-bottom: 18px;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #10
    STEP 2 — NAVIGATION SPACING
=========================================================*/

@media (max-width:768px) {

    .procurement-workbench #step2 .step-buttons {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin-top: 24px;
        padding-top: 4px;

        display: flex;
        flex-direction: column;

        gap: 12px;
    }


    .procurement-workbench #step2 .step-buttons button {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        min-height: 48px;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #11
    STEP 3 — PROCUREMENT REQUIREMENT TEXT AREA
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      STEP 3 SECTION HEADING
    ------------------------------------------------------*/

    .procurement-workbench #step3 .section-heading {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        font-size: 20px;
        line-height: 1.3;

        margin-bottom: 12px;

        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      STEP 3 EXPLANATORY NOTE
    ------------------------------------------------------*/

    .procurement-workbench #step3 .section-note {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        font-size: 13px;
        line-height: 1.55;

        margin-bottom: 18px;

        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      REQUIREMENT TEXTAREA
    ------------------------------------------------------*/

    .procurement-workbench #step3 textarea {
        display: block;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        min-height: 220px;

        padding: 14px;

        font-size: 14px;
        line-height: 1.55;

        resize: vertical;

        overflow-x: hidden;
        overflow-y: auto;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #12
    STEP 3 — NAVIGATION
=========================================================*/

@media (max-width:768px) {

    .procurement-workbench #step3 .step-buttons {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin-top: 24px;
        padding-top: 4px;

        display: flex;
        flex-direction: column;

        gap: 12px;
    }


    .procurement-workbench #step3 .step-buttons button {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        min-height: 48px;

        padding: 12px 16px;

        font-size: 14px;
        line-height: 1.3;

        white-space: normal;

        text-align: center;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #13
    STEP 4 — SUPPORTING DOCUMENTS
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      STEP 4 HEADING
    ------------------------------------------------------*/

    .procurement-workbench #step4 .section-heading {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        font-size: 20px;
        line-height: 1.3;

        margin-bottom: 12px;

        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      STEP 4 NOTE
    ------------------------------------------------------*/

    .procurement-workbench #step4 .section-note {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        font-size: 13px;
        line-height: 1.55;

        margin-bottom: 18px;

        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      DOCUMENT CATEGORY AREA
    ------------------------------------------------------*/

    .procurement-workbench #step4 .form-group {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }


    .procurement-workbench #step4 .form-group select {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        min-height: 44px;

        padding: 10px 12px;

        font-size: 14px;
    }


    /*------------------------------------------------------
      UPLOAD AREA
    ------------------------------------------------------*/

    .procurement-workbench #step4 .upload-area {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow: hidden;
    }


    /*------------------------------------------------------
      UPLOAD CONTENT
    ------------------------------------------------------*/

    .procurement-workbench #step4 .upload-area>* {
        max-width: 100%;
        box-sizing: border-box;
    }


    /*------------------------------------------------------
      FILE INPUT / BROWSE CONTROL
    ------------------------------------------------------*/

    .procurement-workbench #step4 input[type="file"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        font-size: 13px;
    }


    /*------------------------------------------------------
      STEP 4 TEXTAREA
    ------------------------------------------------------*/

    .procurement-workbench #step4 textarea {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        min-height: 120px;

        padding: 12px;

        font-size: 14px;
        line-height: 1.5;

        resize: vertical;

        overflow-x: hidden;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #14
    STEP 4 — UPLOAD AREA & FILE LIST
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      UPLOAD BOX
    ------------------------------------------------------*/

    .procurement-workbench #step4 .upload-box {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        padding: 20px 14px;

        overflow: hidden;

        text-align: center;
    }


    /*------------------------------------------------------
      UPLOAD ICON / VISUAL
    ------------------------------------------------------*/

    .procurement-workbench #step4 .upload-box img,
    .procurement-workbench #step4 .upload-box svg {
        max-width: 100%;
        height: auto;
    }


    /*------------------------------------------------------
      UPLOAD TEXT
    ------------------------------------------------------*/

    .procurement-workbench #step4 .upload-box p,
    .procurement-workbench #step4 .upload-box span {
        max-width: 100%;

        box-sizing: border-box;

        font-size: 13px;
        line-height: 1.5;

        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      FILE LIST
    ------------------------------------------------------*/

    .procurement-workbench #step4 .file-list {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin-top: 14px;

        overflow-x: clip;
    }


    /*------------------------------------------------------
      INDIVIDUAL FILE ROW
    ------------------------------------------------------*/

    .procurement-workbench #step4 .file-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        display: flex;

        align-items: center;

        gap: 10px;

        padding: 10px 12px;

        overflow: hidden;
    }


    /*------------------------------------------------------
      FILE NAME
    ------------------------------------------------------*/

    .procurement-workbench #step4 .file-item .file-name {
        flex: 1 1 auto;

        min-width: 0;
        max-width: 100%;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;
    }


    /*------------------------------------------------------
      FILE ACTION
    ------------------------------------------------------*/

    .procurement-workbench #step4 .file-item button {
        flex: 0 0 auto;

        max-width: 100%;

        box-sizing: border-box;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #15
    STEP 4 — COMMENTS & NAVIGATION
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      ADDITIONAL COMMENTS
    ------------------------------------------------------*/

    .procurement-workbench #step4 textarea[name="additionalComments"] {
        display: block;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        min-height: 120px;

        padding: 12px;

        font-size: 14px;
        line-height: 1.5;

        resize: vertical;

        overflow-x: hidden;
    }


    /*------------------------------------------------------
      STEP 4 NAVIGATION
    ------------------------------------------------------*/

    .procurement-workbench #step4 .step-buttons {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin-top: 24px;
        padding-top: 4px;

        display: flex;
        flex-direction: column;

        gap: 12px;
    }


    /*------------------------------------------------------
      STEP 4 BUTTONS
    ------------------------------------------------------*/

    .procurement-workbench #step4 .step-buttons button {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        min-height: 48px;

        padding: 12px 16px;

        font-size: 14px;
        line-height: 1.3;

        white-space: normal;

        text-align: center;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #16
    STEP 5 — REVIEW SUMMARY MOBILE
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      REVIEW SUMMARY
    ------------------------------------------------------*/

    .procurement-workbench #step5 .review-summary {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        padding: 16px;

        overflow: hidden;
    }


    /*------------------------------------------------------
      REVIEW TITLE
    ------------------------------------------------------*/

    .procurement-workbench #step5 .review-title {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        font-size: 16px;
        line-height: 1.35;

        margin-bottom: 14px;

        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      REVIEW GRID
    ------------------------------------------------------*/

    .procurement-workbench #step5 .review-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        display: grid;

        grid-template-columns: 1fr;

        gap: 8px;
    }


    /*------------------------------------------------------
      REVIEW LABEL
    ------------------------------------------------------*/

    .procurement-workbench #step5 .review-label {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        font-size: 12px;
        line-height: 1.35;

        overflow-wrap: anywhere;
    }


    /*------------------------------------------------------
      REVIEW VALUE
    ------------------------------------------------------*/

    .procurement-workbench #step5 .review-value {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        font-size: 14px;
        line-height: 1.45;

        overflow-wrap: anywhere;
        word-break: normal;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #17
    STEP 5 — DECLARATION & CONSENT CHECKBOXES
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      CHECKBOX GROUP
    ------------------------------------------------------*/

    .procurement-workbench #step5 .checkbox-group {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin: 14px 0;
        padding: 12px 14px;

        overflow: hidden;
    }


    /*------------------------------------------------------
      CHECKBOX LABEL
    ------------------------------------------------------*/

    .procurement-workbench #step5 .checkbox-group label {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        display: flex;
        align-items: flex-start;

        gap: 10px;

        font-size: 14px;
        line-height: 1.5;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*------------------------------------------------------
      CHECKBOX
    ------------------------------------------------------*/

    .procurement-workbench #step5 .checkbox-group input[type="checkbox"] {
        flex: 0 0 auto;

        width: 18px;
        height: 18px;

        margin: 2px 0 0 0;
    }


    /*------------------------------------------------------
      POLICY LINK
    ------------------------------------------------------*/

    .procurement-workbench #step5 .checkbox-group .policy-link {
        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*------------------------------------------------------
      STEP 5 NAVIGATION
    ------------------------------------------------------*/

    .procurement-workbench #step5 .step-buttons {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin-top: 20px;

        display: flex;
        flex-direction: column;

        gap: 12px;
    }


    /*------------------------------------------------------
      NAVIGATION BUTTONS
    ------------------------------------------------------*/

    .procurement-workbench #step5 .step-buttons button {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        min-height: 48px;

        padding: 12px 16px;

        font-size: 14px;
        line-height: 1.3;

        white-space: normal;

        text-align: center;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #18
    STEP 6 — FINAL REVIEW CHECKLIST
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      REVIEW BOX
    ------------------------------------------------------*/

    .procurement-workbench #step6 .review-box {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow: hidden;
    }


    /*------------------------------------------------------
      REVIEW HEADING
    ------------------------------------------------------*/

    .procurement-workbench #step6 .review-box h3 {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin: 0 0 14px 0;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*------------------------------------------------------
      CHECKLIST ROW
    ------------------------------------------------------*/

    .procurement-workbench #step6 .review-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        display: grid;

        grid-template-columns: 24px minmax(0, 1fr);

        column-gap: 10px;

        align-items: start;

        padding: 12px 0;

        overflow: hidden;
    }


    /*------------------------------------------------------
      CHECK ICON
    ------------------------------------------------------*/

    .procurement-workbench #step6 .review-item .check-icon {
        width: 24px;
        min-width: 24px;

        box-sizing: border-box;

        line-height: 1.4;
    }


    /*------------------------------------------------------
      CHECK LABEL
    ------------------------------------------------------*/

    .procurement-workbench #step6 .review-item .check-label {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow-wrap: anywhere;
        word-break: normal;

        line-height: 1.45;
    }


    /*------------------------------------------------------
      CHECK STATUS
      Move status BELOW label on mobile so it can NEVER
      disappear beyond the right edge.
    ------------------------------------------------------*/

    .procurement-workbench #step6 .review-item .check-status {
        grid-column: 2;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin-top: 4px;

        text-align: left;

        overflow-wrap: anywhere;
        word-break: normal;

        line-height: 1.4;
    }


    /*------------------------------------------------------
      SUPPORTING DOCUMENTS ROW
    ------------------------------------------------------*/

    .procurement-workbench #step6 .review-item#documentSummary {
        display: block;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        white-space: normal;

        overflow-wrap: anywhere;
        word-break: normal;

        line-height: 1.45;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #19
    STEP 6 — CAPTCHA MOBILE CONTAINMENT
=========================================================*/

@media (max-width:768px) {

    .procurement-workbench #step6 .captcha-box {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        display: flex;
        justify-content: center;
        align-items: center;

        overflow: hidden;

        padding: 10px 0;
    }

    .procurement-workbench #step6 .g-recaptcha {
        max-width: 100%;

        transform-origin: center center;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #20
    STEP 6 — NAVIGATION BUTTONS
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      STEP BUTTON CONTAINER
    ------------------------------------------------------*/

    .procurement-workbench .step-buttons {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        gap: 12px;

        padding: 14px 0 18px !important;

        overflow: hidden;
    }


    /*------------------------------------------------------
      PREVIOUS + SUBMIT BUTTONS
    ------------------------------------------------------*/

    .procurement-workbench .step-buttons .prev-btn,
    .procurement-workbench .step-buttons .submit-btn {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin: 0 !important;

        white-space: normal;

        overflow-wrap: anywhere;

        text-align: center;
    }


    /*------------------------------------------------------
      PREVIOUS BUTTON
    ------------------------------------------------------*/

    .procurement-workbench .step-buttons .prev-btn {
        min-height: 50px;
    }


    /*------------------------------------------------------
      SUBMIT ENQUIRY BUTTON
    ------------------------------------------------------*/

    .procurement-workbench .step-buttons .submit-btn {
        min-height: 52px;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #21
    WHY SUBMIT YOUR ENQUIRY — MOBILE CONTAINMENT
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      RIGHT INFORMATION COLUMN
    ------------------------------------------------------*/

    .procurement-right {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin: 0;
        padding: 0;

        overflow: hidden;
    }


    /*------------------------------------------------------
      WHY SUBMIT YOUR ENQUIRY CARD
    ------------------------------------------------------*/

    .procurement-right .enquiry-info-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin-left: 0;
        margin-right: 0;

        overflow: hidden;
    }


    /*------------------------------------------------------
      CARD CONTENT
    ------------------------------------------------------*/

    .procurement-right .enquiry-info-card h3,
    .procurement-right .enquiry-info-card .info-item {
        max-width: 100%;

        box-sizing: border-box;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*------------------------------------------------------
      INFO ITEM TEXT
    ------------------------------------------------------*/

    .procurement-right .enquiry-info-card .info-item {
        width: 100%;
        min-width: 0;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #22
    WHY SUBMIT — INFORMATION ITEMS
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      INFORMATION ITEM
    ------------------------------------------------------*/

    .procurement-right .enquiry-info-card.primary .info-item {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        display: flex;
        align-items: flex-start;

        gap: 12px;

        margin: 0;
        padding: 12px 0 !important;

        overflow: hidden;
    }


    /*------------------------------------------------------
      INFORMATION ICON
    ------------------------------------------------------*/

    .procurement-right .enquiry-info-card.primary .info-item .info-icon {

        flex: 0 0 34px;

        width: 34px;
        min-width: 34px;
        max-width: 34px;

        box-sizing: border-box;

        display: flex;
        align-items: center;
        justify-content: center;
    }


    /*------------------------------------------------------
      INFORMATION TEXT COLUMN
    ------------------------------------------------------*/

    .procurement-right .enquiry-info-card.primary .info-item>div:last-child {

        flex: 1 1 auto;

        width: auto;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow: hidden;
    }


    /*------------------------------------------------------
      INFORMATION TITLE
    ------------------------------------------------------*/

    .procurement-right .enquiry-info-card.primary .info-item h4 {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin: 0 0 4px 0 !important;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*------------------------------------------------------
      INFORMATION DESCRIPTION
    ------------------------------------------------------*/

    .procurement-right .enquiry-info-card.primary .info-item p {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin: 0 !important;

        overflow-wrap: anywhere;
        word-break: normal;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #23
    CONFIDENTIALITY CARD
=========================================================*/

@media (max-width:768px) {

    .procurement-right .enquiry-info-card:not(.primary) {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow: hidden;
    }


    .procurement-right .enquiry-info-card:not(.primary) h3 {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        display: flex;
        align-items: center;
        flex-wrap: wrap;

        gap: 8px;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    .procurement-right .enquiry-info-card:not(.primary) p {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow-wrap: anywhere;
        word-break: normal;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #24
    IMPORTANT NOTE CARD
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      IMPORTANT NOTE CARD
    ------------------------------------------------------*/

    .procurement-right .enquiry-info-card {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow: hidden;
    }


    /*------------------------------------------------------
      IMPORTANT NOTE HEADING
    ------------------------------------------------------*/

    .procurement-right .enquiry-info-card h3 {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*------------------------------------------------------
      IMPORTANT NOTE PARAGRAPHS
    ------------------------------------------------------*/

    .procurement-right .enquiry-info-card p {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin-left: 0 !important;
        margin-right: 0 !important;

        overflow-wrap: anywhere;
        word-break: normal;
    }

}

/*=========================================================
    SUBMIT ENQUIRY PAGE
    SURGERY #25
    WHAT HAPPENS NEXT — MOBILE PROCESS
=========================================================*/

@media (max-width:768px) {

    /*------------------------------------------------------
      MAIN SECTION
    ------------------------------------------------------*/

    .what-happens-next {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow: hidden;
    }


    /*------------------------------------------------------
      SECTION CONTAINER
    ------------------------------------------------------*/

    .what-happens-next>.container {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        padding-left: 16px !important;
        padding-right: 16px !important;

        overflow: hidden;
    }


    /*------------------------------------------------------
      SECTION HEADING
    ------------------------------------------------------*/

    .next-section-heading {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        text-align: center;

        overflow: hidden;
    }


    .next-section-heading h2 {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*------------------------------------------------------
      PROCESS CONTAINER
    ------------------------------------------------------*/

    .next-steps-process {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 0;

        overflow: hidden;
    }


    /*------------------------------------------------------
      STEP WRAPPER
    ------------------------------------------------------*/

    .next-step-wrapper {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        display: block;

        overflow: hidden;
    }


    /*------------------------------------------------------
      STEP CARD
    ------------------------------------------------------*/

    .next-step-card {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin-left: 0 !important;
        margin-right: 0 !important;

        min-height: 110px;

        overflow: hidden;

        transform: none !important;
    }


    /*------------------------------------------------------
      STEP IMAGE
    ------------------------------------------------------*/

    .next-step-image {

        max-width: 100%;

        box-sizing: border-box;

        overflow: hidden;
    }


    .next-step-image img {

        display: block;

        max-width: 100%;
        height: auto;

        box-sizing: border-box;
    }


    /*------------------------------------------------------
      STEP NUMBER
    ------------------------------------------------------*/

    .next-step-number {

        box-sizing: border-box;

        flex-shrink: 0;
    }


    /*------------------------------------------------------
      STEP TITLE
    ------------------------------------------------------*/

    .next-step-card h3 {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow-wrap: anywhere;
        word-break: normal;

        text-align: center;
    }


    /*------------------------------------------------------
      STEP DESCRIPTION
    ------------------------------------------------------*/

    .next-step-card p {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow-wrap: anywhere;
        word-break: normal;

        text-align: center;
    }


    /*------------------------------------------------------
      PROCESS ARROWS
    ------------------------------------------------------*/

    .next-step-arrow {

        box-sizing: border-box;

        max-width: 100%;

        overflow: hidden;

        transform: none !important;
    }

}

/*=========================================================
    CONTACT US PAGE
    SURGERY #1
    CONTACT HERO — MOBILE
=========================================================*/

@media (max-width:768px){

    .contact-hero-content{
        width:100%;
        max-width:100%;
        min-width:0;

        height:auto;

        display:flex;
        flex-direction:column;

        box-sizing:border-box;
        overflow:hidden;
    }

    .contact-hero-left{
        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        padding:35px 20px;

        overflow:hidden;
    }

    .contact-hero-right{
        width:100%;
        max-width:100%;
        min-width:0;

        height:auto;

        box-sizing:border-box;

        overflow:hidden;
    }

    .contact-hero-right img{
        width:100%;
        max-width:100%;
        height:auto;

        display:block;

        object-fit:cover;
    }

}

/*=========================================================
    CONTACT US PAGE
    SURGERY #2
    OUR OFFICES & PRESENCE — MOBILE
=========================================================*/

@media (max-width:768px){

    /*-----------------------------------------------------
        OFFICE PRESENCE SECTION
    -----------------------------------------------------*/

    .contact-office-presence{
        width:100%;
        max-width:100%;

        padding:40px 16px;

        box-sizing:border-box;
        overflow:hidden;
    }


    /*-----------------------------------------------------
        SECTION TITLE
    -----------------------------------------------------*/

    .contact-section-title{
        width:100%;
        max-width:100%;

        font-size:28px;
        line-height:1.2;

        text-align:center;

        margin:0;
    }


    /*-----------------------------------------------------
        GOLD DIVIDER
    -----------------------------------------------------*/

    .contact-section-divider{
        width:70px;
        height:4px;

        margin:14px auto 30px;
    }


    /*-----------------------------------------------------
        OFFICE GRID
        FOUR COLUMNS → ONE COLUMN
    -----------------------------------------------------*/

    .contact-office-grid{
        width:100%;
        max-width:100%;
        min-width:0;

        display:grid;
        grid-template-columns:1fr;

        gap:22px;

        margin:0 0 25px;

        box-sizing:border-box;
    }


    /*-----------------------------------------------------
        OFFICE CARD
    -----------------------------------------------------*/

    .contact-office-card{
        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        border-radius:12px;

        overflow:hidden;
    }


    /*-----------------------------------------------------
        OFFICE IMAGE
    -----------------------------------------------------*/

    .contact-office-card > img{
        width:100%;
        max-width:100%;

        height:190px;

        display:block;

        object-fit:cover;
    }


    /*-----------------------------------------------------
        OFFICE CONTENT
    -----------------------------------------------------*/

    .contact-office-content{
        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        padding:52px 20px 22px;
    }


    /*-----------------------------------------------------
        OFFICE ICON
    -----------------------------------------------------*/

    .contact-office-icon{
        width:60px;
        height:60px;

        top:-31px;
        left:20px;
    }


    .contact-office-icon img{
        width:38px;
        height:38px;

        object-fit:contain;
    }


    /*-----------------------------------------------------
        OFFICE NAME
    -----------------------------------------------------*/

    .contact-office-content h3{
        font-size:20px;
        line-height:1.25;

        margin:10px 0 14px;
    }


    /*-----------------------------------------------------
        OFFICE ADDRESS / COMPANY
    -----------------------------------------------------*/

    .contact-office-content p{
        font-size:15px;
        line-height:1.7;

        margin-bottom:8px;

        overflow-wrap:anywhere;
        word-break:normal;
    }


    /*-----------------------------------------------------
        CENTRALIZED PROCESS CENTRE
    -----------------------------------------------------*/

    .contact-process-centre-box{
        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        display:flex;
        flex-direction:column;

        align-items:center;
        text-align:center;

        gap:15px;

        padding:22px 18px;
    }


    .contact-centre-icon{
        width:68px;
        height:68px;

        flex-shrink:0;
    }


    .contact-centre-icon img{
        width:34px;
        height:34px;
    }


    .contact-process-centre-box p{
        width:100%;
        max-width:100%;

        font-size:15px;
        line-height:1.7;

        margin:0;

        overflow-wrap:anywhere;
    }

}

/*=========================================================
    CONTACT US PAGE
    SURGERY #4
    CONTACT DETAILS — MOBILE RESPONSIVE
=========================================================*/

@media (max-width:768px){

    /*------------------------------------------------------
      CONTACT DETAILS SECTION
    ------------------------------------------------------*/

    .contact-details-section{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        overflow-x:hidden;
    }


    /*------------------------------------------------------
      CONTACT DETAILS GRID
      Desktop multi-column layout
      → Mobile single-column layout
    ------------------------------------------------------*/

    .contact-details-grid{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        display:grid;

        grid-template-columns:1fr !important;

        gap:20px;

        overflow:hidden;
    }


    /*------------------------------------------------------
      ALL CONTACT BOXES
    ------------------------------------------------------*/

    .contact-details-grid .contact-box{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        overflow:hidden;
    }


    /*------------------------------------------------------
      CONTACT EMAILS BOX
    ------------------------------------------------------*/

    .contact-box-green{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        overflow:hidden;
    }


    /*------------------------------------------------------
      CONTACT EMAIL ITEMS
    ------------------------------------------------------*/

    .contact-item{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        overflow:visible;
    }


    /*------------------------------------------------------
      CONTACT ITEM TITLE
    ------------------------------------------------------*/

    .contact-item-title{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        display:flex;

        align-items:center;

        overflow:visible;
    }


    .contact-item-title img{

        flex-shrink:0;

        max-width:100%;
    }


    .contact-item-title strong{

        min-width:0;

        max-width:100%;

        overflow-wrap:anywhere;

        word-break:normal;
    }


    /*------------------------------------------------------
      EMAIL ADDRESSES
      Complete address must remain inside the box
    ------------------------------------------------------*/

    .contact-item > a{

        display:block !important;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        box-sizing:border-box !important;

        margin-left:0 !important;
        margin-right:0 !important;

        padding-left:0 !important;
        padding-right:0 !important;

        white-space:normal !important;

        overflow-wrap:anywhere !important;
        word-break:break-word !important;

        overflow:visible !important;

        height:auto !important;

        line-height:1.6;
    }


    /*------------------------------------------------------
      EMAIL TEXT SAFETY
      Prevent long email strings from creating
      horizontal overflow
    ------------------------------------------------------*/

    .contact-item > a,
    .contact-item > a *{

        max-width:100% !important;

        min-width:0 !important;

        box-sizing:border-box !important;

        white-space:normal !important;

        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }


    /*------------------------------------------------------
      MOBILE SAFETY
    ------------------------------------------------------*/

    .contact-details-section *,
    .contact-details-grid *{

        max-width:100%;
    }

}

/*=========================================================
    CONTACT US PAGE
    SURGERY #5
    BUSINESS SUPPORT INFORMATION — MOBILE
=========================================================*/

@media (max-width:768px){

    /*------------------------------------------------------
      BUSINESS SUPPORT SECTION
    ------------------------------------------------------*/

    .contact-info-cards{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        overflow-x:hidden;
    }


    /*------------------------------------------------------
      BUSINESS SUPPORT GRID
      Desktop:
      Multiple cards in columns

      Mobile:
      ONE CARD PER ROW
    ------------------------------------------------------*/

    .contact-info-grid{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        display:grid;

        grid-template-columns:1fr !important;

        gap:20px;

        overflow:hidden;
    }


    /*------------------------------------------------------
      BUSINESS SUPPORT CARD
    ------------------------------------------------------*/

    .contact-info-card{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        overflow:hidden;
    }


    /*------------------------------------------------------
      CARD HEADING
    ------------------------------------------------------*/

    .contact-info-card .card-heading{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        display:flex;

        align-items:center;

        overflow:hidden;
    }


    .contact-info-card .card-heading img{

        flex-shrink:0;

        max-width:100%;
    }


    .contact-info-card .card-heading h3{

        min-width:0;

        max-width:100%;

        box-sizing:border-box;

        overflow-wrap:anywhere;

        word-break:normal;
    }


    /*------------------------------------------------------
      CARD CONTENT
    ------------------------------------------------------*/

    .contact-info-card p{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        overflow-wrap:anywhere;

        word-break:normal;
    }


    /*------------------------------------------------------
      FLAG LISTS
    ------------------------------------------------------*/

    .contact-info-card .flag-list{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        overflow:hidden;
    }


    .contact-info-card .flag-list li{

        max-width:100%;

        min-width:0;

        box-sizing:border-box;

        overflow-wrap:anywhere;

        word-break:normal;
    }


    .contact-info-card .flag-list li img{

        flex-shrink:0;

        max-width:100%;
    }


    /*------------------------------------------------------
      CARD BOTTOM IMAGES
    ------------------------------------------------------*/

    .contact-info-card .card-bottom-image{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        overflow:hidden;
    }


    .contact-info-card .card-bottom-image img{

        display:block;

        width:100%;
        max-width:100%;

        height:auto;

        box-sizing:border-box;
    }


    /*------------------------------------------------------
      MOBILE SAFETY
    ------------------------------------------------------*/

    .contact-info-cards *,
    .contact-info-grid *{

        max-width:100%;
    }

}

/*=========================================================
    CONTACT US PAGE
    SURGERY #6
    SUPPLY SOURCES — MOBILE COUNTRY LIST
=========================================================*/

@media (max-width:768px){

    /*------------------------------------------------------
      KEEP TWO COUNTRY COLUMNS
    ------------------------------------------------------*/

    .country-columns{

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:8px;

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;
    }


    /*------------------------------------------------------
      COUNTRY LIST
    ------------------------------------------------------*/

    .country-columns .flag-list{

        width:100%;
        max-width:100%;
        min-width:0;

        margin:0;

        box-sizing:border-box;
    }


    /*------------------------------------------------------
      COUNTRY ROW
      Prevent country names from breaking unnecessarily
    ------------------------------------------------------*/

    .country-columns .flag-list li{

        display:flex;

        align-items:center;

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        white-space:nowrap;

        font-size:15px;

        line-height:1.25;

        margin-bottom:8px;
    }


    /*------------------------------------------------------
      FLAG IMAGE
    ------------------------------------------------------*/

    .country-columns .flag-list li img{

        width:42px;
        height:42px;

        flex:0 0 42px;

        margin-right:8px;

        object-fit:contain;
    }

}


/*=========================================================
    CONTACT US PAGE
    SURGERY #5
    COMMITMENT BANNER — MOBILE RESPONSIVE
=========================================================*/

@media (max-width:768px){

    /*------------------------------------------------------
      CONTACT COMMITMENT SECTION
      Desktop: 3 columns
      Mobile: 1 column
    ------------------------------------------------------*/

    .contact-commitment{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        overflow-x:hidden;
    }


    /*------------------------------------------------------
      COMMITMENT GRID
      Desktop 3-column layout
      → Mobile single-column layout
    ------------------------------------------------------*/

    .contact-commitment .commitment-grid{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        display:grid;

        grid-template-columns:1fr !important;

        gap:0;

        overflow:hidden;
    }


    /*------------------------------------------------------
      LEFT — HANDSHAKE IMAGE
    ------------------------------------------------------*/

    .contact-commitment .commitment-image{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        overflow:hidden;
    }


    .contact-commitment .commitment-image img{

        display:block;

        width:100%;
        max-width:100%;

        height:auto;

        object-fit:cover;

        box-sizing:border-box;
    }


    /*------------------------------------------------------
      CENTRE — COMMITMENT CONTENT
    ------------------------------------------------------*/

    .contact-commitment .commitment-content{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        overflow:hidden;

        padding:25px 20px;
    }


    .contact-commitment .commitment-content h2{

        width:100%;
        max-width:100%;

        box-sizing:border-box;

        font-size:26px;

        line-height:1.25;

        overflow-wrap:anywhere;

        word-break:normal;

        margin-top:0;
    }


    .contact-commitment .commitment-content p{

        width:100%;
        max-width:100%;

        box-sizing:border-box;

        font-size:15px;

        line-height:1.6;

        overflow-wrap:anywhere;

        word-break:normal;
    }


    /*------------------------------------------------------
      RIGHT — WE COMMIT
    ------------------------------------------------------*/

    .contact-commitment .commitment-quote{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;

        overflow:hidden;

        padding:25px 20px;

        text-align:center;
    }


    .contact-commitment .commitment-quote h3{

        width:100%;
        max-width:100%;

        box-sizing:border-box;

        font-size:24px;

        line-height:1.3;

        margin-top:0;
    }


    .contact-commitment .commitment-quote .quote-text{

        width:100%;
        max-width:100%;

        box-sizing:border-box;

        font-size:30px;

        line-height:1.35;

        overflow-wrap:anywhere;

        word-break:normal;
    }


    /*------------------------------------------------------
      MOBILE SAFETY
    ------------------------------------------------------*/

    .contact-commitment *{

        max-width:100%;
    }

}

/* ==========================================================
   DOWNLOADS PAGE — MOBILE OPTIMIZATION
   SURGERY #1 — DOWNLOADS HERO
   Desktop layout remains untouched.
   Mobile: Content -> Features -> Image
   ========================================================== */

@media (max-width: 767px) {

    /* ------------------------------------------------------
       1. DOWNLOADS HERO MAIN WRAPPER
       Desktop: Left Content | Right Image
       Mobile:  Content
                 ↓
                Features
                 ↓
                Image
       ------------------------------------------------------ */

    .downloads-hero {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .downloads-hero .container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .downloads-hero-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       2. LEFT CONTENT
       ------------------------------------------------------ */

    .downloads-hero-left {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .downloads-hero-left h1 {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .downloads-hero-left h3 {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .downloads-hero-left p {
        width: 100%;
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
    }


    /* ------------------------------------------------------
       3. DOWNLOAD HERO FEATURES
       Four desktop features -> two columns on mobile
       ------------------------------------------------------ */

    .downloads-features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        max-width: 100%;
        gap: 14px;
        box-sizing: border-box;
    }

    .downloads-feature {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .downloads-feature img {
        max-width: 100%;
        height: auto;
    }

    .downloads-feature span {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
    }


    /* ------------------------------------------------------
       4. RIGHT HERO IMAGE
       Full-width image below the content
       ------------------------------------------------------ */

    .downloads-hero-right {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin-top: 20px;
    }

    .downloads-hero-right img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

}


/* ==========================================================
   DOWNLOADS HERO — SMALL MOBILE
   480px and below
   ========================================================== */

@media (max-width: 480px) {

    .downloads-hero-left h1 {
        font-size: 30px;
        line-height: 1.15;
    }

    .downloads-hero-left h3 {
        font-size: 18px;
        line-height: 1.4;
    }

    .downloads-hero-left p {
        font-size: 15px;
        line-height: 1.65;
    }

    .downloads-features {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .downloads-feature {
        padding: 10px;
    }

    .downloads-feature span {
        font-size: 13px;
        line-height: 1.35;
    }

    .downloads-hero-right {
        margin-top: 18px;
    }

}

/* ==========================================================
   DOWNLOADS HERO — MOBILE HEIGHT CORRECTION
   SURGERY #1A
   Allow complete hero content to expand naturally.
   ========================================================== */

@media (max-width: 767px) {

    .downloads-hero,
    .downloads-hero-content,
    .downloads-hero-left,
    .downloads-hero-right {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .downloads-hero {
        overflow: visible !important;
    }

    .downloads-hero-content {
        overflow: visible !important;
    }

    .downloads-hero-left {
        overflow: visible !important;
    }

    .downloads-hero-right {
        overflow: visible !important;
    }

}

/* ==========================================================
   DOWNLOADS DOCUMENT FILTER — MOBILE RESPONSIVE
   SURGERY #2
   ========================================================== */

@media (max-width: 767px) {

    /*------------------------------------------------------
      FILTER SECTION
    ------------------------------------------------------*/

    .downloads-filter {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: visible;
    }


    /*------------------------------------------------------
      FILTER CONTAINER
    ------------------------------------------------------*/

    .downloads-filter .container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding-left: 16px;
        padding-right: 16px;
    }


    /*------------------------------------------------------
      FILTER BOX
      Desktop horizontal layout
      → Mobile vertical layout
    ------------------------------------------------------*/

    .downloads-filter-box {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        display: flex !important;
        flex-direction: column !important;

        align-items: stretch !important;
        justify-content: flex-start !important;

        gap: 24px;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }


    /*------------------------------------------------------
      FILTER TITLE
    ------------------------------------------------------*/

    .downloads-filter-title {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        text-align: center;

        flex: none !important;
    }


    .downloads-filter-title h2 {

        width: 100%;
        max-width: 100%;

        margin: 0 0 8px 0;

        box-sizing: border-box;

        overflow-wrap: break-word;
        word-break: normal;
    }


    .downloads-filter-title p {

        width: 100%;
        max-width: 100%;

        margin: 0;

        box-sizing: border-box;

        overflow-wrap: break-word;
        word-break: normal;
    }


    /*------------------------------------------------------
      FILTER BUTTONS
      Mobile: two-column grid
    ------------------------------------------------------*/

    .downloads-filter-buttons {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 10px;

        align-items: stretch;

        justify-items: stretch;

        flex: none !important;

        overflow: visible !important;
    }


    /*------------------------------------------------------
      INDIVIDUAL BUTTONS
    ------------------------------------------------------*/

    .downloads-filter-buttons button {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        min-height: 52px;

        box-sizing: border-box;

        display: flex;

        align-items: center;
        justify-content: center;

        gap: 7px;

        padding: 10px 8px;

        text-align: center;

        white-space: normal;

        overflow-wrap: break-word;
        word-break: normal;
    }


    /*------------------------------------------------------
      BUTTON ICONS
    ------------------------------------------------------*/

    .downloads-filter-buttons button i {

        flex-shrink: 0;
    }


    /*------------------------------------------------------
      LONG BUTTON
      Market Intelligence
    ------------------------------------------------------*/

    .downloads-filter-buttons button:last-child {

        grid-column: 1 / -1;
    }

}

/* ==========================================================
   DOWNLOADS PAGE — LATEST PUBLICATIONS
   MOBILE SURGERY
   Desktop publication card → Mobile vertical card
   ========================================================== */

@media (max-width: 767px) {

    /* ------------------------------------------------------
       1. SECTION CONTAINER
       ------------------------------------------------------ */

    .latest-publications {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .latest-publications .container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       2. SECTION HEADER
       ------------------------------------------------------ */

    .latest-publications-header {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .latest-publications-header h2 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;

        gap: 8px;

        font-size: 24px;
        line-height: 1.2;

        overflow-wrap: break-word;
        word-break: normal;
    }

    .latest-publications-header h2 img {
        width: 52px;
        height: 52px;
        max-width: 52px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .latest-publications-header p {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;

        margin-left: auto;
        margin-right: auto;

        font-size: 16px;
        line-height: 1.5;

        overflow-wrap: break-word;
    }


    /* ------------------------------------------------------
       3. PUBLICATION CARD
       Desktop: cover | content | actions
       Mobile:  cover
                content
                actions
       ------------------------------------------------------ */

    .publication-card {
        display: flex;
        flex-direction: column;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow: hidden;
    }


    /* ------------------------------------------------------
       4. PUBLICATION COVER
       ------------------------------------------------------ */

    .publication-cover {
        position: relative;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow: hidden;
    }

    .publication-cover img {
        display: block;

        width: 100%;
        max-width: 100%;
        height: auto;

        object-fit: contain;
    }

    .publication-ribbon {
        position: absolute;
        top: 12px;
        right: 12px;

        z-index: 2;

        white-space: nowrap;
    }


    /* ------------------------------------------------------
       5. PUBLICATION CONTENT
       ------------------------------------------------------ */

    .publication-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        padding: 20px;
    }

    .publication-content h3,
    .publication-content h4,
    .publication-content p,
    .publication-content ul {
        max-width: 100%;
        box-sizing: border-box;

        overflow-wrap: break-word;
        word-break: normal;
    }

    .publication-content h3 {
        font-size: 21px;
        line-height: 1.3;
    }

    .publication-content h4 {
        font-size: 17px;
        line-height: 1.4;
    }

    .publication-content ul {
        padding-left: 20px;
    }

    .publication-content li {
        line-height: 1.5;
        margin-bottom: 5px;
    }


    /* ------------------------------------------------------
       6. ACTION BUTTONS
       ------------------------------------------------------ */

    .publication-actions {
        display: flex;
        flex-direction: column;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        gap: 10px;
        padding: 0 20px 20px;
    }

    .publication-btn {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        min-height: 48px;
        padding: 12px 15px;

        text-align: center;

        overflow-wrap: break-word;
    }

}

/* ==========================================================
   DOWNLOADS PAGE — DOWNLOAD DOCUMENTS
   MOBILE SURGERY
   Desktop multi-card layout → Mobile single-column layout
   ========================================================== */

@media (max-width: 767px) {

    /* ------------------------------------------------------
       1. DOWNLOAD LIBRARY
       ------------------------------------------------------ */

    .downloads-library {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .downloads-library .container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       2. DOWNLOAD CARD GRID
       Desktop: multiple cards
       Mobile: one card per row
       ------------------------------------------------------ */

    .download-grid {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        gap: 18px;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       3. INDIVIDUAL DOWNLOAD CARD
       ------------------------------------------------------ */

    .download-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow: hidden;
    }


    /* ------------------------------------------------------
       4. CARD HEADER
       ------------------------------------------------------ */

    .download-card-header {
        display: flex;
        align-items: center;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        gap: 12px;
    }

    .download-card-header img {
        width: 42px;
        height: 42px;

        max-width: 42px;

        object-fit: contain;
        flex-shrink: 0;
    }

    .download-card-header h3 {
        flex: 1;
        min-width: 0;
        max-width: 100%;

        overflow-wrap: break-word;
        word-break: normal;
    }


    /* ------------------------------------------------------
       5. DOWNLOAD ITEM
       Keep icon + information + download button
       comfortably inside mobile width
       ------------------------------------------------------ */

    .download-item {
        display: flex;
        align-items: center;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        gap: 10px;
    }


    /* ------------------------------------------------------
       6. LEFT SIDE OF DOWNLOAD ITEM
       ------------------------------------------------------ */

    .download-left {
        display: flex;
        align-items: center;

        flex: 1;
        min-width: 0;
        max-width: 100%;

        gap: 10px;
    }

    .download-left > img {
        width: 38px;
        height: 38px;

        max-width: 38px;

        object-fit: contain;
        flex-shrink: 0;
    }

    .download-left > div {
        flex: 1;
        min-width: 0;
        max-width: 100%;
    }

    .download-left h4,
    .download-left p,
    .download-left span {
        max-width: 100%;

        overflow-wrap: break-word;
        word-break: normal;
    }

    .download-left h4 {
        line-height: 1.3;
    }

    .download-left p {
        line-height: 1.4;
    }


    /* ------------------------------------------------------
       7. DOWNLOAD BUTTON
       ------------------------------------------------------ */

    .download-btn {
        flex-shrink: 0;

        width: 42px;
        height: 42px;

        max-width: 42px;

        display: flex;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;
    }

    .download-btn img {
        width: 28px;
        height: 28px;

        max-width: 28px;

        object-fit: contain;
    }

}

/*==========================================================
    CAREERS PAGE
    CAREER HERO — TABLET & MOBILE RESPONSIVE
==========================================================*/

/*----------------------------------------------------------
    TABLET — up to 992px
----------------------------------------------------------*/

@media (max-width: 992px) {

    .career-hero-container {

        width: 100%;
        max-width: 100%;

        height: auto;
        max-height: none;

        grid-template-columns: 1fr;

        overflow: hidden;
    }

    .career-hero-content {

        width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }

    .career-hero-image {

        width: 100%;
        height: 360px;

        min-height: 360px;

        overflow: hidden;
    }

    .career-hero-image img {

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }

}


/*----------------------------------------------------------
    MOBILE — up to 768px
----------------------------------------------------------*/

@media (max-width: 768px) {

    .career-hero-container {

        width: 100%;
        max-width: 100%;

        height: auto;
        max-height: none;

        display: grid;
        grid-template-columns: 1fr;

        overflow: hidden;
    }

    .career-hero-content {

        width: 100%;
        min-width: 0;

        box-sizing: border-box;

        padding: 20px 16px;
    }

    .career-hero-image {

        width: 100%;
        height: 320px;

        min-height: 320px;

        overflow: hidden;
    }

    .career-hero-image img {

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }

}


/*----------------------------------------------------------
    SMALL MOBILE — up to 480px
----------------------------------------------------------*/

@media (max-width: 480px) {

    .career-hero-content {

        padding: 18px 14px;
    }

    .career-hero-image {

        height: 280px;
        min-height: 280px;
    }

}

/*==========================================================
FOOTER LOGO — MOBILE & SMALL TABLET
==========================================================*/

@media (max-width: 900px){

    .footer-logo{
        align-items:center;
    }

    .footer-logo-text{
        text-align:center;
    }

}