/*
 * Dallas Media Company — Contact page.
 * Hero + two-column body (Fluent Form left, info cards right).
 * Includes dark-theme overrides for the embedded Fluent Form.
 */

.ct-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--cyan); margin: 0 0 24px; }
.ct-eyebrow::before { content: ''; display: block; width: 40px; height: 1px; background: var(--cyan); }

/* ── HERO ── */
.ct-hero { padding: 140px 60px 64px; background: radial-gradient(ellipse 60% 80% at 20% 30%, rgba(30,95,191,0.2) 0%, transparent 60%), var(--navy); position: relative; overflow: hidden; border-bottom: 1px solid rgba(0,212,255,0.08); }
.ct-hero-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; }
.ct-hero h1 { font-family: 'Bebas Neue', sans-serif !important; font-size: clamp(56px, 7vw, 100px) !important; line-height: 0.92 !important; letter-spacing: 2px; color: var(--white); margin: 0 0 24px; max-width: 1000px; }
.ct-hero h1 em { font-style: normal; -webkit-text-stroke: 1.5px var(--cyan); color: transparent; }
.ct-hero-sub { font-size: 17px; line-height: 1.65; color: var(--gray); max-width: 720px; margin: 0 0 36px; }
.ct-hero-meta { display: flex; gap: 40px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid rgba(0,212,255,0.1); }
.ct-hero-meta > * { margin-top: 0 !important; }
.ct-meta { min-width: 120px; }
.ct-meta-lbl { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); margin: 0; }
.ct-meta-val { font-size: 14px; color: var(--white); font-weight: 500; margin: 2px 0 0; }

/* ── TWO-COLUMN BODY ── */
.ct-body { padding: 80px 60px; background: var(--navy); }
.ct-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; max-width: 1280px; margin: 0 auto; align-items: start; }
.ct-form-wrap { background: linear-gradient(180deg, rgba(13,38,80,0.4), rgba(7,20,40,0.6)); border: 1px solid rgba(0,212,255,0.15); padding: 48px 44px; }
.ct-form-head { padding-bottom: 24px; border-bottom: 1px solid rgba(0,212,255,0.1); margin-bottom: 32px; }
.ct-form-head > * { margin-top: 0 !important; }
.ct-form-head h2 { font-family: 'Bebas Neue', sans-serif !important; font-size: 40px !important; line-height: 1 !important; letter-spacing: 1px; color: var(--white); margin: 0 0 12px; }
.ct-form-head p { font-size: 14px; color: var(--gray); line-height: 1.6; margin: 0; }

/* RIGHT: info cards */
.ct-info { display: flex; flex-direction: column; gap: 16px; }
.ct-info-card { background: var(--navy2); border: 1px solid rgba(0,212,255,0.1); padding: 28px; transition: border-color 0.25s, transform 0.25s; text-decoration: none; color: inherit; display: block; }
.ct-info-card:hover { border-color: rgba(0,212,255,0.4); transform: translateX(4px); }
.ct-info-card > * { margin-top: 0 !important; }
.ct-info-lbl { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--cyan); margin: 0 0 8px; }
.ct-info-val { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--white); letter-spacing: 0.5px; line-height: 1.15; margin: 0 0 6px; }
a.ct-info-card .ct-info-val { color: var(--white); }
.ct-info-sub { font-size: 12px; color: var(--gray); line-height: 1.5; margin: 0; }
.ct-hours-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ct-hours-list li { display: flex; justify-content: space-between; font-size: 13px; color: var(--gray); }
.ct-hours-list li b { color: var(--white); font-weight: 500; }
.ct-info-card > .ct-socials { display: flex; gap: 10px; margin-top: 18px !important; flex-wrap: wrap; }
.ct-socials a { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; color: var(--gray); text-decoration: none; font-size: 12px; font-weight: 600; transition: all 0.2s; }
.ct-socials a:hover { border-color: var(--cyan); color: var(--cyan); }

/* ── Fluent Form dark theme (scoped to the contact form wrapper) ── */
.ct-form-wrap .fluentform .ff-el-group { margin-bottom: 18px; }
.ct-form-wrap .fluentform .ff-el-input--label label,
.ct-form-wrap .fluentform label { font-size: 11px !important; letter-spacing: 2px; text-transform: uppercase; color: var(--gray) !important; font-weight: 500; }
.ct-form-wrap .fluentform .ff-el-input--label .ff-el-is-required:after { color: var(--cyan); }
.ct-form-wrap .fluentform input[type=text],
.ct-form-wrap .fluentform input[type=email],
.ct-form-wrap .fluentform input[type=tel],
.ct-form-wrap .fluentform select,
.ct-form-wrap .fluentform textarea {
  padding: 14px 16px !important; background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(0,212,255,0.18) !important; color: var(--white) !important;
  font-family: 'DM Sans', sans-serif !important; font-size: 14px !important; border-radius: 0 !important;
  box-shadow: none !important; height: auto !important; line-height: 1.4 !important;
}
.ct-form-wrap .fluentform input::placeholder,
.ct-form-wrap .fluentform textarea::placeholder { color: var(--gray) !important; opacity: 1; }
.ct-form-wrap .fluentform select option { background: var(--navy2); color: var(--white); }
.ct-form-wrap .fluentform input:focus,
.ct-form-wrap .fluentform select:focus,
.ct-form-wrap .fluentform textarea:focus { border-color: var(--cyan) !important; background: rgba(255,255,255,0.07) !important; }
.ct-form-wrap .fluentform .ff-btn-submit {
  padding: 16px 32px !important; background: var(--cyan) !important; border: none !important;
  color: var(--navy) !important; font-family: 'DM Sans', sans-serif !important; font-size: 13px !important;
  letter-spacing: 2px !important; text-transform: uppercase !important; font-weight: 600 !important;
  border-radius: 0 !important; box-shadow: none !important; transition: background 0.2s !important; cursor: pointer;
}
.ct-form-wrap .fluentform .ff-btn-submit:hover { background: var(--white) !important; }
.ct-form-wrap .fluentform .ff-message-success { color: var(--white); border: 1px solid rgba(0,212,255,0.3); background: rgba(0,212,255,0.08); padding: 16px; }
.ct-form-wrap .fluentform .text-danger, .ct-form-wrap .fluentform .error { color: #ff7a7a !important; font-size: 12px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .ct-hero { padding: 110px 24px 48px; }
  .ct-hero-meta { gap: 24px; }
  .ct-body { padding: 56px 24px; }
  .ct-grid { grid-template-columns: 1fr; gap: 32px; }
  .ct-form-wrap { padding: 32px 24px; }
}