/* Hand Coded With Love by We Unfuck */
/* ============================================================
   Contact Us page styles (used with home.css hero patterns)
   ============================================================ */

.khero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  background: var(--c-ink-900);
  margin-top: -128px;
  padding: 208px 16px 32px;
  z-index: 99;
  overflow: hidden;
}
.khero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/lion1.webp") no-repeat fixed 100% 100% / 570px auto;
  pointer-events: none;
}
.khero__inner { position: relative; width: 100%; max-width: 1140px; margin: 0 auto; }
.khero__content { max-width: 570px; }
.khero__title {
  font-family: var(--f-display);
  font-size: 60px;
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: -1.3px;
  color: #fff;
  margin: 16px 0 32px;
}
.khero__title b { font-weight: 700; }
.khero__sub {
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: -1.3px;
  color: #fff;
  margin: 16px 0 32px;
}
.khero__sub b { font-weight: 700; }
.khero__links {
  list-style: none;
  margin: 0;
  padding: 18px 0 18px 36px;
}
.khero__links li { padding: 10px 0; }
.khero__links li:first-child { padding-top: 0; }
.khero__links li:last-child { padding-bottom: 0; }
.khero__links a {
  display: flex;
  align-items: center;
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1em;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #fff;
  transition: color .3s;
}
.khero__links a:hover { color: var(--c-primary); }
.khero__icon {
  display: inline-flex;
  width: 28px;
  flex: 0 0 28px;
}
.khero__links svg { fill: currentColor; }

@media (max-width: 1024px) {
  .khero { margin-top: -88px; }
  .khero::before { opacity: 0.7; }
}
@media (max-width: 767px) {
  .khero { padding: 144px 16px 48px; }
  .khero::before { background-size: 85% auto; }
  .khero__title { font-size: 36px; }
  .khero__sub { font-size: 25px; }
}

/* Compact dark hero when a form follows (no full-viewport height) */
.khero--compact { min-height: auto; padding-bottom: 64px; }
.khero__eyebrow {
  font-family: var(--f-display); font-size: 14px; font-weight: 700; line-height: 1.2em;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--c-steel); margin: 0 0 16px;
}
.khero__lead {
  font-family: var(--f-text); font-size: 18px; font-weight: 500; line-height: 1.5;
  letter-spacing: -0.2px; color: #fff; margin: 0; max-width: 620px;
}

/* ============================================================
   Light form (left) / contact info (right) section
   ============================================================ */
.contact { background: var(--c-gray-150); padding: 80px 40px 96px; }
.contact__grid {
  max-width: 1140px; margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start;
}

/* ---------- Form card ---------- */
.contact-form { background: #fff; border: 1px solid #d9dce1; border-radius: 8px; padding: 48px; position: relative; }

/* ---------- Intro (inside the form card, above the fields) ---------- */
.contact-intro {
  border-bottom: 1px solid; border-image: linear-gradient(to right, #a9bbce, #ffffff) 1;
  padding-bottom: 28px; margin-bottom: 32px;
}
.contact-intro__title {
  font-family: var(--f-display); font-size: 26px; font-weight: 400; line-height: 1.2em;
  letter-spacing: -0.4px; color: var(--c-text); margin: 0 0 12px;
}
.contact-intro__title b { font-weight: 700; }
.contact-intro__text { font: 400 16px/1.6 var(--f-text); color: var(--c-secondary); margin: 0; }
.contact-form.is-sent .contact-intro { display: none; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { margin: 0 0 20px; }
.field > label, .contact-services__legend {
  display: block; font-family: var(--f-display); font-size: 14px; font-weight: 700;
  letter-spacing: 0.3px; color: var(--c-text); margin: 0 0 8px;
}
.req { color: var(--c-primary); }
.field input, .field textarea {
  width: 100%; padding: 13px 14px; font: 400 16px/1.4 var(--f-text); color: var(--c-text);
  background: #fff; border: 1px solid #d9dce1; border-radius: 8px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus {
  border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(0,169,238,.15);
}
.field input::placeholder, .field textarea::placeholder { color: #9aa1a9; }
.field--error input, .field--error textarea { border-color: #d64545; }
.field__error { display: none; color: #d64545; font: 500 13px/1.35 var(--f-text); margin: 6px 0 0; }
.field--error .field__error { display: block; }

/* ---------- Services checkboxes ---------- */
.contact-services { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.contact-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 4px; }
.check {
  display: flex; align-items: center; gap: 10px; cursor: pointer; position: relative;
  font: 400 15px/1.3 var(--f-text); color: var(--c-text);
}
.check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.check__box {
  flex: 0 0 20px; width: 20px; height: 20px; border: 1px solid #c3ccd6; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s;
}
.check__box::after {
  content: ""; width: 10px; height: 6px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0); transition: transform .15s;
}
.check input:checked + .check__box { background: var(--c-primary); border-color: var(--c-primary); }
.check input:checked + .check__box::after { transform: rotate(-45deg) scale(1); }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 3px rgba(0,169,238,.3); }
.contact-services.field--error .contact-services__grid { padding: 10px; border: 1px solid #d64545; }

/* ---------- Privacy + honeypot + turnstile + submit ---------- */
.contact-privacy { font: 400 13px/1.5 var(--f-text); color: var(--c-secondary); margin: 4px 0 22px; }
.contact-hp { position: absolute !important; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .cf-turnstile { margin: 0 0 20px; }
.contact-form__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.contact-form__submit { border: 0; cursor: pointer; }
.contact-form__submit[disabled] { opacity: .5; cursor: not-allowed; }
.contact-form__status { font: 500 14px/1.4 var(--f-text); margin: 0; }
.contact-form__status--ok { color: #1a7f4b; }
.contact-form__status--err { color: #d64545; }
/* On success the form is replaced by the confirmation (JS scrolls it into view).
   min-height keeps it a comfortable panel rather than a collapsing sliver. */
.contact-form__done { display: none; min-height: 300px; flex-direction: column; justify-content: center; }
.contact-form.is-sent .contact-form__done { display: flex; animation: cfFade .45s ease both; }
.contact-form.is-sent .contact-form__body { display: none; }
@keyframes cfFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.contact-form__done h3 { font-family: var(--f-display); font-size: 26px; margin: 0 0 12px; }
.contact-form__done p { font: 400 16px/1.5 var(--f-text); color: var(--c-text); margin: 0; }

/* ---------- Info column (one connected, rounded frame) ---------- */
.contact-info {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #d9dce1; border-radius: 8px;
  padding: 0 32px;
}
/* Vertical padding only, so the divider spans the padded width and floats
   clear of the frame's side borders. */
.contact-box { padding: 30px 0; }
.contact-box + .contact-box {
  border-top: 1px solid; border-image: linear-gradient(to right, #a9bbce, #ffffff) 1;
}
.contact-box__label {
  font-family: var(--f-display); font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--c-steel); margin: 0 0 8px;
}
.contact-box__link {
  display: inline-block; font: 600 20px/1.3 var(--f-text); color: var(--c-text);
  text-decoration: none; transition: color .2s;
}
.contact-box__link:hover { color: var(--c-primary); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-info { order: -1; }
}
@media (max-width: 767px) {
  .contact { padding: 48px 16px 64px; }
  .contact-form { padding: 28px 20px; }
  .contact-form__done { min-height: 220px; }
  .contact-form__row, .contact-services__grid { grid-template-columns: 1fr; }
}