/* ==========================================================================
   Bold Etik — Contact page
   ========================================================================== */

.be-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 10px;
}

/* ---------- Hero (layout in layout.css) ---------- */
.be-contact-hero {
  width: 100%;
  padding: 0 10px;
  --hero-script-w: 180px; --hero-script-h: 112px; --hero-script-x: -6px; --hero-script-y: 0px;
  --hero-desc-w-tablet: 220px; --hero-gap-phone: 13px;
}
@media (max-width: 1199.98px) {
  .be-contact-hero { --hero-script-w: 77px; --hero-script-h: 48px; --hero-script-x: -30px; --hero-script-y: -7px; }
}
@media (max-width: 809.98px) {
  .be-contact-hero { padding: 0; --hero-script-w: 65px; --hero-script-h: 40px; --hero-script-x: -22px; --hero-script-y: -7px; }
}

/* ---------- Quote + form ---------- */
.be-contact-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 150px;
  width: 100%;
  max-width: 1400px;
  padding: 100px 20px;
}
.be-contact-intro { display: flex; align-items: center; gap: 100px; width: 100%; }
.be-contact-intro__aside {
  flex: 1 0 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}
.be-quote { display: flex; flex-direction: column; gap: 30px; }
.be-quote__text { display: flex; flex-direction: column; align-items: flex-end; white-space: pre; }
.be-quote__text span:first-child { padding-right: 40px; }
.be-quote__author { display: flex; align-items: center; gap: 10px; }
.be-quote__avatar {
  flex: none;
  width: 50px;
  height: 50px;
  padding: 11px;
  border-radius: 60px;
  background: #fff;
  object-fit: contain;
}
.be-quote__name { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }

.be-contact-intro__form { flex: 1 0 0; display: flex; min-width: 0; }

.be-form-card {
  display: flex;
  width: 100%;
  padding: 40px;
  border-radius: 15px;
  background: var(--be-surface);
  box-shadow:
    -1.1px 1.2px 0.1px #44444403, -2.2px 2.4px 0.3px #44444405, -3.3px 3.7px 0.5px #44444405,
    -4.6px 5.1px 0.7px #44444408, -6px 6.6px 0.9px #44444408, -7.6px 8.4px 1.3px #44444408,
    -9.5px 10.5px 1.8px #44444408, -11.8px 13px 2.4px #44444408, -14.7px 16.2px 3.2px #44444408,
    -18.3px 20.2px 4.4px #4444440a, -23px 25.4px 6px #4444440a, -29.3px 32.3px 8.2px #4444440a,
    -37.8px 41.8px 11.3px #4444440a, -49.9px 55.1px 15.9px #4444440a;
}
.be-form { display: flex; flex-direction: column; gap: 20px; width: 100%; padding: 0 20px; }
.be-form__field { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.be-form__label { color: var(--be-ink-60); }
.be-form__row { display: flex; gap: 18px; width: 100%; }
.be-form__row > * { flex: 1 0 0; min-width: 0; }
.be-form input,
.be-form textarea {
  width: 100%;
  padding: 18px 22px;
  border: 0;
  border-radius: 4px;
  background: var(--be-bg);
  color: var(--be-ink);
  font: 500 16px/1.15 var(--be-sans);
  outline: none;
}
.be-form input { height: 60px; }
.be-form textarea { min-height: 160px; resize: vertical; display: block; }
.be-form input::placeholder,
.be-form textarea::placeholder { color: rgba(2, 1, 8, 0.4); }
.be-form input:focus-visible,
.be-form textarea:focus-visible { box-shadow: inset 0 0 0 1px var(--be-ink-12); }
.be-form__footer { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.be-form__note { width: 100%; color: var(--be-ink-50); }
.be-form__submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 12px 24px;
  border: 0;
  border-radius: 14px;
  background: #000;
  color: #fff;
  font: 400 14px/1.2 "Inter", var(--be-sans);
  font-variation-settings: "opsz" 20, "wght" 600;
  overflow: hidden;
  transition: opacity 0.2s ease;
}
.be-form__submit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.be-form__submit:hover::after { opacity: 0.1; }
/* Dimmed until every required field is filled in */
.be-form:invalid .be-form__submit,
.be-form__submit:disabled { opacity: 0.5; cursor: default; }
.be-form:invalid .be-form__submit::after { opacity: 0; }
.be-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 1199.98px) {
  .be-contact-main { padding: 100px 10px; }
  .be-contact-intro { gap: 0; justify-content: space-between; }
  .be-quote { width: min-content; max-width: 500px; } /* as wide as the author line */
  .be-quote__text { align-items: stretch; white-space: normal; }
  .be-quote__text span:first-child { align-self: flex-end; }
  .be-form-card { padding: 40px 28px; }
}
@media (max-width: 809.98px) {
  .be-contact-main { gap: 100px; padding: 20px 0; }
  .be-contact-intro { flex-direction: column; gap: 60px; }
  .be-contact-intro__aside { order: 1; align-self: auto; flex: none; width: 100%; justify-content: center; gap: 30px; }
  .be-contact-intro__form { order: 0; flex: none; width: 100%; }
  .be-form-card { padding: 40px 20px; }
  .be-form__row { flex-direction: column; }
  .be-form__row > * { flex: none; }
}

/* ---------- FAQ ---------- */
.be-faq-section { width: 100%; }
.be-faq-section__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 20px;
  border-radius: 20px;
  background: var(--be-surface);
}
.be-faq {
  display: flex;
  align-items: flex-start;
  gap: 100px;
  width: 100%;
  max-width: 1400px;
}
.be-faq__header { flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 100px; min-width: 0; }
.be-faq__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.be-faq__title { max-width: 400px; color: var(--be-grey); }
.be-faq__title span { color: var(--be-ink); }
.be-faq__more { display: flex; align-items: center; gap: 20px; }
.be-faq__more p { white-space: nowrap; color: var(--be-grey); }

.be-accordion { flex: none; width: 589px; border-top: 1px solid var(--be-ink-12); font-family: var(--be-system); }
.be-accordion__item { border-bottom: 1px solid var(--be-ink-12); }
.be-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  border: 0;
  background: none;
  text-align: left;
}
.be-accordion__q { display: flex; align-items: center; gap: 12px; }
.be-accordion__num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  font: 600 13px var(--be-system);
  letter-spacing: -0.02em;
  color: var(--be-orange-bright);
}
.be-accordion__num svg { position: absolute; inset: 0; }
.be-accordion__text { font: 600 26px var(--be-system); letter-spacing: -0.03em; color: var(--be-ink); }
/* The icon sits inline on a text line, which gives each row its 83px height */
.be-accordion__icon-wrap { flex: none; display: block; font: 12px var(--be-system); color: var(--be-orange-bright); }
.be-accordion__icon { display: inline; }
.be-accordion__icon path { transform-origin: 16px 16px; transition: transform 0.4s var(--be-ease-spring); }
.be-accordion__item.is-open .be-accordion__icon path:first-child { transform: rotate(45deg) translateY(3.5px); }
.be-accordion__item.is-open .be-accordion__icon path:last-child { transform: rotate(-45deg) translateY(-3.5px); }
.be-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--be-ease-spring);
}
.be-accordion__item.is-open .be-accordion__panel { grid-template-rows: 1fr; }
.be-accordion__panel > div { overflow: hidden; }
.be-accordion__answer {
  max-width: 680px;
  padding: 0 48px 20px;
  font: 600 18px/1.3 var(--be-system);
  letter-spacing: -0.02em;
  color: var(--be-ink);
}

@media (max-width: 1199.98px) {
  .be-faq-section__card { padding: 100px 10px; }
  .be-faq { gap: 0; justify-content: space-between; }
  .be-faq__header { gap: 60px; }
  .be-accordion { flex: 1 0 0; width: auto; min-width: 0; }
}
@media (max-width: 809.98px) {
  .be-faq-section__card { padding: 60px 10px; }
  .be-faq { flex-direction: column; gap: 50px; }
  .be-faq__header { flex: none; width: 100%; gap: 60px; }
  .be-accordion { width: 100%; flex: none; }
}