/* =========================================================
   Best Ever Medical — Contact Page
   Loads ONLY on the Page containing [bem_contact_page] (see
   functions.php). Depends on custom.css for :root variables, header,
   footer, the .rv-up reveal system (used directly on .cd-block in
   the shortcode's markup), and the shared .cta-section/.cta-form
   ("Leave a message" form) component — only this page's own unique
   contact-hero/contact-directory styles live here.
   ========================================================= */

/* --- Editorial Contact Hero ---
   Not the shared .inner-hero component — the static reference gives
   this page its own distinct, larger, centered editorial treatment.
   Initial hidden state (opacity:0/translateY) for the GSAP reveal in
   custom.js's shared revealTl — matches the same pattern as
   .article-hero's .ah-title/.ah-meta in event.css. */
.contact-hero { padding: 220px 5vw 100px 5vw; background-color: var(--bg-cream); position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; text-align: center; }
.ch-container { max-width: 1200px; width: 100%; }
.ch-eyebrow { font-size: 14px; text-transform: uppercase; letter-spacing: 3px; color: var(--card-gold); font-weight: 700; margin-bottom: 20px; opacity: 0; transform: translateY(30px); }
.ch-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(60px, 12vw, 150px); line-height: 0.9; font-weight: 300; color: var(--primary-dark); margin: 0; letter-spacing: -0.02em; opacity: 0; transform: translateY(40px); }
.ch-title em { font-style: italic; color: var(--text-dark); }

/* --- Contact Directory Grid --- */
.contact-directory { padding: 40px 5vw 120px 5vw; background-color: var(--bg-cream); position: relative; z-index: 10; }
.cd-container { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px 40px; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 80px; }

.cd-label { font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: #64748b; font-weight: 700; margin-bottom: 25px; display: flex; align-items: center; gap: 15px; }
.cd-label::before { content: ''; display: inline-block; width: 30px; height: 1px; background-color: #cbd5e1; }

.cd-link-wrap { display: flex; flex-direction: column; gap: 15px; }

.cd-link { font-family: 'Cormorant Garamond', serif; font-size: clamp(32px, 4vw, 54px); color: var(--text-dark); text-decoration: none; line-height: 1.1; font-weight: 400; display: inline-flex; align-items: center; gap: 20px; transition: color 0.4s cubic-bezier(0.77, 0, 0.175, 1); width: max-content; }
.cd-link-desc { font-family: 'DM Sans', sans-serif; font-size: 15px; color: #64748b; font-weight: 400; margin-top: 5px; margin-bottom: 15px; display: block; }
.cd-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.08); color: var(--text-dark); opacity: 0; transform: translateX(-20px); transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1); }
.cd-arrow svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; }

.cd-link:hover { color: var(--primary); }
.cd-link:hover .cd-arrow { opacity: 1; transform: translateX(0); background: var(--primary); color: var(--white); border-color: var(--primary); }

.cd-text { font-family: 'DM Sans', sans-serif; font-size: 24px; color: var(--text-dark); line-height: 1.6; font-weight: 300; margin: 0; }
.cd-text strong { font-weight: 500; color: var(--primary-dark); }

@media (max-width: 1024px) {
    .cd-container { grid-template-columns: 1fr; gap: 60px; }
}

@media (max-width: 768px) {
    .contact-hero { padding: 160px 5vw 60px 5vw; }
    .cd-arrow { display: none; } /* Hide arrows on mobile to save space — matches the static reference exactly */
    .cd-link { font-size: clamp(28px, 8vw, 36px); gap: 10px; }
}