/* Base styles and shared components. Desktop overrides live in desktop.css. */
html { font-size: 1px; scroll-behavior: smooth; scroll-padding-top: 12px; }
body { margin: 0; font-size: 16rem; background: #CFC8BA; -webkit-text-size-adjust: 100%; }
@media (max-width: 1120px) {
  html { font-size: calc(100vw / 1120); }
}
@media (max-width: 780px) {
  html { font-size: calc(100vw / 430); scroll-behavior: auto; }
}
/* Use a single-line company name in the desktop layout. */
@media (min-width: 781px) {
  .hd-name br { display: none; }
}
* { box-sizing: border-box; }
a { color: #1B4F8A; }
a:hover { color: #0F3360; }
h1, h2, p { font-feature-settings: "palt"; }
input, select, button { max-width: 100%; }
input:focus, select:focus { outline: 3rem solid #F5B700; outline-offset: 1rem; }
button[type=submit]:active { transform: translate(2rem, 2rem); box-shadow: 2rem 2rem 0 #1A1A1A !important; }
.sticky { font-family: 'Zen Maru Gothic', sans-serif; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-width: none; margin: 0; padding-bottom: calc(10rem + env(safe-area-inset-bottom)) !important; }
.page { padding-bottom: 96rem !important; }

.page { max-width: 430rem; margin: 0 auto; box-sizing: border-box; background: #F4F1EA; font-family: 'Zen Maru Gothic', sans-serif; color: #1A1A1A; overflow: hidden; padding-bottom: 24rem; }

.hero { background: #1B4F8A; padding: 0 0 24rem; }

.site-header { display: flex; justify-content: space-between; align-items: center; padding: 12rem 16rem; background: #FFFFFF; border-bottom: 3rem solid #1A1A1A; }

.header-brand { display: flex; align-items: center; gap: 6rem; }

.header-logo { height: 30rem; width: auto; display: block; }

.hd-name { font-size: 13rem; font-weight: 700; color: #1A1A1A; white-space: nowrap; line-height: 1.25; }

.header-phone { white-space: nowrap; display: flex; align-items: center; gap: 6rem; min-height: 44rem; padding: 0 12rem; border: 2rem solid #1A1A1A; border-radius: 22rem; font-size: 14rem; font-weight: 900; color: #1A1A1A; text-decoration: none; }

.hero-photo { position: relative; height: auto; background: #3A4452; border-bottom: 3rem solid #1A1A1A; overflow: hidden; }

.hero-photo-image { width: 100%; height: auto; display: block; }
.hero-photo--trimmed .hero-photo-image { width: 117.1875%; max-width: none; margin-left: -11.71875%; }

.hero-photo-caption { margin: 20rem 16rem; }

.hero-photo-label { display: inline-block; background: #F5B700; color: #1A1A1A; font-size: 14rem; font-weight: 900; padding: 4rem 10rem; border-radius: 4rem; border: 2rem solid #1A1A1A; }
.hero--full-image .hero-photo-label { display: block; width: 100%; padding: 10rem 8rem; font-size: 16rem; text-align: center; white-space: nowrap; }

.hero-title { margin: 0 16rem; position: relative; background: #1A1A1A; border: 3rem solid #1A1A1A; border-radius: 6rem; padding: 18rem 18rem 20rem; box-shadow: 6rem 6rem 0 #F5B700; }

@media (max-width: 780px) {
  .hero--overlay .hero-layout { position: relative; }
  .hero--overlay .hero-photo { height: 400rem; }
  .hero--overlay .hero-photo-image { height: 100%; object-fit: cover; }
  .hero--overlay .hero-photo-caption { position: absolute; top: 16rem; left: 16rem; right: 16rem; z-index: 1; margin: 0; }
  .hero--overlay .hero-title { margin: -96rem 16rem 0; }
  .hero--overlay .hero-heading { font-size: 30rem; line-height: 1.4; }
}

.hero-heading { margin: 0; font-family: 'Dela Gothic One', sans-serif; font-weight: 400; font-size: 34rem; line-height: 1.3; color: #FFFFFF; }

.text-yellow { color: rgb(245, 183, 0); }

.hero-lead { margin: 20rem 16rem 0; color: #FFFFFF; }

.hero-lead-text { margin: 0; font-size: 17rem; font-weight: 900; line-height: 1.6; }

.hero-schedule { margin: 16rem 16rem 0; position: relative; background: #FFFFFF; border: 3rem solid #1A1A1A; border-radius: 22rem; padding: 14rem 18rem; }

.speech-tail { position: absolute; top: -12rem; left: 28rem; width: 18rem; height: 18rem; background: #FFFFFF; border-left: 3rem solid #1A1A1A; border-top: 3rem solid #1A1A1A; transform: rotate(45deg); }

.schedule-lead { position: relative; font-size: 17rem; font-weight: 900; line-height: 1.55; }

.schedule-highlight { position: relative; margin-top: 2rem; font-family: 'Dela Gothic One', sans-serif; font-size: 22rem; color: #1B4F8A; }

.schedule-note { position: relative; margin-top: 2rem; font-size: 16rem; font-weight: 900; }

.hero-badges { display: flex; flex-wrap: wrap; gap: 8rem; margin: 16rem 16rem 0; }

.hero-badge { background: #FFFFFF; border: 2rem solid #1A1A1A; border-radius: 4rem; padding: 6rem 10rem; font-size: 14rem; font-weight: 700; }

.hero-price { margin: 16rem 16rem 0; background: #F5B700; border: 3rem solid #1A1A1A; border-radius: 6rem; padding: 12rem 16rem; display: flex; flex-direction: column; align-items: center; gap: 2rem; box-shadow: 5rem 5rem 0 #1A1A1A; }

.text-label { font-size: 15rem; font-weight: 900; }

.hero-price-amount { font-family: "Dela Gothic One", sans-serif; font-size: 32rem; white-space: nowrap; }

.hero-note { margin: 8rem 16rem 0; font-size: 13rem; font-weight: 700; color: #FFFFFF; line-height: 1.6; }

.hero-price-link { display: flex; align-items: center; justify-content: center; gap: 6rem; margin: 10rem 16rem 0; min-height: 44rem; border: 2rem solid #FFFFFF; border-radius: 22rem; color: #FFFFFF; font-size: 15rem; font-weight: 900; text-decoration: none; }

.hero-action-panel { margin: 20rem 16rem 0; background: #FFFFFF; border: 3rem solid #1A1A1A; border-radius: 6rem; padding: 18rem 16rem; box-shadow: 5rem 5rem 0 #1A1A1A; }

.hero-quote-link { display: flex; align-items: center; justify-content: center; min-height: 56rem; border: 3rem solid #1A1A1A; border-radius: 8rem; background: #E8541E; color: #FFFFFF; font-size: 17rem; font-weight: 900; text-decoration: none; box-shadow: 4rem 4rem 0 #1A1A1A; }

.hero-household-note { margin: 14rem 0 0; text-align: center; font-size: 14rem; font-weight: 700; line-height: 1.6; color: #1A1A1A; }

.section-card { margin: 28rem 16rem 0; background: #FFFFFF; border: 3rem solid #1A1A1A; border-radius: 6rem; padding: 20rem 16rem; box-shadow: 5rem 5rem 0 #1A1A1A; }

.section-number { display: inline-block; background: #1A1A1A; color: #FFFFFF; font-family: 'Dela Gothic One', sans-serif; font-size: 14rem; padding: 2rem 10rem; border-radius: 3rem; }

.section-heading { margin: 10rem 0 0; font-family: 'Dela Gothic One', sans-serif; font-weight: 400; font-size: 24rem; line-height: 1.4; color: #1B4F8A; }

.concerns-image { margin-top: 16rem; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 2rem solid #1A1A1A; border-radius: 6rem; display: block; box-sizing: border-box; }

.concerns-list { display: flex; flex-direction: column; gap: 12rem; margin-top: 16rem; }

.concern-bubble { align-self: flex-start; max-width: 310rem; background: #FFFFFF; border: 2rem solid #1A1A1A; border-radius: 18rem 18rem 18rem 4rem; padding: 10rem 14rem; font-size: 15rem; font-weight: 700; line-height: 1.5; }

.concern-bubble-end { align-self: flex-end; max-width: 310rem; background: #FFFFFF; border: 2rem solid #1A1A1A; border-radius: 18rem 18rem 4rem 18rem; padding: 10rem 14rem; font-size: 15rem; font-weight: 700; line-height: 1.5; }

.rules-table { margin-top: 14rem; display: flex; flex-direction: column; gap: 0; border: 2rem solid #1A1A1A; border-radius: 6rem; overflow: hidden; }

.rules-row-bordered { display: flex; border-bottom: 2rem solid #1A1A1A; }

.rules-label { width: 92rem; flex: none; background: #EEF3F8; padding: 10rem; font-size: 14rem; font-weight: 900; }

.rules-value { padding: 10rem; font-size: 14rem; line-height: 1.5; }

.rules-row { display: flex; }

.text-muted-small { font-size: 14rem; color: #4A5563; }

.source-note { margin: 8rem 0 0; font-size: 13rem; color: #4A5563; }

.rules-message { margin-top: 16rem; font-size: 16rem; font-weight: 900; text-align: center; line-height: 1.5; }

.benefits-heading { margin: 10rem 0 0; font-family: 'Dela Gothic One', sans-serif; font-weight: 400; font-size: 26rem; line-height: 1.4; color: #1B4F8A; }

.heading-eyebrow { display: block; font-size: 17rem; white-space: nowrap; }

.benefits-image { margin-top: 16rem; width: 100%; height: 220rem; object-fit: cover; object-position: 50% 40%; border: 2rem solid #1A1A1A; border-radius: 6rem; display: block; box-sizing: border-box; }

.benefits-list { display: flex; flex-direction: column; gap: 10rem; margin-top: 16rem; }

.benefit-item { display: flex; gap: 12rem; align-items: center; }

.benefit-number { flex: none; width: 44rem; height: 44rem; border-radius: 22rem; background: #1B4F8A; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: 'Dela Gothic One', sans-serif; font-size: 15rem; }

.benefit-text { font-size: 15rem; font-weight: 700; line-height: 1.5; }

.text-red { color: #D0021B; }

.text-red-nowrap { color: #D0021B; white-space: nowrap; }

.comparison-table { margin-top: 14rem; display: grid; grid-template-columns: 64rem minmax(0, 1fr) minmax(0, 1fr); border: 2rem solid #1A1A1A; border-radius: 6rem; overflow: hidden; font-size: 14rem; line-height: 1.45; }

.comparison-corner { background: #1A1A1A; }

.comparison-self-heading { background: #DDE3EA; padding: 8rem; font-weight: 900; text-align: center; border-left: 1rem solid #CBD5E1; }

.comparison-amt-heading { background: #1B4F8A; color: #FFFFFF; padding: 8rem; font-weight: 900; text-align: center; border-left: 1rem solid #CBD5E1; }

.comparison-label { background: #EEF3F8; padding: 8rem; font-weight: 900; border-top: 2rem solid #1A1A1A; }

.comparison-self-cell { padding: 8rem; border-top: 2rem solid #1A1A1A; border-left: 1rem solid #1A1A1A; color: #4A5563; }

.comparison-amt-cell { padding: 8rem; border-top: 2rem solid #1A1A1A; border-left: 1rem solid #1A1A1A; font-weight: 700; }

.comparison-label-note { font-size: 13rem; font-weight: 700; }

.text-small { font-size: 13rem; }

.comparison-price-cell { padding: 8rem; border-top: 2rem solid #1A1A1A; border-left: 1rem solid #1A1A1A; font-weight: 700; background: #FFF4CC; }

.comparison-price { font-family: 'Dela Gothic One', sans-serif; font-weight: 400; font-size: 17rem; }

.comparison-message { margin-top: 14rem; background: #F5B700; border: 2rem solid #1A1A1A; border-radius: 18rem; padding: 12rem 16rem; font-size: 15rem; font-weight: 900; text-align: center; line-height: 1.6; }

.comparison-note { margin: 8rem 0 0; font-size: 13rem; color: #4A5563; line-height: 1.6; }

.pricing-intro { margin: 6rem 0 0; font-size: 14rem; font-weight: 700; line-height: 1.6; }

.pricing-unit { margin-top: 12rem; background: #FFF4CC; border: 2rem solid #1A1A1A; border-radius: 6rem; padding: 12rem; text-align: center; }

.pricing-unit-label { font-size: 14rem; font-weight: 900; }

.pricing-unit-price { font-family: 'Dela Gothic One', sans-serif; font-size: 30rem; line-height: 1.2; }

.pricing-unit-suffix { font-family: 'Zen Maru Gothic', sans-serif; font-size: 14rem; font-weight: 900; }

.pricing-subheading { margin-top: 14rem; font-size: 14rem; font-weight: 900; }

.monthly-prices { margin-top: 8rem; display: flex; flex-direction: column; border: 2rem solid #1A1A1A; border-radius: 6rem; overflow: hidden; }

.monthly-price-row { display: flex; justify-content: space-between; align-items: center; padding: 12rem; border-bottom: 2rem solid #1A1A1A; }

.monthly-price-amount { font-family: 'Dela Gothic One', sans-serif; font-size: 18rem; }

.monthly-price-quote { font-family: 'Zen Maru Gothic', sans-serif; font-size: 15rem; font-weight: 900; white-space: nowrap; }

.monthly-price-row-highlight { display: flex; justify-content: space-between; align-items: center; padding: 12rem; border-bottom: 2rem solid #1A1A1A; background: #FFF4CC; }

.monthly-price-row-last { display: flex; justify-content: space-between; align-items: center; padding: 12rem; }

.pricing-bag-note { margin: 6rem 0 0; font-size: 13rem; color: #4A5563; }

.plan-heading { margin-top: 16rem; font-size: 14rem; font-weight: 900; }

.plan-flow { margin-top: 8rem; display: grid; grid-template-columns: minmax(0, 1fr) 28rem minmax(0, 1fr); align-items: stretch; }

.plan-card { border: 2rem solid #1A1A1A; border-radius: 6rem; padding: 10rem; text-align: center; background: #FFFFFF; }

.plan-period { display: inline-block; background: #1A1A1A; color: #FFFFFF; font-size: 13rem; font-weight: 900; padding: 2rem 8rem; border-radius: 3rem; }

.plan-title { margin-top: 6rem; font-family: 'Dela Gothic One', sans-serif; font-size: 18rem; }

.plan-description { margin-top: 4rem; font-size: 14rem; line-height: 1.5; }

.plan-arrow { display: flex; align-items: center; justify-content: center; }

.plan-card-highlight { border: 3rem solid #1A1A1A; border-radius: 6rem; padding: 10rem; text-align: center; background: #FFF4CC; }

.plan-period-highlight { display: inline-block; background: #E8541E; color: #FFFFFF; font-size: 13rem; font-weight: 900; padding: 2rem 8rem; border-radius: 3rem; }

.plan-title-highlight { margin-top: 6rem; font-family: 'Dela Gothic One', sans-serif; font-size: 18rem; color: #1B4F8A; }

.pricing-frequency { margin: 8rem 0 0; font-size: 14rem; color: #4A5563; line-height: 1.6; }

.pricing-note { margin: 4rem 0 0; font-size: 13rem; color: #4A5563; line-height: 1.6; }

.switching-card { margin: 28rem 16rem 0; background: #FFF4CC; border: 3rem solid #1A1A1A; border-radius: 6rem; padding: 20rem 16rem; box-shadow: 5rem 5rem 0 #1A1A1A; }

.switching-badge { display: inline-block; background: #E8541E; color: #FFFFFF; font-size: 14rem; font-weight: 900; padding: 3rem 10rem; border-radius: 3rem; border: 2rem solid #1A1A1A; }

.switching-list { display: flex; flex-direction: column; gap: 10rem; margin-top: 14rem; }

.switching-bubble { align-self: flex-start; max-width: 280rem; background: #FFFFFF; border: 2rem solid #1A1A1A; border-radius: 18rem 18rem 18rem 4rem; padding: 10rem 14rem; font-size: 15rem; font-weight: 700; line-height: 1.5; }

.switching-bubble-end { align-self: flex-end; max-width: 280rem; background: #FFFFFF; border: 2rem solid #1A1A1A; border-radius: 18rem 18rem 4rem 18rem; padding: 10rem 14rem; font-size: 15rem; font-weight: 700; line-height: 1.5; }

.switching-description { margin: 16rem 0 0; font-size: 15rem; font-weight: 700; line-height: 1.7; }

.switching-link { display: flex; align-items: center; justify-content: center; margin-top: 14rem; min-height: 52rem; border: 3rem solid #1A1A1A; border-radius: 8rem; background: #FFFFFF; color: #1A1A1A; font-size: 16rem; font-weight: 900; text-decoration: none; box-shadow: 4rem 4rem 0 #1A1A1A; }

.voice-card { margin: 28rem 16rem 0; background: #1B4F8A; border: 3rem solid #1A1A1A; border-radius: 6rem; padding: 20rem 16rem; box-shadow: 5rem 5rem 0 #1A1A1A; color: #FFFFFF; }

.voice-number { display: inline-block; background: #F5B700; color: #1A1A1A; font-family: 'Dela Gothic One', sans-serif; font-size: 14rem; padding: 2rem 10rem; border-radius: 3rem; }

.voice-heading { margin: 10rem 0 0; font-family: 'Dela Gothic One', sans-serif; font-weight: 400; font-size: 24rem; line-height: 1.4; }

.voice-list { display: flex; flex-direction: column; gap: 16rem; margin-top: 14rem; }

.voice-item { display: flex; gap: 12rem; align-items: flex-start; }

.voice-avatar { flex: none; width: 76rem; height: 76rem; border-radius: 38rem; border: 3rem solid #1A1A1A; background: #D9DEE5; color: #4A5563; font-size: 12rem; font-weight: 700; display: flex; align-items: center; justify-content: center; text-align: center; }

.voice-quote { background: #FFFFFF; color: #1A1A1A; border: 2rem solid #1A1A1A; border-radius: 4rem 18rem 18rem 18rem; padding: 10rem 12rem; font-size: 14rem; font-weight: 700; line-height: 1.55; }

.voice-attribution { margin-top: 6rem; font-size: 13rem; font-weight: 500; color: #4A5563; }

.steps-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8rem; margin-top: 14rem; }

.step-card { border: 2rem solid #1A1A1A; border-radius: 6rem; padding: 8rem; text-align: center; }

.step-inquiry-image { width: 100%; height: 70rem; object-fit: cover; object-position: 50% 40%; border-radius: 4rem; display: block; }

.step-number { margin-top: 6rem; font-family: 'Dela Gothic One', sans-serif; font-size: 14rem; color: #1B4F8A; }

.step-description { font-size: 14rem; font-weight: 700; line-height: 1.4; }

.step-weigh-image { width: 100%; height: 70rem; object-fit: cover; object-position: 50% 70%; border-radius: 4rem; display: block; }

.step-truck-image { width: 100%; height: 70rem; object-fit: cover; object-position: 45% 55%; border-radius: 4rem; display: block; }

.trust-image { margin-top: 12rem; width: 100%; height: 200rem; object-fit: cover; object-position: 50% 55%; border: 2rem solid #1A1A1A; border-radius: 6rem; display: block; box-sizing: border-box; }

.trust-details { margin-top: 12rem; display: flex; flex-direction: column; gap: 6rem; font-size: 14rem; line-height: 1.5; }

.permit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem 12rem; padding-left: 4rem; }

.trust-area-note { margin: 10rem 0 0; font-size: 13rem; color: #4A5563; line-height: 1.5; }

.permit-subheading { margin-top: 6rem; }

.permit-link { padding-left: 4rem; }

.trust-disclaimer { margin: 4rem 0 0; font-size: 13rem; color: #4A5563; line-height: 1.5; }

.contact-card { margin: 28rem 16rem 0; background: #F5B700; border: 3rem solid #1A1A1A; border-radius: 6rem; padding: 20rem 16rem; box-shadow: 5rem 5rem 0 #1A1A1A; }

.contact-heading { margin: 0; font-family: 'Dela Gothic One', sans-serif; font-weight: 400; font-size: 24rem; line-height: 1.4; text-align: center; color: #1B4F8A; }

.quote-form { display: flex; flex-direction: column; gap: 12rem; margin-top: 14rem; }

.form-field { display: flex; flex-direction: column; gap: 4rem; font-size: 14rem; font-weight: 700; }

.form-input { height: 46rem; border: 2rem solid #1A1A1A; border-radius: 6rem; padding: 0 12rem; font-size: 16rem; font-family: inherit; background: #FFFFFF; }

.form-input-name { height: 46rem; border: 2rem solid #1A1A1A; border-radius: 6rem; padding: 0 12rem; font-size: 16rem; font-family: inherit; }

.form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10rem; }

.form-select { height: 46rem; border: 2rem solid #1A1A1A; border-radius: 6rem; padding: 0 8rem; font-size: 16rem; font-family: inherit; background: #FFFFFF; }

.form-optional { border: 2rem dashed #8A94A3; border-radius: 6rem; padding: 10rem; background: #F7F8FA; }

.form-optional-heading { font-size: 14rem; font-weight: 900; color: #4A5563; }

.form-optional-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10rem; margin-top: 6rem; }

.form-field-current { display: flex; flex-direction: column; gap: 4rem; font-size: 14rem; font-weight: 700; margin-top: 10rem; }

.form-submit { min-height: 56rem; border: 3rem solid #1A1A1A; border-radius: 8rem; background: #E8541E; color: #FFFFFF; font-size: 17rem; font-weight: 900; font-family: inherit; box-shadow: 4rem 4rem 0 #1A1A1A; cursor: pointer; }

.contact-note { margin: 10rem 0 0; font-size: 14rem; text-align: center; font-weight: 700; }

.contact-line { display: flex; align-items: center; justify-content: center; gap: 8rem; margin-top: 12rem; min-height: 52rem; border: 3rem solid #1A1A1A; border-radius: 8rem; background: #06C755; color: #FFFFFF; font-size: 16rem; font-weight: 900; text-decoration: none; }

.household-panel { margin: 24rem 16rem 0; background: #FFFFFF; border: 2rem solid #1A1A1A; border-radius: 6rem; padding: 14rem 16rem; display: flex; justify-content: space-between; align-items: center; gap: 10rem; }

.household-text { font-size: 14rem; font-weight: 700; line-height: 1.5; }

.text-muted { color: #4a5563; }

.household-description { font-size: 14rem; font-weight: 500; }

.sticky { padding: 10rem 12rem; background: #FFFFFF; border-top: 3rem solid #1A1A1A; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8rem; }

.sticky-phone { display: flex; align-items: center; justify-content: center; min-height: 52rem; border: 3rem solid #1A1A1A; border-radius: 8rem; background: #FFFFFF; color: #1A1A1A; font-size: 15rem; font-weight: 900; text-decoration: none; }

.sticky-line { display: flex; align-items: center; justify-content: center; min-height: 52rem; border: 3rem solid #1A1A1A; border-radius: 8rem; background: #06C755; color: #FFFFFF; font-size: 15rem; font-weight: 900; text-decoration: none; }

.sticky-quote { display: flex; align-items: center; justify-content: center; min-height: 52rem; border: 3rem solid #1A1A1A; border-radius: 8rem; background: #E8541E; color: #FFFFFF; font-size: 15rem; font-weight: 900; text-decoration: none; }

.line-consultation { margin: 28rem 16rem 0; padding: 20rem 16rem; background: #FFFFFF; border: 2rem solid #1A1A1A; border-radius: 6rem; }
.line-consultation .contact-line { margin-top: 0; }

.rules-message-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; margin: 0 auto 16rem; border: 2rem solid #1A1A1A; border-radius: 6rem; }
.rules-message-text { margin: 0; font-size: inherit; line-height: inherit; }