/* Homepage layout modeled on ragincajunsoftwash.com, in Junk Master's brand
   (red #c5260e, near-black #222429, Lalezar headings, Titillium Web text). */
:root {
  --jm-red: #c5260e;
  --jm-red-dark: #a51f0b;
  --jm-ink: #222429;
  --jm-black: #111214;
  --jm-gray: #f6f6f7;
  --jm-line: #e3e4e8;
  --jm-radius: 16px;
}

/* Full-width sections inside the theme's content column */
.home .jm-home, .jm-page .jm-home { overflow-x: clip; }
.home .jm-section, .jm-page .jm-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 72px 0;
}
.jm-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.jm-narrow { max-width: 900px; }
.jm-gray { background: var(--jm-gray); }
.jm-center { text-align: center; }
.jm-red { color: var(--jm-red); }
.jm-home h2, .jm-hero h2 {
  font-family: "Lalezar", sans-serif;
  font-weight: 400;
  color: var(--jm-ink);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.12;
  margin: 0 0 20px;
}
.jm-home p { margin: 0 0 14px; }
.jm-home .jm-lede { max-width: 760px; margin: 0 auto 26px; }
.jm-home .jm-specializes { font-weight: 700; font-size: 1.15em; margin-bottom: 34px; }

/* Buttons */
.jm-btn, .jm-pill {
  display: inline-block;
  font-family: "Titillium Web", sans-serif;
  font-weight: 700;
  text-decoration: none !important;
  border-radius: 999px;
  line-height: 1.2;
  transition: transform .15s ease, background-color .15s ease;
}
.jm-btn { padding: 15px 30px; font-size: 17px; }
.jm-btn:hover, .jm-pill:hover { transform: translateY(-1px); }
.jm-btn-red { background: var(--jm-red); color: #fff !important; }
.jm-btn-red:hover { background: var(--jm-red-dark); }
.jm-btn-white { background: #fff; color: var(--jm-ink) !important; }
.jm-pill { background: var(--jm-black); color: #fff !important; padding: 9px 18px; font-size: 14px; margin-top: 8px; }
.jm-pill:hover { background: var(--jm-red); }

/* ---- 1. Hero ------------------------------------------------------------ */
.jm-hero { position: relative; padding: 52px 24px 0; max-width: 1440px; margin: 0 auto; box-sizing: border-box; }
.jm-hero-media {
  position: absolute; left: 24px; right: 24px; top: 52px; height: 470px;
  border-radius: var(--jm-radius);
  background-size: cover; background-position: center 40%;
}
.jm-hero-media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, rgba(10, 10, 12, .82) 0%, rgba(10, 10, 12, .55) 45%, rgba(10, 10, 12, .1) 100%);
}
.jm-hero-grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 48px; align-items: start;
  padding: 0 32px;
}
.jm-hero-text { min-height: 470px; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; box-sizing: border-box; color: #fff; }
.jm-hero-text h1 {
  font-family: "Lalezar", sans-serif; font-weight: 400; color: #fff;
  font-size: clamp(40px, 5vw, 64px); line-height: 1.02; margin: 0 0 18px; text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.jm-hero-text p { color: #fff; font-size: 18px; line-height: 1.6; max-width: 560px; margin: 0 0 26px; }
.jm-hero-text .jm-btn { align-self: flex-start; }

.jm-badges { list-style: none; margin: 0; padding: 30px 0 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.jm-badges li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin: 0; padding: 0; }
.jm-badges li::before { display: none; }
.jm-badges img { width: 74px; height: 74px; object-fit: contain; }
.jm-badges span { font-family: "Lalezar", sans-serif; font-size: 15px; line-height: 1.15; color: var(--jm-ink); }

/* Estimate card */
.jm-quote-card {
  margin-top: 64px; background: var(--jm-red); border-radius: var(--jm-radius); padding: 24px 24px 20px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22); position: relative; z-index: 2;
}
.jm-quote-card h2 { color: #fff; text-align: center; font-size: 32px; margin: 0 0 14px; }
.jm-compact-form, .jm-compact-form .wpforms-form { margin: 0 !important; padding: 0 !important; }
.jm-compact-form .wpforms-field-label,
.jm-compact-form .wpforms-field-sublabel,
.jm-compact-form .wpforms-required-label {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.jm-compact-form .wpforms-field { padding: 0 0 8px !important; margin: 0 !important; }
.jm-compact-form .wpforms-field-layout { padding: 0 !important; }
.jm-compact-form .wpforms-field-layout-columns { display: flex; gap: 8px; margin: 0 !important; }
.jm-compact-form .wpforms-layout-column { flex: 1 1 0; width: auto !important; padding: 0 !important; margin: 0 !important; }
/* Date + time pairs: stack the two date fields, each with its time beside it */
.jm-compact-form #wpforms-1617-field_18-container .wpforms-field-layout-columns { flex-direction: column; gap: 0; }
.jm-compact-form .wpforms-field-date-time .wpforms-field-row { display: flex; gap: 8px; }
.jm-compact-form .wpforms-field-date-time .wpforms-field-row-block { flex: 1 1 0; width: auto !important; padding: 0 !important; margin: 0 !important; }
.jm-compact-form .wpforms-field-address .wpforms-field-row { display: flex; gap: 8px; margin: 0 0 8px !important; }
.jm-compact-form .wpforms-field-address .wpforms-field-row:last-child { margin-bottom: 0 !important; }
.jm-compact-form .wpforms-field-address .wpforms-field-row-block { flex: 1 1 0; width: auto !important; padding: 0 !important; margin: 0 !important; }
.jm-compact-form input[type=text], .jm-compact-form input[type=email], .jm-compact-form input[type=tel],
.jm-compact-form select, .jm-compact-form textarea {
  width: 100% !important; max-width: none !important; height: 42px !important; min-height: 0 !important;
  border: 1px solid rgba(0, 0, 0, .12) !important; border-radius: 8px !important; background: #fff !important;
  font-size: 14px !important; padding: 8px 12px !important; box-shadow: none !important; color: var(--jm-ink) !important;
}
.jm-compact-form textarea { height: 70px !important; resize: vertical; }
.jm-compact-form ::placeholder { color: #8a8d94; opacity: 1; }
.jm-compact-form .wpforms-error { color: #fff !important; font-size: 12px !important; margin-top: 2px !important; }
.jm-compact-form input.wpforms-error, .jm-compact-form textarea.wpforms-error { border: 2px solid #ffd6cf !important; }
.jm-compact-form .wpforms-submit-container { padding: 6px 0 0 !important; margin: 0 !important; }
.jm-compact-form button.wpforms-submit {
  width: 100% !important; height: 46px !important; border-radius: 999px !important; background: var(--jm-black) !important;
  color: #fff !important; border: 0 !important; font-size: 16px !important; font-weight: 700 !important;
}
.jm-compact-form button.wpforms-submit:hover { background: #000 !important; }


/* WPForms' own styles are very specific; these win. */
.jm-quote-card .jm-compact-form .wpforms-field-layout-columns { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; }
.jm-quote-card .jm-compact-form .wpforms-layout-column { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; }
.jm-quote-card .jm-compact-form #wpforms-1617-field_18-container .wpforms-field-layout-columns { flex-direction: column !important; gap: 0 !important; }
.jm-quote-card .jm-compact-form .wpforms-field-row { display: flex !important; gap: 8px !important; max-width: none !important; width: 100% !important; }
.jm-quote-card .jm-compact-form .wpforms-field-row::before, .jm-quote-card .jm-compact-form .wpforms-field-row::after { display: none !important; }
.jm-quote-card .jm-compact-form .wpforms-field-row-block { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; float: none !important; margin: 0 !important; padding: 0 !important; }
.jm-quote-card .jm-compact-form .wpforms-field-address .wpforms-field-row { margin: 0 0 8px !important; }
.jm-quote-card .jm-compact-form .wpforms-field-address .wpforms-field-row:last-of-type { margin-bottom: 0 !important; }
.jm-quote-card .jm-compact-form input:not([type=hidden]):not([type=submit]),
.jm-quote-card .jm-compact-form select { height: 42px !important; line-height: 1.2 !important; box-sizing: border-box !important; }
.jm-quote-card .jm-compact-form select { padding-right: 28px !important; }

.jm-quote-card .jm-compact-form .wpforms-field-layout-columns,
.jm-quote-card .jm-compact-form .wpforms-field-row { flex-direction: row !important; }
.jm-quote-card .jm-compact-form #wpforms-1617-field_18-container .wpforms-field-layout-columns { flex-direction: column !important; }
@media (max-width: 380px) {
  .jm-quote-card .jm-compact-form .wpforms-field-address .wpforms-field-row { flex-wrap: wrap !important; }
}

/* ---- 3. What Our Customers Say ----------------------------------------- */
.jm-reviews { padding-top: 40px; }
.jm-reviews .jm-wrap { max-width: 1280px; }
.jm-reviews .repocean-slider-main-v2 .SliderContentParent { display: flex; flex-direction: column; gap: 18px; }
.jm-reviews .repocean-slider-main-v2 .left, .jm-reviews .repocean-slider-main-v2 .right { width: 100% !important; max-width: none !important; }
.jm-reviews .repocean-slider-main-v2 .left-inner {
  display: flex !important; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 18px;
  background: var(--jm-gray); border-radius: 12px; padding: 18px 22px; text-align: left;
}
.jm-reviews .left-inner .bottom-logo { order: 1; margin: 0 !important; }
.jm-reviews .left-inner .bottom-logo img { width: 92px; height: auto; }
.jm-reviews .left-inner .title { order: 2; margin: 0 !important; }
.jm-reviews .left-inner .star-content { order: 3; margin: 0 !important; }
.jm-reviews .left-inner .review-text { order: 4; margin: 0 !important; }
.jm-reviews .left-inner .review-text p { margin: 0; }
.jm-reviews .left-inner .bottom-review-us { order: 5; margin: 0 0 0 auto !important; }
.jm-reviews .left-inner .bottom-review-us-btn {
  background: var(--jm-red) !important; color: #fff !important; border-radius: 999px !important; padding: 9px 18px !important;
  font-weight: 700; text-decoration: none;
}

/* ---- 4. Why choose ------------------------------------------------------ */
.jm-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.jm-arrow-list { list-style: none; margin: 0; padding: 0; }
.jm-arrow-list li { display: flex; gap: 14px; margin: 0 0 18px; padding: 0; line-height: 1.6; }
.jm-arrow-list li::before { display: none; }
.jm-arrow { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 3px; fill: none; stroke: var(--jm-red); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 5. Steps ----------------------------------------------------------- */
.jm-steps { padding-top: 32px; }
.jm-step-grid { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.jm-step {
  position: relative; background: #fff; border: 1px solid var(--jm-line); border-radius: var(--jm-radius);
  padding: 30px 26px 28px; margin: 0; box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}
.jm-step::before { display: none; }
.jm-step-num {
  position: absolute; top: -34px; right: 22px; font-family: "Lalezar", sans-serif; font-size: 88px; line-height: 1;
  color: #fff; -webkit-text-stroke: 2px var(--jm-red);
}
.jm-step-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #fbe9e6; margin-bottom: 18px; }
.jm-step-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--jm-red); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jm-step h3 { font-family: "Lalezar", sans-serif; font-weight: 400; font-size: 26px; margin: 0 0 10px; color: var(--jm-ink); }
.jm-step p { margin: 0; line-height: 1.65; }

/* ---- 6. Main services --------------------------------------------------- */
.jm-card-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.jm-card {
  background: #fff; border-radius: var(--jm-radius); overflow: hidden; margin: 0; padding: 0;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .07); display: flex; flex-direction: column;
}
.jm-card::before { display: none; }
.jm-card img { width: 100%; height: 240px; object-fit: cover; display: block; }
.jm-card-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.jm-card-body h3 { font-family: "Lalezar", sans-serif; font-weight: 400; font-size: 25px; margin: 0 0 10px; color: var(--jm-ink); }
.jm-card-body p { flex: 1; line-height: 1.65; }
.jm-card-body .jm-pill { align-self: flex-start; }

/* ---- 7. Red band -------------------------------------------------------- */
.jm-band {
  position: relative; background: var(--jm-red); border-radius: var(--jm-radius); color: #fff;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 34px 48px; margin-top: 24px;
}
.jm-band-map { align-self: start; margin-top: -58px; border: 2px solid rgba(255, 255, 255, .85); border-radius: var(--jm-radius); overflow: hidden; background: #fff; box-shadow: 0 14px 34px rgba(0, 0, 0, .25); }
.jm-band-map iframe { display: block; width: 100%; height: 300px; border: 0; }
.jm-band h2 { color: #fff !important; font-size: clamp(28px, 3vw, 38px); }
.jm-band p { color: #fff; }
.jm-band a:not(.jm-btn) { color: #fff; }

/* ---- 8. Professional junk removal -------------------------------------- */
.jm-text-cols { margin-top: 18px; gap: 48px; }
.jm-text-cols ul { margin: 0 0 14px 1.2em; }
.jm-professional .jm-pill { margin-top: 12px; }

/* ---- 9. Existing service sections -------------------------------------- */
.jm-service-sections { margin-top: 0; }

/* ---- 10. FAQ ------------------------------------------------------------ */
.jm-faq { padding-top: 64px; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
  .jm-hero-grid { grid-template-columns: minmax(0, 1fr) 420px; gap: 28px; padding: 0 20px; }
  .jm-badges { grid-template-columns: repeat(2, 1fr); }
  .jm-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .home .jm-section, .jm-page .jm-section { padding: 52px 0; }
  .jm-hero { padding: 12px 12px 0; }
  .jm-hero-media { display: none; }
  .jm-hero-grid { grid-template-columns: 1fr; padding: 0; gap: 0; }
  .jm-hero-text {
    min-height: 0; padding: 48px 22px 40px; border-radius: var(--jm-radius);
    background: linear-gradient(rgba(10, 10, 12, .62), rgba(10, 10, 12, .72)), url(/wp-content/uploads/2023/06/junk-master-truck-downtown-denver_8836.webp) center / cover;
  }
  .jm-hero-text h1 { font-size: 40px; }
  .jm-hero-text p { font-size: 16px; }
  .jm-quote-card { margin: 18px 0 0; padding: 22px 16px 18px; }
  .jm-badges { grid-template-columns: repeat(2, 1fr); padding: 26px 8px 4px; }
  .jm-hero-main { display: contents; }
  .jm-badges { order: 3; }
  .jm-two-col, .jm-band { grid-template-columns: 1fr; gap: 28px; }
  .jm-step-grid, .jm-card-grid { grid-template-columns: 1fr; gap: 44px; }
  .jm-card-grid { gap: 22px; }
  .jm-band { padding: 26px 20px; }
  .jm-band-map { margin-top: -50px; }
}
@media (max-width: 480px) {
  .jm-compact-form .wpforms-field-address .wpforms-field-row { flex-wrap: wrap; }
}

/* Theme wraps <select> in .pretty-select-wrapper; keep it flush with the other fields */
.jm-quote-card .jm-compact-form .pretty-select-wrapper { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; height: 42px !important; }
.jm-quote-card .jm-compact-form .pretty-select-wrapper::after { top: 50% !important; transform: translateY(-50%); }

/* Service sections: red arrow bullets, like the reference layout */
.jm-service-sections ul.wp-block-list { list-style: none; padding-left: 0; margin-left: 0; }
.jm-service-sections ul.wp-block-list > li { position: relative; padding-left: 30px; }
.jm-service-sections ul.wp-block-list > li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 18px; height: 18px; border: 0; border-radius: 0; background: none;
  background-color: var(--jm-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ---- Resources page (layout of ragincajunsoftwash.com/resources) ------- */
.jm-res-hero { position: relative; max-width: 1440px; margin: 0 auto; padding: 52px 24px 0; box-sizing: border-box; }
.jm-res-hero-media {
  position: absolute; left: 24px; right: 24px; top: 52px; bottom: 0; border-radius: var(--jm-radius);
  background: url(/wp-content/uploads/2023/06/junk-master-staff-loading-truck-img_6589-1500x2000.webp) center 45% / cover;
}
.jm-res-hero-media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, rgba(10, 10, 12, .8) 0%, rgba(10, 10, 12, .55) 55%, rgba(10, 10, 12, .35) 100%);
}
.jm-res-hero-text { position: relative; min-height: 330px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 56px; padding-bottom: 72px; }
.jm-res-hero h1 {
  font-family: "Lalezar", sans-serif; font-weight: 400; color: #fff; max-width: 640px;
  font-size: clamp(36px, 4.6vw, 58px); line-height: 1.04; margin: 0 0 22px; text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.jm-res-badge {
  position: absolute; left: 50%; bottom: -36px; transform: translateX(-50%); z-index: 2;
  width: 72px; height: 72px; border-radius: 50%; background: var(--jm-red); border: 4px solid #fff;
  display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}
.jm-res-badge svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.jm-res-grid-wrap { padding-top: 96px !important; padding-bottom: 40px !important; }
.jm-res-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.jm-res-card {
  margin: 0; padding: 16px 16px 14px; background: #fff; border: 1px solid #e3a69b; border-radius: 12px;
  box-shadow: 0 4px 12px rgba(197, 38, 14, .08); display: flex; flex-direction: column;
}
.jm-res-card::before { display: none; }
.jm-home .jm-res-card h2 { font-family: "Titillium Web", sans-serif; font-weight: 700; font-size: 15px; line-height: 1.35; margin: 0 0 10px; }
.jm-res-card h2 a { color: var(--jm-ink); text-decoration: none; }
.jm-res-card h2 a:hover { color: var(--jm-red); }
.jm-home .jm-res-card p { color: #6b6e75; font-size: 14px; line-height: 1.5; margin: 0 0 14px; flex: 1; }
.jm-res-more { color: var(--jm-red) !important; font-size: 14px; text-decoration: none !important; display: inline-flex; align-items: center; gap: 4px; }
.jm-res-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.jm-res .jm-band { max-width: 860px; margin-left: auto; margin-right: auto; }

@media (max-width: 860px) {
  .jm-res-hero { padding: 12px 12px 0; }
  .jm-res-hero-media { left: 12px; right: 12px; top: 12px; }
  .jm-res-hero-text { min-height: 280px; padding: 40px 22px 64px; }
  .jm-res-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .jm-res-grid { grid-template-columns: 1fr; }
}