/* ============================================
   SUMMIT ELECTRICAL — CONTACT PAGE STYLES
   ============================================ */

.contact-hero {
  /* demo(36) + strip(44) + header(68) = 148px */
  padding: 175px 0 72px;
  background: var(--navy-deeper);
  position: relative; overflow: hidden;
}
.contact-hero::before {
  content:''; position:absolute; inset:0;
  background:url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1400&q=70') center/cover no-repeat;
  opacity:0.12;
}
.contact-hero::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0;
  height:56px; background:var(--gray-100);
  clip-path:polygon(0 100%,100% 100%,100% 0); z-index:2;
}
.contact-hero-inner { position:relative; z-index:1; text-align:center; max-width:660px; margin:0 auto; }

.ch-eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--gold); font-size:12px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; margin-bottom:18px; animation:fadeUp 0.5s ease 0.1s both; }
.ch-eyebrow::before,.ch-eyebrow::after { content:''; display:block; width:18px; height:2px; background:var(--gold); border-radius:2px; }
.ch-headline { font-family:var(--font-display); font-size:clamp(32px,5vw,56px); font-weight:900; line-height:1.1; color:var(--white); margin-bottom:18px; animation:fadeUp 0.5s ease 0.2s both; }
.ch-headline .accent { color:var(--gold); }
.ch-sub   { font-size:17px; line-height:1.7; color:rgba(255,255,255,0.75); margin-bottom:28px; animation:fadeUp 0.5s ease 0.3s both; }
.ch-trust { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; animation:fadeUp 0.5s ease 0.4s both; }
.ch-trust-item { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:var(--radius-full); padding:7px 16px; font-size:13px; font-weight:600; color:rgba(255,255,255,0.9); }

@keyframes fadeUp { from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:translateY(0);} }

.contact-body  { padding:72px 0 88px; background:var(--gray-100); }
.contact-layout { display:grid; grid-template-columns:1fr 460px; gap:44px; align-items:start; }

/* FORM */
.contact-form-wrap { background:var(--white); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-md); border:1px solid rgba(0,0,0,0.06); }
.form-title { font-family:var(--font-display); font-size:30px; font-weight:800; color:var(--navy); margin-bottom:8px; }
.form-sub   { font-size:14px; color:var(--gray-500); margin-bottom:28px; line-height:1.6; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:5px; margin-bottom:18px; }
.form-group label { font-size:13px; font-weight:600; color:var(--gray-700); }
.form-group .required { color:var(--red); margin-left:2px; }
.form-group input,.form-group select,.form-group textarea { padding:11px 14px; border:1.5px solid rgba(0,0,0,0.12); border-radius:var(--radius-md); font-family:var(--font-body); font-size:14px; color:var(--gray-900); background:var(--white); transition:border-color var(--transition),box-shadow var(--transition); width:100%; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(0,61,130,0.1); }
.form-group input::placeholder,.form-group textarea::placeholder { color:var(--gray-300); }
.form-group textarea { resize:vertical; min-height:110px; }
.form-group select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }

.emergency-check { display:flex; align-items:flex-start; gap:10px; padding:13px 14px; background:#FFF0F0; border:1.5px solid rgba(220,20,60,0.2); border-radius:var(--radius-md); cursor:pointer; margin-bottom:22px; transition:all var(--transition); }
.emergency-check:hover { border-color:rgba(220,20,60,0.4); background:#FFE8E8; }
.emergency-check input[type="checkbox"] { width:17px; height:17px; margin-top:2px; flex-shrink:0; accent-color:var(--red); cursor:pointer; }
.emergency-check-label { font-size:13px; font-weight:600; color:var(--red); cursor:pointer; line-height:1.5; }
.emergency-check-label span { display:block; font-size:12px; font-weight:400; color:var(--gray-700); margin-top:2px; }

.form-submit-btn { width:100%; padding:16px; background:var(--navy); color:var(--white); font-family:var(--font-body); font-size:16px; font-weight:700; border:none; border-radius:var(--radius-full); cursor:pointer; box-shadow:0 4px 16px rgba(0,61,130,0.3); transition:all var(--transition); display:flex; align-items:center; justify-content:center; gap:8px; }
.form-submit-btn:hover { background:var(--navy-dark); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,61,130,0.4); }
.form-submit-btn.emergency-mode { background:var(--red); box-shadow:0 4px 16px rgba(220,20,60,0.35); }
.form-submit-btn.emergency-mode:hover { background:var(--red-dark); box-shadow:0 8px 24px rgba(220,20,60,0.5); }
.form-note { font-size:12px; color:var(--gray-500); text-align:center; margin-top:12px; }
.form-note a { color:var(--navy); font-weight:600; }

.form-success { display:none; text-align:center; padding:44px 28px; }
.form-success.show { display:block; }
.form-success-icon { font-size:60px; margin-bottom:18px; animation:bounceIn 0.5s ease; }
@keyframes bounceIn { 0%{transform:scale(0);opacity:0;} 60%{transform:scale(1.1);} 100%{transform:scale(1);opacity:1;} }
.form-success h3 { font-family:var(--font-display); font-size:30px; font-weight:800; color:var(--navy); margin-bottom:10px; }
.form-success p  { font-size:15px; color:var(--gray-700); line-height:1.7; max-width:380px; margin:0 auto 22px; }

/* RIGHT INFO */
.contact-info { display:flex; flex-direction:column; gap:22px; }

.call-card { background:var(--navy); border-radius:var(--radius-lg); padding:28px; text-align:center; position:relative; overflow:hidden; }
.call-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at top right,rgba(255,184,28,0.15),transparent 60%); pointer-events:none; }
.call-card-inner { position:relative; z-index:1; }
.call-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(220,20,60,0.2); border:1px solid rgba(220,20,60,0.4); border-radius:var(--radius-full); padding:5px 12px; font-size:11px; font-weight:700; color:#FF6B8A; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:14px; }
.call-card-title { font-family:var(--font-display); font-size:22px; font-weight:800; color:var(--white); margin-bottom:8px; }
.call-card-sub { font-size:13px; color:rgba(255,255,255,0.65); margin-bottom:20px; line-height:1.6; }
.call-number { display:flex; align-items:center; justify-content:center; gap:8px; background:var(--red); color:var(--white); font-family:var(--font-display); font-size:24px; font-weight:800; padding:14px 24px; border-radius:var(--radius-full); text-decoration:none; box-shadow:0 4px 20px rgba(220,20,60,0.4); transition:all var(--transition); animation:callPulse 3s infinite; letter-spacing:0.02em; margin-bottom:14px; }
.call-number:hover { background:var(--red-dark); transform:translateY(-2px); box-shadow:0 8px 28px rgba(220,20,60,0.55); animation:none; }
@keyframes callPulse { 0%,88%,100%{box-shadow:0 4px 20px rgba(220,20,60,0.4);} 94%{box-shadow:0 8px 32px rgba(220,20,60,0.65);transform:scale(1.02);} }
.call-avail { font-size:12px; color:rgba(255,255,255,0.5); font-style:italic; }

.info-card { background:var(--white); border-radius:var(--radius-lg); padding:26px; border:1px solid rgba(0,0,0,0.06); box-shadow:var(--shadow-sm); }
.info-card-title { font-size:16px; font-weight:700; color:var(--navy); margin-bottom:18px; padding-bottom:10px; border-bottom:2px solid var(--gold); display:inline-block; }
.info-item { display:flex; align-items:flex-start; gap:10px; margin-bottom:16px; }
.info-item:last-child { margin-bottom:0; }
.info-icon  { font-size:18px; flex-shrink:0; width:34px; height:34px; background:var(--gray-100); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; margin-top:1px; }
.info-text strong { display:block; font-size:13px; font-weight:700; color:var(--gray-900); margin-bottom:2px; }
.info-text span   { font-size:13px; color:var(--gray-500); line-height:1.5; display:block; }
.info-text a { color:var(--navy); font-weight:600; font-size:15px; }
.info-text a:hover { color:var(--red); }

.trust-card { background:var(--gray-100); border-radius:var(--radius-lg); padding:22px; border:1px solid rgba(0,0,0,0.06); }
.trust-card-title { font-size:13px; font-weight:700; color:var(--gray-700); margin-bottom:14px; text-transform:uppercase; letter-spacing:0.08em; }
.trust-items { display:flex; flex-direction:column; gap:9px; }
.tc-item { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:500; color:var(--gray-700); }
.tc-icon { width:26px; height:26px; background:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; box-shadow:var(--shadow-sm); flex-shrink:0; }

.contact-bottom-cta { padding:64px 0; background:var(--navy-deeper); text-align:center; position:relative; overflow:hidden; }
.contact-bottom-cta::before { content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(-45deg,transparent,transparent 40px,rgba(255,255,255,0.015) 40px,rgba(255,255,255,0.015) 41px); pointer-events:none; }
.cbc-inner  { position:relative; z-index:1; }
.cbc-title  { font-family:var(--font-display); font-size:clamp(26px,4vw,44px); font-weight:900; color:var(--white); margin-bottom:14px; }
.cbc-sub    { font-size:16px; color:rgba(255,255,255,0.7); margin:0 auto 28px; max-width:480px; }
.cbc-buttons { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

@media (max-width:1024px) { .contact-layout { grid-template-columns:1fr; } }
@media (max-width:768px)  { .contact-hero { padding:148px 0 52px; } .contact-form-wrap { padding:26px 18px; } .form-row { grid-template-columns:1fr; } .ch-trust-item { font-size:12px; padding:6px 12px; } }