/* ==========================================================================
   Innovators page facelift.

   EVERY rule in this file is scoped to .pm-innovators, the wrapper <div>
   around the page body in innovators.php. Nothing here can leak into any
   other page, even if the file is ever loaded site-wide.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Whitespace pass - one vertical rhythm for every section
   -------------------------------------------------------------------------- */
.pm-innovators .section {
    padding: 80px 0;
}

.pm-innovators .innvo__wraper {
    padding: 44px 0 28px;
}

.pm-innovators .testimonial__section {
    padding: 70px 0;
}

.pm-innovators .title {
    margin-bottom: 40px;
    text-align: center;
}

.pm-innovators .title h2,
.pm-innovators .title h3 {
    margin-bottom: 0;
}

/* The card grids carry their gutters as per-card bottom margins; make the
   row gap match the column gap. */
.pm-innovators .sign__up_now_block > .row > .col-md-4,
.pm-innovators .what_pitch_mark .row > .col-md-3 {
    margin-bottom: 30px;
}

@media only screen and (max-width: 1499px) {
    .pm-innovators .section {
        padding: 60px 0;
    }

    .pm-innovators .testimonial__section {
        padding: 55px 0;
    }

    .pm-innovators .title {
        margin-bottom: 32px;
    }
}

@media only screen and (max-width: 767px) {
    .pm-innovators .section {
        padding: 44px 0;
    }

    .pm-innovators .innvo__wraper {
        padding: 32px 0 20px;
    }

    .pm-innovators .testimonial__section {
        padding: 40px 0;
    }

    .pm-innovators .title {
        margin-bottom: 24px;
    }

    .pm-innovators .sign__up_now_block > .row > .col-md-4,
    .pm-innovators .what_pitch_mark .row > .col-md-3 {
        margin-bottom: 20px;
    }
}


/* --------------------------------------------------------------------------
   2. Heading ramp - page title > section title > card title
   -------------------------------------------------------------------------- */
.pm-innovators .banner__content h2 {
    font-size: 44px;
    line-height: 1.2;
}

.pm-innovators .title h2,
.pm-innovators .title h3,
.pm-innovators .defend_right h3 {
    font-size: 30px;
    line-height: 1.35;
}

.pm-innovators h4,
.pm-innovators .sign_up__box h4,
.pm-innovators .whtap__pitch_boc h4,
.pm-innovators .pitch__conttent h4 {
    font-size: 20px;
    line-height: 1.35;
    margin-bottom: 10px;
}

.pm-innovators p {
    line-height: 1.65;
}

@media only screen and (max-width: 1499px) {
    .pm-innovators .banner__content h2 {
        font-size: 36px;
    }

    .pm-innovators .title h2,
    .pm-innovators .title h3,
    .pm-innovators .defend_right h3 {
        font-size: 28px;
    }

    .pm-innovators h4,
    .pm-innovators .sign_up__box h4,
    .pm-innovators .whtap__pitch_boc h4,
    .pm-innovators .pitch__conttent h4 {
        font-size: 19px;
    }
}

@media only screen and (max-width: 991px) {
    .pm-innovators .banner__content h2 {
        font-size: 32px;
    }

    .pm-innovators .title h2,
    .pm-innovators .title h3,
    .pm-innovators .defend_right h3 {
        font-size: 26px;
    }
}

@media only screen and (max-width: 767px) {
    .pm-innovators .banner__content h2 {
        font-size: 30px;
    }

    .pm-innovators .title h2,
    .pm-innovators .title h3,
    .pm-innovators .defend_right h3 {
        font-size: 24px;
    }

    .pm-innovators h4,
    .pm-innovators .sign_up__box h4,
    .pm-innovators .whtap__pitch_boc h4,
    .pm-innovators .pitch__conttent h4 {
        font-size: 18px;
    }
}


/* --------------------------------------------------------------------------
   3. One card surface for every card grid on the page
   -------------------------------------------------------------------------- */
.pm-innovators .sign_up__box,
.pm-innovators .whtap__pitch_boc {
    border: 1px solid #e3edf2;
    border-radius: 12px;
    padding: 28px;
    -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pm-innovators .sign_up__box {
    background-color: #ffffff;
}

/* The "What you can PitchMark" band is white, so its cards take the tint
   instead of the other way round. */
.pm-innovators .whtap__pitch_boc {
    background-color: #f8fcfe;
    margin-bottom: 0;
}

/* Replaces the full-green hover fill, which fought with the body copy. */
.pm-innovators .sign_up__box:hover,
.pm-innovators .sign_up__box.active,
.pm-innovators .whtap__pitch_boc:hover {
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: 0 10px 24px rgba(59, 71, 87, 0.1);
    box-shadow: 0 10px 24px rgba(59, 71, 87, 0.1);
    border-color: #cfe6ef;
}

.pm-innovators .sign_up__box:hover {
    background-color: #ffffff;
}

.pm-innovators .whtap__pitch_boc:hover {
    background-color: #f3fafd;
}

.pm-innovators .sign_up__box:hover h4,
.pm-innovators .sign_up__box.active h4,
.pm-innovators .whtap__pitch_boc:hover h4 {
    color: #7dc43b;
}

.pm-innovators .sign_up__box:hover p,
.pm-innovators .sign_up__box.active p,
.pm-innovators .whtap__pitch_boc:hover p {
    color: inherit;
}

@media only screen and (max-width: 1499px) {
    .pm-innovators .sign_up__box,
    .pm-innovators .whtap__pitch_boc {
        padding: 24px;
    }
}

@media only screen and (max-width: 767px) {
    .pm-innovators .sign_up__box,
    .pm-innovators .whtap__pitch_boc {
        padding: 20px;
    }
}


/* --------------------------------------------------------------------------
   4. Equal-height cards + one uniform icon footprint (84px) page-wide
   -------------------------------------------------------------------------- */
.pm-innovators .sign__up_now_block > .row,
.pm-innovators .what_pitch_mark .row {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.pm-innovators .sign__up_now_block > .row > .col-md-4,
.pm-innovators .what_pitch_mark .col-md-3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.pm-innovators .sign_up__box,
.pm-innovators .whtap__pitch_boc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: auto;
}

.pm-innovators .sign_up__box figure,
.pm-innovators .whtap__pitch_boc figure {
    width: 84px;
    height: 84px;
    margin: 0 0 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.pm-innovators .sign_up__box figure img,
.pm-innovators .whtap__pitch_boc figure img {
    max-width: 84px;
    max-height: 84px;
    width: auto;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
}

/* "6 simple steps" - both halves of every row share the same icon footprint */
.pm-innovators .pitchmark_left,
.pm-innovators .pitchmark_right {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.pm-innovators .pitchmark_left figure,
.pm-innovators .pitchmark_right figure {
    width: 84px;
    height: 84px;
    -ms-flex: 0 0 84px;
    flex: 0 0 84px;
    margin: 0 20px 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.pm-innovators .pitchmark_left figure img,
.pm-innovators .pitchmark_right figure img {
    max-width: 84px;
    max-height: 84px;
    width: auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.pm-innovators .pitchmark_left .pitch__conttent,
.pm-innovators .pitchmark_right .pitch__conttent {
    width: calc(100% - 104px);
}

/* The list already separates rows with a rule; the last one just floats. */
.pm-innovators .step__pitchmark_block li:last-child {
    border-bottom: 0;
}

.pm-innovators .step__pitchmark_block > p {
    max-width: 65ch;
    margin: 28px auto 0;
    text-align: center;
}


/* --------------------------------------------------------------------------
   5. Left-aligned card copy, capped to a comfortable reading measure
   -------------------------------------------------------------------------- */
.pm-innovators .sign_up__box,
.pm-innovators .whtap__pitch_boc,
.pm-innovators .pitch__conttent {
    text-align: left;
}

.pm-innovators .sign_up__box p,
.pm-innovators .whtap__pitch_boc p,
.pm-innovators .pitch__conttent p {
    max-width: 65ch;
    margin-bottom: 0;
}

.pm-innovators .defend_right p {
    max-width: 65ch;
    margin-bottom: 20px;
}

/* Standalone centred paragraphs (section closers) keep the same measure. */
.pm-innovators p.text-center,
.pm-innovators .text-center > p {
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
}

/* main.css re-centres this copy below 991px / 767px - keep it left-aligned. */
@media only screen and (max-width: 991px) {
    .pm-innovators .what_pitch_mark .whtap__pitch_boc,
    .pm-innovators .pitchmark_left .pitch__conttent,
    .pm-innovators .pitchmark_right .pitch__conttent {
        text-align: left;
    }
}

@media only screen and (max-width: 767px) {
    .pm-innovators .pitchmark_left figure,
    .pm-innovators .pitchmark_right figure {
        width: 64px;
        height: 64px;
        -ms-flex: 0 0 64px;
        flex: 0 0 64px;
        margin: 0 15px 0 0;
    }

    .pm-innovators .pitchmark_left figure img,
    .pm-innovators .pitchmark_right figure img {
        max-width: 64px;
        max-height: 64px;
    }

    .pm-innovators .pitchmark_left .pitch__conttent,
    .pm-innovators .pitchmark_right .pitch__conttent {
        width: calc(100% - 79px);
    }
}


/* --------------------------------------------------------------------------
   6. One reusable button style
   -------------------------------------------------------------------------- */
.pm-innovators .btn {
    min-width: 160px;
    padding: 12px 28px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 5px;
    border-width: 1px;
}

/* Inline-block buttons centre by line box, so when two of them wrap the
   first one is left sitting off-centre. Lay the group out as a centred flex
   row instead - it stays centred whether the buttons sit side by side or
   stack. */
.pm-innovators .buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.pm-innovators .buttons .btn {
    margin: 6px;
}

/* Stacked CTAs line up to the same width rather than stepping in and out. */
.pm-innovators .license__exchange .buttons .btn {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/* The hero CTA stays the largest button on the page, but on the same ramp. */
.pm-innovators .genrate__btn {
    font-size: 24px;
    padding: 12px 34px;
}

@media only screen and (max-width: 991px) {
    .pm-innovators .genrate__btn {
        font-size: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .pm-innovators .btn {
        min-width: 0;
        padding: 10px 22px;
        font-size: 15px;
    }

    .pm-innovators .genrate__btn {
        font-size: 16px;
        padding: 10px 22px;
    }

}


/* --------------------------------------------------------------------------
   7. "Defend your ideas" - balance the artwork against the copy
   -------------------------------------------------------------------------- */
.pm-innovators .defend__wrap .row {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.pm-innovators .defend_left {
    text-align: center;
}

.pm-innovators .defend_left img {
    max-width: 340px;
    width: 100%;
    height: auto;
}


/* --------------------------------------------------------------------------
   8. Contact block - a card instead of a floating list
   -------------------------------------------------------------------------- */
.pm-innovators .contact__card {
    background-color: #f8fcfe;
    border: 1px solid #e3edf2;
    border-radius: 12px;
    padding: 32px;
}

.pm-innovators .contact__card p:last-child {
    margin-bottom: 0;
}

.pm-innovators .contact__card a {
    color: #7dc43b;
    text-decoration: none;
}

.pm-innovators .contact__card a:hover,
.pm-innovators .contact__card a:focus {
    text-decoration: underline;
}

@media only screen and (max-width: 767px) {
    .pm-innovators .contact__card {
        padding: 22px;
    }
}


/* --------------------------------------------------------------------------
   9. Tablet + mobile layout
       The site header is absolutely positioned over the banner and is 187px
       tall below 992px, while the banner itself is only 130-165px - so the
       page title collides with the logo, the nav links and the
       REGISTER / LOGIN buttons.
       Give the banner enough top padding to clear the header. The header is
       187px tall at every width; the banner only outgrows it above 1199px.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {
    .pm-innovators .banner__inner {
        height: auto;
        padding: 200px 0 42px;
    }
}

@media only screen and (max-width: 991px) {
    /* Three cards across a tablet leaves ~210px per card - two reads far
       better and matches the grid below it. */
    .pm-innovators .sign__up_now_block > .row > .col-md-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* The steps run two-up, which squeezes each step's copy into ~190px.
       One step per row below 992px. */
    .pm-innovators .step__pitchmark_block li {
        border-bottom: 0;
    }

    .pm-innovators .pitchmark_left,
    .pm-innovators .pitchmark_right {
        width: 100%;
        padding-right: 0;
        border-bottom: 1px solid #ccc;
    }

    .pm-innovators .step__pitchmark_block li:last-child .pitchmark_right {
        border-bottom: 0;
    }

    /* Stack the certificate and its copy instead of two narrow columns. */
    .pm-innovators .defend__wrap .col-md-5,
    .pm-innovators .defend__wrap .col-md-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .pm-innovators .defend_left {
        margin-bottom: 30px;
    }

    /* The two license CTAs no longer fit on one line here. Once they stack,
       give them a common width so they read as one pair rather than two
       ragged blocks. */
    .pm-innovators .license__exchange .buttons .btn {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 340px;
    }
}

@media only screen and (max-width: 767px) {
    .pm-innovators .banner__inner {
        padding: 195px 0 32px;
    }

    .pm-innovators .sign__up_now_block > .row > .col-md-4 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* --------------------------------------------------------------------------
   10. Tame the innovator directory
        - slides are equal height
        - the "Area of Expertise" list is capped instead of running to a
          dozen lines and stretching the whole slider
   -------------------------------------------------------------------------- */
.pm-innovators #innovator__slider .slick-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.pm-innovators #innovator__slider .slick-slide {
    height: auto;
}

.pm-innovators #innovator__slider .slick-slide > div,
.pm-innovators #innovator__slider .items {
    height: 100%;
}

.pm-innovators #innovator__slider .testimonial_wrap {
    height: 100%;
    padding: 24px 0;
}

/* The photo column is a growing .col, which pushed the expertise text to the
   far side of the slide. Shrink it to the photo so the two sit together. */
.pm-innovators #innovator__slider .testimonial_wrap > .col {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding-right: 0;
}

.pm-innovators #innovator__slider .testimonial_wrap > .col-auto {
    -ms-flex-item-align: center;
    align-self: center;
}

.pm-innovators #innovator__slider img.thumb {
    border-radius: 8px;
}

/* The markup is "<strong>Area of Expertise:</strong><br />list", so the label
   already gets its own row - making the <strong> a block as well added an
   empty row and ate one of the three clamped rows, leaving a single line of
   expertise. Inline label + <br> = label row plus two rows of the list. */
.pm-innovators #innovator__slider .testimonial_wrap p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.5;
}

/* The theme pins these arrows to bottom:20px of the slider, where they land
   on top of the first slide's photo. Reserve room below the slides for them. */
.pm-innovators #innovator__slider {
    padding-bottom: 52px;
}

.pm-innovators #innovator__slider .slick-arrow {
    bottom: 4px;
}