/* =====================================================================
   CONTACT PAGE REDESIGN  (contact-v260.css)  —  desktop concept CONTACT.jpg
   Layout/presentation only. The Netlify form, field names, validation, and
   the ?category= prefill JS are untouched. Single centered column:
   intro · call card · form · disclaimer · second-opinion card · footer.
   Built responsive: desktop matches the concept; smaller widths stack
   cleanly as a functional baseline (dedicated mobile pass handled later).
   Uses the existing design tokens — no new colours or type added.
   ===================================================================== */

/* Container a touch wider to seat the cards comfortably. */
.page-contact .contact-page__inner { max-width: 720px; }

/* Headline: uppercase tracking to match the Criminal Defense / How
   headline convention and the concept. Subheadline keeps the existing
   muted-italic helper styling. */
.page-contact .contact-page__title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1.65rem, 2.9vw, 2.35rem);
}

/* ---- SECTION 2 — prefer-to-call card -------------------------------- */
.page-contact .contact-call {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 1.05rem 1.6rem;
  margin-bottom: var(--space-6);
}
.page-contact .contact-call__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--color-gold);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
}
.page-contact .contact-call__icon svg { width: 21px; height: 21px; }
.page-contact .contact-call__label {
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
  font-size: 0.95rem;
}
.page-contact .contact-call__num {
  margin-left: auto;
  color: var(--color-gold);
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ---- SECTION 3 — form container + light input fields ---------------- */
.page-contact .contact-form {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  gap: var(--space-5);
}
.page-contact .contact-form__field input[type="text"],
.page-contact .contact-form__field input[type="email"],
.page-contact .contact-form__field input[type="tel"],
.page-contact .contact-form__field textarea {
  background: #ededed;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #0a0a0a;
  padding: 0.9rem 1rem;
}
.page-contact .contact-form__field input::placeholder,
.page-contact .contact-form__field textarea::placeholder { color: rgba(10, 10, 10, 0.45); }
.page-contact .contact-form__field input:focus,
.page-contact .contact-form__field textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  background: #f4f3ee;
}
.page-contact .contact-form__field textarea { min-height: 160px; }
.page-contact .contact-form__submit-row { margin-top: var(--space-2); }

/* ---- SECTION 4 — disclaimer (muted, no box) ------------------------- */
.page-contact .contact-disclaimer {
  margin: var(--space-5) 0 var(--space-8);
  max-width: 60ch;
  font-size: 0.8rem;
  line-height: 1.55;
  font-style: italic;
  color: rgba(245, 243, 238, 0.42);
}

/* ---- SECTION 5 — second-opinion gold card (CONTACT.jpg concept) -------
   Gold card: dark circular icon badge (left) + body (heading, italic text,
   black CTA bar with gold arrow). The CTA bar lives inside the card. The
   whole card is the link. Icon badge uses the brand spur in gold (existing
   asset) inside a dark ring — closest faithful match to the badge treatment
   shown in the concept. */
.page-contact .contact-so-card {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 2.4vw, 2.1rem);
  background: var(--color-gold);
  border-radius: 14px;
  padding: clamp(1.8rem, 2.8vw, 2.5rem) clamp(1.9rem, 3vw, 2.7rem);
  text-decoration: none;
  color: var(--color-black);
  transition: transform 300ms ease, background-color 300ms ease;
}
.page-contact .contact-so-card:hover { transform: translateY(-2px); background: var(--color-gold-soft); }
.page-contact .contact-so-card:focus-visible { outline: 2px solid var(--color-black); outline-offset: 3px; }

/* Dark circular icon badge with gold brand spur */
.page-contact .contact-so-card__icon {
  flex: 0 0 auto;
  position: relative;
  width: clamp(58px, 6vw, 76px);
  height: clamp(58px, 6vw, 76px);
  border-radius: 50%;
  background: var(--color-black);
  border: 1.5px solid var(--color-gold);
}
.page-contact .contact-so-card__icon::after {
  content: "";
  position: absolute;
  inset: 22%;
  background: url(../assets/so-cta-icon-v265.png) center / contain no-repeat;
}

.page-contact .contact-so-card__body { flex: 1 1 auto; min-width: 0; }
.page-contact .contact-so-card__title {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--color-black);
}
.page-contact .contact-so-card__text {
  display: block;
  margin-top: 0.6rem;
  font-size: clamp(0.88rem, 1.2vw, 1rem);
  font-style: italic;
  line-height: 1.5;
  color: rgba(10, 10, 10, 0.78);
}
/* Black CTA bar inside the card */
.page-contact .contact-so-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(1rem, 1.6vw, 1.4rem);
  background: var(--color-black);
  border-radius: 8px;
  padding: clamp(0.85rem, 1.3vw, 1.15rem) clamp(1.3rem, 1.9vw, 1.8rem);
}
.page-contact .contact-so-card__cta-label {
  color: var(--color-white);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}
.page-contact .contact-so-card__cta-arrow {
  flex: 0 0 auto;
  width: clamp(22px, 2.2vw, 28px);
  height: auto;
  color: var(--color-gold);
  transition: transform 300ms ease;
}
.page-contact .contact-so-card:hover .contact-so-card__cta-arrow { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
  .page-contact .contact-so-card:hover { transform: none; }
  .page-contact .contact-so-card:hover .contact-so-card__cta-arrow { transform: none; }
}

/* =====================================================================
   DESKTOP PRESENCE PASS (v263) — reverts the v261 over-tightening and
   restores the approved breathing room (the v260 base rules above now
   stand). Desktop-scoped (>=1025px); mobile baseline untouched.
   Only three presence adjustments remain, matched to the CONTACT.jpg feel:
   a wider content column, a prominent-but-roomy call card, and a
   second-opinion card that is narrower than the form yet still substantial.
   ===================================================================== */
@media (min-width: 1025px) {

  /* Wider content column — more room/presence (addresses "too narrow"). */
  .page-contact .contact-page__inner { max-width: 760px; }

  /* (fix 1) Tighten the intro stack so spur / headline / subheadline / call
     card read as one group — the subheadline-to-call-card gap was too large. */
  .page-contact .contact-page__mark   { margin-bottom: var(--space-4); }   /* 48 -> 32 */
  .page-contact .contact-page__title  { margin-bottom: var(--space-2); }   /* 24 -> 16 */
  .page-contact .contact-page__header { margin-bottom: var(--space-5); }   /* 96 -> 40 */

  /* (fix 3) Pull the footer up — cut the gap below the second-opinion card
     and tighten the footer's top so it sits close to the card, per concept. */
  .page-contact .contact-page   { padding-bottom: var(--space-6); }        /* 128 -> 48 */
  .page-contact .contact-footer { padding-top: var(--space-5); }           /* 64 -> 40 */

  /* Call card: prominent AND roomy — larger content carried by larger
     padding so it breathes rather than feeling cramped. */
  .page-contact .contact-call { padding: 1.5rem 1.95rem; }
  .page-contact .contact-call__icon { width: 54px; height: 54px; border-width: 1.75px; }
  .page-contact .contact-call__icon svg { width: 25px; height: 25px; }
  .page-contact .contact-call__label { font-size: 1.05rem; }
  .page-contact .contact-call__num { font-size: clamp(1.35rem, 1.8vw, 1.5rem); }

  /* Second-opinion card: full form-container width (per the approved
     concept), generous padding for presence. */
  .page-contact .contact-so-card {
    padding: clamp(2rem, 3vw, 2.6rem) clamp(2.1rem, 3.4vw, 2.9rem);
  }
}

/* =====================================================================
   MOBILE PASS (v267) — intentional phone layout (<=640px only).
   The base rules and the desktop (>=1025px) block are untouched; these are
   mobile-specific overrides. Stacks the call card and second-opinion card,
   widens the content column, keeps the CTA on one line, and tightens the
   vertical rhythm so the page scans well without excessive scrolling.
   ===================================================================== */
@media (max-width: 640px) {

  /* Room to breathe on phones (desktop side padding was too wide here) +
     trim the gap above the footer so it doesn't float. */
  .page-contact .contact-page {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    padding-bottom: var(--space-6);
  }
  .page-contact .contact-footer { padding-top: var(--space-5); }

  /* (4) Intro -> call card rhythm */
  .page-contact .contact-page__header { margin-bottom: var(--space-6); }

  /* (2) PHONE CARD — stack cleanly: icon / label / number, centered */
  .page-contact .contact-call {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
  }
  .page-contact .contact-call__num { margin-left: 0; }

  /* (3) FORM — comfortable padding + rhythm; inputs stay full width */
  .page-contact .contact-form { padding: var(--space-4) var(--space-3); gap: var(--space-4); }

  /* (4) form -> disclaimer -> second-opinion rhythm */
  .page-contact .contact-disclaimer { margin: var(--space-4) 0 var(--space-5); }

  /* (1) SECOND OPINION CARD — stack: centered icon, then heading / text /
     full-width single-line CTA. Icon goes ABOVE the content, never beside. */
  .page-contact .contact-so-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4);
  }
  .page-contact .contact-so-card__icon { align-self: center; }
  .page-contact .contact-so-card__cta { padding: 0.95rem 1.2rem; }
  .page-contact .contact-so-card__cta-label {
    white-space: nowrap;
    font-size: 0.92rem;
    letter-spacing: 0.06em;
  }
}