/* =====================================================
   IV22 BUILDING & JOINERY - LANDING PAGE CSS v2
   Add to the site stylesheet. Every class here is new,
   so nothing on the existing pages changes.
   Fonts and general text colours are left to the system.
   ===================================================== */


/* 1. SECTION SPACING AND HEADINGS
   ===================================================== */

.iv-section {padding: 65px 0;}
.iv-lead {font-size: 1.2em; max-width: 780px;}
.iv-lead[style*="center"] {margin-left: auto; margin-right: auto;}

/* Orange accent bar under section headings */
#r8_content h2.iv-h2 {position: relative; padding-bottom: 18px; margin-bottom: 22px; line-height: 1.15;}
#r8_content h2.iv-h2:after {content: ""; position: absolute; left: 0; bottom: 0; width: 80px; height: 5px; background: #E84E0C; border-radius: 5px;}
#r8_content h2.iv-h2[style*="center"]:after {left: 50%; margin-left: -40px;}
.ub-compliment h2.iv-h2:after {background: #FFFFFF !important;}

/* Pill label */
.iv-eyebrow {display: inline-block; background: #E84E0C; color: #FFFFFF; padding: 7px 16px; border-radius: 50px; font-weight: 700; font-size: 0.85em; letter-spacing: 0.5px; text-transform: uppercase;}


/* 2. HERO
   ===================================================== */

.iv-hero {padding: 55px 0 45px;}
.iv-hero-text {padding-right: 20px;}
#r8_content .iv-hero h1 {margin: 10px 0 16px; line-height: 1.08;}
.iv-hero-sub {font-size: 1.3em; line-height: 1.4; margin-bottom: 18px;}
.iv-ticks {margin: 0 0 6px;}
.iv-ticks span {display: inline-block; margin: 0 18px 6px 0; font-weight: 700; white-space: nowrap; font-size: 1.1em;}
.iv-contact-line {margin-top: 10px;}
.iv-contact-line a {font-weight: 700; word-break: break-word;}


/* 3. HERO FORM CARD
   ===================================================== */

.iv-form-card {background-color: #FFFFFF; border-top: 6px solid #E84E0C; border-radius: 8px; padding: 24px 22px 16px; box-shadow: 0 14px 40px rgba(0,0,0,0.35);}
#r8_content .iv-form-card p {color: #292929;}
#r8_content .iv-form-card .iv-form-title {font-size: 1.7em; line-height: 1.1; margin-bottom: 6px;}
#r8_content .iv-form-card .iv-form-sub {margin-bottom: 12px;}
#r8_content .iv-form-card .iv-form-foot {margin: 12px 0 0; text-align: center;}
#r8_content .iv-form-card .iv-form-foot a {color: #E84E0C;}

/* Typeform container. Change the heights to suit the finished form */
.iv-form-embed {min-height: 400px; line-height: 0; font-size: 0;}
.iv-form-embed iframe {width: 100% !important; min-height: 400px; border: 0;}


/* 4. BUTTONS
   ===================================================== */

.iv-btn-row {margin-top: 22px;}
.iv-btn-row .btn {margin: 5px 8px 5px 0; min-height: 54px; padding: 15px 26px; font-weight: 700; white-space: normal; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,0.25); transition: transform .2s ease, box-shadow .2s ease;}
.iv-btn-row[style*="center"] .btn {margin: 5px;}
.iv-btn-row .btn:hover {transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,0.3);}
.iv-btn-row .btn.visible-xs, .iv-btn-row .btn.visible-sm {display: none !important;}
.jh-lp-box .btn {font-weight: 700; min-height: 48px; padding-top: 12px; white-space: normal; border-radius: 6px;}

@media only screen and (max-width: 991px) {
  .iv-btn-row .btn.visible-xs, .iv-btn-row .btn.visible-sm {display: inline-block !important;}
}


/* 5. STAT BAND
   ===================================================== */

.iv-stats {padding: 26px 0 14px;}
.iv-stats p {line-height: 1.3; margin-bottom: 12px;}
.iv-stat-num {display: block; font-size: 3.4em; font-weight: 800; line-height: 1;}


/* 6. JH BOXES
   ===================================================== */

/* Service cards */
.jh-lp-box {background-color: #E84E0C; margin: 1em 0; padding: 28px 24px; min-height: 0; display: block; border-radius: 8px; border-bottom: 6px solid #FFFFFF; box-shadow: 0 10px 28px rgba(0,0,0,0.35); transition: transform .25s ease-in-out;}
.jh-lp-box:hover {transform: translateY(-8px);}

/* Review card */
.jh-lp-review {background-color: #FFFFFF; max-width: 880px; margin: 0 auto; padding: 35px; border-left: 8px solid #E84E0C; border-radius: 8px; box-shadow: 0 10px 35px rgba(0,0,0,0.14);}

/* Comparison cards */
.jh-lp-compare-no {background-color: #EFEFEF; margin: 1em 0; padding: 28px; min-height: 0; display: block; border-radius: 8px;}
.jh-lp-compare-no .fa {color: #9A9A9A;}
.jh-lp-compare-yes {background-color: #E84E0C; margin: 1em 0; padding: 28px; min-height: 0; display: block; border-radius: 8px; box-shadow: 0 12px 32px rgba(232,78,12,0.4);}
.jh-lp-compare-no p, .jh-lp-compare-yes p {font-size: 1.1em; margin-bottom: 12px;}

/* Process steps */
.jh-lp-step {background-color: #FFFFFF; margin: 1em 0; padding: 26px 22px; min-height: 0; display: block; border-radius: 8px; box-shadow: 0 10px 26px rgba(0,0,0,0.2); text-align: center;}
.iv-num {display: inline-block; width: 58px; height: 58px; line-height: 58px; border-radius: 50%; background: #292929; color: #FFFFFF; font-size: 1.7em; font-weight: 800;}

@media only screen and (min-width: 992px) {
  .jh-lp-box {min-height: 470px;}
  .jh-lp-step {min-height: 330px;}
  .jh-lp-compare-no, .jh-lp-compare-yes {min-height: 360px;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .jh-lp-box {min-height: 390px;}
  .jh-lp-step {min-height: 270px;}
  .jh-lp-compare-no, .jh-lp-compare-yes {min-height: 420px;}
}


/* 7. ABOUT IMAGE
   ===================================================== */

.iv-img {max-width: 100%; height: auto; border-radius: 4px; box-shadow: -16px 16px 0 0 #E84E0C; margin-bottom: 24px;}


/* 7a. DARK OVERLAY (services and approach sections)
   Raise the last number, up to 1, for a darker overlay
   ===================================================== */

#r8_content .parallax-overlay.iv-dark-overlay {background: rgba(25, 25, 25, 0.6) !important;}


/* 7a-2. LANDING PAGE BACKGROUND IMAGES
   Two new parallaxes, used only on this page
   ===================================================== */

/* Hero */
#r8_content .parallax21 {background-image: url(/shared/images/content/bus_58401/iv22-hero-image.jpg);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

/* Our approach */
#r8_content .parallax22 {background-image: url(/shared/images/content/bus_58401/iv22-approach-image.jpg);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}


/* 7b. WORK GALLERY
   ===================================================== */

.iv-gallery-img {display: block; width: 100%; height: 260px; object-fit: cover; border-radius: 6px; margin-bottom: 14px; box-shadow: 0 8px 22px rgba(0,0,0,0.18); transition: transform .25s ease;}
.iv-gallery-img:hover {transform: scale(1.03);}

@media only screen and (max-width: 767px) {
  .iv-gallery-img {height: 150px; margin-bottom: 4px;}
}


/* 7c. OUR APPROACH BOXES
   ===================================================== */

.jh-lp-approach {background-color: rgba(255,255,255,0.06); border: 2px solid #E84E0C; margin: 1em 0; padding: 30px 24px; min-height: 0; display: block; border-radius: 8px; text-align: center;}
.jh-lp-approach .fa {font-size: 3.2em; color: #E84E0C;}

@media only screen and (min-width: 768px) {
  .jh-lp-approach {min-height: 290px;}
}


/* 7d. LOCAL SECTION IMAGE (shadow on the right-hand side)
   ===================================================== */

.iv-img.iv-img-right {box-shadow: 16px 16px 0 0 #E84E0C;}

/* White shadow, for images on the orange background */
.iv-img.iv-img-white {box-shadow: -16px 16px 0 0 #FFFFFF;}

@media only screen and (max-width: 767px) {
  .iv-img.iv-img-right {margin-left: 0; margin-right: 16px;}
}


/* 8. AREA CHIPS
   ===================================================== */

#r8_content ul.iv-areas {list-style: none !important; padding: 0; margin: 25px auto; max-width: 860px; text-align: center;}
#r8_content ul.iv-areas li {list-style: none !important; display: inline-block; margin: 5px; padding: 9px 18px; border: 2px solid #E84E0C; border-radius: 50px; font-weight: 700;}
#r8_content ul.iv-areas li:before {content: none !important;}
#r8_content ul.iv-areas li .fa {color: #E84E0C;}


/* 9. FINAL CTA
   ===================================================== */

.iv-final-contact {font-size: 1.5em; margin-bottom: 8px; word-break: break-word;}


/* 10. MOBILE
   ===================================================== */

@media only screen and (max-width: 991px) {
  .iv-hero-text {padding-right: 0; text-align: center;}
  .iv-ticks span {margin: 0 8px 6px;}
  .iv-form-card {margin-top: 26px;}
}

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

  .iv-section {padding: 40px 0;}

  /* Hero text block sits above the fold, form follows directly below */
  .iv-hero {padding: 18px 0 26px;}
  .iv-eyebrow {font-size: 11px; padding: 5px 12px;}
  #r8_content .iv-hero h1 {font-size: 29px; margin: 6px 0 10px;}
  .iv-hero-sub {font-size: 16px; margin-bottom: 10px;}
  .iv-ticks span {font-size: 14px; margin: 0 5px 4px;}
  .iv-contact-line {font-size: 14px; margin: 4px 0 0;}

  /* Full width, thumb friendly buttons */
  .iv-btn-row {margin-top: 12px;}
  .iv-btn-row .btn, .iv-btn-row[style*="center"] .btn {display: block !important; width: 100%; margin: 0 0 10px;}

  .iv-stat-num {font-size: 2.6em;}
  .iv-stats p {font-size: 14px;}
  .jh-lp-review {padding: 24px 20px;}
  .iv-final-contact {font-size: 1.15em;}
  .iv-img {margin-left: 16px; max-width: calc(100% - 16px);}

  /* Stops the sticky bar covering the last section */
  .iv-final {padding-bottom: 95px;}
}


/* 11. STICKY CONTACT BAR
   ===================================================== */

#sticky-contact-trigger {height: 0; line-height: 0; overflow: hidden;}

.sticky-contact-bar {position: fixed; left: 0; right: 0; bottom: 0; width: 100%; background: #292929; border-top: 3px solid #E84E0C; box-shadow: 0 -4px 18px rgba(0,0,0,0.25); z-index: 9999; opacity: 0; visibility: hidden; transform: translateY(100%); transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;}
.sticky-contact-bar.is-visible {opacity: 1; visibility: visible; transform: translateY(0);}

.sticky-contact-inner {max-width: 1200px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 25px;}

.sticky-contact-text {color: #ffffff; display: flex; flex-direction: column; line-height: 1.25;}
.sticky-contact-text strong {font-size: 18px; font-weight: 700;}
.sticky-contact-text span {font-size: 14px; margin-top: 2px; opacity: 0.9;}

.sticky-contact-actions {display: flex; align-items: center; gap: 10px; flex-shrink: 0;}

.sticky-contact-btn {min-height: 46px; padding: 11px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 4px; text-decoration: none !important; font-size: 16px; font-weight: 700; line-height: 1; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;}
.sticky-contact-btn:hover, .sticky-contact-btn:focus {text-decoration: none !important; transform: translateY(-1px);}

.sticky-contact-phone {background: #ffffff; color: #292929 !important; border: 2px solid #ffffff;}
.sticky-contact-phone:hover, .sticky-contact-phone:focus {background: #f1f1f1; color: #292929 !important;}

.sticky-contact-form {background: #E84E0C; color: #ffffff !important; border: 2px solid #E84E0C; animation: iv-pulse 2.2s infinite;}
.sticky-contact-form:hover, .sticky-contact-form:focus {background: #ffffff; border-color: #ffffff; color: #292929 !important;}

@keyframes iv-pulse {
  0% {box-shadow: 0 0 0 0 rgba(232,78,12,0.7);}
  70% {box-shadow: 0 0 0 12px rgba(232,78,12,0);}
  100% {box-shadow: 0 0 0 0 rgba(232,78,12,0);}
}

.sticky-phone-mobile {display: none;}

@media only screen and (max-width: 767px) {
  .sticky-contact-bar {border-top-width: 2px;}
  .sticky-contact-inner {padding: 7px 8px; gap: 6px;}
  .sticky-contact-text {display: none;}
  .sticky-contact-actions {width: 100%; gap: 6px;}
  .sticky-contact-btn {flex: 1; min-height: 48px; padding: 9px 10px; font-size: 15px; border-radius: 3px;}
  .sticky-phone-desktop {display: none;}
  .sticky-phone-mobile {display: inline;}
}

@media only screen and (max-width: 380px) {
  .sticky-contact-inner {padding: 6px;}
  .sticky-contact-btn {min-height: 44px; padding: 8px; font-size: 14px;}
}

#r8_content .parallax-overlay .container {
    padding-left: 5px;
    padding-right: 5px;
}

#r8_content h3  {
    font-family: 'Arial Black', Gadget, sans-serif !important;
}

@media (min-width: 1201px) {
    #r8_navbar .navbar.stuck {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        padding-left: 0 !important;
    }
}