/* ================================================
   Me2Leads — contact page styles
   Brand: navy #0B3C5D, gold #D4AF37, Plus Jakarta Sans
   ================================================ */

/* ───────── HEADER ───────── */
.contact-hero {
padding: 160px 0 60px;
background:
    radial-gradient(ellipse 60% 50% at 90% 0%, rgba(212, 175, 55, 0.14), transparent 60%),
    radial-gradient(ellipse 60% 60% at 0% 30%, rgba(11, 60, 93, 0.07), transparent 60%),
    var(--bg);
position: relative;
overflow: hidden;
}
.contact-hero-inner {
max-width: 920px;
margin: 0 auto;
text-align: center;
}
.contact-hero h1 {
font-size: clamp(40px, 6vw, 72px);
line-height: 1.02;
margin-bottom: 24px;
}
.contact-hero h1 .accent {
background: linear-gradient(120deg, var(--accent), var(--accent-light));
-webkit-background-clip: text; background-clip: text; color: transparent;
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 300;
}
.contact-hero p.lead {
max-width: 600px;
margin: 0 auto;
font-size: 19px;
}
.contact-hero .eyebrow {
margin-bottom: 24px;
justify-content: center;
}
.contact-hero .eyebrow::before, .contact-hero .eyebrow::after {
content: '';
width: 24px;
height: 1.5px;
background: currentColor;
}

/* ───────── CONTACT GRID ───────── */
.contact-section {
padding: 60px 0 120px;
background: var(--bg);
}
.contact-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 40px;
align-items: stretch;
}
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; } }

/* form card */
.form-card {
background: white;
border-radius: var(--radius-lg);
padding: 48px;
box-shadow: var(--shadow);
border: 1px solid var(--line);
}
@media (max-width: 600px) { .form-card { padding: 32px 24px; } }

.form-card h2 {
font-size: 32px;
margin-bottom: 8px;
letter-spacing: -0.025em;
}
.form-card .form-sub {
color: var(--ink-mid);
font-size: 15px;
margin-bottom: 36px;
}

/* topic chips */
.topic-chips {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.topic-chip {
padding: 9px 16px;
border-radius: 100px;
background: var(--bg-tint);
border: 1.5px solid transparent;
font-size: 13px;
font-weight: 600;
color: var(--ink-mid);
cursor: pointer;
transition: all .2s;
user-select: none;
}
.topic-chip:hover { background: white; border-color: var(--line); }
.topic-chip.active {
background: var(--primary);
color: white;
border-color: var(--primary);
}

.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 18px;
}
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--ink-soft);
}
.field input, .field textarea, .field select {
padding: 14px 16px;
border: 1.5px solid var(--line);
border-radius: 12px;
background: var(--bg);
font-family: inherit;
font-size: 15px;
color: var(--ink);
transition: border-color .2s, background .2s, box-shadow .2s;
width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
outline: none;
border-color: var(--accent);
background: white;
box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.16);
}
.field textarea {
min-height: 130px;
resize: vertical;
line-height: 1.6;
}

.checkbox-row {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 8px 0 28px;
font-size: 13px;
color: var(--ink-mid);
line-height: 1.5;
}
.checkbox-row input { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.checkbox-row a { color: var(--primary); font-weight: 700; }

.form-submit {
width: 100%;
padding: 16px 26px;
font-size: 16px;
}

/* sent state */
.form-sent {
display: none;
text-align: center;
padding: 40px 20px;
}
.form-sent.show { display: block; }
.form-card.sent .form-active { display: none; }
.sent-icon {
width: 72px; height: 72px;
border-radius: 50%;
background: rgba(39, 174, 96, 0.14);
color: var(--success);
display: grid; place-items: center;
margin: 0 auto 24px;
animation: pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
.form-sent h3 { margin-bottom: 12px; font-size: 26px; }
.form-sent p { max-width: 360px; margin: 0 auto; }

/* info side */
.info-side {
display: flex;
flex-direction: column;
gap: 18px;
}
.info-card {
background: white;
border-radius: var(--radius-lg);
padding: 32px;
border: 1px solid var(--line);
transition: transform .3s, box-shadow .3s;
}
.info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.info-card.dark {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
border: 0;
position: relative;
overflow: hidden;
}
.info-card.dark::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(212, 175, 55, 0.25), transparent 70%);
border-radius: 50%;
}
.info-card .info-icon {
width: 44px; height: 44px;
border-radius: 12px;
background: rgba(212, 175, 55, 0.14);
color: var(--accent);
display: grid; place-items: center;
margin-bottom: 18px;
}
.info-card.dark .info-icon {
background: rgba(212, 175, 55, 0.22);
}
.info-card .info-icon svg { width: 22px; height: 22px; }
.info-card h4 {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--ink-soft);
margin-bottom: 10px;
}
.info-card.dark h4 { color: var(--accent); }
.info-card .info-value {
font-size: 18px;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.015em;
margin-bottom: 4px;
word-break: break-word;
}
.info-card.dark .info-value { color: white; }
.info-card .info-meta {
font-size: 13px;
color: var(--ink-mid);
line-height: 1.6;
position: relative;
}
.info-card.dark .info-meta { color: rgba(255,255,255,0.7); }

.info-card .info-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 14px;
font-size: 13px;
font-weight: 700;
color: var(--primary);
position: relative;
}
.info-card.dark .info-link { color: var(--accent-light); }
.info-card .info-link svg { width: 12px; height: 12px; transition: transform .2s; }
.info-card .info-link:hover svg { transform: translateX(4px); }

/* hours visual on dark card */
.hours-rows {
display: grid; gap: 8px;
margin-top: 4px;
position: relative;
}
.hours-row {
display: flex; justify-content: space-between;
font-size: 13px;
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.hours-row:last-child { border: 0; }
.hours-row .day { color: rgba(255,255,255,0.6); }
.hours-row .time { color: white; font-weight: 600; }
.hours-row.now .day, .hours-row.now .time { color: var(--accent-light); }
.hours-row.now .time::after {
content: '';
display: inline-block;
width: 6px; height: 6px;
background: var(--success);
border-radius: 50%;
margin-left: 8px;
box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.3);
}

/* ───────── SUPPORT QUICK LINKS ───────── */
.quick-links {
background: var(--bg-tint);
padding: 100px 0;
}
.quick-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 50px;
}
@media (max-width: 880px) { .quick-grid { grid-template-columns: 1fr; } }
.quick-card {
background: white;
border-radius: var(--radius-lg);
padding: 36px;
border: 1px solid var(--line);
transition: transform .3s, box-shadow .3s;
display: flex;
flex-direction: column;
gap: 14px;
}
.quick-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.quick-card .quick-icon {
width: 52px; height: 52px;
border-radius: 14px;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
color: var(--primary-dark);
display: grid; place-items: center;
box-shadow: 0 10px 22px rgba(212, 175, 55, 0.32);
}
.quick-card .quick-icon svg { width: 24px; height: 24px; }
.quick-card h3 { font-size: 22px; }
.quick-card p { font-size: 14px; line-height: 1.6; flex: 1; }
.quick-card .quick-link {
display: inline-flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 700; color: var(--primary);
}
.quick-card .quick-link svg { width: 12px; height: 12px; transition: transform .2s; }
.quick-card:hover .quick-link svg { transform: translateX(4px); }

/* ───────── DOWNLOAD STRIP ───────── */
.strip {
padding: 80px 0;
background: var(--primary-deep);
color: white;
text-align: center;
position: relative;
overflow: hidden;
}
.strip::before {
content: '';
position: absolute;
bottom: -150px; left: 50%; transform: translateX(-50%);
width: 700px; height: 400px;
background: radial-gradient(ellipse, rgba(212, 175, 55, 0.25), transparent 65%);
pointer-events: none;
}
.strip h2 { color: white; font-size: clamp(28px, 4vw, 42px); margin-bottom: 14px; }
.strip h2 .accent {
background: linear-gradient(120deg, var(--accent), var(--accent-light));
-webkit-background-clip: text; background-clip: text; color: transparent;
font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
}
.strip p { color: rgba(255,255,255,0.7); font-size: 16px; margin-bottom: 32px; }
.strip .store-row { justify-content: center; display: flex; gap: 14px; flex-wrap: wrap; }
.store-btn {
display: inline-flex; align-items: center; gap: 12px;
padding: 12px 22px;
border-radius: 14px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.18);
color: white;
font-weight: 600;
transition: background .2s, transform .2s;
backdrop-filter: blur(12px);
text-align: left;
}
.store-btn:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); }
.store-btn img { width: 28px; height: 28px; }
.store-btn .store-text { display: flex; flex-direction: column; line-height: 1.1; }
.store-btn .store-text small { font-size: 10px; opacity: 0.7; letter-spacing: 1px; text-transform: uppercase; }
.store-btn .store-text strong { font-size: 16px; font-weight: 700; }