/* Pabst Patent Group — hand-written overrides that replace what Swiper/jcf/GSAP used
   to provide via inline styles. Loaded after the compiled main.min.css. */

/* --- Header stacking fix (pre-existing main.css z-index collision) ---
   .o-header has z-index:10, and so does .c-hero__slide-inner (deep inside the hero, on a
   completely separate branch) -- neither .js-hero-slider/.swiper-wrapper/.swiper-slide/
   .c-hero__slide nor .c-hero itself creates its own stacking context (all position:relative,
   z-index:auto), so .c-hero__slide-inner's z-index:10 bubbles all the way up and ties directly
   against .o-header's z-index:10 at the root. On a tie, later DOM order wins, and .c-hero comes
   after .o-header in the document -- so the hero silently painted on top of the ENTIRE header,
   including everything nested inside it (mobile nav drawer, its dimming overlay), regardless of
   any z-index set locally on those nested elements. Confirmed via elementFromPoint() and
   reproduced with this file's changes fully reverted, so this is a genuine pre-existing bug in
   main.css, not something introduced by any override here. Bumped to comfortably clear that
   collision (and any other stray z-index:10 elsewhere) while staying below .c-search's
   z-index:110, so the search overlay still correctly covers the header as before. */
.o-header {
    z-index: 50;
}

/* --- Home hero slide nav clickability (same z-index:10 collision as above) ---
   main.css gives .c-hero__nav z-index:9 and .c-hero__slide-inner z-index:10. slide-inner's BOX
   starts at the hero's left gutter (width:100%/max-width:80% with padding-left:400px), so its
   padding covers the whole nav column even though its visible text begins ~400px to the right --
   and as documented above, neither element sits in its own stacking context, so those two
   z-indexes compete directly and 10 wins.
   On live this never surfaced: Swiper owned the slides there, and its stylesheet kept inactive
   slides out of the hit-test. This port replaced Swiper with initFadeSliders() and kept the
   captured CSS as-is, so nothing lifts the nav above the slide box any more. Every click on
   ABOUT / CLIENTS / TECHNOLOGIES landed on .c-hero__slide-inner instead -- verified with capture
   listeners: pointerdown, mousedown, mouseup and click all targeted it, and the active slide
   never changed. (A programmatic .click() still worked, which is why the suite never caught it.)
   Raising only the container is safe: it keeps main.css's pointer-events:none, so it stays
   transparent to clicks aimed at the slide's own CTA links -- only .c-hero__nav-btn, which sets
   pointer-events:all, actually takes them. Stays well below .o-header's 50. */
.c-hero__nav {
    z-index: 11;
}

/* --- Header search panel (was GSAP: opacity/visibility/translateY) --- */
.c-search {
    transition: opacity .4s ease, visibility .4s ease, transform .4s cubic-bezier(.25, .1, .25, 1);
}
.c-search.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- Mobile nav drawer (was GSAP: opacity/visibility + translateX) --- */
.c-mobilenav {
    transition: opacity .4s ease, visibility .4s ease;
}
.c-mobilenav.is-active {
    opacity: 1;
    visibility: visible;
}
.c-mobilenav__nav {
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.25, .1, .25, 1);
}
.c-mobilenav.is-active .c-mobilenav__nav {
    transform: translateX(0);
}
.c-mobilenav__menu {
    transition: transform .4s cubic-bezier(.25, .1, .25, 1);
}
.c-mobilenav__btn-back {
    transition: opacity .3s ease, visibility .3s ease;
}
.c-mobilenav__nav.has-subnav-open .c-mobilenav__btn-back {
    opacity: 1;
    visibility: visible;
}

/* --- Sliders (replaces Swiper's base track/positioning CSS) --- */
.swiper-container {
    position: relative;
    overflow: hidden;
}
.js-slider-fade > .swiper-wrapper > .swiper-slide {
    display: none;
}
.js-slider-fade > .swiper-wrapper > .swiper-slide.is-active {
    display: block;
}

/* Home hero: crossfade between slides (was Swiper effect:'fade', fadeEffect:{crossFade:true},
   speed 1200ms desktop / 600ms mobile -- see legacy HeroScroll.js). Scoped to .js-hero-slider
   (not the generic .js-slider-fade rule above) so Quote/Values sliders, which use the same
   display:none/block toggle, are untouched. The active slide stays in normal flow (position:
   relative) so it alone drives the wrapper's height, exactly like the display:none/block
   version above -- inactive slides are pulled out of flow (position:absolute, inset:0) and
   stacked over it, invisible until their own opacity transitions in. */
.js-hero-slider > .swiper-wrapper {
    position: relative;
    min-height: 100vh;
}
.js-hero-slider > .swiper-wrapper > .swiper-slide {
    display: block;
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .6s ease, visibility .6s ease;
}
.js-hero-slider > .swiper-wrapper > .swiper-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
@media (min-width: 901px) {
    .js-hero-slider > .swiper-wrapper > .swiper-slide {
        transition-duration: 1.2s;
    }
}

/* Audience slider keeps its own mobile accordion (all slides visible, stacked) */
@media (max-width: 900px) {
    .o-slider__main .js-slider-fade > .swiper-wrapper > .swiper-slide {
        display: block;
    }
    .o-slider__main .o-slider__slide-container {
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }
    .o-slider__main .swiper-slide.is-open .o-slider__slide-container {
        max-height: 2000px;
    }
}

.swiper-pagination-bullet {
    display: inline-block;
    cursor: pointer;
}
.swiper-pagination.is-hidden {
    display: none;
}

/* Logo slider (replaces Swiper slidesPerView 1/2/3 responsive track) */
.js-slider-scroll > .swiper-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.js-slider-scroll > .swiper-wrapper::-webkit-scrollbar {
    display: none;
}
.js-slider-scroll > .swiper-wrapper > .swiper-slide {
    flex: 0 0 100%;
}
@media (min-width: 601px) {
    .js-slider-scroll > .swiper-wrapper > .swiper-slide {
        flex: 0 0 50%;
    }
}
@media (min-width: 901px) {
    .js-slider-scroll > .swiper-wrapper > .swiper-slide {
        flex: 0 0 33.3333%;
    }
}

/* --- Native <select> (replaces jcf's custom dropdown skin, .jcf-select in CF's
   main.css) -- jcf wrapped the native select in styled divs; going native-only
   means the same look (border, font, padding, background) has to live on the
   <select> itself instead, not just the arrow icon swap that was here before. --- */
select.js-select-dropdown {
    display: block;
    width: 100%;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    font-family: "montserrat", sans-serif;
    color: #000;
    background-color: #fff;
    border: 1px solid #999;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 14px 40px 14px 10px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23425563' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
}

/* --- Image zoom-on-hover (was GSAP scale tween) --- */
.js-img-zoom-element {
    transition: transform .5s ease;
}
.js-img-zoom:hover .js-img-zoom-element {
    transform: scale(1.1);
}

/* --- Header nav dropdown stagger fade-in (was a GSAP staggerTo timeline) --- */
.js-stagger-links li {
    opacity: 0;
    transition: opacity .3s ease;
}
.js-stagger-links:hover li,
.js-stagger-links:focus-within li {
    opacity: 1;
}
.js-stagger-links li:nth-child(1) { transition-delay: .05s; }
.js-stagger-links li:nth-child(2) { transition-delay: .1s; }
.js-stagger-links li:nth-child(3) { transition-delay: .15s; }
.js-stagger-links li:nth-child(4) { transition-delay: .2s; }
.js-stagger-links li:nth-child(5) { transition-delay: .25s; }

/* Home hero title/links: fade + rise in when their slide becomes active (was a GSAP
   staggerElements() timeline in HeroScroll.js: y:+/-60 -> 0, autoAlpha 0 -> 1, staggered
   0.1s apart, desktop only -- isMobile() === false). Mobile gets no transform/entrance
   delay at all in CF (it just relies on Swiper's touch swipe), so this is scoped to the
   same >=901px breakpoint as HeroScroll's own isMobile() check; below it .js-stagger is
   untouched by this rule and stays at its default fully-visible state. */
@media (min-width: 901px) {
    .c-hero .js-stagger {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity .6s ease, transform .6s ease;
    }
    .c-hero .swiper-slide.is-active .js-stagger {
        opacity: 1;
        transform: translateY(0);
    }
    .c-hero .js-stagger.c-hero__slide-title { transition-delay: 0s; }
    .c-hero .js-stagger.c-hero__slide-links { transition-delay: .15s; }
}