/* ====== FORM WRAPPER ====== */
.greyBackgroundForm.thankyou {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 1rem;
}

/* ====== MAIN LABELS (Question titles) ====== */

.greyBackgroundForm.thankyou label.control-size {
  height: 140px;
  width: 150px;
}

/* ====== RADIO / OPTION TABLES ====== */
.greyBackgroundForm.thankyou table.progressive-profiling_1,
.greyBackgroundForm.thankyou table.progressive-profiling_2,
.greyBackgroundForm.thankyou table.prof-form__bed,
.greyBackgroundForm.thankyou table.prof-form__bath,
.greyBackgroundForm.thankyou table.prof-form__car,
.greyBackgroundForm.thankyou table.prof-form__cycle,
.greyBackgroundForm.thankyou table.prof-form__purchase,
.greyBackgroundForm.thankyou table.product-type {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: 0 auto 1rem;
  padding: 0;
  border-collapse: collapse;
}

/* flatten tr/tbody so td acts as flex item */
.greyBackgroundForm.thankyou table tbody,
.greyBackgroundForm.thankyou table tr {
  display: contents;
}

/* each cell acts as a centered inline-flex item */
.greyBackgroundForm.thankyou table td {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /*padding: 0.25rem 0.5rem;*/
}

/* ensure radio + label inline centered */
.greyBackgroundForm.thankyou table td > label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  white-space: nowrap;
  cursor: pointer;
}

/* consistent input alignment */
.greyBackgroundForm.thankyou table td > label input[type="radio"] {
  margin: 0;
  transform: translateY(0.02em);
}

/* allow longer labels (like household cycle) to wrap nicely */
.greyBackgroundForm.thankyou table td > label span,
.greyBackgroundForm.thankyou table td > label {
  white-space: normal;
  text-align: center;
}

/* ====== DROPDOWNS ====== */
.greyBackgroundForm.thankyou select.form-control,
.greyBackgroundForm.thankyou select.form-control-select,
.greyBackgroundForm.thankyou .ss-main select {
  display: inline-block;
  max-width: 420px;
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  margin: 0 auto 1rem;
  text-align: center;
  background-color: #fff;
  appearance: none; /* clean dropdown arrow */
  background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.greyBackgroundForm.thankyou select.form-control:focus,
.greyBackgroundForm.thankyou select.form-control-select:focus {
  border-color: #0072ce;
  outline: none;
}

/* ====== TEXTAREA, INPUTS, ETC ====== */

/* ====== SUBMIT BUTTON ====== */
.greyBackgroundForm.thankyou .form-submit-border input[type="submit"] {
  display: inline-block;
  background-color: var(--gsq-color-primary, #0072ce);  
  border: none;
  border-radius: 6px;
  padding: 0.75rem 2rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin: 1rem auto 0;
}

.greyBackgroundForm.thankyou .form-submit-border input[type="submit"]:hover {
  background-color: #005da3;
}

/* ====== PRIVACY / CAPTCHA CENTERED ====== */
.greyBackgroundForm.thankyou .privacy-statement-wrapper,
.greyBackgroundForm.thankyou [name="g-recaptcha-response"],
.greyBackgroundForm.thankyou .form-captcha {
  text-align: center;
  margin: 1rem auto;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
  .greyBackgroundForm.thankyou table.progressive-profiling_1,
  .greyBackgroundForm.thankyou table.progressive-profiling_2,
  .greyBackgroundForm table.prof-form__bed,
  .greyBackgroundForm.thankyou table.prof-form__bath,
  .greyBackgroundForm.thankyou table.prof-form__car,
  .greyBackgroundForm.thankyou table.prof-form__cycle,
  .greyBackgroundForm.thankyou table.prof-form__purchase,
  .greyBackgroundForm.thankyou table.product-type {
    flex-direction: column;
    gap: 0.5rem 0;
  }

  .greyBackgroundForm.thankyou label.control-label {
    text-align: center;
  }

  .greyBackgroundForm.thankyou select.form-control,
  .greyBackgroundForm.thankyou textarea,
  .greyBackgroundForm.thankyou .form-control {
    max-width: 90%;
  }
}

@media (max-width: 767px) {
  .residential-image-gallery--default 
  .image-gallery__container[data-fullscreen="False"][data-maintainaspectratiomobile="False"] 
  .card__image {
      width: 100%;
      height: auto;               /* let it go landscape naturally */
      aspect-ratio: 16 / 9;       /* forces landscape */
      object-fit: cover;
      min-height: auto !important;
  }
}

@media (max-width: 767px) {
  .residential-image-gallery--default 
  .image-gallery__container[data-fullscreen="True"][data-maintainaspectratiomobile="True"] 
  .card__image {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;       /* enforce landscape */
      object-fit: cover;
      max-height: none !important;
  }
}

@media (max-width: 767px) {

  /* Existing mobile image height */
  .hero-banner-one .plyr,
  .hero-banner-one .plyr__video-embed__container,
  .hero-banner-one .plyr__video-wrapper,
  .hero-banner-one__image {
      position: absolute;
      top: 0;
      left: 0;
      height: 550px;
      width: 100%;
      display: inline-block;
      padding-bottom: 0 !important;
      overflow: hidden;
  }

  /* Move caption HIGHER so “PRECINCT” is visible */
  .hero-banner-one__overlay-wrapper {
      position: absolute;
      top: 130px !important;  /* ⭐ Raise or lower this number */
      left: 0;
      width: 100%;
      text-align: center;
      padding: 0 20px;
  }

  .hero-banner-one__text h1 {
      font-size: 2.7rem !important;
      font-weight: 600;
      line-height: 1.17 !important; /* adds gap between lines */
      margin: 0;
      padding: 0;
      display: inline-block;
      text-transform: uppercase;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hero-banner-one .plyr,
  .hero-banner-one .plyr__video-embed__container,
  .hero-banner-one .plyr__video-wrapper,
  .hero-banner-one__image {
      position: absolute;
      top: 0;
      left: 0;
      height: 1250px;
      width: 100%;
      display: inline-block;
      padding-bottom: 0 !important;
      overflow: hidden;
  }
}

@media (max-width: 1024px) {

  /* Ensure full image is visible (no head cropped) */
  .hero-banner-one .hero-banner-one__image img {
      width: 100%;
      height: auto;
      object-fit: cover;
      object-position: top center;
  }

  /* Overlay positioned relative to hero */
  .hero-banner-one__overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      background: none !important;
  }

  /* Position caption across the NOSE */
  .hero-banner-one__overlay-wrapper.container {
      position: absolute;
      top: 55%;                     /* <-- Move caption to NOSE area */
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      text-align: center;
      padding: 0;
  }

  /* Clean text wrapper */
  .hero-banner-one__text {
      background: none !important;
      border: none !important;
      padding: 0 !important;
      margin: 0 !important;
  }

  /* Required caption style */
  .hero-banner-one__text h1 {
      margin: 0;
      padding: 0;
      font-size: 4em !important;     /* REQUIRED */
      font-weight: 600;
      line-height: 1.1;
      color: #ffffff;
      text-shadow: 0 3px 7px rgba(0,0,0,0.4);
      white-space: normal;
  }
}

.hero-banner-one__overlay,
.hero-banner-one__overlay-wrapper,
.hero-banner-one__text,
.hero-banner-one__text h1 {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Default: sticky button visible */
.sticky-header__button {
    z-index: 999;   
}

/* When header has .is-opened → hide sticky button */
.prod-mode header.is-opened ~ main .sticky-header__button {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}


/* optional: smooth spacing between groups 
.greyBackgroundForm.thankyou .control-label:not(:last-of-type) {
  /*margin-top: 1rem;
}
*/