.cc-contact {
    --cc-navy: #0F172A;
    --cc-blue: #007EAD;        /* solid trust blue */
    --cc-blue-dark: #00668C;
    --cc-cyan: #007FAE;        /* light gradient stop */
    --cc-orange: #BC5B20;      /* conversion orange */
    --cc-blue-light: #009CD6;   /* AA on navy only */
    --cc-cyan-light: #00AEEF;   /* AA on navy only */
    --cc-orange-light: #E26E26; /* AA on navy only */
    --cc-orange-dark: #cc5a1f;
    --cc-green: #16A34A;
    --cc-slate: #64748B;
    --cc-ink: #334155;
    --cc-line: #E2E8F0;
    --cc-bg: #F8FAFC;
    --cc-wa: #188741;          /* whatsapp green */
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--cc-navy);
}
.cc-contact *, .cc-contact *::before, .cc-contact *::after { box-sizing: border-box; }
.cc-contact section { scroll-margin-top: 90px; }

/* Breadcrumbs */
.contact-breadcrumbs { font-size: 11px; font-weight: 700; color: var(--cc-slate); letter-spacing: 0.6px; margin-bottom: 24px; display: inline-flex; align-items: center; gap: 8px; }
.contact-breadcrumbs a { color: var(--cc-slate); text-decoration: none; transition: color 0.2s ease; }
.contact-breadcrumbs a:hover { color: var(--cc-blue); }
.contact-breadcrumbs .sep { color: #CBD5E1; }
.contact-breadcrumbs [aria-current="page"] { color: var(--cc-blue); font-weight: 800; }

/* ============ HERO SECTION ============ */
.contact-hero { background: linear-gradient(180deg, #FFFFFF 0%, var(--cc-bg) 100%); padding: 56px 24px 76px 24px; border-bottom: 1px solid var(--cc-line); }
.contact-hero-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: flex-start; }
.contact-info-col { padding-top: 10px; }
.contact-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cc-blue); margin-bottom: 14px; }
.contact-eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--cc-blue); border-radius: 2px; }
.contact-hero h1 { font-size: clamp(34px, 4vw + 12px, 48px); font-weight: 800; color: var(--cc-navy); line-height: 1.1; letter-spacing: -1.2px; margin: 0 0 16px 0; }
.contact-hero h1 span { color: var(--cc-blue); }
.contact-hero-desc { font-family: 'DM Sans', sans-serif; font-size: clamp(15px, 0.4vw + 14px, 17px); line-height: 1.6; color: var(--cc-slate); margin: 0 0 40px 0; }

/* Info details */
.info-details-list { display: flex; flex-direction: column; gap: 24px; margin-bottom: 40px; }
.info-detail-item { display: flex; align-items: flex-start; gap: 16px; }
.info-detail-icon { width: 44px; height: 44px; background: #FFFFFF; border: 1px solid var(--cc-line); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--cc-blue); flex-shrink: 0; box-shadow: 0 4px 10px rgba(15,23,42,0.02); }
.info-detail-icon svg { width: 20px; height: 20px; }
.info-detail-content h2 { font-size: 14px; font-weight: 800; color: var(--cc-slate); text-transform: uppercase; letter-spacing: 0.8px; margin: 0 0 4px 0; }
.info-detail-content p { font-size: 16px; font-weight: 700; color: var(--cc-navy); margin: 0; line-height: 1.4; }
.info-detail-content a { color: var(--cc-navy); text-decoration: none; transition: color 0.2s ease; }
.info-detail-content a:hover { color: var(--cc-blue); }

/* Form wrapper */
.contact-form-card { background: #FFFFFF; border: 1px solid var(--cc-line); border-radius: 24px; padding: 36px; box-shadow: 0 18px 40px rgba(15,23,42,0.06); }
.contact-form-head { margin-bottom: 24px; }
.contact-form-head h2 { font-size: 22px; font-weight: 800; color: var(--cc-navy); margin: 0 0 6px 0; }
.contact-form-head p { font-family: 'DM Sans', sans-serif; font-size: 14.5px; color: var(--cc-slate); margin: 0; }
.contact-form-divider { height: 1px; background: rgba(15,23,42,0.08); margin-bottom: 28px; }

/* Fluent Forms styling override */
.contact-form-card .fluentform, .contact-form-card .frm-fluent-form { margin: 0 !important; }
.contact-form-card .ff-el-group { margin-bottom: 18px !important; }
.contact-form-card label, .contact-form-card .ff-el-input--label label { display: block !important; font-size: 13px !important; font-weight: 700 !important; color: var(--cc-ink) !important; margin-bottom: 6px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; }
.contact-form-card input.ff-el-form-control, .contact-form-card select.ff-el-form-control, .contact-form-card textarea.ff-el-form-control { width: 100% !important; padding: 12px 16px !important; font-size: 14.5px !important; color: var(--cc-navy) !important; background: #FFFFFF !important; border: 1px solid #CBD5E1 !important; border-radius: 8px !important; font-family: 'DM Sans', sans-serif !important; box-shadow: none !important; transition: all 0.2s ease !important; }
.contact-form-card input.ff-el-form-control { height: 48px !important; }
.contact-form-card textarea.ff-el-form-control { height: 110px !important; resize: vertical !important; }
.contact-form-card .ff-el-form-control:focus { border-color: var(--cc-blue) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(0,156,214,0.12) !important; }
.contact-form-card select.ff-el-form-control { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 16px !important; padding-right: 40px !important; }
.contact-form-card button.ff-btn-submit { width: 100% !important; height: 52px !important; background: var(--cc-orange) !important; color: #FFFFFF !important; border: 1px solid var(--cc-orange) !important; border-radius: 10px !important; font-size: 16px !important; font-weight: 800 !important; cursor: pointer !important; font-family: 'Plus Jakarta Sans', sans-serif !important; box-shadow: 0 8px 20px rgba(226,110,38,0.28) !important; transition: all 0.2s ease !important; }
.contact-form-card button.ff-btn-submit:hover { background: var(--cc-orange-dark) !important; border-color: var(--cc-orange-dark) !important; transform: translateY(-2px) !important; box-shadow: 0 12px 26px rgba(226,110,38,0.4) !important; }

@media (max-width: 991px) {
    .contact-hero { padding: 44px 20px 56px 20px; }
    .contact-hero-container { grid-template-columns: 1fr; gap: 40px; }
    .contact-form-card { padding: 28px 24px; }
}

/* ============ SUPPORT CHANNELS GRID ============ */
.contact-channels { padding: 76px 24px; background: #FFFFFF; border-bottom: 1px solid var(--cc-line); }
.contact-channels-inner { max-width: 1200px; margin: 0 auto; }
.channels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.channel-card { background: var(--cc-bg); border: 1px solid var(--cc-line); border-radius: 16px; padding: 36px 30px; text-align: center; text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; transition: all 0.3s cubic-bezier(0.16,1,0.3,1); }
.channel-card:hover { background: #FFFFFF; transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15,23,42,0.06); }
.channel-icon-wrap { width: 56px; height: 56px; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--cc-line); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: all 0.3s ease; }
.channel-card:hover .channel-icon-wrap { transform: scale(1.08); }
.channel-card h3 { font-size: 18px; font-weight: 800; color: var(--cc-navy); margin: 0 0 8px 0; }
.channel-card p { font-family: 'DM Sans', sans-serif; font-size: 13.5px; line-height: 1.5; color: var(--cc-slate); margin: 0 0 20px 0; max-width: 250px; }
.channel-btn { font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; transition: color 0.2s ease; }

/* Custom channel colors */
.channel-emergency .channel-icon-wrap { color: var(--cc-orange); }
.channel-emergency .channel-btn { color: var(--cc-orange); }
.channel-emergency:hover { border-color: rgba(226,110,38,0.3); }
.channel-whatsapp .channel-icon-wrap { color: var(--cc-wa); }
.channel-whatsapp .channel-btn { color: var(--cc-wa); }
.channel-whatsapp:hover { border-color: rgba(37,211,102,0.3); }
.channel-corporate .channel-icon-wrap { color: var(--cc-blue); }
.channel-corporate .channel-btn { color: var(--cc-blue); }
.channel-corporate:hover { border-color: rgba(0,156,214,0.3); }

@media (max-width: 991px) {
    .channels-grid { grid-template-columns: 1fr; gap: 16px; }
    .channel-card { padding: 28px 24px; }
}