:root {
  --navy: #0b3d5c;
  --navy-dark: #082c42;
  --teal: #0f9b8e;
  --teal-dark: #0c7b71;
  --accent: #F78F1F;
  --accent-dark: #d97613;
  --whatsapp: #25d366;
  --whatsapp-dark: #1ea952;
  --ink: #1c2b33;
  --muted: #5b6b74;
  --bg: #f6f9fa;
  --border: #e1e8eb;
  --white: #ffffff;
  --radius: 12px;
  --shadow: 0 4px 20px rgba(11, 61, 92, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 { color: var(--navy); margin: 0 0 12px; }
h2 { font-size: 30px; }
h3 { font-size: 19px; }
p { margin: 0 0 12px; color: var(--muted); }

.section { padding: 72px 0; }
.section-sub { font-size: 17px; margin-bottom: 36px; max-width: 700px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(247, 143, 31, 0.35); }
.btn-accent:hover { background: var(--accent-dark); box-shadow: 0 6px 18px rgba(247, 143, 31, 0.45); }
.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-whatsapp:hover { background: var(--whatsapp-dark); }
.btn-lg { padding: 15px 30px; font-size: 16px; }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn[disabled] { opacity: .7; cursor: not-allowed; transform: none; }

.wa-icon { width: 20px; height: 20px; flex-shrink: 0; }
.btn-sm .wa-icon { width: 17px; height: 17px; }

.btn-pulse { animation: btn-pulse-ring 2.2s infinite; }
.btn-pulse:hover { animation-play-state: paused; }
@keyframes btn-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
  70% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 20px; }
.logo { display: flex; flex-direction: column; line-height: 1.1; }
.logo-img { height: 52px; width: auto; display: block; }
.logo-sub { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: .02em; margin-top: 6px; }
.main-nav { display: flex; gap: 26px; }
.main-nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; }
.main-nav a:hover { color: var(--teal); }
.header-actions { display: flex; align-items: center; gap: 18px; }
.phone-link { color: var(--navy); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; }

/* Hero */
.hero {
  background-color: var(--navy);
  background-size: cover; background-position: center 40%; background-repeat: no-repeat;
  color: #fff; padding: 64px 0; overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: 48px; align-items: start; position: relative; }
.hero-content { max-width: 620px; padding-top: 20px; position: relative; }
.eyebrow { color: #8fd1c9; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: 13px; margin-bottom: 14px; position: relative; }
.hero h1 { color: #fff; font-size: 38px; line-height: 1.2; margin-bottom: 18px; position: relative; }
.hero-sub { color: #d6e4ea; font-size: 18px; max-width: 560px; position: relative; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0; position: relative; }
.trust-points { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 560px; position: relative; }
.trust-points li { color: #cfe3ea; font-size: 14px; padding-left: 22px; position: relative; }
.trust-points li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

.google-rating-badge {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 24px; padding: 12px 20px 12px 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px; backdrop-filter: blur(6px);
  text-decoration: none; position: relative; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(14px);
  animation: googleBadgeIn .7s cubic-bezier(.22,1,.36,1) .5s forwards;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.google-rating-badge:hover {
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
  transform: translateY(-2px);
}
.google-rating-badge::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  animation: googleBadgeShine 3.2s ease-in-out 1.4s infinite;
}
.google-rating-badge-icon { flex-shrink: 0; display: inline-flex; }
.google-rating-badge-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,.22); }
.google-rating-badge-body { display: flex; flex-direction: column; gap: 3px; }
.google-rating-badge-top { display: flex; align-items: center; gap: 8px; }
.google-rating-badge-tagline { color: #fff; font-size: 13.5px; font-weight: 700; }
.google-rating-badge-stars { display: inline-flex; gap: 1px; }
.google-rating-badge-stars svg { opacity: 0; transform: scale(.4) rotate(-25deg); animation: googleStarPop .4s ease-out forwards; }
.google-rating-badge-text { color: #d6e4ea; font-size: 12.5px; }

@keyframes googleBadgeIn { to { opacity: 1; transform: translateY(0); } }
@keyframes googleBadgeShine { 0% { left: -60%; } 45%, 100% { left: 120%; } }
@keyframes googleStarPop { to { opacity: 1; transform: scale(1) rotate(0); } }

@media (prefers-reduced-motion: reduce) {
  .google-rating-badge, .google-rating-badge::after, .google-rating-badge-stars svg { animation: none; opacity: 1; transform: none; }
}


/* Hero form panel — the lead form lives inside the hero so it's visible without scrolling */
.hero-form-panel {
  background: #fff; border-radius: var(--radius); padding: 28px; box-shadow: 0 20px 50px rgba(0,0,0,.3);
  position: relative;
}
.hero-form-panel h2 { font-size: 21px; margin-bottom: 6px; }
.hero-form-sub { font-size: 14px; margin-bottom: 18px; }

.hero-form-panel.form-highlight { animation: form-highlight-pulse 1.4s ease; }
@keyframes form-highlight-pulse {
  0% { box-shadow: 0 20px 50px rgba(0,0,0,.3), 0 0 0 0 rgba(247,143,31,.65); }
  35% { box-shadow: 0 20px 50px rgba(0,0,0,.3), 0 0 0 16px rgba(247,143,31,0); transform: scale(1.015); }
  100% { box-shadow: 0 20px 50px rgba(0,0,0,.3), 0 0 0 0 rgba(247,143,31,0); transform: scale(1); }
}

/* Points from the CTA toward the form panel on desktop, where the panel is already in view */
.form-pointer {
  position: absolute; left: calc(100% / 1.85 - 44px); top: 210px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.form-pointer-arrow {
  width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700;
  box-shadow: 0 6px 16px rgba(247,143,31,.45); animation: form-pointer-bounce 1.3s ease-in-out infinite;
}
.form-pointer-label {
  font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(8,44,66,.85);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
@keyframes form-pointer-bounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(9px); }
}

/* Quick / Detailed form tabs — a mobile-friendly segmented toggle */
.form-tabs {
  display: flex; background: var(--bg); border-radius: 999px; padding: 4px; margin-bottom: 20px; gap: 4px;
}
.form-tab {
  flex: 1; border: none; background: none; padding: 10px 14px; border-radius: 999px;
  font-weight: 700; font-size: 13.5px; color: var(--muted); cursor: pointer; transition: background .15s ease, color .15s ease;
}
.form-tab.active { background: var(--navy); color: #fff; }
.form-pane { display: none; }
.form-pane.active { display: block; }

.gdpr-notice {
  display: flex; align-items: flex-start; gap: 8px; margin: 18px 0 0; padding-top: 16px;
  border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); line-height: 1.5;
}
.shield-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--teal); }

/* Route band — real ambulance photo + animated Germany-to-Turkey route indicator */
.route-band {
  position: relative; overflow: hidden; padding: 56px 0;
  background: linear-gradient(150deg, #2a6f96 0%, #1d5478 55%, #164764 100%);
}
.route-band::before {
  content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(247,143,31,.38), transparent 70%);
  top: -200px; right: -180px; filter: blur(20px); pointer-events: none;
}
.route-band::after {
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(15,155,142,.32), transparent 70%);
  bottom: -180px; left: -140px; filter: blur(20px); pointer-events: none;
}
.route-band-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.route-band-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; width: 100%;
}
.route-band-col { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.gallery-cta { align-self: center; }
/* Gallery — services, ambulances and company photos */
.gallery { width: 100%; max-width: 760px; }
.gallery-main {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.35); background: var(--navy-dark);
}
.gallery-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s ease;
}
.gallery-slide.active { opacity: 1; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%;
  background: rgba(8,44,66,.55); color: #fff; border: 1px solid rgba(255,255,255,.3); font-size: 18px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;
  transition: background .15s ease;
}
.gallery-nav:hover { background: rgba(8,44,66,.85); }
.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 14px; justify-content: center; flex-wrap: wrap; }
.gallery-thumb {
  position: relative; width: 62px; height: 42px; border-radius: 8px; overflow: hidden; padding: 0; cursor: pointer;
  border: 2px solid transparent; opacity: .6; transition: opacity .2s ease, border-color .2s ease; background: none;
}
.gallery-thumb img, .gallery-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb.active, .gallery-thumb:hover { opacity: 1; border-color: var(--accent); }
.gallery-thumb-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; background: rgba(8,44,66,.35); pointer-events: none;
}
.route-pin { color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; transition: opacity .3s ease; display: inline-block; }
.route-track { position: relative; flex: 1; height: 22px; display: flex; align-items: center; }
.route-line {
  position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(255,255,255,.4);
}
.route-vehicle {
  position: absolute; top: 50%; left: 0; transform: translate(0, -50%);
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  animation: route-travel 3.6s ease-in-out infinite;
}
@keyframes route-travel {
  0% { left: 0%; transform: translate(0, -50%); }
  50% { left: calc(100% - 26px); transform: translate(0, -50%); }
  100% { left: 0%; transform: translate(0, -50%); }
}
.route-caption {
  font-family: "Dancing Script", "Brush Script MT", cursive;
  font-weight: 600; font-style: italic; font-size: 26px; line-height: 1.3;
  color: #fff; margin: 4px 0 0; max-width: 380px;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.route-caption::after {
  content: ""; display: block; width: 60px; height: 3px; margin: 12px auto 0;
  border-radius: 999px; background: linear-gradient(90deg, var(--accent), #4fd6c4);
}

/* Globe + ambulance animation — a memorable "world to Turkey" visual metaphor */
.globe-animation { position: relative; width: 100%; max-width: 620px; }
.globe-svg { width: 100%; height: auto; display: block; overflow: visible; }
.globe-glow {
  position: absolute; left: 4%; top: 8%; width: 30%; padding-top: 30%; border-radius: 50%;
  background: radial-gradient(circle, rgba(15,155,142,.45), transparent 70%);
  filter: blur(20px); animation: globe-glow-pulse 3.4s ease-in-out infinite;
}
@keyframes globe-glow-pulse {
  0%, 100% { opacity: .5; transform: scale(.92); }
  50% { opacity: .9; transform: scale(1.08); }
}
.globe-rotate { animation: globe-spin 40s linear infinite; transform-origin: 140px 140px; }
@keyframes globe-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.flight-path { stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 9; animation: flight-dash 1.6s linear infinite; }
@keyframes flight-dash { to { stroke-dashoffset: -30; } }
.pin-dot { fill: var(--accent); }
.globe-radar {
  fill: none; stroke: rgba(79,214,196,.55); stroke-width: 1.5; transform-origin: 140px 140px;
  animation: globe-radar-ping 2.6s ease-out infinite;
}
@keyframes globe-radar-ping {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.35); opacity: 0; }
}
.globe-pin-label {
  position: absolute; transform: translate(-50%, -100%); font-size: 15px; padding-bottom: 6px;
}
.globe-pin-from { left: 23.4%; top: 20%; }
.globe-pin-to { left: 88.3%; top: 49.2%; }

/* Scroll-reveal animation (see main.js IntersectionObserver) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.reveal-visible { opacity: 1; transform: none; }
.process-steps .reveal:nth-child(2) { transition-delay: .08s; }
.process-steps .reveal:nth-child(3) { transition-delay: .16s; }
.process-steps .reveal:nth-child(4) { transition-delay: .24s; }
.services-grid .reveal:nth-child(2) { transition-delay: .08s; }
.services-grid .reveal:nth-child(3) { transition-delay: .16s; }
.services-grid .reveal:nth-child(4) { transition-delay: .24s; }
.services-grid .reveal:nth-child(5) { transition-delay: .32s; }
.why-grid .reveal:nth-child(2) { transition-delay: .08s; }
.why-grid .reveal:nth-child(3) { transition-delay: .16s; }
.why-grid .reveal:nth-child(4) { transition-delay: .24s; }

/* Trust bar */
.trust-bar { background: linear-gradient(180deg, #fff 0%, var(--bg) 100%); border-bottom: 1px solid var(--border); }
.trust-bar-inner { display: flex; justify-content: center; flex-wrap: wrap; padding: 26px 24px; gap: 14px; }
.trust-item {
  display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--navy); font-size: 14px;
  flex: 1; min-width: 220px; max-width: 280px; background: #fff; border: 1px solid var(--border);
  border-radius: 999px; padding: 10px 20px 10px 10px; box-shadow: 0 4px 14px rgba(11,61,92,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.trust-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11,61,92,.12); }
.trust-item-icon {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, #d9720f 100%); color: #fff;
  box-shadow: 0 4px 10px rgba(247,143,31,.35);
}
.trust-item-icon svg { width: 19px; height: 19px; }

/* Emergency notice */
.emergency-notice { background: #fff4e5; border-bottom: 1px solid #f3d9a8; }
.emergency-notice p { color: #8a5a00; font-size: 14px; margin: 12px 0; text-align: center; }

/* Process */
.process-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.process-photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); position: sticky; top: 100px; }
.process-photo img { width: 100%; display: block; }
.process-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.process-step { background: var(--bg); border-radius: var(--radius); padding: 26px 20px; }
.step-number {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 14px;
}

/* Services */
.services-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: start; }
.services-photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); position: sticky; top: 100px; }
.services-photo img { width: 100%; display: block; }
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.service-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }

/* Countries */
.countries-section { background: var(--bg); }
.countries-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px; margin-bottom: 24px;
}
.country-chip {
  background: #fff; border: 1px solid var(--border); padding: 10px 14px; border-radius: 10px;
  font-weight: 600; color: var(--navy); font-size: 13.5px; text-align: center;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.country-chip:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(11,61,92,.1); }
.countries-note { font-style: italic; }

@media (max-width: 700px) {
  .countries-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
  .country-chip { font-size: 12.5px; padding: 9px 10px; }
}

/* Why */
.why-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: start; }
.why-photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); position: sticky; top: 100px; }
.why-photo img { width: 100%; display: block; }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.why-card { padding: 4px 0; }

/* Form (nested inside .hero-form-panel) */
/* Honeypot spam trap — off-screen (not display:none) so simple bots that
   check computed visibility still find and fill it; real visitors never see it. */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-row { margin-bottom: 18px; }
.form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--navy); }
input, textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 15px; font-family: inherit; color: var(--ink);
}
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.consent-label { display: flex; gap: 10px; font-weight: 400; font-size: 13px; color: var(--muted); align-items: flex-start; }
.consent-label input { width: auto; margin-top: 3px; accent-color: var(--accent); }
.btn-submit { width: 100%; position: relative; }
.btn-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-slow-notice {
  margin-top: 16px; padding: 16px; background: #eafaf3; border: 1px solid #b9ecd4;
  border-radius: 10px; text-align: center;
}
.form-slow-notice p { color: #1b6b45; margin-bottom: 10px; font-size: 14px; }

.form-result { margin-top: 18px; padding: 20px; border-radius: 10px; text-align: center; }
.form-result.success { background: #eafaf3; border: 1px solid #b9ecd4; }
.form-result.error { background: #fdeceb; border: 1px solid #f3b7b2; }
.form-result h3 { margin-bottom: 8px; }
.form-result .btn { margin-top: 10px; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; background: #fff;
}
.faq-item summary { font-weight: 600; cursor: pointer; color: var(--navy); list-style: none; position: relative; padding-right: 26px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 0; top: -2px; color: var(--accent); font-size: 20px; font-weight: 700;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin-top: 10px; }

/* Footer */
.site-footer { background: var(--navy-dark); color: #cfe3ea; padding: 40px 0 26px; }
.footer-lang-switcher {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-lang-switcher-icon { display: inline-flex; color: #7d99a4; margin-right: 4px; }
.footer-lang-pill {
  display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04);
  color: #cfe3ea; font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.footer-lang-pill:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
.footer-lang-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; }
.footer-disclaimer { color: #a9c3cd; font-size: 12.5px; max-width: 900px; }
.footer-contact { display: flex; gap: 24px; flex-wrap: wrap; margin: 16px 0; font-size: 14px; }
.footer-contact a { color: #cfe3ea; }
.footer-copy { font-size: 12.5px; color: #7d99a4; margin: 0; }

/* Floating WhatsApp */
/* WhatsApp chat widget (sticky, bottom-right / bottom on mobile) */
.wa-widget {
  position: fixed; bottom: 20px; right: 20px; z-index: 100;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  max-width: calc(100vw - 40px);
  transition: transform .35s ease, opacity .35s ease;
}
/* Slide the widget off-screen while the lead form is in view (any screen size) so it can't
   sit on top of the submit button; it slides back in once the visitor scrolls past it. */
.wa-widget.wa-widget-away { transform: translateX(160%); opacity: 0; pointer-events: none; }

.wa-bubble {
  position: relative; background: #fff; border-radius: 18px 18px 4px 18px;
  padding: 16px 34px 16px 18px; box-shadow: 0 10px 28px rgba(11,61,92,.18);
  max-width: 260px;
  opacity: 0; transform: translateY(12px) scale(.92); transform-origin: bottom right;
  pointer-events: none; visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.wa-widget.wa-open .wa-bubble { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible; }
.wa-bubble-line1 { margin: 0 0 4px; font-weight: 700; font-size: 15px; color: var(--ink); }
.wa-bubble-line2 { margin: 0; font-size: 14px; color: var(--muted); }
.wa-bubble-close {
  position: absolute; top: 8px; right: 10px; width: 20px; height: 20px; border-radius: 50%;
  background: none; border: none; color: #9aa7ad; font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.wa-bubble-close:hover { background: var(--bg); color: var(--ink); }

.wa-pill {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--whatsapp); color: #fff; border-radius: 999px; padding: 7px 18px 7px 7px;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  animation: pulse 2.4s infinite, float-bounce 2.8s ease-in-out infinite;
  transition: transform .15s ease;
}
.wa-pill:hover { animation-play-state: paused; transform: translateY(-2px); }
.wa-avatar {
  position: relative; width: 42px; height: 42px; border-radius: 50%; background: #fff;
  color: var(--navy); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; flex-shrink: 0; border: 2px solid rgba(255,255,255,.6);
  overflow: hidden;
}
.wa-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wa-avatar-dot {
  position: absolute; bottom: -1px; right: -1px; width: 12px; height: 12px; border-radius: 50%;
  background: #3ddc61; border: 2px solid #fff;
}
.wa-pill-text { display: flex; flex-direction: column; line-height: 1.3; white-space: nowrap; }
.wa-pill-name { font-weight: 700; font-size: 14px; }
.wa-pill-status { font-size: 12px; opacity: .92; display: flex; align-items: center; gap: 5px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; display: inline-block; flex-shrink: 0; }
.wa-pill-icon { width: 26px; height: 26px; flex-shrink: 0; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@keyframes float-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (max-width: 600px) {
  .wa-widget { bottom: 14px; right: 14px; }
  .wa-pill-text { display: none; }
  .wa-pill { padding: 6px; gap: 6px; }
  .wa-bubble { max-width: 220px; }
}

/* Responsive */
@media (max-width: 900px) {
  .main-nav { display: none; }
  .hero h1 { font-size: 32px; }
  .logo-img { height: 40px; }
  .hero-grid { grid-template-columns: 1fr; }
  .process-layout, .services-layout, .why-layout { grid-template-columns: 1fr; }
  .process-photo, .services-photo, .why-photo { position: static; order: -1; }
  .services-layout .services-photo { order: 0; }
  .process-steps, .services-grid, .why-grid { grid-template-columns: 1fr 1fr; }

  /* Mobile priority: headline, then CTA, then the short description, so visitors see the
     action before the supporting copy without needing to scroll further (the lead form panel
     already follows directly, since it's the hero's second grid item). */
  .hero-content { display: flex; flex-direction: column; }
  .hero-content .eyebrow { order: 0; }
  .hero-content h1 { order: 1; }
  .hero-content .hero-ctas { order: 2; margin: 20px 0; }
  .hero-content .hero-sub { order: 3; }
  .hero-content .trust-points { order: 4; }
  .hero-content .google-rating-badge { order: 5; }

  .form-pointer { display: none; }
  .hero { background-position: center 25%; }
  .route-band-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .process-steps, .services-grid, .why-grid, .form-row-split, .trust-points { grid-template-columns: 1fr; }
  .header-actions .phone-link { display: none; }
  .hero { padding: 56px 0; }
  .hero h1 { font-size: 27px; }
  .route-animation { max-width: 100%; }
  .route-pin { font-size: 12px; }

  /* Mobile: drop the thumbnail strip to save vertical space — the prev/next arrows
     on the main slide are enough to browse the gallery. */
  .gallery-thumbs { display: none; }
  .gallery-nav { width: 40px; height: 40px; font-size: 22px; opacity: .95; }
}

/* RTL support (Arabic and other right-to-left locales) — mirrors directional icons and
   left/right-anchored elements; the rest of the layout (grid/flex) follows `dir` natively. */
[dir="rtl"] .trust-points li { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .trust-points li::before { left: auto; right: 0; }
[dir="rtl"] .form-pointer-arrow { transform: scaleX(-1); }
[dir="rtl"] .wa-pill-text { text-align: right; }
[dir="rtl"] .google-rating-badge-top { flex-direction: row-reverse; }
[dir="rtl"] .faq-item summary { padding-right: 0; padding-left: 26px; }
[dir="rtl"] .faq-item summary::after { right: auto; left: 0; }
[dir="rtl"] .hero-ctas, [dir="rtl"] .header-actions { flex-direction: row-reverse; }
[dir="rtl"] .footer-contact a[href^="tel:"],
[dir="rtl"] .footer-contact a[href^="mailto:"] { unicode-bidi: plaintext; }