/* ==========================================================================
   Get in touch — multi-step contact form (rebuild of the old FormCraft form)
   ========================================================================== */
body.page-contact { background: var(--red); }
.contact { min-height: 100vh; background: #ff222f; padding: 132px 14px 14px; display: flex; }
.contact__card {
  flex: 1;
  background: #ffe8ea;
  box-shadow: 0 30px 60px rgba(120, 0, 10, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px 50px;
}
.cform, .cform__done { width: 100%; max-width: 620px; text-align: center; }
.cform__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.cform__progress { list-style: none; margin: 0 0 18px; padding: 0; display: flex; justify-content: center; gap: 8px; }
.cform__progress li { width: 26px; height: 3px; background: rgba(255, 34, 47, .22); transition: background .3s; }
.cform__progress li.is-on { background: #ff222f; }

.cform__step { border: 0; margin: 0; padding: 0; min-width: 0; display: none; }
.cform__step.is-active { display: block; animation: cform-in .45s ease both; }
html:not(.js) .cform__step { display: block; }
html:not(.js) .cform__nav, html:not(.js) .cform__progress { display: none; }
@keyframes cform-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.cform__greeting { font-size: 140px; line-height: 1.15; margin: 0 0 20px; color: #212b31; letter-spacing: -4px; min-height: 1.15em; white-space: nowrap; }
.cform__word::after { content: ""; display: inline-block; width: 3px; height: .72em; margin-left: 6px; background: #ff222f; vertical-align: baseline; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.cform__title { font-size: 44px; line-height: 1.1; letter-spacing: -1px; margin: 0 0 20px; color: #212b31; }
.cform__lead { font-size: 30px; line-height: 1.3; color: #222c32; margin: 0 0 40px; }

.cform__row { display: flex; gap: 14px; text-align: left; }
.cform__field { display: block; flex: 1; position: relative; padding-top: 6px; }
.cform__field span { display: block; font-family: var(--head); font-weight: 500; font-size: 20px; line-height: 1.2; color: #000; margin-bottom: 4px; }
.cform__field input, .cform__field textarea {
  width: 100%; border: 0; border-bottom: 1px solid rgba(33, 43, 49, .25); background: transparent;
  padding: 14px 0 10px; font: 300 20px/1.3 var(--body); color: #212b31; border-radius: 0; resize: none; outline: none;
  transition: border-color .25s;
}
.cform__field input:focus, .cform__field textarea:focus { border-bottom-color: #ff222f; }
.cform__field.has-error input, .cform__field.has-error textarea { border-bottom-color: #d71f28; }
.cform__field.has-error span { color: #d71f28; }
.cform__field--area textarea { border: 1px solid rgba(33, 43, 49, .2); padding: 12px; background: rgba(255, 255, 255, .5); }
.cform__count { display: block; text-align: right; font: 400 14px var(--body); color: #666; margin-top: 4px; font-style: normal; }
.cform__count b { font-weight: 400; }

.cform__send {
  font-family: var(--head); font-weight: 700; font-size: 22px; letter-spacing: 1px; color: #fff; background: #ff222f;
  border: 0; padding: 16px 44px; cursor: pointer; transition: background .25s, transform .25s;
}
.cform__send:hover { background: #d71f28; transform: translateY(-1px); }
.cform__send[disabled] { opacity: .6; cursor: progress; }

.cform__status { min-height: 1.6em; margin: 14px 0 0; font-size: 17px; color: #d71f28; }
.cform__nav { display: flex; margin: 8px 0 28px; }
.cform__nav button {
  flex: 1; background: none; border: 0; padding: 16px; cursor: pointer;
  font-family: var(--head); font-weight: 700; font-size: 17px; letter-spacing: .5px; color: #ff222f; text-transform: uppercase;
}
.cform__nav button + button { border-left: 1px solid rgba(255, 34, 47, .2); }
.cform__nav button[disabled] { color: #ff8a92; cursor: default; }
.cform__nav button[hidden] { display: none; }

.cform__optin p { font-family: var(--head); font-weight: 300; font-size: 20px; line-height: 1.45; color: #212b31; margin: 0 auto 18px; max-width: 520px; }
.toggle { display: inline-block; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; }
.toggle__track { display: block; width: 100px; height: 50px; border-radius: 25px; background: #fff; position: relative; transition: background .25s; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.toggle__knob { position: absolute; top: 4px; left: 4px; width: 42px; height: 42px; border-radius: 50%; background: #ee4a4f; transition: transform .25s, background .25s; }
.toggle__knob::before, .toggle__knob::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 3px; margin: -1.5px 0 0 -11px; background: #fff; border-radius: 2px; transform: rotate(45deg); }
.toggle__knob::after { transform: rotate(-45deg); }
.toggle input:checked + .toggle__track .toggle__knob { transform: translateX(50px); background: #2fb36d; }
.toggle input:checked + .toggle__track .toggle__knob::before { width: 12px; transform: translate(-6px, 5px) rotate(45deg); margin: 0; }
.toggle input:checked + .toggle__track .toggle__knob::after { width: 24px; transform: translate(4px, 0) rotate(-50deg); margin: 0; }
.toggle input:focus-visible + .toggle__track { outline: 3px solid #212b31; outline-offset: 3px; }

.cform__done h2 { font-size: 100px; color: #212b31; }
.cform__done .cta { color: #ff222f; }

@media (min-width: 769px) { .cform__step { min-height: 400px; } }
@media (max-width: 768px) {
  .contact { padding-top: 90px; }
  .cform__greeting { font-size: 64px; letter-spacing: -2px; }
  .cform__title { font-size: 32px; }
  .cform__lead { font-size: 22px; margin-bottom: 28px; }
  .cform__row { flex-direction: column; }
  .cform__done h2 { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) { .cform__word::after { animation: none; } .cform__step.is-active { animation: none; } }