/* Noah's Roofing & Guttering: hero and callback feature, November 2026 */
/* The original website layout/styles are retained outside this banner and dialog. */
.banner-container {
    height: auto;
    min-height: 960px;
    align-items: stretch;
    background: #071c3c;
}
.banner-content-side {
    flex: 0 0 61%;
    padding: clamp(43px,4.2vw,82px) clamp(32px,4vw,80px);
    gap: 0;
    background: linear-gradient(145deg,#0c2d5c 0%,#0b244b 56%,#091d40 100%);
    justify-content: center;
}
.banner-container .banner-eyebrow {
    color: #fff;
    font-size: clamp(46px,5.4vw,98px);
    font-weight: 800;
    line-height: 1.045;
    letter-spacing: -.037em;
    text-transform: none;
    margin: 0 0 29px;
    max-width: 1100px;
    overflow-wrap: normal;
}
.banner-container .banner-title {
    font-size: clamp(32px,3.45vw,62px);
    line-height: 1.1;
    letter-spacing: -.03em;
    font-weight: 800;
    text-transform: none !important;
    margin: 0 0 28px;
    color: #3dade2;
    max-width: 950px;
}
.banner-description { max-width: 760px; }
.banner-description p {
    color: #e6edf6;
    font-size: clamp(15px,1.19vw,18px);
    font-weight: 400;
    line-height: 1.63;
    margin: 0 0 17px;
}
.banner-description p:last-child { margin-bottom: 0; }
.banner-description strong { color: #fff; font-weight: 700; }
.banner-callback-panel {
    margin-top: 30px;
    padding: 24px 28px;
    max-width: 520px;
    width: 100%;
    border: 1px solid rgba(255,255,255,.66);
    border-radius: 25px;
    background: rgba(1,22,62,.55);
    box-shadow: 0 18px 45px rgba(0,0,0,.13);
}
.banner-callback-heading {
    color: #fff;
    font-weight: 700;
    font-size: clamp(19px,1.6vw,25px);
    line-height: 1.32;
    margin: 0 0 13px;
}
.banner-callback-phone {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: clamp(23px,2vw,31px);
    line-height: 1.2;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 4px;
    margin-bottom: 18px;
}
.banner-callback-phone:hover,.banner-callback-phone:focus { color: #89dcff; }
.banner-callback-phone svg { flex-shrink: 0; }
.banner-callback-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border: 2px solid #fff;
    border-radius: 999px;
    padding: 10px 15px 10px 23px;
    color: #fff;
    font-size: clamp(16px,1.3vw,20px);
    line-height: 1.5;
    background: #082d64;
    font-weight: 650;
    text-decoration: none;
    transition: background .2s ease,transform .2s ease;
}
.banner-callback-link:hover,.banner-callback-link:focus {
    color: #fff;
    background: #145595;
    transform: translateY(-1px);
}
.banner-callback-arrow {font-size: 28px;line-height: 1;}
.banner-container .banner-slider-side { flex: 0 0 39%; height: auto; min-height: 100%; }
.banner-container .slide-img-item img { object-position: center center; }
/* Overlay to improve legibility over heavily detailed roofing photographs. */
.banner-container .banner-slider-side:after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0;
    background: linear-gradient(90deg,rgba(2,24,51,.17),transparent 24%);
    pointer-events: none; z-index: 1;
}
.banner-container .slider-nav-btn {z-index: 3;}
.banner-container .slider-dots {z-index: 3;}

/* Accessible modal with look matching supplied navy/grey reference form. */
.noah-modal-overlay {
    position: fixed; inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(2,15,37,.72);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.noah-modal-overlay[hidden] { display:none !important; }
body.noah-modal-open { overflow: hidden !important; }
.noah-modal {
    width: min(100%, 620px);
    margin: auto;
    overflow: hidden;
    border-radius: 15px;
    background: #d5dae1;
    box-shadow: 0 26px 100px rgba(0,0,0,.4);
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    text-align: left;
}
.noah-modal-head {
    padding: 24px 34px;
    min-height: 105px;
    background: #072f6b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.noah-modal h2#noah-callback-title {
    color:#fff;
    font-family: Arial,Helvetica,sans-serif;
    font-size:clamp(28px,3vw,37px);
    font-weight:800;
    letter-spacing:-.02em;
    line-height: 1.15;
    margin: 0;
    text-transform: none;
}
.noah-modal-close {
    appearance:none; border: 1px solid rgba(255,255,255,.75);
    color: #fff; background: transparent; width: 40px; height: 40px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; border-radius:50%; cursor:pointer;
    font-size: 27px; line-height: 1;
}
.noah-modal-close:hover,.noah-modal-close:focus {background:rgba(255,255,255,.2);}
.noah-modal-body { padding: 25px 35px 31px; }
.noah-modal-intro {color: #243146;font-size: 15px; line-height:1.5;margin:0 0 20px;}
.noah-form-label {
    display:block; margin: 0 0 7px;
    font-size:16px;line-height:1.35;color:#101923;font-weight:600;
}
.noah-form-field { margin-bottom: 20px; }
.noah-form-input,.noah-form-select,.noah-form-textarea {
    width:100%;height:55px;padding:13px 19px;
    background:#fff; border:2px solid #fff;border-radius:999px;
    box-shadow:0 3px 0 rgba(35,42,53,.35);
    color:#111927;font-family:Arial,Helvetica,sans-serif;
    font-size:17px;line-height:1.3;
    transition:border-color .15s ease;
}
.noah-form-input:focus,.noah-form-select:focus,.noah-form-textarea:focus {
    outline:3px solid rgba(31,116,215,.3);border-color:#1567bd;
}
.noah-form-textarea {height:92px;min-height:80px;resize:vertical;border-radius:23px;}
.noah-phone-combo { display:flex;gap:9px;align-items:stretch; }
.noah-form-select { width:130px; flex-shrink:0;padding:10px 12px;cursor:pointer; }
.noah-phone-combo .noah-form-input {flex:1;min-width:0;}
.noah-form-submit {
    width:100%;min-height:58px;padding:13px 20px;
    display:flex;align-items:center;justify-content:center;
    background:#073574;border:0;border-radius:999px;
    color:#fff;cursor:pointer;
    font-family:Arial,Helvetica,sans-serif;
    font-size:20px;font-weight:700;
    transition:background .2s ease;
}
.noah-form-submit:hover,.noah-form-submit:focus {background:#1457a0;color:#fff;}
.noah-form-submit:disabled {opacity:.72;cursor:wait;}
.noah-form-status {display:none;border-radius:9px;padding:12px 14px;margin:0 0 18px;font-size:15px;line-height:1.5;}
.noah-form-status.is-error {display:block;color:#751e24;background:#fff0ef;}
.noah-form-status.is-success {display:block;color:#115131;background:#e8f9ed;}
.noah-form-footnote {color:#394458;font-size:12px;line-height:1.5;text-align:center;margin:14px 0 0;}
.noah-form-footnote a {color:#072f6b;text-decoration:underline;}
.noah-hp {position:absolute!important;width:1px!important;height:1px!important;left:-9999px!important;overflow:hidden!important;}
@media (max-width: 1080px) {
    .banner-content-side {padding: 43px 34px; flex-basis:61%;}
    .banner-container .banner-slider-side {flex-basis:39%;}
    .banner-container .banner-eyebrow {font-size:clamp(43px,5.4vw,66px);line-height:1.06;}
    .banner-container .banner-title {font-size:clamp(30px,3.5vw,46px);}
}
@media (max-width: 768px) {
    .banner-container {min-height:0;height:auto;display:flex;flex-direction:column;}
    .banner-content-side {flex:0 0 auto;width:100%;padding:45px 22px 42px;}
    .banner-container .banner-eyebrow {font-size:clamp(39px,10.2vw,58px);line-height:1.08;letter-spacing:-.035em;margin-bottom:24px;}
    .banner-container .banner-title {font-size:clamp(30px,7.8vw,43px);line-height:1.14;margin-bottom:24px;}
    .banner-description p {font-size:16px;line-height:1.58;margin-bottom:16px;}
    .banner-callback-panel {margin-top:23px;padding:21px 20px;border-radius:19px;}
    .banner-callback-heading {font-size:20px;}
    .banner-callback-phone {font-size:25px;}
    .banner-container .banner-slider-side {flex:0 0 auto;width:100%;height:310px;min-height:310px;}
}
@media (max-width: 430px) {
    .noah-modal-overlay {padding:10px;align-items:flex-start;}
    .noah-modal {border-radius:12px;}
    .noah-modal-head {min-height:83px;padding:20px 19px;}
    .noah-modal h2#noah-callback-title {font-size:28px;}
    .noah-modal-body {padding:20px 18px 24px;}
    .noah-form-select {width:105px;font-size:14px;padding:7px;}
    .noah-phone-combo {gap:6px;}
    .noah-form-input {font-size:16px;}
    .banner-callback-link {width:100%;}
}
@media (prefers-reduced-motion: reduce) {
    .banner-callback-link,.noah-form-submit {transition:none;}
}