<!-- =========================================================
     PICKLEGLASS — "Generating Your Estimate" Lead Stepper
     PRODUCTION BUILD — wired to HubSpot Forms Submission API
     Portal: 44048409  |  Form GUID: 73024a34-87dc-4f9a-aa32-a06d6a905be2
     (verified live on /instant-estimate/ 2026-06-20)

     v60 (2026-08-13) CHANGE:
     - Removed "Padel" from the SCOPE step (what_are_you_reaching_out_about__v2).
       It became redundant when the SPORT step shipped in v59: a padel buyer was
       asked the same thing twice in a row (step 02 and step 03) and the answer
       double-counted in lead scoring.
     - Sport now lives ONLY on the SPORT step -> sport_of_interest. The SCOPE
       step is products/services only, which is what it was always meant to be.
     - "Padel" is deliberately LEFT as an option on the HubSpot property and on
       form 73024a34. Historical contacts still carry that value and removing
       the option would orphan their data. The form simply never sends it now.
     - No scoring rule in Lead Score V2 reads Padel from this property (the
       Project Scope rules key off Canopy / Sound Mitigation / PICKLEGLASS only),
       so nothing is orphaned by dropping it here.

     v59 (2026-08-12) CHANGE:
     - NEW STEP 02 "SPORT": "What sports will the courts be used for?"
       Multi-select: Pickleball / Tennis / Padel / Other. Inserted between
       PROPERTY and SCOPE, so the stepper is now 08 steps, not 07.
     - Writes semicolon-joined values to HubSpot property sport_of_interest
       ("Sport of Interest", Multiple checkboxes). Option internal names are
       Pickleball / Tennis / Padel / Other and match the labels exactly, so
       no label->value translation map is needed.
     - Reuses the Apogee Club video + caption card already used by the VISION
       step, so no new media had to be uploaded. Apogee therefore appears
       twice in the run; swap stepImages[1] + projects[1] to change it.
     - Required client-side (matches the SCOPE step). Set required:false on
       the sportOfInterest question to make it skippable.
     - REQUIRES sport_of_interest to exist on HubSpot form 73024a34 and be
       PUBLISHED before this file goes live, or every submission 400s and the
       lead is lost silently. The field MUST stay NOT REQUIRED on the HubSpot
       form -- if anyone flips it to required, the currently-live v58 (which
       does not send it) starts 400ing immediately. Publish HubSpot FIRST,
       then upload this file.

     v58 (2026-08-03) FIX:
     - v57 hid Company Name with the `hidden` attribute, but .cst-field sets
       display:flex, and an explicit display beats [hidden], so the field kept
       rendering. (The payload was already correct, it just stayed visible.)
       Now enforced with a CSS rule AND an inline display:none, and the label
       asterisk is dropped when the field is optional.

     v57 (2026-07-29) CHANGE:
     - Company Name is now conditional. It is hidden, not required, and not
       sent when property type is "Home / Backyard" AND "Which best describes
       you" is "Property Owner / Operator" (i.e. a residential homeowner).
       Every other combination behaves exactly as before.
     - The field only hides/shows, it is never cleared, so a value survives if
       the visitor toggles back and forth.
     - NOTE: `company` had to be set to NOT REQUIRED on HubSpot form 73024a34
       for this to work. If anyone flips it back to required, homeowner
       submissions will 400 and those leads will be lost silently.

     v56 (2026-07-29) CHANGE:
     - Paid-traffic attribution now actually gets captured. The HubSpot form
       has carried hidden utm_source / utm_medium / utm_campaign / utm_term /
       utm_content / gclid / gad_source fields all along, but Submission API
       posts never sent them, so those contact properties were empty on EVERY
       instant-estimate lead. We now read them off the top-window URL, cache
       them in localStorage for the session, and send whatever is present.
       Empty values are never sent, so we cannot blank out an existing value.
     - Field names verified against the PUBLISHED form definition 2026-07-29.
       Never send a field that is not on the form: the API 400s and the lead
       is lost. (This is why the dead page_before_form push below must stay
       broken unless that field is added to the form first.)

     v55 (2026-07-29) CHANGE:
     - COURTS step is now an exact-number input instead of the bucket
       select (1 / 2 to 3 / 4 to 5 / 6+). Visible label: "Number of Courts".
       Required, whole numbers only, 1-50 enforced client-side.
     - Writes the exact number to HubSpot property number_of_courts_numerical
       ("Number of Courts (Numerical)").
     - STILL writes the legacy bucket to number_of_courts, derived from the
       exact number, so existing workflows, lead routing, the Court Count
       smart property, and the book=1 redirect rule keep working unchanged.
     - Requires number_of_courts_numerical to exist on HubSpot form
       73024a34 (published) or every submission 400s. Publish HubSpot FIRST,
       then upload this file.

     Paste this ENTIRE block into the WordPress "Custom HTML" block
     that replaces the current HubSpot embed on /instant-estimate/.

     WHAT THIS DOES vs. the stub version:
     - Submits to the SAME form GUID  -> all workflows, Slack alerts,
       lead routing, "Record source: Instant Estimate 2026" keep firing.
     - Passes the hubspotutk cookie    -> Traffic Source, drill-downs,
       and Google ad click ID (GCLID) keep populating.
     - Translates label->internal value for timeline + describesYou.
     - Redirects to /thank-you-3/ on success -> GTM conversion fires.
     - Honeypot + validation + error handling -> no silent lost leads.

     BEFORE GO-LIVE CHECKLIST (see CONFIG below):
     1. Image URL is set.
     2. Add "Other" option to the HubSpot property
        which_best_describes_you__df___test__ (and to the form field).
     3. Test on a hidden staging page first (see deployment steps).
     ========================================================= -->
<style>
/* CST-IFRAME-RESET */
html,body{margin:0;padding:0;}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500;1,600&display=swap');
/* ---- theme-override guard (scoped to .cst only) ---- */
.cst, .cst * {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: inherit;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  line-height: normal;
  text-shadow: none;
  background: none;
  box-shadow: none;
  list-style: none;
}
.cst {
  font-family: 'indivisible', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f5f5f7;
  color: #1d1d1f;
  display: flex;
  flex-direction: column;
}
.cst-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.cst-split-content {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.cst-header {
  padding: 26px 40px;
  display: block;
  flex-shrink: 0;
}
.cst-stepc-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 13px;
}
.cst-stepc-name {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.cst-stepc-num {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #a48111;
}
.cst-stepc-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a1a1a;
}
.cst-stepc-count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #b0b0b6;
  font-variant-numeric: tabular-nums;
}
.cst-stepc-bar {
  display: flex;
  gap: 6px;
}
.cst-seg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: #e7e7ea;
  transition: background 0.45s ease;
}
.cst-seg.is-fill {
  background: #a48111;
}
.cst-main {
  scroll-padding-bottom:120px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 40px;
  overflow-y: auto;
}
.cst-container {
  width: 100%;
  max-width: 640px;
  margin: auto;
}
.cst-subhead {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #86868b;
  margin-bottom: 16px;
}
.cst-step {
  display: none;
}
.cst-step[data-active="true"] {
  display: block;
}
.cst-step.cst-fwd {
  animation: cstSlideR 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.cst-step.cst-back {
  animation: cstSlideL 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes cstSlideR {
  from { opacity: 0; transform: translateX(26px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes cstSlideL {
  from { opacity: 0; transform: translateX(-26px); }
  to { opacity: 1; transform: translateX(0); }
}
.cst-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #86868b;
  background: #f0f0f2;
  border-radius: 6px;
  padding: 5px 10px;
  margin-bottom: 16px;
}
.cst-question {
  font-size: clamp(28px, 3.2vw, 38px) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: #1d1d1f;
  margin-bottom: 12px;
}
.cst-question .cst-accent {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.15em;
  color: #a48111;
  letter-spacing: -0.01em;
  margin-left: 0.05em;
}
.cst-helper {
  font-size: 16px;
  line-height: 1.5;
  color: #86868b;
  margin-bottom: 36px;
  max-width: 500px;
}
.cst-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cst-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.cst-option {
  appearance: none;
  background: #fff;
  border: 1px solid #e8e8ed;
  border-radius: 12px;
  padding: 20px 24px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.cst-option:hover {
  border-color: #1d1d1f !important;
  background: #1d1d1f !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
}
.cst-option:hover .cst-option-text {
  color: #ffffff !important;
}
.cst-option:hover .cst-option-check {
  opacity: 1;
  transform: scale(1);
  border-color: #a48111 !important;
  background: transparent !important;
}
.cst-option:hover .cst-option-check svg {
  opacity: 0 !important;
}
.cst-option:active {
  transform: scale(0.985);
}
.cst-option-text {
  font-size: 17px;
  font-weight: 500;
  color: #1d1d1f;
}
.cst-option-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #d2d2d7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.85);
  transition: all 0.2s ease;
}
.cst-option-check svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
}
/* SELECTED — light cream + gold border + gold filled check; placed last so it wins over hover */
.cst-option[data-selected="true"] {
  border-color: #a48111 !important;
  background: #fdfcf9 !important;
  box-shadow: 0 0 0 1px #a48111 !important;
  transform: none !important;
}
.cst-option[data-selected="true"] .cst-option-text {
  color: #1d1d1f !important;
}
.cst-option[data-selected="true"] .cst-option-check {
  opacity: 1 !important;
  transform: scale(1) !important;
  border-color: #a48111 !important;
  background: #a48111 !important;
}
.cst-option[data-selected="true"] .cst-option-check svg {
  opacity: 1 !important;
  transform: scale(1) !important;
  stroke: #ffffff !important;
  stroke-dashoffset: 0 !important;
  transition: stroke-dashoffset 0.34s ease 0.06s, opacity 0.18s ease, transform 0.18s ease !important;
}
/* FOCUS/ACTIVE FIX — kill the theme's blue outline + pink (#cc3366) fill on click/focus.
   Non-selected focus/active mirrors the dark hover state; selected is excluded so it stays light cream. */
.cst-option {
  -webkit-tap-highlight-color: transparent !important;
}
.cst-option:focus,
.cst-option:focus-visible,
.cst-option:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.cst-option:focus:not([data-selected="true"]),
.cst-option:focus-visible:not([data-selected="true"]),
.cst-option:active:not([data-selected="true"]) {
  background: #1d1d1f !important;
  border-color: #1d1d1f !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
}
.cst-option:focus:not([data-selected="true"]) .cst-option-text,
.cst-option:focus-visible:not([data-selected="true"]) .cst-option-text,
.cst-option:active:not([data-selected="true"]) .cst-option-text {
  color: #ffffff !important;
}
.cst-option:focus:not([data-selected="true"]) .cst-option-check,
.cst-option:focus-visible:not([data-selected="true"]) .cst-option-check,
.cst-option:active:not([data-selected="true"]) .cst-option-check {
  opacity: 1 !important;
  transform: scale(1) !important;
  border-color: #a48111 !important;
  background: transparent !important;
}
.cst-option:focus:not([data-selected="true"]) .cst-option-check svg,
.cst-option:focus-visible:not([data-selected="true"]) .cst-option-check svg,
.cst-option:active:not([data-selected="true"]) .cst-option-check svg {
  opacity: 0 !important;
}
.cst-input-wrap { position: relative; }
.cst-input {
  width: 100%;
  appearance: none;
  background: #fff;
  border: 1px solid #e8e8ed;
  border-radius: 12px;
  padding: 20px 24px;
  font-size: 18px;
  font-family: inherit;
  color: #1d1d1f;
  transition: all 0.2s ease;
}
.cst-input::placeholder { color: #86868b; }
.cst-input:focus {
  outline: none;
  border-color: #a48111;
  box-shadow: 0 0 0 1px #a48111;
}
.cst-textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.5;
}
.cst-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.cst-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cst-field--full { grid-column: 1 / -1; }
.cst-label {
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  margin-bottom: 8px;
}
.cst-label span { color: #a48111; }
.cst [hidden],
.cst-field[hidden] {
  display: none !important;
}
.cst-label--standalone {
  display: block;
  font-size: 14px;
  margin-bottom: 10px;
}
.cst-field .cst-input {
  padding: 15px 18px;
  font-size: 16px;
  border-radius: 10px;
}
.cst-select-wrap { position: relative; }
.cst-select {
  width: 100%;
  appearance: none;
  background: #fff;
  border: 1px solid #e8e8ed;
  border-radius: 10px;
  padding: 15px 44px 15px 18px;
  font-size: 16px;
  font-family: inherit;
  color: #1d1d1f;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cst-select[data-empty="true"] { color: #86868b; }
.cst-select:focus {
  outline: none;
  border-color: #a48111;
  box-shadow: 0 0 0 1px #a48111;
}
.cst-select-caret {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 16px;
  height: 16px;
  stroke: #86868b;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cst-phone { display: flex; align-items: stretch; }
.cst-phone-prefix {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #e8e8ed;
  border-right: none;
  border-radius: 10px 0 0 10px;
  font-size: 16px;
  color: #1d1d1f;
  white-space: nowrap;
}
.cst-phone .cst-input { border-radius: 0 10px 10px 0; }
.cst-err {
  font-size: 13px;
  color: #c0392b;
  margin-top: 7px;
  min-height: 16px;
}
.cst-form-err {
  font-size: 14px;
  color: #c0392b;
  background: #fdecea;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 20px;
  display: none;
}
.cst-hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cst-nav {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 32px -40px 0;
  padding: 18px 40px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-top: 1px solid #ececef;
}
.cst-btn {
  appearance: none;
  border: none;
  background: #1d1d1f !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 18px 36px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cst-btn svg { transition: transform 0.2s ease; }
.cst-btn:hover:not(:disabled) {
  background: #a48111 !important;
  transform: translateY(-1px);
}
/* kill theme blue/pink focus outline across the whole form */
.cst :focus,
.cst :focus-visible {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.cst-btn:focus:not(:hover):not(:disabled),
.cst-btn:active:not(:hover):not(:disabled) {
  background: #1d1d1f !important;
}
.cst-input:focus,
.cst-select:focus,
.cst-textarea:focus {
  outline: none !important;
  border-color: #a48111 !important;
  box-shadow: 0 0 0 1px #a48111 !important;
}
.cst-btn:hover:not(:disabled) svg { transform: translateX(3px); }
.cst-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cst-btn-back {
  appearance: none;
  border: 1px solid #d2d2d7;
  background: transparent;
  color: #1d1d1f;
  font-size: 16px;
  font-weight: 500;
  padding: 18px 32px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.cst-btn-back:hover {
  border-color: #1d1d1f;
  background: #f5f5f7;
}
.cst-hint {
  font-size: 14px;
  color: #86868b;
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cst-hint svg {
  width: 15px;
  height: 15px;
  stroke: #cdb15a;
  fill: none;
  stroke-width: 1.8;
}
.cst-input.cst-ok {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3 3 7-7' fill='none' stroke='%23a48111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 44px;
}
.cst-need {
  font-size: 13px;
  color: #b0b0b6;
  margin-top: 14px;
  min-height: 16px;
  letter-spacing: 0.01em;
}
.cst-split-image {
  background-color: #1d1d1f;
  position: relative;
  overflow: hidden;
}
.cst-split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transform-origin: center;
  animation: cstKenBurns 26s ease-in-out infinite alternate;
}
@keyframes cstKenBurns {
  from { transform: scale(1.06) translate(0, 0); }
  to { transform: scale(1.16) translate(-1.5%, -1%); }
}
.cst-split-image video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cst-split-image video[hidden], .cst-split-image img[hidden] { display: none !important; }
.cst-image-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(20, 20, 22, 0.6) 0%, rgba(20, 20, 22, 0.1) 40%, transparent 64%),
    linear-gradient(to right, rgba(20, 20, 22, 0.22), transparent 52%);
}
.cst-caption { display: none !important; }
.cst-project {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 48px;
  z-index: 2;
  color: #fff;
  max-width: none;
  animation: cstCaptionIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.cst-project[hidden] { display: none; }
.cst-project-rule {
  width: 30px;
  height: 1px;
  background: #cdb15a;
  margin-bottom: 16px;
}
.cst-project-name {
  font-size: 26px;
  line-height: 1.22;
  font-weight: 400;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.cst-project-name .it {
  font-family: inherit;
  font-style: normal;
  font-weight: 400;
  font-size: 1em;
  color: #fff;
}
.cst-project-loc {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cdb15a;
}
.cst-caption {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 48px;
  z-index: 2;
  max-width: 440px;
  color: #fff;
  animation: cstCaptionIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes cstCaptionIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.cst-caption-rule {
  width: 28px;
  height: 1px;
  background: #cdb15a;
  margin-bottom: 16px;
}
.cst-caption-text {
  font-size: 19px;
  line-height: 1.45;
  font-weight: 300;
  letter-spacing: 0.01em;
}
.cst-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  animation: cstSlideR 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.cst-done-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #a48111;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cst-done-check svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: cstDraw 0.5s ease 0.18s forwards;
}
@keyframes cstDraw {
  to { stroke-dashoffset: 0; }
}
.cst-done-title {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}
.cst-done-sub {
  font-size: 16px;
  line-height: 1.55;
  color: #86868b;
  max-width: 460px;
}
@media (prefers-reduced-motion: reduce) {
  .cst-step[data-active="true"],
  .cst-step.cst-fwd,
  .cst-step.cst-back,
  .cst-done,
  .cst-done-check svg,
  .cst-option,
  .cst-caption {
    animation: none;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
  .cst-split-image img {
    animation: none;
    transform: scale(1.06);
  }
}
@media (max-width: 900px) {
  .cst-split { grid-template-columns: 1fr; min-height: auto; }
  .cst-split-image { display: none; }
  .cst-split-content { min-height: 100vh; min-height: 100dvh; height: auto; overflow: visible; }
  .cst-header { padding: 18px 20px; }
  .cst-stepc-num, .cst-stepc-label { font-size: 13px; }
  .cst-stepc-label { letter-spacing: 0.12em; }
  .cst-main { padding: 20px 20px 110px; overflow: visible; }
  .cst-container { margin: 0 auto; }
  .cst-options { grid-template-columns: 1fr; }
  .cst-field-grid { grid-template-columns: 1fr; }
  .cst-question { font-size: clamp(18px, 4.6vw, 24px) !important; line-height: 1.2 !important; }
  .cst-nav {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 22px -20px 0;
    padding: 13px 20px;
    padding-bottom: calc(13px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #ececef;
  }
  /* no dark hover on touch: keep options light until selected (cream + gold check still applies) */
  .cst-option:hover:not([data-selected="true"]),
  .cst-option:focus:not([data-selected="true"]),
  .cst-option:focus-visible:not([data-selected="true"]),
  .cst-option:active:not([data-selected="true"]) {
    background: #fff !important;
    border-color: #e8e8ed !important;
    box-shadow: none !important;
  }
  .cst-option:hover:not([data-selected="true"]) .cst-option-text,
  .cst-option:focus:not([data-selected="true"]) .cst-option-text,
  .cst-option:active:not([data-selected="true"]) .cst-option-text {
    color: #1d1d1f !important;
  }
  .cst-option:hover:not([data-selected="true"]) .cst-option-check,
  .cst-option:focus:not([data-selected="true"]) .cst-option-check,
  .cst-option:active:not([data-selected="true"]) .cst-option-check {
    opacity: 0 !important;
    border-color: #d2d2d7 !important;
    background: transparent !important;
  }
}
</style>
<div class="cst" id="cst-root">
  <div class="cst-split">
    <div class="cst-split-content">
      <header class="cst-header">
  <meta name="referrer" content="no-referrer">
        <div class="cst-stepc-top">
          <span class="cst-stepc-name"><span class="cst-stepc-num" data-cst-num>01</span><span class="cst-stepc-label" data-cst-label>PROPERTY</span></span>
          <span class="cst-stepc-count"><span data-cst-cur>01</span> / 08</span>
        </div>
        <div class="cst-stepc-bar" data-cst-bar></div>
      </header>
      <main class="cst-main">
        <div class="cst-container" data-cst-container></div>
      </main>
    </div>
    <div class="cst-split-image">
      <img src="https://pickletile.com/wp-content/uploads/2026/06/3AA5AB26-93C4-42EE-8F01-6D943BD79995_1_201_a.jpeg" alt="Pickleglass Court" />
      <video class="cst-split-vid" data-cst-vid muted loop playsinline preload="metadata" hidden></video>
      <div class="cst-image-overlay"></div>
      <div class="cst-project" data-cst-project hidden>
        <div class="cst-project-rule"></div>
        <div class="cst-project-name" data-cst-project-name></div>
        <div class="cst-project-loc" data-cst-project-loc></div>
      </div>
      <div class="cst-caption" data-cst-caption>
        <div class="cst-caption-rule"></div>
        <p class="cst-caption-text" data-cst-caption-text></p>
      </div>
    </div>
  </div>
</div>
<script>
(function () {
  var root = document.getElementById('cst-root');
  if (!root || root.dataset.cstInit === '1') return;
  root.dataset.cstInit = '1';

  /* Size the iframe to the true available height (subtract the WP admin bar when
     present) so the parent page never scrolls and the step tracker is never clipped. */
  function fitFrame() {
    try {
      var fe = window.frameElement;
      if (!fe) return;
      var top = window.top;
      var off = 0;
      var b = top.document.body;
      if (b && b.classList.contains('admin-bar')) off = (top.innerWidth <= 782 ? 46 : 32);
      fe.style.height = (top.innerHeight - off) + 'px';
    } catch (e) {}
  }
  fitFrame();
  window.addEventListener('resize', fitFrame);
  window.addEventListener('orientationchange', fitFrame);

  /* =======================================================
     CONFIG  \u2014 verified live on /instant-estimate/ 2026-06-20
     ======================================================= */
  var CONFIG = {
    portalId: '44048409',
    formGuid: '73024a34-87dc-4f9a-aa32-a06d6a905be2',
    redirectUrl: '/thank-you-3/',           // GTM conversion fires here
    submitEndpoint: 'https://api.hsforms.com/submissions/v3/integration/submit/'
  };

  /* HubSpot internal-value translation maps.
     Form shows the LABEL; HubSpot needs the internal VALUE. */
  var TIMELINE_MAP = {
    'Immediately': 'Immediately',
    '0-3 months': 'Option 1',
    '3-6 months': 'Option 2',
    '6-12 months': '6-12 months',
    'Not sure': 'Not sure'
  };
  var DESCRIBES_MAP = {
    'Architect / Engineering Firm': 'Architect',
    'Builder or Contractor': 'Contractor',
    'Property Owner / Operator': 'Commercial Property Owner/Operator',
    'Developer': 'Developer'
  };
  /* Map of formData key -> HubSpot internal property name */
  var FIELD_MAP = {
    propertyType: 'property_type_new',
    sportOfInterest: 'sport_of_interest',        /* multi-checkbox; semicolon-joined in buildFields() */
    projectType:  'what_are_you_reaching_out_about__v2',
    zipCode:      'project_zip_code',
    courts:       'number_of_courts_numerical',   /* exact count; bucket derived in buildFields() */
    timeline:     'when_are_you_hoping_to_start_',
    details:      'message',
    firstName:    'firstname',
    lastName:     'lastname',
    email:        'email',
    describesYou: 'which_best_describes_you__df___test__',
    companyName:  'company',
    phone:        'phone'
  };

  var questions = [
    {
      id: 'propertyType',
      title: 'What is your property type?',
      accent: 'property type?',
      helper: 'Helps us calculate the correct construction and permitting requirements.',
      required: true,
      type: 'single',
      options: ['Home / Backyard', 'Apartments & Condos', 'Office', 'Hotel & Hospitality', 'Parks & Public Spaces', 'School', 'Country Club', 'Racquet Club & Gym', 'HOA & Community', 'Not Listed']
    },
    {
      id: 'sportOfInterest',
      title: 'What sports will the courts be used for?',
      accent: 'sports',
      helper: 'Check All That Apply',
      required: true,
      type: 'multi',
      options: ['Pickleball', 'Tennis', 'Padel', 'Other']
    },
    {
      id: 'projectType',
      title: 'What type of project are you planning?',
      accent: 'type of project',
      helper: 'Check All That Apply',
      required: true,
      type: 'multi',
      options: ['PICKLEGLASS\u2122','Canopy','New Construction','Sound Mitigation','Modular Court Dividers','Smart Lock Access Control','Conversion & Resurfacing']
    },
    {
      id: 'zipCode',
      title: 'What is your project zip code?',
      helper: 'We use this to check local permitting and crew availability.',
      required: true,
      type: 'text',
      placeholder: 'Enter 5-digit zip code'
    },
    {
      id: 'courts',
      title: 'How many courts do you need?',
      helper: 'Enter the number of courts planned for this project.',
      required: true,
      type: 'number',
      label: 'Number of Courts',
      placeholder: 'Enter a number from 1 to 50',
      min: 1,
      max: 50
    },
    {
      id: 'timeline',
      title: 'When are you hoping to start?',
      accent: 'to start?',
      helper: 'This tells us which crews and timelines we can offer you.',
      required: true,
      type: 'single',
      options: ['Immediately', '0-3 months', '3-6 months', '6-12 months', 'Not sure']
    },
    {
      id: 'details',
      title: 'Tell us about your vision, timeline, and site details',
      accent: 'your vision',
      helper: 'The more information you provide, the more accurate the estimate.',
      required: false,
      type: 'textarea',
      placeholder: 'Share any specific requirements, current site conditions, or design ideas\u2026'
    },
    {
      id: 'contact',
      title: "Let's start the conversation.",
      accent: 'conversation',
      helper: 'A few last details so we can follow up with your personalized estimate.',
      required: true,
      type: 'contact'
    }
  ];
  var describesOptions = ['Architect / Engineering Firm', 'Builder or Contractor', 'Property Owner / Operator', 'Developer'];
  var captions = [
    'Designed spaces that inspire connection.',
    'Built for every racquet sport.',
    'The infrastructure behind modern racquet sports.',
    'Design-build. Permits handled. Local crews.',
    'Purpose-built for the way your facility will be used.',
    'Built on your schedule.',
    'More detail, sharper estimate.',
    'Trusted by clubs, developers, and municipalities nationwide.'
  ];
  var projects = [
    { name: 'Sterling Ranch HOA Master Community', loc: 'Douglas County \u00b7 Colorado' },
    { name: 'Apogee Club', loc: 'Hobe Sound \u00b7 Florida' },
    { name: 'Heritage Bay Country Club', loc: 'Naples \u00b7 Florida' },
    { name: 'Autonomous City of Brooklawn', loc: 'Brooklawn \u00b7 New Jersey' },
    { name: 'Smash Pickleball Club', loc: 'Branford \u00b7 Connecticut' },
    { name: 'Victoria Resort', loc: 'South Haven \u00b7 Michigan' },
    { name: 'Apogee Club', loc: 'Hobe Sound \u00b7 Florida' },
    { name: 'Toll Brothers Cherry Creek', loc: 'Parker \u00b7 Colorado' }
  ];
  var defaultImage = 'https://pickletile.com/wp-content/uploads/2026/06/3AA5AB26-93C4-42EE-8F01-6D943BD79995_1_201_a.jpeg';
  var stepImages = [['https://pickletile.com/wp-content/uploads/2026/06/Sterling-hq.webm','https://pickletile.com/wp-content/uploads/2026/06/Sterling-hq.mp4'], ['https://pickletile.com/wp-content/uploads/2026/06/Apogee-hq-2.webm','https://pickletile.com/wp-content/uploads/2026/06/Apogee-hq-2.mp4'], ['https://pickletile.com/wp-content/uploads/2026/06/Heritage-hq.webm','https://pickletile.com/wp-content/uploads/2026/06/Heritage-hq.mp4'], ['https://pickletile.com/wp-content/uploads/2026/06/Brooklawn-hq.webm','https://pickletile.com/wp-content/uploads/2026/06/Brooklawn-hq.mp4'], ['https://pickletile.com/wp-content/uploads/2026/06/Smash-hq.webm','https://pickletile.com/wp-content/uploads/2026/06/Smash-hq.mp4'], ['https://pickletile.com/wp-content/uploads/2026/06/Victoria-hq.webm','https://pickletile.com/wp-content/uploads/2026/06/Victoria-hq.mp4'], ['https://pickletile.com/wp-content/uploads/2026/06/Apogee-hq-2.webm','https://pickletile.com/wp-content/uploads/2026/06/Apogee-hq-2.mp4'], ['https://pickletile.com/wp-content/uploads/2026/06/TollBrothers-hq.webm','https://pickletile.com/wp-content/uploads/2026/06/TollBrothers-hq.mp4']];
  var total = questions.length;
  var step = 0;
  var advanceTimer = null;
  var submitting = false;
  var formData = {
    propertyType: '', sportOfInterest: [], projectType: [], zipCode: '', courts: '', timeline: '',
    details: '', firstName: '', lastName: '', email: '', describesYou: '',
    companyName: '', phone: '', cst_hp: ''
  };
  var container = root.querySelector('[data-cst-container]');
  var stepNumEl = root.querySelector('[data-cst-num]');
  var stepLabelEl = root.querySelector('[data-cst-label]');
  var stepCurEl = root.querySelector('[data-cst-cur]');
  var stepBarEl = root.querySelector('[data-cst-bar]');
  var STEP_LABELS = ['PROPERTY', 'SPORT', 'SCOPE', 'LOCATION', 'COURTS', 'TIMELINE', 'VISION', 'YOU'];
  function pad2(n) { return (n < 10 ? '0' : '') + n; }
  var captionEl = root.querySelector('[data-cst-caption]');
  var captionText = root.querySelector('[data-cst-caption-text]');

  function esc(s) {
    return String(s).replace(/[&<>"']/g, function (c) {
      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
    });
  }
  function getCookie(name) {
    var m = document.cookie.match('(?:^|;)\\s*' + name + '=([^;]*)');
    return m ? decodeURIComponent(m[1]) : '';
  }
  /* =======================================================
     ATTRIBUTION CAPTURE (v56)
     Hidden utm_* / gclid / gad_source fields exist on HubSpot form 73024a34.
     Read them from the top-window URL (this file runs inside an iframe on
     pickletile.com, same origin, so window.top is readable), cache them so
     they survive in-session navigation, and send what we have.
     ======================================================= */
  var ATTR_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'gclid', 'gad_source'];
  var ATTR_STORE = 'pt_attr_v1';
  function parseQuery(search) {
    var out = {};
    String(search || '').replace(/^\?/, '').split('&').forEach(function (pair) {
      if (!pair) return;
      var eq = pair.indexOf('=');
      var k, v;
      try {
        k = decodeURIComponent((eq > -1 ? pair.slice(0, eq) : pair).replace(/\+/g, ' '));
        v = eq > -1 ? decodeURIComponent(pair.slice(eq + 1).replace(/\+/g, ' ')) : '';
      } catch (e) { return; }
      if (k) out[k.toLowerCase()] = v;
    });
    return out;
  }
  function readAttribution() {
    var search = '';
    try { search = (window.top || window).location.search || ''; } catch (e) {}
    if (!search) { try { search = window.location.search || ''; } catch (e) {} }
    var params = parseQuery(search);
    var found = {};
    var isFresh = false;
    ATTR_KEYS.forEach(function (k) {
      var v = params[k];
      if (v && String(v).trim() !== '') { found[k] = String(v).trim().slice(0, 250); isFresh = true; }
    });
    if (isFresh) {
      /* new click wins: replace the cache wholesale so campaigns never mix */
      try { window.localStorage.setItem(ATTR_STORE, JSON.stringify(found)); } catch (e) {}
      return found;
    }
    var stored = {};
    try { stored = JSON.parse(window.localStorage.getItem(ATTR_STORE) || '{}') || {}; } catch (e) { stored = {}; }
    ATTR_KEYS.forEach(function (k) {
      if (stored[k] && String(stored[k]).trim() !== '') found[k] = String(stored[k]).trim().slice(0, 250);
    });
    return found;
  }
  var ATTRIBUTION = readAttribution();

  function isValidEmail(v) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(v).trim()); }
  function isValidZip(v)   { return /^\d{5}(-\d{4})?$/.test(String(v).trim()); }
  function isValidPhone(v) { return (String(v).replace(/\D/g, '').length) >= 10; }
  /* Residential homeowners are not asked for a company: property type
     "Home / Backyard" combined with "Property Owner / Operator". */
  function companyApplies() {
    return !(formData.propertyType === 'Home / Backyard' && formData.describesYou === 'Property Owner / Operator');
  }
  function isValidCourts(v) {
    var sv = String(v).trim();
    if (!/^\d{1,2}$/.test(sv)) return false;        // whole numbers only, no decimals
    var n = parseInt(sv, 10);
    return n >= 1 && n <= 50;
  }
  function formatPhone(v) {
    var d = String(v).replace(/\D/g, '').slice(0, 10);
    if (!d) return '';
    if (d.length < 4) return '(' + d;
    if (d.length < 7) return '(' + d.slice(0, 3) + ') ' + d.slice(3);
    return '(' + d.slice(0, 3) + ') ' + d.slice(3, 6) + '-' + d.slice(6);
  }
  function markValid(inp, key, val) {
    var ok;
    if (key === 'email') ok = isValidEmail(val);
    else if (key === 'zipCode') ok = isValidZip(val);
    else if (key === 'phone') ok = isValidPhone(val);
    else if (key === 'courts') ok = isValidCourts(val);
    else return;
    if (ok) inp.classList.add('cst-ok'); else inp.classList.remove('cst-ok');
  }

  function titleHTML(q) {
    if (q.accent && q.title.indexOf(q.accent) > -1) {
      var i = q.title.indexOf(q.accent);
      var before = q.title.slice(0, i);
      var after = q.title.slice(i + q.accent.length);
      return esc(before) + '<span class="cst-accent">' + esc(q.accent) + '</span>' + esc(after);
    }
    return esc(q.title);
  }
  var checkSVG = '<div class="cst-option-check"><svg viewBox="0 0 16 16"><path d="M4 8l2.5 2.5 5.5-5.5"/></svg></div>';
  var arrowSVG = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>';
  function clearAdvance() {
    if (advanceTimer !== null) { clearTimeout(advanceTimer); advanceTimer = null; }
  }
  function isCurrentValid() {
    var q = questions[step];
    if (q.type === 'contact') {
      var needed = ['firstName', 'lastName', 'email', 'describesYou', 'phone'];
      if (companyApplies()) needed.push('companyName');
      var baseOk = needed
        .every(function (f) { return formData[f] && String(formData[f]).trim() !== ''; });
      return baseOk && isValidEmail(formData.email) && isValidPhone(formData.phone);
    }
    if (q.id === 'zipCode') return isValidZip(formData.zipCode);
    if (q.id === 'courts')  return isValidCourts(formData.courts);
    if (!q.required) return true;
    var val = formData[q.id];
    if (q.type === 'multi') return val && val.length > 0;
    return val && String(val).trim() !== '';
  }
  function buildStep(q, idx) {
    var el = document.createElement('div');
    el.className = 'cst-step';
    el.setAttribute('data-active', idx === step ? 'true' : 'false');
    var html = '';
    if (!q.required) html += '<span class="cst-tag">Optional</span>';
    html += '<h1 class="cst-question">' + titleHTML(q) + '</h1>';
    if (q.helper) html += '<p class="cst-helper">' + esc(q.helper) + '</p>';
    if (q.type === 'single') {
      html += '<div class="cst-options">';
      q.options.forEach(function (opt, oi) {
        var sel = formData[q.id] === opt;
        html += '<button type="button" class="cst-option" data-opt="' + esc(opt) + '" data-selected="' + sel + '" style="animation:cstOptionIn .45s cubic-bezier(.2,.8,.2,1) ' + (oi * 45) + 'ms forwards;opacity:0">' +
          '<span class="cst-option-text">' + esc(opt) + '</span>' + checkSVG + '</button>';
      });
      html += '</div>';
    } else if (q.type === 'multi') {
      html += '<div class="cst-options-grid">';
      q.options.forEach(function (opt, oi) {
        var sel = (formData[q.id] || []).indexOf(opt) > -1;
        html += '<button type="button" class="cst-option" data-opt="' + esc(opt) + '" data-selected="' + sel + '" style="animation:cstOptionIn .45s cubic-bezier(.2,.8,.2,1) ' + (oi * 45) + 'ms forwards;opacity:0">' +
          '<span class="cst-option-text">' + esc(opt) + '</span>' + checkSVG + '</button>';
      });
      html += '</div>';
    } else if (q.type === 'text') {
      html += '<div class="cst-input-wrap"><input type="text" inputmode="numeric" class="cst-input" data-field="' + q.id + '" placeholder="' + esc(q.placeholder || '') + '" value="' + esc(formData[q.id] || '') + '"' + autoAttrs(q.id, 'text') + '></div>';
      html += '<div class="cst-err" data-cst-fielderr></div>';
    } else if (q.type === 'number') {
      html += '<label class="cst-label cst-label--standalone" for="cst-' + q.id + '">' + esc(q.label || 'Number of Courts') + ' <span>*</span></label>';
      html += '<div class="cst-input-wrap"><input type="text" id="cst-' + q.id + '" inputmode="numeric" pattern="[0-9]*" maxlength="2" class="cst-input" data-field="' + q.id + '" placeholder="' + esc(q.placeholder || '') + '" value="' + esc(formData[q.id] || '') + '" autocomplete="off" aria-label="' + esc(q.label || 'Number of Courts') + '"></div>';
      html += '<div class="cst-err" data-cst-fielderr></div>';
    } else if (q.type === 'textarea') {
      html += '<div class="cst-input-wrap"><textarea class="cst-input cst-textarea" data-field="' + q.id + '" placeholder="' + esc(q.placeholder || '') + '">' + esc(formData[q.id] || '') + '</textarea></div>';
    } else if (q.type === 'contact') {
      html += '<div class="cst-field-grid">' +
        field('First Name', 'firstName', 'Jane') +
        field('Last Name', 'lastName', 'Doe') +
        field('Email', 'email', 'jane@email.com', 'email', true) +
        '<div class="cst-field cst-field--full"><label class="cst-label">Which Best Describes You <span>*</span></label>' +
          '<div class="cst-select-wrap"><select class="cst-select" data-field="describesYou" data-empty="' + (!formData.describesYou) + '">' +
            '<option value="" disabled' + (!formData.describesYou ? ' selected' : '') + '>Select one\u2026</option>' +
            describesOptions.map(function (o) {
              return '<option value="' + esc(o) + '"' + (formData.describesYou === o ? ' selected' : '') + '>' + esc(o) + '</option>';
            }).join('') +
          '</select><svg class="cst-select-caret" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></div></div>' +
        '<div class="cst-field cst-field--full" data-cst-company' + (companyApplies() ? '' : ' hidden style="display:none"') + '>' +
          '<label class="cst-label">Company Name <span>*</span></label>' +
          '<input type="text" class="cst-input" data-field="companyName" placeholder="Company" value="' + esc(formData.companyName || '') + '"' + autoAttrs('companyName', 'text') + '></div>' +
        '<div class="cst-field cst-field--full"><label class="cst-label">Phone Number <span>*</span></label>' +
          '<div class="cst-phone"><span class="cst-phone-prefix">\ud83c\uddfa\ud83c\uddf8 +1</span>' +
          '<input type="tel" class="cst-input" data-field="phone" placeholder="(555) 123-4567" value="' + esc(formData.phone || '') + '"' + autoAttrs('phone', 'tel') + '></div></div>' +
      '</div>';
      /* honeypot \u2014 bots fill this; humans never see it */
      html += '<input type="text" class="cst-hp" data-field="cst_hp" tabindex="-1" autocomplete="off" aria-hidden="true">';
      html += '<div class="cst-form-err" data-cst-formerr></div>';
    }
    if (q.type === 'single') {
      html += '<p class="cst-hint"><svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>Select an option to continue</p>';
    } else if (q.type === 'multi') {
      html += '<p class="cst-hint"><svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>Select all that apply, then continue</p>';
    }
    if (q.id === 'zipCode' || q.id === 'courts' || q.type === 'contact') {
      html += '<div class="cst-need" data-cst-need></div>';
    }
    var isLast = step === total - 1;
    var showBack = step > 0;
    var showContinue = q.type !== 'single' || isLast;
    if (showBack || showContinue) {
      html += '<div class="cst-nav">';
      if (showBack) html += '<button type="button" class="cst-btn-back" data-cst-back>Back</button>';
      if (showContinue) html += '<button type="button" class="cst-btn" data-cst-next>' + (isLast ? 'Get My Estimate' : 'Continue') + arrowSVG + '</button>';
      html += '</div>';
    }
    el.innerHTML = html;
    return el;
  }
  var AUTO = { firstName: 'given-name', lastName: 'family-name', email: 'email', phone: 'tel', companyName: 'organization', zipCode: 'postal-code' };
  function autoAttrs(key, type) {
    var ac = AUTO[key] || 'on';
    var cap = (key === 'firstName' || key === 'lastName' || key === 'companyName') ? 'words' : 'off';
    var extra = (type === 'email') ? ' autocorrect="off" spellcheck="false"' : '';
    return ' autocomplete="' + ac + '" autocapitalize="' + cap + '"' + extra;
  }
  function field(label, key, ph, type, full) {
    return '<div class="cst-field' + (full ? ' cst-field--full' : '') + '">' +
      '<label class="cst-label">' + esc(label) + ' <span>*</span></label>' +
      '<input type="' + (type || 'text') + '" class="cst-input" data-field="' + key + '" placeholder="' + esc(ph) + '" value="' + esc(formData[key] || '') + '"' + autoAttrs(key, type) + '></div>';
  }
  function updateChrome() {
    stepLabelEl.textContent = STEP_LABELS[step] || '';
    stepNumEl.textContent = pad2(step + 1);
    stepCurEl.textContent = pad2(step + 1);
    if (stepBarEl.children.length !== total) {
      var sb = '';
      for (var sg = 0; sg < total; sg++) sb += '<span class="cst-seg"></span>';
      stepBarEl.innerHTML = sb;
    }
    var segs = stepBarEl.children;
    for (var si = 0; si < segs.length; si++) {
      segs[si].className = 'cst-seg' + (si <= step ? ' is-fill' : '');
    }
    captionText.textContent = captions[step] || '';
    (function(){
      var pEl = root.querySelector('[data-cst-project]');
      var pName = root.querySelector('[data-cst-project-name]');
      var pLoc = root.querySelector('[data-cst-project-loc]');
      var pj = (typeof projects !== 'undefined') ? projects[step] : null;
      if (pEl) {
        if (pj && pj.name) {
          if (pName) pName.innerHTML = pj.name;
          if (pLoc) pLoc.textContent = pj.loc || '';
          pEl.hidden = false;
          pEl.style.animation = 'none'; void pEl.offsetWidth; pEl.style.animation = '';
        } else { pEl.hidden = true; }
      }
      (function(){
        var media = (typeof stepImages !== 'undefined') ? (stepImages[step] || defaultImage) : defaultImage;
        var imgEl = root.querySelector('.cst-split-image img');
        var vidEl = root.querySelector('[data-cst-vid]');
        var urls = Array.isArray(media) ? media : (/\.(mp4|webm|mov)(\?|$)/i.test(media) ? [media] : null);
        var isDesktop = !window.matchMedia || window.matchMedia('(min-width: 901px)').matches;
        if (urls && vidEl && !isDesktop) { vidEl.removeAttribute('data-srckey'); vidEl.innerHTML = ''; vidEl.removeAttribute('src'); try { vidEl.pause(); } catch(e){} vidEl.hidden = true; if (imgEl) imgEl.hidden = true; return; }
        if (urls && vidEl) {
          var key = urls.join('|');
          if (vidEl.getAttribute('data-srckey') !== key) {
            vidEl.removeAttribute('src'); vidEl.innerHTML = '';
            urls.forEach(function(u){ var sEl = document.createElement('source'); sEl.src = u; sEl.type = /\.webm(\?|$)/i.test(u) ? 'video/webm' : (/\.mov(\?|$)/i.test(u) ? 'video/quicktime' : 'video/mp4'); vidEl.appendChild(sEl); });
            vidEl.setAttribute('data-srckey', key);
            try { vidEl.load(); } catch(e){}
          }
          vidEl.hidden = false; var pp = vidEl.play(); if (pp && pp.catch) pp.catch(function(){});
          if (imgEl) imgEl.hidden = true;
        } else {
          var src = Array.isArray(media) ? defaultImage : media;
          if (imgEl) { if (imgEl.getAttribute('src') !== src) imgEl.setAttribute('src', src); imgEl.hidden = false; }
          if (vidEl) { vidEl.hidden = true; try { vidEl.pause(); } catch(e){} }
        }
      })();
    })();
    captionEl.style.animation = 'none';
    void captionEl.offsetWidth;
    captionEl.style.animation = '';
    var nextBtn = container.querySelector('[data-cst-next]');
    if (nextBtn && !submitting) nextBtn.disabled = !isCurrentValid();
    var companyEl = container.querySelector('[data-cst-company]');
    if (companyEl) {
      var showCompany = companyApplies();
      companyEl.hidden = !showCompany;
      /* .cst-field is display:flex, which would beat [hidden] on its own */
      companyEl.style.display = showCompany ? '' : 'none';
    }
    var needEl = container.querySelector('[data-cst-need]');
    if (needEl) {
      var q = questions[step];
      var msg = '';
      if (!isCurrentValid()) {
        if (q.id === 'zipCode') msg = 'Enter a 5-digit zip code to continue.';
        else if (q.id === 'courts') msg = 'Enter a whole number between 1 and 50 to continue.';
        else if (q.type === 'contact') {
          if (!formData.firstName || !formData.lastName || !formData.describesYou || (companyApplies() && !formData.companyName)) msg = 'Complete all fields to continue.';
          else if (!isValidEmail(formData.email)) msg = 'Enter a valid email address.';
          else if (!isValidPhone(formData.phone)) msg = 'Enter a valid phone number.';
        }
      }
      needEl.textContent = msg;
    }
  }
  var lastDir = 'fwd';
  function render() {
    container.innerHTML = '';
    var stepEl = buildStep(questions[step], step);
    stepEl.classList.add(lastDir === 'back' ? 'cst-back' : 'cst-fwd');
    container.appendChild(stepEl);
    bindStep();
    updateChrome();
    try { window.scrollTo(0, 0); } catch (e) {}
    var mainEl = root.querySelector('.cst-main');
    if (mainEl) mainEl.scrollTop = 0;
  }
  function go(n) {
    clearAdvance();
    if (n < 0 || n > total - 1) return;
    lastDir = (n < step) ? 'back' : 'fwd';
    step = n;
    render();
  }

  /* =======================================================
     PRODUCTION SUBMISSION \u2014 HubSpot Forms API
     ======================================================= */
  function buildFields() {
    var fields = [];
    Object.keys(FIELD_MAP).forEach(function (key) {
      /* residential homeowner: company was never asked, so never send it.
         `company` must stay NOT REQUIRED on the HubSpot form for this. */
      if (key === 'companyName' && !companyApplies()) return;
      var hsName = FIELD_MAP[key];
      var raw = formData[key];
      var value;
      if (key === 'projectType' || key === 'sportOfInterest') {
        if (!raw || !raw.length) return;
        value = raw.join(';');                 // multi-checkbox = semicolon-joined
      } else if (key === 'timeline') {
        if (!raw) return;
        value = TIMELINE_MAP[raw] || raw;       // label -> internal value
      } else if (key === 'describesYou') {
        if (!raw) return;
        value = DESCRIBES_MAP[raw] || raw;      // label -> internal value
      } else {
        if (raw === undefined || raw === null || String(raw).trim() === '') return;
        value = String(raw).trim();
      }
      fields.push({ name: hsName, value: value });
    });
    /* utm_* / gclid / gad_source: hidden fields on the form, safe to send.
       Only non-empty values, so an existing HubSpot value is never blanked. */
    ATTR_KEYS.forEach(function (k) {
      if (ATTRIBUTION[k]) fields.push({ name: k, value: ATTRIBUTION[k] });
    });
    /* Legacy bucket property number_of_courts is still on the HubSpot form (and
       is used by workflows, lead routing, and the Court Count smart property),
       so derive it from the exact court count instead of asking twice. */
    var courtsN = parseInt(formData.courts, 10);
    if (courtsN > 0) {
      fields.push({
        name: 'number_of_courts',
        value: (courtsN === 1) ? '1' : (courtsN <= 3) ? '2 to 3' : (courtsN <= 5) ? '4 to 5' : '6+'
      });
    }
    /* other_details is marked REQUIRED on the HubSpot form (it is the conditional
       "specify your other property type" box). The Submission API enforces it on
       EVERY submission, so we always send a value or the request 400s and the lead
       is lost. New form has no dedicated specify field; "Not Listed" submitters can
       describe their property in the details/vision box (-> message). */
    fields.push({
      name: 'other_details',
      value: (formData.propertyType === 'Not Listed')
        ? 'Not Listed \u2014 see message field for details'
        : 'N/A'
    });
    return fields;
  }

  function showComplete() {
    if (stepBarEl) {
      var segs = stepBarEl.children;
      for (var i = 0; i < segs.length; i++) segs[i].className = 'cst-seg is-fill';
    }
    if (stepLabelEl) stepLabelEl.textContent = 'COMPLETE';
    if (stepNumEl) stepNumEl.textContent = '07';
    if (stepCurEl) stepCurEl.textContent = '07';
    container.innerHTML =
      '<div class="cst-done">' +
      '<div class="cst-done-check"><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></div>' +
      '<h1 class="cst-done-title">Thank you.</h1>' +
      '<p class="cst-done-sub">We\'ve received your information and will be in touch with next steps.</p>' +
      '</div>';
  }

  function submit() {
    if (submitting) return;
    var formErr = container.querySelector('[data-cst-formerr]');
    /* honeypot: if filled, silently pretend success (drop the bot) */
    if (formData.cst_hp && formData.cst_hp.trim() !== '') {
      (function(u){try{var d=(window.top||window).document;var a=d.createElement('a');a.href=u;a.rel='noreferrer noopener';a.target='_top';d.body.appendChild(a);a.click();}catch(e){(window.top||window).location.href=u;}})(CONFIG.redirectUrl);
      return;
    }
    if (!isCurrentValid()) {
      if (formErr) { formErr.style.display = 'block'; formErr.textContent = 'Please complete all required fields with a valid email and phone.'; }
      return;
    }
    submitting = true;
    var btn = container.querySelector('[data-cst-next]');
    if (btn) { btn.disabled = true; btn.textContent = 'Submitting\u2026'; }
    if (formErr) formErr.style.display = 'none';

    var topWin = window.top || window;
    var topUri, topName; try { topUri = (window.top||window).location.href; topName = (window.top||window).document.title; } catch(e) { topUri = window.location.href; topName = document.title; }
    try { topUri = topWin.location.href; topName = topWin.document.title; } catch (e) {}
    /* DEAD CODE, LEAVE IT DEAD: `fields` is not in scope here, so this push
       always throws into the empty catch and page_before_form is never sent.
       That is currently protective, because page_before_form is NOT a field on
       form 73024a34 and sending it would 400 the submission and lose the lead.
       If you ever want it, add the field to the HubSpot form FIRST, then move
       this into buildFields(). */
    var __pbf=''; try { __pbf = (window.top||window).document.referrer || ''; } catch(e) {} try { fields.push({ name: 'page_before_form', value: __pbf }); } catch(e) {}
  var payload = {
      fields: buildFields(),
      context: {
        pageUri: topUri,
        pageName: topName
      }
    };
    var hutk = getCookie('hubspotutk');     // ties lead to analytics session -> source + GCLID
    if (hutk) payload.context.hutk = hutk;

    fetch(CONFIG.submitEndpoint + CONFIG.portalId + '/' + CONFIG.formGuid, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      referrerPolicy: 'no-referrer',
      body: JSON.stringify(payload)
    })
    .then(function (r) {
      if (r.ok) return r.json().catch(function () { return {}; });
      return r.json().then(function (e) { throw new Error(e && e.message ? e.message : ('HTTP ' + r.status)); });
    })
    .then(function () {
      try{var _q_pt=formData.propertyType,_q_c=formData.courts;if((_q_pt==="Country Club")||(_q_c!=="1"&&_q_pt!=="Home / Backyard")){CONFIG.redirectUrl=CONFIG.redirectUrl+(CONFIG.redirectUrl.indexOf("?")>-1?"&":"?")+"book=1";}}catch(e){}showComplete();
      setTimeout(function () { (function(u){try{var d=(window.top||window).document;var a=d.createElement('a');a.href=u;a.rel='noreferrer noopener';a.target='_top';d.body.appendChild(a);a.click();}catch(e){(window.top||window).location.href=u;}})(CONFIG.redirectUrl); }, 1400);
    })
    .catch(function (err) {
      submitting = false;
      if (btn) { btn.disabled = false; btn.innerHTML = 'Get My Estimate' + arrowSVG; }
      if (formErr) {
        formErr.style.display = 'block';
        formErr.textContent = 'Something went wrong submitting your request. Please try again, or call us directly.';
      }
      try { console.error('HubSpot submit failed:', err, payload); } catch (e) {}
    });
  }

  function bindStep() {
    var q = questions[step];
    container.querySelectorAll('.cst-option').forEach(function (btn) {
      btn.addEventListener('click', function () {
        var opt = btn.getAttribute('data-opt');
        if (q.type === 'single') {
          formData[q.id] = opt;
          container.querySelectorAll('.cst-option').forEach(function (b) {
            b.setAttribute('data-selected', b === btn ? 'true' : 'false');
          });
          clearAdvance();
          var fromStep = step;
          advanceTimer = setTimeout(function () {
            advanceTimer = null;
            if (step === fromStep && step < total - 1) go(step + 1);
          }, 460);
        } else if (q.type === 'multi') {
          var arr = formData[q.id] || [];
          var i = arr.indexOf(opt);
          if (i > -1) arr.splice(i, 1); else arr.push(opt);
          formData[q.id] = arr;
          btn.setAttribute('data-selected', arr.indexOf(opt) > -1 ? 'true' : 'false');
          updateChrome();
        }
      });
    });
    container.querySelectorAll('[data-field]').forEach(function (inp) {
      var key = inp.getAttribute('data-field');
      var evt = inp.tagName === 'SELECT' ? 'change' : 'input';
      inp.addEventListener(evt, function () {
        var val = inp.value;
        if (key === 'zipCode') { val = val.replace(/\D/g, '').slice(0, 5); inp.value = val; }
        else if (key === 'courts') { val = val.replace(/\D/g, '').replace(/^0+/, '').slice(0, 2); inp.value = val; }
        else if (key === 'phone') { val = formatPhone(val); inp.value = val; }
        formData[key] = val;
        if (inp.tagName === 'SELECT') inp.setAttribute('data-empty', !inp.value);
        markValid(inp, key, val);
        updateChrome();
      });
      markValid(inp, key, inp.value);
    });
    var back = container.querySelector('[data-cst-back]');
    if (back) back.addEventListener('click', function () { go(step - 1); });
    var next = container.querySelector('[data-cst-next]');
    if (next) next.addEventListener('click', function () {
      if (!isCurrentValid()) return;
      if (step < total - 1) go(step + 1); else submit();
    });
  }
  /* option fade-in keyframe (added once) */
  var kf = document.createElement('style');
  kf.textContent = '@keyframes cstOptionIn{to{opacity:1}}';
  document.head.appendChild(kf);
  render();
})();
</script>