/* ============================================================
   dp-about — Editorial Restyle
   Brings the developer "About + Quick Form" section into the
   same paper/navy editorial system as dev-spread & dev-cards.
   No colored field icons, no clashing surfaces, hairline rules,
   italic Cormorant title, typewriter-line inputs.
   Brand: navy #0F1B2C · cream #E8E2D5 · paper #F8F4EB · mist #7DD3FC
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');

/* ============ Section background ============ */
.dp-about {
  background: var(--reh-paper, #F8F4EB) !important;
  position: relative;
  padding: 64px 0 88px !important;
}
.dp-about::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15,27,44,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,27,44,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .4;
  pointer-events: none;
}
.dp-about > * { position: relative; z-index: 1; }

/* ============ Form card — paper, hairline, sharp corners ============ */
.dp-about__form-wrap {
  position: relative;
}
.dp-about__form-card {
  background: #FCFAF4 !important;
  border: 1px solid rgba(15, 27, 44, 0.12) !important;
  border-radius: 0 !important;
  padding: 36px 30px 32px !important;
  box-shadow: 0 1px 0 rgba(15,27,44,.04), 0 18px 40px -28px rgba(15,27,44,.18) !important;
  position: relative;
}

/* Editorial corner ticks (top-start + bottom-end) */
.dp-about__form-card::before,
.dp-about__form-card::after {
  content: "" !important;
  position: absolute !important;
  width: 22px !important;
  height: 22px !important;
  pointer-events: none !important;
  background: transparent !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
}
.dp-about__form-card::before {
  top: -1px !important;
  inset-inline-start: -1px !important;
  border-top: 2px solid var(--reh-ink, #0F1B2C) !important;
  border-inline-start: 2px solid var(--reh-ink, #0F1B2C) !important;
}
.dp-about__form-card::after {
  bottom: -1px !important;
  inset-inline-end: -1px !important;
  border-bottom: 2px solid var(--reh-ink, #0F1B2C) !important;
  border-inline-end: 2px solid var(--reh-ink, #0F1B2C) !important;
}

/* ============ Title — italic Cormorant editorial ============ */
.dp-about__form-title {
  font-family: "Cormorant Garamond", "Cairo", "Plus Jakarta Sans", serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 30px !important;
  line-height: 1.05 !important;
  color: var(--reh-ink, #0F1B2C) !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.012em !important;
  display: block !important;
}
[dir="rtl"] .dp-about__form-title {
  font-family: "Cairo", "Cormorant Garamond", serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 24px !important;
}
.dp-about__form-title svg,
.dp-about__form-title i,
.dp-about__form-title .fas {
  display: none !important;
}

/* Eyebrow rule under the title */
.dp-about__form-title + form::before,
.dp-about__form-card .dp-about__form::before {
  content: "";
  display: block;
  width: 36px;
  height: 1.5px;
  background: var(--reh-ink, #0F1B2C);
  margin: 0 0 22px 0;
}

/* ============ Field rows — typewriter hairline lines ============ */
.dp-about__form {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.dp-about__field {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(15, 27, 44, 0.18) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 4px 0 !important;
  display: block !important;
  transition: border-bottom-color .25s ease !important;
}
.dp-about__field + .dp-about__field {
  margin-top: 8px !important;
}
.dp-about__field:focus-within {
  border-bottom-color: var(--reh-ink, #0F1B2C) !important;
}

/* Hide Font Awesome icons inside fields */
.dp-about__field i,
.dp-about__field .fas,
.dp-about__field .fa-solid,
.dp-about__field svg {
  display: none !important;
}

/* Inputs — bare baseline */
.dp-about__field input,
.dp-about__field textarea,
.dp-about__field select {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  padding: 14px 0 12px 0 !important;
  font-family: Cairo, "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  color: var(--reh-ink, #0F1B2C) !important;
  outline: none !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.dp-about__field input::placeholder,
.dp-about__field textarea::placeholder {
  color: rgba(15, 27, 44, 0.42) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
}
.dp-about__field input:focus,
.dp-about__field textarea:focus,
.dp-about__field select:focus {
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Auto-fill override (browser yellow bg) */
.dp-about__field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #FCFAF4 inset !important;
  -webkit-text-fill-color: var(--reh-ink, #0F1B2C) !important;
  caret-color: var(--reh-ink, #0F1B2C) !important;
}

/* ============ Submit — solid navy editorial mark ============ */
.dp-about__form-submit {
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  height: 50px !important;
  margin-top: 18px !important;
  background: var(--reh-ink, #0F1B2C) !important;
  color: var(--reh-paper, #F8F4EB) !important;
  border: 1px solid var(--reh-ink, #0F1B2C) !important;
  border-radius: 0 !important;
  font-family: Cairo, "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 2.4px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background-color .22s ease, color .22s ease, transform .2s ease !important;
  position: relative !important;
  text-align: center !important;
}
.dp-about__form-submit::after {
  content: "→";
  font-family: "Plus Jakarta Sans", "Cairo", sans-serif;
  font-size: 16px;
  font-weight: 400;
  display: inline-block;
  transition: transform .25s ease;
}
[dir="rtl"] .dp-about__form-submit::after {
  content: "←";
}
.dp-about__form-submit:hover {
  background: var(--reh-paper, #F8F4EB) !important;
  color: var(--reh-ink, #0F1B2C) !important;
  transform: translateY(-1px) !important;
}
.dp-about__form-submit:hover::after {
  transform: translateX(4px);
}
[dir="rtl"] .dp-about__form-submit:hover::after {
  transform: translateX(-4px);
}

/* ============ Alert messages ============ */
.dp-about__form-card .alert-danger,
.dp-about__form-card .alert-success {
  background: transparent !important;
  border: 1px solid rgba(15,27,44,.18) !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  margin: 0 0 14px 0 !important;
  font-family: Cairo, "Plus Jakarta Sans", sans-serif !important;
  font-size: 13px !important;
  color: var(--reh-ink, #0F1B2C) !important;
  border-inline-start: 3px solid var(--reh-ink, #0F1B2C) !important;
}
.dp-about__form-card .alert-danger ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.dp-about__form-card .alert-danger li {
  padding: 2px 0 !important;
}

/* ============ About text (left/right column) — editorial ============ */
.dp-about__text-card,
.dp-about__text {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.dp-about__heading,
.dp-about__title {
  font-family: "Cormorant Garamond", "Cairo", serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 34px !important;
  line-height: 1.1 !important;
  color: var(--reh-ink, #0F1B2C) !important;
  margin: 0 0 18px 0 !important;
  letter-spacing: -0.015em !important;
}
[dir="rtl"] .dp-about__heading,
[dir="rtl"] .dp-about__title {
  font-family: "Cairo", "Cormorant Garamond", serif !important;
  font-style: normal !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  letter-spacing: -0.015em !important;
}
.dp-about__heading + *::before,
.dp-about__title + *::before {
  content: "";
  display: block;
  width: 36px;
  height: 1.5px;
  background: var(--reh-ink, #0F1B2C);
  margin-bottom: 18px;
}

.dp-about__body,
.dp-about__text p,
.dp-about__text-card p {
  font-family: Cairo, "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: rgba(15, 27, 44, 0.75) !important;
  margin: 0 0 14px 0 !important;
}

/* ============ Mobile ≤768 ============ */
@media (max-width: 768px) {
  .dp-about {
    padding: 40px 0 56px !important;
  }
  .dp-about__form-card {
    padding: 28px 22px 26px !important;
  }
  .dp-about__form-title {
    font-size: 26px !important;
  }
  [dir="rtl"] .dp-about__form-title {
    font-size: 22px !important;
  }
  .dp-about__heading,
  .dp-about__title {
    font-size: 28px !important;
  }
  [dir="rtl"] .dp-about__heading,
  [dir="rtl"] .dp-about__title {
    font-size: 24px !important;
  }
  .dp-about__form-submit {
    height: 48px !important;
    font-size: 11.5px !important;
    letter-spacing: 2px !important;
  }
}

/* ============ FORM SUBMIT — MOBILE FIX ============ */
.dp-about__form-submit {
  box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (max-width: 540px) {
  .dp-about__form-submit {
    height: 46px !important;
    font-size: 11px !important;
    letter-spacing: 1.6px !important;
    gap: 8px !important;
    padding: 0 12px !important;
  }
  .dp-about__form-submit::after {
    font-size: 14px !important;
  }
  .dp-about__form-card {
    padding: 22px 16px 20px !important;
  }
  .dp-about__field input,
  .dp-about__field textarea {
    font-size: 13px !important;
    padding: 12px 0 10px 0 !important;
  }
}
@media (max-width: 380px) {
  .dp-about__form-submit {
    height: 44px !important;
    font-size: 10px !important;
    letter-spacing: 1.2px !important;
  }
  .dp-about__form-card {
    padding: 18px 14px 16px !important;
  }
}