/**
 * Mobile-First Strategy – IBC Website
 *
 * Implements:
 * 1. Compact dark-blue navbar on scroll (.navbar.scrolled compact state)
 * 2. Z-Pattern content flow for mobile to maximise conversion rate
 * 3. Thumb-friendly touch targets (≥ 44 × 44 px) for all interactive elements
 */

/* ============================================================
   1. NAVBAR AT REST + FLOATING DARK-BLUE NAV
   ============================================================
   At rest (top of page): navbar has a solid white background so
   the nav-links are always readable.

   On scroll (.scrolled): the navbar becomes a free-floating
   pill – 70% wide, solid dark-blue (#0d1b3e) background with
   white nav-link text and a light elevation shadow.
   ============================================================ */

.navbar {
    /*
     * GPU layer promotion keeps the navbar on its own compositor layer so
     * that scroll-triggered class changes never trigger a main-thread repaint.
     * transform is listed because the base rule always applies translateX(-50%).
     */
    will-change: transform;
    /*
     * backdrop-filter is intentionally excluded from this transition list.
     * Animating backdrop-filter forces the browser to recreate a compositor
     * layer on every frame, which is the primary cause of scroll flicker.
     * The blur snaps on instantly – the visual result is indistinguishable
     * from a slow transition and the performance gain is significant.
     */
    transition:
        padding    0.35s var(--ease-smooth, cubic-bezier(.4,0,.2,1)),
        background 0.35s var(--ease-smooth, cubic-bezier(.4,0,.2,1)),
        box-shadow 0.35s var(--ease-smooth, cubic-bezier(.4,0,.2,1)),
        border-color 0.35s var(--ease-smooth, cubic-bezier(.4,0,.2,1)),
        width      0.45s var(--ease-smooth, cubic-bezier(.4,0,.2,1)),
        border-radius 0.45s var(--ease-smooth, cubic-bezier(.4,0,.2,1)),
        top        0.45s var(--ease-smooth, cubic-bezier(.4,0,.2,1)),
        opacity    0.35s var(--ease-smooth, cubic-bezier(.4,0,.2,1));
}

/* ── At rest: white background using the brand variable ── */
.navbar:not(.scrolled) {
    background: var(--ibc-white, #ffffff) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) !important;
    border: none !important;
}

/* Always black nav-link text for full readability */
.navbar:not(.scrolled) .nav-link {
    color: #111 !important;
    text-shadow: none !important;
}

/* Homepage hero: keep link colour black, no text-shadow */
body.homepage .navbar:not(.scrolled) .nav-link {
    color: #111 !important;
    text-shadow: none !important;
}

/* Logo uses its natural colours on the white navbar */

/* ============================================================
   FLOATING DARK-BLUE NAV – scrolled state (desktop ≥ 992 px)
   ============================================================
   When .scrolled is added by JS the navbar shrinks to 70% of
   the viewport width, grows pill-shaped rounded corners and
   hovers centred near the top of the screen with a solid
   dark-blue background and white nav-link text.
   ============================================================ */

.navbar.scrolled {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    /* Glassmorphism: semi-transparent white frosted-glass pill */
    background: rgba(255, 255, 255, 0.90) !important;
    backdrop-filter: blur(16px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
    /* Floating pill shape – 70 % wide */
    width: 70% !important;
    border-radius: 50px !important;
    top: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    /* Light shadow for depth */
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12) !important;
    /* overflow is intentionally NOT set to hidden so that the language
       dropdown and any other positioned children can render outside the
       pill bounds without being clipped. */
}

/* Hide the flat gradient accent line – the pill border replaces it */
.navbar.scrolled::before {
    opacity: 0 !important;
}

/* Shrink the logo in compact state */
.navbar.scrolled .navbar-logo {
    height: 26px !important;
}

/* The full-screen overlay covers the navbar, so no logo shrink is needed when the
   mobile nav is open – removing the size change prevents a jarring layout shift. */

/* Tighten nav-link padding in compact state */
.navbar.scrolled .nav-link {
    padding: 0.625rem 1rem !important;
}

/* Dark nav-link colour on light glassmorphism scrolled navbar */
.navbar.scrolled .nav-link,
body.homepage .navbar.scrolled .nav-link {
    color: var(--blue, #20234A) !important;
    text-shadow: none !important;
}

/* ============================================================
   NAV-LINK TYPOGRAPHY – Elite / premium finish
   ============================================================
   Override the base style.css values for refined, high-quality
   menu typography that matches the new Elite-Design language.
   · Inter 500 (medium): slightly lighter than 600 for an
     airy, contemporary feel without losing legibility.
   · letter-spacing: 0.04em: subtle positive tracking opens up
     the text and gives it a premium editorial quality.
   · transition restricted to specific properties (not `all`) so
     the browser only animates what actually changes – avoiding
     unnecessary paint/composite work every hover cycle.
   ============================================================ */
.navbar .nav-link {
    font-family: 'Inter', var(--font-primary, system-ui), sans-serif;
    font-weight: 500;
    letter-spacing: 0.04em;
    font-size: 14.5px;
    /* Replace the broad `transition: all` with specific, GPU-friendly
       properties so hover animations are rendered on the compositor. */
    transition:
        color    0.3s var(--ease-smooth, cubic-bezier(.4,0,.2,1)),
        transform 0.3s var(--ease-smooth, cubic-bezier(.4,0,.2,1)),
        opacity  0.3s var(--ease-smooth, cubic-bezier(.4,0,.2,1));
}

/* ============================================================
   MOBILE OVERRIDE – scrolled state (≤ 991 px)
   ============================================================
   On small screens the navbar becomes a 70%-wide floating pill
   centred in the viewport with a solid dark-blue background,
   white nav-link text and a light elevation shadow.
   ============================================================ */
@media (max-width: 1199px) {
    .navbar.scrolled {
        /* Floating pill – 70 % wide, centred */
        width: 70% !important;
        border-radius: 50px !important;
        top: 8px !important;
        overflow: visible !important;
        /* Glassmorphism: semi-transparent white frosted-glass pill */
        background: rgba(255, 255, 255, 0.90) !important;
        backdrop-filter: blur(16px) saturate(130%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        /* Light shadow for depth */
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    /* Hide the gradient accent line – the rounded border replaces it */
    .navbar.scrolled::before {
        opacity: 0 !important;
    }

    /* Slightly smaller logo in the compact state */
    .navbar.scrolled .navbar-logo {
        height: 26px !important;
    }

    /* Dark link colour stays readable on the light glassmorphism background */
    .navbar.scrolled .nav-link,
    body.homepage .navbar.scrolled .nav-link {
        color: var(--blue, #20234A) !important;
        text-shadow: none !important;
    }

    /* Toggler stays square-and-thumb-friendly in compact state */
    .navbar.scrolled .navbar-toggler {
        width: 44px;
        height: 44px;
    }
}

/* ============================================================
   DESKTOP OVERRIDE – scrolled state (≥ 992 px)
   ============================================================
   Prevent nav-link text from wrapping inside the compact pill so
   that every item is single-line and all content sits on the same
   vertical centre.  The pill is widened from 70 % to min(90%, 1100px)
   to accommodate the extra horizontal space required by nowrap text.
   ============================================================ */
@media (min-width: 1200px) {
    .navbar.scrolled {
        width: min(90%, 1100px) !important;
    }
    .navbar.scrolled .nav-link {
        white-space: nowrap;
    }
}

/* ============================================================
   MOBILE FULL-SCREEN BLUR OVERLAY
   ============================================================
   Replaces the standard Bootstrap collapse dropdown on mobile.
   Created dynamically by initMobileNavOverlay() in main.js.
   Designed for one-handed / thumb navigation:
     • Nav links fill the centre for easy reach
     • Close button anchored at the bottom for thumb access
   ============================================================ */

.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001; /* Above the navbar */
    display: flex; /* Always flex on mobile; desktop overrides to display:none below */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* flex-start + margin:auto on list centres items when there's room and allows scroll when not */
    padding: 5rem 1.75rem 1.75rem; /* bottom padding handled by close-btn margin */
    /* Allow the nav list to scroll on very small phones where all items can't fit */
    overflow-y: auto;
    overflow-x: hidden; /* No horizontal scroll inside the overlay */
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
    scrollbar-width: none; /* Firefox: hide scrollbar without blocking scroll */
    background: rgba(15, 20, 45, 0.88);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    /* Hidden state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-14px) scale(1.05);
    transition:
        opacity 0.32s var(--ease-smooth, cubic-bezier(.4,0,.2,1)),
        visibility 0.32s,
        transform 0.38s cubic-bezier(0.34, 1.20, 0.64, 1);
}

/* Chrome/Safari: hide scrollbar without blocking touch-scroll */
.mobile-nav-overlay::-webkit-scrollbar {
    display: none;
}

.mobile-nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0) scale(1);
}

/* ── Staggered entrance animation for mobile menu items ── */

/* Initial hidden state – items start below and invisible */
.mobile-nav-list li {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.36s var(--ease-smooth, cubic-bezier(.4,0,.2,1)),
        transform 0.40s cubic-bezier(0.34, 1.20, 0.64, 1);
}

/* When overlay opens, items flow in one by one */
.mobile-nav-overlay.is-open .mobile-nav-list li {
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav-overlay.is-open .mobile-nav-list li:nth-child(1)  { transition-delay: 0.05s; }
.mobile-nav-overlay.is-open .mobile-nav-list li:nth-child(2)  { transition-delay: 0.10s; }
.mobile-nav-overlay.is-open .mobile-nav-list li:nth-child(3)  { transition-delay: 0.15s; }
.mobile-nav-overlay.is-open .mobile-nav-list li:nth-child(4)  { transition-delay: 0.20s; }
.mobile-nav-overlay.is-open .mobile-nav-list li:nth-child(5)  { transition-delay: 0.25s; }
.mobile-nav-overlay.is-open .mobile-nav-list li:nth-child(6)  { transition-delay: 0.30s; }
.mobile-nav-overlay.is-open .mobile-nav-list li:nth-child(7)  { transition-delay: 0.35s; }
.mobile-nav-overlay.is-open .mobile-nav-list li:nth-child(8)  { transition-delay: 0.40s; }
.mobile-nav-overlay.is-open .mobile-nav-list li:nth-child(9)  { transition-delay: 0.45s; }
.mobile-nav-overlay.is-open .mobile-nav-list li:nth-child(10) { transition-delay: 0.50s; }

/* Nav list inside the overlay */
.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 420px;
}

/* Individual nav links – large touch targets */
.mobile-nav-list .nav-link {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 1.125rem 1.75rem !important;
    border-radius: 20px !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition:
        background 0.2s ease,
        transform 0.2s ease,
        color 0.2s ease !important;
    text-shadow: none !important;
    letter-spacing: 0.01em;
    width: 100%;
    text-decoration: none;
}

.mobile-nav-list .nav-link:hover,
.mobile-nav-list .nav-link:focus-visible {
    background: rgba(255, 255, 255, 0.16) !important;
    color: white !important;
    transform: scale(1.02) !important;
}

/* Replace the IBC-green WCAG focus ring with a white ring inside the overlay */
.mobile-nav-list .nav-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18) !important;
}

/* Highlight the active/current-page link in the mobile overlay */
.mobile-nav-list .nav-link[aria-current="page"] {
    background: rgba(109, 151, 68, 0.22) !important;
    border-color: rgba(109, 151, 68, 0.55) !important;
    color: #fff !important;
}

.mobile-nav-list .nav-link::before,
.mobile-nav-list .nav-link::after {
    display: none !important;
}

/* "Projekt starten" CTA button in mobile overlay – full-width, centered */
.mobile-nav-list li .ethereal-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    min-height: 60px;
    border-radius: 20px;
    font-size: 20px;
    font-weight: 700;
    padding: 1.125rem 1.75rem;
    margin-top: 0.5rem;
}

/* Hide the Bootstrap language dropdown inside overlay – show lang options directly */
.mobile-nav-list .dropdown-toggle::after {
    display: none;
}

.mobile-nav-list .dropdown-menu {
    display: none !important;
}

/* Show the language dropdown items directly as a row of buttons */
.mobile-nav-list .lang-toggle {
    display: none !important;
}

.mobile-nav-list .lang-dropdown {
    display: flex !important;
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.25rem 0 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    float: none !important;
    flex-direction: row !important;
    gap: 10px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.mobile-nav-list .lang-dropdown li {
    margin: 0 !important;
    padding: 0 !important;
}

.mobile-nav-list .lang-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0.625rem 1rem !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.mobile-nav-list .lang-item:hover,
.mobile-nav-list .lang-item:focus-visible {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

.mobile-nav-list .lang-item[aria-current="true"] {
    border-color: rgba(109, 151, 68, 0.6) !important;
    background: rgba(109, 151, 68, 0.15) !important;
    color: #fff !important;
}

/* Close button – placed last in the overlay flow so it never covers nav links */
.mobile-nav-close-btn {
    position: static;
    transform: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(255, 255, 255, 0.9);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    flex-shrink: 0;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
    z-index: 10002;
}

.mobile-nav-close-btn:hover,
.mobile-nav-close-btn:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.60);
    transform: scale(1.08);
}

.mobile-nav-close-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.8);
    outline-offset: 4px;
}

/* Prevent body scroll when overlay is open (mobile/tablet only) */
@media (max-width: 1199px) {
    body.mobile-nav-open {
        overflow: hidden !important;
        touch-action: none;
    }
}

/* The overlay is only for mobile – hide on desktop */
@media (min-width: 1200px) {
    .mobile-nav-overlay {
        display: none !important;
    }
}

/* ============================================================
   TABLET OVERLAY NAV (992 px – 1199 px)
   ============================================================
   The full-screen mobile overlay is active from 0 to 1199 px.
   Tablets in the 992 px – 1199 px range have considerably more
   horizontal space than phones and users typically interact
   with a single finger or stylus, requiring:
     · A wider nav-list container (420 px → 560 px) that uses
       the extra viewport width without stretching edge-to-edge.
     · More generous horizontal padding (28 px → 40 px) so the
       entire card surface is an easy tap target.
     · A larger font (20 px → 22 px) that reads comfortably at
       tablet viewing distances.
     · Taller touch targets (60 px → 68 px) for reliable taps.
     · A slightly larger gap (10 px → 14 px) between items to
       reduce accidental adjacent-item taps.
     · Proportionally increased language-switcher targets.
   ============================================================ */
@media (min-width: 992px) and (max-width: 1199px) {
    .mobile-nav-list {
        max-width: 560px;
        gap: 14px;
    }

    .mobile-nav-list .nav-link {
        padding: 1.25rem 2.5rem !important;
        font-size: 22px !important;
        min-height: 68px !important;
        border-radius: 24px !important;
        letter-spacing: 0.02em;
    }

    .mobile-nav-list .lang-item {
        padding: 0.75rem 1.25rem !important;
        min-height: 52px !important;
        font-size: 16px !important;
    }
}


/* ============================================================
   2. THUMB-FRIENDLY TOUCH TARGETS (≥ 44 × 44 px)
   ============================================================
   All interactive elements must present a minimum tap area of
   44 × 44 px as required by WCAG 2.5.5 (AAA) and Apple/Google
   HIG guidelines.  We use the pseudo-element trick to enlarge
   the tap area without affecting layout.
   ============================================================ */

@media (max-width: 1199px) {

    /* Navbar toggler */
    .navbar-toggler {
        min-width: 44px  !important;
        min-height: 44px !important;
    }

    /* Language toggle button */
    .lang-toggle {
        min-height: 44px !important;
        padding: 0.625rem 0.875rem !important;
    }

    /* Language dropdown items */
    .lang-item {
        min-height: 44px !important;
        padding: 0.625rem 0.875rem !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Info glass card links */
    .info-glass-card-link {
        display: flex !important;
        min-height: 44px !important;
    }

    /* Competency CTA buttons */
    .competency-btn-clean {
        min-height: 44px !important;
        padding: 0.75rem 1.25rem !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Hero CTA button */
    .btn-ibc,
    .btn.btn-ibc {
        min-height: 48px !important;
        padding: 0.875rem 1.75rem !important;
    }

    /* Hero scroll indicator */
    .hero-scroll-indicator {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Copy e-mail link */
    .copy-email-link {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Social footer icons */
    .social-button-list a {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Footer nav links */
    .footer-nav a,
    .footer-widget a,
    .fat-footer__nav-list a,
    .fat-footer__connect-link {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
    }

    /* Physics / values card (button) */
    .physics-card-wrap {
        min-height: 44px !important;
    }

    /* Competency card trigger */
    .competency-card__trigger {
        min-height: 48px !important;
        padding: 0.875rem 1rem !important;
        width: 100% !important;
    }

    /* Hero video toggle */
    .hero-video-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Cookie consent buttons */
    .cookie-btn,
    .cookie-accept,
    .cookie-decline,
    .cookie-settings {
        min-height: 44px !important;
        padding: 0.625rem 1rem !important;
    }
}


/* ============================================================
   3. Z-PATTERN CONTENT FLOW – Mobile conversion layout
   ============================================================
   The Z-Pattern describes the way users scan content on a page:
     Line 1  →  (left to right across the top)
     Diagonal ↘  (top-right to bottom-left)
     Line 2  →  (left to right across the bottom)

   On single-column mobile layouts the pattern is applied within
   each content section by alternating icon/visual placement
   (left ↔ right) and positioning CTAs at the end of each Z-leg
   so the user's eye naturally lands on a call-to-action.

   Visual structure on mobile:
   ┌──────────────────────────────────────┐
   │  [Icon/Badge LEFT]   Heading text    │  ← Z top sweep →
   │  Body copy paragraph                 │
   │  [CTA button – full width]           │  ← end of 1st Z-leg
   ├──────────────────────────────────────┤
   │  Heading text    [Icon/Badge RIGHT]  │  ← diagonal ↘
   │  Body copy paragraph                 │
   │  [CTA button – full width]           │  ← end of diagonal
   ├──────────────────────────────────────┤
   │  [Icon/Badge LEFT]   Heading text    │  ← Z bottom sweep →
   │  Body copy paragraph                 │
   │  [CTA button – full width]           │  ← primary conversion
   └──────────────────────────────────────┘
   ============================================================ */

/* ---- 3a. Info-cards section – stacked column layout on mobile ---- */

@media (max-width: 767px) {

    /* Cards use a vertical (column) layout so all content is readable
       and nothing overflows outside the card boundary */
    .info-glass-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 1.5rem;
    }

    .info-cards-section .row.g-4 > .col-lg-4 .info-glass-card,
    .info-cards-section .row.g-4 > .col-md-6 .info-glass-card,
    .info-cards-section .row.g-4 > .col-md-12 .info-glass-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    /* Icon box – fixed size so layout is stable */
    .info-cards-section .info-icon-box {
        flex-shrink: 0;
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
    }
}

/* ---- 3b. Competency cards – Horizontal swipe carousel on mobile ---- */

@media (max-width: 767px) {

    /* Default: vertical stack when JS hasn't added .swipe-carousel */
    .competencies-cards-grid {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        gap: 12px !important;
        padding: 0 !important;
    }

    /* Horizontal swipe carousel (activated by JS on mobile) */
    .competencies-cards-grid.swipe-carousel {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important; /* allow horizontal swipe, let browser handle vertical page scroll */
        gap: 0 !important;
        padding: 4px 20px 20px !important;
        scroll-padding-left: 20px;
        scrollbar-width: none; /* Firefox */
        /* Full-bleed negative margins are applied in index.css using
           calc(100% + 2rem) width so they match the container's 1rem
           padding that is set in mobile-first.css §5.                 */
    }
    .competencies-cards-grid.swipe-carousel::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    /* Each card as a carousel slide – 80% wide with 15% peek of next card */
    .competencies-cards-grid.swipe-carousel .competency-card {
        flex: 0 0 82% !important;
        min-width: 0 !important;
        max-width: 82% !important;
        width: 82% !important;
        box-sizing: border-box !important;
        scroll-snap-align: start !important;
        overflow: hidden !important;
        margin-right: 14px !important;
        border-radius: 22px !important;
        box-shadow:
            0 4px 12px rgba(32, 35, 74, 0.08),
            0 12px 32px rgba(32, 35, 74, 0.10),
            0 1px 3px rgba(32, 35, 74, 0.06) !important;
        transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1),
                    box-shadow 0.4s ease !important;
    }
    .competencies-cards-grid.swipe-carousel .competency-card:last-child {
        margin-right: 20px !important;
    }

    /* Active card (currently visible in the carousel) pops forward.
       Uses .is-carousel-active, which is toggled by JS on scroll,
       independently of the accordion .is-active state. */
    .competencies-cards-grid.swipe-carousel .competency-card.is-carousel-active {
        transform: scale(1.01) !important;
        box-shadow:
            0 6px 20px rgba(32, 35, 74, 0.12),
            0 20px 48px rgba(32, 35, 74, 0.14),
            0 0 0 1.5px rgba(109, 151, 68, 0.18) !important;
    }

    /* Off-screen cards recede slightly to create depth / peek effect */
    .competencies-cards-grid.swipe-carousel .competency-card:not(.is-carousel-active) {
        transform: scale(0.97);
        opacity: 0.95;
    }

    /* Non-carousel fallback card styles */
    .competencies-cards-grid:not(.swipe-carousel) .competency-card {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        scroll-snap-align: none !important;
        overflow: hidden !important;
    }

    /* Uniform trigger padding */
    .competencies-cards-grid .competency-card__trigger {
        padding: 1.125rem 1.25rem !important;
        width: 100% !important;
    }

    /* Accordion content padding */
    .competencies-cards-grid .competency-card__content {
        padding: 0 1.25rem 1.25rem 1.25rem !important;
    }

    /* Image wrapper: full width, slightly shorter on mobile */
    .competencies-cards-grid .competency-card .competency-card__image-wrapper {
        width: 100% !important;
        min-width: unset !important;
        order: unset !important;
        aspect-ratio: 16 / 9 !important;
    }

    /* Text areas: full width */
    .competencies-cards-grid .competency-card .competency-card__heading,
    .competencies-cards-grid .competency-card .competency-card__content {
        width: 100% !important;
    }

    /* CTA buttons – full width */
    .competencies-cards-grid .competency-btn-clean {
        display: flex !important;
        width: 100% !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.875rem 1.25rem !important;
        margin-top: 8px !important;
    }

    /* ── Carousel navigation: counter + dots ── */
    .competency-carousel-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 20px 0 4px;
    }
    .competency-carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 1.5px solid rgba(32, 35, 74, 0.30);
        background: rgba(32, 35, 74, 0.12);
        padding: 0;
        cursor: pointer;
        transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        flex-shrink: 0;
        position: relative;
    }
    /* Outer glow ring on active dot */
    .competency-carousel-dot.is-active::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50px;
        border: 1.5px solid rgba(109, 151, 68, 0.45);
        pointer-events: none;
    }
    .competency-carousel-dot.is-active {
        background: var(--ibc-green, #6D9744);
        border-color: var(--ibc-green, #6D9744);
        width: 28px;
        border-radius: 6px;
        box-shadow:
            0 2px 8px rgba(109, 151, 68, 0.50),
            0 0 0 3px rgba(109, 151, 68, 0.15);
    }
    .competency-carousel-dot:hover:not(.is-active) {
        background: rgba(32, 35, 74, 0.30);
        border-color: rgba(32, 35, 74, 0.50);
        transform: scale(1.2);
    }

    /* Swipe hint – styled, visibility controlled by JS */
    .competency-carousel-hint {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        font-size: 0.76rem;
        color: rgba(32, 35, 74, 0.4);
        letter-spacing: 0.03em;
        padding: 4px 0 0;
        margin: 0;
    }
    .competency-carousel-hint .fa-hand-pointer {
        font-size: 0.85rem;
        animation: carousel-hint-pulse 2s ease-in-out infinite;
    }
    @keyframes carousel-hint-pulse {
        0%, 100% { transform: translateX(0); opacity: 0.6; }
        50% { transform: translateX(5px); opacity: 1; }
    }

    /* Card counter badge (rendered by JS) */
    .competency-carousel-counter {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        color: rgba(32, 35, 74, 0.45);
        text-transform: uppercase;
        padding-top: 6px;
        gap: 4px;
    }
    .competency-carousel-counter .current {
        color: var(--ibc-blue, #20234A);
        font-weight: 700;
    }
}

/* ---- 3c. Values / physics cards – clean vertical stack on mobile ---- */

@media (max-width: 767px) {

    /* Values row: single column, full-width cards */
    #valuesSection .row.g-4 > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Consistent column layout for all cards */
    .physics-card-wrap .physics-card-content {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Reset any row-reverse alternation */
    .physics-card-wrap:nth-child(even) .physics-card-content {
        flex-direction: column;
    }

    .physics-card-wrap .physics-icon-box {
        flex-shrink: 0;
        margin-bottom: 0.5rem;
    }

    /* Full-width button */
    .physics-card-wrap {
        width: 100%;
        display: block;
        text-align: left;
    }
}

/* ---- 3d. Hero section – full viewport, thumb-friendly CTA ---------- */

@media (max-width: 767px) {

    /* Hero fills viewport height, content centred */
    #hero-section {
        min-height: 100svh;
        min-height: 100vh; /* fallback */
    }

    /* Glass panel fills most of the viewport width */
    #hero-section .hero-glass-panel {
        padding: 1.5rem 1.25rem 1.75rem !important;
        margin: 0 8px !important;
        max-width: calc(100vw - 16px) !important;
    }

    /* CTA button – full width, thumb-friendly */
    #hero-section .btn-ibc {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 16px !important;
        font-size: 1rem !important;
        padding: 0.9rem 1.25rem !important;
        min-height: 52px !important;
    }

    /* Hero title: use a compact clamp so it never wraps awkwardly */
    #hero-section .hero-title {
        font-size: clamp(1.9rem, 8vw, 2.8rem) !important;
        line-height: 1.1 !important;
    }

    /* Badge: smaller on very narrow screens */
    .hero-eyebrow-badge {
        font-size: clamp(0.72rem, 2.8vw, 0.85rem) !important;
    }
}

/* ---- 3e. Info-section cards – clean stacked layout on mobile ------- */

@media (max-width: 767px) {

    /* All info-card columns: full-width stack */
    .info-cards-section .row.g-4 > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Cards stretch to fill the column */
    .info-glass-card-link,
    .info-glass-card {
        width: 100% !important;
    }

    /* Always show the CTA arrow – hover is not available on touch */
    .info-glass-card .info-link-arrow {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* All card CTAs: comfortable tap targets */
    .info-link-arrow {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
}

/* ---- 3f. Pre-Footer "Projekt Starten" CTA – enhanced mobile design ---- */

@media (max-width: 767px) {
    .fat-footer__cta {
        background: linear-gradient(135deg, var(--ibc-blue, #20234A) 0%, #2a2d5a 50%, var(--ibc-blue, #20234A) 100%);
        border-bottom: none;
        position: relative;
        overflow: hidden;
    }
    .fat-footer__cta::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -30%;
        width: 260px;
        height: 260px;
        background: radial-gradient(circle, rgba(109, 151, 68, 0.15) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }
    .fat-footer__cta-inner {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 2.5rem 1.5rem !important;
        gap: 1.25rem !important;
        position: relative;
        z-index: 1;
    }
    .fat-footer__cta-heading {
        font-size: clamp(1.4rem, 5.5vw, 1.75rem) !important;
        line-height: 1.25 !important;
    }
    .fat-footer__cta-sub {
        font-size: 0.95rem !important;
        opacity: 0.85;
    }
    .fat-footer__cta-btn.ethereal-button {
        width: 100% !important;
        text-align: center !important;
        padding: 1rem 2rem !important;
        font-size: 1.05rem !important;
        min-height: 52px;
        border-radius: 14px !important;
        box-shadow: 0 4px 20px rgba(109, 151, 68, 0.3);
    }
}


/* ============================================================
   4. MOBILE STICKY CTA (TOAST POP-UP)
   ============================================================
   A premium "Projekt anfragen" CTA toast pop-up shown after
   15 seconds. Premium glass-morphism design with IBC brand
   colours, gradient accent bar, and smooth animations.
   ============================================================ */

#mobile-sticky-cta {
    display: none; /* hidden by default; shown via JS after 15 s */
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    left: 20px;
    right: auto;
    z-index: 9999;
    /* Premium card: solid white base + subtle glass shimmer */
    background: #ffffff;
    border-radius: 20px;
    max-width: 300px;
    width: calc(100vw - 40px);
    overflow: hidden;
    /* Layered depth shadow */
    box-shadow:
        0 2px 8px rgba(32, 35, 74, 0.08),
        0 8px 24px rgba(32, 35, 74, 0.14),
        0 24px 48px rgba(32, 35, 74, 0.12),
        0 0 0 1px rgba(109, 151, 68, 0.12);
    opacity: 1;
    transform: translateX(0) translateY(0);
    transition: opacity 0.45s cubic-bezier(.4, 0, .2, 1),
                transform 0.45s cubic-bezier(.4, 0, .2, 1),
                box-shadow 0.3s ease;
    will-change: transform, opacity;
}

/* Accent gradient bar at the top */
#mobile-sticky-cta::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--ibc-green, #6D9744) 0%,
        #52c234 40%,
        var(--ibc-blue, #20234A) 100%
    );
    border-radius: 20px 20px 0 0;
}

/* Slide off the left edge when hidden */
#mobile-sticky-cta.is-hidden {
    opacity: 0;
    transform: translateX(calc(-100% - 40px)) translateY(0);
}

/* Inner padding area */
#mobile-sticky-cta .mobile-cta-inner {
    padding: 1rem 1.125rem 1.125rem;
}

/* Header row: icon + label left, close button right */
#mobile-sticky-cta .mobile-cta-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0.75rem;
}

/* Rocket icon – purely decorative, hidden from assistive technology */
#mobile-sticky-cta .mobile-cta-icon {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

#mobile-sticky-cta .mobile-cta-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--ibc-blue, #20234A);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    flex: 1;
    line-height: 1.2;
}

#mobile-sticky-cta .mobile-cta-close {
    flex-shrink: 0;
    /* Interactive area ≥ 44×44 px (WCAG 2.5.5) */
    width: 36px;
    height: 36px;
    padding: 0;
    box-sizing: border-box;
    background: rgba(32, 35, 74, 0.08);
    border: 1.5px solid rgba(32, 35, 74, 0.18);
    cursor: pointer;
    color: rgba(32, 35, 74, 0.65);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    box-shadow: 0 1px 4px rgba(32, 35, 74, 0.08);
}

#mobile-sticky-cta .mobile-cta-close:hover,
#mobile-sticky-cta .mobile-cta-close:focus-visible {
    background: rgba(32, 35, 74, 0.14);
    border-color: rgba(32, 35, 74, 0.35);
    color: var(--ibc-blue, #20234A);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 2px 8px rgba(32, 35, 74, 0.15);
    outline: none;
}
#mobile-sticky-cta .mobile-cta-close:active {
    transform: rotate(90deg) scale(0.92);
    box-shadow: none;
}

/* Tagline / sub-copy */
#mobile-sticky-cta .mobile-cta-tagline {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ibc-blue, #20234A);
    line-height: 1.35;
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}

#mobile-sticky-cta .mobile-cta-sub {
    font-size: 0.8rem;
    color: rgba(32, 35, 74, 0.55);
    line-height: 1.4;
    margin: 0 0 1rem;
}

/* CTA action button */
#mobile-sticky-cta .mobile-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    text-align: center;
    padding: 0.85rem 1.25rem;
    min-height: 48px;
    border-radius: 50px;
    background: linear-gradient(
        135deg,
        var(--ibc-green, #6D9744) 0%,
        #52c234 55%,
        #3da832 100%
    );
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow:
        0 4px 16px rgba(109, 151, 68, 0.40),
        0 1px 4px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s cubic-bezier(.4,0,.2,1),
                box-shadow 0.25s cubic-bezier(.4,0,.2,1),
                filter 0.25s ease;
    position: relative;
    overflow: hidden;
}

/* Shine sweep on the button */
#mobile-sticky-cta .mobile-cta-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.25) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    pointer-events: none;
}

#mobile-sticky-cta .mobile-cta-btn:hover::after,
#mobile-sticky-cta .mobile-cta-btn:focus-visible::after {
    transform: translateX(100%);
}

#mobile-sticky-cta .mobile-cta-btn:hover,
#mobile-sticky-cta .mobile-cta-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 8px 28px rgba(109, 151, 68, 0.50),
        0 2px 8px rgba(0, 0, 0, 0.18);
    filter: brightness(1.04);
}

#mobile-sticky-cta .mobile-cta-btn:active {
    transform: translateY(0) scale(0.97);
    filter: brightness(0.97);
}

/* Arrow icon inside CTA button */
#mobile-sticky-cta .mobile-cta-btn .mobile-cta-arrow {
    font-style: normal;
    font-size: 1.05rem;
    transition: transform 0.2s ease;
}
#mobile-sticky-cta .mobile-cta-btn:hover .mobile-cta-arrow {
    transform: translateX(3px);
}

/* Extra-small screens: tighten margins (left-side positioning preserved) */
@media (max-width: 380px) {
    #mobile-sticky-cta {
        left: 12px;
        right: auto;
        bottom: 16px;
        max-width: calc(100vw - 24px);
        width: calc(100vw - 24px);
    }
}


/* ============================================================
   5. GENERAL MOBILE-FIRST IMPROVEMENTS
   ============================================================ */

/* Smooth scroll and section rhythm for narrow viewports */
@media (max-width: 767px) {
    html {
        scroll-behavior: smooth;
    }

    /* Section vertical rhythm */
    .competencies-section,
    .info-cards-section,
    .physics-values-section,
    .stats-section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Prevent horizontal overflow without creating scroll containers.
       overflow:clip clips both axes without establishing a scroll container,
       so the CSS-spec interaction (overflow-x:hidden forcing overflow-y:auto)
       does not apply – sections stay non-scrollable.
       Both axes are intentionally clipped: decorative pseudo-element blobs
       (::before/::after) that extend past the section boundary should not
       be visible on mobile. */
    /* Prevent horizontal overflow from creating scrollbars.
       overflow-x: clip is used instead of hidden so that the CSS spec
       interaction rule (hidden + visible → visible computed as auto) does NOT
       fire and the section never becomes an unintended scroll container on
       iOS/mobile.  Fallback: older browsers that do not support clip fall back
       to the first declaration (hidden), which is fine for desktop/older OS. */
    .competencies-section,
    .info-cards-section,
    .physics-values-section,
    .stats-section {
        overflow-x: hidden !important;   /* fallback for browsers without clip */
        overflow-x: clip !important;     /* modern: clip without scroll context */
        overflow-y: visible !important;
    }
    .competency-card,
    .info-glass-card,
    .physics-card,
    .stat-card {
        overflow: hidden !important;
    }

    /* Section wave dividers: don't overflow viewport */
    .section-wave-divider {
        overflow: hidden;
        max-width: 100vw;
    }

    /* Container padding on very narrow viewports */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Hero section: fit content to viewport */
    #hero-section .container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    #hero-section h1 {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
        line-height: 1.15 !important;
        word-break: break-word;
    }
    #hero-section .fs-5 {
        font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important;
        line-height: 1.5 !important;
    }

    /* Stats cards: prevent number overflow */
    .stat-number {
        font-size: clamp(2rem, 8vw, 2.75rem) !important;
        overflow-wrap: break-word;
    }
    .stat-card {
        padding: 1.25rem 1rem !important;
    }

    /* Info glass cards: proper content sizing */
    .info-glass-card {
        padding: 1.5rem 1.25rem !important;
    }
    .info-glass-card h2 {
        font-size: clamp(1.1rem, 4vw, 1.3rem) !important;
        line-height: 1.3 !important;
    }
    .info-glass-card p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    /* Values/Physics cards: prevent text overflow */
    .physics-card-content h3 {
        font-size: clamp(1rem, 4vw, 1.25rem) !important;
        line-height: 1.3 !important;
    }
    .physics-card-content p {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
    }

    /* Footer content sizing */
    .fat-footer__tagline,
    .fat-footer__nav-list a,
    .fat-footer__connect-text {
        font-size: 0.875rem !important;
    }

    /* Prevent images from overflowing */
    img,
    video {
        max-width: 100%;
        height: auto;
    }

    /* Competency card images in carousel */
    .competency-card__image {
        width: 100% !important;
        height: auto !important;
        object-fit: cover;
    }
}


/* ============================================================
   6. FLOATING ACTION BUTTON (FAB) – Mobile Navigation
   ============================================================
   On mobile, once the user has scrolled past the navbar, the
   hamburger toggler is hidden and a circular FAB appears in the
   bottom-right corner.  Tapping the FAB opens a full-screen
   overlay menu for comfortable one-handed navigation.
   ============================================================ */

/* Hide hamburger toggler when FAB is active */
@media (max-width: 1199px) {
    body.fab-active .navbar-toggler {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.25s ease !important;
    }
}

/* FAB button */
#nav-fab {
    display: none; /* shown via JS */
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    z-index: 10001; /* above navbar (10000) */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--green, #6D9744) 0%,
        var(--accent, #3481b9) 100%
    );
    border: none;
    cursor: pointer;
    box-shadow:
        0 6px 20px rgba(52, 129, 185, 0.40),
        0 2px 6px  rgba(32, 35, 74, 0.15);
    transition:
        transform 0.3s var(--ease-smooth, cubic-bezier(.4,0,.2,1)),
        box-shadow 0.3s var(--ease-smooth, cubic-bezier(.4,0,.2,1)),
        opacity 0.3s ease;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

#nav-fab:hover,
#nav-fab:focus-visible {
    transform: scale(1.1) translateY(-2px);
    box-shadow:
        0 10px 28px rgba(52, 129, 185, 0.50),
        0 4px 10px  rgba(32, 35, 74, 0.15);
    outline: none;
}

#nav-fab:active {
    transform: scale(0.95);
}

#nav-fab.is-visible {
    display: flex !important;
}

#nav-fab.menu-open {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.40), 0 2px 6px rgba(32, 35, 74, 0.15);
}

/* FAB icon – animated hamburger ↔ X */
#nav-fab .fab-icon {
    position: relative;
    width: 22px;
    height: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#nav-fab .fab-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center center;
}

#nav-fab.menu-open .fab-icon span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

#nav-fab.menu-open .fab-icon span:nth-child(2) {
    opacity: 0;
}

#nav-fab.menu-open .fab-icon span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Full-screen overlay menu */
#fab-overlay-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000; /* same as navbar so it covers the full screen */
    background: rgba(20, 24, 55, 0.97);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.35s var(--ease-smooth, cubic-bezier(.4,0,.2,1));
    overflow-y: auto;
    padding: 3.75rem 1.5rem calc(3.75rem + env(safe-area-inset-bottom, 0px)); /* env() returns px; calc() handles mixed rem+px */
}

#fab-overlay-menu.is-open {
    display: flex !important;
    opacity: 1;
}

/* Nav list in overlay */
#fab-overlay-menu .fab-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%;
    max-width: 340px;
}

#fab-overlay-menu .fab-nav-list li {
    margin: 0;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

#fab-overlay-menu.is-open .fab-nav-list li {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger entrance animation – links are at odd positions (1,3,5,7,9,11,13) */
#fab-overlay-menu.is-open .fab-nav-list li:nth-child(1)  { transition-delay: 0.05s; }
#fab-overlay-menu.is-open .fab-nav-list li:nth-child(2)  { transition-delay: 0.08s; }
#fab-overlay-menu.is-open .fab-nav-list li:nth-child(3)  { transition-delay: 0.12s; }
#fab-overlay-menu.is-open .fab-nav-list li:nth-child(4)  { transition-delay: 0.15s; }
#fab-overlay-menu.is-open .fab-nav-list li:nth-child(5)  { transition-delay: 0.18s; }
#fab-overlay-menu.is-open .fab-nav-list li:nth-child(6)  { transition-delay: 0.22s; }
#fab-overlay-menu.is-open .fab-nav-list li:nth-child(7)  { transition-delay: 0.25s; }
#fab-overlay-menu.is-open .fab-nav-list li:nth-child(8)  { transition-delay: 0.28s; }
#fab-overlay-menu.is-open .fab-nav-list li:nth-child(9)  { transition-delay: 0.32s; }
#fab-overlay-menu.is-open .fab-nav-list li:nth-child(10) { transition-delay: 0.35s; }
#fab-overlay-menu.is-open .fab-nav-list li:nth-child(11) { transition-delay: 0.38s; }
#fab-overlay-menu.is-open .fab-nav-list li:nth-child(12) { transition-delay: 0.42s; }
#fab-overlay-menu.is-open .fab-nav-list li:nth-child(13) { transition-delay: 0.45s; }
#fab-overlay-menu.is-open .fab-nav-list li:nth-child(14) { transition-delay: 0.48s; }
#fab-overlay-menu.is-open .fab-nav-list li:nth-child(15) { transition-delay: 0.50s; }

#fab-overlay-menu .fab-nav-list a {
    padding: 1.125rem 1.5rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    letter-spacing: 0.01em;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#fab-overlay-menu .fab-nav-list a:hover,
#fab-overlay-menu .fab-nav-list a:focus-visible {
    background: rgba(109, 151, 68, 0.18);
    color: var(--green, #6D9744);
    transform: scale(1.02);
    outline: none;
}

#fab-overlay-menu .fab-nav-list a:active {
    transform: scale(0.97);
}

/* Divider between nav links */
#fab-overlay-menu .fab-nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 4px 24px;
}

/* Language switcher row in overlay */
#fab-overlay-menu .fab-lang-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 24px;
    opacity: 0;
    transition: opacity 0.3s ease 0.4s;
}

#fab-overlay-menu.is-open .fab-lang-row {
    opacity: 1;
}

#fab-overlay-menu .fab-lang-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease;
    min-height: 44px;
    cursor: pointer;
}

#fab-overlay-menu .fab-lang-btn:hover,
#fab-overlay-menu .fab-lang-btn:focus-visible {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    outline: none;
}

#fab-overlay-menu .fab-lang-btn img {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
}

/* IBC logo in overlay header – hidden in mobile/responsive expanded menu */
#fab-overlay-menu .fab-overlay-logo {
    display: none;
}

/* Hide navbar toggler when FAB is shown (FAB sits at bottom-right) */
body.fab-active .navbar-toggler {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}


/* Only show FAB/overlay on mobile */
@media (min-width: 1200px) {
    #nav-fab,
    #fab-overlay-menu {
        display: none !important;
    }
}

/* ============================================================
   §MOBILE-ANIM  Mobile Animation Improvements – index.html
   All desktop/non-responsive CSS stays unchanged above.
   These rules only adapt animations and interactions for
   touch screens and small viewports.
   ============================================================ */

/* ── Mobile adjustments (≤ 768 px): font sizes, animations & performance ── */
@media (max-width: 768px) {
    /* Font sizes ----------------------------------------------------- */
    /* Slightly larger base font for readability */
    body {
        font-size: 16px;
        overflow-x: clip;
    }

    /* Headings scale down gracefully — but not the hero-title which
       has its own wide clamp range for 4K scaling */
    .ibc-heading:not(.hero-title) {
        font-size: clamp(1.5rem, 5.5vw, 2.2rem) !important;
        line-height: 1.2 !important;
    }

    .ibc-lead {
        font-size: clamp(0.9rem, 3.2vw, 1.1rem) !important;
    }

    /* 1. Hero eyebrow dot: limit pulse to a few iterations on mobile
          to reduce distraction on small screens */
    .hero-eyebrow-dot {
        animation-duration: 1.5s;
        animation-iteration-count: 3;
    }

    /* 2. Info cards: faster stagger entrance on mobile */
    .info-stagger-in {
        transition-duration: 0.4s;
    }

    /* 3. Hide ambient blobs on mobile for performance */
    .info-ambient-blob,
    .physics-ambient-layer,
    .competencies-ambient-layer {
        display: none !important;
    }

    /* 4. Stats section: pause floating blob animations on mobile */
    .stats-section::before,
    .stats-section::after {
        animation-play-state: paused;
    }

    /* 5. Reduce or eliminate heavy parallax / transform stacks on mobile */
    .hero-blur-orb {
        animation-duration: 8s;
        opacity: 0.4;
    }

    /* 6. Reveal-fx: shorter, simpler entrance on mobile */
    .reveal-fx {
        transition: opacity 0.45s ease, transform 0.45s ease !important;
        transition-delay: 0s !important;
    }

    /* 7. Stagger delays: compress for snappier UX on mobile */
    [class*="delay-"] {
        transition-delay: 0s !important;
        animation-delay: 0s !important;
    }

    /* 8. Stats counter animation: shorter duration on mobile */
    .counter-animated {
        /* counters handled via JS – CSS only removes extra transition cost */
    }
}

/* ── 5. Touch-device interaction improvements ── */
@media (hover: none) {
    /* ── 5a. Stat cards: tap feedback ── */
    .stats-section .stat-card:active {
        transform: scale(0.97) translateZ(0);
        transition: transform 0.1s ease;
    }

    /* ── 5b. Info glass cards: always show the CTA arrow (it is
              opacity:0 by default and only revealed via :hover,
              which is unreachable on touch devices) + tap feedback ── */
    .info-glass-card .info-link-arrow {
        opacity: 1;
        transform: translateY(0);
    }
    .info-glass-card:active {
        transform: scale(0.98) translateZ(0);
        transition: transform 0.12s ease;
    }

    /* ── 5c. Instagram cards: tap feedback ── */
    .instagram-card:active {
        transform: scale(0.97) translateZ(0);
        transition: transform 0.1s ease;
    }

    /* ── 5d. Info button: tap feedback ── */
    .info-btn:active {
        transform: scale(0.9);
        background-color: var(--ibc-green, #6D9744);
        color: var(--ibc-white, #ffffff);
    }

    /* ── 5e. Competency cards: tap feedback ── */
    .competency-card__trigger:active {
        background: rgba(32, 35, 74, 0.06) !important;
        transition: background 0.1s ease !important;
    }

    /* ── 5f. Physics/values cards: tap feedback ── */
    .physics-card-wrap:active .physics-card {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
}


/* ============================================================
   §6  GLOBAL RENDERING FIXES
   (Consolidated from responsive-improvements.css)

   §6a  iOS text-size-adjust – prevents font scaling on rotation
   §6b  Responsive images – safe scaling within container
   §6c  Flexbox gap fallback – flex-wrap and margin-based gap
        for Safari 13 and older browsers without native gap
   ============================================================ */

/* §6a  iOS Text Size Adjustment */
body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* §6b  Responsive Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* §6c  Flexbox gap fallback */
:root {
    --flex-gap: 1.5rem;
}

[class*="flex"] {
    flex-wrap: wrap;
}

.flex-gap,
.flex-row,
.cards-grid,
.features-grid,
.team-grid,
.stats-grid,
.logos-grid,
.partners-grid,
.services-grid,
.benefits-grid,
.process-steps,
.contact-grid,
.nav-links,
.footer-grid,
.footer-columns {
    display: flex;
    flex-wrap: wrap;
    margin: calc(var(--flex-gap) / -2);
}

.flex-gap > *,
.flex-row > *,
.cards-grid > *,
.features-grid > *,
.team-grid > *,
.stats-grid > *,
.logos-grid > *,
.partners-grid > *,
.services-grid > *,
.benefits-grid > *,
.process-steps > *,
.contact-grid > *,
.nav-links > *,
.footer-grid > *,
.footer-columns > * {
    margin: calc(var(--flex-gap) / 2);
}

@supports (gap: 1px) {
    .flex-gap,
    .flex-row,
    .cards-grid,
    .features-grid,
    .team-grid,
    .stats-grid,
    .logos-grid,
    .partners-grid,
    .services-grid,
    .benefits-grid,
    .process-steps,
    .contact-grid,
    .nav-links,
    .footer-grid,
    .footer-columns {
        margin: 0;
    }

    .flex-gap > *,
    .flex-row > *,
    .cards-grid > *,
    .features-grid > *,
    .team-grid > *,
    .stats-grid > *,
    .logos-grid > *,
    .partners-grid > *,
    .services-grid > *,
    .benefits-grid > *,
    .process-steps > *,
    .contact-grid > *,
    .nav-links > *,
    .footer-grid > *,
    .footer-columns > * {
        margin: 0;
    }
}