/* ============================================================
   CONTACT
   ============================================================ */

/* ---------- Hero + form ---------- */
.ct-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(120px, 16vw, 200px) clamp(64px, 9vw, 110px);
  background: radial-gradient(120% 90% at 85% -10%, rgba(255,176,32,.10), transparent 60%), var(--bg);
}
.ct-hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.ct-hero__title { font-size: clamp(2.4rem, 7vw, 5rem); margin: 1rem 0 1.3rem; }
.ct-hero__copy .lead { margin-bottom: 2.2rem; }

.ct-quick { display: flex; flex-direction: column; gap: 1rem; }
.ct-quick li { display: flex; align-items: center; gap: 1rem; }
.ct-quick__ic {
  width: 46px; height: 46px; flex: none; border-radius: 13px;
  display: grid; place-items: center; font-size: 1.1rem;
  background: rgba(255,176,32,.10); border: 1px solid var(--line-strong); color: var(--flame-2);
}
.ct-quick__label {
  display: block; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem;
}
.ct-quick li a, .ct-quick li div > span:last-child { font-weight: 500; font-size: 1rem; }
.ct-quick li a { transition: color .2s; }
.ct-quick li a:hover { color: var(--flame-2); }

.ct-form-wrap {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  box-shadow: var(--sh-2);
  position: relative; overflow: hidden;
}
.ct-form-wrap::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-heat);
}
.ct-form__title { font-family: var(--display); font-weight: 700; font-size: 1.4rem; margin-bottom: 1.4rem; }
.ct-form { display: flex; flex-direction: column; gap: 1.1rem; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.ct-form__btn { margin-top: .4rem; align-self: flex-start; }
.ct-form__note { font-family: var(--mono); font-size: .82rem; min-height: 1.2em; }
.input.is-bad, .textarea.is-bad, .select.is-bad {
  border-color: var(--pink); box-shadow: 0 0 0 4px rgba(255,62,127,.14);
}

/* ---------- Socials ---------- */
.ct-social__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ct-social__inner .section-title { margin: 1rem 0 1rem; }
.ct-social__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.soc-card {
  display: flex; align-items: center; gap: .9rem;
  background: #fff; border: 1px solid rgba(25,16,22,.10);
  border-radius: var(--r-lg); padding: 1.1rem 1.3rem;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.soc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -24px rgba(25,16,22,.5); border-color: rgba(25,16,22,.2); }
.soc-card__ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff; }
.soc-card__ic svg { width: 20px; height: 20px; }
.soc-card__meta { display: flex; flex-direction: column; line-height: 1.2; }
.soc-card__meta b { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--ink); }
.soc-card__meta span { font-family: var(--mono); font-size: .72rem; color: #7a6a72; }

/* ---------- FAQ ---------- */
.ct-faq__head { margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.ct-faq__head .section-title { margin-top: 1rem; }
.ct-faq__list { max-width: 820px; }
.faq-item {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  margin-bottom: .8rem; overflow: hidden; transition: border-color .3s, background .3s;
}
.faq-item[open] { border-color: var(--line-strong); background: var(--surface-2); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.4rem;
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-plus {
  flex: none; width: 26px; height: 26px; position: relative; transition: transform .3s var(--ease);
}
.faq-item summary .faq-plus::before, .faq-item summary .faq-plus::after {
  content: ""; position: absolute; background: var(--flame-2); border-radius: 2px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.faq-item summary .faq-plus::before { width: 14px; height: 2px; }
.faq-item summary .faq-plus::after { width: 2px; height: 14px; transition: transform .3s var(--ease); }
.faq-item[open] summary .faq-plus::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-item__body { padding: 0 1.4rem 1.3rem; color: var(--muted); font-size: .96rem; max-width: 62ch; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ct-hero__grid { grid-template-columns: 1fr; }
  .ct-social__inner { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ct-row { grid-template-columns: 1fr; }
  .ct-social__grid { grid-template-columns: 1fr; }
}