/* Live homepage hero + Step 1 booking form (approved homepage.html design) */
/* ---- homepage.html prototype only: form + image hero layout ---- */
    #section-contact .container {
      max-width: 1520px;
    }
    #section-contact {
      --hero-card-w: 740px;
      --hero-blue: #0772BA;
      --hero-blue-dk: #055a96;
      --hero-blue-tint: #E8F3FA;
      background: #ffffff;
      padding-top: 40px !important;
      padding-bottom: 50px !important;
    }
    #section-contact .swiper {
      display: none !important;
    }
    #section-contact .hero-booking-layout {
      display: grid;
      grid-template-columns: var(--hero-card-w) 1fr;
      grid-template-rows: auto auto;
      gap: 1.2rem 48px;
      align-items: stretch;
      justify-content: center;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
    #section-contact .hero-booking-copy {
      grid-column: 1;
      grid-row: 1;
      margin: 0;
      text-align: left;
    }
    #section-contact .hero-booking-copy h1 {
      font-size: 44px;
      font-weight: 800;
      line-height: 1.15;
      margin: 0 0 12px 0;
      color: #0772BA !important;
      text-align: left;
      letter-spacing: -0.5px;
    }
    .hero-trust-badges {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 18px;
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: 600;
      color: #000000 !important;
    }
    .hero-trust-badges span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #000000 !important;
    }
    .hero-trust-badges i {
      color: #28A745;
      font-size: 15px;
    }
    .hero-subhead {
      font-size: 16px;
      font-weight: 500;
      color: #000000 !important;
      margin: 0;
    }

    /* Form Container Card - Clean Soft Card */
    #section-contact .hero-form-shell {
      grid-column: 1;
      grid-row: 2;
      width: 100%;
      max-width: var(--hero-card-w) !important;
      background: #f8fafc !important;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 28px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
    }
    #section-contact .hero-form-shell .booking-compact {
      background: transparent !important;
      box-shadow: none !important;
      padding: 0 !important;
      border: none !important;
    }

    /* Form Section Titles */
    .litta-field-group {
      margin-bottom: 22px;
    }
    .litta-group-label {
      font-size: 15px;
      font-weight: 700;
      color: #000000 !important;
      margin-bottom: 10px;
      display: block;
    }

    /* Method Selection Grid (By Volume / By Item) */
    .litta-method-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .litta-method-card {
      background: #ffffff;
      border: 1px solid #e8e8e8;
      border-radius: 14px;
      padding: 20px 16px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }
    .litta-method-card:hover {
      border-color: #e8e8e8;
      background: rgba(7, 114, 186, 0.08);
      transform: translateY(-1px);
    }
    .litta-method-card.selected,
    .litta-method-card:has(input:checked) {
      border-color: #e8e8e8;
      background: rgba(7, 114, 186, 0.38);
      box-shadow: 0 4px 14px rgba(7, 114, 186, 0.18);
    }
    .litta-method-card.selected:hover,
    .litta-method-card:has(input:checked):hover {
      background: rgba(7, 114, 186, 0.38);
    }
    .litta-method-card input[type="radio"] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .litta-card-title {
      font-size: 19px;
      font-weight: 700;
      color: #0772BA !important;
      margin-bottom: 8px;
    }
    .litta-card-icon {
      width: 112px;
      height: 112px;
      object-fit: contain;
      margin: 8px auto 12px;
      display: block;
    }
    /* Homepage: By Volume icon (kept relatively larger) */
    .litta-method-card:has(input[value="by_volume"]) .litta-card-icon {
      width: 134px;
      height: 134px;
    }
    .litta-card-sub {
      font-size: 13px;
      color: #000000 !important;
      font-weight: 500;
    }

    /* Postcode Input Pill Box */
    .litta-postcode-wrap {
      position: relative;
      width: 100%;
    }
    .litta-postcode-wrap i.search-icon {
      position: absolute;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      color: #0772BA;
    }
    .litta-postcode-input {
      width: 100%;
      height: 56px;
      padding: 12px 20px 12px 50px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 500;
      color: #000000 !important;
      outline: none;
      transition: all 0.2s ease;
    }
    .litta-postcode-input:focus {
      border-color: #0772BA;
      box-shadow: 0 0 0 3px rgba(7, 114, 186, 0.15);
    }

    /* Timing Pills Grid */
    .litta-timing-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    .litta-timing-pill {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px 8px;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: #000000 !important;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .litta-timing-pill:hover {
      border-color: #0772BA;
      color: #0772BA !important;
    }
    .litta-timing-pill.selected,
    .litta-timing-pill:has(input:checked) {
      background: #0772BA;
      border-color: #0772BA;
      color: #ffffff !important;
      box-shadow: 0 4px 12px rgba(7, 114, 186, 0.2);
    }
    .litta-timing-pill input[type="radio"] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    /* Primary CTA Button (#0772BA Brand Blue) */
    .litta-submit-btn {
      width: 100%;
      height: 58px;
      background: #0772BA;
      border: none;
      border-radius: 12px;
      color: #ffffff !important;
      font-size: 19px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 24px;
      box-shadow: 0 6px 18px rgba(7, 114, 186, 0.3);
    }
    .litta-submit-btn:hover {
      background: #000000;
      color: #ffffff !important;
      transform: translateY(-1px);
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
    }

    /* Right Side Hero Visual Image — full height: heading top → form bottom */
    #section-contact .hero-booking-visual {
      grid-column: 2;
      grid-row: 1 / 3;
      width: 100%;
      max-width: 100%;
      align-self: stretch;
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      border: none;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
      height: auto;
      min-height: 100%;
    }
    #section-contact .hero-booking-visual img {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    /* Laptop / desktop side-by-side only — taller hero image (phones/tablets unchanged) */
    @media (min-width: 992px) {
      #section-contact .hero-booking-visual {
        min-height: 640px;
      }
    }

    @media (max-width: 1199.98px) {
      #section-contact {
        --hero-card-w: 540px;
      }
      #section-contact .hero-booking-copy h1 {
        font-size: 34px;
      }
      .litta-timing-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 991.98px) {
      #section-contact .hero-booking-layout {
        grid-template-columns: 1fr;
      }
      #section-contact .hero-booking-copy {
        grid-column: 1;
        grid-row: 1;
      }
      #section-contact .hero-form-shell {
        grid-column: 1;
        grid-row: 2;
        max-width: 100% !important;
      }
      #section-contact .hero-booking-visual {
        grid-column: 1;
        grid-row: 3;
        position: relative;
        height: auto;
        min-height: 240px;
        max-height: 320px;
      }
    }

    /* Phone only — homepage banner form. Desktop / tablet above 768 unchanged. */
    @media (max-width: 768px) {
      #section-contact {
        padding-top: 20px !important;
        padding-bottom: 28px !important;
        overflow: visible !important;
      }

      #section-contact .v-center {
        min-height: 0 !important;
        height: auto !important;
        padding: 12px 0 20px !important;
      }

      #section-contact .container {
        padding-left: 16px;
        padding-right: 16px;
      }

      #section-contact .hero-booking-layout {
        gap: 14px;
        width: 100%;
      }

      #section-contact .hero-booking-copy h1 {
        font-size: 26px !important;
        line-height: 1.2 !important;
        margin: 0 0 10px 0 !important;
        letter-spacing: -0.3px;
      }

      #section-contact .hero-trust-badges {
        gap: 8px 12px;
        font-size: 12.5px;
        margin-bottom: 8px;
      }

      #section-contact .hero-subhead {
        font-size: 14px;
        line-height: 1.4;
      }

      /* Beat theme .booking-compact { height:40vh !important } + shell overflow clip */
      #section-contact .hero-form-shell,
      #section-contact .bg-white.rounded-1.hero-form-shell {
        width: 100%;
        max-width: 100% !important;
        padding: 16px !important;
        border-radius: 16px;
        overflow: visible !important;
        box-sizing: border-box;
      }

      #section-contact .hero-form-shell .booking-compact,
      #section-contact .hero-form-shell .booking-compact.hero-form-design-b {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        width: 100% !important;
      }

      /* Hide step tracker header on mobile — matches desktop Step 1 (not shown) */
      #section-contact .hero-form-shell .booking-compact-header,
      #section-contact .hero-form-shell header.booking-compact-header {
        display: none !important;
      }

      #section-contact .hero-form-shell .booking-compact-body,
      #section-contact .hero-form-shell main.booking-compact-body {
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
      }

      #section-contact .hero-form-shell .step-panel.active {
        display: block !important;
        overflow: visible !important;
      }

      #section-contact .litta-field-group {
        margin-bottom: 16px;
      }

      #section-contact .hero-form-shell .litta-field-group:first-child {
        margin-top: 14px;
      }

      #section-contact .litta-group-label {
        font-size: 14px;
        margin-bottom: 8px;
      }

      #section-contact .litta-method-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      #section-contact .litta-method-card {
        padding: 14px 8px;
        border-radius: 12px;
      }

      #section-contact .litta-card-title {
        font-size: 15px;
        margin-bottom: 4px;
      }

      #section-contact .litta-card-icon {
        width: 78px;
        height: 78px;
        margin: 4px auto 8px;
      }

      #section-contact .litta-method-card:has(input[value="by_volume"]) .litta-card-icon {
        width: 101px;
        height: 101px;
      }

      #section-contact .litta-card-sub {
        font-size: 11.5px;
        line-height: 1.35;
      }

      #section-contact .litta-postcode-wrap i.search-icon {
        left: 14px;
        font-size: 16px;
      }

      #section-contact .litta-postcode-input {
        height: 50px;
        padding: 12px 14px 12px 44px;
        font-size: 16px; /* avoid iOS input zoom */
        border-radius: 12px;
      }

      #section-contact .litta-timing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }

      #section-contact .litta-timing-pill {
        padding: 12px 6px;
        font-size: 13px;
        border-radius: 10px;
      }

      #section-contact .litta-submit-btn {
        height: 52px;
        font-size: 16px;
        margin-top: 8px;
        border-radius: 12px;
      }

      #section-contact .address-selection-container,
      #section-contact .address-confirmation {
        margin-bottom: 14px;
      }

      #section-contact .address-dropdown {
        font-size: 16px;
        padding: 12px;
      }

      #section-contact .hero-booking-visual {
        min-height: 280px;
        max-height: 360px;
        border-radius: 16px;
      }
    }

    @media (max-width: 480px) {
      #section-contact .hero-booking-copy h1 {
        font-size: 22px !important;
      }

      #section-contact .hero-trust-badges {
        font-size: 12px;
        gap: 6px 10px;
      }

      #section-contact .hero-form-shell,
      #section-contact .bg-white.rounded-1.hero-form-shell {
        padding: 14px !important;
        border-radius: 14px;
      }

      #section-contact .litta-method-card {
        padding: 12px 6px;
      }

      #section-contact .litta-card-title {
        font-size: 14px;
      }

      #section-contact .litta-card-icon {
        width: 67px;
        height: 67px;
      }

      #section-contact .litta-method-card:has(input[value="by_volume"]) .litta-card-icon {
        width: 90px;
        height: 90px;
      }

      #section-contact .litta-timing-pill {
        padding: 11px 4px;
        font-size: 12.5px;
      }

      #section-contact .litta-submit-btn {
        height: 50px;
        font-size: 15px;
      }

      #section-contact .hero-booking-visual {
        min-height: 260px;
        max-height: 320px;
      }
    }

    /* Tablet only (768–914) — proper hero image height; phone/laptop untouched */
    @media (min-width: 768px) and (max-width: 914px) {
      #section-contact .hero-booking-visual {
        grid-column: 1;
        grid-row: 3;
        position: relative;
        width: 100%;
        height: auto;
        min-height: 480px;
        max-height: 620px;
        border-radius: 18px;
        overflow: hidden;
      }

      #section-contact .hero-booking-visual img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }

/* How It Works — light blue band */
.how-it-works-section {
  background: #E8F4FC;
}

/* Address picker under postcode (Loqate) */
#section-contact .address-selection-container {
  margin: 0 0 18px 0;
}
#section-contact .address-dropdown-wrapper label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #000 !important;
  margin-bottom: 8px;
}
#section-contact .address-dropdown {
  width: 100%;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  background: #fff;
  color: #0f172a;
}
#section-contact .address-dropdown:focus {
  outline: none;
  border-color: #0772BA;
  box-shadow: 0 0 0 3px rgba(7, 114, 186, 0.15);
}
#section-contact .address-confirmation {
  margin: 0 0 18px 0;
  padding: 12px 14px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  color: #065f46;
  font-size: 14px;
  font-weight: 600;
}