/* =====================================================================
   ZAHEEM TECHNOLOGIES — DESIGN SYSTEM
   Palette: deep marine ink + refined teal + warm gold bridge accent
   Type: Space Grotesk (display) / Inter (body) / IBM Plex Sans Arabic (ar)
   ===================================================================== */

:root {
  /* Color */
  --ink:        #071B29;
  --ink-2:      #0E2F41;
  --ink-3:      #123B50;
  --paper:      #EDF3F5;
  --paper-2:    #FFFFFF;
  --teal:       #4FAEC9;
  --teal-soft:  #8FD1E4;
  --gold:       #C89B5C;
  --gold-soft:  #E4C793;
  --ink-text:   #E9F2F5;
  --ink-muted:  #9FB9C6;
  --dark-text:  #0D2733;
  --dark-muted: #4C6572;
  --line-dark:  rgba(233, 242, 245, 0.14);
  --line-light: rgba(13, 39, 51, 0.10);

  /* Type */
  --font-display: 'Space Grotesk', 'IBM Plex Sans Arabic', sans-serif;
  --font-body: 'Inter', 'IBM Plex Sans Arabic', sans-serif;

  /* Layout */
  --max-width: 1280px;
  --gutter: 6vw;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

[dir="rtl"] {
  --font-display: 'IBM Plex Sans Arabic', sans-serif;
  --font-body: 'IBM Plex Sans Arabic', sans-serif;
}

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

/* iOS Safari flashes a dark semi-transparent overlay on any tap unless
   this is disabled — very visible against warm-colored buttons like the
   gold CTA. Custom :active states below provide real tap feedback
   instead, without the jarring default flash. */
html { -webkit-tap-highlight-color: transparent; }
a, button, input, textarea, select { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--ink-text);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
}

body.menu-open { overflow: hidden; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

ul { list-style: none; }

.icon { width: 1.15em; height: 1.15em; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =====================================================================
   TYPOGRAPHY
   ===================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; font-weight: 700; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 1.1rem;
}
[dir="rtl"] .eyebrow { letter-spacing: 0.02em; }

.eyebrow::before {
  content: '';
  width: 22px;
  height: 1.5px;
  background: var(--gold-soft);
}

.section-head {
  max-width: 640px;
  margin-bottom: 3.2rem;
}
.section-head.center { margin-inline: auto; text-align: center; }

.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 0.9rem; }
.section-head p { color: var(--ink-muted); font-size: 1.05rem; }
.light-band .section-head p { color: var(--dark-muted); }

/* =====================================================================
   BUTTONS
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.2s var(--ease), background 0.25s ease, border-color 0.25s ease, color .25s ease, filter .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); filter: brightness(0.94); }
.btn .icon { width: 1.05em; height: 1.05em; transition: transform .3s var(--ease); }
[dir="rtl"] .btn .icon { transform: scaleX(-1); }
.btn:hover .icon { transform: translateX(3px); }
[dir="rtl"] .btn:hover .icon { transform: scaleX(-1) translateX(3px); }

.btn-primary {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: var(--ink);
}
.btn-primary:hover { box-shadow: 0 12px 30px -10px rgba(200, 155, 92, 0.55); }
.btn-primary:active { box-shadow: none; }

.btn-ghost {
  background: transparent;
  border-color: var(--line-dark);
  color: var(--ink-text);
}
.btn-ghost:hover { border-color: var(--teal-soft); background: rgba(143, 209, 228, 0.08); }

.btn-ghost-dark {
  background: transparent;
  border-color: var(--line-light);
  color: var(--dark-text);
}
.btn-ghost-dark:hover { border-color: var(--ink-3); background: rgba(14, 47, 65, 0.05); }

.btn-block { width: 100%; justify-content: center; }

/* =====================================================================
   HEADER / NAV
   ===================================================================== */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 1000;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(7, 27, 41, 0.86);
  backdrop-filter: blur(16px);
  border-color: var(--line-dark);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink-text);
  min-width: 0;
  flex-shrink: 1;
}
.brand-mark {
  width: 34px; height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.92rem;
  font-weight: 500;
  flex-shrink: 0;
}
.nav-links a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink-muted);
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: color .25s ease, background .25s ease;
}
.nav-icon-chip { display: none; }
.nav-links a::after {
  content: '';
  position: absolute;
  inset-inline: 0.85rem;
  bottom: 0.1rem;
  height: 1.5px;
  background: var(--gold-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
[dir="rtl"] .nav-links a::after { transform-origin: right; }
.nav-links a:hover { color: var(--ink-text); background: rgba(255,255,255,0.06); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--ink-text); background: rgba(79, 174, 201, 0.12); }
.nav-links a.active::after { transform: scaleX(1); background: var(--teal-soft); }

.nav-panel-eyebrow, .nav-panel-foot { display: none; }

/* The CTA and language links inside the panel footer are NOT nav links —
   they must not inherit ".nav-links a"'s muted color/underline/hover
   treatment. Scoped classes + no ::after pseudo-element keep them fully
   independent of that styling regardless of hover/focus state. */
.nav-panel-cta,
.nav-panel-cta:hover,
.nav-panel-cta:focus,
.nav-panel-cta:active {
  color: var(--ink) !important;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold)) !important;
}
.nav-panel-cta::after { content: none; }

.nav-panel-lang-group { width: 100%; margin-bottom: 1.1rem; }
.nav-panel-lang-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 0.6rem;
}
.nav-panel-lang-label .icon { width: 13px; height: 13px; }
.nav-panel-lang { width: 100%; }
/* Higher specificity than the base .lang-switch rule (which sets
   display:flex) so this hide-by-default actually wins the cascade
   regardless of source order. */
.nav-panel-foot .nav-panel-lang { display: none; }
.nav-panel-lang a,
.nav-panel-lang a:hover,
.nav-panel-lang a:active {
  flex: 1;
  text-align: center;
  color: var(--ink-muted) !important;
  background: none !important;
  font-size: 0.85rem;
}
.nav-panel-lang a::after { content: none; }
.nav-panel-lang a.active,
.nav-panel-lang a.active:hover,
.nav-panel-lang a.active:active { background: var(--teal) !important; color: var(--ink) !important; }

.nav-right { display: flex; align-items: center; gap: 1rem; }

.lang-switch {
  display: flex;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 3px;
  font-size: 0.78rem;
  font-weight: 600;
  flex-shrink: 0;
}
.lang-switch a {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  color: var(--ink-muted);
  transition: background .25s ease, color .25s ease;
}
.lang-switch a.active { background: var(--teal); color: var(--ink); }

/* Animated hamburger — three lines morph into an X when open */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0;
  width: 40px; height: 40px;
  flex-shrink: 0;
  align-items: center; justify-content: center;
}
.hamburger { position: relative; width: 20px; height: 14px; display: inline-block; }
.hamburger span {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-text);
  transition: transform .3s var(--ease), opacity .2s ease, top .3s var(--ease);
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 6px; }
.hamburger span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .hamburger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .hamburger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Backdrop behind the mobile nav panel */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 15, 22, 0.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 90;
}
.nav-backdrop.visible { opacity: 1; pointer-events: auto; }

/* Live timezone ticker */
.tz-ticker {
  border-bottom: 1px solid var(--line-dark);
  background: rgba(255,255,255,0.02);
}
.tz-ticker .container {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  height: 38px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tz-ticker .container::-webkit-scrollbar { display: none; }
.tz-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  color: var(--ink-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tz-item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal-soft); flex-shrink: 0; }
.tz-item strong { color: var(--ink-text); font-weight: 600; }

/* =====================================================================
   HERO
   ===================================================================== */

.hero {
  position: relative;
  padding-top: calc(76px + 38px);
  min-height: 100svh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(60% 55% at 82% 18%, rgba(79, 174, 201, 0.20), transparent 60%),
    radial-gradient(45% 40% at 15% 85%, rgba(200, 155, 92, 0.12), transparent 60%),
    var(--ink);
  overflow: hidden;
}
[dir="rtl"] .hero {
  background:
    radial-gradient(60% 55% at 18% 18%, rgba(79, 174, 201, 0.20), transparent 60%),
    radial-gradient(45% 40% at 85% 85%, rgba(200, 155, 92, 0.12), transparent 60%),
    var(--ink);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
  padding-block: 3rem 4rem;
}

.hero-copy h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.85rem);
  margin-bottom: 1.4rem;
}
.hero-copy .accent { color: var(--teal-soft); }

.hero-copy p.lead {
  font-size: 1.12rem;
  color: var(--ink-muted);
  max-width: 46ch;
  margin-bottom: 2.2rem;
}

.hero-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 3rem; }

/* Base treatment for any inline text link with a trailing arrow icon —
   works on both dark and light backgrounds. Specific contexts (like the
   hero, below) can override the color where a different look is wanted. */
.link-inline {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--teal);
}
.link-inline .icon { transition: transform .3s var(--ease); }
.link-inline:hover .icon { transform: translateX(3px); }
[dir="rtl"] .link-inline .icon { transform: scaleX(-1); }
[dir="rtl"] .link-inline:hover .icon { transform: scaleX(-1) translateX(3px); }

.hero-actions .link-inline { font-weight: 600; font-size: 0.94rem; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-text); }
.hero-actions .link-inline .icon { transition: transform .3s var(--ease); }
.hero-actions .link-inline:hover .icon { transform: translateX(3px); }
[dir="rtl"] .hero-actions .link-inline .icon { transform: scaleX(-1); }
[dir="rtl"] .hero-actions .link-inline:hover .icon { transform: scaleX(-1) translateX(3px); }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 2.4rem;
}
.hero-stats .stat-value {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--ink-text);
}
.hero-stats .stat-label { font-size: 0.8rem; color: var(--ink-muted); max-width: 15ch; margin-top: 0.2rem; }

/* Hero route graphic */
.hero-visual { position: relative; height: 460px; }
.hero-visual svg { width: 100%; height: 100%; overflow: visible; }
.route-path-glow {
  fill: none;
  stroke: url(#routeGradient);
  stroke-width: 6;
  stroke-linecap: round;
  opacity: 0.18;
  filter: blur(3px);
}
.route-path {
  fill: none;
  stroke: url(#routeGradient);
  stroke-width: 1.6;
  stroke-dasharray: 6 7;
  stroke-linecap: round;
  animation: dashFlow 18s linear infinite;
}
@keyframes dashFlow { to { stroke-dashoffset: -260; } }

/* The traveling pulse that rides the route, looping continuously */
.route-comet circle:first-child { animation: cometPulse 6.5s ease-in-out infinite; }
@keyframes cometPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .route-comet { display: none; }
}

.route-node circle.pulse {
  animation: pulseRing 2.6s ease-out infinite;
  transform-origin: center;
}
.route-node:nth-child(2) circle.pulse { animation-delay: .5s; }
.route-node:nth-child(3) circle.pulse { animation-delay: 1s; }
.route-node:nth-child(4) circle.pulse { animation-delay: 1.5s; }
@keyframes pulseRing {
  0% { r: 4; opacity: .8; }
  100% { r: 16; opacity: 0; }
}
.route-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  fill: var(--ink-muted);
  letter-spacing: .02em;
  /* A soft ink-colored outline behind the text keeps every label legible
     no matter what's directly behind it — the dashed route line, the
     glow, or the traveling pulse — instead of relying on empty space
     that isn't guaranteed as content (city/role names) varies in length. */
  paint-order: stroke fill;
  stroke: var(--ink);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.route-label.city { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; fill: var(--ink-text); stroke-width: 6px; }

.scroll-cue {
  position: absolute;
  bottom: 2rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
[dir="rtl"] .scroll-cue { transform: translateX(50%); }
.scroll-cue .line { width: 1px; height: 34px; background: linear-gradient(var(--teal-soft), transparent); animation: scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

/* =====================================================================
   SECTIONS — shared spacing
   ===================================================================== */

.section { padding-block: 6.5rem; position: relative; }
.section.compact { padding-block: 5rem; }
.light-band { background: var(--paper); color: var(--dark-text); }
.light-band .ink-muted-swap { color: var(--dark-muted); }

/* =====================================================================
   ABOUT
   ===================================================================== */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
}
.about-col { position: relative; padding-inline-start: 1.6rem; border-inline-start: 2px solid var(--ink-3); }
[dir="rtl"] .about-col { border-inline-start: 2px solid var(--ink-3); }
.about-col h3 { font-size: 1.35rem; margin-bottom: 0.9rem; color: var(--dark-text); }
.about-col p { color: var(--dark-muted); font-size: 1.02rem; }

/* =====================================================================
   SERVICES
   ===================================================================== */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.service-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: 2.1rem 1.8rem;
  transition: transform .4s var(--ease), border-color .35s ease, background .35s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(200, 155, 92, 0.4);
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
}
.service-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(79, 174, 201, 0.14);
  color: var(--teal-soft);
  margin-bottom: 1.4rem;
  transition: background .35s ease, color .35s ease;
}
.service-card:hover .service-icon { background: rgba(200, 155, 92, 0.18); color: var(--gold-soft); }
.service-icon .icon { width: 24px; height: 24px; }
.service-card h3 { font-size: 1.12rem; margin-bottom: 0.65rem; }
.service-card p { color: var(--ink-muted); font-size: 0.95rem; }

/* =====================================================================
   COVERAGE (signature section)
   ===================================================================== */

.coverage-section { background: var(--ink-2); }

.coverage-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
}

.coverage-map { position: relative; }
.coverage-map svg { width: 100%; height: auto; }

.coverage-list { display: flex; flex-direction: column; gap: 1rem; }
.coverage-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.03);
}
.coverage-card .pin {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(200, 155, 92, 0.16);
  color: var(--gold-soft);
  flex-shrink: 0;
}
.coverage-card .pin .icon { width: 20px; height: 20px; }
.coverage-card .city-name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
.coverage-card .city-role { font-size: 0.84rem; color: var(--ink-muted); margin-top: 0.15rem; }
.coverage-card .city-time {
  margin-inline-start: auto;
  text-align: end;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.coverage-card .city-time .time { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--teal-soft); }
.coverage-card .city-time .tz-label { font-size: 0.68rem; color: var(--ink-muted); }

/* =====================================================================
   TESTIMONIALS
   ===================================================================== */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}
.testimonial-card {
  background: var(--paper-2);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  box-shadow: 0 20px 40px -30px rgba(13, 39, 51, 0.25);
}
.testimonial-card .quote-icon { color: var(--teal); opacity: .5; width: 30px; height: 30px; margin-bottom: 1rem; }
.testimonial-card .stars { display: flex; gap: 0.2rem; color: var(--gold); margin-bottom: 1rem; }
.testimonial-card .stars .icon { width: 15px; height: 15px; fill: currentColor; }
.testimonial-card p.quote { font-size: 1.03rem; color: var(--dark-text); margin-bottom: 1.4rem; }
.testimonial-card .client { display: flex; align-items: center; gap: 0.8rem; }
.testimonial-card .avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--ink-3));
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-family: var(--font-display); font-size: .9rem;
  flex-shrink: 0;
}
.testimonial-card .client-name { font-weight: 700; font-size: 0.94rem; color: var(--dark-text); }
.testimonial-card .client-meta { font-size: 0.8rem; color: var(--dark-muted); }

/* =====================================================================
   CONTACT
   ===================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3.5rem;
}

.contact-info-list { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 2rem; }
.contact-info-item { display: flex; align-items: flex-start; gap: 1rem; }
.contact-info-item .ico {
  width: 42px; height: 42px; border-radius: 10px;
  background: rgba(79, 174, 201, 0.14); color: var(--teal-soft);
  display: grid; place-items: center; flex-shrink: 0;
}
.contact-info-item .ico .icon { width: 19px; height: 19px; }
.contact-info-item .label { font-size: 0.78rem; color: var(--ink-muted); margin-bottom: 0.2rem; }
.contact-info-item .value { font-weight: 600; font-size: 1rem; }
.contact-info-item .value a:hover { color: var(--teal-soft); }

.contact-form {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: 2.4rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--ink-muted); }
.field input, .field textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  color: var(--ink-text);
  font-family: inherit;
  font-size: 0.96rem;
  transition: border-color .25s ease, background .25s ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { border-color: var(--teal); background: rgba(255,255,255,0.06); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-muted); opacity: .7; }

/* Spam honeypot — invisible to real visitors, left as CSS (not display:none
   or type=hidden) so it still reads as a normal field to automated bots. */
.hp-field {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-alert {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.form-alert.success { background: rgba(79, 174, 201, 0.14); color: var(--teal-soft); border: 1px solid rgba(79, 174, 201, 0.3); }
.form-alert.error { background: rgba(214, 108, 90, 0.14); color: #E79684; border: 1px solid rgba(214, 108, 90, 0.3); }

/* =====================================================================
   FOOTER
   ===================================================================== */

.site-footer { background: #051520; border-top: 1px solid var(--line-dark); padding-block: 3.5rem 2rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand p { color: var(--ink-muted); font-size: 0.92rem; margin-top: 1rem; max-width: 34ch; }
.footer-col h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin-bottom: 1.1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col a { color: var(--ink-text); font-size: 0.92rem; }
.footer-col a:hover { color: var(--teal-soft); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 1.6rem; font-size: 0.82rem; color: var(--ink-muted); flex-wrap: wrap; gap: 1rem; }
.footer-social { display: flex; gap: 0.8rem; }
.footer-social a { width: 36px; height: 36px; border: 1px solid var(--line-dark); border-radius: 50%; display: grid; place-items: center; }
.footer-social a:hover { border-color: var(--teal-soft); color: var(--teal-soft); }
.footer-social .icon { width: 16px; height: 16px; }

/* =====================================================================
   WHATSAPP FLOAT
   ===================================================================== */

.whatsapp-btn {
  position: fixed;
  bottom: 1.8rem;
  inset-inline-end: 1.8rem;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: grid; place-items: center;
  box-shadow: 0 14px 30px -8px rgba(37, 211, 102, 0.55);
  z-index: 900;
  transition: transform .3s var(--ease);
}
.whatsapp-btn:hover { transform: scale(1.08); }
.whatsapp-btn svg { width: 28px; height: 28px; fill: #fff; }

/* =====================================================================
   PAGE INTRO — compact hero band used at the top of every subpage
   ===================================================================== */

.page-intro {
  position: relative;
  padding-top: calc(76px + 38px);
  padding-bottom: 3.5rem;
  background:
    radial-gradient(55% 60% at 85% 0%, rgba(79, 174, 201, 0.16), transparent 60%),
    var(--ink);
}
[dir="rtl"] .page-intro {
  background:
    radial-gradient(55% 60% at 15% 0%, rgba(79, 174, 201, 0.16), transparent 60%),
    var(--ink);
}
.page-intro h1 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 0.9rem; }
.page-intro p.lead { color: var(--ink-muted); font-size: 1.05rem; max-width: 56ch; }

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-bottom: 1.6rem;
}
.breadcrumbs a { color: var(--ink-muted); transition: color .2s ease; }
.breadcrumbs a:hover { color: var(--teal-soft); }
.breadcrumbs .sep { opacity: 0.5; }
.breadcrumbs .current { color: var(--ink-text); font-weight: 600; }
.light-band .breadcrumbs, .light-band .breadcrumbs a { color: var(--dark-muted); }
.light-band .breadcrumbs .current { color: var(--dark-text); }

/* =====================================================================
   HOME PAGE TEASER SECTIONS
   ===================================================================== */

.teaser-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.6rem;
}
.teaser-head .section-head { margin-bottom: 0; }

.coverage-banner {
  background: linear-gradient(135deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.coverage-banner p { font-size: 1.15rem; font-family: var(--font-display); font-weight: 600; max-width: 46ch; color: var(--ink-text); }

/* =====================================================================
   PORTFOLIO
   ===================================================================== */

.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 2.6rem;
}
.portfolio-filters a {
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--line-dark);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-muted);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.light-band .portfolio-filters a { border-color: var(--line-light); color: var(--dark-muted); }
.portfolio-filters a:hover { border-color: var(--teal-soft); color: var(--ink-text); }
.portfolio-filters a.active { background: var(--teal); border-color: var(--teal); color: var(--ink); }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.portfolio-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line-light);
  box-shadow: 0 20px 40px -30px rgba(13, 39, 51, 0.25);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.portfolio-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -26px rgba(13, 39, 51, 0.32); }
.portfolio-card .thumb {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--ink-3), var(--teal));
  position: relative;
  overflow: hidden;
}
.portfolio-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-card .thumb .placeholder-mark {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.35);
  font-family: var(--font-display); font-weight: 700; font-size: 2.4rem;
}
.portfolio-card .body { padding: 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.portfolio-card .card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.portfolio-card .category { font-size: 0.76rem; font-weight: 600; color: var(--teal); text-transform: uppercase; letter-spacing: 0.04em; }
.portfolio-card h3 { font-size: 1.08rem; color: var(--dark-text); }
.portfolio-card p.summary { font-size: 0.92rem; color: var(--dark-muted); flex: 1; }
.portfolio-card .card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--dark-muted); padding-top: 0.8rem; border-top: 1px solid var(--line-light); }
.portfolio-card .card-meta .link-inline { color: var(--teal); font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; }
.portfolio-card .card-meta .link-inline .icon { width: 0.95em; height: 0.95em; }

.status-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.status-badge.status-delivered { background: rgba(46, 139, 111, 0.14); color: #2E8B6F; }
.status-badge.status-delivered::before { background: #2E8B6F; }
.status-badge.status-current { background: rgba(200, 155, 92, 0.16); color: #A9762F; }
.status-badge.status-current::before { background: #C89B5C; }
.status-badge.status-upcoming { background: rgba(79, 174, 201, 0.14); color: #2C7A93; }
.status-badge.status-upcoming::before { background: #4FAEC9; }

.portfolio-empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--dark-muted);
  border: 1px dashed var(--line-light);
  border-radius: var(--radius-lg);
}

/* Project detail page */
.project-hero-image {
  width: 100%;
  aspect-ratio: 21/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--ink-3), var(--teal));
  margin-bottom: 3rem;
  position: relative;
}
.project-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.project-hero-image .placeholder-mark { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.3); font-family: var(--font-display); font-weight: 700; font-size: 4rem; }

.project-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; }
.project-body { color: var(--dark-muted); font-size: 1.05rem; }
.project-body p { margin-bottom: 1.2rem; }
.project-meta-card {
  background: var(--paper-2);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px -30px rgba(13, 39, 51, 0.25);
  padding: 1.8rem;
  height: fit-content;
  position: sticky;
  top: 100px;
}
.project-meta-card .meta-row { padding-block: 0.9rem; border-bottom: 1px solid var(--line-light); }
.project-meta-card .meta-row:last-of-type { border-bottom: none; }
.project-meta-card .meta-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dark-muted); margin-bottom: 0.35rem; }
.project-meta-card .meta-value { font-weight: 600; color: var(--dark-text); }
.project-meta-card .btn { margin-top: 1.2rem; }

.cta-banner {
  text-align: center;
  padding: 3.5rem 2rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line-dark);
}
.cta-banner h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-bottom: 0.7rem; }
.cta-banner p { color: var(--ink-muted); margin-bottom: 1.8rem; }

/* =====================================================================
   REVEAL ON SCROLL
   ===================================================================== */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { height: 320px; order: -1; }
  .about-grid, .coverage-layout, .contact-layout { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .project-layout { grid-template-columns: 1fr; }
  .project-meta-card { position: static; }
}

/* Nav links collapse into the hamburger menu well before things get cramped —
   6 links + language switch + CTA need real room to sit on one line. */
@media (max-width: 1150px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }

  .nav-links.mobile-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: calc(76px + 10px);
    inset-inline: 10px;
    background:
      radial-gradient(120% 70% at 100% 0%, rgba(79, 174, 201, 0.16), transparent 60%),
      var(--ink-2);
    padding: 1.3rem 1rem 1.5rem;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px -20px rgba(2, 10, 16, 0.6);
    gap: 0.15rem;
    align-items: stretch;
    max-height: calc(100svh - 76px - 20px);
    overflow-y: auto;
    z-index: 95;
  }

  .nav-panel-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-soft);
    padding: 0.4rem 0.9rem 0.9rem;
  }
  .nav-panel-eyebrow::before { content: ''; width: 18px; height: 1.5px; background: var(--gold-soft); }
  [dir="rtl"] .nav-panel-eyebrow { letter-spacing: 0.02em; }

  /* Staggered entrance for the eyebrow, each link, and the CTA block */
  .nav-links.mobile-open .nav-panel-eyebrow,
  .nav-links.mobile-open a,
  .nav-links.mobile-open .nav-panel-foot {
    opacity: 0;
    transform: translateY(-8px);
    animation: navItemIn .35s var(--ease) forwards;
  }
  .nav-links.mobile-open .nav-panel-eyebrow { animation-delay: 0s; }
  .nav-links.mobile-open a:nth-of-type(1) { animation-delay: .04s; }
  .nav-links.mobile-open a:nth-of-type(2) { animation-delay: .08s; }
  .nav-links.mobile-open a:nth-of-type(3) { animation-delay: .12s; }
  .nav-links.mobile-open a:nth-of-type(4) { animation-delay: .16s; }
  .nav-links.mobile-open a:nth-of-type(5) { animation-delay: .2s; }
  .nav-links.mobile-open a:nth-of-type(6) { animation-delay: .24s; }
  .nav-links.mobile-open .nav-panel-foot { animation-delay: .28s; }
  @keyframes navItemIn { to { opacity: 1; transform: translateY(0); } }

  .nav-links.mobile-open a {
    position: relative;
    padding: 0.85rem 0.9rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
    gap: 0.85rem;
    transition: background .2s ease, transform .15s ease;
  }
  .nav-links.mobile-open a::after { display: none; }
  .nav-links.mobile-open a:active { transform: scale(0.98); background: rgba(255,255,255,0.07); }

  /* Active page: tinted row + a colored accent bar at the leading edge */
  .nav-links.mobile-open a.active { background: rgba(79, 174, 201, 0.12); }
  .nav-links.mobile-open a.active::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: var(--teal-soft);
  }

  /* Icon chip — reuses the same tinted rounded-box treatment as the
     service cards elsewhere on the site, for visual consistency. */
  .nav-icon-chip {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(79, 174, 201, 0.12);
    color: var(--teal-soft);
    flex-shrink: 0;
    transition: background .2s ease, color .2s ease;
  }
  .nav-icon-chip .icon { width: 18px; height: 18px; }
  .nav-links.mobile-open a.active .nav-icon-chip { background: rgba(79, 174, 201, 0.22); color: var(--teal-soft); }
  .nav-item-label { font-weight: 500; }
  .nav-links.mobile-open a.active .nav-item-label { font-weight: 600; color: var(--ink-text); }

  .nav-panel-foot {
    display: block;
    margin-top: 0.7rem;
    padding: 1.1rem 0.9rem 0;
    border-top: 1px solid var(--line-dark);
  }

  /* .nav-panel-cta gets its tap-press feedback from the global .btn:active rule */
}

@media (prefers-reduced-motion: reduce) {
  .nav-links.mobile-open .nav-panel-eyebrow,
  .nav-links.mobile-open a,
  .nav-links.mobile-open .nav-panel-foot { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  :root { --gutter: 6.5vw; }
  .nav-right .btn-primary.desktop-only { display: none; }

  .services-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(3, auto); gap: 1.4rem; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding-block: 4.2rem; }
  .whatsapp-btn { width: 52px; height: 52px; bottom: 1.2rem; inset-inline-end: 1.2rem; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .coverage-banner { flex-direction: column; align-items: flex-start; text-align: start; }
  .teaser-head { align-items: flex-start; }
}

/* Very narrow phones: trim the top bar's language switch and spacing so the
   full company name is never truncated. The switch reappears inside the
   open menu itself at this same width, so switching language is always
   reachable — never removed, just relocated when space is tight. */
@media (max-width: 480px) {
  .nav-row { gap: 0.6rem; }
  .nav-right { gap: 0.45rem; }
  .brand { gap: 0.5rem; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-name { font-size: 0.95rem; }
  .nav-right .lang-switch { display: none; }
  .nav-toggle { width: 34px; height: 34px; }

  .nav-panel-foot .nav-panel-lang { display: flex; }
}