/* ==========================================================================
   Form Styles – The Break Estate
   ==========================================================================
   All form element styling. Uses tokens from tokens.css.
   Targets .tbe-form class injected via the DreamForm attr system.
   ========================================================================== */
.tbe-form .dreamform-paragraph h1 + p {
    margin-top: 32px;
}
.tbe-form .dreamform-paragraph p + h1 {
    margin-top: 10px;
}
  .dreamform-paragraph h1{
    max-width:520px;
    margin:auto;
    margin-top:20px;
  }
  div:has([type="submit"]){
      text-align:center;
  }
/* ---------- Form layout ---------- */
@keyframes tbe-overlay-reveal {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes tbe-overlay-cover {
  from { opacity: 0; }
  to   { opacity: 1; }
}
html{
   overflow-x: hidden; 
}

body{
  position: relative;
  overflow-x: hidden;
}
.tbe-form-container p{
  text-align: center;
}
/* Fade via a fixed overlay so body opacity never changes (which would break ::before mix-blend-mode) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: #0d0507;
  z-index: 30000;
  pointer-events: none;
  animation: tbe-overlay-reveal 0.6s ease forwards;
}

body.is-leaving::after {
  animation: tbe-overlay-cover 0.4s ease forwards;
}
body:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom:0;
  right:0;
  height: 100%;
  width: 200vw;
  mix-blend-mode: hard-light;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUbTPUKIaf8DjG_-aSm_5CHCrl7Ax1xOWFB_D9jARrnOsSRd4-tajhn06ToaI0OC-q2Vt1K5K54YqoyEUL_269h4bVKpUWKJfJ9leixDkIA5QTpjwzHJpfPJQIgSJt2OYttrwt2rkD9w/s1600/Tileable+metal+surface+texture.jpg");
  background-size: 200px;
  background-repeat: repeat;
  z-index: 20000;
  opacity: .07;
  pointer-events: none;
    isolation: isolate;  /* This can help with blend modes */
  will-change: transform; 
}

.tbe-form {
  width: 100%;
  max-width: 38rem;
  margin: 0 auto;
}

@media (max-width: 640px) {
  /* Mobile: innermost line is at 34px, give 10px breathing room = 44px      */
  .dreamform-paragraph h1 span{
      font-size: !important;
  }
}

/* DreamForm grid rows (inline style: display:grid; grid-template-columns) */
.tbe-form > div[style] {
  row-gap: var(--space-md);
  column-gap: var(--space-md);
}

/* ---------- Field wrapper ---------- */

.tbe-form > div > div > div {
  padding-top: var(--field-gap);
}

.tbe-form > div > div > div:first-child {
  padding-top: 0;
}

/* ---------- Labels ---------- */

.tbe-form label {
  text-align: center;
  display: block;
  font-family: var(--label-font-family);
  font-size: var(--label-font-size);
  font-weight: var(--label-font-weight);
  letter-spacing: var(--label-letter-spacing);
  text-transform: var(--label-text-transform);
  color: var(--label-color);
  margin-bottom: var(--label-margin-bottom);
  transition: color var(--transition-base);
}

.tbe-form label em {
  font-style: normal;
  opacity: 0.35;
  margin-left: -0.08em;
}

/* ---------- Inputs & textareas ---------- */

.tbe-form input[type="text"],
.tbe-form input[type="email"],
.tbe-form input[type="url"],
.tbe-form input[type="tel"],
.tbe-form input[type="number"],
.tbe-form input[type="date"],
.tbe-form input[type="search"],
.tbe-form textarea,
.tbe-form select:not([data-tbe-select]) {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  font-family: var(--font-body);
  font-size: var(--input-font-size);
  line-height: var(--leading-normal);
  color: var(--input-color);
  background-color: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-radius);
  outline: none;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-slow);
  text-align: center;
}

.tbe-form textarea {
  min-height: 7.5rem;
  resize: none;
  overflow: hidden;
  text-align: left;
}

/* Hover */
.tbe-form input[type="text"]:hover,
.tbe-form input[type="email"]:hover,
.tbe-form input[type="url"]:hover,
.tbe-form input[type="tel"]:hover,
.tbe-form input[type="number"]:hover,
.tbe-form input[type="date"]:hover,
.tbe-form input[type="search"]:hover,
.tbe-form textarea:hover,
.tbe-form select:not([data-tbe-select]):hover {
  border-color: var(--color-border-hover);
  background-color: rgba(228, 222, 212, 0.035);
}

/* Focus */
.tbe-form input[type="text"]:focus,
.tbe-form input[type="email"]:focus,
.tbe-form input[type="url"]:focus,
.tbe-form input[type="tel"]:focus,
.tbe-form input[type="number"]:focus,
.tbe-form input[type="date"]:focus,
.tbe-form input[type="search"]:focus,
.tbe-form textarea:focus,
.tbe-form select:not([data-tbe-select]):focus {
  border-color: var(--color-border-focus);
  background-color: var(--input-bg-focus);
  box-shadow: 0 0 0 3px rgba(228, 222, 212, 0.04);
}

/* Placeholder */
.tbe-form input::placeholder,
.tbe-form textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* Autofill – suppress browser highlight (Safari iOS, Chrome) */
.tbe-form input:-webkit-autofill,
.tbe-form input:-webkit-autofill:hover,
.tbe-form input:-webkit-autofill:focus,
.tbe-form input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #0d0507 inset !important;
  -webkit-text-fill-color: rgba(228, 222, 212, 0.75) !important;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: rgba(228, 222, 212, 0.75);
}

/* Disabled */
.tbe-form input:disabled,
.tbe-form textarea:disabled,
.tbe-form select:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ---------- Descriptions ---------- */

.tbe-form .dreamform-field-description {
  font-family: var(--font-body);
  font-size: var(--desc-font-size);
  font-style: italic;
  color: var(--desc-color);
  margin-top: var(--desc-margin-top);
  line-height: var(--leading-normal);
}

/* ---------- Error messages ---------- */

.tbe-form [data-error] {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-error);
  margin-bottom: var(--space-sm);
  transition: opacity var(--transition-base);
}

.tbe-form [data-error]:empty {
  display: none;
}

.tbe-form [data-has-error="1"] input,
.tbe-form [data-has-error="1"] textarea,
.tbe-form [data-has-error="1"] select {
  border-color: var(--color-error);
}

/* ---------- Submit button ---------- */

.tbe-form button[type="submit"],
.tbe-form .dreamform-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: 400;
  letter-spacing: var(--btn-letter-spacing);
  text-transform: lowercase;
  color: var(--color-text);
  background: transparent;
  border: var(--btn-border-width) solid var(--color-border-hover);
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-fast);
 
  align-self: center;
  width: auto;
  min-width: 12rem;
}

.tbe-form button[type="submit"]:hover,
.tbe-form .dreamform-button:hover {
  background: rgba(228, 222, 212, 0.07);
  border-color: var(--color-border-focus);
}

.tbe-form button[type="submit"]:active,
.tbe-form .dreamform-button:active {
  transform: scale(0.98);
}

.tbe-form button[type="submit"]:focus-visible,
.tbe-form .dreamform-button:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
}

/* ---------- Checkbox/radio option labels (inline, next to the control) ---------- */

.tbe-form .dreamform-choices > div > label {
  display: inline;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-text);
  margin-bottom: 0;
  vertical-align: middle;
  cursor: pointer;
}

/* ---------- Choice buttons (checkbox/radio as buttons) ---------- */

.tbe-form .dreamform-choices-buttons .dreamform-choice-button label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-sm) var(--space-lg);
  border-color: var(--color-border);
  border-radius: var(--input-radius);
  color: var(--color-text);
  background: transparent;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base);
}

.tbe-form .dreamform-choices-buttons .dreamform-choice-button label:hover {
  border-color: var(--color-border-hover);
  background: rgba(228, 222, 212, 0.03);
}

.tbe-form .dreamform-choices-buttons .dreamform-choice-button input:checked + label {
  background: rgba(228, 222, 212, 0.1);
  border-color: var(--color-accent);
  color: var(--color-text);
}

/* ---------- Radio & checkbox (standard layout) ---------- */

.tbe-form input[type="radio"],
.tbe-form input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  border: var(--input-border-width) solid var(--color-border);
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
  margin-right: var(--space-sm);
  flex-shrink: 0;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base);
}

.tbe-form input[type="radio"] {
  border-radius: 50%;
}

.tbe-form input[type="checkbox"] {
  border-radius: 2px;
}

.tbe-form input[type="radio"]:hover,
.tbe-form input[type="checkbox"]:hover {
  border-color: var(--color-border-hover);
}

.tbe-form input[type="radio"]:checked {
  border-color: var(--color-accent);
  background: radial-gradient(circle, var(--color-accent) 35%, transparent 40%);
}

.tbe-form input[type="checkbox"]:checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%230d0507' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- Input affix (prefix/suffix inside the box) ---------- */

.tbe-form .dreamform-input-affix {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 var(--input-padding-x);
  background-color: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-radius);
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-slow);
}

.tbe-form .dreamform-input-affix:hover {
  border-color: var(--color-border-hover);
  background-color: rgba(228, 222, 212, 0.035);
}

.tbe-form .dreamform-input-affix:focus-within {
  border-color: var(--color-border-focus);
  background-color: var(--input-bg-focus);
  box-shadow: 0 0 0 3px rgba(228, 222, 212, 0.04);
}

.tbe-form .dreamform-input-affix > span {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  line-height: 1;
  user-select: none;
}

.tbe-form .dreamform-input-affix > input,
.tbe-form .dreamform-input-affix > select,
.tbe-form .dreamform-input-affix > textarea {
  flex: 1;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0;
  padding-right: 0;
  outline: none;
}

/* ---------- Slider ---------- */

.tbe-form .dreamform-slider {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.tbe-form input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  background: transparent;
  cursor: pointer;
  height: 2.25rem;
  padding: 0;
  border: none;
}

/* Track – WebKit */
.tbe-form input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: rgba(228, 222, 212, 0.25);
  border-radius: 2px;
  transition: background var(--transition-base);
}

.tbe-form input[type="range"]:hover::-webkit-slider-runnable-track {
  background: rgba(228, 222, 212, 0.35);
}

/* Thumb – WebKit */
.tbe-form input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-text);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 0 1px rgba(228, 222, 212, 0.3), 0 1px 4px rgba(0, 0, 0, 0.4);
  margin-top: -6.5px;
  cursor: grab;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
}

.tbe-form input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 0 1px rgba(228, 222, 212, 0.5), 0 2px 8px rgba(0, 0, 0, 0.5);
}

.tbe-form input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.1);
  cursor: grabbing;
  box-shadow: 0 0 0 2px rgba(228, 222, 212, 0.4), 0 1px 3px rgba(0, 0, 0, 0.4);
}

.tbe-form input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px rgba(228, 222, 212, 0.5), 0 0 0 4px rgba(228, 222, 212, 0.1);
}

/* Track – Firefox */
.tbe-form input[type="range"]::-moz-range-track {
  height: 3px;
  background: rgba(228, 222, 212, 0.25);
  border-radius: 2px;
  border: none;
}

.tbe-form input[type="range"]:hover::-moz-range-track {
  background: rgba(228, 222, 212, 0.35);
}

/* Thumb – Firefox */
.tbe-form input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-text);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 0 1px rgba(228, 222, 212, 0.3), 0 1px 4px rgba(0, 0, 0, 0.4);
  cursor: grab;
}

.tbe-form input[type="range"]::-moz-range-thumb:hover {
  box-shadow: 0 0 0 1px rgba(228, 222, 212, 0.5), 0 2px 8px rgba(0, 0, 0, 0.5);
}

.tbe-form input[type="range"]:active::-moz-range-thumb {
  cursor: grabbing;
}

/* Firefox filled portion */
.tbe-form input[type="range"]::-moz-range-progress {
  height: 3px;
  background: rgba(228, 222, 212, 0.45);
  border-radius: 2px;
}

/* Value output (read-only display) */
.tbe-form .dreamform-slider-value {
  flex-shrink: 0;
  min-width: 2.5em;
  padding: 0.25em 0.625em;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  background: rgba(228, 222, 212, 0.06);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  line-height: 1.4;
}

/* Number companion input */
.tbe-form .dreamform-slider-input {
  flex-shrink: 0;
  width: 4.5em;
  padding: var(--input-padding-y) var(--input-padding-x);
  font-family: var(--font-body);
  font-size: var(--input-font-size);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--input-color);
  background: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-radius);
  outline: none;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base);
}

.tbe-form .dreamform-slider-input:hover {
  border-color: var(--color-border-hover);
  background: rgba(228, 222, 212, 0.035);
}

.tbe-form .dreamform-slider-input:focus {
  border-color: var(--color-border-focus);
  background: var(--input-bg-focus);
  outline: none;
  box-shadow: 0 0 0 3px rgba(228, 222, 212, 0.04);
}

/* Override plugin tick-mark gradient -- keep the clean solid track */
.tbe-form .dreamform-slider input[type="range"][list]::-webkit-slider-runnable-track {
  background: rgba(228, 222, 212, 0.25);
}

.tbe-form .dreamform-slider input[type="range"][list]:hover::-webkit-slider-runnable-track {
  background: rgba(228, 222, 212, 0.35);
}

/* Hide native datalist tick marks */
.tbe-form .dreamform-slider datalist {
  display: none;
}

/* ---------- Address grid ---------- */

.tbe-form .dreamform-address-structured {
  gap: var(--space-lg) var(--space-md);
}

.tbe-form .dreamform-address-row label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

/* ---------- Date chips ---------- */

.tbe-form .dreamform-date-chip {
  background: rgba(228, 222, 212, 0.08);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.tbe-form .dreamform-date-chip-remove {
  color: var(--color-text);
}

/* ---------- Date caret ---------- */

.tbe-form .dreamform-date-caret {
  color: var(--color-text);
}

/* ---------- Signature ---------- */

.tbe-form .dreamform-signature-tabs {
  display: flex;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-2);
}

.tbe-form .dreamform-signature-tab {
  font-family: var(--font-label);
  font-size: var(--label-font-size);
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0 0 2px;
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.tbe-form .dreamform-signature-tab.is-active {
  color: var(--color-text);
  border-bottom-color: currentColor;
}

.tbe-form .dreamform-signature-tab:hover {
  color: var(--color-text);
}

.tbe-form .dreamform-signature-type-input {
  width: 100%;
}

.tbe-form .dreamform-signature-canvas {
  border-color: var(--color-border);
  border-radius: var(--input-radius);
  background: rgba(228, 222, 212, 0.03);
  touch-action: none;
  max-width: 100%;
}

.tbe-form .dreamform-signature-clear {
  font-family: var(--font-label);
  font-size: var(--label-font-size);
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-base);
}

.tbe-form .dreamform-signature-clear:hover {
  color: var(--color-text);
}

/* ---------- Survey table ---------- */

.tbe-form .dreamform-survey-table th,
.tbe-form .dreamform-survey-table td {
  color: var(--color-text);
}

.tbe-form .dreamform-survey-table thead th {
  font-family: var(--font-label);
  font-size: var(--label-font-size);
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
  font-weight: 400;
}

.tbe-form .dreamform-survey-table tbody th {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  text-align: left;
}

.tbe-form .dreamform-survey-table tbody tr + tr {
  border-color: var(--color-border);
}

/* ---------- Separator ---------- */

.tbe-form .dreamform-separator {
  border-color: var(--color-border);
  margin: var(--space-lg) 0;
}

/* ---------- Centered form enhancements ---------- */

/* Submit button: center horizontally (inline-flex won't auto-center in a block parent) */
.tbe-form:not(.tbe-form--left) button[type="submit"],
.tbe-form:not(.tbe-form--left) .dreamform-button {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

/* Custom select: center selected value text, keep caret pinned to the right */
.tbe-form:not(.tbe-form--left) .tbe-select-trigger {
  position: relative;
  justify-content: center;
}

.tbe-form:not(.tbe-form--left) .tbe-select-caret {
  position: absolute;
  right: var(--input-padding-x);
}

/* Dropdown options */
.tbe-form:not(.tbe-form--left) .tbe-select-option {
  text-align: center;
}

/* Error messages and field descriptions — apply to column wrapper so text-align inherits */
.tbe-form:not(.tbe-form--left) > div > div,
.tbe-form:not(.tbe-form--left) > div > div > div {
  text-align: center;
}

/* ---------- Left-aligned form variant ---------- */

.tbe-form--left label {
  text-align: left;
}

.tbe-form--left input[type="text"],
.tbe-form--left input[type="email"],
.tbe-form--left input[type="url"],
.tbe-form--left input[type="tel"],
.tbe-form--left input[type="number"],
.tbe-form--left input[type="date"],
.tbe-form--left input[type="search"],
.tbe-form--left select:not([data-tbe-select]) {
  text-align: left;
}

/* ---------- Paragraph content blocks ---------- */

.tbe-form .dreamform-paragraph {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: var(--leading-loose);
}

.tbe-form .dreamform-paragraph p {
  min-height: calc(var(--leading-loose) * 1em);
}

.tbe-form .dreamform-paragraph p + p {
  margin-top: 32px;
}

.tbe-form .dreamform-paragraph h2 {
  font-family: var(--font-display);
  margin-bottom: var(--space-sm);
}

/* ---------- Image select labels ---------- */

.tbe-form .dreamform-image-select-option {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  margin-bottom: 0;
}

.tbe-form .dreamform-image-select-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---------- Rating ---------- */

.tbe-form .dreamform-rating .dreamform-rating-icon {
  display: inline-block;
  font-family: inherit;
  font-size: var(--df-font-size-rating, 1.5rem);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0;
  color: rgba(228, 222, 212, 0.15);
  transition: color var(--transition-fast);
}

.tbe-form .dreamform-rating .dreamform-rating-option:hover .dreamform-rating-icon,
.tbe-form .dreamform-rating .dreamform-rating-option:hover ~ .dreamform-rating-option .dreamform-rating-icon {
  color: rgba(228, 222, 212, 0.5);
}

.tbe-form .dreamform-rating .dreamform-rating-option input:checked ~ .dreamform-rating-icon,
.tbe-form .dreamform-rating .dreamform-rating-option:has(input:checked) ~ .dreamform-rating-option .dreamform-rating-icon,
.tbe-form .dreamform-rating .dreamform-rating-option:has(input:checked) .dreamform-rating-icon {
  color: var(--color-accent);
}

/* ---------- Time picker ---------- */

.tbe-form .dreamform-date-time-picker {
  margin-top: var(--space-sm);
}

.tbe-form .dreamform-time-select {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  border: var(--input-border-width) solid var(--color-border);
  color: var(--color-text);
  background-color: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23e4ded4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 4 6 8 10 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 12px;
  border-radius: var(--input-radius);
  padding: var(--input-padding-y) var(--input-padding-x);
  padding-right: 2.5rem;
  font-family: var(--font-body);
  font-size: 16px;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base);
}

.tbe-form .dreamform-time-select:focus {
  border-color: var(--color-border-focus);
  background-color: var(--input-bg-focus);
  outline: none;
}

.tbe-form .dreamform-time-select option {
  background: #130a0d;
  color: var(--color-text);
}

.tbe-form .dreamform-time-label {
  font-family: var(--font-label);
  font-size: var(--label-font-size);
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---------- Success message ---------- */

.tbe-form + .dreamform-success,
[data-dreamform-success] {
  font-family: var(--font-body);
  color: var(--color-text);
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
}

/* ==========================================================================
   Page Layouts
   ========================================================================== */

/* ---------- Form page layout ---------- */

.tbe-form-page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-2xl) var(--space-lg);
}

.tbe-form-page-inner {
  width: 100%;
  max-width: 42rem;
}

.tbe-form-header {
  text-align: center;
  margin-bottom: .6rem;
}

.tbe-site-title {
  font-family: var(--font-display);
  font-size: 18.5px;
  margin-left:8px;
  font-weight: 400;
  letter-spacing: .5em;
  color: #c4bdb1;
  text-transform: uppercase;
  text-align: center;
}

.tbe-form-intro {
  text-align: center;
  margin-bottom: var(--space-2xl);
  color: var(--color-text);
  line-height: var(--leading-loose);
}

.tbe-form-intro p {
  margin-bottom: var(--space-sm);
}

.tbe-form-intro p:last-child {
  margin-bottom: 0;
}

.tbe-form-container {
  width: 100%;
}

/* ---------- Generic page layout ---------- */

.tbe-page {
  min-height: 100vh;
  padding: var(--space-2xl) var(--space-lg);
}

.tbe-page-inner {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
}

/* ==========================================================================
   Responsive & Mobile
   ========================================================================== */

@media (max-width: 640px) {
  .tbe-form {
    max-width: 100%;
  }

  .tbe-form button[type="submit"],
  .tbe-form .dreamform-button {
    width: 100%;
    min-width: 0;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  .tbe-form-page {
    padding: var(--space-xl) var(--space-md);
  }

  .tbe-site-title {
    font-size: 14.5px;
  }

  .tbe-form-title {
    letter-spacing: 0.25em;
  }

  .tbe-form-header {

  }

  .tbe-form-intro {
    margin-bottom: var(--space-xl);
  }

  .tbe-form .dreamform-slider {
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .tbe-form .dreamform-slider-input {
    width: 100%;
    text-align: left;
  }

  .tbe-form .dreamform-address-structured {
    gap: var(--space-md);
  }
}

/* --- Touch-device enhancements --- */

@media (pointer: coarse) {
  .tbe-form input[type="radio"],
  .tbe-form input[type="checkbox"] {
    width: 1.375rem;
    height: 1.375rem;
    margin-right: 0.625rem;
  }

  .tbe-form .dreamform-choices > div {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .tbe-form .dreamform-choices-buttons .dreamform-choice-button label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .tbe-form input[type="text"],
  .tbe-form input[type="email"],
  .tbe-form input[type="url"],
  .tbe-form input[type="tel"],
  .tbe-form input[type="number"],
  .tbe-form input[type="date"],
  .tbe-form input[type="search"],
  .tbe-form textarea,
  .tbe-form select:not([data-tbe-select]) {
    font-size: 16px;
    min-height: 44px;
  }

  .tbe-form .dreamform-input-affix {
    min-height: 44px;
  }

  .tbe-form .dreamform-date-chip {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  .tbe-form .dreamform-date-chip-remove {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .tbe-form .dreamform-rating .dreamform-rating-icon {
    font-size: 1.75rem;
    padding: 0.25rem;
  }
}