/* ════════════════════════════════════════════════════════════════════
   GLOBX - MOBILE APP SKIN (single override file)
   ────────────────────────────────────────────────────────────────────
   Purpose: make globx.eu FEEL like a native app on phones without
   touching desktop styling or editing any existing stylesheet.

   Rules of this file (keep it clean):
   1. EVERY app-skin rule lives inside @media (max-width: 767.98px) -
      desktop is never affected. ONE exception: a tablet-range block at
      the end of the file that only fixes hero/header overlap (768-991px
      has the mobile hamburger header too, so the hero needs the same
      clearance there - nothing else from the app skin applies).
   2. Overrides are ADDITIVE (radius, spacing, shadows, touch sizing);
      no display:none on content except pure desktop decoration.
   3. Loaded LAST in the layout so it wins the cascade legitimately -
      keep !important rare and only where an inline style must lose.
   (Bottom tab bar removed 2026-09-10; _mobile-tabbar.php no longer rendered.)
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

  /* ── App foundations ──────────────────────────────────────────── */
  /* NOTE: no scroll-behavior:smooth here - it animates the small scroll
     corrections Bootstrap makes when the drawer toggles, which showed as
     a vertical "glitch" on open/close. */
  html {
    -webkit-tap-highlight-color: transparent;
  }
  /* Lock background scrolling while the drawer is open (pure CSS). */
  body:has(#navbarNav.show) {
    overflow: hidden;
  }
  body {
    /* iPhone home-indicator clearance only (tab bar removed 2026-09-10) */
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none; /* no rubber-band flashing white */
    background: #f6f8fb;
  }

  /* ── Manufacturer logo marquee (below hero): tighter + slower ───
     Base mobile speeds the loop UP to 20s and keeps the desktop 5rem
     gap + 180px cells; phones get a compact strip with BIGGER logos,
     a small gap and a calm speed. */
  .gx-hero-footer {
    height: 60px !important;
    padding: 0.2rem 0 !important;
  }
  .gx-partners-scroll-track {
    gap: 1.25rem !important;
    animation-duration: 55s !important; /* base mobile was 20s - far too fast */
  }
  .gx-partner-logo {
    width: auto !important;
    padding: 0 0.4rem !important;
  }
  .gx-partner-logo img {
    width: 110px !important;
    height: 46px !important;
  }

  /* ── Header: compact app top-bar ──────────────────────────────── */
  .gx-navbar-container {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  body.has-scrolled .gx-navbar-container,
  body.gx-nav-fixed-solid .gx-navbar-container {
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.07) !important;
  }

  /* ── Cards and surfaces: one app design language ──────────────── */
  .gx-related-card,
  .gx-guide-card,
  .gx-cat-card,
  .gx-service-pane,
  .gx-why-work-who-are-we,
  .gx-contact-form-container {
    border-radius: 16px;
  }
  .gx-related-card,
  .gx-cat-card {
    border: 1px solid #eef1f6;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    background: #fff;
  }
  .gx-related-card:active,
  .gx-guide-card:active,
  .gx-cat-card:active {
    transform: scale(0.985);
    transition: transform 0.1s;
  }

  /* ── Buttons: app-grade touch targets ─────────────────────────── */
  .gx-related-card-btn,
  .gx-hero-action,
  .btn,
  button[type="submit"] {
    min-height: 44px; /* Apple HIG touch minimum */
    border-radius: 12px;
  }
  .gx-related-card-btn {
    padding: 0.65rem 1.1rem;
  }

  /* ── Homepage hero: app launch-screen feel ────────────────────── */
  .gx-home-hero {
    border-radius: 0; /* square bottom edge (rounded corners removed 2026-09-10) */
    overflow: hidden;
  }
  .gx-hero-h1 {
    font-size: clamp(1.7rem, 7.5vw, 2.2rem);
    line-height: 1.15;
  }
  .gx-hero-search {
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  }
  .gx-hero-search__input {
    min-height: 52px;
    font-size: 1rem; /* >=16px stops iOS zoom-on-focus */
  }
  .gx-hero-actions {
    gap: 0.6rem;
  }
  .gx-hero-action {
    border-radius: 12px;
    padding: 0.7rem 1.1rem;
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  /* ── Sections: tighter app rhythm, consistent gutters ─────────── */
  .gx-section-common,
  .gx-cat-section,
  .gx-home-guides {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
  .container {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  /* Guide cards become app list-tiles (already border-free on mobile) */
  .gx-guide-card {
    background: #fff;
    border: 1px solid #eef1f6 !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    margin-bottom: 0.85rem;
    padding: 1.25rem 1rem !important;
  }

  /* Category tiles: momentum swipe feel (slider already scroll-snaps) */
  .gx-cat-slider {
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 1.1rem;
  }

  /* ── "Popular Products / Featured Components": app swipe rail ─────
     Desktop shows a grid; phones get the native-app pattern instead: a
     full-bleed horizontal rail of snapping cards, next card peeking from
     the right edge to invite the swipe. */
  .gx-featured-products .gx-fp-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.85rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* full-bleed: escape the container gutters, pad back inside */
    margin-left: -1.1rem;
    margin-right: -1.1rem;
    padding: 0.5rem 1.1rem 1.25rem;
    scroll-padding-left: 1.1rem;
    scrollbar-width: none;
  }
  .gx-featured-products .gx-fp-grid::-webkit-scrollbar { display: none; }
  .gx-featured-products .gx-fp-card {
    flex: 0 0 78%;
    max-width: 300px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid #eef1f6;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    padding: 1.1rem 1rem 0.9rem;
    display: flex;
    flex-direction: column;
  }
  .gx-featured-products .gx-fp-card:active {
    transform: scale(0.985);
    transition: transform 0.1s;
  }
  .gx-featured-products .gx-fp-card__icon {
    height: 72px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 0.75rem;
  }
  .gx-featured-products .gx-fp-card__icon img {
    width: 60px; height: 60px;
  }
  .gx-featured-products .gx-fp-card__pn {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.3rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .gx-featured-products .gx-fp-card__desc {
    font-size: 0.8rem;
    line-height: 1.45;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 0.5rem;
  }
  .gx-featured-products .gx-fp-card__brand {
    font-size: 0.78rem;
    color: #1a7fae;
    font-weight: 500;
    margin-bottom: 0.65rem;
  }
  .gx-featured-products .gx-fp-card__foot {
    margin-top: auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
    border-top: 1px solid #f2f5f9;
    padding-top: 0.65rem;
  }
  .gx-featured-products .gx-fp-card__price {
    font-size: 0.82rem;
    color: #6b7280;
  }
  .gx-featured-products .gx-fp-card__btn {
    background: #1a7fae;
    color: #fff !important;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
  }
  /* Section header: compact app style */
  .gx-featured-products.gx-section-common {
    padding-top: 2rem !important;
    padding-bottom: 1.5rem !important;
  }
  .gx-featured-products .gx-section-headline-common {
    font-size: 1.35rem;
  }

  /* ── "Solution" section: app card + segmented control ──────────
     The two-tab problem/solution toggle becomes an iOS-style segmented
     control inside a clean app card; illustration compact, text tight. */
  section.gx-problem-solution-section.gx-section-common {
    padding-top: 2rem !important;
    padding-bottom: 2.25rem !important;
  }
  .gx-problem-solution-section .gx-section-headline-common {
    font-size: 1.35rem;
  }
  .gx-problem-solution-section .gx-content-container-common--bordered {
    border: 1px solid #eef1f6 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    background: #fff;
    padding: 1rem 1rem 1.25rem !important;
  }
  /* Segmented control: gray track, active segment = white floating pill */
  .gx-problem-solution-section .gx-tab-navigation {
    display: flex !important;
    width: 100%;
    background: #f1f4f8 !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 4px !important;
    gap: 4px;
    margin-bottom: 1.1rem !important;
    box-shadow: none !important;
  }
  .gx-problem-solution-section .gx-tab-btn {
    flex: 1 1 0;
    min-height: 40px;
    min-width: 0;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.45rem 0.5rem !important;
    margin: 0 !important;
    text-align: center !important;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    /* The desktop design carves the tabs into chevrons and offsets the
       active right tab (clip-path polygons + padding-left:5rem) - that
       clipped the white pill and cut the label on phones. Flatten ALL of
       it for the segmented control: */
    clip-path: none !important;
    transform: none !important;
  }
  .gx-problem-solution-section .gx-tab-btn:first-child,
  .gx-problem-solution-section .gx-tab-btn:last-child,
  .gx-problem-solution-section .gx-tab-btn-active:first-child,
  .gx-problem-solution-section .gx-tab-btn-active:last-child {
    clip-path: none !important;
    border-radius: 9px !important;
    padding: 0.45rem 0.5rem !important;
  }
  .gx-problem-solution-section .gx-tab-btn.gx-tab-btn-active {
    background: #fff !important;
    color: #1a7fae !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
    font-weight: 600;
  }
  .gx-problem-solution-section .gx-tab-btn-active:hover,
  .gx-problem-solution-section .gx-tab-btn-active:active {
    transform: none !important;
    background: #fff !important;
  }
  /* Kill EVERY fixed height in this section (base 38rem wrapper, 500px
     tab content, and the mobile media queries' 62rem!) - they left a
     huge empty band under the compact text. Panes are absolutely
     positioned stacked layers, so the ACTIVE one must return to normal
     flow for the card to size to its content (same fix as Services). */
  .gx-problem-solution-section,
  .gx-problem-solution-section .gx-content-container-wrapper,
  .gx-problem-solution-section .gx-content-container-common,
  .gx-problem-solution-section .gx-tab-content {
    min-height: 0 !important;
    height: auto !important;
  }
  .gx-problem-solution-section .gx-tab-content {
    padding: 0 !important;
    position: relative;
    overflow: hidden; /* absolute inactive panes can never bleed out */
  }
  .gx-problem-solution-section .gx-tab-pane {
    min-height: 0 !important;
  }
  .gx-problem-solution-section .gx-tab-pane-active {
    position: static !important; /* natural height for the card */
  }
  /* Pane content: compact app typography, illustration scaled down */
  .gx-problem-solution-section .gx-content-subtitle-common {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
  }
  .gx-problem-solution-section .gx-content-title-common {
    font-size: 1.15rem;
    margin-bottom: 0.6rem;
  }
  .gx-problem-solution-section .gx-content-text-common {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #475569;
  }
  .gx-problem-solution-section .gx-illustration-wrapper-common {
    margin-top: 1rem;
  }
  .gx-problem-solution-section .gx-illustration-container-common {
    max-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .gx-problem-solution-section .gx-illustration-foreground-common {
    max-height: 175px;
    width: auto;
  }

  /* ── "Services" section: chip selector + app card ───────────────
     The desktop 6-row vertical menu becomes a horizontally swipeable
     row of filter chips (the app pattern for pick-one-of-N), and the
     rotating service pane becomes a standard app card. The section's
     JS (click-to-select + auto-advance) keeps working - only visuals
     change on the same .gx-service-item elements. */
  section.gx-services-section.gx-section-common {
    padding-top: 2rem !important;
    padding-bottom: 2.25rem !important;
  }
  .gx-services-section .gx-services-headline {
    font-size: 1.35rem !important;
    margin-bottom: 0.5rem;
  }
  .gx-services-section .gx-services-description {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #64748b;
    margin-bottom: 1rem !important;
  }
  /* Menu -> horizontally sliding row, SAME look as desktop (arrow icon +
     light service name, active = blue + arrow) - just laid out as a
     full-bleed swipe rail instead of a vertical list. */
  .gx-services-section .gx-services-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 0.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 -1.1rem 0.25rem;
    padding: 0.25rem 1.1rem 0.25rem;
    scroll-snap-type: x proximity;
    scroll-padding-left: 1.1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gx-services-section .gx-services-menu::-webkit-scrollbar { display: none; }
  /* No dead space between the service list and the card below it - the
     desktop two-column layout adds wrapper margins that phones don't need. */
  .gx-services-section .gx-services-navigation { margin-bottom: 0 !important; }
  .gx-services-section .gx-services-header { margin-bottom: 0.75rem !important; }
  .gx-services-section .gx-services-content { margin-top: 0 !important; padding-top: 0 !important; }
  .gx-services-section .row { row-gap: 0.5rem !important; }
  .gx-services-section .gx-service-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem !important;
    margin: 0 !important;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
  }
  .gx-services-section .gx-service-name {
    font-size: 1rem !important;      /* desktop's 1.4rem scaled for phones */
    font-weight: 300;
    color: hsl(196deg 40% 70%);      /* same muted tone as desktop */
  }
  .gx-services-section .gx-service-item.gx-service-active .gx-service-name {
    color: var(--primary, #1a7fae);
    font-weight: 500;
  }
  .gx-services-section .gx-service-icon {
    width: 26px;
    height: auto;
  }
  /* Pane -> app card. IMPORTANT: panes are absolutely-positioned stacked
     layers on desktop; in a natural-height card the ACTIVE pane must be
     in normal flow or the container collapses and the pane paints over
     the sections below (bug seen 2026-09-06). Inactive panes stay
     absolute + hidden underneath. */
  .gx-services-section .gx-service-content-container {
    position: relative;
    background: #fff;
    border: 1px solid #eef1f6 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    padding: 1.1rem 1rem 1.25rem !important;
    /* A stable height that fits the TALLEST pane: panes differ in text
       length, and height:auto snaps instantly on switch (visible jump).
       min-height pins the card so rotation is glitch-free; an unusually
       tall pane can still grow it. */
    min-height: 29rem !important;
    overflow: hidden;
  }
  .gx-services-section .gx-service-pane { min-height: 0 !important; }
  .gx-services-section .gx-service-pane-active {
    position: static !important;   /* gives the card its natural height */
  }
  .gx-services-section .gx-service-illustration {
    margin-bottom: 0.75rem !important;
  }
  .gx-services-section .gx-service-illustration .gx-illustration-container-common {
    max-height: 170px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .gx-services-section .gx-service-illustration img {
    max-height: 160px;
    width: auto;
  }
  .gx-services-section .gx-service-title {
    font-size: 1.15rem !important;
    margin-bottom: 0.5rem !important;
  }
  .gx-services-section .gx-service-title br { display: none; } /* one line reads better at this size */
  .gx-services-section .gx-service-description {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    color: #475569;
  }
  .gx-services-section .gx-service-pane .gx-btn-primary {
    display: block;
    width: 100%;
    margin-top: 1rem !important;
    border-radius: 12px;
    min-height: 46px;
    font-size: 0.92rem;
  }
  /* Desktop-only decoration between sections: meaningless on phones */
  .gx-transition-chevron { display: none !important; }

  /* ── "Sectors and domains" (Markets & Industries): tile grid ─────
     Nine sectors as a two-column grid of compact app tiles (keeps the
     arrow-icon identity), orbit illustration scaled down, app rhythm. */
  section.gx-markets-industries-section.gx-section-common {
    padding-top: 2rem !important;
    padding-bottom: 2.25rem !important;
  }
  .gx-markets-industries-section .gx-section-headline-common {
    font-size: 1.35rem !important;
  }
  /* This section sits on a DARK ground - light text, glass tiles. */
  .gx-markets-industries-section .gx-section-description-common {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    margin-bottom: 1.1rem !important;
  }
  /* Animated orbit (same widget as desktop), sized to feel substantial:
     the orbit geometry is vmin-based and scales inside this square wrap. */
  .gx-markets-industries-section .gx-markets-mobile-illustration {
    margin: 0.5rem 0 1.25rem !important;
  }
  .gx-orbit-mobile-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(80vw, 320px);
    height: min(80vw, 320px);
    margin: 0 auto;
    position: relative;
  }
  .gx-orbit-mobile-wrap .gx-orbit {
    width: 100%;
    height: 100%;
  }
  /* Icons and center scaled up vs desktop's 7.5vmin (tiny at phone vmin)
     but kept moderate. */
  .gx-orbit-mobile-wrap .gx-orbit-icon-container {
    width: min(11.5vmin, 46px) !important;
    height: min(11.5vmin, 46px) !important;
  }
  .gx-orbit-mobile-wrap .gx-orbit-center-container {
    width: min(19vmin, 76px) !important;
    height: min(19vmin, 76px) !important;
  }
  /* (Circulation pattern - even 120-degree spacing, counter-rotating
     middle ring, de-synced periods - now lives in the BASE stylesheet
     markets-industries.css and applies to desktop and mobile alike.) */
  /* Glass tiles with chevron brackets (app look on the dark ground) */
  .gx-markets-industries-section .gx-markets-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }
  .gx-markets-industries-section .gx-markets-list-item {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    margin: 0 !important;
    padding: 0.7rem 0.75rem !important;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.3;
    color: #fff !important;
    min-height: 46px;
  }
  .gx-markets-industries-section .gx-markets-list-item span {
    color: #fff !important;
  }
  /* Chevron bracket bullet instead of the arrow image */
  .gx-markets-industries-section .gx-markets-list-icon { display: none !important; }
  .gx-markets-industries-section .gx-markets-list-item::before {
    content: "\f105"; /* fa angle-right bracket */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.85rem;
    color: #7dd3fc;
    flex: 0 0 auto;
  }
  /* Decorative corner arrow: desktop ornament only */
  .gx-markets-industries-section .gx-sector-arrow { display: none !important; }

  /* ── Testimonials: compact app quote card ───────────────────────
     Mobile order puts the big 380x475 portrait first - shrink it to a
     rounded banner, then the quote reads as an app card underneath. */
  section.gx-testimonials-section.gx-section-common {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .gx-testimonials-section .gx-testimonial-image-container {
    max-width: 220px;
    margin: 0 auto 1rem;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
  }
  .gx-testimonials-section .gx-testimonial-image {
    width: 100%;
    height: auto;
    display: block;
  }
  .gx-testimonials-section .gx-testimonial-pane {
    background: #fff;
    border: 1px solid #eef1f6;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    padding: 1.25rem 1.1rem 1.1rem;
  }
  .gx-testimonials-section .gx-testimonial-quote {
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    margin-bottom: 1rem !important;
    position: relative;
  }
  .gx-testimonials-section .gx-testimonial-quote::before {
    content: "\f10d"; /* fa quote-left */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: block;
    font-size: 1.1rem;
    color: #1a7fae;
    margin-bottom: 0.4rem;
  }
  .gx-testimonials-section .gx-testimonial-author-name {
    font-size: 0.95rem !important;
    font-weight: 600;
    color: #0f172a;
  }
  .gx-testimonials-section .gx-testimonial-author-title {
    font-size: 0.8rem !important;
    color: #64748b;
  }
  .gx-testimonials-section .team-log img {
    max-height: 48px;
    width: auto;
  }
  .gx-testimonials-section .gx-testimonial-pagination {
    margin-top: 0.9rem;
  }

  /* ── "Why work with us?": app stat tiles ──────────────────────── */
  section.gx-why-work-section.gx-section-common {
    padding-top: 2rem !important;
    padding-bottom: 2.25rem !important;
  }
  .gx-why-work-section .gx-why-work-title {
    font-size: 1.35rem !important;
    margin-bottom: 0.5rem !important;
  }
  .gx-why-work-section .gx-why-work-title br { display: none; }
  .gx-why-work-section .gx-why-work-description {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: 0 !important;
  }
  /* Decorative separator lines: desktop ornament only */
  .gx-why-work-section .gx-why-work-separator { display: none !important; }
  /* Stats -> 2-column tile grid; the "Who are we?" tile leads full-width
     as a dark accent card, three stat tiles follow. */
  .gx-why-work-section .gx-why-work-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 1.1rem;
  }
  .gx-why-work-section .gx-why-work-who-are-we {
    grid-column: 1 / -1;
    background: linear-gradient(100deg, #060d18 0%, #274b63 55%, #a9dcef 130%) !important;
    border-radius: 16px !important;
    padding: 1.1rem 1rem !important;
    display: flex;
    align-items: center;
    min-height: 108px;
  }
  .gx-why-work-section .gx-who-are-we-text {
    font-size: 1.05rem !important;
    font-weight: 600;
    color: #d9f2fc !important;
  }
  .gx-why-work-section .gx-why-work-stat {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 1rem 0.9rem !important;
    margin: 0 !important;
    text-align: left;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  /* the last (third) stat spans the full row for balance: 1 + 2 + full */
  .gx-why-work-section .gx-why-work-stat:last-child {
    grid-column: 1 / -1;
  }
  .gx-why-work-section .gx-why-work-stat-number {
    font-size: 1.7rem !important;
    font-weight: 700;
    color: #cdeefb !important;
    line-height: 1.1;
    margin-bottom: 0.15rem;
  }
  .gx-why-work-section .gx-why-work-stat-label {
    font-size: 0.78rem !important;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92) !important;
    margin-bottom: 0.25rem;
  }
  .gx-why-work-section .gx-why-work-stat-description {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.65) !important;
  }
  .gx-why-work-section .gx-why-work-stat-description br { display: none; }

  /* ── Save the Globe: compact app card + earth banner ────────────
     Base CSS stacks the logomark vertically and centers everything;
     app look = tight horizontal logomark row inside a white card,
     left-aligned copy, full-width rounded earth image below. */
  section.gx-save-globe-section.gx-section-common {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  /* one card wraps image (top) + content (below) */
  .gx-save-globe-row {
    gap: 0 !important;
    background: #fff;
    border: 1px solid #eef1f6;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    overflow: hidden;
  }
  .gx-save-globe-content {
    align-items: flex-start !important;
    text-align: left !important;
    padding: 1.1rem 1.1rem 1.25rem;
  }
  .gx-save-globe-logomark {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.7rem !important;
    margin-bottom: 0.9rem !important;
  }
  .gx-save-globe-x-graphic {
    width: 52px !important;
  }
  .gx-save-globe-globx {
    font-size: 1.45rem !important;
    text-align: left !important;
  }
  .gx-save-globe-save-globe {
    align-items: flex-start !important;
    text-align: left !important;
    line-height: 1.05 !important;
  }
  .gx-save-globe-save-globe .save,
  .gx-save-globe-save-globe .the,
  .gx-save-globe-save-globe .globe {
    font-size: 0.92rem !important;
    font-weight: 500 !important;
  }
  .gx-save-globe-body {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    text-align: left !important;
    margin: 0 !important;
  }
  .gx-save-globe-image-col {
    width: 100%;
    order: -1; /* image first, inside the card */
  }
  .gx-save-globe-image {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 0 !important; /* card clips the corners */
    box-shadow: none !important;
    display: block;
  }

  /* ── FAQs: app accordion cards ──────────────────────────────────
     Base styling (sell-excess-stock.css) is flat divider rows with
     hover negative margins; on phones each item becomes its own card. */
  section.gx-faq-section.gx-section-common {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .gx-faq-section .gx-section-header-common {
    margin-bottom: 1.25rem !important;
  }
  .gx-faq-section .gx-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .gx-faq-section .gx-faq-item {
    background: #fff;
    border: 1px solid #eef1f6 !important;
    border-bottom: 1px solid #eef1f6 !important; /* base zeroes last-child */
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    overflow: hidden;
  }
  .gx-faq-section .gx-faq-item.active {
    border-color: rgba(26, 127, 174, 0.35) !important;
  }
  .gx-faq-section .gx-faq-header,
  .gx-faq-section .gx-faq-header:hover {
    padding: 0.9rem 1rem !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .gx-faq-section .gx-faq-question {
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
    padding-right: 0.75rem !important;
  }
  .gx-faq-section .gx-faq-icon {
    width: 28px !important;
    height: 28px !important;
    background: #f1f4f8;
    border-radius: 50%;
  }
  .gx-faq-section .gx-faq-item.active .gx-faq-icon {
    background: rgba(26, 127, 174, 0.12);
  }
  .gx-faq-section .gx-faq-icon i {
    font-size: 0.7rem !important;
  }
  .gx-faq-section .gx-faq-content,
  .gx-faq-section .gx-faq-item.active .gx-faq-content {
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .gx-faq-section .gx-faq-content {
    padding: 0 1rem !important;
  }
  .gx-faq-section .gx-faq-item.active .gx-faq-content {
    padding: 0 1rem 1rem !important;
  }
  .gx-faq-section .gx-faq-content p {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    color: #64748b !important;
  }

  /* ── Contact Us: app form ───────────────────────────────────────
     Base = underline inputs + radio circles; phones get a segmented
     Contact/Offer switch, filled rounded inputs and a full-width CTA. */
  .gx-contact-section {
    padding: 2rem 0 2.25rem !important;
    background: #f7f9fc !important;
  }
  .gx-contact-form-col {
    background: #fff;
    border: 1px solid #eef1f6;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    padding: 1.25rem 1.1rem 1.35rem;
  }
  /* Contact / Offer switch -> segmented control */
  .gx-form-type-selector {
    display: flex;
    gap: 0.25rem !important;
    background: #f1f4f8;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 1.1rem !important;
  }
  .gx-form-type-selector .gx-radio-label {
    flex: 1 1 0;
    justify-content: center;
    font-size: 0.9rem !important;
    font-weight: 500;
    color: #64748b;
    padding: 0.55rem 0.5rem;
    border-radius: 9px;
    gap: 0 !important;
    transition: background 0.2s, color 0.2s;
  }
  .gx-form-type-selector .gx-custom-radio {
    display: none !important; /* the pill itself signals selection */
  }
  .gx-form-type-selector .gx-radio-label:has(input:checked) {
    background: #fff;
    color: var(--primary, #1a7ebc);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
  }
  .gx-contact-heading {
    font-size: 1.35rem !important;
    margin-bottom: 0.15rem !important;
  }
  .gx-contact-subheading {
    font-size: 0.88rem !important;
    margin-bottom: 1.1rem !important;
  }
  /* Filled rounded inputs */
  .gx-form-group {
    margin-bottom: 0.8rem !important;
  }
  .gx-form-group label {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 0.3rem !important;
  }
  .gx-contact-section .gx-form-group input,
  .gx-contact-section .gx-form-group textarea,
  .gx-contact-section .gx-part-input {
    background: #f7f9fb !important;
    border: 1px solid #e5eaf1 !important;
    border-radius: 12px !important;
    padding: 0.6rem 0.85rem !important;
    height: 48px;
    color: #0f172a !important;
    transition: border-color 0.2s, background 0.2s;
  }
  .gx-contact-section .gx-form-group textarea {
    height: auto;
    min-height: 110px;
  }
  .gx-contact-section .gx-form-group input:focus,
  .gx-contact-section .gx-form-group textarea:focus,
  .gx-contact-section .gx-part-input:focus {
    background: #fff !important;
    border-color: var(--primary, #1a7ebc) !important;
  }
  /* First/Last name: stack as full-width rows (side-by-side overflowed) */
  .gx-form-row {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .gx-form-row .gx-form-half {
    flex: none !important;
    width: 100%;
    min-width: 0;
  }
  .gx-contact-section .gx-form-group input,
  .gx-contact-section .gx-form-group textarea {
    width: 100%;
  }
  /* Parts rows (Offer form): stay horizontal, app chip buttons */
  .gx-parts-section-label {
    font-size: 0.9rem !important;
  }
  .gx-part-row {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0 !important;
  }
  .gx-part-controls {
    margin-top: 0 !important;
    gap: 0.35rem !important;
  }
  .gx-part-add-btn,
  .gx-part-remove-btn {
    width: 34px !important;
    height: 34px !important;
    background: #f1f4f8 !important;
    color: #475569 !important;
    flex-shrink: 0;
  }
  /* Full-width app CTA */
  .gx-contact-submit {
    align-self: stretch !important;
    width: 100%;
    min-height: 48px;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-top: 0.35rem !important;
  }

  /* ── Browse Components by Category: 2-row app chip rail ─────────
     Base (footernew.php) draws a bordered card holding a single long
     slider row; on phones the outer card goes away and the categories
     become a full-bleed two-row chip rail you swipe sideways. */
  .gx-cat-section {
    padding: 2rem 0 2.25rem !important;
  }
  .gx-cat-card-wrap {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .gx-cat-head {
    display: block !important;
    margin-bottom: 0.9rem !important;
  }
  .gx-cat-title {
    font-size: 1.35rem !important;
  }
  .gx-cat-sub {
    font-size: 0.85rem !important;
    color: #64748b !important;
    margin-top: 0.25rem !important;
  }
  /* full-bleed 2-row rail: chips size to their label, swipe to see more */
  .gx-cat-slider {
    display: grid !important;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: max-content;
    gap: 0.55rem 0.6rem;
    margin: 0 calc(50% - 50vw);
    padding: 2px 1.1rem 6px !important;
    scroll-padding-left: 1.1rem;
  }
  .gx-cat-card {
    min-width: 0 !important;
    max-width: none !important;
    background: #f7f9fb !important;
    border: 1px solid #e5eaf1 !important;
    border-radius: 12px !important;
    padding: 0.65rem 0.9rem !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    gap: 0.5rem !important;
  }
  .gx-cat-go {
    color: var(--primary, #1a7ebc) !important;
    font-size: 0.95rem !important;
  }

  /* ── Cookie consent: app bottom sheet ───────────────────────────
     Base (main.php inline) centers a 600px dialog mid-screen; on phones
     it becomes a bottom sheet docked at the bottom edge. */
  #cookie-consent {
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 62vh !important;
    border-radius: 16px !important;
    padding: 1.1rem 1rem !important;
    transform: translateY(16px) !important;
  }
  #cookie-consent.is-visible {
    transform: translateY(0) !important;
  }
  #cookie-consent h1, #cookie-consent h2, #cookie-consent h3 {
    font-size: 1.05rem !important;
  }
  #cookie-consent p {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0.5rem !important;
  }
  #cookie-consent .btn-group-custom {
    display: flex;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  #cookie-consent .btn-custom {
    width: 100% !important;
    margin: 0 !important;
    min-height: 44px;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
  }

  /* ── Drawer open: dim the page behind it ────────────────────────
     The backdrop sits at z-index 999: page content is below it, while the
     header container (z-index 1000, the drawer's stacking context) and the
     drawer itself stay above. */
  body:has(#navbarNav.show)::before,
  body:has(#navbarNav.collapsing)::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 999;
  }

  /* ── Footer: slim app footer ────────────────────────────────────
     Column order in the markup: 1 company, 2 Pages, 3 Latest Blog,
     4 legal + badges (nth-child targets below rely on that order). */
  .gx-footer {
    padding: 2.25rem 0 1.5rem !important;
  }
  .gx-footer .gx-footer-col {
    margin-bottom: 1.6rem !important;
  }
  .gx-footer .footer-title {
    font-size: 0.95rem !important;
    margin-bottom: 0.7rem !important;
  }
  .gx-footer .gx-footer-logo {
    width: 54px !important;
  }
  /* email + phone -> tappable chips */
  .gx-footer .footer-bold-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 0.5rem 0.9rem;
    margin: 0.2rem 0.15rem;
    font-size: 0.85rem !important;
    min-height: 40px;
  }
  /* Pages -> plain text links in 2 columns (no tiles) */
  .gx-footer .row > .gx-footer-col:nth-child(2) .gx-footer-links {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 0.75rem;
  }
  .gx-footer .row > .gx-footer-col:nth-child(2) .gx-footer-links a {
    font-size: 0.85rem !important;
    padding: 0.25rem 0 !important;
    text-align: center;
  }
  /* Latest from the Blog -> compact one-line rows (long titles ellipsize) */
  .gx-footer .row > .gx-footer-col:nth-child(3) .gx-footer-links {
    gap: 0.2rem !important;
    align-items: stretch !important;
  }
  .gx-footer .row > .gx-footer-col:nth-child(3) .gx-footer-links a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 0.82rem !important;
    padding: 0.3rem 0 !important;
    text-align: center;
  }
  /* legal chips + badges row */
  .gx-footer .gx-footer-legal {
    gap: 0.4rem 0.9rem !important;
  }
  .gx-footer .gx-footer-legal a {
    font-size: 0.76rem !important;
  }

  /* ── Inputs sitewide: no iOS zoom, comfortable height ─────────── */
  input[type="text"], input[type="search"], input[type="email"],
  input[type="tel"], input[type="number"], select, textarea {
    font-size: 1rem !important;
    min-height: 44px;
  }

  /* ── Compact app header (~56px instead of ~90px) ──────────────── */
  /* Safe area: on notched phones the fixed/absolute header must start
     below the status bar (requires viewport-fit=cover in the meta). */
  .gx-navbar-container {
    padding-top: env(safe-area-inset-top, 0px);
  }
  .gx-navbar.search-navbar,
  .gx-navbar--application {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    min-height: 56px;
  }
  .gx-navbar .logo,
  .gx-navbar .logo--white,
  .gx-navbar .logo--colored {
    width: 54px !important;
    height: auto !important;
  }
  .gx-mobile-tools .gx-lang-btn,
  .gx-mobile-tools .gx-search-trigger,
  .gx-mobile-tools .navbar-toggler {
    padding: 0.3rem 0.55rem;
    min-height: 38px;
    border-radius: 10px;
  }
  .gx-mobile-tools { gap: 0.4rem !important; }

  /* ── Hero: true app launch screen ─────────────────────────────
     Fills the visible viewport (svh handles mobile URL-bar collapse
     correctly), content vertically centered by the hero's own flex.
     Header is cleared via padding-top. */
  .gx-home-hero,
  .gx-hero {
    /* 112px = compact header (56px) + a clear ~56px gap, and still enough
       clearance even if the legacy ~90px header CSS is cached - the H1 must
       NEVER sit under the header (was clipping, 2026-09-06). */
    padding-top: calc(96px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 2rem !important;
    min-height: calc(100svh - env(safe-area-inset-bottom, 0px)) !important; /* full launch screen (tab bar removed) */
    height: auto !important;
    margin-top: 0 !important; /* neutralize the hero's -10px pull-up on phones */
  }
  /* Layer stack: video (0) under overlay (1) under content (2) - the
     overlay must darken BOTH the CSS placeholder image and the video. */
  .gx-home-hero { position: relative; }
  .gx-home-hero .gx-hero-bg      { z-index: 0; }
  .gx-home-hero .gx-hero-overlay { z-index: 1; pointer-events: none; }
  .gx-home-hero .gx-hero-content { z-index: 2; }
  /* Moderate vertical rhythm between hero elements: noticeably tighter
     than the desktop spacing, but with breathing room kept ("little"
     gaps per user 2026-09-06). The content container also gets its own
     top margin so the cluster sits comfortably below the header. */
  #mainherosectionanimation {
    margin-top: 5.5rem !important; /* ~88px, per user: "around 90px" */
  }
  .gx-hero-h1 {
    margin-top: 0 !important;
    margin-bottom: 0.6rem !important;
  }
  .gx-hero-sub {
    font-size: 0.95rem;
    margin-top: 0 !important;
    margin-bottom: 1.35rem !important;
    opacity: 0.9;
  }
  .gx-hero-search {
    margin-top: 0 !important;
    margin-bottom: 1.15rem !important;
  }
  .gx-hero-actions {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .gx-hero-explore {
    margin-top: 1.5rem !important;
  }
  /* Action chips: two equal columns instead of awkward centered wrap */
  .gx-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    width: 100%;
  }
  .gx-hero-action {
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    white-space: nowrap;
  }
  /* Explore-by-categories teaser card: full-width app tile */
  .gx-hero .gx-explore-categories,
  .gx-hero-content > a[href*="category"],
  .gx-hero-content .gx-categories-cta {
    border-radius: 16px;
  }

  /* ── Nav drawer: app-style side sheet ─────────────────────────── */
  .gx-drawer-backdrop {
    background: rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  #navbarNav.navbar-collapse {
    width: min(320px, 85vw) !important;
    box-shadow: -12px 0 40px rgba(15, 23, 42, 0.18);
    /* generous inner gutters so nothing touches the sheet edges */
    padding: calc(1.1rem + env(safe-area-inset-top, 0px)) 1.5rem
             calc(1.1rem + env(safe-area-inset-bottom, 0px)) 1.5rem !important;
  }
  .gx-drawer-close {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: #f1f4f8; color: #334155;
    font-size: 1rem;
    margin: 0.25rem 0 0 auto; /* pulled in from the corner, not glued to it */
  }
  .gx-drawer-close:active { background: #e2e8f0; }
  .gx-drawer-brand {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: 0.25rem 0 1.1rem;
    border-bottom: 1px solid #eef1f6;
    margin-bottom: 0.75rem;
  }
  .gx-drawer-brand img { width: 58px; height: auto; }
  .gx-drawer-tagline {
    font-size: 0.75rem; color: #94a3b8; letter-spacing: 0.02em;
  }
  /* List rows: flat app list-items - no pills, no bars, no rounding.
     Active/hover state stays the site's own (blue text), untouched. */
  .gx-nav-links .nav-item {
    text-align: left !important;
    border-bottom: 1px solid #f2f5f9;
  }
  .gx-nav-links .nav-item:last-of-type { border-bottom: 0; }
  .gx-nav-links .nav-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 0.1rem !important;
    font-size: 0.98rem;
    font-weight: 500;
  }
  .gx-nav-links .nav-link::after {
    content: "\f105"; /* fa angle-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.8rem;
    color: #cbd5e1;
  }
}

/* ════════════════════════════════════════════════════════════════════
   TABLET RANGE (768px - 991.98px): hero/header overlap fix ONLY.
   These widths still use the hamburger header (~72-90px tall) but get
   none of the phone app-skin above, so the H1 was rendering underneath
   the header/logo (seen 2026-09-06 at ~915px). Clearance + no negative
   pull-up; everything else on tablet stays exactly as designed.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991.98px) {
  .gx-home-hero,
  .gx-hero {
    padding-top: calc(128px + env(safe-area-inset-top, 0px)) !important;
    margin-top: 0 !important;
  }
}