/* Contact Page Enhancements */
:root{
  --slate-900:#0f172a; --slate-700:#374151; --slate-600:#475569; --slate-100:#f1f5f9;
  --brand:#10b981; --brand-dark:#059669; --primary:#3b82f6; --warning:#f59e0b;
}

/**************** Hero ****************/
.hero-section{
  isolation:isolate;
}
.hero-section .badge-text{letter-spacing:.06em}
.hero-section .service-icon{box-shadow:0 10px 30px rgba(0,0,0,.15)}
.hero-section h1,.hero-section h2{text-shadow:0 2px 10px rgba(0,0,0,.25)}
.hero-section p{text-shadow:0 1px 6px rgba(0,0,0,.2)}

/**************** CTA Band ****************/
.contact-cta-band{position:relative; background:linear-gradient(135deg,#ecfdf5,#e0f2fe); padding:18px 0}
.contact-cta-band .cta-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.contact-cta-band .cta-text{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.contact-cta-band .cta-badge{background:linear-gradient(135deg,#10b981,#059669); color:#fff; font-weight:800; letter-spacing:.06em}
.contact-cta-band .cta-title{margin:0; font-weight:800; color:var(--slate-900); font-size:clamp(1.05rem,2.2vw,1.35rem)}
.contact-cta-band .cta-subtitle{margin:0; color:var(--slate-600); font-size:.95rem}
.contact-cta-band .cta-actions{display:flex; gap:10px; flex-wrap:wrap}
.contact-cta-band .cta-btn{min-height:42px; border-width:2px}
.contact-cta-band .cta-divider{position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,#d1fae5,transparent)}

@media (max-width: 768px){
  .contact-cta-band .cta-inner{flex-direction:column; align-items:flex-start}
}

/**************** Cards ****************/
.contact-card{will-change:transform, box-shadow}
.contact-card:focus-within{outline:3px solid rgba(59,130,246,.35); outline-offset:2px}
.contact-card .btn{min-height:40px}
.contact-card{transition:transform .2s ease, box-shadow .2s ease}
.contact-card:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.12)}
/* Section titles */
.section-title{position:relative}
.section-title::after{content:""; position:absolute; left:0; bottom:-8px; width:68px; height:4px; border-radius:999px; background:linear-gradient(90deg,#10b981,#3b82f6)}

/**************** Details ****************/
.contact-item{transition:box-shadow .2s ease, transform .2s ease}
.contact-item:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(2,6,23,.08)}

/* Cards section spacing tweak */
.contact-cards-section .contact-card{border-radius:14px}
.contact-details-section{scroll-margin-top:90px}

/**************** Form ****************/
.contact-form{position:relative}
.contact-form .form-control{min-height:44px}
.contact-form .form-control::placeholder{color:#94a3b8}
.contact-form .form-control:focus{border-color:var(--primary) !important; box-shadow:0 0 0 .2rem rgba(59,130,246,.25) !important}
.contact-form textarea{min-height:110px}
.contact-form .btn{transition:transform .15s ease, box-shadow .15s ease}
.contact-form .btn:focus-visible{outline:3px solid rgba(16,185,129,.35); outline-offset:2px}
.contact-form .btn:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(16,185,129,.2)}

/* HTML5 validation feedback */
.contact-form .form-control:invalid{border-color:#ef4444}
.contact-form .form-control:valid{border-color:#22c55e}
/* Custom error styling */
.contact-form .form-control.is-invalid{border-color:#ef4444 !important; box-shadow:0 0 0 .2rem rgba(239,68,68,.15) !important}
.error-text{color:#ef4444; font-size:.85rem; margin-top:.25rem}
.visually-hidden{position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important}

/**************** Map & Social ****************/
.social-link{display:flex; align-items:center; gap:15px; padding:18px; border-radius:15px; color:#fff; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease}
.social-link:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.15)}
.social-link--ig{background:linear-gradient(135deg,#f56040,#e1306c)}
.social-link--wa{background:#25d366}
.social-link > div:last-child div:first-child{letter-spacing:.2px}

/* Map card polish */
.contact-map-card{border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.08); border:1px solid #e5e7eb}
.contact-map-card .map-cta{min-height:380px; background:linear-gradient(135deg,#e0f2fe 0%, #ecfeff 35%, #f0fdf4 100%)}

/**************** Accessibility ****************/
:focus-visible{outline:3px solid rgba(59,130,246,.35); outline-offset:2px}

/* Scoped button hovers inside contact sections to avoid global overrides */
.contact-cards-section .btn-success:hover{filter:brightness(.98); box-shadow:0 10px 20px rgba(16,185,129,.22)}
.contact-details-section .btn-primary:hover{filter:brightness(.98); box-shadow:0 10px 20px rgba(59,130,246,.22)}
.contact-details-section .btn-success:hover{filter:brightness(.98); box-shadow:0 10px 20px rgba(16,185,129,.22)}

/* Contact list items polish */
.contact-details .contact-item{background:#f8fafc; border-left-width:4px}
.contact-details .contact-item i{filter:drop-shadow(0 4px 10px rgba(0,0,0,.08))}

/* Responsive tweaks */
@media (max-width:576px){
  .contact-cards-section .contact-card{padding:14px}
}

/**************** Reduced motion ****************/
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}