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

/* ---- Section 1: Hero --------------------------------------------------------
   The page's opening "breath." A richer, more premium register than a plain
   headline — a soft centered glow, faint corner stars, a 3-dot gold ornament
   above the headline, and a hairline gold rule beneath it. Still quiet and
   on-brand: gold appears only as decorative marks, never as text.
   ----------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: var(--space-10);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

@media (max-width: 767px) {
  .hero { padding-block: var(--space-8); }
}

/* Warm ambient glow — a soft blush halo behind the headline, plus faint
   gold washes low in the corners. Gives the hero depth without busyness. */
.hero::before {
  content: "";
  position: absolute;
  inset: -15% -12% auto -12%;
  height: 110%;
  background:
    radial-gradient(circle at 50% 22%, rgba(245, 227, 222, 0.12) 0%, rgba(245, 227, 222, 0.04) 36%, transparent 62%),
    radial-gradient(circle at 12% 90%, rgba(184, 147, 90, 0.10) 0%, transparent 52%),
    radial-gradient(circle at 88% 88%, rgba(184, 147, 90, 0.08) 0%, transparent 52%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 1;
}

/* Faint corner stars — same motif as the closing section, tying the page
   together as one continuous, deliberate composition. */
.hero__star {
  position: absolute;
  color: var(--color-gold);
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

.hero__star--left {
  width: clamp(5rem, 12vw, 9rem);
  height: auto;
  top: var(--space-7);
  left: -2.5rem;
  transform: rotate(-8deg);
}

.hero__star--right {
  width: clamp(4rem, 9vw, 7rem);
  height: auto;
  bottom: var(--space-6);
  right: -2rem;
  transform: rotate(10deg);
}

/* 3-dot gold ornament — the site's recurring accent, used as a quiet
   opening mark above the headline. Decorative only (aria-hidden). */
.hero__ornament {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-5);
  color: var(--color-gold);
  border: 1px solid color-mix(in srgb, var(--color-gold) 38%, transparent);
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--color-gold) 7%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-gold) 6%, transparent);
}

.hero__ornament svg {
  width: 1.6rem;
  height: auto;
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--color-blush);
  max-width: 22ch;
  margin-inline: auto;
}

@media (max-width: 767px) {
  .hero__headline { font-size: var(--text-xl); }
}

@media (min-width: 1024px) {
  .hero__headline { font-size: var(--text-4xl); }
}

/* Hairline gold rule — a calm, premium separator between the headline
   and the whisper. Decorative (aria-hidden). */
.hero__rule {
  display: block;
  width: 3.5rem;
  height: 1px;
  margin: var(--space-5) auto 0;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  opacity: 0.7;
}

.hero__body {
  margin-top: var(--space-6);
  max-width: 38ch;
  margin-inline: auto;
}

.hero__body p {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--color-ink-soft);
}

@media (max-width: 767px) {
  .hero__body p { font-size: var(--text-sm); }
}

.hero__body p + p { margin-top: var(--space-3); }

.hero__whisper {
  margin-top: var(--space-7) !important;
  margin-inline: auto;
}

@media (max-width: 767px) {
  .hero__star--left { left: -3rem; }
  .hero__star--right { right: -2.5rem; }
}

/* ---- Section 2: Not sure what to ask? ------------------------------------ */

.reassure__lede {
  margin-top: var(--space-4);
  max-width: 38ch;
  margin-inline: auto;
  line-height: var(--leading-loose);
  color: var(--color-plum);
}

.reassure__heading {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: #290924;
  margin-inline: auto;
}

.reassure__examples {
  list-style: none;
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.reassure__example {
  position: relative;
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg, 1rem);
    background-color: var(--color-accent);
  border: 1px solid var(--color-line);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-blush);
  font-size: var(--text-base);
}

.reassure__whisper {
  margin-top: var(--space-6) !important;
  margin-inline: auto;
  color: var(--color-gold-deep);
}

/* ---- Section 3: Message Card ---------------------------------------------- */

.message-card-section {
  position: relative;
  padding-block: var(--space-9);
  overflow: hidden;
}

/* Soft ambient glow behind the card — elevates the surface without
   breaking the site's "quiet, paper" register. */
.message-card-section::before {
  content: "";
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 78%;
  background:
    radial-gradient(circle at 50% 30%, rgba(245, 227, 222, 0.16) 0%, rgba(245, 227, 222, 0.05) 40%, transparent 70%);
  filter: blur(22px);
  pointer-events: none;
}

.message-card-section .container {
  position: relative;
  z-index: 1;
}

.message-card-heading {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--color-blush);
}

.message-card {
  position: relative;
  max-width: 32rem;
  margin-inline: auto;
  padding: var(--space-8);
  border-radius: var(--radius-xl, 1.5rem);
  background-color: var(--color-paper-raised);
  border: 1px solid color-mix(in srgb, var(--color-line-strong) 55%, transparent);
  box-shadow: var(--shadow-lg), var(--shadow-accent-glow);
  text-align: center;
  overflow: hidden;
}

/* Thin gold accent along the top edge — a premium mark, used sparingly. */
.message-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4.5rem;
  height: 3px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

@media (max-width: 767px) {
  .message-card { padding-inline: var(--space-3);
  padding-block: var(--space-6); }
}

/* ---- WhatsApp CTA ---------------------------------------------------------
   A warm green-tinted invitation. Uses the pill shape deliberately here
   (distinct from .btn, which is rounded-not-pill) as the sole social
   CTA on the card. */
.message-card__whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-button, 10px);
  background-color: #290924;
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  box-shadow: 0 6px 18px rgba(31, 122, 77, 0.28);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-soft),
              background-color var(--duration-base) var(--ease-soft),
              filter var(--duration-base) var(--ease-soft);
}

.message-card__whatsapp:hover {
  background-color: #17633D;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(31, 122, 77, 0.34);
}

.message-card__whatsapp:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(31, 122, 77, 0.24);
}

.message-card__whatsapp-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.message-card__whatsapp-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

@media (max-width: 767px) {
  .message-card__whatsapp { font-size: var(--text-sm); }
}

.message-card__fastest {
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

/* ---- Divider ---------------------------------------------------------------
   A quiet "or" with hairlines and a centered gold dot — echoes the site's
   recurring 3-dot accent language without adding a third mark. */
.message-card__divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-6);
}

.message-card__divider::before,
.message-card__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-line);
}

.message-card__divider span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.message-card__divider span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-gold);
}

.message-card__divider span::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-gold);
}

/* ---- Form ------------------------------------------------------------------ */

.message-card__form {
  text-align: left;
}

.message-card__honeypot { display: none; }

.message-card__field { margin-top: var(--space-5); }
.message-card__field:first-child { margin-top: 0; }

.message-card__field label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  color: var(--color-ink);
}

/* Small gold asterisk marks required fields — calm, on-brand. */
.message-card__field label[for]::after {
  content: "*";
  color: var(--color-gold-deep);
  font-weight: var(--weight-semibold);
}

.message-card__field input,
.message-card__field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-button, 10px);
  border: 1.5px solid var(--color-line-strong);
  background-color: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  resize: vertical;
  box-shadow: inset 0 1px 2px rgba(42, 36, 32, 0.04);
  transition: border-color var(--duration-base) var(--ease-soft),
              box-shadow var(--duration-base) var(--ease-soft),
              background-color var(--duration-base) var(--ease-soft);
}

.message-card__field input:hover,
.message-card__field textarea:hover {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-line-strong));
}

.message-card__field input::placeholder,
.message-card__field textarea::placeholder {
  color: var(--color-ink-faint);
  font-family: var(--font-body);
}

.message-card__field input:focus,
.message-card__field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px var(--color-accent-tint), inset 0 1px 2px rgba(42, 36, 32, 0.04);
}

/* ---- Submit button ----------------------------------------------------------
   Primary committed action. Rounded-not-pill per the project's v2 button
   direction; terracotta fill with a soft lift + glow on hover and an
   arrow that slides to signal "go". */
.message-card__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-7);
  padding: var(--space-4) var(--space-6);
  border: none;
  border-radius: var(--radius-button, 10px);
  background-color: var(--color-accent);
  color: var(--color-paper);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(41, 9, 36, 0.22);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-soft),
              background-color var(--duration-base) var(--ease-soft);
}

.message-card__submit-arrow {
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-out);
}

@media (max-width: 767px) {
  .message-card__submit {
    margin-top: var(--space-6);
    font-size: var(--text-sm);
  }
}

.message-card__submit:hover {
  background-color: var(--color-accent-deep, var(--color-accent));
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(41, 9, 36, 0.3);
}

.message-card__submit:hover .message-card__submit-arrow {
  transform: translateX(4px);
}

.message-card__submit:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(41, 9, 36, 0.2);
}

.message-card__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---- Success --------------------------------------------------------------- */

.message-card__success {
  text-align: center;
  padding-block: var(--space-4);
}

.message-card__success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--color-accent-tint);
  margin-bottom: var(--space-5);
}

.message-card__success-mark svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: var(--color-accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message-card__success p {
  line-height: var(--leading-loose);
  color: var(--color-ink);
}

.message-card__success p + p {
  margin-top: var(--space-3);
  color: var(--color-ink-soft);
}

/* ---- Section 4: Alternate ways -------------------------------------------- */

.alternate__heading {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: #290924;
  margin-inline: auto;
}

.alternate__body {
  margin-top: var(--space-5);
  max-width: 40ch;
  margin-inline: auto;
  line-height: var(--leading-loose);
  color: var(--color-ink-soft);
}

.alternate__links {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.alternate__link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-soft);
  border: 1px solid #290924;
  border-radius: var(--radius-lg, 1rem);
  padding: var(--space-3) var(--space-4);
}

.alternate__link:hover {
  background-color: var(--color-accent);
  color: var(--color-paper);
}

@media (max-width: 767px) {
  .alternate__link {
    flex-direction: column;
    gap: var(--space-4);
    border: 1px solid #290924;
    border-radius: var(--radius-lg, 1rem);
    padding: var(--space-3) var(--space-4);
  }
}

/* ---- Section 5: Closing ----------------------------------------------------
   The final "exhale" of the page. Kept quiet and warm — a soft layered
   glow behind the content, a faint star motif bleeding off the corners,
   and a 3-dot gold ornament above the heading (the site's recurring
   accent language) so the close feels intentional, not flat.
   ----------------------------------------------------------------------- */

.closing {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Soft ambient warmth — blush & gold glows at low opacity, echoing the
   page's earlier paper/blush register without breaking the dark calm. */
.closing::before {
  content: "";
  position: absolute;
  inset: -20% -15% auto -15%;
  height: 120%;
  background:
    radial-gradient(circle at 50% 18%, rgba(245, 227, 222, 0.10) 0%, rgba(245, 227, 222, 0.04) 34%, transparent 62%),
    radial-gradient(circle at 12% 88%, rgba(184, 147, 90, 0.10) 0%, transparent 55%),
    radial-gradient(circle at 88% 80%, rgba(184, 147, 90, 0.08) 0%, transparent 55%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}

.closing__star {
  position: absolute;
  color: var(--color-gold);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}

.closing__star--top {
  width: clamp(6rem, 14vw, 11rem);
  height: auto;
  top: var(--space-6);
  left: -2.5rem;
  transform: rotate(-8deg);
}

.closing__star--bottom {
  width: clamp(4.5rem, 10vw, 8rem);
  height: auto;
  bottom: var(--space-6);
  right: -2rem;
  transform: rotate(10deg);
}

.closing .closing__inner {
  position: relative;
  z-index: 1;
  max-width: 32rem;
  margin-inline: auto;
}

/* 3-dot gold ornament — the site's recurring accent, used here as a
   quiet "seal" above the final heading. Decorative only (aria-hidden). */
.closing__ornament {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-4);
  color: var(--color-gold);
  border: 1px solid color-mix(in srgb, var(--color-gold) 38%, transparent);
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--color-gold) 7%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-gold) 6%, transparent);
}

.closing__ornament svg {
  width: 1.6rem;
  height: auto;
}

.closing__reveal {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--color-blush);
}

.closing__signature {
  margin-top: var(--space-6) !important;
  margin-inline: auto;
  color: var(--color-gold);
}

@media (max-width: 767px) {
  .closing__star--top { left: -3rem; }
  .closing__star--bottom { right: -2.5rem; }
}