/* =========================================================
   KINSLEYROOF - OPTIMIZED CUSTOM CSS
   FONT AWESOME WEB FONT VERSION
   Brand Yellow: #FFD400
   ========================================================= */

.site-info,
.site-info a {
    color: #666666 !important;
}

/* =========================================================
   GENERAL
   ========================================================= */
/* =========================================================
   HERO / LCP - SHOW FIRST SLIDE BEFORE OWL INITIALIZES
   ========================================================= */

/* Before Owl Carousel finishes initializing */
#theme-main-slider:not(.owl-loaded) {
    display: block !important;
}

/* Hide slides 2+ until Owl initializes */
#theme-main-slider:not(.owl-loaded) > .item:not(:first-child) {
    display: none !important;
}

/* Make first slide immediately renderable */
#theme-main-slider:not(.owl-loaded) > .item:first-child {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}



.yellow-link {
    color: #FFD400 !important;
    text-decoration: none;
}

.yellow-link:hover {
    text-decoration: underline;
}


/* =========================================================
   FONT AWESOME - WEB FONT ICONS
   ========================================================= */

/*
 * Covers Font Awesome 4/5/6/7 class styles.
 * Older Version Compatibility remains enabled in the Kit.
 */

.fa,
.fas,
.far,
.fab,
.fa-solid,
.fa-regular,
.fa-brands {
    color: #FFD400 !important;
}


/* =========================================================
   THEME INFO AREA + SERVICES
   ========================================================= */

/* =========================================================
   THEME INFO AREA ICONS
   Dark round circle + Kinsley yellow icon
   ========================================================= */

#theme-info-area .media > i,
#theme-info-area i.icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;

    padding: 0 !important;
    margin: 0 18px 0 0 !important;

    background: #02042F !important;
    color: #FFD400 !important;

    border-radius: 50% !important;

    font-size: 27px !important;
    line-height: 1 !important;

    text-align: center !important;

    box-sizing: border-box !important;
}

@media (max-width: 767px) {

    #theme-info-area .media > i,
    #theme-info-area i.icon {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;

        font-size: 24px !important;

        margin-right: 15px !important;
    }
}
/* =========================================================
   FUNFACT ICONS
   Dark against yellow background
   ========================================================= */

#theme-funfact i.fa,
#theme-funfact .fas,
#theme-funfact .far,
#theme-funfact .fab,
#theme-funfact .fa-solid,
#theme-funfact .fa-regular,
#theme-funfact .fa-brands,
.theme-funfact i.fa {
    color: #111111 !important;
}


/* =========================================================
   SOCIAL MEDIA ICONS
   ========================================================= */

ul.custom-social-icons {
    min-height: 33px;
}


/* Facebook */
.fa-facebook,
.fa-facebook-f {
    color: #1877F2 !important;
}


/* YouTube */
.fa-youtube {
    color: #FF0000 !important;
}


/* Instagram */
.fa-instagram {
    color: #E4405F !important;
}


/* Pinterest */
.fa-pinterest,
.fa-pinterest-p {
    color: #E60023 !important;
}


/* TikTok - black with white outline */
.fa-tiktok {
    color: #000000 !important;

    text-shadow:
        1px 0 0 #FFFFFF,
        -1px 0 0 #FFFFFF,
        0 1px 0 #FFFFFF,
        0 -1px 0 #FFFFFF !important;
}



/* =========================================================
   HOMEPAGE SLIDER ARROWS
   Hidden because the estimate form is the primary hero CTA
   ========================================================= */

.home #theme-main-slider .owl-nav {
    display: none !important;
}

/* =========================================================
   GET A QUOTE BUTTONS
   ========================================================= */

.btn-ex-small.btn-border,
.btn-small.btn-default {
    background-color: #D60000 !important;
    border-color: #D60000 !important;
    color: #FFFFFF !important;
}


.btn-ex-small.btn-border:hover,
.btn-small.btn-default:hover {
    background-color: #B00000 !important;
    border-color: #B00000 !important;
    color: #FFFFFF !important;
}


/* =========================================================
   GOOGLE REVIEWS / TESTIMONIAL SECTION
   ========================================================= */


/* Hide ArileWP's original testimonial content */
#theme-testimonial > .overlay,
#theme-testimonial > .container > .row:first-of-type,
#theme-testimonial .theme-testimonial-content,
#theme-testimonial #testimonial-slider {
    display: none !important;
}


/* Neutralize original testimonial section */
#theme-testimonial {
    background-image: none !important;
    background-color: #FFFFFF !important;

    padding: 0 !important;
    margin: 0 !important;

    min-height: 0 !important;
}


/* Remove ArileWP container restrictions */
#theme-testimonial > .container {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   GOOGLE REVIEWS WRAPPER
   ========================================================= */

.kr-google-reviews-wrap {
    width: 100% !important;
    max-width: 1100px !important;

    margin: 0 auto !important;
    padding: 65px 20px 70px !important;

    text-align: center !important;

    box-sizing: border-box !important;
}


/* =========================================================
   GOOGLE REVIEWS TITLE
   ========================================================= */

.kr-google-reviews-title {
    width: 100% !important;

    margin: 0 auto 45px !important;
    padding: 0 !important;

    text-align: center !important;
}


.kr-google-reviews-title h2 {
    display: inline-block !important;
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: 44px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    text-transform: none !important;
    letter-spacing: 0 !important;
}


.kr-google-reviews-title h2 > span {
    display: inline-block !important;
}


/* =========================================================
   GOOGLE REVIEWS ANIMATED YELLOW UNDERLINE
   ========================================================= */

.kr-google-highlight {
    position: relative !important;

    margin-left: 8px !important;
    padding-bottom: 13px !important;
}


.kr-google-highlight::after {
    content: "" !important;

    display: block !important;

    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 5px !important;

    background: #FFD400 !important;

    border-radius: 100px !important;

    transform-origin: left center !important;

    animation: kr-google-line 4s ease-in-out infinite !important;
}


@keyframes kr-google-line {

    0% {
        transform: scaleX(0);
        opacity: 1;
    }

    25% {
        transform: scaleX(1);
        opacity: 1;
    }

    70% {
        transform: scaleX(1);
        opacity: 1;
    }

    85% {
        transform: scaleX(1);
        opacity: 0;
    }

    100% {
        transform: scaleX(0);
        opacity: 0;
    }
}


/* =========================================================
   TRUSTINDEX GOOGLE REVIEWS
   ========================================================= */

.kr-google-reviews-widget {
    width: 100% !important;
    max-width: 950px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* Trustindex internal wrappers */
.kr-google-reviews-widget .ti-widget,
.kr-google-reviews-widget .ti-widget-container,
.kr-google-reviews-widget .ti-reviews-container,
.kr-google-reviews-widget .ti-reviews-container-wrapper {
    width: 100% !important;
    max-width: 950px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;
}


/* Review cards */
.kr-google-reviews-widget .ti-review-item .ti-inner {
    background: #FFFFFF !important;

    border: 1px solid #E5E5E5 !important;
    border-radius: 10px !important;

    padding: 22px !important;

    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.12) !important;
}


/* Review body */
.kr-google-reviews-widget .ti-review-content,
.kr-google-reviews-widget .ti-review-text-container {
    color: #333333 !important;
    line-height: 1.55 !important;
}


/* Reviewer name */
.kr-google-reviews-widget .ti-name {
    color: #111111 !important;
    font-weight: 700 !important;
}


/* Date */
.kr-google-reviews-widget .ti-date {
    color: #777777 !important;
}


/* =========================================================
   GOOGLE REVIEW CTA
   ========================================================= */

.kr-google-review-cta {
    width: 100% !important;

    margin: 38px auto 0 !important;

    text-align: center !important;
}


.kr-google-review-cta p {
    margin: 0 0 14px !important;

    color: #333333 !important;

    font-size: 17px !important;
    font-weight: 600 !important;
}


.kr-google-review-button {
    display: inline-block !important;

    padding: 12px 24px !important;

    background: #FFD400 !important;
    color: #111111 !important;

    border: 2px solid #FFD400 !important;
    border-radius: 4px !important;

    font-weight: 700 !important;
    text-decoration: none !important;
}


.kr-google-review-button:hover,
.kr-google-review-button:focus {
    background: #111111 !important;

    color: #FFD400 !important;

    border-color: #111111 !important;
}


/* =========================================================
   GOOGLE REVIEWS - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .kr-google-reviews-wrap {
        max-width: 100% !important;

        padding: 45px 15px 50px !important;
    }


    .kr-google-reviews-title {
        margin-bottom: 35px !important;
    }


    .kr-google-reviews-title h2 {
        font-size: 31px !important;
    }


    .kr-google-highlight {
        margin-left: 5px !important;
        padding-bottom: 10px !important;
    }


    .kr-google-highlight::after {
        height: 4px !important;
    }


    .kr-google-reviews-widget,
    .kr-google-reviews-widget .ti-widget,
    .kr-google-reviews-widget .ti-widget-container,
    .kr-google-reviews-widget .ti-reviews-container,
    .kr-google-reviews-widget .ti-reviews-container-wrapper {
        max-width: 100% !important;
    }
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .kr-google-highlight::after {
        animation: none !important;

        transform: scaleX(1) !important;
        opacity: 1 !important;
    }
}


#get-a-quote {
    scroll-margin-top: 120px;
}

/* Get Your Free Estimate - hover bounce */
.kr-quote-bounce {
    transition: transform 0.2s ease !important;
}

.kr-quote-bounce:hover,
.kr-quote-bounce:focus {
    animation: kr-quote-bounce 0.6s ease !important;
}

@keyframes kr-quote-bounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-7px); }
    50%  { transform: translateY(0); }
    70%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .kr-quote-bounce:hover,
    .kr-quote-bounce:focus {
        animation: none !important;
    }
}

/* =========================================================
   KINSLEYROOF PROJECT PAGES
   ========================================================= */

.kr-project-content {
    width: 100% !important;
    max-width: 1050px !important;

    margin: 0 auto !important;
    padding: 20px 20px 60px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   PROJECT INTRODUCTION
   ========================================================= */

.kr-project-intro {
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 45px !important;

    font-size: 18px !important;
    line-height: 1.75 !important;
    color: #333333 !important;

    box-sizing: border-box !important;
}

.kr-project-intro p {
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 20px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   PROJECT TEXT SECTIONS
   ========================================================= */

.kr-project-text {
    width: 100% !important;
    max-width: none !important;

    margin: 55px 0 !important;

    box-sizing: border-box !important;
}

.kr-project-text h2 {
    position: relative !important;

    margin: 0 0 25px !important;
    padding: 0 0 15px !important;

    color: #111111 !important;

    font-size: 32px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}


/* KinsleyRoof yellow accent under headings */

.kr-project-text h2::after {
    content: "" !important;

    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;

    width: 65px !important;
    height: 4px !important;

    background: #FFD400 !important;

    border-radius: 20px !important;
}

.kr-project-text p {
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 20px !important;

    color: #333333 !important;

    font-size: 17px !important;
    line-height: 1.75 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   PROJECT PHOTOS
   ========================================================= */

.kr-project-photo {
    width: 100% !important;
    max-width: 1000px !important;

    margin: 45px auto !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #FFFFFF !important;

    border-radius: 10px !important;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.kr-project-photo img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    transition: transform 0.45s ease !important;
}


/* Very subtle image movement on desktop */

.kr-project-photo:hover img {
    transform: scale(1.015) !important;
}


/* =========================================================
   PHOTO CAPTIONS
   ========================================================= */

.kr-project-photo figcaption {
    margin: 0 !important;
    padding: 14px 20px 16px !important;

    background: #FFFFFF !important;

    color: #555555 !important;

    font-size: 14px !important;
    line-height: 1.5 !important;
    font-style: normal !important;

    text-align: left !important;

    border-top: 3px solid #FFD400 !important;
}


/* =========================================================
   PROJECT PAGES - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .kr-project-content {
        padding: 10px 15px 45px !important;
    }

    .kr-project-intro {
        margin-bottom: 35px !important;

        font-size: 17px !important;
        line-height: 1.7 !important;
    }

    .kr-project-intro,
    .kr-project-intro p,
    .kr-project-text,
    .kr-project-text p {
        width: 100% !important;
        max-width: none !important;
    }

    .kr-project-text {
        margin: 40px 0 !important;
    }

    .kr-project-text h2 {
        margin-bottom: 20px !important;

        font-size: 26px !important;
        line-height: 1.3 !important;
    }

    .kr-project-text h2::after {
        width: 55px !important;
        height: 4px !important;
    }

    .kr-project-text p {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    .kr-project-photo {
        margin: 35px auto !important;

        border-radius: 7px !important;
    }

    .kr-project-photo figcaption {
        padding: 12px 15px 14px !important;

        font-size: 13px !important;
    }
}


/* =========================================================
   PROJECT PHOTOS - REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kr-project-photo img {
        transition: none !important;
    }

    .kr-project-photo:hover img {
        transform: none !important;
    }
}

/* =========================================================
   PROJECT PAGE CTA
   ========================================================= */

.kr-project-cta {
    width: 100% !important;
    max-width: 1000px !important;

    margin: 70px auto 20px !important;
    padding: 0 !important;
}

.kr-project-cta-inner {
    padding: 45px 35px !important;

    background: #111111 !important;

    border-radius: 10px !important;
    border-top: 5px solid #FFD400 !important;

    text-align: center !important;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.kr-project-cta h2 {
    margin: 0 0 18px !important;

    color: #FFFFFF !important;

    font-size: 32px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.kr-project-cta p {
    max-width: 760px !important;

    margin: 0 auto 28px !important;

    color: #E0E0E0 !important;

    font-size: 17px !important;
    line-height: 1.7 !important;
}


.kr-project-cta-button {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 220px !important;
    padding: 12px 25px 14px !important;

    text-align: center !important;

    background: #FFD400 !important;
    color: #111111 !important;

    border: 2px solid #FFD400 !important;
    border-radius: 4px !important;

    font-weight: 700 !important;
    text-decoration: none !important;

    transform-origin: center !important;
}

.kr-project-cta-button:hover,
.kr-project-cta-button:focus {
    background: #FFD400 !important;
    color: #111111 !important;
}


/* Mobile */
@media (max-width: 767px) {

    .kr-project-cta {
        margin-top: 50px !important;
    }

    .kr-project-cta-inner {
        padding: 35px 20px !important;
    }

    .kr-project-cta h2 {
        font-size: 26px !important;
    }

    .kr-project-cta p {
        font-size: 16px !important;
    }
}

/* =========================================================
   PROJECT PAGE MAIN HEADER
   ========================================================= */

.kr-project-header {
    width: 100% !important;
    max-width: 950px !important;

    margin: 10px auto 45px !important;

    text-align: center !important;
}

.kr-project-eyebrow {
    margin: 0 0 14px !important;

    color: #555555 !important;

    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;

    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

.kr-project-header h1 {
    margin: 0 !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: 44px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    text-transform: none !important;
    letter-spacing: 0 !important;
}

.kr-project-header-line {
    width: 80px !important;
    height: 5px !important;

    margin: 22px auto 0 !important;

    background: #FFD400 !important;

    border-radius: 100px !important;
}


/* Mobile */
@media (max-width: 767px) {

    .kr-project-header {
        margin: 5px auto 35px !important;
    }

    .kr-project-eyebrow {
        margin-bottom: 11px !important;

        font-size: 12px !important;
        letter-spacing: 1px !important;
    }

    .kr-project-header h1 {
        font-size: 32px !important;
        line-height: 1.25 !important;
    }

    .kr-project-header-line {
        width: 65px !important;
        height: 4px !important;

        margin-top: 18px !important;
    }
}


/* =========================================================
   PROJECT CTA TWO-LINE BUTTON TEXT
   ========================================================= */

/* Click Here To */

.kr-cta-small {
    display: block !important;

    margin-bottom: 2px !important;

    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
}


/* Get Your Free Estimate */

.kr-cta-main {
    display: block !important;

    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}


/* =========================================================
   INITIAL ATTENTION BOUNCE
   ========================================================= */

.kr-project-bounce {
    transform-origin: center !important;
}

.kr-project-bounce.kr-project-bounce-visible {
    animation: kr-project-attention-bounce 1s ease 1 both !important;
}

@keyframes kr-project-attention-bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}


/* =========================================================
   BOUNCE AGAIN ON HOVER
   ========================================================= */

.kr-project-bounce:hover,
.kr-project-bounce:focus {
    background: #FFD400 !important;
    color: #111111 !important;
    border-color: #FFD400 !important;

    animation: kr-project-hover-bounce 0.6s ease !important;
}

@keyframes kr-project-hover-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    35% {
        transform: translateY(-8px);
    }

    65% {
        transform: translateY(-3px);
    }
}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kr-project-bounce,
    .kr-project-bounce:hover,
    .kr-project-bounce:focus {
        animation: none !important;
        transform: none !important;
    }
}

/* =========================================================
   KINSLEYROOF CONSULTATION PAGE
   Clean isolated layout
   ========================================================= */

#krx-consultation,
#krx-consultation * {
    box-sizing: border-box;
}

#krx-consultation {
    display: block !important;
    width: 100% !important;
    max-width: 1120px !important;

    margin: 0 auto !important;
    padding: 46px 34px 55px !important;

    float: none !important;
    clear: both !important;
}


/* =========================================================
   INTRO
   ========================================================= */

#krx-consultation .krx-intro {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 0 38px !important;
    padding: 0 !important;

    float: none !important;
}

#krx-consultation .krx-intro h2 {
    display: block !important;

    margin: 0 0 20px !important;
    padding: 0 !important;

    font-size: 36px !important;
    line-height: 1.22 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

#krx-consultation .krx-intro p {
    display: block !important;

    width: 100% !important;
    max-width: 760px !important;

    margin: 0 0 18px !important;
    padding: 0 !important;

    line-height: 1.65 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
}

#krx-consultation .krx-intro-callout {
    margin-top: 30px !important;
}


/* =========================================================
   DESKTOP COLUMNS
   ========================================================= */

#krx-consultation .krx-columns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: flex-start !important;
    justify-content: space-between !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 34px !important;

    float: none !important;
    clear: both !important;
}


/* LEFT COLUMN */

#krx-consultation .krx-booking-column {
    display: block !important;

    flex: 1 1 0 !important;

    width: calc(100% - 434px) !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
}


/* RIGHT COLUMN */

#krx-consultation .krx-info-column {
    display: block !important;

    flex: 0 0 400px !important;

    width: 400px !important;
    min-width: 400px !important;
    max-width: 400px !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
}


/* =========================================================
   CALENDLY
   ========================================================= */

#krx-consultation .krx-calendly-box {
    display: block !important;

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

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}

#krx-consultation .calendly-inline-widget {
    display: block !important;

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

    height: 700px !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
}

#krx-consultation .calendly-inline-widget iframe {
    display: block !important;

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

    margin: 0 !important;
}


/* =========================================================
   GOOGLE REVIEW BOX
   ========================================================= */

#krx-consultation .krx-google-box {
    display: block !important;

    width: 100% !important;

    margin: 24px 0 0 !important;
    padding: 22px 24px !important;

    background: #ffffff !important;

    border: 1px solid #e4e4e4 !important;
    border-top: 4px solid #FFD400 !important;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04) !important;

    text-align: center !important;
}

#krx-consultation .krx-google-heading {
    display: block !important;

    width: 100% !important;

    margin: 0 0 16px !important;
}

#krx-consultation .krx-google-heading strong {
    display: block !important;

    margin: 0 0 4px !important;
}

#krx-consultation .krx-google-heading span {
    display: block !important;

    color: #666666 !important;
    font-size: 14px !important;
}

#krx-consultation .krx-google-widget {
    display: flex !important;

    width: 100% !important;
    min-height: 75px !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
}


/* Keep Trustindex widget contained */

#krx-consultation .krx-google-widget > * {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   RIGHT INFORMATION CARD
   ========================================================= */

#krx-consultation .krx-info-card {
    display: block !important;

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

    margin: 0 !important;
    padding: 27px 26px !important;

    background: #ffffff !important;

    border: 1px solid #e4e4e4 !important;
    border-top: 4px solid #FFD400 !important;

    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.05) !important;

    float: none !important;
}


/* HEADINGS */

#krx-consultation .krx-info-card h3 {
    display: block !important;

    width: 100% !important;

    margin: 0 0 23px !important;
    padding: 0 !important;

    font-size: 28px !important;
    line-height: 1.22 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}


/* =========================================================
   STEPS
   ========================================================= */

#krx-consultation .krx-step {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 24px !important;
    padding: 0 !important;

    gap: 11px !important;

    float: none !important;
}

#krx-consultation .krx-check {
    display: flex !important;

    flex: 0 0 22px !important;

    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #FFD400 !important;
    color: #111111 !important;

    border-radius: 50% !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
}

#krx-consultation .krx-step-text {
    display: block !important;

    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
}

#krx-consultation .krx-step-text strong {
    display: block !important;

    width: 100% !important;

    margin: 0 0 6px !important;
    padding: 0 !important;

    line-height: 1.45 !important;

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

#krx-consultation .krx-step-text p {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.58 !important;

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


/* =========================================================
   GOOD HANDS
   ========================================================= */

#krx-consultation .krx-divider {
    display: block !important;

    width: 100% !important;
    height: 1px !important;

    margin: 28px 0 23px !important;

    background: #e4e4e4 !important;
}

#krx-consultation .krx-good-hands {
    display: block !important;

    width: 100% !important;
}

#krx-consultation .krx-good-hands h3 {
    margin-bottom: 15px !important;
}

#krx-consultation .krx-good-hands ul {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 0 0 18px !important;
}

#krx-consultation .krx-good-hands li {
    display: list-item !important;

    width: auto !important;

    margin: 0 0 7px !important;
    padding: 0 !important;

    line-height: 1.5 !important;
}


/* =========================================================
   PHONE BOX
   ========================================================= */

#krx-consultation .krx-phone-box {
    display: block !important;

    width: 100% !important;

    margin: 22px 0 0 !important;
    padding: 18px 18px !important;

    background: #f5f5f5 !important;

    border-left: 4px solid #FFD400 !important;
}

#krx-consultation .krx-phone-box strong {
    display: block !important;

    margin: 0 0 10px !important;

    line-height: 1.4 !important;
}

#krx-consultation .krx-phone-box p {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.55 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media only screen and (max-width: 900px) {

    #krx-consultation {
        max-width: 760px !important;

        padding: 36px 24px 45px !important;
    }

    #krx-consultation .krx-columns {
        display: block !important;
        width: 100% !important;
    }

    #krx-consultation .krx-booking-column,
    #krx-consultation .krx-info-column {
        display: block !important;

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

        margin: 0 !important;

        flex: none !important;

        float: none !important;
    }

    #krx-consultation .krx-info-column {
        margin-top: 28px !important;
    }

}


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

@media only screen and (max-width: 575px) {

    #krx-consultation {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 27px 15px 36px !important;
    }

    #krx-consultation .krx-intro {
        margin-bottom: 25px !important;
    }

    #krx-consultation .krx-intro h2 {
        font-size: 27px !important;
        line-height: 1.23 !important;

        margin-bottom: 17px !important;
    }

    #krx-consultation .krx-intro p {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    #krx-consultation .krx-intro-callout {
        margin-top: 22px !important;
    }

    #krx-consultation .krx-calendly-box,
    #krx-consultation .calendly-inline-widget,
    #krx-consultation .calendly-inline-widget iframe {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #krx-consultation .calendly-inline-widget {
        height: 700px !important;
    }

    #krx-consultation .krx-google-box {
        margin-top: 20px !important;
        padding: 19px 15px !important;
    }

    #krx-consultation .krx-info-column {
        margin-top: 22px !important;
    }

    #krx-consultation .krx-info-card {
        width: 100% !important;

        padding: 22px 17px !important;
    }

    #krx-consultation .krx-info-card h3 {
        font-size: 25px !important;
        line-height: 1.22 !important;
    }

    #krx-consultation .krx-step {
        width: 100% !important;

        gap: 9px !important;
        margin-bottom: 22px !important;
    }

    #krx-consultation .krx-step-text {
        width: calc(100% - 31px) !important;
        min-width: 0 !important;
    }

    #krx-consultation .krx-step-text strong,
    #krx-consultation .krx-step-text p {
        width: 100% !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
        hyphens: none !important;
    }

    #krx-consultation .krx-step-text strong {
        font-size: 15px !important;
    }

    #krx-consultation .krx-step-text p {
        font-size: 14px !important;
    }

    #krx-consultation .krx-good-hands li {
        font-size: 14px !important;
    }

    #krx-consultation .krx-phone-box {
        padding: 17px 15px !important;
    }

}

/* =========================================================
   KINSLEYROOF ESTIMATE FORM
   Gravity Form ID: 1
   ========================================================= */


/* =========================================================
   MAIN FORM CARD
   ========================================================= */

#gform_wrapper_1 {
    width: 100%;
    max-width: 700px;

    margin: 0 auto;
    padding: 34px 38px 32px;

    background: #ffffff;
    color: #18233a;

    border-top: 4px solid #FFD400;
    border-radius: 3px;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.10);

    box-sizing: border-box;
}


/* Keep everything INSIDE the form full width
   without overriding the 1040px outer wrapper */

#gform_wrapper_1 form,
#gform_wrapper_1 .gform-body,
#gform_wrapper_1 .gform_page {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}



/* =========================================================
   TYPOGRAPHY
   ========================================================= */

#gform_wrapper_1 .gfield_label {
    color: #07143d;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;

    margin-bottom: 7px;
}

#gform_wrapper_1 .gfield_description,
#gform_wrapper_1 .gform-field-label--type-sub,
#gform_wrapper_1 .gfield_consent_description {
    color: #5b6270;

    font-size: 13px;
    line-height: 1.55;
}

#gform_wrapper_1 .gfield_required {
    color: #c72c1c;

    font-size: 12px;

    margin-left: 3px;
}


/* =========================================================
   FIELD SPACING
   ========================================================= */

#gform_wrapper_1 .gfield {
    margin-bottom: 22px;
}

#gform_wrapper_1 .gform_fields {
    row-gap: 20px;
}


/* =========================================================
   INPUTS
   ========================================================= */

#gform_wrapper_1 input[type="text"],
#gform_wrapper_1 input[type="email"],
#gform_wrapper_1 input[type="tel"],
#gform_wrapper_1 input[type="number"],
#gform_wrapper_1 input[type="url"],
#gform_wrapper_1 input[type="password"],
#gform_wrapper_1 select,
#gform_wrapper_1 textarea {
    width: 100%;
    min-height: 48px;

    padding: 11px 14px;

    background: #ffffff;
    color: #18233a;

    border: 1px solid #cbd1d8;
    border-radius: 4px;

    box-shadow: none;

    font-size: 15px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

#gform_wrapper_1 textarea {
    min-height: 135px;
    resize: vertical;
}


/* Focus */

#gform_wrapper_1 input[type="text"]:focus,
#gform_wrapper_1 input[type="email"]:focus,
#gform_wrapper_1 input[type="tel"]:focus,
#gform_wrapper_1 input[type="number"]:focus,
#gform_wrapper_1 input[type="url"]:focus,
#gform_wrapper_1 input[type="password"]:focus,
#gform_wrapper_1 select:focus,
#gform_wrapper_1 textarea:focus {
    border-color: #FFD400;

    box-shadow: 0 0 0 3px rgba(255, 212, 0, 0.18);

    outline: none;
}


/* =========================================================
   PROGRESS BAR
   ========================================================= */

#gform_wrapper_1 .gf_progressbar_wrapper {
    margin-bottom: 28px;
}

#gform_wrapper_1 .gf_progressbar_title {
    color: #07143d;

    font-size: 14px;
    font-weight: 700;

    margin-bottom: 9px;
}

#gform_wrapper_1 .gf_progressbar {
    height: 8px;

    background: #e9ebee;

    border-radius: 999px;

    overflow: hidden;
}

#gform_wrapper_1 .gf_progressbar_percentage {
    height: 8px;

    background: #FFD400 !important;

    border-radius: 999px;
}

#gform_wrapper_1 .gf_progressbar_percentage span {
    display: none;
}


/* =========================================================
   RADIO BUTTONS / CHECKBOXES
   ========================================================= */

#gform_wrapper_1 input[type="radio"],
#gform_wrapper_1 input[type="checkbox"] {
    accent-color: #FFD400;
}

#gform_wrapper_1 .gchoice {
    color: #18233a;
}

#gform_wrapper_1 .gchoice label {
    cursor: pointer;
}


/* =========================================================
   IMAGE CHOICE CARDS
   ========================================================= */

#gform_wrapper_1 .gfield--type-image_choice .gchoice {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

#gform_wrapper_1 .gfield--type-image_choice .gchoice:hover {
    transform: translateY(-2px);
}

#gform_wrapper_1 .gfield--type-image_choice img {
    display: block;

    max-width: 100%;
    height: auto;

    border-radius: 2px;
}


/* Selected image choice */

#gform_wrapper_1 .gfield--type-image_choice input:checked + label,
#gform_wrapper_1 .gfield--type-image_choice .gchoice:has(input:checked) {
    border-color: #FFD400 !important;
}


/* =========================================================
   PAGE FOOTER / NAVIGATION
   ========================================================= */

#gform_wrapper_1 .gform_page_footer {
    display: flex;
    align-items: center;

    width: 100%;

    gap: 10px;

    margin-top: 26px;
    padding-top: 0;

    border-top: 0;
}


/* =========================================================
   NEXT + SUBMIT BUTTONS
   ========================================================= */

#gform_wrapper_1 .gform_next_button,
#gform_wrapper_1 input[type="submit"],
#gform_wrapper_1 button[type="submit"] {
    appearance: none;

    min-height: 46px;

    padding: 11px 24px !important;

    background: #FFD400 !important;
    color: #07143d !important;

    border: 0 !important;
    border-radius: 4px !important;

    box-shadow: none !important;

    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2;

    text-transform: uppercase;
    letter-spacing: 0.25px;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

#gform_wrapper_1 .gform_next_button:hover,
#gform_wrapper_1 input[type="submit"]:hover,
#gform_wrapper_1 button[type="submit"]:hover {
    background: #eabd00 !important;
    color: #07143d !important;

    transform: translateY(-1px);

    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14) !important;
}


/* =========================================================
   PREVIOUS BUTTON
   ========================================================= */

#gform_wrapper_1 .gform_previous_button {
    appearance: none;

    min-height: 46px;

    padding: 10px 20px !important;

    background: #ffffff !important;
    color: #07143d !important;

    border: 1px solid #aeb5bd !important;
    border-radius: 4px !important;

    box-shadow: none !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    cursor: pointer;
}

#gform_wrapper_1 .gform_previous_button:hover {
    background: #f6f7f8 !important;
    border-color: #07143d !important;
}


/* =========================================================
   FILE UPLOAD
   ========================================================= */

#gform_wrapper_1 .gform_drop_area {
    padding: 38px 25px;

    background: #fafbfc;

    border: 2px dashed #c4cbd3;
    border-radius: 5px;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

#gform_wrapper_1 .gform_drop_area:hover {
    background: #fffdf4;
    border-color: #FFD400;
}

#gform_wrapper_1 .gform_button_select_files {
    background: #FFD400 !important;
    color: #07143d !important;

    border: 0 !important;
    border-radius: 4px !important;

    font-weight: 800 !important;
}


/* =========================================================
   VALIDATION
   ========================================================= */

#gform_wrapper_1 .gfield_error {
    padding: 10px;

    background: #fff9f8;

    border-radius: 4px;
}

#gform_wrapper_1 .gfield_validation_message {
    color: #b42318;

    font-weight: 600;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    #gform_wrapper_1 {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;

        padding: 28px 26px;
    }

    #gform_wrapper_1 .gform_fields {
        column-gap: 16px;
    }

}


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

@media (max-width: 767px) {

    #gform_wrapper_1 {
        width: calc(100% - 24px);
        max-width: none;

        margin: 18px auto 30px;

        padding: 24px 18px 22px;

        border-top-width: 4px;

        box-shadow: 0 7px 24px rgba(0, 0, 0, 0.09);
    }

    #gform_wrapper_1 .gf_progressbar_wrapper {
        margin-bottom: 22px;
    }

    #gform_wrapper_1 .gfield {
        margin-bottom: 18px;
    }

    #gform_wrapper_1 input[type="text"],
    #gform_wrapper_1 input[type="email"],
    #gform_wrapper_1 input[type="tel"],
    #gform_wrapper_1 input[type="number"],
    #gform_wrapper_1 input[type="url"],
    #gform_wrapper_1 select,
    #gform_wrapper_1 textarea {
        min-height: 48px;

        font-size: 16px;
    }


    /* Image choices */

    #gform_wrapper_1 .gfield--type-image_choice .gfield_radio,
    #gform_wrapper_1 .gfield--type-image_choice .gfield_checkbox {
        display: grid !important;

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

        gap: 10px;
    }

    #gform_wrapper_1 .gfield--type-image_choice .gchoice {
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
    }

    #gform_wrapper_1 .gfield--type-image_choice img {
        width: 100%;
        height: auto;
    }


    /* Navigation */

    #gform_wrapper_1 .gform_page_footer {
        display: flex;

        width: 100%;

        gap: 9px;

        margin-top: 24px;
    }

    #gform_wrapper_1 .gform_next_button,
    #gform_wrapper_1 .gform_previous_button {
        flex: 1 1 0;

        margin: 0 !important;
    }

    #gform_wrapper_1 input[type="submit"],
    #gform_wrapper_1 button[type="submit"] {
        width: 100%;

        margin: 0 !important;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

    #gform_wrapper_1 .gfield--type-image_choice .gfield_radio,
    #gform_wrapper_1 .gfield--type-image_choice .gfield_checkbox {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   HOMEPAGE HERO: FORM AS PRIMARY CONTENT
   ========================================================= */

/* Hide the original hero text/buttons so the estimate form is primary. */
.home .theme-slider-content h1,
.home .theme-slider-content h2,
.home .theme-slider-content h3,
.home .theme-slider-content p,
.home .theme-slider-content .btn,
.home .theme-slider-content a.btn,
.home .carousel-caption h1,
.home .carousel-caption h2,
.home .carousel-caption h3,
.home .carousel-caption p,
.home .carousel-caption .btn {
    display: none !important;
}

/* Keep image-choice groups centered on desktop/tablet. */
.home .kinsleyroof-hero-estimate .gfield--type-image_choice .gfield_radio,
.home .kinsleyroof-hero-estimate .gfield--type-image_choice .gfield_checkbox {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* =========================================================
   HOMEPAGE HERO FORM + QUOTE GRAPHIC
   ========================================================= */

.home .kinsleyroof-hero-quote-wrap {
    position: relative;
    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 28px;

    width: min(96%, 1280px);

    /*
     * Keep the current desktop vertical position,
     * but anchor the form + CTA group toward the right.
     */
    margin: -630px 2% 85px auto;

    transform: none;

    box-sizing: border-box;
}

/* FORM */
.home .kinsleyroof-hero-estimate {
    order: 2;

    flex: 0 1 760px;

    width: 760px;
    max-width: 760px;

    margin: 0;
    transform: none;
}

.home .kinsleyroof-hero-estimate #gform_wrapper_1 {
    width: 100%;
    max-width: 760px;

    margin: 0 auto;
}


/* GRAPHIC */
.home .kinsleyroof-hero-quote-graphic {
    order: 1;

    flex: 0 0 390px;

    width: 390px;
    max-width: 390px;

    margin: 0;

    text-align: center;
}

.home .kinsleyroof-hero-quote-graphic figure,
.home .kinsleyroof-hero-quote-graphic .wp-caption {
    width: 100% !important;
    max-width: 390px !important;

    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
}

.home .kinsleyroof-hero-quote-graphic img {
    display: block;

    width: 100%;
    max-width: 390px;
    height: auto;

    margin: 0 auto;
}


/* Hide visual caption under the graphic.
   Keep SEO alt text intact. */
.home .kinsleyroof-hero-quote-graphic .wp-caption-text {
    display: none;
}


/* =========================================================
   TABLET — CTA LEFT, FORM RIGHT
   ========================================================= */

@media (min-width: 768px) and (max-width: 1100px) {

    .home .kinsleyroof-hero-quote-wrap {
        position: relative;

        display: flex;
        flex-direction: row;

        align-items: center;
        justify-content: flex-end;

        width: calc(100% - 30px);
        max-width: none;

        /* Keep the current tablet vertical position */
        margin: -220px 15px 25px auto;

        padding: 0;

        transform: none !important;

        gap: 24px;

        box-sizing: border-box;
    }


    /* QUOTE GRAPHIC — LEFT */
    .home .kinsleyroof-hero-quote-graphic {
        order: 1;

        flex: 0 0 260px;

        width: 260px;
        max-width: 260px;

        margin: 0;

        text-align: center;
    }

    .home .kinsleyroof-hero-quote-graphic figure,
    .home .kinsleyroof-hero-quote-graphic .wp-caption,
    .home .kinsleyroof-hero-quote-graphic img {
        display: block;

        width: 100% !important;
        max-width: 260px !important;
        height: auto !important;

        margin: 0 !important;
    }


    /* FORM — RIGHT */
    .home .kinsleyroof-hero-estimate {
        order: 2;

        flex: 1 1 650px;

        width: auto;
        max-width: 700px;

        margin: 0 !important;
        padding: 0;

        transform: none !important;

        box-sizing: border-box;
    }

    .home .kinsleyroof-hero-estimate #gform_wrapper_1 {
        width: 100%;
        max-width: 700px;

        margin: 0 !important;

        box-sizing: border-box;
    }


    /* =====================================================
       TABLET IMAGE CHOICES
       Keep the cards in one horizontal row like desktop,
       while scaling the whole card, image, and label down.
       ===================================================== */

    .home .kinsleyroof-hero-estimate
    .gfield--type-image_choice .gfield_radio,
    .home .kinsleyroof-hero-estimate
    .gfield--type-image_choice .gfield_checkbox {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: stretch !important;

        gap: 8px !important;

        width: 100% !important;
    }

    .home .kinsleyroof-hero-estimate
    .gfield--type-image_choice .gchoice {
        flex: 0 1 108px !important;

        width: 108px !important;
        max-width: 108px !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 7px 5px !important;

        box-sizing: border-box !important;
    }

    .home .kinsleyroof-hero-estimate
    .gfield--type-image_choice .gchoice label {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        font-size: 11px !important;
        line-height: 1.15 !important;
        text-align: center !important;
        overflow-wrap: anywhere !important;

        box-sizing: border-box !important;
    }

    .home .kinsleyroof-hero-estimate
    .gfield--type-image_choice img {
        display: block !important;

        width: 72px !important;
        max-width: 72px !important;
        height: auto !important;

        margin: 0 auto 5px !important;
    }


}

/* =========================================================
   MOBILE — FULL WIDTH, NO DANGEROUS OVERLAP
   ========================================================= */

@media (max-width: 767px) {

    .home .kinsleyroof-hero-quote-wrap {
        position: relative;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: flex-start;

        width: 100%;
        max-width: 100%;

        /* keep it close to hero without dragging it
           underneath the mobile header */
        margin: -250px auto 90px;

        padding: 0 12px;

        transform: none !important;

        gap: 18px;

        box-sizing: border-box;
    }


    /* GRAPHIC FIRST */
    .home .kinsleyroof-hero-quote-graphic {
        order: 1;

        flex: none;

        width: min(76vw, 260px);
        max-width: 260px;

        margin: 0 auto;

        text-align: center;
    }

    .home .kinsleyroof-hero-quote-graphic figure,
    .home .kinsleyroof-hero-quote-graphic .wp-caption {
        width: 100% !important;
        max-width: 260px !important;

        margin: 0 auto !important;

        background: transparent !important;
        border: 0 !important;
    }

    .home .kinsleyroof-hero-quote-graphic img {
        display: block;

        width: 100% !important;
        max-width: 260px !important;
        height: auto !important;

        margin: 0 auto !important;
    }


    /* FORM SECOND */
    .home .kinsleyroof-hero-estimate {
        order: 2;

        flex: none;

        width: 100%;
        max-width: 100%;

        margin: 0 auto !important;
        padding: 0;

        transform: none !important;

        box-sizing: border-box;
    }

    .home .kinsleyroof-hero-estimate #gform_wrapper_1 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;

        box-sizing: border-box;
    }


}

/* =========================================================
   GRAVITY FORMS - FIX VERTICAL TEXT ALIGNMENT
   ========================================================= */

#gform_wrapper_1 input[type="text"],
#gform_wrapper_1 input[type="email"],
#gform_wrapper_1 input[type="tel"],
#gform_wrapper_1 input[type="number"],
#gform_wrapper_1 input[type="url"],
#gform_wrapper_1 input[type="password"],
#gform_wrapper_1 select {
    min-height: 48px;
    height: 48px;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    line-height: 48px !important;

    box-sizing: border-box;
}

/* Selects render better without forcing the full 48px line-height */
#gform_wrapper_1 select {
    line-height: normal !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* =========================================================
   MOBILE HOMEPAGE SLIDER - RESERVE HEIGHT BEFORE OWL LOADS
   Prevents layout shift while Owl Carousel initializes
   ========================================================= */

@media (max-width: 767px) {

    .home #theme-main-slider,
    .home #theme-main-slider .owl-stage-outer,
    .home #theme-main-slider .item {
        min-height: 620px !important;
    }

}

/* =========================================================
   HOMEPAGE MOBILE STATIC HERO
   Real image for faster mobile LCP
   ========================================================= */

.kinsleyroof-mobile-static-hero {
    display: none;
}

@media (max-width: 767px) {

    .home .kinsleyroof-mobile-static-hero {
        display: block;
        position: relative;

        width: 100%;
        height: 620px;

        overflow: hidden;
    }

    .home .kinsleyroof-mobile-static-hero img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center center;
    }

    /* Hide only the MAIN Owl hero on mobile */
    .home #theme-slider {
        display: none !important;
    }

}



/* =========================================================
   GRAVITY FORMS IMAGE CHOICES — CONSOLIDATED
   One authoritative set of rules.
   Preserves the current desktop/tablet/mobile appearance.
   ========================================================= */

/* Base row */
#gform_wrapper_1 .gfield--type-image_choice .gfield_radio,
#gform_wrapper_1 .gfield--type-image_choice .gfield_checkbox {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;

    width: 100% !important;
    gap: 12px !important;
}


/* Hide native image-choice radio / checkbox controls. */
#gform_wrapper_1 .gfield--type-image_choice input[type="radio"],
#gform_wrapper_1 .gfield--type-image_choice input[type="checkbox"] {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;
    pointer-events: none !important;

    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;
}


/* Remove Gravity Forms' built-in image-choice marks. */
#gform_wrapper_1 .gfield--type-image_choice .gchoice label::before,
#gform_wrapper_1 .gfield--type-image_choice .gchoice label::after,
#gform_wrapper_1 .gfield--type-image_choice .gchoice::before,
#gform_wrapper_1 .gfield--type-image_choice .gchoice::after {
    content: none !important;
    display: none !important;
}


/* Base card */
#gform_wrapper_1 .gfield--type-image_choice .gchoice {
    position: relative !important;

    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    border: 2px solid #d6d9de !important;
    border-radius: 4px !important;

    box-shadow: none !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease !important;
}


/* Keep all cards square and stationary. */
.home #gform_wrapper_1 .gfield--type-image_choice .gchoice {
    aspect-ratio: 1 / 1 !important;

    height: auto !important;
    min-height: 0 !important;

    transform: none !important;
}

.home #gform_wrapper_1 .gfield--type-image_choice .gchoice:hover,
.home #gform_wrapper_1 .gfield--type-image_choice .gchoice:focus,
.home #gform_wrapper_1 .gfield--type-image_choice .gchoice:active,
.home #gform_wrapper_1 .gfield--type-image_choice .gchoice:has(input:checked),
.home #gform_wrapper_1 .gfield--type-image_choice .gchoice.gchoice_selected,
.home #gform_wrapper_1 .gfield--type-image_choice .gchoice.gchoice--selected {
    transform: none !important;
}


/* Base label */
#gform_wrapper_1 .gfield--type-image_choice .gchoice label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    color: #18233a !important;
    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font-weight: 500 !important;
    text-align: center !important;

    overflow-wrap: normal !important;
    word-break: normal !important;

    cursor: pointer !important;

    box-sizing: border-box !important;
}


/* Base image */
#gform_wrapper_1 .gfield--type-image_choice .gchoice img {
    display: block !important;

    object-fit: contain !important;
    object-position: center center !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    transform: none !important;
}


/* Selected card: yellow border only, with no movement. */
#gform_wrapper_1 .gfield--type-image_choice .gchoice:has(input:checked),
#gform_wrapper_1 .gfield--type-image_choice .gchoice.gchoice_selected,
#gform_wrapper_1 .gfield--type-image_choice .gchoice.gchoice--selected {
    border-color: #FFD400 !important;
    border-width: 2px !important;

    background: #ffffff !important;

    box-shadow: none !important;
}


/* Neutral hover. */
#gform_wrapper_1 .gfield--type-image_choice .gchoice:hover {
    border-color: #b7bcc3 !important;
}

#gform_wrapper_1 .gfield--type-image_choice .gchoice:has(input:checked):hover {
    border-color: #FFD400 !important;
}


/* Keyboard focus */
#gform_wrapper_1 .gfield--type-image_choice .gchoice:has(input:focus-visible) {
    outline: 2px solid #FFD400 !important;
    outline-offset: 2px !important;
}


/* =========================================================
   DESKTOP IMAGE CHOICES
   ========================================================= */

@media (min-width: 1101px) {

    .home #gform_wrapper_1 .gfield--type-image_choice .gchoice {
        flex: 0 1 180px !important;

        width: 180px !important;
        max-width: 180px !important;
        min-width: 0 !important;
    }

    .home #gform_wrapper_1 .gfield--type-image_choice .gchoice label {
        height: 100% !important;
        min-height: 0 !important;

        padding: 6px 6px 8px !important;
        gap: 4px !important;

        font-size: 13px !important;
        line-height: 1.15 !important;
    }

    .home #gform_wrapper_1 .gfield--type-image_choice .gchoice img {
        width: calc(100% - 8px) !important;
        max-width: calc(100% - 8px) !important;

        height: calc(100% - 32px) !important;
        max-height: calc(100% - 32px) !important;

        margin: 0 auto 3px !important;
    }
}


/* =========================================================
   TABLET IMAGE CHOICES
   ========================================================= */

@media (min-width: 768px) and (max-width: 1100px) {

    .home #gform_wrapper_1 .gfield--type-image_choice .gfield_radio,
    .home #gform_wrapper_1 .gfield--type-image_choice .gfield_checkbox {
        align-items: flex-start !important;

        gap: 12px !important;
    }

    .home #gform_wrapper_1 .gfield--type-image_choice .gchoice {
        flex: 1 1 0 !important;

        width: auto !important;
        max-width: 175px !important;
        min-width: 0 !important;
    }

    .home #gform_wrapper_1 .gfield--type-image_choice .gchoice label {
        height: 100% !important;

        padding: 6px 5px 7px !important;
        gap: 4px !important;

        color: #18233a !important;

        font-size: 12.5px !important;
        line-height: 1.12 !important;
        font-weight: 600 !important;

        overflow: hidden !important;
    }

    .home #gform_wrapper_1 .gfield--type-image_choice .gchoice img {
        width: calc(100% - 10px) !important;
        max-width: calc(100% - 10px) !important;

        height: calc(100% - 34px) !important;
        max-height: calc(100% - 34px) !important;

        margin: 0 auto 3px !important;
    }
}


/* =========================================================
   MOBILE IMAGE CHOICES
   ========================================================= */

@media (max-width: 767px) {

    .home #gform_wrapper_1 .gfield--type-image_choice .gfield_radio,
    .home #gform_wrapper_1 .gfield--type-image_choice .gfield_checkbox {
        justify-content: space-between !important;
        align-items: flex-start !important;

        gap: 8px !important;
    }

    .home #gform_wrapper_1 .gfield--type-image_choice .gchoice {
        flex: 1 1 0 !important;

        width: calc((100% - 16px) / 3) !important;
        max-width: none !important;
        min-width: 0 !important;

        overflow: visible !important;
    }

    .home #gform_wrapper_1 .gfield--type-image_choice .gchoice label {
        position: relative !important;
        z-index: 1 !important;

        height: 100% !important;

        padding: 3px 2px 4px !important;
        gap: 2px !important;

        color: #18233a !important;

        font-size: 9.5px !important;
        line-height: 1.05 !important;
        font-weight: 600 !important;

        overflow: visible !important;
    }

    .home #gform_wrapper_1 .gfield--type-image_choice .gchoice img {
        width: 118% !important;
        max-width: none !important;

        height: auto !important;
        max-height: 84% !important;

        margin: -4px auto 1px !important;
    }
}


/* =========================================================
   MORE THAN 3 IMAGE CHOICES
   Tablet + mobile: rows of 3.
   ========================================================= */

@media (max-width: 1100px) {

    .home #gform_wrapper_1
    .gfield--type-image_choice
    .gfield_radio:has(.gchoice:nth-child(4)),
    .home #gform_wrapper_1
    .gfield--type-image_choice
    .gfield_checkbox:has(.gchoice:nth-child(4)) {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .home #gform_wrapper_1
    .gfield--type-image_choice
    .gfield_radio:has(.gchoice:nth-child(4)) .gchoice,
    .home #gform_wrapper_1
    .gfield--type-image_choice
    .gfield_checkbox:has(.gchoice:nth-child(4)) .gchoice {
        flex: 0 0 calc((100% - 16px) / 3) !important;

        width: calc((100% - 16px) / 3) !important;
        max-width: none !important;
    }
}


/* Tablet uses its 12px gap. */
@media (min-width: 768px) and (max-width: 1100px) {

    .home #gform_wrapper_1
    .gfield--type-image_choice
    .gfield_radio:has(.gchoice:nth-child(4)) .gchoice,
    .home #gform_wrapper_1
    .gfield--type-image_choice
    .gfield_checkbox:has(.gchoice:nth-child(4)) .gchoice {
        flex-basis: calc((100% - 24px) / 3) !important;

        width: calc((100% - 24px) / 3) !important;
    }
}


/* Very narrow phones */
@media (max-width: 380px) {

    .home #gform_wrapper_1 .gfield--type-image_choice .gfield_radio,
    .home #gform_wrapper_1 .gfield--type-image_choice .gfield_checkbox {
        gap: 5px !important;
    }

    .home #gform_wrapper_1 .gfield--type-image_choice .gchoice {
        width: calc((100% - 10px) / 3) !important;
    }

    .home #gform_wrapper_1 .gfield--type-image_choice .gchoice label {
        padding: 2px 1px 3px !important;

        font-size: 8.5px !important;
        line-height: 1.02 !important;
    }

    .home #gform_wrapper_1 .gfield--type-image_choice .gchoice img {
        width: 110% !important;
        max-width: none !important;

        margin-top: -3px !important;
    }

    .home #gform_wrapper_1
    .gfield--type-image_choice
    .gfield_radio:has(.gchoice:nth-child(4)) .gchoice,
    .home #gform_wrapper_1
    .gfield--type-image_choice
    .gfield_checkbox:has(.gchoice:nth-child(4)) .gchoice {
        flex-basis: calc((100% - 10px) / 3) !important;

        width: calc((100% - 10px) / 3) !important;
    }
}

/* =========================================================
   HOMEPAGE PROJECT CARDS
   Equal cards + fixed text + Read More
   ========================================================= */

/* Make Bootstrap project columns stretch their cards */
.home #theme-project .tab-pane > .row > [class*="col-"] {
    display: flex !important;
}


/* Full-height project card */
.home #theme-project .theme-project-content {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;
}


/* Keep image area separate */
.home #theme-project .portfolio-thumbnail {
    flex: 0 0 auto !important;
}


/* Everything underneath the image */
.home #theme-project .content-area {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;

    width: 100% !important;
}


/* =========================================================
   PROJECT TITLE
   Reserve the same amount of space on every card
   ========================================================= */

.home #theme-project .theme-project-title {
    line-height: 1.35 !important;

    min-height: calc(1.35em * 3) !important;
    max-height: calc(1.35em * 3) !important;

    margin-bottom: 10px !important;

    overflow: hidden !important;
}

.home #theme-project .theme-project-title .hover_thumb {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;

    overflow: hidden !important;
}


/* =========================================================
   PROJECT DESCRIPTION
   Exactly 5 lines
   ========================================================= */

.home #theme-project .kinsleyroof-project-excerpt {
    display: -webkit-box !important;

    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 5 !important;

    overflow: hidden !important;

    line-height: 1.55 !important;

    min-height: calc(1.55em * 5) !important;
    max-height: calc(1.55em * 5) !important;

    margin: 0 0 18px 0 !important;
}


/* =========================================================
   READ MORE
   Always sits at bottom of card
   ========================================================= */

.home #theme-project .kinsleyroof-project-readmore {
    display: inline-block !important;

    align-self: flex-start !important;

    margin-top: auto !important;

    padding: 9px 16px !important;

    background: #FFD400 !important;
    color: #111111 !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;

    border: 0 !important;
    border-radius: 3px !important;
}


/* Hover */
.home #theme-project .kinsleyroof-project-readmore:hover,
.home #theme-project .kinsleyroof-project-readmore:focus {
    background: #111111 !important;
    color: #FFD400 !important;

    text-decoration: none !important;
}

/* =========================================================
   BBB ACCREDITED SEAL — BELOW GOOGLE REVIEWS
   ========================================================= */

.kr-bbb-seal {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;

    margin: 28px auto 0;
    padding: 0;

    text-align: center;
}

.kr-bbb-seal > a {
    display: inline-block;
    line-height: 0;
}

.kr-bbb-seal img {
    display: block;

    width: 192px !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 auto;
}


/* Tablet */
@media (max-width: 1024px) {

    .kr-bbb-seal {
        margin-top: 24px;
    }

}


/* Mobile */
@media (max-width: 767px) {

    .kr-bbb-seal {
        margin-top: 20px;
    }

    .kr-bbb-seal img {
        width: 170px !important;
    }

}