/* ================================================================
   CONTACT PAGE — full redesign 2026-05-09
   Brand: peach #DF7D6F + dark #150e0e
   ================================================================ */

/* ---- Hero ---------------------------------------------------- */
.contact-hero {
  background: linear-gradient(135deg, #150e0e 0%, #1f1413 60%, #2a1814 100%);
  /* Top padding clears the ~116px absolute header. Bottom trimmed
     from 70px → 32px now that the trust pills are gone, so the hero
     hugs the breadcrumb band cleanly (mirrors .media-hero). */
  padding: 160px 0 32px;
  border-bottom: 3px solid #DF7D6F;
  position: relative;
  overflow: hidden;
}
.contact-hero::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(223,125,111,.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
/* Breadcrumb band — sits between the hero and the contact cards.
   The breadcrumb used to live INSIDE the hero, immediately under the
   site header. On tall headers it read as logo overflow rather than
   navigation. The slim band gives it a dedicated row + subtle surface. */
.contact-breadcrumb-band {
  background: #1a1110;
  border-bottom: 1px solid rgba(223,125,111,.12);
  padding: 12px 0;
}
.contact-breadcrumb {
  font-size: 13px;
  color: #b8a89c;
  margin: 0;
}
.contact-breadcrumb a {
  color: #DF7D6F;
  text-decoration: none;
  transition: opacity .2s ease;
}
.contact-breadcrumb a:hover { opacity: .75; }
.contact-breadcrumb span[aria-hidden] { margin: 0 8px; opacity: .4; }
.contact-h1 {
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.6rem, 7vw, 3.4rem);   /* mobile-friendly clamp; matches .media-h1 */
  line-height: 1.15;
  margin-bottom: 16px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.contact-h1 .peach-color { color: #DF7D6F; }
.contact-sub {
  color: #d6c5b8;
  font-size: 17px;
  max-width: 720px;
  line-height: 1.65;
  margin: 0;                /* trust pills are gone — no trailing margin needed */
}
.contact-sub strong { color: #fff; font-weight: 600; }
.contact-sub a {
  color: #DF7D6F;
  text-decoration: underline;
  text-decoration-color: rgba(223,125,111,.4);
  text-underline-offset: 3px;
}
.contact-sub a:hover { color: #fff; text-decoration-color: #fff; }
.contact-trust { display: flex; flex-wrap: wrap; gap: 10px; }
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(223,125,111,.4);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}
.trust-pill svg { color: #DF7D6F; font-size: 14px; }

/* ---- Quick contact cards ------------------------------------- */
.contact-cards {
  background: #0a0606;
  padding: 50px 0;
}
.contact-card {
  display: flex;
  gap: 18px;
  padding: 28px 24px;
  background: linear-gradient(160deg, #1a0e0d 0%, #0f0807 100%);
  border: 1px solid rgba(223,125,111,.15);
  border-radius: 14px;
  text-decoration: none;
  height: 100%;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.contact-card:hover {
  transform: translateY(-4px);
  border-color: #DF7D6F;
  box-shadow: 0 14px 32px rgba(223,125,111,.18);
  text-decoration: none;
}
.contact-card-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #DF7D6F 0%, #c8634f 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 22px;
}
.contact-card-title {
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 8px;
}
.contact-card-text {
  color: #b8a89c;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 12px;
}
.contact-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #DF7D6F;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.contact-card-cta svg { transition: transform .25s ease; }
.contact-card:hover .contact-card-cta svg { transform: translateX(4px); }

/* ---- Main: form + sidebar ------------------------------------ */
.contact-main {
  background: #0a0606;
  padding: 30px 0 80px;
}
.contact-alert {
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 24px;
}
.contact-alert-success {
  background: rgba(40,167,69,.12);
  border: 1px solid rgba(40,167,69,.4);
  color: #5fdb7d;
}
.contact-alert-error {
  background: rgba(220,53,69,.12);
  border: 1px solid rgba(220,53,69,.4);
  color: #ff7384;
}

.contact-form-card {
  background: linear-gradient(160deg, #1a0e0d 0%, #0f0807 100%);
  border: 1px solid rgba(223,125,111,.15);
  border-radius: 16px;
  padding: 36px;
}
.contact-form-head { margin-bottom: 24px; }
.contact-form-title {
  color: #fff;
  font-weight: 700;
  font-size: 28px;
  margin: 0 0 8px;
}
.contact-form-sub {
  color: #b8a89c;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
.contact-form-grid { display: flex; flex-direction: column; gap: 16px; }
.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cf-row-single { grid-template-columns: 1fr; }
.cf-field { display: flex; flex-direction: column; gap: 6px; }
.cf-label {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  margin: 0;
}
.cf-optional { color: #8a7a6e; font-weight: 400; font-size: 12px; }
.cf-input {
  width: 100%;
  background: #0a0606;
  border: 1px solid rgba(223,125,111,.2);
  border-radius: 10px;
  padding: 12px 14px;
  color: #fff;
  font-size: 14px;
  transition: border-color .2s ease, background .2s ease;
}
.cf-input::placeholder { color: #6b5d52; }
.cf-input:focus {
  outline: none;
  border-color: #DF7D6F;
  background: #110909;
}
.cf-input:focus-visible { box-shadow: 0 0 0 3px rgba(223,125,111,.18); }
.cf-textarea { resize: vertical; min-height: 90px; }
select.cf-input {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23DF7D6F' d='M4 6l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding-right: 40px;
}
.cf-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;     /* captcha left, button right — balances the row */
  gap: 16px;
  margin-top: 8px;
}
/* The reCAPTCHA iframe is 78px tall in compact desktop sizing. Match
   that on the submit button so the row reads as one balanced strip
   rather than a tall box next to a short button. */
.cf-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 78px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #DF7D6F 0%, #c8634f 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cf-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(223,125,111,.35);
  color: #fff;
}
.cf-submit-btn svg { font-size: 17px; }
.cf-privacy-note {
  display: flex;
  gap: 8px;
  color: #8a7a6e;
  font-size: 12px;
  line-height: 1.55;
  margin: 12px 0 0;
}
.cf-privacy-note svg { color: #DF7D6F; flex-shrink: 0; margin-top: 2px; }

/* ---- Sidebar ------------------------------------------------- */
.contact-sidebar { display: flex; flex-direction: column; gap: 18px; }
.contact-sb-card {
  background: linear-gradient(160deg, #1a0e0d 0%, #0f0807 100%);
  border: 1px solid rgba(223,125,111,.15);
  border-radius: 14px;
  padding: 24px;
}
.contact-sb-title {
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.contact-sb-title svg { color: #DF7D6F; font-size: 20px; }
.contact-hours { list-style: none; padding: 0; margin: 0 0 12px; }
.contact-hours li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: #b8a89c;
  font-size: 14px;
}
.contact-hours li:last-child { border-bottom: 0; }
.contact-hours li strong { color: #fff; font-weight: 600; }
.contact-hours li.closed strong { color: #DF7D6F; }
.contact-sb-note {
  color: #8a7a6e;
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0;
  font-style: italic;
}
.contact-map-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(223,125,111,.15);
  height: 240px;
}
.contact-map { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.2) contrast(1.05); }

.contact-social-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  color: #d6c5b8;
  font-size: 14px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.cs-link svg { font-size: 18px; flex-shrink: 0; }
.cs-link:hover { transform: translateX(3px); color: #fff; text-decoration: none; }
.cs-instagram:hover { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.cs-facebook:hover  { background: #1877f2; }
.cs-youtube:hover   { background: #ff0000; }
.cs-email:hover     { background: #DF7D6F; }

/* ---- FAQ ----------------------------------------------------- */
.contact-faq {
  background: linear-gradient(180deg, #0a0606 0%, #150e0e 100%);
  padding: 70px 0;
  border-top: 1px solid rgba(223,125,111,.15);
}
.contact-faq-eyebrow {
  color: #DF7D6F;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  margin-bottom: 12px;
}
.contact-faq-h2 {
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 14px;
}
.contact-faq-sub {
  color: #b8a89c;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
.contact-faq-item {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(223,125,111,.12);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 12px;
  transition: border-color .2s ease, background .2s ease;
}
.contact-faq-item[open] {
  border-color: #DF7D6F;
  background: rgba(223,125,111,.05);
}
.contact-faq-item summary {
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 30px;
}
.contact-faq-item summary::-webkit-details-marker { display: none; }
.contact-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  color: #DF7D6F;
  font-size: 22px;
  font-weight: 300;
  transition: transform .2s ease;
}
.contact-faq-item[open] summary::after { content: "\2212"; }
.contact-faq-item p {
  color: #b8a89c;
  font-size: 14px;
  line-height: 1.65;
  margin: 12px 0 0;
}

/* ---- Mobile -------------------------------------------------- */
@media (max-width: 767px) {
  .contact-hero { padding: 150px 0 24px; }
  .contact-trust { gap: 8px; }
  .trust-pill { font-size: 12px; padding: 6px 12px; }
  .contact-cards { padding: 30px 0; }
  .contact-card { padding: 22px 18px; }
  .contact-form-card { padding: 24px 20px; }
  .cf-row { grid-template-columns: 1fr; }
  .cf-submit-row { justify-content: flex-start; }     /* stack at left when wrapped */
  .cf-submit-btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;                                 /* 78px is overkill once stacked */
  }
  .contact-main { padding: 30px 0 50px; }
  .contact-faq { padding: 50px 0; }
  .contact-faq-h2 { margin-top: 18px; }
}