/* ============= Skip link (Accessibility) ============= */
.skip-link {
  position: absolute;
  top: -100px;
  right: 1rem;
  z-index: 10001;
  padding: 0.75rem 1.25rem;
  background: var(--accent, #ed8936);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
  outline: 3px solid #1a365d;
  outline-offset: 2px;
}

/* ============= Form validation (shared error display) ============= */
.field-error {
  display: block;
  font-size: 0.85rem;
  color: #c53030;
  margin-top: 0.35rem;
}
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #c53030;
  box-shadow: 0 0 0 1px #c53030;
}

/* ============= Locale: English numerals, Gregorian dates, USD ============= */
.stat-number, .currency, .date-display, .ltr-num,
[data-count], input[type="number"], .summary-value, .metric-value {
  direction: ltr;
  unicode-bidi: embed;
  font-variant-numeric: normal;
}
.currency::before { content: none; }

/* Global Layout (Header + Footer + Shared Elements)
   -------------------------------------------------- */
:root {
  --layout-transition: 0.3s ease;
  --accent: #ed8936;
  --accent-gradient: linear-gradient(135deg,#ed8936,#f6ad55);
  --primary-dark: #1a365d;
  --glass-bg: rgba(15,25,38,0.85);
}

/* Header (Unified Homepage Style) */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,0.95); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid rgba(0,0,0,0.06); transition:var(--layout-transition); padding:1rem 0; }
.navbar.scrolled { background:rgba(255,255,255,0.98); box-shadow:0 4px 18px -4px rgba(0,0,0,.12); padding:.75rem 0; }
.nav-container { display:flex; justify-content:space-between; align-items:center; }
.navbar .logo { font-family:'Tajawal',sans-serif; display:flex; align-items:center; gap:.75rem; font-weight:800; font-size:1.6rem; color:#1a365d; text-decoration:none; transition:var(--layout-transition); }
.navbar .logo:hover { color:#ed8936; }
.logo-accent { color:#ed8936; }
.logo-icon { width:40px; height:40px; background:linear-gradient(135deg,#1a365d,#2d476d); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; border-radius:12px; font-size:1.1rem; }
.nav-links { display:flex; list-style:none; gap:2rem; align-items:center; }
.nav-links a { position:relative; text-decoration:none; color:#1a365d; font-weight:600; padding:.5rem 0; transition:var(--layout-transition); }
.nav-links a::after { content:""; position:absolute; bottom:0; right:0; width:0; height:2px; background:#ed8936; transition:var(--layout-transition); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a:hover, .nav-links a.active { color:#ed8936; }

.cta-btn { background:linear-gradient(135deg,#ed8936,#f6ad55); color:#fff; padding:.75rem 1.2rem; border-radius:14px; font-weight:600; display:flex; align-items:center; gap:.55rem; text-decoration:none; box-shadow:0 6px 18px -4px rgba(237,137,54,.4); transition:var(--layout-transition); }
.cta-btn:hover { transform:translateY(-3px); box-shadow:0 10px 26px -6px rgba(237,137,54,.55); }
/* Footer */
.footer { background:#1a2734; color:#fff; padding:3.5rem 0 1.2rem; position:relative; }
.footer::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%,rgba(255,255,255,0.05),transparent 60%); pointer-events:none; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2rem; margin-bottom:2.2rem; }
.footer-section h4 { margin:0 0 1rem; font-size:1.1rem; position:relative; padding-bottom:.5rem; font-weight:600; }
.footer-section h4::after { content:""; position:absolute; bottom:0; right:0; width:46px; height:2px; background:#ed8936; border-radius:2px; }
.footer-section p { line-height:1.7; font-size:.92rem; opacity:.9; }
.footer-links { list-style:none; margin:0; padding:0; }
.footer-links li { margin-bottom:.55rem; font-size:.9rem; display:flex; align-items:center; gap:.5rem; }
.footer-links a { color:rgba(255,255,255,.8); text-decoration:none; transition:var(--layout-transition); }
.footer-links a:hover { color:#ed8936; transform:translateX(-4px); }
.footer-links i { color:#ed8936; font-size:.95rem; }
.social-links { display:flex; gap:.8rem; margin-top:1rem; }
.social-links a { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,0.1); color:#fff; transition:var(--layout-transition); text-decoration:none; }
.social-links a:hover { background:#ed8936; transform:translateY(-3px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.12); padding-top:1rem; text-align:center; font-size:.8rem; opacity:.9; }
.footer-bottom p { margin:.75rem 0 0; color:rgba(255,255,255,.68); }
.footer-bottom .legal-footer-links { display:inline-flex; gap:.55rem; flex-wrap:wrap; justify-content:center; margin-bottom:.15rem; }
.footer-bottom .legal-footer-links a { color:rgba(255,255,255,.86); text-decoration:none; padding:.42rem .85rem; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.045); transition:var(--layout-transition); }
.footer-bottom .legal-footer-links a:hover { color:#f6ad55; border-color:rgba(246,173,85,.5); background:rgba(246,173,85,.1); }

/* ============= Shared CTA Buttons ============= */
.cta-primary, .cta-secondary, .action-btn, .action-btn-small, .contact-action-btn { position:relative; display:inline-flex; align-items:center; gap:.55rem; font-weight:600; text-decoration:none; cursor:pointer; transition:var(--layout-transition); border-radius:14px; }
.cta-primary { background:var(--accent-gradient); color:#fff; padding:.9rem 1.4rem; box-shadow:0 8px 24px -6px rgba(237,137,54,.45); }
.cta-primary:hover { transform:translateY(-4px); box-shadow:0 12px 30px -6px rgba(237,137,54,.6); }
.cta-secondary { background:rgba(255,255,255,0.12); color:#fff; padding:.85rem 1.35rem; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18); }
.cta-secondary:hover { background:rgba(255,255,255,0.2); transform:translateY(-4px); }

/* Smaller action buttons reuse scale + color tokens */
.action-btn, .action-btn-small { background:#fff; color:var(--primary-dark); padding:.55rem 1rem; font-size:.8rem; border-radius:10px; box-shadow:0 4px 14px -4px rgba(0,0,0,.12); }
.action-btn:hover, .action-btn-small:hover { transform:translateY(-3px); box-shadow:0 8px 22px -6px rgba(0,0,0,.18); }
.action-btn.primary { background:var(--accent-gradient); color:#fff; }
.action-btn.secondary { background:linear-gradient(135deg,#2d3748,#4a5568); color:#fff; }
.action-btn.whatsapp { background:#25D366; color:#fff; }
.action-btn.email { background:#3182ce; color:#fff; }
.action-btn.map { background:#1a365d; color:#fff; }

/* ============= Hero Stats & Generic Stat Blocks ============= */
.hero-stats, .stats-row, .stats-grid { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); margin:2rem 0 0; }
.stat-item, .section-stat-item, .steel-stat-item { position:relative; background:linear-gradient(135deg,#1a324f,#223d5b); border:1px solid rgba(255,255,255,0.06); padding:1rem .85rem; border-radius:18px; color:#fff; text-align:center; overflow:hidden; box-shadow:0 4px 18px -6px rgba(0,0,0,.35); transition:var(--layout-transition); }
.stat-item::before, .section-stat-item::before, .steel-stat-item::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%,rgba(255,255,255,0.08),transparent 70%); opacity:.9; pointer-events:none; }
.stat-number { font-size:1.8rem; font-weight:800; letter-spacing:.5px; margin-bottom:.35rem; background:linear-gradient(135deg,#fff,#d7ecff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-label { font-size:.75rem; letter-spacing:.5px; opacity:.85; font-weight:600; }
.stat-item:hover, .section-stat-item:hover, .steel-stat-item:hover { transform:translateY(-6px) scale(1.03); box-shadow:0 10px 28px -8px rgba(0,0,0,.45); }

/* ============= Utility Grids ============= */
.grid-auto-fit-160 { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1.25rem; }
.grid-auto-fit-220 { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.75rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2rem; }
@media (max-width:900px){ .grid-4 { grid-template-columns:repeat(2,1fr);} .grid-3 { grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid-4, .grid-3, .grid-2 { grid-template-columns:1fr; } }

/* ============= Generic Card Surface ============= */
.surface-card { position:relative; background:#fff; border:1px solid #e6ecf3; border-radius:20px; padding:1.3rem 1.4rem; box-shadow:0 4px 18px -6px rgba(24,34,52,.12); transition:var(--layout-transition); }
.surface-card:hover { transform:translateY(-6px); box-shadow:0 12px 34px -10px rgba(24,34,52,.25); }

/* ============= Helper Classes ============= */
.fade-in-up { opacity:0; transform:translateY(25px); animation:fadeInUp .7s cubic-bezier(.25,.6,.3,1) forwards; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(25px);} to { opacity:1; transform:translateY(0);} }

/* Margin utilities (progressively added) */
.mt-0{margin-top:0!important}.mt-1{margin-top:.5rem!important}.mt-2{margin-top:1rem!important}.mt-3{margin-top:1.5rem!important}.mt-4{margin-top:2rem!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.5rem!important}.mb-2{margin-bottom:1rem!important}.mb-3{margin-bottom:1.5rem!important}.mb-4{margin-bottom:2rem!important}

/* Utilities */
.hide { display:none !important; }
.container { width:100%; margin:0 auto; max-width:1250px; padding:0 1.25rem; }

/* Hamburger menu - Mobile */
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:.5rem; flex-direction:column; gap:5px; }
.nav-toggle span { display:block; width:24px; height:2px; background:#1a365d; border-radius:2px; transition:var(--layout-transition); }
.nav-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-toggle.active span:nth-child(2) { opacity:0; }
.nav-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
.nav-actions { display:flex; align-items:center; gap:.5rem; }

@media (max-width:900px){
  .nav-links { flex-wrap:wrap; gap:.6rem; }
  .cta-btn { padding:.65rem 1rem; }
}
@media (max-width:768px){
  .nav-toggle { display:flex; }
  .nav-links {
    position:fixed; top:70px; right:0; left:0; background:rgba(255,255,255,.98);
    flex-direction:column; padding:1.5rem; gap:0; box-shadow:0 10px 30px rgba(0,0,0,.15);
    max-height:0; overflow:hidden; opacity:0; transition:max-height .35s ease, opacity .2s ease;
    z-index:999; border-radius:0 0 16px 16px; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  }
  .nav-links.open { max-height:450px; opacity:1; }
  .nav-links li { width:100%; border-bottom:1px solid rgba(0,0,0,.06); }
  .nav-links li:last-child { border-bottom:none; }
  .nav-links a { display:block; padding:1rem; }
  .nav-actions { display:none; gap:.75rem; padding-top:1rem; }
  .nav-links.open + .nav-actions { display:flex; flex-wrap:wrap; justify-content:center; position:fixed; top:auto; bottom:1rem; left:1rem; right:1rem; z-index:1000; }
  .nav-actions .cta-btn { margin-left:0 !important; }
}
@media (max-width:640px){
  .footer-grid { grid-template-columns:1fr; }
  .logo-icon { width:38px; height:38px; }
}

/* ============= Mobile: touch targets & form UX ============= */
@media (max-width: 768px) {
  .cta-btn, .btn-primary, .btn-secondary, .submit-btn, .hero-buttons a,
  .nav-links a, button:not(.nav-toggle):not(.password-toggle) {
    min-height: 44px;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  select, textarea {
    min-height: 44px;
    font-size: 16px;
  }
  textarea { min-height: 100px; }
  .hero-buttons { flex-direction: column; gap: 0.75rem; }
  .hero-buttons a { width: 100%; justify-content: center; }
}