/* MEMZO contact page — layered on register.css (shared header, form fields, buttons).
   The info card uses the same dark card + orange glow as the home page stats and quote sections. */

.contact-page { --ct-accent: #F0460E; }

/* ---------- intro ---------- */
.ct-intro { padding: clamp(12px, 3vw, 40px) 0 clamp(28px, 4vw, 56px); }
.ct-title {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(44px, 7vw, 112px);
  font-weight: 500; letter-spacing: -0.05em; line-height: .98;
  margin: 0; color: var(--reg-ink);
}

/* ---------- dark info card (always dark, both themes) ---------- */
.ct-card {
  position: relative; overflow: hidden; isolation: isolate;
  height: 100%; min-height: 560px;
  display: flex; flex-direction: column; gap: 36px;
  border-radius: 42px;
  background: #0f0f0f; color: #fff;
  padding: clamp(32px, 3.4vw, 48px);
}
.ct-card::before {
  content: ""; position: absolute; z-index: -1;
  width: 90%; aspect-ratio: 1; left: -30%; bottom: -45%;
  background: radial-gradient(closest-side, rgba(240, 70, 14, .34), rgba(240, 70, 14, 0));
  animation: ct-glow 14s ease-in-out infinite alternate;
}
.ct-card::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(0deg, #000, transparent 85%);
          mask-image: linear-gradient(0deg, #000, transparent 85%);
}
@keyframes ct-glow {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8%, -6%, 0) scale(1.08); }
}

.ct-tag {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6);
}
.ct-tag::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ct-accent); box-shadow: 0 0 0 4px rgba(240, 70, 14, .2);
}
/* the theme colours every <p>, so the card sets its own text colours */
.ct-card .ct-card__lede {
  margin: 0; max-width: 420px;
  font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em;
  color: #fff;
}

.ct-list { list-style: none; margin: auto 0 0; padding: 0; }
.ct-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .12);
}
.ct-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ct-list__label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.ct-card .ct-list__value {
  font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; color: #fff; text-decoration: none;
  background: linear-gradient(var(--ct-accent), var(--ct-accent)) 0 100% / 0 1px no-repeat;
  transition: background-size .35s, color .35s;
}
.ct-card a.ct-list__value:hover { color: var(--ct-accent); background-size: 100% 1px; }

.ct-card .ct-card__small { margin: 0 0 12px; font-size: 13px; color: rgba(255, 255, 255, .55); }
.ct-plans { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-plans a {
  display: inline-flex; gap: 8px; align-items: center;
  padding: 9px 16px; border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .8); text-decoration: none;
  transition: border-color .3s, background-color .3s, color .3s;
}
.ct-plans a b { font-weight: 600; color: #fff; }
.ct-plans a:hover { border-color: var(--ct-accent); background: rgba(240, 70, 14, .12); color: #fff; }

/* in dark mode the card sits on a near-black page, so give it an edge */
[data-bs-theme=dark] .ct-card { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }

/* ---------- form additions ---------- */
.ct-form-title { font-size: clamp(30px, 3vw, 44px); }

.reg-field textarea {
  width: 100%; min-height: 150px; resize: vertical;
  padding: 16px 20px;
  border: 1px solid transparent; border-radius: 14px;
  background: var(--reg-field); color: var(--reg-ink);
  font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5;
  transition: border-color .25s ease, background-color .25s ease;
}
.reg-field textarea::placeholder { color: var(--reg-muted); opacity: .75; font-weight: 400; }
.reg-field textarea:focus { outline: none; border-color: var(--reg-focus); background: var(--reg-bg); }
.reg-field textarea[aria-invalid=true] { border-color: var(--reg-danger); }
.ct-count { margin-top: 6px; text-align: right; font-size: 12px; color: var(--reg-muted); }

/* topic chips (radio group) */
.ct-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-chip { position: relative; margin: 0 !important; cursor: pointer; }
.ct-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ct-chip span {
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px;
  border-radius: 50px; border: 1px solid var(--reg-line);
  background: var(--reg-field); color: var(--reg-ink);
  font-size: 15px; font-weight: 500 !important;
  transition: background-color .25s, border-color .25s, color .25s;
}
.ct-chip:hover span { border-color: var(--reg-ink); }
.reg-field .ct-chip span { color: var(--reg-ink); }          /* beat register.css ".reg-field label span" muted colour */
.reg-field .ct-chip input:checked + span { background: var(--reg-ink); border-color: var(--reg-ink); color: var(--reg-bg); }
.ct-chip input:focus-visible + span { outline: 2px solid var(--reg-focus); outline-offset: 2px; }
.ct-chips[aria-invalid=true] .ct-chip span { border-color: var(--reg-danger); }

/* ---------- responsive ---------- */
@media (min-width: 992px) {
  .ct-card { position: sticky; top: 24px; height: auto; min-height: calc(100vh - 150px); max-height: 760px; }
}
@media (max-width: 991.98px) {
  .ct-card { min-height: 0; border-radius: 28px; }
  .ct-list { margin-top: 0; }
}
@media (max-width: 575.98px) {
  .ct-chip span { height: 40px; padding: 0 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ct-card::before { animation: none; } }

/* intro uses the shared hero card from legal.css */
.ct-intro.lg-hero { padding: clamp(40px, 6vw, 96px) clamp(24px, 5vw, 88px); margin-bottom: clamp(20px, 2.4vw, 32px); }
.contact-page .reg-panel { border-radius: 32px; padding: clamp(28px, 4vw, 60px); }
@media (max-width: 575.98px) { .contact-page .reg-panel { border-radius: 22px; padding: 26px 20px; } }