/* Contact CTA — scoped, non-breaking */
.slc-contact-cta-bleed{
  /* Keep the CTA constrained to the configured container width (no viewport bleed) */
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-top: 80px;
  margin-bottom: 80px;
  overflow: visible;
}
.slc-contact-cta{ margin: 0; }
.slc-contact-cta__inner{
  width: min(var(--slc-cta-width), 100%);
  margin: 0 auto;
  position: relative;
  overflow: visible;
}

/* Frame + 60/40 grid */
.slc-contact-cta__frame{
  position: relative;
  border-radius: var(--slc-cta-radius);
  overflow: hidden;
  background: #0b0b0f;
}
.slc-contact-cta__grid{
  display: grid;
  grid-template-columns: 60% 40%;
  min-height: 560px;
}
.slc-contact-cta__left{
  position: relative;
  padding: var(--slc-cta-pad-y) var(--slc-cta-pad-x);
  z-index: 1;
}
.slc-contact-cta__right{
  /* IMPORTANT: the map must cover the entire CTA container.
     We keep the 60/40 grid for layout, but the mapbox itself is absolutely
     positioned relative to the frame (not constrained to the right column). */
  position: static;
  display: block;
  z-index: 0;
}
/* Map background (pure image) covers the entire CTA frame */
.slc-contact-cta__mapbox{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  /* Map image is applied inline on the element (more reliable than CSS vars in some builders). */
  background-image: none;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
/* Gentle dark overlay for map readability (keep lines visible) */
.slc-contact-cta__mapbox::after{
  content: "";
  position: absolute;
  inset: 0;
  /* Admin controlled (0 → none, 0.6 → strong). Default keeps map lines visible. */
  background: rgba(0,0,0,var(--slc-cta-map-darkness, .28));
  pointer-events: none;
}
.slc-contact-cta__content{
  position: relative;
  z-index: 2;
  max-width: 540px;
  color: #fff;
}
.slc-contact-cta__eyebrow{
  display:inline-block;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 12px;
}
.slc-contact-cta__h{
  font-size: 44px;
  line-height: 1.12;
  margin: 0 0 14px;
  font-weight: 650;
  /* Force white headline by default (map background) */
  color: #fff;
}
.slc-contact-cta__p{
  font-size: 16px;
  line-height: 1.65;
  opacity: .82;
  margin: 0 0 26px;
  color: #fff;
}
.slc-contact-cta__meta{ display:flex; flex-direction:column; gap: 10px; }
.slc-contact-cta__meta-row{ display:flex; flex-direction:column; gap:4px; }
.slc-contact-cta__meta-label{ font-size: 12px; opacity:.72; letter-spacing:.04em; text-transform: uppercase; }
.slc-contact-cta__meta-value{ font-size: 15px; color:#fff; text-decoration:none; opacity:.92; }
.slc-contact-cta__meta-value:hover{ text-decoration: underline; }

/* Pin */
.slc-contact-cta__pin-wrap{
  position:absolute;
  z-index: 3;
  transform: translate(-50%, -100%);
  pointer-events: auto;
}
.slc-contact-cta__pin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  filter: drop-shadow(0 10px 26px rgba(255,255,255, calc(var(--slc-cta-pin-glow, .55))));
  cursor: default;
  transition: transform .18s ease, filter .18s ease;
  /* Always-visible gentle bounce on the configured location. */
  animation: slc-cta-pin-float 1.6s ease-in-out infinite;
}
.slc-contact-cta__pin svg{ width:100%; height:100%; fill:#fff; }
.slc-contact-cta__pin-wrap:hover .slc-contact-cta__pin{
  animation: slc-cta-bounce .55s ease;
  filter: drop-shadow(0 14px 34px rgba(255,255,255, calc(var(--slc-cta-pin-glow, .55) + .12)));
}
@keyframes slc-cta-pin-float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
@keyframes slc-cta-bounce{
  0%,100%{ transform: translateY(0); }
  30%{ transform: translateY(-10px); }
  60%{ transform: translateY(2px); }
}

/* Panel overlap */
.slc-contact-cta__panel{
  position: absolute;
  top: 50%;
  right: 0;
  /* Move left into the map column by the overlap amount */
  transform: translateY(-50%) translateX(calc(var(--slc-cta-overlap) * -1));
  /* Respect admin pixel width (restored). Responsive rules below stack on smaller screens. */
  width: var(--slc-cta-panel-w);
  max-width: 100%;
  min-width: 320px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  padding: 26px 26px 22px;
  z-index: 4;
}

/* CTA button (tablet/mobile only) */
.slc-contact-cta__cta-btn{
  display: none;
  position: absolute;
  z-index: 6;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.10);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  padding: 14px 22px;
  letter-spacing: .01em;
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  cursor: pointer;
  user-select: none;
}
.slc-contact-cta__cta-btn:active{ transform: translateY(1px); }


/* Modal open: reserve space so the close icon never overlaps the first field */
.slc-contact-cta.slc-cta-modal-open .slc-contact-cta__panel{
  padding-top: 64px;
}

/* Modal overlay (tablet/mobile) */
.slc-contact-cta__overlay{
  display: none;
}

/* Close icon (only visible in modal state under 1024px) */
.slc-contact-cta__close{
  display: none;
  position: absolute;
  top: 14px;
  right: 22px;
  z-index: 20;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid #E7E7EE;
  background: #fff;
  color: #111;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.slc-contact-cta__close:hover{ box-shadow: 0 8px 18px rgba(0,0,0,.10); }
.slc-contact-cta__notice{
  margin: 0 0 14px;
  font-size: 14px;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  color: #111;
}
.slc-contact-cta__notice--ok{ border-left: 4px solid rgba(82, 9, 229, .85); }
.slc-contact-cta__notice--err{ border-left: 4px solid rgba(176, 0, 32, .55); }

.slc-contact-cta__privacy{
  margin-top: -2px;
}
.slc-contact-cta__privacy-label{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.35;
  color: #111;
}
.slc-contact-cta__privacy-label input{
  margin-top: 2px;
}
.slc-contact-cta__privacy-link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.slc-contact-cta__form{ display:flex; flex-direction:column; gap: 14px; }
.slc-contact-cta__field label{
  display:block;
  font-size: 13px;
  font-weight: 600;
  color:#111;
  margin-bottom: 6px;
}
.slc-contact-cta__field input[type="text"],
.slc-contact-cta__field input[type="email"],
.slc-contact-cta__field input[type="tel"],
.slc-contact-cta__field input[type="file"],
.slc-contact-cta__field textarea{
  width: 100%;
  border: 1px solid #E7E7EE;
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 14px;
  color:#111;
  background:#fff;
  outline: none;
}
.slc-contact-cta__field textarea{ resize: vertical; min-height: 110px; }
.slc-contact-cta__field input:focus,
.slc-contact-cta__field textarea:focus{
  border-color: rgba(82, 9, 229, .55);
  box-shadow: 0 0 0 3px rgba(82,9,229,.10);
}
.slc-contact-cta__help{ font-size: 12px; color:#666; margin-top: 6px; }

/* Keep help text (e.g., "Max 5MB") dark even when dark mode is active */
html.sl-theme-dark .slc-contact-cta__help,
body.is-dark .slc-contact-cta__help,
body.dark-mode .slc-contact-cta__help,
html.dark .slc-contact-cta__help{
  color:#666 !important;
}


.slc-contact-cta__submit{
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 13px 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  background:#000;
  color:#fff;
}

/* Hide honeypot */
.slc-contact-cta__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Dark mode hard-lock for form styles (do not change in dark mode) */
html.sl-theme-dark .slc-contact-cta__panel,
body.is-dark .slc-contact-cta__panel,
body.dark-mode .slc-contact-cta__panel,
html.dark .slc-contact-cta__panel{
  background:#fff !important;
}
html.sl-theme-dark .slc-contact-cta__field label,
body.is-dark .slc-contact-cta__field label,
body.dark-mode .slc-contact-cta__field label,
html.dark .slc-contact-cta__field label{
  color:#111 !important;
}
html.sl-theme-dark .slc-contact-cta__field input[type="text"],
html.sl-theme-dark .slc-contact-cta__field input[type="email"],
html.sl-theme-dark .slc-contact-cta__field input[type="tel"],
html.sl-theme-dark .slc-contact-cta__field input[type="file"],
html.sl-theme-dark .slc-contact-cta__field textarea,
body.is-dark .slc-contact-cta__field input[type="text"],
body.is-dark .slc-contact-cta__field input[type="email"],
body.is-dark .slc-contact-cta__field input[type="tel"],
body.is-dark .slc-contact-cta__field input[type="file"],
body.is-dark .slc-contact-cta__field textarea,
body.dark-mode .slc-contact-cta__field input[type="text"],
body.dark-mode .slc-contact-cta__field input[type="email"],
body.dark-mode .slc-contact-cta__field input[type="tel"],
body.dark-mode .slc-contact-cta__field input[type="file"],
body.dark-mode .slc-contact-cta__field textarea,
html.dark .slc-contact-cta__field input[type="text"],
html.dark .slc-contact-cta__field input[type="email"],
html.dark .slc-contact-cta__field input[type="tel"],
html.dark .slc-contact-cta__field input[type="file"],
html.dark .slc-contact-cta__field textarea{
  color:#111 !important;
  background:#fff !important;
  border: 1px solid #D8D8E2 !important;
}

/* File upload button + filename must remain black in dark mode */
html.sl-theme-dark .slc-contact-cta__field input[type="file"],
body.is-dark .slc-contact-cta__field input[type="file"],
body.dark-mode .slc-contact-cta__field input[type="file"],
html.dark .slc-contact-cta__field input[type="file"]{
  color:#111 !important; /* filename text */
}
html.sl-theme-dark .slc-contact-cta__field input[type="file"]::file-selector-button,
body.is-dark .slc-contact-cta__field input[type="file"]::file-selector-button,
body.dark-mode .slc-contact-cta__field input[type="file"]::file-selector-button,
html.dark .slc-contact-cta__field input[type="file"]::file-selector-button{
  background:#fff !important;
  color:#111 !important;
  border: 1px solid #D8D8E2 !important;
  border-radius: 10px;
  padding: 10px 12px;
  margin-right: 10px;
  cursor: pointer;
}
html.sl-theme-dark .slc-contact-cta__field input[type="file"]::-webkit-file-upload-button,
body.is-dark .slc-contact-cta__field input[type="file"]::-webkit-file-upload-button,
body.dark-mode .slc-contact-cta__field input[type="file"]::-webkit-file-upload-button,
html.dark .slc-contact-cta__field input[type="file"]::-webkit-file-upload-button{
  background:#fff !important;
  color:#111 !important;
  border: 1px solid #D8D8E2 !important;
  border-radius: 10px;
  padding: 10px 12px;
  margin-right: 10px;
  cursor: pointer;
}
html.sl-theme-dark .slc-contact-cta__field input::placeholder,
html.sl-theme-dark .slc-contact-cta__field textarea::placeholder,
body.is-dark .slc-contact-cta__field input::placeholder,
body.is-dark .slc-contact-cta__field textarea::placeholder,
body.dark-mode .slc-contact-cta__field input::placeholder,
body.dark-mode .slc-contact-cta__field textarea::placeholder,
html.dark .slc-contact-cta__field input::placeholder,
html.dark .slc-contact-cta__field textarea::placeholder{
  color:#6b6b73 !important;
  opacity: 1;
}

/* Responsive */
@media (max-width: 1024px){
  .slc-contact-cta__h{ font-size: 36px; }
  .slc-contact-cta__left{ padding: 70px 60px; }

  /* Hide inline panel; use CTA button + modal on tablet/mobile */
  .slc-contact-cta__panel{ display: none; }
  .slc-contact-cta__cta-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    right: calc(var(--slc-cta-pad-x) + 10px);
    top: 72px;
    transform: none;
  }

  /* Modal open state */
  .slc-contact-cta.slc-cta-modal-open .slc-contact-cta__overlay{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.62);
    z-index: 90;
  }
  .slc-contact-cta.slc-cta-modal-open .slc-contact-cta__panel{
    display: block;
    position: fixed;
    left: 50%;
    top: var(--slc-cta-modal-top, 18px);
    bottom: var(--slc-cta-modal-safe-bottom, 110px);
    right: auto;
    transform: translateX(-50%);
    width: min(620px, 92vw);
    max-height: none;
    overflow: auto;
    z-index: 100;
    padding-top: 16px;

  }
  .slc-contact-cta.slc-cta-modal-open .slc-contact-cta__close{ display: inline-flex; align-items:center; justify-content:center; z-index: 110; position: sticky; top: 10px; margin-left: auto; float: right; }
}
@media (max-width: 820px){
  .slc-contact-cta__inner{ width: 100%; padding: 0 16px; }
  .slc-contact-cta__grid{ grid-template-columns: 1fr; min-height: auto; }
  .slc-contact-cta__left{ padding: 56px 22px; }
  .slc-contact-cta__right{ min-height: 260px; }
  .slc-contact-cta__mapbox{ width: 100%; }

  /* Mobile button — bottom center */
  .slc-contact-cta__cta-btn{
    left: 50%;
    right: auto;
    bottom: calc(var(--slc-cta-modal-safe-bottom, 110px) - 20px + env(safe-area-inset-bottom, 0px));
    top: auto;
    transform: translateX(-50%);
    width: min(340px, 92%);
    padding: 15px 22px;
  }
}

/* Body scroll lock when modal open */
body.slc-cta-modal-lock{ overflow: hidden !important; }


/* Dark mode hard locks — keep CTA button text + close icon black on white */
html.sl-theme-dark .slc-contact-cta__cta-btn{
  background:#fff !important;
  color:#111 !important;
  border-color: rgba(0,0,0,.10) !important;
}
html.sl-theme-dark .slc-contact-cta__close{
  background:#fff !important;
  color:#111 !important;
  border-color:#E7E7EE !important;
}



/* Dark mode: keep privacy + notices black (form stays white) */
html.sl-theme-dark .slc-contact-cta__privacy-label,
body.is-dark .slc-contact-cta__privacy-label,
body.dark-mode .slc-contact-cta__privacy-label,
html.dark .slc-contact-cta__privacy-label{
  color:#111 !important;
}
html.sl-theme-dark .slc-contact-cta__notice,
body.is-dark .slc-contact-cta__notice,
body.dark-mode .slc-contact-cta__notice,
html.dark .slc-contact-cta__notice{
  color:#111 !important;
}
html.sl-theme-dark .slc-contact-cta__notice a,
body.is-dark .slc-contact-cta__notice a,
body.dark-mode .slc-contact-cta__notice a,
html.dark .slc-contact-cta__notice a{
  color:inherit !important;
}


/* Mobile full-width control (viewport-based). Default 100% = full width. */
@media (max-width: 767px){
  .slc-contact-cta-bleed{
    width: calc(var(--slc-cta-mobile-width-vw, 100) * 1vw);
    margin-left: calc(50% - (var(--slc-cta-mobile-width-vw, 100) * 0.5vw));
    margin-right: calc(50% - (var(--slc-cta-mobile-width-vw, 100) * 0.5vw));
  }
  .slc-contact-cta__inner{
    width: 100%;
  }
}