/* Fortified — Contact Form 7 styling.
   The CF7 form uses Tint's `.form-style-3` markup (two-column .columns_wrap /
   .column-1_2 rows, .style-line.icon-* field icons, .wpcf7-submit). Tint's CSS
   provided the underline inputs, field icons, and red button; our lightweight
   theme doesn't load it, so without these rules the form falls back to plain
   browser-default boxes. Values sampled from live fortified.com.sg. */

/* Two-column grid (50% columns with a 30px gutter + 37px row spacing).
   Uses a `gap` gutter rather than Tint's negative `margin-right:-30px` +
   per-column right padding, which pushed the grid 30px past its container and
   caused a slight horizontal overflow inside our hand-coded contact column. */
.form-style-3 .columns_wrap {
  display: flex;
  flex-wrap: wrap;
  column-gap: 30px;
}
.form-style-3 .column-1_2 { width: calc(50% - 15px); }
.form-style-3 .column-1_1 { width: 100%; }
.form-style-3 .column-1_2,
.form-style-3 .column-1_1 {
  box-sizing: border-box;
  padding: 0 0 37px 0;
}
.form-style-3 .columns_wrap p { margin: 0; }
.form-style-3 .columns_wrap.margin-bottom { margin-bottom: 8px; }

/* Field wrapper carries the icon; inputs sit beside it. */
.form-style-3 .style-line {
  position: relative;
  display: block;
}
.form-style-3 .wpcf7-form-control-wrap { display: block; }

/* Inputs / textarea — transparent with a thin underline, 36px left pad for the
   icon. Underline turns red on focus. */
.form-style-3 .wpcf7-form-control {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.13);
  border-radius: 0;
  padding: 13px 0 13px 36px;
  font-family: var(--ft-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ft-color-ink-soft);
  outline: none;
  transition: border-color 0.2s ease;
}
.form-style-3 .wpcf7-form-control::placeholder { color: var(--ft-color-ink-soft); opacity: 1; }
.form-style-3 .wpcf7-form-control:focus { border-bottom-color: #D82C2B; }
.form-style-3 textarea.wpcf7-form-control {
  /* Explicit height overrides the rows="10" default (~230px); ~100px like live. */
  height: 100px;
  min-height: 100px;
  resize: vertical;
  display: block;
}

/* Field icons — dark line glyphs at the left of each field (replacing Tint's
   fontello icons with inline SVGs). */
.form-style-3 .style-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}
.form-style-3 .style-line.icon-textarea::before {
  top: 15px;
  transform: none;
}
.form-style-3 .icon-name::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171616' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-3.3 3.6-5.5 8-5.5s8 2.2 8 5.5'/%3E%3C/svg%3E");
}
.form-style-3 .icon-email::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171616' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Cpath d='M3.5 6.5l8.5 6.5 8.5-6.5'/%3E%3C/svg%3E");
}
.form-style-3 .icon-phone::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171616' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.5l1.8 4.5-2.2 1.3a12 12 0 0 0 4.8 4.8l1.3-2.2L18.7 16V19.5c0 .8-.7 1.5-1.5 1.5C9.5 21 3 14.5 3 6.5 3 5.7 3.7 5 4.5 5z'/%3E%3C/svg%3E");
}
.form-style-3 .icon-subject::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171616' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16.5'/%3E%3Ccircle cx='12' cy='7.8' r='0.9' fill='%23171616' stroke='none'/%3E%3C/svg%3E");
}
.form-style-3 .icon-textarea::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171616' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-4L16.5 4.5a1.5 1.5 0 0 1 2 0l1 1a1.5 1.5 0 0 1 0 2L8 19l-4 1z'/%3E%3C/svg%3E");
}

/* Submit — solid red button with a white paper-plane icon, like the live CTA.
   The paper-plane background-image carries !important because Elementor's
   lazy-background rule (`.e-con.e-parent:nth-of-type(n+4)... * { background-image:none }`)
   otherwise out-specifies us and strips it. background-COLOR is left untouched
   by that rule, so the red fill needs no override. */
.form-style-3 input.wpcf7-submit,
.form-style-3 .wpcf7-submit {
  /* Content-width (the .wpcf7-form-control rule above would stretch it to 100%). */
  width: auto;
  display: inline-block;
  background-color: #D82C2B;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M2 21l21-9L2 3v6.5l15 2.5-15 2.5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-position: 32px center;
  background-size: 20px 20px;
  color: #FFF;
  border: none;
  border-radius: 0;
  padding: 17px 35px 17px 64px;
  font-family: var(--ft-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.form-style-3 input.wpcf7-submit:hover,
.form-style-3 .wpcf7-submit:hover { background-color: #B9241F; }

/* CF7 validation / response messages */
.form-style-3 .wpcf7-not-valid-tip {
  color: #D82C2B;
  font-size: 13px;
  margin-top: 4px;
}
.wpcf7 .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 16px;
  font-size: 14px;
}

/* Stack the two-column rows on small screens. */
@media (max-width: 782px) {
  .form-style-3 .column-1_2 { width: 100%; }
}