/* =============================================================
   1. TOKENS
   ============================================================= */

/* defaults = light background (inline form) */
:is(#forminator-module-246, #forminator-module-248) {
  --f-ink:        var(--text, #303238);     /* labels + typed text        */
  --f-req:        var(--ta-5, #6a6a6a);     /* "(required)"               */
  --f-muted:      var(--ta-5, #6a6a6a);     /* placeholder, counter       */
  --f-line:       var(--text, #303238);     /* underline                  */
  --f-line-hov:   var(--ta-3, #224944);
  --f-focus:      var(--primary, #10A08E);  /* focus underline            */
  --f-accent:     var(--primary, #10A08E);  /* button                     */
  --f-accent-hov: var(--ta-3, #224944);
  --f-surface:    var(--ta-7, #faf8f6);     /* section bg (autofill fix)  */
  --f-error:      #c0392b;

  --f-label-size: var(--text-m, 15px);      
  --f-input-size: 16px;                     /* 16px stops iOS zooming in  */
  --f-col-gap:    var(--space-xl, 32px);    /* 25–35.5px  */
  --f-row-gap:    var(--space-2xl, 48px);   /* 31–47px    */
  --f-stack-gap:  var(--space-xl, 36px);    /* row gap when stacked */
  --f-gap-tight:  var(--space-3xs, 6px);    /* label→field, line→error */
  --f-btn:        56px;                     /* round button diameter      */
}

/* footer form sits on dark green */
#forminator-module-248 {
  --f-ink:        var(--white, #ffffff);
  --f-req:        var(--white, #ffffff);    /* design: same as label      */
  --f-muted:      rgba(255, 255, 255, .7);
  --f-line:       rgba(255, 255, 255, .75);
  --f-line-hov:   var(--white, #ffffff);
  --f-focus:      var(--ta-8, #84e6da);
  --f-surface:    var(--ta-6, #547a75);
  --f-error:      #ffb4a9;                  /* readable on dark green     */

  --f-col-gap:    var(--space-2xl, 48px);   /* 31–47px    */
  --f-row-gap:    var(--space-3xl, 60px);   /* 39–63px    */
  --f-pill-circle: 42px;
}


/* =============================================================
   2. SHARED BASE (both forms)
   ============================================================= */

/* Grid: Forminator's rows are flattened so every field becomes a
   direct grid item. Each form sets its own columns below. */
:is(#forminator-module-246, #forminator-module-248) {
  display: grid;
  column-gap: var(--f-col-gap);
  row-gap: var(--f-row-gap);
  align-items: end;
  margin: 0;
  font-family: inherit;
  color: var(--f-ink);
}
:is(#forminator-module-246, #forminator-module-248) .forminator-row {
  display: contents;
}
:is(#forminator-module-246, #forminator-module-248) .forminator-col {
  margin: 0;
  padding: 0;
  min-width: 0;
  max-width: none;
  width: auto;
  flex: none;
}
:is(#forminator-module-246, #forminator-module-248) .forminator-field {
  position: relative;
  margin: 0;
  padding: 0;
}
:is(#forminator-module-246, #forminator-module-248) .forminator-response-message {
  grid-column: 1 / -1;
}

/* :: LABELS: pinned above the field (Material floating disabled) */
:is(#forminator-module-246, #forminator-module-248) .forminator-label,
:is(#forminator-module-246, #forminator-module-248) .forminator-label.forminator-floating--input,
:is(#forminator-module-246, #forminator-module-248) .forminator-label.forminator-floating--textarea,
:is(#forminator-module-246, #forminator-module-248) .forminator-is_active .forminator-label,
:is(#forminator-module-246, #forminator-module-248) .forminator-is_filled .forminator-label,
:is(#forminator-module-246, #forminator-module-248) .forminator-label.forminator-has_phone {
  /* !important: Material moves, shrinks and bolds labels on focus */
  position: static !important;
  display: block !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  transition: none !important;
  margin: 0 0 var(--f-gap-tight) !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: var(--f-label-size) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  color: var(--f-ink) !important;
  white-space: normal;
}
/* swap the red asterisk for "(required)" */
:is(#forminator-module-246, #forminator-module-248) .forminator-required {
  font-size: 0;
  color: var(--f-req) !important;
}
:is(#forminator-module-246, #forminator-module-248) .forminator-required::after {
  content: "(required)";
  font-size: var(--f-label-size);
  font-weight: 400;
  color: var(--f-req) !important;
}

/* :: FIELDS: underline only */
:is(#forminator-module-246, #forminator-module-248) :is(.forminator-input--wrap, .forminator-textarea--wrap) {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
/* remove Material's animated bars; our focus line replaces them */
:is(#forminator-module-246, #forminator-module-248) :is(.forminator-input--wrap, .forminator-textarea--wrap)::before,
:is(#forminator-module-246, #forminator-module-248) :is(.forminator-input--wrap, .forminator-textarea--wrap)::after {
  display: none;
}
:is(#forminator-module-246, #forminator-module-248) :is(.forminator-input, .forminator-textarea) {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 8px 0 !important;
  font-family: inherit;
  font-size: var(--f-input-size);
  line-height: 1.4;
  color: var(--f-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--f-line);
  border-radius: 0;
  box-shadow: none;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
:is(#forminator-module-246, #forminator-module-248) :is(.forminator-input, .forminator-textarea)::placeholder {
  color: var(--f-muted);
  opacity: 1;
}
:is(#forminator-module-246, #forminator-module-248) :is(.forminator-input, .forminator-textarea):hover {
  border-bottom-color: var(--f-line-hov);
}
:is(#forminator-module-246, #forminator-module-248) :is(.forminator-input, .forminator-textarea):focus {
  border-bottom-color: var(--f-focus);
  box-shadow: inset 0 -1px 0 var(--f-focus);
}
:is(#forminator-module-246, #forminator-module-248) .forminator-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--f-surface) inset;
  -webkit-text-fill-color: var(--f-ink);
}

/* :: TEXTAREA: starts as one line like the design, grows as you type */
:is(#forminator-module-246, #forminator-module-248) .forminator-textarea {
  min-height: calc(1.4em + 16px) !important;
  resize: none;
  overflow: hidden;
  field-sizing: content;
}
@supports not (field-sizing: content) {
  /* older browsers can't auto-grow, so give a few lines to type in */
  :is(#forminator-module-246, #forminator-module-248) .forminator-textarea {
    min-height: 5.5em !important;
    overflow: auto;
  }
}
/* character counter: small, under the line on the right */
:is(#forminator-module-246, #forminator-module-248) .forminator-description {
  position: absolute;
  top: 100%;
  right: 0;
  margin: var(--f-gap-tight) 0 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--f-muted);
}

/* :: PHONE: if it's ever switched to the international version,
      hide the flag so it matches the design */
:is(#forminator-module-246, #forminator-module-248) :is(.iti, .forminator-iti-input) {
  display: block;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
:is(#forminator-module-246, #forminator-module-248) .forminator-field-phone .forminator-input--wrap {
  position: relative;
  left: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
:is(#forminator-module-246, #forminator-module-248) .forminator-field-phone .forminator-input {
  margin: 0 !important;
  text-indent: 0 !important;
}
:is(#forminator-module-246, #forminator-module-248) .iti__country-container {
  display: none !important;
}

/* :: ERRORS & MESSAGES */
:is(#forminator-module-246, #forminator-module-248) .forminator-has_error :is(.forminator-input, .forminator-textarea) {
  border-bottom-color: var(--f-error);
  box-shadow: inset 0 -1px 0 var(--f-error);
}
:is(#forminator-module-246, #forminator-module-248) .forminator-error-message {
  position: absolute;          /* hangs under the line so nothing jumps */
  top: 100%;
  left: 0;
  right: 0;
  display: block;
  margin: var(--f-gap-tight) 0 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--f-error);
  background: none;
  border: 0;
}
:is(#forminator-module-246, #forminator-module-248) .forminator-field-textarea .forminator-error-message {
  right: 70px;                 /* leave room for the counter */
}
:is(#forminator-module-246, #forminator-module-248) .forminator-error-message::before {
  display: none;
}
:is(#forminator-module-246, #forminator-module-248) .forminator-response-message {
  margin: 0;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
  border: 0;
  border-radius: 4px;
}
:is(#forminator-module-246, #forminator-module-248) .forminator-response-message.forminator-success {
  color: var(--f-ink);
  background: color-mix(in srgb, var(--f-accent) 18%, var(--f-surface));
}
:is(#forminator-module-246, #forminator-module-248) .forminator-response-message.forminator-error {
  color: var(--f-error);
  background: color-mix(in srgb, var(--f-error) 12%, var(--f-surface));
}

/* :: SUBMIT: round teal arrow (inline form; footer overrides below) */
:is(#forminator-module-246, #forminator-module-248) .forminator-button-submit {
  position: relative;
  display: block;
  width: var(--f-btn);
  height: var(--f-btn);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--f-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
  box-shadow: none;
  text-transform: none;
  cursor: pointer;
  overflow: hidden;
  transition: background-color .15s ease, transform .15s ease;
}
/* "Submit": hidden visually, still read by screen readers */
:is(#forminator-module-246, #forminator-module-248) .forminator-button-submit > span:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Material's ripple */
:is(#forminator-module-246, #forminator-module-248) .forminator-button-submit > span[aria-hidden="true"] {
  display: none;
}
:is(#forminator-module-246, #forminator-module-248) .forminator-button-submit:hover {
  background-color: var(--f-accent-hov);
  box-shadow: none;
}
:is(#forminator-module-246, #forminator-module-248) .forminator-button-submit:active {
  transform: scale(.97);
}
:is(#forminator-module-246, #forminator-module-248) .forminator-button-submit:focus-visible {
  outline: 2px solid var(--f-focus);
  outline-offset: 3px;
}
:is(#forminator-module-246, #forminator-module-248) .forminator-button-submit:focus:not(:focus-visible) {
  outline: none;
}
/* loading: arrow becomes a spinner */
:is(#forminator-module-246, #forminator-module-248) .forminator-button-submit.forminator-button-onload {
  background-image: none;
  pointer-events: none;
}
:is(#forminator-module-246, #forminator-module-248) .forminator-button-submit.forminator-button-onload > *:not(:first-child) {
  display: none !important;
}
:is(#forminator-module-246, #forminator-module-248) .forminator-button-submit.forminator-button-onload::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: f-spin .8s linear infinite;
}
@keyframes f-spin { to { transform: rotate(360deg); } }


/* =============================================================
   3. INLINE FORM — #forminator-module-246 (.form-inline)
   Wide:   Name | Email | Phone | (→)
   Medium: Name | Email
           Phone        | (→)
   Narrow: one column, button bottom-right
   ============================================================= */
.form-inline {
  container-type: inline-size;
}
#forminator-module-246 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}
#forminator-module-246 #name-1  { grid-column: 1; }
#forminator-module-246 #email-1 { grid-column: 2; }
#forminator-module-246 #phone-1 { grid-column: 3; }
#forminator-module-246 .forminator-row-last .forminator-col { grid-column: 4; }

/* errors hang below the row; give them room inside the section */
#forminator-module-246:has(.forminator-has_error) {
  padding-bottom: 28px;
}

@container (max-width: 759px) {
  #forminator-module-246 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }
  #forminator-module-246 #name-1  { grid-column: 1; }
  #forminator-module-246 #email-1 { grid-column: 2 / span 2; }
  #forminator-module-246 #phone-1 { grid-column: 1 / span 2; }
  #forminator-module-246 .forminator-row-last .forminator-col { grid-column: 3; }
}
@container (max-width: 479px) {
  #forminator-module-246 {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--f-stack-gap);
  }
  #forminator-module-246 #name-1,
  #forminator-module-246 #email-1,
  #forminator-module-246 #phone-1,
  #forminator-module-246 .forminator-row-last .forminator-col {
    grid-column: 1;
  }
  #forminator-module-246 .forminator-row-last .forminator-col {
    justify-self: end;
  }
}


/* =============================================================
   4. FOOTER FORM — #forminator-module-248 (.form-footer)
   Two columns, message full width, white pill button.
   ============================================================= */
.form-footer {
  container-type: inline-size;
}
#forminator-module-248 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* fields fill the two columns in order, so adding or removing a
   field in Forminator re-flows naturally; Message and the button
   always take the full width */
#forminator-module-248 .forminator-col {
  grid-column: auto;
}
#forminator-module-248 #textarea-1,
#forminator-module-248 .forminator-row-last .forminator-col {
  grid-column: 1 / -1;
}
#forminator-module-248 .forminator-row-last .forminator-col {
  justify-self: start;
}

/* :: white pill "Submit" with teal arrow circle */
#forminator-module-248 .forminator-button-submit {
  width: auto;
  height: 56px;
  padding: 0 calc(var(--f-pill-circle) + 40px) 0 60px;
  border-radius: 999px;
  background-color: var(--white, #ffffff);
  background-image: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  color: var(--primary, #10A08E);
}
#forminator-module-248 .forminator-button-submit > span:first-child {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  /* Material sizes the span itself, so it's set here too */
  font-family: inherit !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: inherit !important;
}
#forminator-module-248 .forminator-button-submit::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 7px;
  width: var(--f-pill-circle);
  height: var(--f-pill-circle);
  margin-top: calc(var(--f-pill-circle) / -2);
  border-radius: 50%;
  background-color: var(--primary, #10A08E);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  transition: background-color .15s ease;
}
#forminator-module-248 .forminator-button-submit:hover {
  background-color: var(--ta-7, #faf8f6);
}
#forminator-module-248 .forminator-button-submit:hover::before {
  background-color: var(--ta-3, #224944);
}
#forminator-module-248 .forminator-button-submit:focus-visible {
  outline-color: var(--white, #ffffff);
}
/* loading: spinner sits in the circle */
#forminator-module-248 .forminator-button-submit.forminator-button-onload {
  background-color: var(--white, #ffffff);
}
#forminator-module-248 .forminator-button-submit.forminator-button-onload::before {
  background-image: none;
}
#forminator-module-248 .forminator-button-submit.forminator-button-onload::after {
  inset: auto;
  top: 50%;
  right: calc(7px + (var(--f-pill-circle) - 22px) / 2);
  margin: -11px 0 0;
}

@container (max-width: 479px) {
  #forminator-module-248 {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--f-stack-gap);
  }
}


/* =============================================================
   5. REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  :is(#forminator-module-246, #forminator-module-248) * {
    transition: none !important;
  }
  :is(#forminator-module-246, #forminator-module-248) .forminator-button-onload::after {
    animation-duration: 2s;
  }
}