/* ============================================================
   N.B.S.V.A — CONTACT PAGE V2 + FAQ V2 ("Emma Luke" gold skin)
   Loaded AFTER css/style.css. Scoped to body.contact-v2 and
   body.faq-v2 — other pages are untouched. Reskin only: no
   element IDs, Firebase logic, or inline scripts changed.
   Mobile/tablet fixes live in css/responsive.css, NOT here.
   ============================================================ */

body.contact-v2,
body.faq-v2 {
  overflow-x: hidden;
  --gold2: #F5B301;
  --gold-hi: #ffcf4d;
  --gold-soft: rgba(245, 179, 1, .12);
  --red2: #E02B2B;
  --bg: #060606;
  --panel: #0C0C0D;
  --card: #101011;
  --card-raised: #141416;
  background:
    radial-gradient(1000px 520px at 80% -5%, rgba(245, 179, 1, .07), transparent 60%),
    var(--bg);
}

/* -------- Hero -------- */
body.contact-v2 .page-hero.cv2-hero {
  text-align: left;
  padding: 90px 0 34px;
  min-height: 440px;
}
body.contact-v2 .cv2-hero::before {
  background:
    radial-gradient(720px 400px at 20% -10%, rgba(245, 179, 1, .14), transparent 65%),
    radial-gradient(600px 420px at 92% 10%, rgba(120, 100, 255, .10), transparent 70%);
}
body.contact-v2 .cv2-hero-art {
  position: absolute; inset: 0 0 0 auto; width: min(52%, 720px);
  z-index: 0; pointer-events: none;
}
body.contact-v2 .cv2-hero-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 32%, #000 82%, transparent 100%);
  opacity: .9;
}
body.contact-v2 .cv2-hero-copy { max-width: 520px; }
body.contact-v2 .cv2-hero h1 {
  font-family: 'Archivo', var(--display);
  font-weight: 900; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  margin-bottom: 14px;
}
body.contact-v2 .cv2-gold,
body.faq-v2 .cv2-gold {
  color: var(--gold2);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 34px rgba(245, 179, 1, .35);
}
body.contact-v2 .page-hero .label-caps { color: var(--gold-hi); }
body.contact-v2 .cv2-lede { color: var(--text); font-size: 1.05rem; max-width: 460px; margin: 0 0 10px; }
body.contact-v2 .cv2-sub { color: var(--muted); font-size: .95rem; max-width: 440px; margin: 0; }

/* Emma Luke quote card (over the art, right side) */
body.contact-v2 .cv2-quote-card {
  position: absolute; right: 4.5%; top: 120px; z-index: 1;
  background: rgba(10, 10, 11, .72); backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 179, 1, .28); border-radius: 14px;
  padding: 16px 20px; max-width: 220px; text-align: left;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .7);
}
body.contact-v2 .cv2-quote-name {
  font-family: 'Archivo', var(--display); font-weight: 800; text-transform: uppercase;
  color: var(--gold-hi); font-size: 1.05rem; letter-spacing: .04em; margin-bottom: 6px;
}
body.contact-v2 .cv2-quote-text { color: var(--text); font-size: .84rem; font-style: italic; margin-bottom: 8px; }
body.contact-v2 .cv2-quote-tag { color: var(--gold2); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* Support strip */
body.contact-v2 .cv2-support-strip {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  margin-top: 34px; max-width: 640px;
  background: rgba(12, 12, 13, .78); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px;
}
body.contact-v2 .cv2-support-item { display: flex; gap: 10px; align-items: flex-start; }
body.contact-v2 .cv2-si-icon {
  width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--gold-soft); border: 1px solid rgba(245, 179, 1, .3);
  font-size: 1.05rem;
}
body.contact-v2 .cv2-support-item strong {
  display: block; font-family: 'Archivo', var(--display); font-weight: 800;
  text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; margin-bottom: 2px;
}
body.contact-v2 .cv2-support-item span:not(.cv2-si-icon) { color: var(--muted); font-size: .78rem; line-height: 1.4; }

/* -------- Section headings + routing cards -------- */
body.contact-v2 .form-card h2,
body.contact-v2 .contact-sidebar h2,
body.contact-v2 .contact-sidebar h3 {
  font-family: 'Archivo', var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
}
body.contact-v2 .contact-card { background: var(--card); transition: transform .18s var(--ease), border-color .18s, box-shadow .18s; }
body.contact-v2 .contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Report card = the serious red path */
body.contact-v2 .contact-card.red {
  border-color: rgba(224, 43, 43, .38);
  background: linear-gradient(180deg, rgba(224, 43, 43, .08), var(--card) 70%);
}
body.contact-v2 .contact-card.red:hover { border-color: rgba(224, 43, 43, .65); box-shadow: 0 16px 34px -12px rgba(224, 43, 43, .4); }
body.contact-v2 .contact-card.red .icon { background: rgba(224, 43, 43, .12); border-color: rgba(224, 43, 43, .4); }
body.contact-v2 .emergency-strip {
  background: rgba(224, 43, 43, .12); border-color: rgba(224, 43, 43, .4);
  font-weight: 500;
}
body.contact-v2 .emergency-strip strong { color: #ffb3ac; text-transform: uppercase; font-family: 'Archivo', var(--display); letter-spacing: .04em; font-size: .84rem; }

/* Gold accent for Apply card (earned verification) */
body.contact-v2 .contact-card.gold { border-color: rgba(245, 179, 1, .3); }
body.contact-v2 .contact-card.gold:hover { box-shadow: 0 16px 34px -12px rgba(245, 179, 1, .3); }

/* -------- Sidebar: contact info card -------- */
body.contact-v2 .cv2-info-title { margin-bottom: 14px; color: var(--gold-hi); }
body.contact-v2 .cv2-info-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); margin-bottom: 10px; color: var(--text);
  transition: border-color .18s, background .18s;
}
body.contact-v2 a.cv2-info-row:hover { border-color: rgba(245, 179, 1, .4); background: var(--card-raised); }
body.contact-v2 .cv2-info-icon {
  width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 1rem; border: 1px solid var(--line-strong);
}
body.contact-v2 .cv2-info-icon.gold { background: var(--gold-soft); border-color: rgba(245, 179, 1, .3); color: var(--gold-hi); }
body.contact-v2 .cv2-info-icon.green { background: var(--green-soft); border-color: rgba(18, 183, 106, .3); color: #4fdc9c; }
body.contact-v2 .cv2-info-icon.blue { background: rgba(29, 155, 240, .1); border-color: rgba(29, 155, 240, .3); color: #6cc0ff; }
body.contact-v2 .cv2-info-row strong { display: block; font-size: .88rem; margin-bottom: 1px; }
body.contact-v2 .cv2-info-row span { display: block; color: var(--gold-hi); font-size: .82rem; }
body.contact-v2 .cv2-info-row em { display: block; color: var(--muted); font-size: .74rem; font-style: normal; }
body.contact-v2 .cv2-hours {
  display: flex; gap: 12px; align-items: center; margin-top: 4px;
  padding: 12px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(245, 179, 1, .1), rgba(245, 179, 1, .04));
  border: 1px solid rgba(245, 179, 1, .3);
}
body.contact-v2 .cv2-hours-icon { font-size: 1.3rem; }
body.contact-v2 .cv2-hours strong { display: block; font-size: .8rem; text-transform: uppercase; font-family: 'Archivo', var(--display); letter-spacing: .05em; color: var(--gold-hi); }
body.contact-v2 .cv2-hours span { color: var(--muted); font-size: .8rem; }

/* Chat card seam cleanup on dark v2 base */
body.contact-v2 .chat-window { background: var(--card); }

/* -------- FAQ V2 -------- */
body.faq-v2 .page-hero::before {
  background: radial-gradient(680px 360px at 50% -10%, rgba(245, 179, 1, .15), transparent 65%);
}
body.faq-v2 .page-hero h1 {
  font-family: 'Archivo', var(--display); font-weight: 900; text-transform: uppercase;
  letter-spacing: .01em; font-size: clamp(2rem, 4.6vw, 3rem);
}
body.faq-v2 .page-hero .label-caps { color: var(--gold-hi); }
body.faq-v2 .faq-item { background: var(--card); }
body.faq-v2 .faq-item.open { border-color: rgba(245, 179, 1, .35); }
body.faq-v2 .faq-q span:last-child { color: var(--gold2); }
body.faq-v2 .faq-a a { color: var(--gold-hi); }

/* -------- Full mockup layout: 3-column grid -------- */
body.contact-v2 .cv2-grid3 {
  display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.15fr);
  gap: 22px; align-items: start; margin-top: 4px;
}
body.contact-v2 .cv2-col-title {
  font-family: 'Archivo', var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1rem; color: var(--gold-hi); margin-bottom: 6px;
}
body.contact-v2 .cv2-col-sub { color: var(--muted); font-size: .85rem; margin-bottom: 18px; }

/* Send Us A Message card */
body.contact-v2 .cv2-msg-card { position: relative; overflow: hidden; }
body.contact-v2 .cv2-crest-watermark {
  position: absolute; right: 18px; top: 44px; color: var(--gold2);
  opacity: .14; font-size: 1.1rem; letter-spacing: .3em; pointer-events: none;
}
body.contact-v2 .cv2-msg-card .field input,
body.contact-v2 .cv2-msg-card .field textarea,
body.contact-v2 .cv2-msg-card .csel-btn {
  border-radius: 12px;
}
body.contact-v2 .cv2-msg-card .field input:focus,
body.contact-v2 .cv2-msg-card .field textarea:focus {
  border-color: rgba(245,179,1,.5); box-shadow: 0 0 0 3px rgba(245,179,1,.12);
}
body.contact-v2 .cv2-btn-gold {
  font-family: 'Archivo', var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: #1a1200;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold2));
  border: none; box-shadow: 0 12px 28px -10px rgba(245,179,1,.5);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
body.contact-v2 .cv2-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(245,179,1,.6); }

/* Contact info column: Best Way block */
body.contact-v2 .cv2-bestway {
  margin-top: 16px; padding: 14px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line);
}
body.contact-v2 .cv2-bw-title {
  font-family: 'Archivo', var(--display); font-weight: 800; text-transform: uppercase;
  font-size: .82rem; letter-spacing: .05em; color: var(--gold-hi); margin-bottom: 6px;
}
body.contact-v2 .cv2-bestway > p { color: var(--muted); font-size: .82rem; margin-bottom: 12px; }

/* Column 3: chat + FAQ */
body.contact-v2 .cv2-col3 { display: flex; flex-direction: column; gap: 22px; }
body.contact-v2 .cv2-faq-card { padding: 20px; }
body.contact-v2 .cv2-faq-link {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; margin-bottom: 8px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--text); font-size: .86rem; font-weight: 500;
  transition: border-color .18s, background .18s, transform .18s var(--ease);
}
body.contact-v2 .cv2-faq-link:hover { border-color: rgba(245,179,1,.4); background: var(--card-raised); transform: translateX(2px); }
body.contact-v2 .cv2-faq-link span { color: var(--gold2); font-size: 1.1rem; }
body.contact-v2 .cv2-faq-all {
  width: 100%; margin-top: 6px; justify-content: center; display: inline-flex;
  font-family: 'Archivo', var(--display); font-weight: 800; text-transform: uppercase;
  font-size: .78rem; letter-spacing: .06em; color: var(--gold-hi);
  border: 1px solid rgba(245,179,1,.35); border-radius: 10px; padding: 11px;
}
body.contact-v2 .cv2-faq-all:hover { background: var(--gold-soft); }

/* Trust strip */
body.contact-v2 .cv2-trust-strip {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  margin-top: 26px; padding: 18px 22px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
body.contact-v2 .cv2-trust-left { display: flex; gap: 14px; align-items: center; }
body.contact-v2 .cv2-trust-badge {
  width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--gold-soft); border: 1px solid rgba(245,179,1,.3); font-size: 1.2rem;
}
body.contact-v2 .cv2-trust-left strong { display: block; font-size: .92rem; }
body.contact-v2 .cv2-trust-left span { color: var(--muted); font-size: .8rem; }
body.contact-v2 .cv2-trust-right { display: flex; align-items: center; gap: 10px; }
body.contact-v2 .cv2-follow-label {
  font-family: 'Archivo', var(--display); font-weight: 800; text-transform: uppercase;
  font-size: .72rem; letter-spacing: .12em; color: var(--muted); margin-right: 4px;
}
body.contact-v2 .cv2-soc {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--panel); border: 1px solid var(--line-strong);
  color: var(--text); font-size: 1rem; transition: border-color .18s, background .18s;
}
body.contact-v2 .cv2-soc:hover { border-color: rgba(245,179,1,.5); background: var(--gold-soft); color: var(--gold-hi); }


/* -------- Overflow guards -------- */
body.contact-v2 .cv2-support-item > div,
body.contact-v2 .cv2-info-row > div,
body.contact-v2 .cv2-trust-left > div { min-width: 0; }
body.contact-v2 .cv2-info-row span,
body.contact-v2 .cv2-support-item span:not(.cv2-si-icon) { overflow-wrap: break-word; }
body.contact-v2 .cv2-grid3 > *,
body.contact-v2 .cv2-col3 > * { min-width: 0; }
/* ============================================================
   RESPONSIVE — self-contained here so the page can never ship
   without its breakpoints. (Exception to the responsive.css
   rule: this file is page-scoped and never regenerated.)
   If you pasted an earlier contact-v2 block into responsive.css,
   delete it to avoid duplicates.
   ============================================================ */

/* ---------- ≤1080px — big tablets / small laptops ---------- */
@media (max-width: 1080px) {
  body.contact-v2 .cv2-grid3 { grid-template-columns: 1fr 1fr; gap: 18px; }
  body.contact-v2 .cv2-col3 { grid-column: 1 / -1; }
  body.contact-v2 .cv2-quote-card { right: 3%; top: 100px; max-width: 200px; }
}

/* ---------- ≤900px — tablets ---------- */
@media (max-width: 900px) {
  body.contact-v2 .page-hero.cv2-hero { padding: 70px 0 26px; min-height: 0; }
  body.contact-v2 .cv2-hero-art { width: 78%; opacity: .55; }
  body.contact-v2 .cv2-hero-art img {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  }
  body.contact-v2 .cv2-quote-card { position: static; margin: 20px 0 0; max-width: none; }
  body.contact-v2 .cv2-support-strip { max-width: none; }
  body.contact-v2 .cv2-col3 { gap: 18px; }
}

/* ---------- ≤760px — big phones / small tablets ---------- */
@media (max-width: 760px) {
  body.contact-v2 .cv2-grid3 { grid-template-columns: 1fr; }
  body.contact-v2 .cv2-trust-strip { flex-direction: column; text-align: center; gap: 14px; padding: 16px; }
  body.contact-v2 .cv2-trust-left { flex-direction: column; }
  /* routing cards: 2×2 grid, same pattern as the vendors page */
  body.contact-v2 .contact-cards-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.contact-v2 .contact-card { padding: 14px 10px; }
  body.contact-v2 .contact-card h3 { font-size: .92rem; }
  body.contact-v2 .contact-card p { font-size: .74rem; }
}

/* ---------- ≤640px — standard phones ---------- */
@media (max-width: 640px) {
  body.contact-v2 .cv2-hero h1 { font-size: 2rem; }
  body.contact-v2 .cv2-lede { font-size: .95rem; }
  body.contact-v2 .cv2-sub { font-size: .86rem; }
  body.contact-v2 .cv2-hero-art { width: 100%; opacity: .38; }
  body.contact-v2 .cv2-support-strip { grid-template-columns: 1fr; gap: 14px; padding: 14px; margin-top: 24px; }
  body.contact-v2 .cv2-info-row { padding: 10px; }
  body.contact-v2 .cv2-msg-card,
  body.contact-v2 .cv2-info-card,
  body.contact-v2 .cv2-faq-card { padding: 18px 16px; }
  body.contact-v2 .cv2-chat-card .chat-window { height: 380px !important; }
  body.contact-v2 .emergency-strip { font-size: .82rem; padding: 12px 14px; }
  /* comfortable touch targets */
  body.contact-v2 .cv2-faq-link,
  body.contact-v2 .cv2-info-row,
  body.contact-v2 .cv2-btn-gold,
  body.contact-v2 .cv2-faq-all { min-height: 44px; }
  body.contact-v2 .cv2-soc { width: 42px; height: 42px; }
  body.faq-v2 .page-hero h1 { font-size: 1.8rem; }
  body.faq-v2 .faq-q { padding: 16px 18px; font-size: .9rem; }
  body.faq-v2 .faq-a { padding: 0 18px 16px; font-size: .86rem; }
}

/* ---------- ≤480px — compact phones ---------- */
@media (max-width: 480px) {
  body.contact-v2 .page-hero.cv2-hero { padding: 58px 0 22px; }
  body.contact-v2 .cv2-hero h1 { font-size: 1.75rem; }
  body.contact-v2 .cv2-quote-card { padding: 13px 15px; }
  body.contact-v2 .cv2-quote-name { font-size: .95rem; }
  body.contact-v2 .cv2-si-icon { width: 36px; height: 36px; font-size: .95rem; }
  body.contact-v2 .cv2-support-item strong { font-size: .74rem; }
  body.contact-v2 .cv2-support-item span:not(.cv2-si-icon) { font-size: .74rem; }
  body.contact-v2 .cv2-col-title { font-size: .92rem; }
  body.contact-v2 .cv2-msg-card .field label { font-size: .8rem; }
  body.contact-v2 .cv2-msg-card .field input,
  body.contact-v2 .cv2-msg-card .field textarea { font-size: 16px; } /* stops iOS zoom-on-focus */
  body.contact-v2 .cv2-info-icon { width: 36px; height: 36px; }
  body.contact-v2 .cv2-info-row strong { font-size: .84rem; }
  body.contact-v2 .cv2-info-row span { font-size: .78rem; }
  body.contact-v2 .cv2-hours { padding: 10px; }
  body.contact-v2 .cv2-trust-badge { width: 40px; height: 40px; }
  body.contact-v2 .cv2-crest-watermark { display: none; }
  body.contact-v2 .chat-header-title { font-size: .82rem; }
  body.contact-v2 .chat-header-status { font-size: .7rem; }
}

/* ---------- ≤380px — small phones (SE, older Androids) ---------- */
@media (max-width: 380px) {
  body.contact-v2 .cv2-hero h1 { font-size: 1.55rem; }
  body.contact-v2 .contact-cards-grid { grid-template-columns: 1fr; }
  body.contact-v2 .contact-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; }
  body.contact-v2 .contact-card .icon { margin: 0; flex-shrink: 0; }
  body.contact-v2 .contact-card h3 { margin-bottom: 2px; }
  body.contact-v2 .cv2-chat-card .chat-window { height: 340px !important; }
  body.contact-v2 .cv2-faq-link { font-size: .8rem; padding: 11px 12px; }
  body.contact-v2 .cv2-trust-left strong { font-size: .86rem; }
  body.contact-v2 .cv2-trust-left span { font-size: .74rem; }
  body.faq-v2 .page-hero h1 { font-size: 1.55rem; }
}

/* ---------- short landscape phones ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  body.contact-v2 .page-hero.cv2-hero { padding: 48px 0 18px; }
  body.contact-v2 .cv2-hero-art { opacity: .3; }
  body.contact-v2 .cv2-quote-card { display: none; }
  body.contact-v2 .cv2-chat-card .chat-window { height: 300px !important; }
}