/* Abele AI Improved Mobile CSS - Enhanced responsive design */
:root {
  --bg:#fff;
  --ink:#0f172a;
  --muted:#475467;
  --soft:#f6f8ff;
  --border:#e7ebf5;
  --blue:#1541d1;
  --blue-dark:#0f2f96;
  --shadow:0 1px 2px rgba(16,24,40,.04);
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;line-height:1.55}
img{max-width:100%;display:block}
.container{max-width:1160px;margin:0 auto;padding:0 22px}
.section{padding:60px 0}
.center{text-align:center}

/* Header - Improved mobile navigation */
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:100}
.header .inner{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.logo img{height:32px;width:auto}
.nav{display:flex;gap:24px;transition:all 0.3s ease}
.nav a{color:var(--muted);padding:8px 4px;border-bottom:2px solid transparent;text-decoration:none;
  transition:all 0.2s ease}
.nav a:hover{color:var(--ink);border-bottom-color:var(--blue-dark)}
.nav a.active{color:var(--ink);border-bottom:2px solid var(--blue-dark)}
.menu-btn{display:none;background:transparent;border:0;color:var(--ink);cursor:pointer;
  padding:8px;border-radius:6px;transition:background 0.2s ease}
.menu-btn:hover{background:var(--soft)}
.menu-btn svg{width:24px;height:24px}

/* Hero Section */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding:56px 0}
.hero-media{text-align:center}
.hero-copy h1{font-size:clamp(32px, 5vw, 52px);line-height:1.12;margin:0 0 16px;font-weight:800;
  letter-spacing:-.02em}
.hero-copy .lead{color:var(--muted);max-width:640px;margin:0 0 24px;font-size:clamp(16px, 2vw, 18px)}
.btn{display:inline-block;background:var(--blue);color:#fff;border-radius:12px;
  padding:clamp(10px, 2vw, 12px) clamp(16px, 3vw, 20px);font-weight:650;box-shadow:var(--shadow);
  transition:.15s ease;text-decoration:none;border:none;cursor:pointer;font-size:clamp(14px, 2vw, 16px)}
.btn:hover{background:var(--blue-dark);transform:translateY(-1px)}
.btn.ghost{background:transparent;border:2px solid #fff;color:#fff}
.btn.ghost:hover{background:#fff;color:var(--blue)}

/* Sections */
.section-title{font-size:clamp(24px, 4vw, 28px);margin:0 0 32px;font-weight:700}

/* Capabilities Grid */
.cap-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:24px}
.cap-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;
  box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.cap-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,24,40,.08)}
.cap-ic{width:52px;height:52px;border-radius:14px;background:#eef3ff;color:#1b57ff;
  display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.cap-card h3{font-size:clamp(16px, 3vw, 18px);line-height:1.3;margin:0 0 12px;font-weight:600}
.cap-card p{color:var(--muted);margin:0;font-size:clamp(14px, 2vw, 16px)}

/* Testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:24px}
.testi{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;
  box-shadow:var(--shadow)}
.testi .quote{color:#334155;font-style:italic;margin:0 0 20px;font-size:clamp(14px, 2vw, 16px)}
.testi .who{display:flex;align-items:center;gap:12px}
.testi .who img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.testi .who div{font-size:clamp(13px, 2vw, 14px)}
.testi .who span{color:#667085;font-size:clamp(12px, 1.5vw, 13px)}

/* CTA Band */
.cta-band{background:var(--blue);color:#fff;padding:clamp(40px, 8vw, 60px) 0;
  margin-top:40px;border-radius:12px}
.cta-band .container{max-width:980px;text-align:center}
.cta-title{font-size:clamp(24px, 4vw, 28px);margin:0 0 12px;font-weight:700}
.cta-sub{opacity:.95;margin:0 0 24px;font-size:clamp(14px, 2vw, 16px);max-width:600px;
  margin-left:auto;margin-right:auto}

/* Footer */
.footer{border-top:1px solid var(--border);padding:24px 0;margin-top:40px}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.brandline{font-weight:600}
.brandline span{opacity:.85;margin-left:8px;font-weight:400}
.social{display:flex;gap:12px}
.social a{width:40px;height:40px;border-radius:50%;background:#f3f4f7;
  display:flex;align-items:center;justify-content:center;transition:transform 0.2s ease}
.social a:hover{transform:scale(1.1)}

/* Contact Form - Fixed borders and styling */
.contact{padding:clamp(40px, 8vw, 60px) 0}
.contact .page-title, 
main.contact h1{text-align:center;margin-bottom:32px;font-size:clamp(28px, 5vw, 36px);
  font-weight:700}

/* Target both possible form structures */
.contact-form,
main.contact form{max-width:720px;margin:0 auto;display:grid;gap:20px}

.contact-form .form-row,
.contact-form .field,
main.contact .form-row{display:flex;flex-direction:column;gap:8px}

.contact-form .form-row.full{grid-column:1/-1}

/* Labels - multiple selectors to ensure coverage */
.contact-form label,
main.contact label{font-weight:600;margin-bottom:8px;font-size:clamp(14px, 2vw, 15px);
  color:var(--ink);display:block}

/* Input fields - comprehensive selectors */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
main.contact input[type="text"],
main.contact input[type="email"],
main.contact input[type="tel"],
main.contact textarea,
input#first_name,
input#last_name,
input#email,
input#phone,
input#company,
textarea#message{
  padding:clamp(12px, 2vw, 14px) !important;
  border:2px solid #d1d5db !important;
  border-radius:8px !important;
  font-size:clamp(14px, 2vw, 15px) !important;
  transition:all 0.2s ease !important;
  background:#fff !important;
  color:var(--ink) !important;
  font-family:inherit !important;
  width:100% !important;
  box-sizing:border-box !important;
}

/* Focus and hover states */
.contact-form input:focus,
.contact-form textarea:focus,
main.contact input:focus,
main.contact textarea:focus,
input:focus,
textarea:focus{
  outline:none !important;
  border-color:var(--blue) !important;
  box-shadow:0 0 0 3px rgba(21,65,209,0.1) !important;
}

.contact-form input:hover,
.contact-form textarea:hover,
main.contact input:hover,
main.contact textarea:hover{
  border-color:#9ca3af !important;
}

.contact-form textarea,
main.contact textarea,
textarea#message{resize:vertical !important;min-height:120px !important}

.contact-form .required,
main.contact .required{color:#ef4444;margin-left:2px}

.contact-form .form-actions,
main.contact .form-actions{text-align:center;margin-top:16px}

/* RESPONSIVE BREAKPOINTS */

/* Large tablets and small desktops */
@media (max-width: 1024px) {
  .container{padding:0 20px}
  .hero{grid-template-columns:1fr;gap:32px;text-align:center}
  .hero-media{order:-1}
  .cap-grid{grid-template-columns:repeat(2, 1fr)}
  .section{padding:50px 0}
}

/* Tablets */
@media (max-width: 768px) {
  .container{padding:0 18px}
  .header .inner{padding:12px 0}
  .hero{padding:40px 0;gap:24px}
  .cap-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}
  .testi-grid{grid-template-columns:1fr}
  .section{padding:40px 0}
  
  /* Mobile Navigation */
  .nav{position:absolute;right:18px;top:64px;background:#fff;border:1px solid var(--border);
    border-radius:12px;padding:12px 0;display:none;flex-direction:column;min-width:200px;
    box-shadow:0 8px 32px rgba(16,24,40,0.12);z-index:200}
  .nav.open{display:flex}
  .nav a{padding:12px 20px;border-bottom:none;border-radius:0}
  .nav a:hover{background:var(--soft)}
  .menu-btn{display:block}
  
  /* Footer becomes stacked */
  .footer-row{flex-direction:column;text-align:center;gap:16px}
}

/* Large phones */
@media (max-width: 640px) {
  .container{padding:0 16px}
  .hero{padding:32px 0}
  .hero-copy h1{text-align:center}
  .section{padding:32px 0}
  .cap-card, .testi{padding:20px}
  .cta-band{margin:32px 0 0}
  
  /* Improve button sizing on mobile */
  .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
}

/* Small phones */
@media (max-width: 480px) {
  .container{padding:0 14px}
  .header .inner{padding:10px 0}
  .nav{right:14px;min-width:180px}
  .hero{padding:24px 0}
  .section{padding:24px 0}
  .cap-ic{width:44px;height:44px;font-size:20px}
  .cap-card, .testi{padding:16px}
  .testi .who img{width:40px;height:40px}
  
  /* Contact form improvements */
  .contact-form{gap:16px}
  .contact-form input, .contact-form textarea{padding:12px}
  
  /* Ensure touch targets are at least 44px */
  .social a{width:44px;height:44px}
  .menu-btn{min-width:44px;min-height:44px}
}

/* Very small phones */
@media (max-width: 360px) {
  .container{padding:0 12px}
  .cap-grid{gap:16px}
  .testi-grid{gap:16px}
  .hero-copy h1{line-height:1.2}
}

/* Landscape phones */
@media (max-width: 812px) and (orientation: landscape) {
  .hero{padding:20px 0}
  .section{padding:24px 0}
  .header{position:relative} /* Avoid taking up too much vertical space */
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .logo img{image-rendering:-webkit-optimize-contrast}
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .cap-card, .btn, .nav a, .menu-btn, .social a {
    transition:none;
  }
  .cap-card:hover{transform:none}
}