/* Custom lead-capture fields for the Contact page form.
   Deliberately self-contained (no reuse of Framer's own hashed classes) --
   reusing a hashed class once caused an unrelated 59px layout bug because
   that class carried an undocumented flex gap. Real design tokens below
   were read directly from the page's own CSS, not guessed:
   input bg #f5f4f3, radius 8px, font "Inter Display" 16px/500 -.2px,
   field height 69px (measured from the native Name field), label preset
   18px/500 (site's subheading preset), accent #edff00. */

.lf-field-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}

/* Clearer visual hierarchy: more room BETWEEN field groups than between a
   group's own label and its content -- the form's native flex `gap` is
   16px for every sibling pair, so this adds extra breathing room only on
   top of the group-starting elements (Name is first, so it needs none). */
#lf-contact-method,
#lf-service,
.framer-ed8x5h > label[data-framer-name="Message"] {
  margin-top: 10px;
}

.lf-label {
  font-family: "Host Grotesk", "Host Grotesk Placeholder", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: #090909;
  margin: 0;
}

/* ---------- Tabs ---------- */

.lf-tabs {
  display: flex;
  width: 100%;
  gap: 8px;
}

.lf-tab {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 49px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: #f5f4f3;
  box-shadow: inset 0px 0px 2px 0px #0000000d;
  color: #09090980;
  font-family: "Inter Display", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.2px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lf-tab span:last-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lf-tab-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (max-width: 500px) {
  .lf-tab {
    gap: 5px;
    padding: 0 6px;
    font-size: 12px;
  }
  .lf-tab-icon {
    width: 15px;
    height: 15px;
  }
  .lf-tab-dot {
    display: none;
  }
}

.lf-tab.is-active {
  background: #1e1e1e;
  color: #f9f9f9;
}

.lf-tab.is-active .lf-tab-dot {
  opacity: 1;
}

.lf-tab-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #edff00;
  opacity: 0;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.lf-tab:hover {
  background: #e9e8e6;
}

.lf-tab.is-active:hover {
  background: #1e1e1e;
}

/* ---------- Text / phone inputs (shared look with native fields) ---------- */

.lf-text-input,
.lf-select {
  width: 100%;
  height: 49px;
  padding: 0 24px;
  border: none;
  border-radius: 8px;
  background: #f5f4f3;
  box-shadow: inset 0px 0px 2px 0px #0000000d;
  color: #090909;
  font-family: "Inter Display", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.2px;
  box-sizing: border-box;
  outline: none;
}

.lf-text-input::placeholder {
  color: #09090980;
}

.lf-method-value {
  width: 100%;
}

.lf-method-value[hidden] {
  display: none;
}

.lf-phone-row {
  display: flex;
  width: 100%;
  gap: 8px;
}

.lf-country-select {
  flex: 0 0 128px;
  height: 49px;
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  background: #f5f4f3;
  box-shadow: inset 0px 0px 2px 0px #0000000d;
  color: #090909;
  font-family: "Inter Display", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.2px;
  box-sizing: border-box;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309090980' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.lf-phone-input {
  flex: 1 1 0;
  min-width: 0;
}

/* ---------- Service select ---------- */

.lf-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309090980' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 18px;
  padding-right: 48px;
}

.lf-select option {
  color: #090909;
}

/* The native "Email" field is replaced by the Email tab above -- kept in
   the DOM (never deleted) because deleting Framer-hydrated form fields
   from the static HTML makes hydration re-insert or crash on them (see
   the "Get in touch" button and the #306 hydration error this file's
   comment describes). display:none exempts it from required-field
   constraint validation per spec, so it can't block submission either. */
label[data-framer-name="Email"] {
  display: none !important;
}

/* The native Name field is replaced the same way -- a custom copy is
   built in buildNameGroup() instead. Discovered the hard way: even a
   pure CSS resize of this element (no DOM change at all) made hydration
   throw React error #306, presumably because Framer measures this
   component's own rendered size internally. display:none is proven safe
   (doesn't trigger that measurement path at all), resizing isn't. */
label[data-framer-name="Name"] {
  display: none !important;
}

/* Visual field order: Name -> contact method -> service -> Message ->
   Submit. The form is appended to (not reordered in the DOM) to stay
   hydration-safe, so this is done entirely with flex `order` -- every
   sibling needs an explicit value, since unset native fields default to
   order:0 and would otherwise sort ahead of anything given order:2/3. */
.framer-ed8x5h > label[data-framer-name="Message"] {
  order: 4;
}
.framer-ed8x5h > .framer-1oc0szs-container {
  order: 5;
}