/* ============================================================
   Contact page — page-specific styles
   ============================================================ */

/* ---------- Hero (chevron accent, message badge) ---------- */
.contact-hero {
  position: relative;
  background: var(--primary);
  overflow: hidden;
}
.contact-hero__x {
  position: absolute;
  right: 121px; bottom: 0;
  width: 711.789px;
  max-width: none;
  height: 572px;
  z-index: 0;
  pointer-events: none;
}
.contact-hero .hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; max-width: 784px; }
.contact-hero .hero__copy > * { margin: 0; }
.contact-hero .com-hero__inner { min-height: 572px; }
.contact-hero__sub p { margin: 0; }

/* ---------- Main content: quote panel + contact card ---------- */
.contact-main { background: var(--white); padding: clamp(64px,10vw,160px) 0; }
.contact-main__inner { display: flex; gap: 72px; align-items: flex-start; }
.contact-main__left { flex: 1 1 0; display: flex; flex-direction: column; gap: 40px; min-width: 0; }

.quote-panel {
  background: var(--soft-bg);
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}
.quote-panel__head { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.quote-panel__head .eyebrow { margin: 0; }
.quote-panel__head h2 { margin: 0; font-weight: 900; font-size: 48px; line-height: 58px; letter-spacing: -0.4px; color: var(--primary); }
.quote-panel__head p { margin: 0; font-weight: 500; font-size: 18px; line-height: 28px; color: var(--secondary-text); }

.ask-list { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.ask-list__title { margin: 0; font-weight: 800; font-size: 20px; line-height: 24px; color: var(--primary); }
.ask-grid { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.ask-row { display: flex; gap: 48px; width: 100%; }
.ask-item { flex: 1 1 0; display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.ask-item__icon {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 12px;
  border-radius: 999px;
  background: var(--secondary-50);
  color: var(--secondary);
}
.ask-item__icon svg { width: 24px; height: 24px; display: block; }
.ask-item__body { flex: 1 1 0; min-width: 0; }
.ask-item__body h3 { margin: 0; font-weight: 700; font-size: 18px; line-height: 28px; color: var(--body-text); }
.ask-item__body p { margin: 0; font-weight: 400; font-size: 16px; line-height: 22px; letter-spacing: -0.18px; color: var(--secondary-text); }

.contact-main__right {
  flex: 0 0 557px;
  width: 557px;
  max-width: 100%;
  background: var(--primary-50);
  border-radius: 8px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.contact-card__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.contact-card__avatar {
  width: 115px; height: 115px; border-radius: 999px;
  background: var(--secondary-100);
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.contact-card__avatar img { width: 90px; height: auto; object-fit: contain; }
.contact-card__intro h2 { margin: 0; font-weight: 900; font-size: 32px; line-height: 38px; letter-spacing: -0.2px; color: var(--primary); }
.contact-card__intro p { margin: 0; font-weight: 500; font-size: 18px; line-height: 28px; color: var(--secondary-text); }

.contact-card__rows { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.contact-row { display: flex; gap: 16px; align-items: flex-start; width: 100%; }
.contact-row__icon {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 12px;
  border-radius: 8px;
  background: var(--secondary);
  color: var(--white);
}
.contact-row__icon svg { width: 24px; height: 24px; display: block; }
.contact-row__body { flex: 1 1 0; min-width: 0; }
.contact-row__label { margin: 0; font-weight: 700; font-size: 16px; line-height: 24px; color: var(--secondary-text); }
.contact-row__value { margin: 0; font-weight: 600; font-size: 18px; line-height: 28px; color: var(--body-text); }
.contact-row__value a { transition: color .2s ease; }
.contact-row__value a:hover { color: var(--secondary); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .contact-main__inner { flex-direction: column; align-items: stretch; }
  .contact-main__right { width: 100%; flex-basis: auto; }
}
@media (max-width: 1024px) {
  .contact-hero__x { display: none; }
}
@media (max-width: 700px) {
  .ask-row { flex-direction: column; gap: 24px; }
  .quote-panel__head h2 { font-size: 36px; line-height: 44px; }
  .contact-hero .com-hero__inner { min-height: 0; padding-top: 80px; padding-bottom: 48px; }
}