/* ============================================================
   IZYSCO — Contact Us — Page-Specific Stylesheet
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
#contact-hero { padding: 9rem 0 5rem; background: var(--bg); position: relative; overflow: hidden; }
.contact-crumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--t3); margin-bottom: 1.6rem; }
.contact-crumb a { display: flex; align-items: center; gap: 0.35rem; color: var(--t3); transition: color 0.2s; }
.contact-crumb a:hover { color: var(--red2); }
.contact-crumb i { font-size: 0.85rem; }
.contact-crumb .here { color: var(--t1); font-weight: 600; }

.contact-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.contact-hero-inner { position: relative; z-index: 1; }
.contact-hero-inner h1 { margin-bottom: 1.2rem; }
.contact-hero-inner h1 em { font-style: normal; color: var(--red2); }
.contact-hero-inner h1 .b { font-style: normal; color: var(--blue2); }
.contact-hero-desc { font-size: 1.02rem; color: var(--t2); max-width: 560px; margin-bottom: 2rem; line-height: 1.8; }
.contact-hero-desc strong { color: var(--t1); }
.contact-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.contact-hero-chips { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.ch-chip { display: flex; align-items: center; gap: 0.7rem; background: var(--surface); border: 1px solid var(--border); border-radius: 50px; padding: 0.55rem 1.2rem 0.55rem 0.6rem; backdrop-filter: blur(12px); }
.ch-chip .ch-ico { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; }
.ch-chip .ch-ico.r  { background: rgba(232,41,28,0.16); color: var(--red2); }
.ch-chip .ch-ico.b  { background: rgba(41,121,255,0.16); color: var(--blue2); }
.ch-chip .ch-ico.g  { background: rgba(255,208,96,0.16); color: var(--gold); }
.ch-chip .ch-ico.gr { background: rgba(34,209,122,0.16); color: var(--green); }
.ch-chip strong { display: block; font-size: 0.86rem; color: var(--t1); font-weight: 700; }
.ch-chip span { font-size: 0.71rem; color: var(--t2); }

/* Hero 3D visual */
.contact-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; z-index: 1; }
.ch3d-scene { width: 420px; height: 420px; position: relative; transform-style: preserve-3d; perspective: 800px; }
.ch3d-core { width: 230px; height: 230px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle at 35% 35%, #1e1e3a, #06060F); border: 1px solid rgba(41,121,255,0.28); box-shadow: 0 0 60px rgba(41,121,255,0.22), 0 0 120px rgba(232,41,28,0.12), inset 0 0 40px rgba(41,121,255,0.08); display: flex; align-items: center; justify-content: center; animation: globe-breathe 5s ease-in-out infinite; }
.ch3d-core-inner { text-align: center; }
.ch3d-core-inner i { font-size: 3.6rem; color: var(--blue2); filter: drop-shadow(0 0 20px rgba(41,121,255,0.6)); animation: globe-spin 8s linear infinite; display: block; }
.ch3d-core-lbl { font-size: 0.68rem; color: var(--t2); margin-top: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; }
.ch3d-orbit { position: absolute; border-radius: 50%; border: 1px solid; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: ring-spin linear infinite; }
.ch3d-orbit-1 { width: 280px; height: 280px; border-color: rgba(232,41,28,0.22); animation-duration: 13s; }
.ch3d-orbit-2 { width: 345px; height: 345px; border-color: rgba(255,208,96,0.15); animation-duration: 21s; animation-direction: reverse; }
.ch3d-orbit-3 { width: 410px; height: 410px; border-color: rgba(41,121,255,0.14); animation-duration: 31s; }
.ch3d-orbit-dot { width: 9px; height: 9px; border-radius: 50%; position: absolute; top: -4.5px; left: 50%; transform: translateX(-50%); }
.ch3d-orbit-1 .ch3d-orbit-dot { background: var(--red2); box-shadow: 0 0 12px var(--red2); }
.ch3d-orbit-2 .ch3d-orbit-dot { background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.ch3d-orbit-3 .ch3d-orbit-dot { background: var(--blue2); box-shadow: 0 0 12px var(--blue2); }
.ch3d-fbadge { position: absolute; z-index: 10; background: rgba(13,13,28,0.85); border: 1px solid var(--border2); backdrop-filter: blur(16px); border-radius: var(--r); padding: 0.65rem 1rem; display: flex; align-items: center; gap: 0.6rem; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.ch3d-fbadge i { font-size: 1.3rem; color: var(--gold); }
.ch3d-fbadge .fbv { font-family: var(--ff-display); font-weight: 800; color: var(--t1); font-size: 0.86rem; display: block; line-height: 1.1; }
.ch3d-fbadge .fbl { font-size: 0.64rem; color: var(--t3); }
.ch3d-fb-1 { top: 0%; right: -4%; animation: float1 5s ease-in-out infinite; }
.ch3d-fb-2 { bottom: 28%; left: -10%; animation: float2 6s ease-in-out infinite; }
.ch3d-fb-3 { bottom: 2%; right: 6%; animation: float1 7s ease-in-out infinite 1s; }
.ch3d-fb-4 { top: 34%; left: -12%; animation: float2 5.5s ease-in-out infinite 0.5s; }

/* ── Contact Methods — Premium WOW Layout ───────────────── */
#contact-methods { padding: 6.5rem 0; background: var(--bg2); }
.cm-wow-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5rem; margin-bottom: 1.8rem; }

.cm-hero-card { position: relative; overflow: hidden; padding: 2.8rem 2.4rem 2.4rem; border-radius: var(--r3); border: 1px solid rgba(37,211,102,0.22); background: linear-gradient(150deg, rgba(37,211,102,0.07) 0%, rgba(255,255,255,0.045) 50%); display: flex; flex-direction: column; gap: 0; }
.cm-hero-bg { position: absolute; inset: 0; border-radius: var(--r3); background: radial-gradient(ellipse 80% 60% at 10% 90%, rgba(37,211,102,0.12), transparent 65%); pointer-events: none; }
.cm-hero-orb { position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(37,211,102,0.1), transparent 70%); top: -80px; right: -60px; pointer-events: none; animation: orb-drift 10s ease-in-out infinite alternate; }
.cm-hero-card::before { content: ''; position: absolute; top: 0; left: 2.4rem; right: 2.4rem; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #25D366, #128C7E); box-shadow: 0 0 20px rgba(37,211,102,0.5); }
.cm-badge-top { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #25D366; background: rgba(37,211,102,0.1); border: 1px solid rgba(37,211,102,0.28); border-radius: 50px; padding: 0.28rem 0.85rem; margin-bottom: 1.4rem; width: fit-content; }
.cm-hero-icon { width: 72px; height: 72px; border-radius: 20px; background: linear-gradient(135deg, #25D366, #128C7E); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; box-shadow: 0 12px 40px rgba(37,211,102,0.45); margin-bottom: 1.4rem; animation: float1 5s ease-in-out infinite; }
.cm-hero-title { font-family: var(--ff-display); font-size: 1.7rem; font-weight: 800; color: var(--t1); margin-bottom: 0.7rem; }
.cm-hero-desc { font-size: 0.92rem; color: var(--t2); line-height: 1.7; margin-bottom: 1.4rem; flex-grow: 1; }
.cm-hero-number { font-family: var(--ff-display); font-size: 1.15rem; font-weight: 800; color: #25D366; margin-bottom: 1.4rem; display: flex; align-items: center; gap: 0.5rem; }
.cm-hero-number::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #25D366; box-shadow: 0 0 10px #25D366; animation: badge-pulse 2s ease-in-out infinite; }
.cm-wa-btn { background: linear-gradient(135deg, #25D366, #128C7E) !important; color: #fff !important; border: none !important; box-shadow: 0 8px 30px rgba(37,211,102,0.45) !important; margin-bottom: 1rem; align-self: flex-start; }
.cm-wa-btn:hover { transform: translateY(-4px) scale(1.03) !important; box-shadow: 0 16px 50px rgba(37,211,102,0.6) !important; }
.cm-hero-trust { font-size: 0.75rem; color: var(--t3); display: flex; align-items: center; gap: 0.4rem; }
.cm-hero-trust i { color: #25D366; font-size: 0.9rem; }

.cm-side-col { display: flex; flex-direction: column; gap: 1.5rem; }
.cm-side-card { padding: 2rem 1.9rem; border-radius: var(--r2); display: flex; flex-direction: column; gap: 0; flex: 1; }
.cm-side-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.2rem; }
.cm-side-icon { width: 54px; height: 54px; border-radius: 16px; }
.cm-side-icon i { font-size: 1.4rem; }
.cm-badge-side { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue2); background: rgba(41,121,255,0.1); border: 1px solid rgba(41,121,255,0.28); border-radius: 50px; padding: 0.25rem 0.75rem; }
.cm-badge-side.cm-badge-red { color: var(--red2); background: rgba(232,41,28,0.1); border-color: rgba(232,41,28,0.28); }
.cm-side-card h4 { font-size: 1.1rem; color: var(--t1); margin-bottom: 0.5rem; }
.cm-side-card p { font-size: 0.85rem; color: var(--t2); line-height: 1.65; margin-bottom: 1rem; flex-grow: 1; }
.cm-side-value { display: flex; align-items: center; gap: 0.4rem; font-family: var(--ff-display); font-weight: 700; font-size: 0.9rem; color: var(--blue2); margin-bottom: 1.1rem; text-decoration: none; transition: color 0.2s; }
.cm-side-value:hover { color: var(--t1); }
.cm-office-flags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.1rem; }
.cm-side-btn { align-self: flex-start; padding: 0.6rem 1.3rem !important; font-size: 0.82rem !important; }

.cm-trust-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); padding: 1.1rem 1.5rem; backdrop-filter: blur(12px); }
.cm-trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--t2); padding: 0.3rem 1.2rem; }
.cm-trust-item i { color: var(--green); font-size: 1rem; }
.cm-trust-div { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }

/* ── Contact Form + Info Panel ──────────────────────────── */
#contact-form-section { padding: 7rem 0; background: var(--bg); }
.cf-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: start; }
.cf-form-card { padding: 2.6rem 2.4rem; border-radius: var(--r2); }
.cf-form-card:hover { transform: none; }
.cf-form-card .f-step-head { margin-bottom: 1.8rem; }
.cf-form-card h3 { font-size: 1.3rem; color: var(--t1); margin-bottom: 0.4rem; }
.cf-form-card .f-step-head p { font-size: 0.88rem; color: var(--t2); }
.cf-info-panel { display: flex; flex-direction: column; gap: 1.4rem; position: sticky; top: 100px; }
.cf-steps-card { padding: 1.8rem 1.7rem; border-radius: var(--r2); }
.cf-steps-card h4 { font-size: 0.95rem; color: var(--t1); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.5rem; }
.cf-steps-card h4 i { color: var(--red2); font-size: 1.1rem; }
.cf-step-row { display: flex; gap: 0.85rem; margin-bottom: 1.1rem; }
.cf-step-row:last-child { margin-bottom: 0; }
.cf-step-num { width: 26px; height: 26px; border-radius: 50%; background: rgba(232,41,28,0.14); border: 1px solid rgba(232,41,28,0.3); color: var(--red2); font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.cf-step-row p { font-size: 0.82rem; color: var(--t2); margin: 0; line-height: 1.5; }
.cf-step-row p strong { color: var(--t1); }

/* ── Dual Offices — Reference image style ───────────────── */
.cf-dual-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.cf-office-card { border-radius: var(--r2); overflow: hidden; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--border); background: var(--g-glass); backdrop-filter: blur(18px); box-shadow: var(--sh-card); transition: transform 0.38s ease, box-shadow 0.38s ease, border-color 0.38s; }
.cf-office-card:hover { transform: translateY(-6px); border-color: var(--border2); box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.1) inset; }
.cf-map { position: relative; overflow: hidden; flex-shrink: 0; }
.cf-map iframe { display: block; width: 100%; height: 200px; filter: saturate(0.55) brightness(0.9); transition: filter 0.4s; }
.cf-office-card:hover .cf-map iframe { filter: saturate(0.85) brightness(1.05); }
.cf-map-label { position: absolute; top: 0.85rem; left: 0.85rem; z-index: 5; background: rgba(7,7,15,0.88); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); border-radius: 50px; padding: 0.35rem 0.9rem; font-size: 0.72rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 0.4rem; }
.cf-map-label i { color: var(--red2); font-size: 0.85rem; }
.cf-office-body { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.cf-office-label-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.cf-office-flag-ico { font-size: 1.4rem; line-height: 1; }
.cf-office-name { font-family: var(--ff-display); font-size: 1.05rem; font-weight: 800; color: var(--t1); margin-bottom: 1rem; }
.cf-office-rows { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.2rem; flex: 1; }
.cf-office-row { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.82rem; color: var(--t2); line-height: 1.45; }
.cf-office-row i { color: var(--red2); font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.cf-office-row a { color: var(--blue2); transition: color 0.2s; text-decoration: none; }
.cf-office-row a:hover { color: var(--t1); }
.cf-office-btns { display: flex; gap: 0.5rem; }
.cf-btn-action { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.62rem 0.5rem; border-radius: 50px; font-size: 0.76rem; font-weight: 700; background: var(--surface); border: 1px solid var(--border); color: var(--t2); text-decoration: none; transition: all 0.25s; }
.cf-btn-action i { font-size: 0.95rem; }
.cf-btn-action:hover { background: var(--surface2); border-color: var(--border2); color: var(--t1); }
.cf-btn-wa { border-color: rgba(37,211,102,0.35) !important; color: #25D366 !important; }
.cf-btn-wa:hover { background: rgba(37,211,102,0.1) !important; }

/* Upload grid inside form */
.cf-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.5rem; }
.cf-drop { padding: 1.1rem 0.8rem; }

/* Journey override */
#contact-journey { padding: 6.5rem 0; background: var(--bg2); }
#contact-journey .journey-steps { grid-template-columns: repeat(5,1fr); }

/* FAQ */
#contact-faq { padding: 7rem 0; background: var(--bg); }
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.9rem; }
.faq-item { border-radius: var(--r2); overflow: hidden; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.6rem; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--ff-display); font-weight: 700; font-size: 0.96rem; color: var(--t1); }
.faq-q i.faq-chev { font-size: 1.2rem; color: var(--red2); transition: transform 0.35s ease; flex-shrink: 0; }
.faq-item.open .faq-q i.faq-chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-a-inner { padding: 0 1.6rem 1.4rem; font-size: 0.88rem; color: var(--t2); line-height: 1.75; }

.section-head .eyebrow.blue { color: var(--blue2); background: rgba(41,121,255,0.1); border-color: rgba(41,121,255,0.28); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .contact-hero-grid { grid-template-columns: 1fr; }
  .contact-hero-visual { display: none; }
  .cm-wow-grid { grid-template-columns: 1fr; }
  .cf-grid { grid-template-columns: 1fr; }
  .cf-info-panel { position: static; }
}
@media (max-width: 900px) {
  #contact-journey .journey-steps { grid-template-columns: repeat(2,1fr); gap: 1.6rem 1rem; }
}
@media (max-width: 860px) {
  .cf-dual-offices { grid-template-columns: 1fr; }
  .cf-upload-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cm-hero-title { font-size: 1.4rem; }
  .cm-trust-div { display: none; }
  .cm-trust-item { font-size: 0.76rem; padding: 0.3rem 0.7rem; }
  .cf-form-card { padding: 1.8rem 1.4rem; }
  .contact-hero-chips { gap: 0.6rem; }
  #contact-hero { padding: 7.5rem 0 3.5rem; }
  #contact-journey .journey-steps { grid-template-columns: 1fr; }
}