/* ============================================================
   KORA — Contact page (contact.html)
   Loaded AFTER style.css + cases.css.
   Layout matched to the original desktop page: hero with a
   3-column info row, image card with a frosted-glass form,
   centered tabbed FAQ, separate support card.
   ============================================================ */

/* ---------- HERO ---------- */
.ct-wrap { width: min(92.5rem, calc(100% - 3rem)); margin-inline: auto; }
.ct-hero { padding-top: 12.125rem; }
.ct-hero h1 { font-size: var(--h-page); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.ct-hero .sub { margin-top: 2.125rem; max-width: 35rem; font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.04em; line-height: 1.3; color: var(--gray); }

.ct-info { margin-top: 6.25rem; display: grid; grid-template-columns: 1.9fr 1fr 1fr; gap: 2.5rem; align-items: end; }
.ct-info .tel { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.03em; color: var(--dark); }
.ct-info .mail { display: inline-flex; align-items: center; gap: 0.625rem; margin-top: 0.75rem; font-size: 1.5625rem; font-weight: 600; letter-spacing: -0.03em; cursor: pointer; }
.ct-info .mail .ic { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--green); color: var(--cream); display: grid; place-items: center; font-size: 0.75rem; }
.ct-info .lbl { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.03em; color: var(--gray); }
.ct-info .val { margin-top: 0.75rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.5; }

/* ---------- image card section (reuses homepage .contact-sec) ---------- */
.contact-sec--page { margin-top: 3.75rem; }

/* frosted-glass form variant */
.cform--glass {
  background: rgba(227, 227, 227, 0.45);
  -webkit-backdrop-filter: blur(0.625rem);
  backdrop-filter: blur(0.625rem);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.cform--glass input,
.cform--glass textarea {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(255, 255, 255, 0.65);
}
.cform--glass input::placeholder,
.cform--glass textarea::placeholder { color: rgba(30, 30, 28, 0.55); }
.cform--glass .chips button { background: rgba(255, 255, 255, 0.5); }
.cform--glass .chips button.is-on { background: var(--dark); }

/* ---------- centered tabbed FAQ ---------- */
.faq--ct { padding-top: var(--sec-pad); }
.faq--ct h2 { font-size: var(--h-mega); font-weight: 600; }
.faq--ct .faq__panel {
  width: min(45.625rem, 92vw);
  background: var(--beige-2); border: 0; border-radius: 1.875rem;
  padding: 1rem 0.625rem 0.625rem;
}
.faq--ct .faq__list { margin-top: 1rem; }
.faq--ct .faq-item { border: 0; border-radius: 1.125rem; margin-bottom: 0.5rem; }
.faq--ct .faq-item:last-child { margin-bottom: 0; }

/* separate support card under the panel */
.faq-support {
  width: min(45.625rem, 92vw);
  margin: 0.625rem auto 0;
  background: var(--beige-2); border-radius: 1.875rem;
  padding: 1.625rem 1.875rem;
  display: flex; align-items: center; justify-content: center; gap: 1.375rem;
}
.faq-support .avs { display: flex; flex: none; }
.faq-support .avs img { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid var(--beige-2); object-fit: cover; }
.faq-support .avs img + img { margin-left: -0.625rem; }
.faq-support .tx { text-align: left; }
.faq-support .t { font-size: 0.8125rem; font-weight: 600; color: var(--gray); }
.faq-support .faq__mail { margin-top: 0.25rem; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .ct-info { grid-template-columns: 1fr; gap: 1.75rem; }
  .faq-support { flex-direction: column; text-align: center; }
  .faq-support .tx { text-align: center; }
}