/* IHI Marketing - components added in the 2026 upgrade */

.skip-link { position:fixed; top:8px; inset-inline-start:8px; z-index:10000; background:#fff; color:#000; padding:8px 14px; border-radius:6px; transform:translateY(-200%); }
.skip-link:focus { transform:none; }
:focus-visible { outline:2px solid var(--primary-light); outline-offset:2px; }

.hero-eyebrow { font-size:13px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.65); margin-bottom:16px; }
.hero-title { font-family:var(--font-heading); font-size:clamp(36px,6vw,80px); font-weight:800; line-height:1.05; margin-bottom:20px; }
.hero-fallback { width:100%; height:100%; background:radial-gradient(ellipse at 30% 50%,rgba(139,0,0,0.35) 0%,transparent 60%),linear-gradient(135deg,#0a0005,#1a0010 40%,#0a0508); }
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar h4, body.lang-ar .hero-title { font-family:var(--font-ar); }

.section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:50px; flex-wrap:wrap; gap:20px; }
.muted-p { color:var(--gray); line-height:1.9; margin-bottom:20px; }
.muted-sm { color:var(--gray); font-size:13px; }
.h3 { font-size:22px; }
.h3-title { font-size:28px; margin-bottom:32px; }
a.service-card { display:block; color:inherit; }
.services-grid-3 { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) !important; }
.service-icon-lg { margin-bottom:24px; width:80px; height:80px; font-size:36px; }

/* Trust bar + marquee */
.trust-bar { background:var(--dark-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:28px 0; }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.trust-grid strong { display:block; font-size:26px; color:var(--primary-light); font-family:var(--font-heading); }
.trust-grid span { color:var(--gray); font-size:14px; }
.marquee-strip { background:var(--primary); padding:16px 0; overflow:hidden; white-space:nowrap; }
.marquee-track { display:inline-block; animation:ihi-marquee 40s linear infinite; }
.marquee-track span { margin:0 28px; font-size:15px; font-weight:600; opacity:.92; }
.marquee-track i { margin-inline-end:8px; }
@keyframes ihi-marquee { from { transform:translateX(0) } to { transform:translateX(-50%) } }
body.lang-ar .marquee-track { animation-name:ihi-marquee-rtl; }
@keyframes ihi-marquee-rtl { from { transform:translateX(0) } to { transform:translateX(50%) } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation:none; } }

/* Markets */
.markets-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.market-card { display:block; background:var(--dark-3); border:1px solid var(--border); border-radius:var(--radius); padding:28px; transition:var(--transition); }
.market-card:hover { border-color:var(--primary-light); transform:translateY(-4px); }
.market-flag { font-size:36px; display:block; margin-bottom:12px; }
.market-card h3 { font-size:22px; margin-bottom:4px; }
.market-card small { color:var(--primary-light); font-weight:600; display:block; margin-bottom:12px; }
.market-card p { color:var(--gray); font-size:14px; line-height:1.8; margin-bottom:14px; }

.about-visual { position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/3; background:linear-gradient(135deg,#1a0505,#0a0a1a); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:20px; }
.about-visual-icon { width:120px; height:120px; border-radius:50%; background:rgba(139,0,0,0.2); border:2px solid rgba(139,0,0,0.4); display:flex; align-items:center; justify-content:center; font-size:48px; color:var(--primary-light); }
.about-visual p { color:rgba(255,255,255,0.6); font-size:14px; letter-spacing:2px; }

/* Process */
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step; }
.process-step { background:var(--dark-3); border:1px solid var(--border); border-radius:var(--radius); padding:28px; }
.process-num { display:inline-flex; width:44px; height:44px; border-radius:50%; background:var(--primary); align-items:center; justify-content:center; font-weight:800; margin-bottom:16px; }
.process-step h3 { font-size:19px; margin-bottom:8px; }
.process-step p { color:var(--gray); font-size:14px; line-height:1.8; }

/* FAQ */
.faq-wrap { max-width:860px; }
.faq-item { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; padding:0 22px; }
.faq-item summary { cursor:pointer; padding:18px 0; font-weight:700; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; color:var(--primary-light); font-size:22px; line-height:1; }
.faq-item[open] summary::after { content:'−'; }
.faq-item p { color:var(--gray); padding-bottom:18px; line-height:1.9; }
.article-content .faq-item { background:rgba(255,255,255,0.03); }

/* Lead forms */
.lead-split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; text-align:start; }
.cta-section .lead-split h2, .cta-section .lead-split p { text-align:start; }
.lead-card { background:var(--dark-2); border:1px solid var(--border); border-radius:20px; padding:32px; text-align:start; }
.lead-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.lead-form label { display:block; font-size:13px; color:rgba(255,255,255,0.7); margin-bottom:6px; font-weight:600; }
.lead-form .cf-field { margin-bottom:14px; }
.lead-form input, .lead-form select, .lead-form textarea { width:100%; }
.lead-form select option { color:#000; }
.lead-note { color:var(--gray); font-size:12px; margin-top:12px; text-align:center; }
.lead-sub { color:var(--gray); margin:-6px 0 18px; font-size:14px; }
.hp-field { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.check-list { margin:20px 0; }
.check-list li { padding:6px 0; color:rgba(255,255,255,0.85); }
.check-list li::before { content:'✓'; color:var(--primary-light); font-weight:800; margin-inline-end:10px; }
.btn-whatsapp { background:#25d366; color:#fff; border:none; margin-top:12px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-whatsapp:hover { background:#1ebe5b; color:#fff; }
.contact-float-box { max-height:92vh; overflow-y:auto; }
.contact-float-box .lead-grid { grid-template-columns:1fr 1fr; }
button.btn { font-family:inherit; }
.nav-cta { white-space:nowrap; }

/* Content layout with sidebar (services + articles) */
.content-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:48px; align-items:start; }
.content-layout .article-content { max-width:100%; }
.content-sidebar { display:flex; flex-direction:column; gap:24px; }
.side-box { background:var(--dark-2); border:1px solid var(--border); border-radius:16px; padding:24px; }
.side-box h4 { font-size:17px; margin-bottom:14px; }
.sticky-box { position:sticky; top:100px; }
.content-sidebar .lead-grid { grid-template-columns:1fr; }
.content-sidebar .lead-card { padding:24px; }
.toc ol { padding-inline-start:18px; list-style:decimal; }
.toc li { margin-bottom:8px; font-size:14px; color:var(--gray); }
.toc a:hover { color:var(--primary-light); }
.article-head { max-width:900px; }
.article-head h1 { font-size:clamp(28px,4vw,48px); margin-bottom:20px; line-height:1.2; }
.article-lead { font-size:18px; color:var(--gray); }
.article-meta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; color:var(--gray); font-size:14px; margin-bottom:16px; }
.tag-ghost { background:transparent !important; border:1px solid var(--border); }
.article-content h2 { scroll-margin-top:100px; }
.article-content h3 { scroll-margin-top:100px; }
.article-content a { color:var(--primary-light); text-decoration:underline; }
.article-content .btn, .article-content .btn-primary { text-decoration:none; color:#fff; }
.inline-cta { background:linear-gradient(135deg,rgba(139,0,0,0.25),rgba(139,0,0,0.08)); border:1px solid rgba(178,34,34,0.4); border-radius:16px; padding:28px; margin:40px 0; }
.inline-cta h3 { margin-top:0 !important; }
.author-box { display:flex; gap:16px; align-items:flex-start; border-top:1px solid var(--border); padding-top:24px; margin-top:32px; }
.author-box img { border-radius:50%; background:#fff; padding:6px; flex-shrink:0; }
.author-box p { color:var(--gray); font-size:14px; margin:4px 0 0 !important; }
.blog-card-placeholder { width:100%; height:100%; min-height:200px; background:linear-gradient(135deg,#1a0505,#0a0a1a); display:flex; align-items:center; justify-content:center; font-size:48px; color:rgba(139,0,0,0.5); }

/* Chips */
.chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.chip { padding:8px 18px; border-radius:30px; border:1px solid var(--border); color:rgba(255,255,255,0.8); font-size:14px; background:transparent; cursor:pointer; }
.chip.active, .chip:hover { background:var(--primary); border-color:var(--primary); color:#fff; }

/* Portfolio */
.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; }
.portfolio-card { background:var(--dark-2); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:var(--transition); }
.portfolio-card:hover { transform:translateY(-4px); border-color:var(--primary-light); }
.portfolio-thumb { display:block; aspect-ratio:16/10; background:#151515; overflow:hidden; }
.portfolio-thumb img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .5s ease; }
.portfolio-card:hover .portfolio-thumb img { transform:scale(1.04); }
.portfolio-placeholder { width:100%; height:100%; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; background:linear-gradient(135deg,#1a0505,#0a0a1a); color:var(--gray); }
.portfolio-placeholder img { width:64px !important; height:64px !important; object-fit:contain !important; border-radius:12px; background:#fff; padding:6px; }
.portfolio-body { padding:22px; }
.portfolio-body h3 { font-size:19px; margin:6px 0 8px; }
.portfolio-body p { color:var(--gray); font-size:14px; line-height:1.8; margin-bottom:12px; }

/* Contact */
.contact-list li { display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.contact-list strong { display:block; margin-bottom:2px; }
.contact-list a, .contact-list span { color:var(--gray); }
.ci { width:44px; height:44px; min-width:44px; background:rgba(139,0,0,0.15); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--primary-light); }
.ci-wa { background:rgba(37,211,102,0.12); color:#25d366; }
.map-embed { margin-top:24px; border-radius:16px; overflow:hidden; border:1px solid var(--border); }
.map-embed iframe { width:100%; height:300px; border:0; display:block; }

.thank-you { padding-top:180px; }
.ty-icon { width:84px; height:84px; border-radius:50%; background:#16a34a; display:flex; align-items:center; justify-content:center; font-size:38px; margin:0 auto 24px; }
.big-404 { font-size:120px; font-weight:900; color:var(--primary); opacity:.35; line-height:1; margin-bottom:20px; }

/* Market landing pages */
.market-hero { padding:150px 0 80px; background:radial-gradient(ellipse at 80% 20%,rgba(139,0,0,0.35),transparent 55%),linear-gradient(135deg,#0d0406,#06060e); }
.market-hero-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; }
.market-hero h1 { font-size:clamp(32px,5vw,56px); line-height:1.15; margin-bottom:20px; }
.market-sub { color:rgba(255,255,255,0.8); font-size:18px; line-height:1.9; margin-bottom:28px; }
.market-flag-sm { font-size:20px; }
.market-cities { color:var(--gray); font-size:14px; margin-top:24px; }
.market-cities i { color:var(--primary-light); margin-inline-end:6px; }
.market-form-top .lead-grid { grid-template-columns:1fr 1fr; }
.pain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px; }
.pain-card { background:var(--dark-3); border:1px solid var(--border); border-radius:var(--radius); padding:26px; }
.pain-card i { color:var(--primary-light); font-size:26px; margin-bottom:14px; }
.pain-card h3 { font-size:19px; margin-bottom:8px; }
.pain-card p { color:var(--gray); font-size:15px; line-height:1.8; }
.market-local { display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:start; }
.market-local .article-content { max-width:100%; }
.platform-list li { background:var(--dark-3); border:1px solid var(--border); border-radius:12px; padding:16px 18px; margin-bottom:12px; }
.platform-list strong { display:block; margin-bottom:4px; }
.platform-list span { color:var(--gray); font-size:14px; }
.nav-phone { white-space:nowrap; padding:10px 16px; }
@media (max-width: 1024px) {
  .market-hero-grid, .market-local { grid-template-columns:1fr; }
}
@media (max-width: 768px) {
  .market-hero { padding:120px 0 50px; }
  .pain-grid, .market-form-top .lead-grid { grid-template-columns:1fr; }
  .nav-phone { display:none; }
}

/* Mobile bottom bar */
.mobile-cta-bar { display:none; }
@media (max-width: 768px) {
  .mobile-cta-bar { display:grid; grid-template-columns:repeat(3,1fr); position:fixed; bottom:0; left:0; right:0; z-index:998; background:#111; border-top:1px solid var(--border); }
  .mobile-cta-bar a, .mobile-cta-bar button { padding:13px 4px; text-align:center; color:#fff; font-size:14px; font-weight:600; display:flex; gap:6px; align-items:center; justify-content:center; }
  .mobile-cta-bar a:nth-child(2) { background:#25d366; }
  .mobile-cta-bar button { background:var(--primary); }
  body { padding-bottom:50px; }
  .whatsapp-float, .contact-open-btn { display:none !important; }
  .nav-cta { display:none; }
}

/* Responsive */
@media (max-width: 1024px) {
  .content-layout { grid-template-columns:1fr; }
  .sticky-box { position:static; }
  .markets-grid, .process-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 768px) {
  .trust-grid { grid-template-columns:repeat(2,1fr); }
  .markets-grid, .process-grid, .lead-split, .lead-grid, .contact-float-box .lead-grid { grid-template-columns:1fr; }
  .portfolio-grid { grid-template-columns:1fr; }
  .h3-title { font-size:24px; }
  .admin-two-col { grid-template-columns:1fr !important; }
}

/* Dropdown with all services */
@media (min-width: 769px) {
  .dropdown-wide { columns:2; column-gap:8px; min-width:460px; }
  .dropdown-wide li { break-inside:avoid; }
  .dropdown-wide .dropdown-all { column-span:all; }
}

/* RTL tweaks */
body.lang-ar .fa-arrow-right, body.lang-ar .fa-chevron-right { transform:scaleX(-1); }
body.lang-ar .lead-note, body.lang-ar .lead-form label { text-align:right; }

/* Admin additions */
.admin-flash { background:rgba(0,180,100,0.1); border:1px solid rgba(0,180,100,0.3); color:#00a35c; padding:12px 16px; border-radius:8px; margin-bottom:20px; }
.lead-pipeline { display:grid; grid-template-columns:repeat(7,1fr); gap:12px; margin-bottom:20px; }
.lead-pipeline .pipe { background:#fff; border:1px solid #eee; border-top:3px solid var(--c,#8B0000); border-radius:10px; padding:14px; text-align:center; color:#333; text-decoration:none; }
.lead-pipeline .pipe.active { box-shadow:0 0 0 2px var(--c,#8B0000); }
.lead-pipeline strong { display:block; font-size:22px; }
.lead-pipeline span { font-size:12px; color:#777; }
@media (max-width: 900px) { .lead-pipeline { grid-template-columns:repeat(3,1fr); } }