/* Final responsive safeguards: loaded after all theme layers. */
.hero-trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 24px; color: #173d68; font-size: 11px; font-weight: 700; }
.hero-trust-badges span { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust-badges span::before { content: '✓'; display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid #1a84ea; border-radius: 50%; color: #0768ed; font-size: 10px; }
header nav { gap: 30px !important; font-size: 13px !important; letter-spacing: .25px !important; }
.account-delete-form { display: inline-block; margin: 0 0 0 6px; }
.table-actions { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.table-actions form { display: inline-flex; margin: 0; }

/* Site-wide contrast safeguards for blue panels, links, controls and portals. */
.utility-logins .trade-login,
.utility-logins .installer-login { background: #075985 !important; color: #fff !important; }

.page-hero .eyebrow,
.page-hero > p:not(.eyebrow) { color: #fff !important; }

.vehicle-route-grid > div {
  background: linear-gradient(125deg, #062b58, #0057b8) !important;
  color: #fff !important;
}
.vehicle-route-grid > div strong { color: #fff !important; }
.vehicle-route-grid > div .vehicle-route-subheading { color: #e8f6ff !important; }
.vehicle-route-grid > div .vehicle-type-list span {
  border-color: #8bc4ff !important;
  background: rgba(255, 255, 255, .08);
  color: #fff !important;
}
.vehicle-route-grid > div > a { color: #fff !important; text-decoration: underline; text-underline-offset: 4px; }

.info-card span,
.info-card a,
.work-card a,
.recent-heading .eyebrow,
.recent-link span,
.portal-main .eyebrow { color: #0057b8 !important; }

.home-contact .button,
.installer-training .button,
.page-hero .button { background: #0057b8 !important; border-color: #0057b8 !important; color: #fff !important; }
.home-contact .button:hover,
.installer-training .button:hover,
.page-hero .button:hover { background: #003f88 !important; border-color: #003f88 !important; }

.hero-slider .eyebrow { color: #0057b8 !important; }
.credentials-strip span { color: #536b82 !important; }
.standards span { color: #66717a !important; }

.trade-hero .eyebrow,
.trade-hero aside span,
.installer-training .eyebrow { color: #8ce8ff !important; }
.partner-kicker,
.partner-switch button.is-active { color: #0057b8 !important; }

footer h4 { color: #8ce8ff !important; }
.whatsapp { background: #0b6b3a !important; color: #fff !important; }

/* Reference-inspired blue-and-white landing theme. */
.utility-bar { height: 30px; padding: 0 4vw; gap: 22px; background: #062a5b; color: #dcecff; font-size: 10px; }
.utility-bar a { color: inherit; }
.utility-phone::before, .utility-email::before { display: inline-block; margin-right: 6px; color: #78b9ff; font-size: 9px; }
.utility-email::before { content: '✉'; }
.utility-logins { align-self: stretch; gap: 2px; }
.utility-logins a { display: grid; place-items: center; min-width: 128px; padding: 0 14px; border: 1px solid #3688e7; border-radius: 0; background: #073976 !important; font-size: 9px; }
.utility-logins .installer-login { background: #076be5 !important; }
header { height: 78px; padding: 0 4vw; border-bottom-color: #dbeafa; box-shadow: 0 4px 15px rgba(7, 47, 102, .07); }
header .brand-mark { width: 228px; }
header nav { gap: clamp(18px, 2.35vw, 38px) !important; font-size: 11px !important; }
.header-actions .phone { display: none; }
.header-actions .button { padding: 12px 23px; border-radius: 3px; font-size: 10px; }
.hero.hero-slider { min-height: 570px; height: 570px; max-height: none; place-items: stretch; padding: 0; background: #f8fcff; }
.hero-slide { animation: none; opacity: 1; background-position: center right; background-size: cover; }
.slide-motorhome, .slide-rv { background-image: url('motorhome-hero.jpg'); }
.slide-rv { display: none; }
.hero-shade { background: linear-gradient(90deg, #f9fcff 0%, rgba(249,252,255,.98) 26%, rgba(249,252,255,.72) 44%, rgba(249,252,255,.08) 68%, rgba(249,252,255,0) 100%); }
.hero-slider .hero-copy { align-self: center; justify-self: start; max-width: 610px; margin-left: max(7vw, calc((100vw - 1340px) / 2)); padding: 0; text-align: left; }
.hero-slider .eyebrow { margin-bottom: 12px; color: #0871e5 !important; font-size: 11px; letter-spacing: 1.5px; }
.hero-slider h1 { max-width: 550px; color: #062a5b; font-size: clamp(43px, 4.35vw, 67px); line-height: 1.08; letter-spacing: -2.4px; }
.hero-slider h1 em { color: #0871e5; }
.hero-slider .hero-copy > p:not(.eyebrow) { max-width: 410px; color: #4a6686; font-size: 16px; line-height: 1.55; }
.hero-slider .buttons { justify-content: flex-start; margin-top: 27px; gap: 12px; }
.hero-slider .button { padding: 14px 22px; border-radius: 3px; font-size: 10px; }
.hero-slider .hero-secondary { border: 1px solid #78b6ef; background: #fff; color: #0968d9; }
.hero-trust-badges { position: absolute; z-index: 3; bottom: 0; left: 0; right: 0; justify-content: center; gap: 0; margin: 0; padding: 17px 5vw; border-top: 1px solid rgba(123, 167, 211, .32); background: rgba(255,255,255,.86); backdrop-filter: blur(7px); }
.hero-trust-badges span { min-width: 190px; justify-content: center; padding: 0 24px; border-left: 1px solid #d6e5f4; color: #315276; font-size: 11px; }
.hero-trust-badges span:first-child { border-left: 0; }
.hero-trust-badges span::before { border-color: #72acf1; color: #0668ed; }
@media (max-width: 900px) { header .brand-mark { width: 202px; } header nav { gap: 15px !important; font-size: 10px !important; } .hero-slider .hero-copy { margin-left: 7vw; } .hero-trust-badges span { min-width: 0; padding: 0 15px; } }
@media (max-width: 700px) { .utility-phone { display: none; } .utility-bar { gap: 10px; } .utility-logins a { min-width: auto; padding: 0 8px; font-size: 8px; } header { height: 70px; } header .brand-mark { width: 184px; } .hero.hero-slider { min-height: 600px; height: 600px; } .hero-slide { background-position: 63% center; } .hero-shade { background: linear-gradient(90deg, rgba(249,252,255,.98), rgba(249,252,255,.83) 55%, rgba(249,252,255,.22)); } .hero-slider .hero-copy { align-self: start; margin: 0; padding: 74px 7vw 0; } .hero-slider h1 { font-size: 43px; } .hero-trust-badges { display: grid; grid-template-columns: 1fr 1fr; justify-items: start; gap: 10px 0; padding: 13px 7vw; } .hero-trust-badges span { min-width: 0; justify-content: flex-start; padding: 0 10px; font-size: 9px; } .hero-trust-badges span:nth-child(odd) { border-left: 0; } }

/* Restore a more confident heading hierarchy. */
header nav { font-size: 15px !important; font-weight: 700; }
.page-hero h1 { font-size: clamp(52px, 5.15vw, 78px); line-height: 1.05; }
.section > h2,
.section > div > h2,
.leisure-specialist h2,
.recent-heading h2,
.dedicated h2,
.home-faq h2,
.contact-form-title h2 { font-size: clamp(36px, 3.9vw, 54px); line-height: 1.1; letter-spacing: -1.5px; }
.reference-services-heading h2 { font-size: clamp(38px, 4vw, 54px); }
.reference-service h3 { font-size: 24px; }
@media (max-width: 900px) { header nav { font-size: 13px !important; } }
@media (max-width: 700px) { .page-hero h1 { font-size: clamp(42px, 12vw, 56px); } .section > h2,.section > div > h2,.leisure-specialist h2,.recent-heading h2,.dedicated h2,.home-faq h2,.contact-form-title h2 { font-size: clamp(31px, 9vw, 42px); } .reference-services-heading h2 { font-size: 36px; } }

/* Balanced footer navigation without a repeated brand block. */
.site-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 180px)) minmax(250px, 280px);
  justify-content: center;
  align-items: start;
  column-gap: clamp(28px, 3.5vw, 52px);
  row-gap: 38px;
  margin-top: 0;
  padding: 80px 7vw 32px;
  background: #062633 !important;
}
.site-footer .footer-column { min-width: 0; }
.site-footer h4 { margin: 0 0 11px; font-size: 11px; letter-spacing: 1.55px; }
.site-footer .footer-column > a {
  display: block;
  width: fit-content;
  margin: 0 0 10px;
  color: #f4f8fc;
  font-size: 14px;
  line-height: 1.45;
}
.site-footer .footer-column > a:hover { color: #8ce8ff; }
.site-footer address {
  margin-top: 16px;
  color: #d5e3ef;
  font-size: 13px;
  font-style: normal;
  line-height: 1.75;
}
.site-footer .social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 23px;
  padding-top: 19px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.site-footer .social-label { flex: 0 0 100%; margin: 0 0 4px; color: #b9d0e2; }
.site-footer .footer-bottom { margin-top: 8px; }
.site-footer .footer-bottom .legal-links,
.site-footer .footer-bottom .legal-links a,
.site-footer .footer-bottom .legal-links a::after {
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

@media (max-width: 950px) {
  .site-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; column-gap: 42px; padding: 74px 7vw 30px; }
}
@media (max-width: 600px) {
  .site-footer { grid-template-columns: 1fr; gap: 27px; margin-top: 0; padding: 60px 7vw 26px; }
  .site-footer .footer-bottom { justify-items: start; width: 100%; margin-top: 4px; text-align: left; }
  .site-footer .footer-bottom .legal-links { justify-content: flex-start; flex-wrap: wrap; gap: 9px 14px; }
  .site-footer .footer-bottom .legal-links a + a::before { display: none; }
}

.job-form .section-heading h2,
.evidence-dialog-header h2 { color: #fff !important; }
.stat-grid span,
.portal-table th { color: #596b76; }
@media (max-width: 700px) {
  header {
    height: 76px;
    min-height: 76px;
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 0 5vw;
  }
  header nav { display: none !important; }
  header .brand { flex: 1; min-width: 0; }
  header .brand-mark {
    display: block !important;
    width: min(52vw, 205px) !important;
    height: auto !important;
    max-width: 100% !important;
  }
  .header-actions { flex: 0 0 auto; margin-left: auto; }
  .header-actions .phone { display: none !important; }
  .header-actions .button { padding: 10px 12px; font-size: 8px; }
  .credentials-strip { grid-template-columns: 1fr; gap: 14px; margin: 0 5vw; padding: 19px; }
  .credentials-strip > div { padding: 0; border: 0; }
  .leisure-specialist { grid-template-columns: 1fr; gap: 18px; padding: 56px 7vw 22px; }
  .leisure-specialist > p { font-size: 15px; }
  .reference-services { padding-top: 52px; }
  .reference-service { min-height: 225px; }
  .reference-service::after { width: 52%; }
  .trade-channel-cta { align-items: flex-start; flex-direction: column; gap: 25px; margin: 0 5vw; padding: 38px 27px; }
  .trade-channel-cta .button { width: 100%; text-align: center; white-space: normal; }
  .hero-trust-badges { justify-content: flex-start; gap: 8px 13px; margin-top: 20px; font-size: 10px; }
}

/* Refined primary navigation: larger, clearer, and usable at every width. */
header {
  min-height: 100px;
  height: 100px;
  gap: clamp(18px, 2.6vw, 38px);
  padding: 0 clamp(28px, 4vw, 70px);
}

header .brand { flex: 0 0 auto; }
header .brand-mark {
  width: clamp(275px, 24vw, 330px) !important;
  max-height: 76px;
  object-fit: contain;
  height: auto !important;
}
header nav {
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.15vw, 34px) !important;
  color: #0b3564;
  font-size: clamp(14px, 1.15vw, 16px) !important;
  font-weight: 800 !important;
  letter-spacing: .1px !important;
}
header nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 100px;
  padding: 6px 0;
  white-space: nowrap;
  transition: color .2s ease;
}
header nav a::after {
  position: absolute;
  right: 0;
  bottom: 24px;
  left: 0;
  height: 3px;
  border-radius: 99px;
  background: #0871e5;
  content: '';
  opacity: 0;
  transform: scaleX(.55);
  transition: opacity .2s ease, transform .2s ease;
}
header nav a:hover,
header nav a.is-active { color: #0871e5; }
header nav a:hover::after,
header nav a.is-active::after { opacity: 1; transform: scaleX(1); }
.header-actions .button { padding: 13px 20px; font-size: 10px; letter-spacing: .9px; }

@media (max-width: 1120px) {
  header { gap: 16px; padding: 0 4vw; }
  header .brand-mark { width: clamp(245px, 25vw, 290px) !important; }
  header nav { justify-content: flex-start; gap: 20px !important; overflow-x: auto; scrollbar-width: none; }
  header nav::-webkit-scrollbar { display: none; }
}

@media (max-width: 700px) {
  header {
    height: auto !important;
    min-height: 76px;
    flex-wrap: wrap;
    align-content: start;
    gap: 0 12px;
    padding: 10px 5vw 0;
  }
  header .brand { flex: 1 1 0; min-width: 0; }
  header .brand-mark { width: min(57vw, 245px) !important; max-width: 100% !important; }
  .header-actions { flex: 0 0 auto; margin-left: auto; }
  .header-actions .button { padding: 11px 13px; font-size: 9px; }
  header nav {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    min-height: 49px;
    margin-top: 10px;
    padding: 0;
    justify-content: flex-start;
    gap: 22px !important;
    border-top: 1px solid #dceafa;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  header nav a {
    flex: 0 0 auto;
    min-height: 49px;
    padding: 10px 0 9px;
    font-size: 0 !important;
  }
  header nav a::before { content: attr(data-mobile-label); font-size: 12px; line-height: 1.2; }
  header nav a::after { bottom: 0; height: 2px; }
}

/* Give the portal controls an even, single-line mobile footprint. */
@media (max-width: 700px) {
  .utility-bar { height: 38px; min-height: 38px; gap: 8px; }
  .utility-logins { gap: 6px; }
  .utility-logins a {
    box-sizing: border-box;
    width: 96px;
    min-width: 96px;
    height: 30px;
    padding: 0 !important;
    font-size: 9px !important;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .utility-email { display: none; }
  .utility-logins a { width: 112px; min-width: 112px; }
}

/* Final supplied logo: crop the unused lower canvas in the header only. */
.final-logo-header {
  height: 116px;
  min-height: 116px;
}
.final-logo-header .final-brand {
  flex: 0 0 180px;
  width: 180px;
  height: 108px;
  overflow: hidden;
}
.final-logo-header .final-brand strong {
  display: block;
  width: 180px;
  height: 108px;
  overflow: hidden;
}
.final-logo-header .final-brand-mark {
  display: block !important;
  width: 180px !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: initial;
}
.final-logo-header nav a { min-height: 116px; }
.final-logo-header nav a::after { bottom: 24px; }

@media (max-width: 1120px) {
  .final-logo-header { height: 108px; min-height: 108px; }
  .final-logo-header .final-brand,
  .final-logo-header .final-brand strong { width: 165px; height: 99px; }
  .final-logo-header .final-brand { flex-basis: 165px; }
  .final-logo-header .final-brand-mark { width: 165px !important; }
  .final-logo-header nav a { min-height: 108px; }
  .final-logo-header nav a::after { bottom: 20px; }
}

@media (max-width: 700px) {
  .final-logo-header { height: auto !important; min-height: 0; }
  .final-logo-header .final-brand {
    flex: 1 1 0;
    width: auto;
    height: 78px;
  }
  .final-logo-header .final-brand strong {
    width: 100%;
    height: 78px;
  }
  .final-logo-header .final-brand-mark { width: min(100%, 130px) !important; }
  .final-logo-header nav a { min-height: 49px; }
  .final-logo-header nav a::after { bottom: 0; }
}

/* Restore the direct call action beside the quote action on wider screens. */
@media (min-width: 701px) {
  .final-logo-header .header-actions .phone {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 17px;
    border: 1px solid #9ec6ef;
    border-radius: 4px;
    background: #f5faff;
    color: #0b457d;
    font-size: 11px;
    font-weight: 800;
  }
}

@media (max-width: 900px) and (min-width: 701px) {
  .final-logo-header .header-actions .phone { display: none !important; }
}

/* Larger portal-login controls in the top bar. */
@media (min-width: 701px) {
  .utility-bar { height: 40px; min-height: 40px; }
  .utility-logins { align-self: center; gap: 6px; }
  .utility-logins a { min-width: 150px; height: 32px; padding: 0 16px; font-size: 10px; }
}

@media (max-width: 700px) {
  .utility-bar { height: 40px; min-height: 40px; }
  .utility-logins a { width: 102px; min-width: 102px; height: 32px; }
}

@media (max-width: 360px) {
  .utility-logins a { width: 116px; min-width: 116px; height: 32px; }
}