/* ═══════════════════════════════════════════════════════
   EL-SHERIEF LIMOUSINE — base.css
   Shared across all pages: reset, vars, cursor, nav,
   footer, loader, 3D canvas, scroll animations
═══════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── CSS Variables ── */
:root {
  --bg: #F6F4EE;
  --bg2: #EFEBE0;
  --bg3: #E6E0D1;
  --white: #FFFFFF;
  --ink: #14161B;
  --ink2: #2B2D30;
  --muted: #767162;
  --muted2: #A69F8C;
  --accent: #B8842B;
  --accent-light: #D6A44C;
  --accent-pale: #FAF1DE;
  --road: #1C1E24;
  --border: rgba(20,22,27,0.1);
  --border2: rgba(20,22,27,0.06);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Instrument Sans', sans-serif;
  overflow-x: hidden;
  cursor: none;
}

/* ── 3D Background Canvas ── */
#bg3d {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1s ease;
}
#bg3d.visible { opacity: 1; }

/* Sections above 3D bg */
.ticker, .about, .why, .products, .clients, .cta-section,
.services-main, .process-section, .capabilities, .cta-strip,
.contact-wrap, footer {
  position: relative; z-index: 2;
}
.about, .products, .clients,
.capabilities, .contact-wrap {
  background: rgba(246,244,238,0.92) !important;
  backdrop-filter: blur(1px);
}
footer {
  background: rgba(20,22,27,0.97) !important;
}
.why, .process-section {
  background: rgba(20,22,27,0.93) !important;
  backdrop-filter: blur(1px);
}
.cta-section, .cta-strip { background: rgba(246,244,238,0.90) !important; }
.ticker                { background: rgba(255,255,255,0.94) !important; }
.services-main         { background: rgba(246,244,238,0.92) !important; }

/* ── Custom Cursor ── */
.cursor {
  position: fixed; width: 10px; height: 10px;
  background: var(--accent); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width 0.3s, height 0.3s, background 0.3s;
  mix-blend-mode: multiply;
}
.cursor-ring {
  position: fixed; width: 36px; height: 36px;
  border: 1.5px solid var(--accent); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width 0.3s, height 0.3s, opacity 0.3s;
  opacity: 0.4;
}
body:has(a:hover) .cursor,
body:has(button:hover) .cursor { width: 20px; height: 20px; }
body:has(a:hover) .cursor-ring,
body:has(button:hover) .cursor-ring { width: 52px; height: 52px; opacity: 0.2; }

/* ── Navigation ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 0 48px;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
  background: rgba(246,244,238,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border2);
  transition: all 0.4s;
}
nav.solid {
  background: rgba(246,244,238,0.98);
  border-bottom-color: var(--border);
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
}
/* Traveling light line along the nav's bottom edge — a soft gold streak
   that continuously sweeps forward (mirrored to move right-to-left on
   Arabic pages, matching RTL reading direction), for a premium, "always
   live" feel rather than a plain static border. */
nav::before {
  content: '';
  position: absolute; left: -35%; bottom: -1px; width: 35%; height: 2.5px;
  background: linear-gradient(90deg, transparent, rgba(224,179,84,0.95) 32%, #FFDFA0 50%, rgba(224,179,84,0.95) 68%, transparent);
  box-shadow: 0 0 12px 2px rgba(214,164,76,0.6);
  pointer-events: none;
  animation: navLightSweep 3.6s ease-in-out infinite;
}
@keyframes navLightSweep {
  0%   { left: -35%; }
  60%  { left: 100%; }
  100% { left: 100%; }
}
html[dir="rtl"] nav::before { animation-name: navLightSweepRtl; }
@keyframes navLightSweepRtl {
  0%   { left: 100%; }
  60%  { left: -35%; }
  100% { left: -35%; }
}
.nav-logo {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 900; font-size: 17px;
  letter-spacing: -0.5px; color: var(--ink);
  display: flex; align-items: center; gap: 11px;
  text-decoration: none;
}
.nav-logo-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-pale), rgba(184,132,43,0.06));
  border: 1.4px solid rgba(184,132,43,0.38);
  color: var(--accent);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(184,132,43,0.14);
  transition: transform 0.4s cubic-bezier(.4,1.6,.4,1), box-shadow 0.4s;
}
.nav-logo:hover .nav-logo-icon { transform: rotate(90deg); box-shadow: 0 4px 16px rgba(184,132,43,0.3); }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.nav-logo-main { font-size: 15px; font-weight: 900; letter-spacing: 0.3px; color: var(--ink); }
.nav-logo-sub { font-family: 'Instrument Sans', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 3px; color: var(--accent); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.nav-logo-sub::before { content: ''; width: 11px; height: 1px; background: var(--accent); opacity: 0.75; }
.logo-dot {
  width: 7px; height: 7px;
  background: var(--accent); border-radius: 50%;
  animation: breathe 3s ease-in-out infinite;
}
@keyframes breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.4)} }
.nav-center { display: flex; gap: 4px; }
.nav-center a {
  color: var(--muted); text-decoration: none;
  font-size: 13.5px; font-weight: 500;
  padding: 6px 14px; border-radius: 100px;
  transition: all 0.2s; letter-spacing: -0.1px;
}
.nav-center a:hover { color: var(--ink); background: var(--border2); }
.nav-center a.active { color: var(--accent); background: var(--border2); }
.nav-lang-toggle {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Instrument Sans', sans-serif; font-size: 12.5px; font-weight: 700;
  color: var(--muted); text-decoration: none;
  padding: 7px 13px; margin: 0 4px;
  border: 1px solid var(--border2); border-radius: 100px;
  transition: all 0.2s;
  flex-shrink: 0; white-space: nowrap;
}
.nav-lang-toggle svg { flex-shrink: 0; opacity: 0.75; transition: opacity 0.2s; }
.nav-lang-toggle:hover { color: var(--accent); border-color: var(--accent-pale); background: var(--accent-pale); }
.nav-lang-toggle:hover svg { opacity: 1; }
.nav-lang-toggle-mobile { display: none; }
.nav-cta {
  background: var(--ink); color: var(--white);
  padding: 9px 22px; border: none;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  border-radius: 100px; cursor: pointer;
  transition: all 0.2s;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.nav-cta:hover { background: var(--accent); transform: translateY(-1px); }
.nav-cta-mobile { display: none; }

/* ── Nav search — icon trigger opens a full search overlay below the
   header (matching a spotlight/command-palette pattern): a large pill
   input up top, and a results list below with a colored type label,
   thumbnail, title, and description excerpt per result. ── */
.nav-search-btn {
  flex-shrink: 0; width: 38px; height: 38px; margin: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--border2); border: 1px solid transparent; border-radius: 50%;
  cursor: pointer; color: var(--muted);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.nav-search-btn:hover, .nav-search-btn.active { color: var(--accent); background: var(--accent-pale); border-color: var(--accent-pale); }

.nav-search-overlay {
  position: fixed; left: 0; right: 0; top: 64px;
  z-index: 150;
  display: flex; justify-content: center;
  padding: 0 24px;
  pointer-events: none;
}
.nav-search-overlay-inner {
  width: 100%; max-width: 620px;
  margin-top: 14px;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.nav-search-overlay.open {
  pointer-events: auto;
}
.nav-search-overlay.open .nav-search-overlay-inner {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.nav-search-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--white);
  border: 2px solid var(--border2);
  border-radius: 100px;
  padding: 12px 18px;
  box-shadow: 0 16px 40px rgba(20,22,27,0.14);
  transition: border-color 0.2s;
  pointer-events: auto;
}
.nav-search-box:focus-within { border-color: var(--accent); }
.nav-search-box > svg { flex-shrink: 0; color: var(--muted2); }
.nav-search-box:focus-within > svg:first-child { color: var(--accent); }
.nav-search-input {
  flex: 1; min-width: 0;
  border: none; background: none; outline: none;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px; color: var(--ink);
}
.nav-search-input::placeholder { color: var(--muted2); }
.nav-search-clear {
  flex-shrink: 0; width: 26px; height: 26px;
  display: none; align-items: center; justify-content: center;
  background: var(--border2); border: none; border-radius: 50%; cursor: pointer;
  color: var(--muted); transition: background 0.2s, color 0.2s;
}
.nav-search-clear:hover { background: var(--accent-pale); color: var(--accent); }
.nav-search-box.has-value .nav-search-clear { display: flex; }

/* Results panel */
.nav-search-panel {
  margin-top: 10px;
  background: var(--white);
  border: 1px solid var(--border2);
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(20,22,27,0.16);
  overflow: hidden;
  max-height: min(60vh, 460px); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: auto;
}
.nav-search-overlay-inner.has-panel .nav-search-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-search-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--border2);
  transition: background 0.15s;
}
.nav-search-item:last-child { border-bottom: none; }
.nav-search-item:hover, .nav-search-item.active { background: var(--accent-pale); }
.nav-search-item-thumb {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 10px;
  background: var(--bg2); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.nav-search-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nav-search-item-thumb-empty { color: var(--accent); background: var(--accent-pale); }
.nav-search-item-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nav-search-item-type {
  font-size: 10.5px; font-weight: 800; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.6px;
}
.nav-search-item-name {
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  line-height: 1.3;
}
.nav-search-item-excerpt {
  font-size: 12.5px; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nav-search-empty {
  padding: 22px 16px; text-align: center;
  font-size: 13px; color: var(--muted2);
}
@media (max-width: 860px) {
  .nav-search-overlay { top: 60px; padding: 0 14px; }
  .nav-search-overlay-inner { margin-top: 10px; }
  .nav-search-box { padding: 10px 14px; }
  .nav-search-item-thumb { width: 46px; height: 46px; }
}

/* ── Mobile Hamburger ── */
.nav-burger {
  display: none; position: relative; width: 40px; height: 40px;
  background: transparent; border: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  z-index: 101;
}
.nav-burger span {
  display: block; width: 22px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform 0.35s ease, opacity 0.25s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-overlay {
  position: fixed; inset: 0; background: rgba(20,22,27,0.4);
  backdrop-filter: blur(2px); z-index: 98; opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
.nav-overlay.visible { opacity: 1; pointer-events: auto; }

/* ── Shared Section Utilities ── */
.section { padding: 120px 48px; }
.section-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  color: var(--accent); letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 20px;
}
.section-tag::before { content:''; width:20px; height:1.5px; background:var(--accent); }
.section-h {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(36px,3.5vw,56px);
  font-weight: 800; line-height: 1.0;
  letter-spacing: -2px; color: var(--ink);
}

/* Shared buttons */
.btn-dark {
  background: var(--ink); color: var(--white);
  padding: 14px 28px; border: none;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 14px;
  border-radius: 100px; cursor: pointer; transition: all 0.25s;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
.btn-dark:hover { background: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(184,132,43,0.25); }
.btn-outline {
  background: transparent; color: var(--ink);
  padding: 13px 28px; border: 1.5px solid var(--border);
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500; font-size: 14px;
  border-radius: 100px; cursor: pointer; transition: all 0.25s;
  text-decoration: none; display: inline-flex; align-items: center;
}
.btn-outline:hover { border-color: var(--ink); background: var(--white); }

/* ── Shared Hero Background Elements ── */
.page-hero {
  min-height: min(100vh, 860px); padding: 140px 48px 80px;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; z-index: 2; background: var(--bg); overflow: hidden;
}
.page-hero-grid {
  position: absolute; inset: 0;
  background-image:
    url('../assets/road-bg.svg'),
    linear-gradient(var(--border2) 1px, transparent 1px),
    linear-gradient(90deg, var(--border2) 1px, transparent 1px);
  background-size: cover, 64px 64px, 64px 64px;
  background-position: center bottom, center, center;
  background-repeat: no-repeat, repeat, repeat;
}
.hero-nodes { position: absolute; inset: 0; pointer-events: none; }
.page-hero-orb {
  position: absolute; right: -120px; top: 50%; transform: translateY(-50%);
  width: 700px; height: 700px; border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.page-hero-orb::before {
  content: ''; width: 500px; height: 500px;
  border-radius: 50%; border: 1px solid var(--border); position: absolute;
}
.page-hero-orb::after {
  content: ''; width: 300px; height: 300px;
  border-radius: 50%; border: 1px solid var(--border); position: absolute;
}
.orb-core {
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--accent); opacity: 0.07;
  animation: pulse-orb 4s ease-in-out infinite;
}
@keyframes pulse-orb { 0%,100%{transform:scale(1);opacity:0.07} 50%{transform:scale(1.2);opacity:0.14} }
.hero-node {
  position: absolute; width: 5px; height: 5px;
  background: var(--accent); border-radius: 50%;
  opacity: 0; animation: nodeAppear 4s ease-in-out infinite;
}
@keyframes nodeAppear { 0%,100%{opacity:0;transform:scale(0)} 50%{opacity:0.55;transform:scale(1)} }
.hero-conn { display: none; }
.hero-conn-legacy {
  position: absolute; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0; transform-origin: left;
  animation: lineFlow 3s ease-in-out infinite;
}
@keyframes lineFlow { 0%,100%{opacity:0;transform:scaleX(0)} 40%,60%{opacity:0.22;transform:scaleX(1)} }
.breadcrumb {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--border);
  padding: 6px 14px; border-radius: 100px;
  font-size: 12px; color: var(--muted2); font-weight: 500;
  text-decoration: none;
  position: absolute;
  top: 80px;
  left: 48px;
  z-index: 10;
}
.breadcrumb a { color: var(--muted2); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb-sep { color: var(--muted2); opacity: 0.4; }
.breadcrumb span { color: var(--ink2); font-weight: 600; }
.page-hero-inner { position: relative; z-index: 1; max-width: 820px; }
.page-hero h1 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(56px,7vw,108px);
  font-weight: 900; line-height: 0.92; letter-spacing: -4px; color: var(--ink);
}
.page-hero h1 .line2 { color: var(--accent); }
.page-hero h1 .line3 { -webkit-text-stroke: 1.5px var(--ink); color: transparent; }
.page-hero-bottom {
  position: relative; z-index: 1; margin-top: 40px;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.page-hero p { font-size: 15px; color: var(--muted); line-height: 1.7; max-width: 480px; }
.scroll-hint {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--muted2); letter-spacing: 2px; text-transform: uppercase;
}
.scroll-hint::before { content:''; width:32px; height:1px; background:var(--accent); opacity:0.5; }

/* ── Footer ── */
footer {
  background: rgba(20,22,27,0.95) !important;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 64px 48px 36px;
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(214,164,76,0.28), rgba(214,164,76,0.28)),
    radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 100% 1px, 22px 22px;
  background-position: top left, 0 0;
  background-repeat: no-repeat, repeat;
}
/* Traveling light line along the footer's top edge — the same forward-
   moving gold streak used on the nav, so the brand's "always live" cue
   bookends every page (mirrored to sweep right-to-left on Arabic pages). */
footer::before {
  content: '';
  position: absolute; left: -35%; top: -1px; width: 35%; height: 2.5px;
  background: linear-gradient(90deg, transparent, rgba(224,179,84,0.95) 32%, #FFDFA0 50%, rgba(224,179,84,0.95) 68%, transparent);
  box-shadow: 0 0 12px 2px rgba(214,164,76,0.6);
  pointer-events: none;
  z-index: 2;
  animation: navLightSweep 3.6s ease-in-out infinite;
}
html[dir="rtl"] footer::before { animation-name: navLightSweepRtl; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 52px; position: relative; z-index: 1; }
.footer-logo {
  font-family: 'Cabinet Grotesk', sans-serif;
  display: flex; align-items: center; gap: 11px; margin-bottom: 16px;
  text-decoration: none;
}
.footer-logo-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  background: rgba(214,164,76,0.1);
  border: 1.4px solid rgba(214,164,76,0.4);
  color: #D6A44C;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: transform 0.4s cubic-bezier(.4,1.6,.4,1);
}
.footer-logo:hover .footer-logo-icon { transform: rotate(90deg); }
.footer-logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.footer-logo-main { font-size: 16px; font-weight: 900; letter-spacing: 0.2px; color: #fff; }
.footer-logo-sub { font-family: 'Instrument Sans', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 3px; color: #D6A44C; margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.footer-logo-sub::before { content: ''; width: 11px; height: 1px; background: #D6A44C; opacity: 0.75; }
.footer-about { font-size: 13.5px; color: rgba(255,255,255,0.4); line-height: 1.7; margin-bottom: 22px; }
.footer-contact-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.footer-contact-item { font-size: 13px; color: rgba(255,255,255,0.4); display: flex; align-items: flex-start; gap: 10px; }
.footer-contact-item .contact-icon { flex: 0 0 16px; width: 16px; text-align: center; line-height: 1.7; }
.footer-contact-item span { color: rgba(255,255,255,0.7); }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease;
}
.footer-social a:hover { color: #fff; border-color: var(--accent-light); background: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(184,132,43,0.35); }
.footer-col-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.3); margin-bottom: 18px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 13.5px; color: rgba(255,255,255,0.45); text-decoration: none;
  transition: color 0.2s, padding-left 0.2s; font-weight: 500;
  position: relative; display: inline-block;
}
.footer-links a::before {
  content: '→'; position: absolute; left: -16px; opacity: 0;
  transition: opacity 0.2s, left 0.2s; color: var(--accent);
}
.footer-links a:hover { color: #fff; padding-left: 16px; }
.footer-links a:hover::before { opacity: 1; left: 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
.footer-copy { font-size: 12px; color: rgba(255,255,255,0.2); }
.footer-credit {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.045);
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.16);
  position: relative; z-index: 1;
  transition: color 0.25s;
}
.footer-credit:hover { color: rgba(214,164,76,0.55); }

/* ── CTA "Get In Touch" panels — border light ──
   Shared by every page's closing CTA box (home, fleet, product details,
   services, blog, about). One rule set here keeps the treatment
   consistent site-wide: a soft gold ring plus a slow-orbiting light
   that traces the panel's edge, echoing the nav/footer sweep in a
   contained, premium way rather than a static line. */
@property --cta-border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.cta-inner, .pd-cta-inner, .prod-cta-inner, .about-cta-inner {
  border: 1px solid rgba(214,164,76,0.22);
  box-shadow: 0 0 0 1px rgba(214,164,76,0.08) inset, 0 30px 70px -20px rgba(0,0,0,0.45);
  animation: ctaPanelGlow 5.5s ease-in-out infinite;
}
@keyframes ctaPanelGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(214,164,76,0.08) inset, 0 30px 70px -20px rgba(0,0,0,0.45); }
  50%      { box-shadow: 0 0 0 1px rgba(214,164,76,0.16) inset, 0 0 26px 2px rgba(214,164,76,0.12), 0 30px 70px -20px rgba(0,0,0,0.45); }
}
.cta-inner::before, .pd-cta-inner::before, .prod-cta-inner::before, .about-cta-inner::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: conic-gradient(
    from var(--cta-border-angle),
    transparent 0deg,
    rgba(224,179,84,0) 0deg,
    rgba(255,223,160,1) 22deg,
    rgba(224,179,84,0) 58deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  animation: ctaBorderOrbit 5.5s linear infinite;
}
html[dir="rtl"] .cta-inner::before,
html[dir="rtl"] .pd-cta-inner::before,
html[dir="rtl"] .prod-cta-inner::before,
html[dir="rtl"] .about-cta-inner::before {
  animation-direction: reverse;
}
@keyframes ctaBorderOrbit {
  to { --cta-border-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-inner::before, .pd-cta-inner::before, .prod-cta-inner::before, .about-cta-inner::before {
    animation: none;
  }
  .cta-inner, .pd-cta-inner, .prod-cta-inner, .about-cta-inner {
    animation: none;
  }
}

/* ── CTA interior animation: living grid + drifting glow + diagonal
   light sweep — the grid/glow layers already existed on every CTA panel
   (home, fleet, product details, services, blog, about) but were fully
   static. This brings all of them to life with the same three effects,
   in one place, so every CTA section moves consistently. ── */
.cta-grid-bg, .cta-bg-grid, .pd-cta-grid, .about-cta-grid, .prod-cta-grid {
  animation: ctaGridDrift 22s linear infinite;
}
@keyframes ctaGridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 48px 48px, 48px 48px; }
}

.cta-dot, .cta-glow, .pd-cta-glow, .about-cta-glow, .prod-cta-glow {
  animation: ctaGlowPulse 6.5s ease-in-out infinite;
}
@keyframes ctaGlowPulse {
  0%, 100% { opacity: 0.7; transform: translateY(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateY(-50%) scale(1.1); }
}

/* Soft diagonal beam that slowly drifts across the card, echoing the
   moving light-ray look used elsewhere — kept subtle and on-brand (gold,
   not blue) rather than a literal copy. Sits behind the text/buttons
   (they carry z-index:1) and above the grid (z-index left at auto/0). */
.cta-inner, .pd-cta-inner, .prod-cta-inner, .about-cta-inner {
  isolation: isolate;
}
.cta-inner::after, .pd-cta-inner::after, .prod-cta-inner::after, .about-cta-inner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 0%, transparent 40%, rgba(224,179,84,0.16) 50%, transparent 60%, transparent 100%);
  background-size: 260% 260%;
  background-position: 0% 0%;
  animation: ctaBeamSweep 9s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
@keyframes ctaBeamSweep {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-grid-bg, .cta-bg-grid, .pd-cta-grid, .about-cta-grid, .prod-cta-grid,
  .cta-dot, .cta-glow, .pd-cta-glow, .about-cta-glow, .prod-cta-glow,
  .cta-inner::after, .pd-cta-inner::after, .prod-cta-inner::after, .about-cta-inner::after {
    animation: none;
  }
}

/* ── Scroll Reveal ── */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.75s ease, transform 0.75s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.12s; }
.reveal-d2 { transition-delay: 0.24s; }
.reveal-d3 { transition-delay: 0.36s; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Tablet & Mobile
═══════════════════════════════════════════════════════ */

/* Tablet: 1024px and below */
@media (max-width: 1024px) {
  .section { padding: 90px 32px; }
  .page-hero { padding: 140px 32px 64px; }
  .breadcrumb { left: 32px; }
  .page-hero-orb { width: 480px; height: 480px; right: -160px; }
  .page-hero-orb::before { width: 340px; height: 340px; }
  .page-hero-orb::after { width: 200px; height: 200px; }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
  footer { padding: 56px 32px 28px; }
}

/* Mobile nav breakpoint: 860px and below */
@media (max-width: 860px) {
  body { cursor: auto; }
  .cursor, .cursor-ring { display: none; }

  nav { padding: 0 20px; height: 60px; }
  .breadcrumb { left: 20px; }
  .page-hero { min-height: auto; padding: 130px 20px 48px; justify-content: flex-start; }
  .nav-burger { display: flex; }
  .nav-cta-desktop { display: none; }
  .nav-lang-toggle-desktop { display: none; }
  /* Deliberately mismatched with reading direction: the Arabic-labelled
     button always sits at the physical right of the menu, the English-
     labelled one always at the physical left — regardless of which
     language is currently active. flex-end naturally lands on the right
     in an LTR (English-mode) menu and on the left in an RTL (Arabic-mode)
     menu, which is exactly that fixed physical placement. */
  .nav-lang-toggle-mobile { display: inline-flex; margin: 12px 20px; align-self: flex-end; }
  .nav-cta-mobile {
    display: inline-flex; margin-top: 28px; width: 100%;
    justify-content: center; padding: 14px 22px;
  }
  .nav-center {
    position: fixed; top: 0; left: 0; right: auto; height: 100vh; width: min(320px, 82vw);
    background: var(--white); z-index: 100;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 88px 28px 32px;
    transform: translateX(-100%); opacity: 0;
    transition: transform 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.4s ease;
    box-shadow: 8px 0 40px rgba(0,0,0,0.12);
    overflow-y: auto;
  }
  .nav-center.open { transform: translateX(0); opacity: 1; }
  .nav-center a {
    padding: 14px 16px; border-radius: 12px; font-size: 15.5px;
    border-bottom: 1px solid var(--border2);
  }
  .nav-center a.active { background: var(--accent-pale); }

  .page-hero h1 { font-size: clamp(40px,12vw,64px); letter-spacing: -2px; }
  .page-hero-bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
  .page-hero-orb { display: none; }
  .hero-nodes { display: none; }

  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  .nav-search-btn { width: 34px; height: 34px; margin: 0 2px; }
}

/* Small phones: 480px and below */
@media (max-width: 480px) {
  .section { padding: 64px 18px; }
  .page-hero { padding: 118px 18px 48px; }
  .breadcrumb { left: 16px; top: 76px; font-size: 11px; padding: 5px 12px; }
  nav { padding: 0 16px; }
  .nav-logo-icon { width: 32px; height: 32px; }
  footer { padding: 48px 18px 24px; }
  .section-h { letter-spacing: -1px; }
}

/* Border-light legibility on small screens — a touch brighter/thicker so
   the sweep and the orbiting CTA border still read clearly at phone size. */
@media (max-width: 640px) {
  nav::before, footer::before { height: 3px; width: 45%; left: -45%; }
  html[dir="rtl"] nav::before, html[dir="rtl"] footer::before { left: 100%; }
  .cta-inner, .pd-cta-inner, .prod-cta-inner, .about-cta-inner {
    border-color: rgba(214,164,76,0.28);
  }
  .cta-inner::before, .pd-cta-inner::before, .prod-cta-inner::before, .about-cta-inner::before {
    padding: 1.6px;
  }
}

/* Extra breathing room on large desktop displays — a slightly wider,
   brighter sweep and orbit so the effect still registers at a glance
   on bigger screens. */
@media (min-width: 1440px) {
  nav::before, footer::before { height: 2.8px; }
  .cta-inner::before, .pd-cta-inner::before, .prod-cta-inner::before, .about-cta-inner::before {
    padding: 1.6px;
  }
}

/* Snappier, shorter-throw reveal on touch devices — long desktop-style travel
   distances read as sluggish on a phone screen */
@media (max-width: 860px) {
  .reveal { transform: translateY(16px); transition: opacity 0.4s ease, transform 0.4s ease; }
  .reveal-d1 { transition-delay: 0.06s; }
  .reveal-d2 { transition-delay: 0.12s; }
  .reveal-d3 { transition-delay: 0.18s; }
}

/* Respect reduced-motion preference: skip travel distance, just fade */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { transform: none !important; transition: opacity 0.3s ease !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ── Scroll-to-top button ── */
#scrollTopBtn {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: var(--white);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  opacity: 0; transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}
#scrollTopBtn.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#scrollTopBtn:hover { background: var(--accent); transform: translateY(-3px) scale(1.05); }
@media (max-width: 860px) {
  #scrollTopBtn { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}