@charset "UTF-8";
/* ============================================================
   SAWATELL — Brand foundation CSS
   Loaded after Elementor styles. Use SPARINGLY — most styling
   should go through Elementor Site Settings (Global Colors,
   Global Fonts). This file holds only what Elementor can't do.
   ============================================================ */

:root {
  /* STRICT brand palette — Blue / Cyan / Dark-gray / White */
  --sw-primary:    #003D90;  /* primary blue */
  --sw-primary-2:  #002C68;  /* darker blue (hover/depth) */
  --sw-primary-lt: #1E5FB8;  /* lighter blue */
  --sw-cyan:       #62DEDD;  /* secondary cyan */
  --sw-cyan-d:     #2FB5B3;  /* darker cyan (for contrast on light) */
  /* aliases so existing components recolor automatically */
  --sw-accent:     #62DEDD;
  --sw-accent-2:   #2FB5B3;
  --sw-ink:        #263238;  /* dark gray — text + dark sections */
  --sw-ink-2:      #1B2429;  /* deeper gray (footer) */
  --sw-text:       #263238;
  --sw-body:       #51606A;
  --sw-muted:      #8A98A0;
  --sw-paper:      #F2F6FB;
  --sw-surface:    #FFFFFF;
  --sw-border:     #E2E8F0;
  --sw-warm:       #F59E0B;
  --sw-header-h:   76px;
}

html { scroll-padding-top: calc(var(--sw-header-h) + 12px); }
body.sw-noscroll { overflow: hidden; }

body.sawatell-theme {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Big editorial typography — tightened letter-spacing */
body.sawatell-theme h1,
body.sawatell-theme .sawatell-hero-title,
body.sawatell-theme .elementor-heading-title.is-hero {
  letter-spacing: -0.02em;
  font-feature-settings: "ss01", "ss02";
}

/* ============================================================
   HERO — full-bleed video + poster + text overlay
   ============================================================ */
.sawatell-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sawatell-hero-video,
.sawatell-hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sawatell-hero-poster { z-index: -2; }
.sawatell-hero-video  { z-index: -1; }
.sawatell-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11,26,58,0.25) 0%, rgba(11,26,58,0.65) 100%);
}
/* Elementor bg video: ensure it truly covers the hero */
.sawatell-hero .elementor-background-video-container,
.sawatell-hero .elementor-background-video-hosted {
  width: 100%; height: 100%; object-fit: cover;
}
/* Legibility of hero text over a bright daytime clip */
.sawatell-hero .elementor-heading-title,
.sawatell-hero .elementor-widget-text-editor p {
  text-shadow: 0 1px 24px rgba(7,16,38,0.45);
}
/* Extra bottom vignette for text contrast */
.sawatell-hero > .elementor-background-overlay {
  background-image: linear-gradient(180deg, rgba(7,16,38,0.15) 0%, rgba(7,16,38,0.55) 100%) !important;
}

/* ============================================================
   STRATEGIC PRIORITY TAG — for Security card emphasis
   ============================================================ */
.sawatell-priority-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--sw-warm);
  color: var(--sw-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
}

/* ============================================================
   CARD HOVER LIFT — for Solutions, FeaturedProducts, etc.
   ============================================================ */
.sawatell-card {
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sawatell-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -10px rgba(10, 14, 26, 0.15);
}

/* ============================================================
   PARTNERS MARQUEE — infinite horizontal scroll
   Pause on hover. Edge fade via mask.
   ============================================================ */
.sawatell-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sawatell-marquee-track {
  display: flex;
  gap: 0;                 /* spacing lives in each item's padding so the two
                             halves stay EXACTLY equal -> seamless -50% loop */
  align-items: center;
  width: max-content;
  animation: sawatellMarquee 38s linear infinite;
  will-change: transform;
}
.sawatell-marquee:hover .sawatell-marquee-track {
  animation-play-state: paused;
}
@keyframes sawatellMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   SITE HEADER — transparent over hero, navy + blur on scroll
   ============================================================ */
#sawatell-header {
  position: sticky; top: 0; left: 0; right: 0; z-index: 1000;
  width: 100%;
  background: var(--sw-ink);                 /* solid by default (non-hero pages) */
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.sw-header-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 14px 32px;
  display: flex; align-items: center; gap: 28px;
}
.sw-logo { flex: 0 0 auto; display: inline-flex; align-items: center; line-height: 0; }
.sw-logo img { height: 34px; width: auto; display: block; }
.sw-nav { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 30px; }
.sw-nav ul { list-style: none; display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; }
.sw-nav a {
  color: #EAF0FB; text-decoration: none; font-family: 'Inter', sans-serif;
  font-size: 14.5px; font-weight: 500; letter-spacing: .005em; opacity: .82;
  transition: opacity .2s, color .2s; white-space: nowrap;
}
.sw-nav a:hover { opacity: 1; color: #fff; }
.sw-nav-cta { display: none; }   /* shown only inside the mobile panel */
.sw-header-right { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; }
.sw-header-cta {
  background: var(--sw-accent); color: #04261F; font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: 14px; letter-spacing: .01em;
  padding: 10px 20px; border-radius: 8px; text-decoration: none; white-space: nowrap;
  transition: background .2s, transform .08s;
}
.sw-header-cta:hover { background: var(--sw-accent-2); }
.sw-header-cta:active { transform: translateY(1px); }

/* Hero pages: header floats transparent over the hero, then solidifies */
body.sawatell-has-hero #sawatell-header { position: fixed; background: transparent; }
/* Solid navy on scroll. The second selector raises specificity so it ALWAYS
   beats the transparent hero rule above (which would otherwise win). */
#sawatell-header.is-scrolled,
body.sawatell-has-hero #sawatell-header.is-scrolled {
  background: #0B1A3A;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -14px rgba(0,0,0,.55);
}
.sw-header-inner { transition: padding .35s ease; }
#sawatell-header.is-scrolled .sw-header-inner { padding-top: 10px; padding-bottom: 10px; }

/* Burger (mobile) */
.sw-burger {
  display: none; flex-direction: column; gap: 5px; justify-content: center;
  width: 42px; height: 42px; padding: 9px; margin-left: auto;
  background: transparent; border: 0; cursor: pointer;
}
.sw-burger span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform .3s, opacity .2s; }
#sawatell-header.sw-nav-open .sw-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#sawatell-header.sw-nav-open .sw-burger span:nth-child(2) { opacity: 0; }
#sawatell-header.sw-nav-open .sw-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .sw-header-cta--bar { display: none; }
  .sw-burger { display: flex; }
  .sw-nav {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; justify-content: center; gap: 8px;
    background: var(--sw-ink);
    transform: translateX(100%); transition: transform .35s ease;
    padding: 80px 32px 40px;
  }
  #sawatell-header.sw-nav-open .sw-nav { transform: translateX(0); }
  .sw-nav ul { flex-direction: column; gap: 4px; width: 100%; }
  .sw-nav a { font-size: 22px; font-weight: 600; opacity: 1; padding: 12px 0; }
  .sw-nav-cta { display: inline-flex; margin-top: 24px; font-size: 16px; padding: 14px 28px; }
}

/* ============================================================
   LANGUAGE SWITCHER — glassy segmented toggle with flags
   ============================================================ */
.sw-lang {
  display: inline-flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 3px;
}
.sw-lang-opt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  color: #EAF0FB; text-decoration: none;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  opacity: .72; transition: opacity .2s, background .2s, color .2s;
}
.sw-lang-opt:hover { opacity: 1; }
.sw-lang-opt.is-active { background: #fff; color: var(--sw-ink); opacity: 1; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.sw-flag-wrap {
  width: 20px; height: 14px; border-radius: 3px; overflow: hidden;
  display: inline-block; line-height: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  flex: 0 0 auto;
}
.sw-flag { width: 100%; height: 100%; display: block; }
@media (max-width: 1024px) {
  .sw-lang-opt span { display: inline; }     /* keep labels — flags + code stay legible */
}

/* ============================================================
   GOOGLE REVIEWS
   ============================================================ */
.sw-greviews { width: 100%; }
.sw-greviews-badge {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 auto 32px; padding: 11px 20px;
  background: var(--sw-surface); border: 1px solid var(--sw-border);
  border-radius: 999px; box-shadow: 0 8px 28px -18px rgba(11,26,58,.35);
}
.sw-greviews-badge { display: flex; width: max-content; }
.sw-greviews-num { font-size: 22px; font-weight: 800; color: var(--sw-text); line-height: 1; }
.sw-greviews-stars { color: #FBBC05; font-size: 17px; letter-spacing: 1px; }
.sw-greviews-count { font-size: 13px; color: var(--sw-body); text-decoration: none; font-weight: 600; }
.sw-greviews-count:hover { color: var(--sw-primary); }
.sw-greview {
  background: var(--sw-surface); border: 1px solid var(--sw-border);
  border-radius: 14px; padding: 24px; text-align: left;
  display: flex; flex-direction: column; gap: 12px; height: 100%;
  box-shadow: 0 10px 30px -22px rgba(11,26,58,.4);
}
.sw-greview-top { display: flex; align-items: center; gap: 12px; }
.sw-greview-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.sw-greview-avatar--ph {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sw-primary); color: #fff; font-weight: 700; font-size: 18px;
}
.sw-greview-id { display: flex; flex-direction: column; line-height: 1.3; flex: 1 1 auto; }
.sw-greview-name { font-weight: 700; color: var(--sw-text); font-size: 15px; }
.sw-greview-when { font-size: 12px; color: var(--sw-muted); }
.sw-greview-g { line-height: 0; flex: 0 0 auto; }
.sw-greview-stars { color: #FBBC05; font-size: 15px; letter-spacing: 1px; }
.sw-greview-text { color: var(--sw-body); font-size: 14.5px; line-height: 1.6; margin: 0; }
.sw-greviews-cta {
  display: inline-block; margin-top: 36px; color: var(--sw-primary);
  font-weight: 600; font-size: 15px; text-decoration: none;
}
.sw-greviews-cta:hover { color: var(--sw-primary-2); }
.sw-g-logo { vertical-align: middle; }
@media (max-width: 900px) { .sw-greviews-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ACCESSIBILITY — reduced motion respect
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sawatell-marquee-track { animation: none; }
  .sawatell-card,
  .sawatell-card:hover { transform: none; transition: none; }
  .sawatell-hero-video { display: none; }
}

/* ============================================================
   STICKY HEADER MORPH
   When .is-scrolled is added by JS, background turns solid.
   ============================================================ */
.sawatell-sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.sawatell-sticky-header.is-scrolled {
  background-color: var(--sw-ink);
  box-shadow: 0 2px 12px rgba(10, 14, 26, 0.15);
}

/* ============================================================
   SERVICES (Solutions cards)
   ============================================================ */
.sw-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 1024px) { .sw-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .sw-services-grid { grid-template-columns: 1fr; } }
.sw-svc-card {
  display: flex; flex-direction: column;
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s;
}
.sw-svc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -16px rgba(11,26,58,.22);
  border-color: transparent;
}
.sw-svc-media {
  position: relative; display: block;
  aspect-ratio: 16 / 11;
  background: #eef2f8 center/cover no-repeat;
}
.sw-svc-media--icon { display: flex; align-items: center; justify-content: center; background: #f1f5fb; }
.sw-svc-media--icon img { width: 56px; height: 56px; }
.sw-svc-card.is-priority .sw-svc-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,184,166,0) 40%, rgba(11,26,58,.35) 100%);
}
.sw-svc-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--sw-accent); color: #04261F;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 6px;
}
.sw-svc-content { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; flex: 1 1 auto; }
.sw-svc-title { font-size: 17px; font-weight: 700; color: var(--sw-text); line-height: 1.25; }
.sw-svc-tagline { font-size: 13.5px; color: var(--sw-body); line-height: 1.45; }
.sw-svc-cta {
  margin-top: auto; padding-top: 12px;
  color: var(--sw-primary); font-weight: 600; font-size: 13.5px;
  transition: color .2s, gap .2s;
}
.sw-svc-card:hover .sw-svc-cta { color: var(--sw-accent-2); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.sw-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .sw-testimonials-grid { grid-template-columns: 1fr; } }
.sw-testimonial-card {
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sw-t-stars { color: var(--sw-warm); font-size: 16px; letter-spacing: 2px; }
.sw-t-quote {
  font-size: 16px;
  color: var(--sw-text);
  line-height: 1.55;
  margin: 0;
  font-style: normal;
}
.sw-t-quote p { margin: 0; }
.sw-t-attribution { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.sw-t-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.sw-t-name { font-weight: 600; color: var(--sw-text); font-size: 14px; }
.sw-t-role { color: var(--sw-muted); font-size: 12px; }

/* ============================================================
   FAQ
   ============================================================ */
.sw-faq-list { max-width: 800px; margin: 0 auto; }
.sw-faq-item {
  border-bottom: 1px solid var(--sw-border);
  padding: 0;
}
.sw-faq-q {
  cursor: pointer;
  list-style: none;
  padding: 20px 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--sw-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sw-faq-q::-webkit-details-marker { display: none; }
.sw-faq-chev { color: var(--sw-primary); font-size: 24px; font-weight: 300; transition: transform .25s; }
.sw-faq-item[open] .sw-faq-chev { transform: rotate(45deg); }
.sw-faq-a { padding: 0 8px 24px; color: var(--sw-body); font-size: 15px; line-height: 1.6; }
.sw-faq-a p { margin: 0 0 12px; }

/* ============================================================
   FEATURED PRODUCTS
   ============================================================ */
.sw-product-card {
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.sw-product-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -16px rgba(11,26,58,.22); border-color: transparent; }
.sw-product-img { aspect-ratio: 1 / 1; background: #fff; display: flex; align-items: center; justify-content: center; }
.sw-product-img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.sw-product-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }
.sw-product-brand { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--sw-accent-2); text-transform: uppercase; }
.sw-product-name { font-size: 14.5px; font-weight: 600; color: var(--sw-text); margin: 2px 0; line-height: 1.35; }
.sw-product-cta { margin-top: auto; padding-top: 10px; color: var(--sw-primary); font-size: 13px; font-weight: 600; }

/* ============================================================
   CAROUSELS (Swiper) — products + reviews
   ============================================================ */
/* Minimal Swiper core (scoped to our carousels) so layout never depends on the
   external CDN stylesheet, which the cache layer may strip. */
.sw-carousel.swiper { position: relative; overflow: hidden; list-style: none; z-index: 1; }
.sw-carousel .swiper-wrapper { position: relative; width: 100%; display: flex; box-sizing: content-box; transition-property: transform; }
.sw-carousel .swiper-slide { flex-shrink: 0; position: relative; transition-property: transform; }
.sw-carousel .swiper-pagination { position: absolute; text-align: center; transition: .3s opacity; z-index: 10; }
.sw-carousel .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 50%; margin: 0 4px; cursor: pointer; }

.sw-carousel { position: relative; padding: 4px 4px 56px; }
.sw-carousel .swiper-slide { height: auto; display: flex; }
.sw-carousel .swiper-slide > * { width: 100%; }
.sw-carousel .swiper-pagination { bottom: 16px; }
.sw-carousel .swiper-pagination-bullet { background: var(--sw-muted); opacity: .5; }
.sw-carousel .swiper-pagination-bullet-active { background: var(--sw-primary); opacity: 1; width: 22px; border-radius: 4px; }
.sw-cnav {
  position: absolute; top: calc(50% - 28px); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--sw-border); background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px -12px rgba(11,26,58,.4); transition: background .2s, color .2s, transform .1s;
}
.sw-cnav:hover { background: var(--sw-primary); border-color: var(--sw-primary); }
.sw-cnav::before { content: ""; width: 10px; height: 10px; border-top: 2px solid var(--sw-text); border-right: 2px solid var(--sw-text); }
.sw-cnav:hover::before { border-color: #fff; }
.sw-cnav-prev { left: -10px; } .sw-cnav-prev::before { transform: rotate(-135deg); margin-left: 4px; }
.sw-cnav-next { right: -10px; } .sw-cnav-next::before { transform: rotate(45deg); margin-right: 4px; }
.sw-cnav.swiper-button-disabled { opacity: 0; pointer-events: none; }
@media (max-width: 1100px) { .sw-cnav-prev { left: 2px; } .sw-cnav-next { right: 2px; } }

/* ============================================================
   CONTACT (modern split card)
   ============================================================ */
.sw-contact {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  max-width: 1040px; margin: 0 auto; text-align: left;
  background: var(--sw-surface); border: 1px solid var(--sw-border);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(11,26,58,.28);
}
@media (max-width: 860px) { .sw-contact { grid-template-columns: 1fr; } }
.sw-contact-info {
  background: linear-gradient(160deg, #0E2350 0%, #0B1A3A 100%);
  color: #EAF0FB; padding: 40px 36px; display: flex; flex-direction: column; gap: 18px;
}
.sw-contact-info h3 { color: #fff; font-size: 26px; font-weight: 700; line-height: 1.2; margin: 0; }
.sw-contact-info > p { color: #AEBBD6; font-size: 15px; line-height: 1.6; margin: 0; }
.sw-contact-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sw-contact-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: #DCE5F5; line-height: 1.5; }
.sw-contact-list a { color: #fff; text-decoration: none; }
.sw-contact-list a:hover { color: var(--sw-accent); }
.sw-ci-ic { flex: 0 0 32px; height: 32px; border-radius: 8px; background: rgba(20,184,166,.16); color: var(--sw-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.sw-contact-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.sw-contact-badges span { font-size: 12px; font-weight: 600; color: #DCE5F5; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); padding: 6px 12px; border-radius: 999px; }
.sw-contact-form { padding: 40px 36px; }

/* ============================================================
   VACANCIES
   ============================================================ */
.sw-vacancies-list { display: grid; gap: 16px; max-width: 800px; margin: 0 auto; }
.sw-vacancy-card {
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: 12px;
  padding: 24px 28px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.sw-vacancy-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px -10px rgba(10,14,26,.15); border-color: var(--sw-primary); }
.sw-vac-title { font-size: 20px; font-weight: 700; margin: 0; color: var(--sw-text); }
.sw-vac-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--sw-muted); }
.sw-vac-cta  { color: var(--sw-primary); font-size: 13px; font-weight: 600; margin-top: 4px; }

/* =============================================================
   Native SAWATELL forms (contact / quote / application)
   ============================================================= */
.sw-form { display: grid; gap: 16px; max-width: 100%; }
.sw-form-row { display: grid; gap: 16px; }
.sw-form-row-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .sw-form-row-2 { grid-template-columns: 1fr; } }
.sw-form label {
  display: block;
  font-size: 13px;
  color: var(--sw-body);
  font-weight: 600;
  letter-spacing: .2px;
}
.sw-form input[type="text"],
.sw-form input[type="email"],
.sw-form input[type="tel"],
.sw-form input[type="url"],
.sw-form input[type="file"],
.sw-form select,
.sw-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--sw-text);
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 6px;
  box-shadow: none;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.sw-form input:focus,
.sw-form select:focus,
.sw-form textarea:focus {
  border-color: var(--sw-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.sw-form textarea { resize: vertical; min-height: 110px; }
.sw-form-consent {
  font-size: 13px;
  color: var(--sw-body);
  line-height: 1.5;
}
.sw-form-consent label { font-weight: 400; }
.sw-form-consent input[type="checkbox"] { margin-right: 8px; vertical-align: middle; }
.sw-form-consent a { color: var(--sw-primary); }
.sw-form-submit {
  appearance: none;
  -webkit-appearance: none;
  background: var(--sw-primary);
  color: #fff;
  border: none;
  padding: 14px 32px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s, transform .1s;
  justify-self: start;
  margin-top: 4px;
}
.sw-form-submit:hover { background: #1D4ED8; }
.sw-form-submit:active { transform: translateY(1px); }
.sw-form-note { font-size: 12px; color: var(--sw-muted); margin: 0; }

/* Vacancy single page layout */
.sw-vacancy-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 96px 24px;
}
.sw-vacancy-page h1 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--sw-text);
  margin: 0 0 16px;
}
@media (max-width: 720px) { .sw-vacancy-page h1 { font-size: 32px; } }
.sw-vacancy-meta-bar {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--sw-muted);
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--sw-border);
}
.sw-vacancy-meta-bar strong { color: var(--sw-text); font-weight: 600; }
.sw-vacancy-body { font-size: 16px; line-height: 1.7; color: var(--sw-body); }
.sw-vacancy-body h2 { font-size: 22px; font-weight: 700; color: var(--sw-text); margin: 40px 0 16px; }
.sw-vacancy-body ul { padding-left: 22px; }
.sw-vacancy-body li { margin-bottom: 8px; }
.sw-vacancy-apply {
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 12px;
  padding: 32px;
  margin-top: 48px;
}
.sw-careers-archive {
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 24px;
}
.sw-careers-archive h1 {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--sw-text);
  margin: 0 0 16px;
  text-align: center;
}
@media (max-width: 720px) { .sw-careers-archive h1 { font-size: 36px; } }
.sw-careers-intro {
  text-align: center;
  color: var(--sw-body);
  max-width: 680px;
  margin: 0 auto 48px;
  font-size: 17px;
  line-height: 1.55;
}

/* ====================================================================
   ====================================================================
   SAWATELL v3 — sophistication pass (palette + header + footer + hero
   + about + telecom + faq + contact + scroll animations). Appended so
   these rules win on equal specificity.
   ==================================================================== */

/* ---------- HEADER (white base; blue links/CTA; cyan hover; white over hero) ---------- */
#sawatell-header { background: #fff; box-shadow: 0 1px 0 var(--sw-border); }
.sw-logo-img { height: 38px; width: auto; display: block; }
.sw-logo--white { display: none; } .sw-logo--blue { display: block; }
.sw-nav a { color: var(--sw-primary); font-weight: 600; opacity: 1; }
.sw-nav a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--sw-cyan); transition: width .25s ease; }
.sw-nav a:hover { color: var(--sw-cyan-d); }
.sw-nav a:hover::after { width: 100%; }
.sw-header-cta { background: var(--sw-primary); color: #fff; border-radius: 10px; padding: 11px 22px; }
.sw-header-cta:hover { background: var(--sw-primary-lt); color: #fff; }
#sawatell-header.is-scrolled { box-shadow: 0 6px 28px -14px rgba(38,50,56,.3), 0 1px 0 var(--sw-border); background: #fff; }
.sw-burger span { background: var(--sw-primary); }
.sw-lang { background: rgba(0,61,144,.06); border-color: rgba(0,61,144,.14); }
.sw-lang-opt { color: var(--sw-primary); font-weight: 700; }
.sw-lang-opt.is-active { background: var(--sw-primary); color: #fff; box-shadow: none; }

body.sawatell-has-hero #sawatell-header { position: fixed; background: transparent; box-shadow: none; }
body.sawatell-has-hero #sawatell-header.is-scrolled { background: #fff; box-shadow: 0 6px 28px -14px rgba(38,50,56,.3); }
body.sawatell-has-hero #sawatell-header:not(.is-scrolled) .sw-logo--white { display: block; }
body.sawatell-has-hero #sawatell-header:not(.is-scrolled) .sw-logo--blue { display: none; }
body.sawatell-has-hero #sawatell-header:not(.is-scrolled) .sw-nav a { color: #fff; }
body.sawatell-has-hero #sawatell-header:not(.is-scrolled) .sw-nav a:hover { color: var(--sw-cyan); }
body.sawatell-has-hero #sawatell-header:not(.is-scrolled) .sw-header-cta { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.65); }
body.sawatell-has-hero #sawatell-header:not(.is-scrolled) .sw-header-cta:hover { background: #fff; color: var(--sw-primary); box-shadow: none; }
body.sawatell-has-hero #sawatell-header:not(.is-scrolled) .sw-burger span { background: #fff; }
body.sawatell-has-hero #sawatell-header:not(.is-scrolled) .sw-lang { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }
body.sawatell-has-hero #sawatell-header:not(.is-scrolled) .sw-lang-opt { color: #fff; }
body.sawatell-has-hero #sawatell-header:not(.is-scrolled) .sw-lang-opt.is-active { background: #fff; color: var(--sw-primary); }
@media (max-width: 1024px) { .sw-nav { background: #fff; } .sw-nav a { color: var(--sw-primary) !important; } .sw-nav a::after { display: none; } }

/* ---------- HERO 100vh / 50vh + parallax + Ken Burns + scroll cue ---------- */
.sawatell-hero { min-height: 100vh; }
@media (max-width: 768px) { .sawatell-hero { min-height: 100vh !important; min-height: 100dvh !important; } }
.sawatell-hero .elementor-background-video-container { will-change: transform; }
.sawatell-hero .elementor-background-video-hosted { transform: scale(1.08); animation: swKenBurns 24s ease-in-out infinite alternate; }
@keyframes swKenBurns { from { transform: scale(1.06); } to { transform: scale(1.16); } }
.sw-scrollcue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3;
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.6); border-radius: 14px;
}
.sw-scrollcue::before { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; background: #fff; border-radius: 2px; transform: translateX(-50%); animation: swCue 1.8s ease-in-out infinite; }
@keyframes swCue { 0%,100% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translate(-50%, 12px); } }

/* ---------- Reusable section bits ---------- */
.sw-eyebrow { color: var(--sw-cyan-d); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 14px; }
.sw-eyebrow--cyan { color: var(--sw-cyan); }
.sw-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--sw-primary); color: #fff; font-weight: 600; font-size: 15px; padding: 15px 30px; border-radius: 12px; text-decoration: none; transition: background .2s, color .2s, transform .12s, box-shadow .2s; }
.sw-btn:hover { background: var(--sw-cyan); color: var(--sw-primary); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0,61,144,.5); }
.sw-btn--cyan { background: var(--sw-cyan); color: var(--sw-primary); }
.sw-btn--cyan:hover { background: #fff; color: var(--sw-primary); }

/* ---------- Scroll-reveal (only hides when JS is on; degrades gracefully) ---------- */
.sw-js .sw-anim { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.sw-js .sw-anim.is-in { opacity: 1; transform: none; }
.sw-js .sw-stagger > * { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.sw-js .sw-stagger.is-in > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sw-js .sw-anim, .sw-js .sw-stagger > * { opacity: 1 !important; transform: none !important; }
  .sawatell-hero .elementor-background-video-hosted { animation: none; }
  .sw-scrollcue::before { animation: none; }
}

/* ---------- ABOUT (editorial + parallax image + stats) ---------- */
.sw-about { max-width: 1240px; margin: 0 auto; }
.sw-about-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .sw-about-grid { grid-template-columns: 1fr; gap: 36px; } }
.sw-about-media { position: relative; }
.sw-about-imgwrap { display: block; border-radius: 20px; overflow: hidden; aspect-ratio: 4/5; box-shadow: 0 40px 80px -40px rgba(38,50,56,.5); }
.sw-about-imgwrap img { width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.sw-about-badge { position: absolute; right: -18px; bottom: 28px; background: #fff; border-radius: 14px; padding: 16px 22px; box-shadow: 0 20px 40px -18px rgba(38,50,56,.4); font-size: 22px; font-weight: 800; color: var(--sw-primary); letter-spacing: -.02em; display: flex; flex-direction: column; line-height: 1; }
.sw-about-badge strong { font-weight: 800; }
.sw-about-badge em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sw-muted); margin-top: 6px; }
@media (max-width: 900px) { .sw-about-badge { right: 16px; } }
.sw-about-body h2 { font-size: 40px; line-height: 1.12; letter-spacing: -.025em; color: var(--sw-text); margin: 0 0 18px; font-weight: 800; }
@media (max-width: 600px) { .sw-about-body h2 { font-size: 30px; } }
.sw-about-body p { color: var(--sw-body); font-size: 16px; line-height: 1.7; margin: 0 0 16px; }
.sw-about-lead { color: var(--sw-text) !important; font-weight: 600; }

/* ====================================================================
   v6 — About media: smaller footprint + 2-image editorial stack.
   A main portrait + a smaller landscape accent overlapping its lower-left,
   framed in white. They counter-parallax on scroll (JS adds the drift; the
   static offset reads fine on its own when JS/GSAP is unavailable).
   ==================================================================== */
/* Cap the media footprint (applies to the shortcode stack AND any native
   Elementor About variant — both share .sw-about-media) so the image reads
   smaller regardless of which markup is live. */
.sw-about-media { max-width: 460px; margin-inline: auto; }
.sw-about-media--stack { padding: 6px 26px 30px 14px; }
.sw-about-media--stack .sw-about-imgwrap { position: relative; }

/* main portrait — a touch shorter than the old 4/5, capped narrower overall */
.sw-about-imgwrap--main { aspect-ratio: 5 / 6; }
.sw-about-imgwrap--main img { width: 100%; height: 112%; object-fit: cover; object-position: center; }

/* accent — smaller landscape, overlapping the lower-left, white-framed */
.sw-about-imgwrap--accent {
  position: absolute; left: -14px; bottom: -18px;
  width: 50%; aspect-ratio: 4 / 3;
  border: 6px solid #fff; border-radius: 18px;
  box-shadow: 0 26px 48px -24px rgba(38,50,56,.55); z-index: 2;
}
.sw-about-imgwrap--accent img { width: 110%; height: 118%; margin-left: -5%; object-fit: cover; object-position: center 32%; }

/* badge floats above both layers, kept bottom-right so it never meets the accent */
.sw-about-media--stack .sw-about-badge { z-index: 3; right: -12px; bottom: 22px; }

@media (max-width: 900px) {
  .sw-about-media--stack { max-width: 420px; padding-right: 20px; }
  .sw-about-imgwrap--accent { width: 52%; left: -10px; bottom: -12px; }
  .sw-about-media--stack .sw-about-badge { right: 4px; }
}
@media (max-width: 600px) {
  .sw-about-media--stack { max-width: 330px; padding-bottom: 26px; }
  .sw-about-imgwrap--accent { width: 54%; }
}
.sw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; }
@media (max-width: 620px) { .sw-stats { grid-template-columns: repeat(2, 1fr); } }
.sw-stat { display: flex; flex-direction: column; gap: 4px; padding: 18px 16px; background: var(--sw-paper); border-radius: 14px; border: 1px solid var(--sw-border); }
.sw-stat-n { font-size: 22px; font-weight: 800; color: var(--sw-primary); letter-spacing: -.02em; }
.sw-stat-l { font-size: 12.5px; color: var(--sw-body); line-height: 1.35; }

/* ---------- TELECOM (dark primary-blue, rich) ---------- */
.sw-telecom { background: linear-gradient(160deg, #00337A 0%, #003D90 55%, #002C68 100%); border-radius: 26px; padding: 64px clamp(24px,5vw,72px); color: #fff; max-width: 1280px; margin: 0 auto; position: relative; overflow: hidden; }
.sw-telecom::after { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -160px; background: radial-gradient(circle, rgba(98,222,221,.22), transparent 70%); pointer-events: none; }
.sw-telecom-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: end; margin-bottom: 44px; position: relative; z-index: 1; }
@media (max-width: 860px) { .sw-telecom-head { grid-template-columns: 1fr; gap: 16px; } }
.sw-telecom-head h2 { font-size: 34px; line-height: 1.16; letter-spacing: -.02em; margin: 0; font-weight: 800; color: #fff; }
@media (max-width: 600px) { .sw-telecom-head h2 { font-size: 26px; } }
.sw-telecom-intro { color: #C7E9FF; font-size: 15.5px; line-height: 1.6; margin: 0; }
.sw-telecom-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; z-index: 1; }
@media (max-width: 860px) { .sw-telecom-cards { grid-template-columns: 1fr; } }
.sw-telecom-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 28px 24px; transition: background .25s, transform .25s, border-color .25s; }
.sw-telecom-card:hover { background: rgba(255,255,255,.1); transform: translateY(-4px); border-color: rgba(98,222,221,.5); }
.sw-telecom-num { color: var(--sw-cyan); font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.sw-telecom-card h3 { font-size: 19px; font-weight: 700; margin: 10px 0 8px; color: #fff; }
.sw-telecom-card p { font-size: 14px; line-height: 1.6; color: #BBD6EE; margin: 0; }
.sw-telecom-stats { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 40px 0 8px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.14); position: relative; z-index: 1; }
.sw-telecom-stat { display: flex; flex-direction: column; }
.sw-telecom-stat span { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.sw-telecom-stat em { font-style: normal; font-size: 12.5px; color: var(--sw-cyan); letter-spacing: .04em; }
.sw-telecom-cta { margin-top: 30px; position: relative; z-index: 1; }

/* ---------- SOLUTIONS card enhancements ---------- */
.sw-svc-card { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s, border-color .3s; }
.sw-svc-media { overflow: hidden; }
.sw-svc-media[style] { transition: transform .5s ease; }
.sw-svc-card:hover .sw-svc-media { transform: scale(1.06); }
.sw-svc-card:hover { box-shadow: 0 28px 50px -22px rgba(0,61,144,.28); }
.sw-svc-tag { background: var(--sw-cyan); color: var(--sw-primary); }

/* ---------- PRODUCTS hover ---------- */
.sw-product-brand { color: var(--sw-cyan-d); }
.sw-product-card:hover { box-shadow: 0 20px 40px -18px rgba(0,61,144,.26); }

/* ---------- FAQ (wider, modern accordion) ---------- */
.sw-faq-list { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; align-items: start; }
@media (max-width: 760px) { .sw-faq-list { grid-template-columns: 1fr; } }
.sw-faq-item { align-self: start; }
.sw-faq-item { background: #fff; border: 1px solid var(--sw-border); border-radius: 16px; padding: 4px 26px; transition: border-color .2s, box-shadow .2s, background .2s; }
.sw-faq-item[open] { border-color: var(--sw-primary); box-shadow: 0 16px 38px -22px rgba(0,61,144,.3); }
.sw-faq-q { display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; list-style: none; padding: 22px 0; font-size: 17px; font-weight: 700; color: var(--sw-text); }
.sw-faq-q::-webkit-details-marker { display: none; }
.sw-faq-chev { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--sw-paper); color: var(--sw-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 400; transition: transform .3s, background .2s, color .2s; }
.sw-faq-item[open] .sw-faq-chev { transform: rotate(45deg); background: var(--sw-primary); color: #fff; }
.sw-faq-a { padding: 0 0 22px; color: var(--sw-body); font-size: 15px; line-height: 1.7; }
.sw-faq-a p { margin: 0 0 10px; }

/* ---------- CONTACT (wider) ---------- */
.sw-contact { max-width: 1180px; grid-template-columns: 0.8fr 1.2fr; }
@media (max-width: 860px) { .sw-contact { grid-template-columns: 1fr; } }
.sw-contact-info { background: linear-gradient(160deg, #003D90 0%, #002C68 100%); }
.sw-contact-info h3 { font-size: 27px; }
.sw-ci-ic { background: rgba(98,222,221,.18); color: var(--sw-cyan); }
.sw-contact-list a:hover { color: var(--sw-cyan); }
.sw-form-submit { background: var(--sw-primary); border-radius: 10px; }
.sw-form-submit:hover { background: var(--sw-cyan); color: var(--sw-primary); }
.sw-form input:focus, .sw-form select:focus, .sw-form textarea:focus { border-color: var(--sw-primary); box-shadow: 0 0 0 3px rgba(0,61,144,.12); }

/* ---------- REVIEWS palette ---------- */
.sw-greviews-count:hover { color: var(--sw-primary); }
.sw-carousel .swiper-pagination-bullet-active { background: var(--sw-primary); }
.sw-cnav:hover { background: var(--sw-primary); border-color: var(--sw-primary); }
.sw-greview-avatar--ph { background: var(--sw-primary); }

/* ---------- FOOTER (rich, dark gray) ---------- */
.sw-footer { background: var(--sw-ink-2); color: #C6D0D6; }
.sw-footer-top { max-width: 1280px; margin: 0 auto; padding: 72px 36px 48px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; }
@media (max-width: 980px) { .sw-footer-top { grid-template-columns: 1fr 1fr; gap: 40px 32px; } }
@media (max-width: 560px) { .sw-footer-top { grid-template-columns: 1fr; } }
.sw-footer-logo { height: 40px; width: auto; margin-bottom: 18px; }
.sw-footer-tag { font-size: 14px; line-height: 1.65; color: #9FB0B8; max-width: 320px; margin: 0 0 14px; }
.sw-footer-slogan { font-size: 15px; font-style: italic; color: var(--sw-cyan); margin: 0 0 18px; }
.sw-footer-social { display: flex; gap: 10px; }
.sw-footer-social a { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; text-decoration: none; transition: background .2s, transform .12s; }
.sw-footer-social a:hover { background: var(--sw-primary); transform: translateY(-2px); }
.sw-footer-col h4 { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 18px; }
.sw-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.sw-footer-col a { color: #AFC0C8; text-decoration: none; font-size: 14px; transition: color .2s, padding-left .2s; }
.sw-footer-col a:hover { color: var(--sw-cyan); padding-left: 4px; }
.sw-footer-contact li { font-size: 14px; line-height: 1.5; margin-bottom: 11px; color: #AFC0C8; }
.sw-footer-contact a { color: #AFC0C8; }
.sw-footer-contact a:hover { color: var(--sw-cyan); }
.sw-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); }
.sw-footer-bottom { max-width: 1280px; margin: 0 auto; padding: 22px 36px; display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: center; font-size: 13px; color: #8A9AA2; }
.sw-footer-legal a { color: #8A9AA2; text-decoration: none; }
.sw-footer-legal a:hover { color: var(--sw-cyan); }
.sw-footer-legal .sw-dot { margin: 0 8px; opacity: .5; }

/* ---------- Editorial section headings (lift the "boring" feel) ---------- */
.sawatell-theme .elementor-widget-heading .elementor-heading-title { letter-spacing: -.02em; }

/* ====================================================================
   v3.1 FIXES — logo crossfade, hero cue, carousel nav, SVG icons
   ==================================================================== */

/* Logo: stack both versions in a fixed box and crossfade — NO position shift on scroll */
.sw-logo { position: relative; display: inline-block; width: 122px; height: 42px; flex: 0 0 auto; }
.sw-logo-img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 42px; width: auto; display: block !important; transition: opacity .3s ease; }
.sw-logo--blue { opacity: 1; }
.sw-logo--white { opacity: 0; }
body.sawatell-has-hero #sawatell-header:not(.is-scrolled) .sw-logo--white { opacity: 1; }
body.sawatell-has-hero #sawatell-header:not(.is-scrolled) .sw-logo--blue { opacity: 0; }

/* Hero scroll-cue was overlapping the trust line — remove it */
.sw-scrollcue { display: none !important; }

/* Carousel: arrows live in side gutters (never over cards); hidden on small screens */
.sw-carousel { padding: 4px 56px 58px; }
.sw-cnav { top: 42%; transform: translateY(-50%); }
.sw-cnav-prev { left: 2px; } .sw-cnav-next { right: 2px; }
.sw-carousel .swiper-pagination { left: 0; right: 0; }
@media (max-width: 1100px) { .sw-carousel { padding: 4px 2px 54px; } .sw-cnav { display: none; } }

/* SVG icon sizing/colors (replaces colored emoji) */
.sw-ci-ic { color: var(--sw-cyan); }
.sw-ci-ic svg { width: 17px; height: 17px; }
.sw-footer-social a { color: #fff; }
.sw-footer-social a:hover { color: #fff; }
.sw-footer-social svg { width: 18px; height: 18px; }
.sw-telecom-ic { width: 48px; height: 48px; border-radius: 13px; background: rgba(98,222,221,.16); color: var(--sw-cyan); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.sw-telecom-ic svg { width: 24px; height: 24px; }
.sw-telecom-num { display: block; margin-bottom: 2px; }
.sw-telecom-card { display: flex; flex-direction: column; }


/* ====================================================================
   v3.2 — inner pages polish (telecoms-b2b + careers) + inline icons
   ==================================================================== */
.sw-inline-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; vertical-align: -5px; color: var(--sw-cyan-d); margin-right: 7px; }
.sw-inline-ic svg { width: 22px; height: 22px; }

/* "Pourquoi SAWATELL" why-grid cards */
.sw-why-grid > div { transition: box-shadow .25s, transform .25s, border-color .25s; }
.sw-why-grid > div:hover { box-shadow: 0 18px 40px -20px rgba(0,61,144,.25); transform: translateY(-3px); border-color: var(--sw-cyan) !important; }
.sw-why-grid h3 { display: flex; align-items: center; }

/* Vacancy cards + meta icons */
.sw-vac-meta span { display: inline-flex; align-items: center; gap: 6px; }
.sw-vac-meta svg { width: 15px; height: 15px; color: var(--sw-cyan-d); flex: 0 0 auto; }
.sw-vacancy-card { transition: transform .25s, box-shadow .25s, border-color .25s; }
.sw-vacancy-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(0,61,144,.22); border-color: var(--sw-primary); }
.sw-vac-cta { color: var(--sw-primary); }
.sw-vacancy-meta-bar span { display: inline-flex; align-items: center; gap: 8px; }
.sw-vacancy-meta-bar svg { width: 17px; height: 17px; color: var(--sw-cyan-d); flex: 0 0 auto; }

/* Careers spontaneous-application CTA band */
.sw-careers-cta { background: linear-gradient(160deg, #003D90, #002C68); border-radius: 20px; padding: 56px 32px; margin-top: 64px; text-align: center; }
.sw-careers-cta h2 { color: #fff; font-size: 28px; font-weight: 800; margin: 0 0 12px; letter-spacing: -.02em; }
.sw-careers-cta > p { color: #C7E9FF; font-size: 16px; line-height: 1.55; max-width: 560px; margin: 0 auto 24px; }

/* B2B service cards: lift on the blue section */
.elementor-element-b2bsvc .sw-svc-card { box-shadow: 0 22px 44px -24px rgba(0,0,0,.55); }


/* ====================================================================
   v3.3 — Wassenger-style soft "aurora" background (light + blue glows)
   Pure CSS gradient (no image). Sits behind transparent light sections;
   white cards float on top. Video hero + dark bands stay opaque.
   ==================================================================== */
html { background: #fff; }
body.sawatell-theme { background: transparent; }
body.sawatell-theme::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    /* LEFT pulse — tall soft blue pool bleeding in from the left edge */
    radial-gradient(640px 900px at -6% 38%, rgba(0,61,144,.17), transparent 60%),
    /* RIGHT pulse — tall cyan pool from the right edge */
    radial-gradient(700px 960px at 106% 62%, rgba(98,222,221,.20), transparent 60%),
    /* faint top wash for depth */
    radial-gradient(1000px 560px at 50% -14%, rgba(98,170,255,.10), transparent 62%),
    /* near-WHITE base (was a flat light-blue wash) */
    linear-gradient(180deg, #ffffff 0%, #fbfdff 55%, #f6fbff 100%);
}

/* Make the light content sections transparent so the aurora shows through */
.elementor-element-swabout,
.elementor-element-swsolutions,
.elementor-element-swproducts,
.elementor-element-swtest,
.elementor-element-swfaq,
.elementor-element-swcontact,
.elementor-element-swtelecom {
  background-color: transparent !important;
  background-image: none !important;
}

/* On the aurora, white surfaces should read crisp; lift cards a touch */
.sw-svc-card, .sw-product-card, .sw-greview, .sw-faq-item, .sw-contact { background: #fff; }
.sw-stat { background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* Careers / legal pages: transparent main so aurora shows there too */
.sw-careers-archive, .sw-vacancy-page { background: transparent; }

/* ====================================================================
   v3.4 — hero video fix, wider content, header/nav, reviews nav,
   telecom art, About-badge logo, full /telecoms-b2b page
   ==================================================================== */
.sawatell-hero .elementor-background-video-hosted {
  top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
  object-fit: cover !important; transform: none !important; animation: none !important;
}
.sawatell-hero .elementor-background-video-container { transform: none !important; }

.sw-header-inner { max-width: 1360px; }
.sawatell-theme .e-con-boxed > .e-con-inner { max-width: 1360px; }
.sw-about { max-width: 1340px; }
.sw-contact { max-width: 1300px; }
.sw-telecom { max-width: 1360px; }
.sw-faq-list { max-width: 1180px; }

.sw-nav a { position: relative; }
.sw-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; width: auto; height: 2px;
  background: var(--sw-cyan); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.sw-nav a:hover::after { transform: scaleX(1); }
@media (max-width:1024px){ .sw-nav a::after { display: none; } }
.sw-header-cta { display: inline-flex; align-items: center; gap: 8px; }
.sw-header-cta svg { width: 16px; height: 16px; }

.sw-carousel { padding: 4px 4px 80px; }
.sw-carousel .swiper-pagination { bottom: 30px; left: 0; right: 0; }
.sw-cnav { top: auto; bottom: 14px; transform: none; width: 42px; height: 42px; }
.sw-cnav-prev { left: calc(50% - 108px); right: auto; }
.sw-cnav-next { right: calc(50% - 108px); left: auto; }
.sw-cnav.swiper-button-disabled { opacity: .35 !important; pointer-events: none; display: flex; }

.sw-telecom-head { grid-template-columns: 1.15fr .85fr; align-items: center; }
.sw-telecom-art { display: flex; justify-content: center; align-items: center; }
.sw-telecom-art .sw-net { width: 100%; max-width: 360px; height: auto; }
@media (max-width: 860px){ .sw-telecom-head { grid-template-columns: 1fr; } .sw-telecom-art { display: none; } }

.sw-about-badge { align-items: flex-start; gap: 0; }
.sw-about-badge-logo { height: 26px; width: auto; display: block; margin-bottom: 5px; }

/* ---------------- /telecoms-b2b ---------------- */
.sw-b2b { color: var(--sw-text); }
.sw-b2b-inner { max-width: 1360px; margin: 0 auto; padding: 0 32px; }
.sw-b2b-hero { position: relative; overflow: hidden; color: #fff; padding: 158px 0 96px;
  background: linear-gradient(150deg, #00337A 0%, #003D90 52%, #002C68 100%); }
.sw-b2b-hero::after { content:""; position:absolute; right:-160px; top:-120px; width:520px; height:520px;
  background: radial-gradient(circle, rgba(98,222,221,.20), transparent 70%); pointer-events:none; }
.sw-b2b-hero-art { position: absolute; right: 2%; top: 50%; transform: translateY(-50%); width: 540px; max-width: 46%; opacity: .95; pointer-events: none; }
.sw-b2b-hero-art .sw-net { width: 100%; height: auto; }
@media (max-width: 980px){ .sw-b2b-hero-art { display: none; } }
.sw-b2b-hero-grid { position: relative; z-index: 1; }
.sw-b2b-hero-text { max-width: 660px; }
.sw-b2b-hero h1 { font-size: clamp(30px, 4vw, 50px); line-height: 1.1; letter-spacing: -.025em; font-weight: 800; margin: 14px 0 18px; color: #fff; }
.sw-b2b-hero-sub { font-size: 17px; line-height: 1.6; color: #C7E9FF; margin: 0 0 28px; max-width: 560px; }
.sw-b2b-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.sw-btn-ghost { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; padding: 14px 22px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.4); transition: background .2s, border-color .2s; }
.sw-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.sw-btn-ghost svg { width: 18px; height: 18px; }
.sw-b2b-services { padding: 84px 0; }
.sw-b2b-services h2, .sw-b2b-why h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -.02em; margin: 6px 0 36px; color: var(--sw-text); }
.sw-b2b-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px){ .sw-b2b-cards { grid-template-columns: 1fr; } }
.sw-b2b-card { background: #fff; border: 1px solid var(--sw-border); border-radius: 18px; padding: 32px 28px; box-shadow: 0 24px 54px -32px rgba(0,61,144,.32); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.sw-b2b-card:hover { transform: translateY(-5px); box-shadow: 0 32px 60px -30px rgba(0,61,144,.4); }
.sw-b2b-ic { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, #003D90, #1E5FB8); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.sw-b2b-ic svg { width: 26px; height: 26px; }
.sw-b2b-ic--sm { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 14px; }
.sw-b2b-ic--sm svg { width: 22px; height: 22px; }
.sw-b2b-card h3 { font-size: 20px; font-weight: 700; margin: 0 0 8px; color: var(--sw-text); }
.sw-b2b-card > p { font-size: 14.5px; line-height: 1.6; color: var(--sw-body); margin: 0 0 16px; }
.sw-b2b-card ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sw-b2b-card li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--sw-body); }
.sw-b2b-card li svg { width: 17px; height: 17px; color: var(--sw-cyan-d); flex: 0 0 auto; margin-top: 2px; }
.sw-b2b-card-cta { margin-top: auto; color: var(--sw-primary); font-weight: 600; font-size: 14px; text-decoration: none; }
.sw-b2b-card-cta:hover { color: var(--sw-cyan-d); }
.sw-b2b-why { padding: 20px 0 84px; }
.sw-b2b-why-head { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin-bottom: 40px; }
@media (max-width: 900px){ .sw-b2b-why-head { grid-template-columns: 1fr; gap: 22px; } }
.sw-b2b-why-head blockquote { margin: 0; padding: 24px 28px; background: var(--sw-paper); border-left: 3px solid var(--sw-cyan); border-radius: 12px; font-style: italic; color: var(--sw-text); font-size: 16px; line-height: 1.6; }
.sw-b2b-why-head cite { display: block; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sw-muted); margin-top: 14px; }
.sw-b2b-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px){ .sw-b2b-why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .sw-b2b-why-grid { grid-template-columns: 1fr; } }
.sw-b2b-why-card { background: #fff; border: 1px solid var(--sw-border); border-radius: 16px; padding: 24px; }
.sw-b2b-why-card h4 { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--sw-text); }
.sw-b2b-why-card p { font-size: 13.5px; line-height: 1.55; color: var(--sw-body); margin: 0; }
.sw-b2b-stats { display: flex; flex-wrap: wrap; gap: 16px 48px; margin-top: 40px; padding: 28px 36px; background: linear-gradient(135deg, #003D90, #002C68); border-radius: 18px; }
.sw-b2b-stats div { display: flex; flex-direction: column; }
.sw-b2b-stats span { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.sw-b2b-stats em { font-style: normal; font-size: 12.5px; color: var(--sw-cyan); }
.sw-b2b-faq { padding: 20px 0 84px; }
.sw-b2b-contact { padding: 0 0 96px; }
.sw-b2b-contact-card { display: grid; grid-template-columns: .82fr 1.18fr; background: #fff; border: 1px solid var(--sw-border); border-radius: 22px; overflow: hidden; box-shadow: 0 44px 90px -44px rgba(0,61,144,.34); }
@media (max-width: 860px){ .sw-b2b-contact-card { grid-template-columns: 1fr; } }
.sw-b2b-contact-info { background: linear-gradient(160deg, #003D90, #002C68); color: #fff; padding: 46px 40px; }
.sw-b2b-contact-info h2 { color: #fff; font-size: 28px; margin: 6px 0 12px; font-weight: 800; }
.sw-b2b-contact-info > p { color: #C7E9FF; font-size: 15px; line-height: 1.6; margin: 0 0 22px; }
.sw-b2b-contact-form { padding: 46px 40px; }

/* Fix: the in-nav CTA must stay hidden on desktop (the .sw-header-cta
   display rule had overridden .sw-nav-cta) — show it only in the mobile panel */
.sw-nav-cta { display: none; }
@media (max-width: 1024px) { .sw-nav-cta { display: inline-flex; } }

/* Fix: keep the About badge compact — Elementor's `.elementor img` rule was
   forcing the logo to full width. Higher specificity + !important wins. */
.sw-about-media .sw-about-badge { padding: 14px 20px; }
.sw-about-media .sw-about-badge-logo {
  height: 22px !important; width: auto !important; max-width: 170px !important; display: block; margin-bottom: 6px;
}

/* ====================================================================
   v3.5 — carousel controls below cards (Swiper's CSS was resetting our
   padding to 0, so dots/arrows sat over the cards & arrows were invisible)
   + FAQ chevron centering + consistent buttons
   ==================================================================== */
.sw-carousel.swiper { padding: 4px 4px 90px !important; overflow: hidden; }
.sw-carousel .swiper-pagination { position: absolute; bottom: 34px; left: 0; right: 0; top: auto; text-align: center; }
.sw-cnav {
  position: absolute; top: auto !important; bottom: 22px; transform: none !important;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; z-index: 6;
  background: var(--sw-primary) !important; border: none !important;
  display: flex !important; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -8px rgba(0,61,144,.55);
}
.sw-cnav::before { border-color: #fff !important; }
.sw-cnav:hover { background: var(--sw-primary-2) !important; }
.sw-cnav-prev { left: calc(50% - 120px) !important; right: auto !important; }
.sw-cnav-next { right: calc(50% - 120px) !important; left: auto !important; }
.sw-cnav.swiper-button-disabled { opacity: .4 !important; pointer-events: none; }

/* FAQ chevron: SVG plus, perfectly centered, rotates to × on open */
.sw-faq-chev { display: inline-flex; align-items: center; justify-content: center; }
.sw-faq-chev svg { width: 18px; height: 18px; display: block; stroke-width: 2.2; }
.sw-faq-item[open] .sw-faq-chev { transform: rotate(45deg); }

/* Consistent buttons (same height, no wrap) — fixes the b2b hero CTAs */
.sw-btn, .sw-btn--cyan, .sw-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 26px; font-size: 15px; font-weight: 600; line-height: 1;
  border-radius: 12px; white-space: nowrap; box-sizing: border-box;
}
.sw-btn svg, .sw-btn--cyan svg, .sw-btn-ghost svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ====================================================================
   v3.6 — true header nav centering + hero vertical centering
   ==================================================================== */
/* Header: 3-column grid so the nav is centered on the PAGE (logo left,
   actions right) regardless of their differing widths. */
@media (min-width: 1025px) {
  .sw-header-inner { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
  .sw-logo { justify-self: start; }
  .sw-nav  { justify-self: center; flex: 0 1 auto; }
  .sw-header-right { justify-self: end; }
}

/* Hero: shift content down by the header height so it reads centered in the
   visible area below the fixed header (top padding = base + header). */
.sawatell-hero { padding-top: calc(92px + var(--sw-header-h)) !important; padding-bottom: 92px !important; }
@media (max-width: 768px) {
  .sawatell-hero { padding-top: calc(36px + var(--sw-header-h)) !important; padding-bottom: 40px !important; }
}

/* ====================================================================
   v3.7 — carousel dots vertically centered with the arrows
   ==================================================================== */
.sw-carousel .swiper-pagination {
  bottom: 22px !important; top: auto !important; height: 44px;
  display: flex; align-items: center; justify-content: center;
}

/* ====================================================================
   v3.8 — ghost-button hover, floating + footer language switcher,
   mobile responsiveness pass, partner marquee
   ==================================================================== */

/* Ghost button: keep text white on hover (theme a:hover was darkening it) */
.sw-btn-ghost, .sw-btn-ghost:hover, .sw-btn-ghost:focus { color: #fff !important; }
.sw-btn-ghost:hover { background: rgba(255,255,255,.12) !important; border-color: #fff !important; }
.sw-btn-ghost svg { color: #fff !important; }

/* Floating language switcher (bottom-right) */
.sw-lang-float { position: fixed; right: 18px; bottom: 18px; z-index: 950; }
.sw-lang-float .sw-lang { background: #fff; border: 1px solid var(--sw-border); box-shadow: 0 12px 32px -10px rgba(0,61,144,.4); padding: 5px; }
.sw-lang-float .sw-lang-opt { color: var(--sw-primary); opacity: .8; }
.sw-lang-float .sw-lang-opt.is-active { background: var(--sw-primary); color: #fff; opacity: 1; }
@media (max-width: 768px) { .sw-lang-float { right: 12px; bottom: 12px; } }

/* Footer language switcher (dark footer) */
.sw-footer-lang { margin-top: 20px; }
.sw-footer-lang .sw-lang { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.sw-footer-lang .sw-lang-opt { color: #C6D0D6; }
.sw-footer-lang .sw-lang-opt.is-active { background: #fff; color: var(--sw-ink); }

/* ---------------- MOBILE responsiveness pass ---------------- */
@media (max-width: 768px) {
  .sawatell-theme .e-con > .e-con-inner { padding-left: 16px !important; padding-right: 16px !important; }
  .sw-b2b-inner, .sw-careers-archive, .sw-vacancy-page { padding-left: 18px; padding-right: 18px; }

  .sw-about-body h2 { font-size: 26px; line-height: 1.18; }
  .sw-telecom-head h2 { font-size: 23px; }
  .sw-b2b-services h2, .sw-b2b-why h2 { font-size: 24px; }
  .sw-b2b-hero h1 { font-size: 29px; }
  .sw-eyebrow { font-size: 11px; }

  /* About */
  .sw-about-grid { gap: 26px; }
  .sw-about-badge { right: 12px; bottom: 14px; padding: 11px 16px; }
  .sw-stats { gap: 12px; }
  .sw-stat { padding: 14px 12px; }
  .sw-stat-n { font-size: 19px; }

  /* Telecom */
  .sw-telecom { padding: 38px 20px; border-radius: 18px; }
  .sw-telecom-cards { gap: 14px; }
  .sw-telecom-card { padding: 22px 20px; }
  .sw-telecom-stats { gap: 14px 26px; }
  .sw-telecom-stat span { font-size: 20px; }

  /* Contact */
  .sw-contact-info, .sw-contact-form { padding: 28px 20px; }
  .sw-contact-info h3 { font-size: 22px; }
  .sw-form-row-2 { grid-template-columns: 1fr; }

  /* Footer */
  .sw-footer-top { padding: 46px 20px 30px; gap: 30px; }
  .sw-footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px; text-align: left; }

  /* B2B */
  .sw-b2b-hero { padding-top: calc(40px + var(--sw-header-h)); padding-bottom: 54px; }
  .sw-b2b-services, .sw-b2b-why, .sw-b2b-faq { padding: 50px 0; }
  .sw-b2b-card { padding: 26px 22px; }
  .sw-b2b-stats { padding: 22px 24px; gap: 16px 26px; }
  .sw-b2b-stats span { font-size: 21px; }
  .sw-b2b-contact-info, .sw-b2b-contact-form { padding: 30px 22px; }
  .sw-b2b-hero-cta { width: 100%; }
  .sw-b2b-hero-cta .sw-btn--cyan, .sw-b2b-hero-cta .sw-btn-ghost { flex: 1 1 auto; }

  /* Buttons a touch smaller */
  .sw-btn, .sw-btn--cyan, .sw-btn-ghost { height: 50px; padding: 0 20px; font-size: 14.5px; }

  /* Partner marquee — show several logos, not one */
  .sw-partner { padding: 0 16px !important; }
  .sw-partner img { max-height: 30px !important; }
  .sw-partner-fallback { font-size: 13px !important; padding: 8px 14px !important; letter-spacing: 2px !important; }

  /* Carousel nav: smaller + closer to the dots */
  .sw-cnav { width: 40px; height: 40px; }
  .sw-cnav-prev { left: calc(50% - 94px) !important; }
  .sw-cnav-next { right: calc(50% - 94px) !important; }
}
@media (max-width: 480px) {
  .sw-about-body h2, .sw-b2b-hero h1 { font-size: 25px; }
  .sw-telecom { padding: 32px 16px; }
  .sw-b2b-card, .sw-telecom-card { padding: 22px 18px; }
}

/* Mobile header: hide the bar CTA (it's in the menu), show the burger, and
   fix the menu overlay z-index (-1 let page content bleed through). */
@media (max-width: 1024px) {
  .sw-header-cta--bar { display: none !important; }
  .sw-burger { display: flex !important; }
  .sw-nav { z-index: 998 !important; }
  #sawatell-header.sw-nav-open .sw-burger { position: relative; z-index: 1001; }
}
/* Kill the stray magenta background on the burger (theme focus/active style)
   and make the open "X" blue so it's visible over the white menu overlay. */
.sw-burger { background: transparent !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; }
.sw-burger:hover, .sw-burger:focus, .sw-burger:focus-visible, .sw-burger:active { background: transparent !important; outline: none !important; box-shadow: none !important; }
#sawatell-header.sw-nav-open .sw-burger span { background: var(--sw-primary) !important; }

/* ====================================================================
   v3.9 — proper mobile drawer, left-aligned + smaller mobile type,
   clickable carousel arrows with real chevron icons
   ==================================================================== */

/* Drawer head/foot hidden on desktop */
.sw-nav-top, .sw-nav-foot { display: none; }

/* Carousel arrows: real SVG chevrons (drop the CSS ::before triangle) +
   make sure they're actually clickable (pagination was covering them). */
.sw-cnav::before { display: none !important; }
.sw-cnav { z-index: 7 !important; pointer-events: auto; }
.sw-cnav svg { width: 18px; height: 18px; display: block; color: #fff; }
.sw-cnav svg path { stroke: #fff; }
.sw-carousel .swiper-pagination {
  width: auto !important; left: 50% !important; right: auto !important;
  transform: translateX(-50%); pointer-events: none;
}
.sw-carousel .swiper-pagination-bullet { pointer-events: auto; }

/* ---------------- MOBILE drawer + typography (≤1024 / ≤768) ---------------- */
@media (max-width: 1024px) {
  .sw-lang-float { display: none; }            /* lang now lives in the menu on mobile */

  .sw-nav {
    position: fixed; inset: 0; z-index: 1002;
    background: #fff; transform: translateX(100%); transition: transform .35s ease;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 0 !important; gap: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  #sawatell-header.sw-nav-open .sw-nav { transform: translateX(0); }

  .sw-nav-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--sw-border); }
  .sw-nav-logo img { height: 34px; width: auto; display: block; }
  .sw-nav-close { background: transparent; border: 0; color: var(--sw-primary); cursor: pointer; padding: 6px; display: inline-flex; line-height: 0; }
  .sw-nav-close svg { width: 28px; height: 28px; }

  .sw-nav ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; margin: 0; padding: 6px 0; }
  .sw-nav li { width: 100%; }
  /* menu-item styling scoped to the list only (so it doesn't hit lang/CTA) */
  .sw-nav ul a { display: block; text-align: left; color: var(--sw-text) !important; font-size: 17px !important; font-weight: 600; padding: 15px 24px; border-bottom: 1px solid #eef2f7; }
  .sw-nav ul a::after { display: none; }

  .sw-nav-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 24px 30px; margin-top: auto; }
  /* language pill — keep it small & normal inside the drawer */
  .sw-nav-foot .sw-lang { display: inline-flex; background: rgba(0,61,144,.06); border: 1px solid rgba(0,61,144,.14); }
  .sw-nav-foot .sw-lang-opt { display: inline-flex !important; padding: 6px 12px !important; font-size: 12px !important; color: var(--sw-primary) !important; border: 0 !important; }
  .sw-nav-foot .sw-lang-opt.is-active { background: var(--sw-primary) !important; color: #fff !important; }
  .sw-nav-foot .sw-flag-wrap { width: 22px !important; height: 15px !important; }
  /* CTA — keep it a filled button */
  .sw-nav-foot .sw-nav-cta { display: inline-flex !important; justify-content: center; width: 100%; height: 52px; padding: 0 22px !important; border: 0 !important; border-radius: 12px;
    background: var(--sw-primary) !important; color: #fff !important; font-size: 15px !important; }
  .sw-nav-foot .sw-nav-cta:hover { background: var(--sw-primary-lt) !important; color: #fff !important; }

  /* Only one close control: hide the header burger while the drawer is open */
  #sawatell-header.sw-nav-open .sw-burger { display: none !important; }
}

@media (max-width: 768px) {
  /* SMALLER, LEFT-ALIGNED section type (centered felt cheap) — hero stays centered */
  .sawatell-theme .e-con .elementor-widget-heading .elementor-heading-title,
  .sawatell-theme .e-con .elementor-widget-text-editor,
  .sawatell-theme .e-con .elementor-widget-text-editor p { text-align: left !important; }
  body.sawatell-theme .sawatell-hero .elementor-heading-title,
  body.sawatell-theme .sawatell-hero .elementor-widget-text-editor p { text-align: center !important; }

  .sawatell-theme .e-con .elementor-widget-heading h2.elementor-heading-title { font-size: 23px !important; line-height: 1.2 !important; }
  .sawatell-theme .e-con .elementor-widget-text-editor p { font-size: 14.5px !important; line-height: 1.55 !important; }
  body.sawatell-theme .sawatell-hero .elementor-heading-title { font-size: 30px !important; line-height: 1.12 !important; }
  body.sawatell-theme .sawatell-hero .elementor-widget-text-editor p { font-size: 15px !important; }

  /* shortcode section headings smaller + left */
  .sw-about-body h2, .sw-telecom-head h2, .sw-b2b-services h2, .sw-b2b-why h2 { font-size: 23px; text-align: left; }
  .sw-b2b-hero h1 { font-size: 28px; }
  .sw-eyebrow { font-size: 11px; }

  /* carousel arrows a bit smaller, clearer gap */
  .sw-cnav svg { width: 16px; height: 16px; }
}

/* Mobile header: clean logo-left / burger-right (the empty .sw-header-right
   + flex gap were pushing the burger inward, leaving dead space). */
@media (max-width: 1024px) {
  .sw-header-inner { padding-left: 18px !important; padding-right: 18px !important; gap: 0 !important; justify-content: space-between; }
  .sw-header-right { display: none !important; }
  .sw-burger { margin-left: 0 !important; }
}

/* Mobile carousel: hide the arrows (swipe is natural); keep the dots.
   Also recentre the dots vertically now that there are no arrows. */
@media (max-width: 768px) {
  .sw-cnav { display: none !important; }
  .sw-carousel { padding-bottom: 58px !important; }
  .sw-carousel .swiper-pagination { bottom: 18px !important; }
}

/* Hero shorter on mobile: trim padding, smaller H1, hide the long trust line */
@media (max-width: 768px) {
  .sawatell-hero { min-height: 100vh !important; min-height: 100dvh !important; padding-top: calc(6px + var(--sw-header-h)) !important; padding-bottom: 22px !important; }
  body.sawatell-theme .sawatell-hero .elementor-heading-title { font-size: 25px !important; line-height: 1.12 !important; margin-bottom: 8px !important; }
  body.sawatell-theme .sawatell-hero .elementor-widget-text-editor p { font-size: 13.5px !important; line-height: 1.5 !important; }
  .elementor-element-swhrkic { margin-bottom: 6px !important; }
  .elementor-element-swhrbtns { padding-top: 14px !important; padding-bottom: 0 !important; }
  .elementor-element-swhrtrust { display: none !important; }   /* compatible Matter/Zigbee/... line */
  /* hero paragraph stays centred on mobile (justify caused ugly word gaps) — see v6.9 */
}

/* Telecom head: the intro had margin:0 and sat jammed under the heading.
   Give it breathing room (desktop + mobile) and a touch more line-height. */
.sw-telecom-intro { margin-top: 16px; }
@media (max-width: 768px) {
  .sw-telecom { padding: 40px 22px !important; }
  .sw-telecom-head { margin-bottom: 30px; }
  .sw-telecom-head h2 { line-height: 1.25 !important; margin: 0 !important; }
  .sw-telecom-intro { margin-top: 14px !important; }
  .sw-telecom-cards { gap: 14px; }
  .sw-telecom-stats { margin-top: 30px; gap: 14px 28px; }
}

/* ====================================================================
   v4.1 — Confident BRANDED service cards (icon-led, gradient, featured)
   ==================================================================== */
.sw-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: stretch; }
@media (max-width: 1024px) { .sw-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .sw-services-grid { grid-template-columns: 1fr; } }

.sw-svc-card {
  position: relative; display: flex; flex-direction: column; height: auto;
  background: #fff; border: 1px solid var(--sw-border); border-radius: 20px;
  padding: 32px 26px 28px; overflow: hidden; text-decoration: none; isolation: isolate;
  box-shadow: 0 18px 44px -30px rgba(0,61,144,.32);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s, border-color .35s;
}
.sw-svc-card::before {                     /* gradient top-bar grows on hover */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2;
  background: linear-gradient(90deg, var(--sw-primary), var(--sw-cyan));
  transform: scaleX(0); transform-origin: left; transition: transform .45s ease;
}
.sw-svc-card:hover { transform: translateY(-8px); box-shadow: 0 44px 80px -34px rgba(0,61,144,.42); border-color: transparent; }
.sw-svc-card:hover::before { transform: scaleX(1); }

.sw-svc-ix {                                /* big index watermark */
  position: absolute; right: 18px; bottom: 6px; z-index: 0;
  font-size: 92px; font-weight: 800; line-height: 1; letter-spacing: -.05em; color: rgba(0,61,144,.13);
}
.sw-svc-ic {
  position: relative; z-index: 1; width: 60px; height: 60px; border-radius: 16px;
  background: linear-gradient(140deg, var(--sw-primary), #1E5FB8); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px;
  box-shadow: 0 14px 26px -10px rgba(0,61,144,.55); transition: transform .35s;
}
.sw-svc-ic svg { width: 28px; height: 28px; }
.sw-svc-card:hover .sw-svc-ic { transform: translateY(-3px) rotate(-5deg); }
.sw-svc-title { position: relative; z-index: 1; font-size: 19px; font-weight: 800; color: var(--sw-text); letter-spacing: -.01em; line-height: 1.25; }
.sw-svc-desc { position: relative; z-index: 1; margin-top: 9px; font-size: 14px; line-height: 1.55; color: var(--sw-body); flex: 1 1 auto; }
.sw-svc-cta { position: relative; z-index: 1; margin-top: 18px; color: var(--sw-primary); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; }
.sw-svc-cta i { font-style: normal; transition: transform .25s; }
.sw-svc-card:hover .sw-svc-cta i { transform: translateX(5px); }

/* Refined priority pill (with shield icon) — compact, top-left above the icon.
   left:auto/right:auto reset any inherited offsets so it never stretches. */
.sw-svc-tag {
  position: absolute; top: 22px; left: 26px; right: auto; bottom: auto; z-index: 2;
  display: inline-flex; width: auto; max-width: calc(100% - 52px); align-items: center; gap: 6px;
  background: rgba(98,222,221,.14); border: 1px solid rgba(98,222,221,.55); color: var(--sw-cyan-d);
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.sw-svc-tag svg { width: 12px; height: 12px; flex: 0 0 auto; }

/* Featured (priority) card — filled with the brand gradient, white text.
   Extra top padding so the icon sits BELOW the pill (which is absolute). */
.sw-svc-card.is-priority {
  background: linear-gradient(155deg, #003D90 0%, #002C68 100%); border-color: transparent;
  box-shadow: 0 30px 60px -28px rgba(0,61,144,.65);
  padding-top: 60px;
}
.sw-svc-card.is-priority::before { display: none; }   /* filled card needs no top bar; it was clashing with the rounded corners */
.sw-svc-card.is-priority .sw-svc-ix { color: rgba(255,255,255,.16); }
.sw-svc-card.is-priority .sw-svc-ic { background: linear-gradient(140deg, var(--sw-cyan), #2FB5B3); color: #04261F; box-shadow: 0 14px 26px -10px rgba(98,222,221,.5); }
.sw-svc-card.is-priority .sw-svc-title { color: #fff; }
.sw-svc-card.is-priority .sw-svc-desc { color: #C7D6EE; }
.sw-svc-card.is-priority .sw-svc-cta { color: var(--sw-cyan); }
.sw-svc-card.is-priority .sw-svc-tag { background: rgba(98,222,221,.18); border-color: rgba(98,222,221,.6); color: var(--sw-cyan); }
.sw-svc-card.is-priority .sw-svc-ic { margin-top: 0; }

/* ====================================================================
   v4.2 — Partner marquee: force logo size (SVGs report 0 intrinsic width,
   so each item collapsed -> half-track < viewport -> visible reset).
   ==================================================================== */
.sawatell-marquee-track .sw-partner { padding: 0 30px; }
.sawatell-marquee-track .sw-partner img {
  width: 120px !important; height: 38px !important; max-height: none !important;
  object-fit: contain; display: block;
}
@media (max-width: 768px) {
  .sawatell-marquee-track .sw-partner { padding: 0 16px; }
  .sawatell-marquee-track .sw-partner img { width: 92px !important; height: 30px !important; }
}

/* ====================================================================
   v4.3 — Mobile hero de-bulk: tiny eyebrow (was 25px = same as H1),
   tighter headline, and compact SIDE-BY-SIDE CTAs (were big & stacked).
   ==================================================================== */
@media (max-width: 768px) {
  /* eyebrow back to a real kicker size (more specific than the H1 rule) */
  body.sawatell-theme .sawatell-hero .elementor-element-swhrkic .elementor-heading-title {
    font-size: 12px !important; letter-spacing: 2px !important;
    line-height: 1.3 !important; margin-bottom: 4px !important;
  }
  /* headline + body a notch smaller; trim hero padding */
  body.sawatell-theme .sawatell-hero .elementor-heading-title { font-size: 22px !important; line-height: 1.14 !important; margin-bottom: 6px !important; }
  body.sawatell-theme .sawatell-hero .elementor-widget-text-editor p { font-size: 13px !important; line-height: 1.5 !important; }
  .sawatell-hero { min-height: 100vh !important; min-height: 100dvh !important; padding-top: calc(8px + var(--sw-header-h)) !important; padding-bottom: 24px !important; }

  /* CTAs: compact pills, side by side, wrap gracefully on very narrow screens */
  .sawatell-hero .elementor-element-swhrbtns {
    flex-direction: row !important; flex-wrap: wrap !important;
    justify-content: center !important; align-items: stretch !important;
    gap: 6px !important; padding-top: 12px !important; padding-bottom: 0 !important;
  }
  .sawatell-hero .elementor-element-swhrcta1,
  .sawatell-hero .elementor-element-swhrcta2 { width: auto !important; margin: 0 !important; display: flex !important; }
  .sawatell-hero .elementor-element-swhrbtns .elementor-button {
    font-size: 11.5px !important; padding: 10px 10px !important;
    white-space: nowrap !important; line-height: 1 !important;
    display: inline-flex !important; align-items: center !important;
  }
}

/* ====================================================================
   v4.4 — Mobile drawer must be FULL-SCREEN even when scrolled.
   The scrolled header carries backdrop-filter: blur() for its morph.
   filter/backdrop-filter establish a CONTAINING BLOCK for position:fixed
   descendants, so the drawer's inset:0 was being measured against the
   76px header instead of the viewport => it only filled the screen at
   scrollY 0. Neutralise those props while the drawer is open (the header
   is fully covered by the drawer then, so there's no visual cost).
   ==================================================================== */
#sawatell-header.sw-nav-open,
body.sawatell-has-hero #sawatell-header.sw-nav-open {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  filter: none !important;
  transform: none !important;
}

/* ====================================================================
   v4.5 — Drawer is portaled to <body> on mobile (see animations.js).
   Its open state is now driven by .is-open on the nav itself, so it no
   longer depends on living inside #sawatell-header. This is the real
   fix for "menu only shows full at scroll 0".
   ==================================================================== */
@media (max-width: 1024px) {
  .sw-nav.is-open { transform: translateX(0) !important; }
  /* The open drawer MUST sit above the fixed header (z-index 1000). An older
     rule pinned .sw-nav to z-index 998, so as a <body> sibling it hid behind
     the header's top band and the X became unclickable. Lift it clear. */
  .sw-nav.is-open { z-index: 100000 !important; }
  /* belt-and-suspenders: while open, never let an ancestor clip a fixed child */
  body.sw-noscroll { overflow: hidden; }
}

/* No tap-highlight flash on drawer controls (kills the brief magenta tap blob). */
.sw-burger, .sw-nav-close, .sw-nav a, .sw-nav .sw-lang-opt { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* ====================================================================
   v4.6 — Partner CARDS: 275x275 rounded image tiles, each shown ONCE.
   Replaces the infinite marquee (which had to duplicate the 3 logos,
   so the same partner appeared repeatedly). Centered row on desktop;
   horizontally swipeable (scroll-snap) on mobile. Wraps to a grid if
   more partners are added later — still each exactly once.
   ==================================================================== */
.sw-partners {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: 18px; max-width: 1180px; margin: 0 auto; padding: 4px;
}
.sw-partner-card {
  flex: 0 0 auto; width: 138px; height: 138px; border-radius: 14px; overflow: hidden;
  background: #fff; border: 1px solid var(--sw-border);
  box-shadow: 0 12px 32px -20px rgba(38,50,56,.4);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.sw-partner-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgba(0,61,144,.5); }
.sw-partner-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-partner-card .sw-partner-name { font-weight: 800; letter-spacing: 3px; color: var(--sw-muted); font-size: 22px; }

@media (max-width: 900px) {
  .sw-partners {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    scroll-snap-type: x mandatory; gap: 16px; padding: 6px 20px 16px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .sw-partners::-webkit-scrollbar { display: none; }
  .sw-partner-card { width: 124px; height: 124px; scroll-snap-align: center; }
}

/* ====================================================================
   v4.7 — Wassenger-style ambient background:
   • soft LEFT/RIGHT "pulses" live in body::before (above)
   • faint telecom + automation SVGs scattered behind the content here.
   Purely decorative (pointer-events:none, aria-hidden).
   ==================================================================== */
.sw-bg-deco { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sw-bg-deco .sw-bg-ic { position: absolute; color: var(--sw-primary); opacity: .09; }
.sw-bg-deco .sw-bg-ic svg { width: 100%; height: auto; display: block; stroke-width: 1.4; }
.sw-bg-deco .sw-bg-ic:nth-child(3n)   { color: var(--sw-cyan-d); opacity: .12; }
.sw-bg-deco .sw-bg-ic:nth-child(3n+1) { opacity: .08; }
@media (max-width: 768px) {
  .sw-bg-deco .sw-bg-ic { opacity: .05 !important; }
  .sw-bg-deco .sw-bg-ic:nth-child(n+8) { display: none; }   /* keep mobile clean */
}

/* ====================================================================
   v4.8 — Client prefs:
   (1) NO italics anywhere on the site.
   (2) Buttons: PRIMARY BLUE by default; WHITE when on a primary-blue
       parent (so a blue button never sits on a blue background).
   ==================================================================== */

/* (1) Kill every italic (footer slogan, blockquotes, <em>, Elementor content…) */
body.sawatell-theme * { font-style: normal !important; }

/* (2a) Default filled buttons -> primary blue + white text (was cyan/teal) */
.sw-btn, .sw-btn--cyan, .sw-form-submit,
.sawatell-hero .elementor-element-swhrcta1 .elementor-button {
  background: var(--sw-primary) !important; color: #fff !important; border-color: var(--sw-primary) !important;
}
.sw-btn:hover, .sw-btn--cyan:hover, .sw-form-submit:hover,
.sawatell-hero .elementor-element-swhrcta1 .elementor-button:hover {
  background: var(--sw-primary-lt, #1E5FB8) !important; color: #fff !important;
}
/* keep the hero primary readable on the dark video */
.sawatell-hero .elementor-element-swhrcta1 .elementor-button {
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.55) !important;
}

/* (2b) On a PRIMARY-BLUE parent -> WHITE button (white bg, blue text) */
.sw-telecom .sw-btn, .sw-telecom .sw-btn--cyan,
.sw-b2b-hero .sw-btn, .sw-b2b-hero .sw-btn--cyan,
.sw-b2b-services .sw-btn, .sw-b2b-services .sw-btn--cyan,
.sw-footer .sw-btn, .sw-footer .sw-btn--cyan {
  background: #fff !important; color: var(--sw-primary) !important; border-color: #fff !important;
}
.sw-telecom .sw-btn:hover, .sw-telecom .sw-btn--cyan:hover,
.sw-b2b-hero .sw-btn:hover, .sw-b2b-hero .sw-btn--cyan:hover,
.sw-b2b-services .sw-btn:hover, .sw-b2b-services .sw-btn--cyan:hover,
.sw-footer .sw-btn:hover, .sw-footer .sw-btn--cyan:hover {
  background: #e9f1ff !important; color: var(--sw-primary) !important;
}
/* the featured (blue) service card CTA goes white on its blue background */
.sw-svc-card.is-priority .sw-svc-cta,
.sw-svc-card.is-priority .sw-svc-cta i { color: #fff !important; }

/* ====================================================================
   v4.9 — Ambient telecom/automation SVGs are now SCOPED to two SELECT
   sections only (Solutions + Contact), not the whole page. Each is a
   bounded ::before that sits behind the section's content.
   Also: header/drawer CTA hovers no longer flip to cyan (done above).
   ==================================================================== */
.elementor-element-swsolutions,
.elementor-element-swcontact { position: relative; isolation: isolate; }

.elementor-element-swsolutions::before,
.elementor-element-swcontact::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .10; background-repeat: no-repeat;
}
/* Solutions -> automation icons (home, cpu, gear, route) */
.elementor-element-swsolutions::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003D90' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003D90' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='1.5'/%3E%3Cpath d='M10 3v3M14 3v3M10 18v3M14 18v3M3 10h3M3 14h3M18 10h3M18 14h3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003D90' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003D90' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M6 15.5V10a4 4 0 0 1 4-4h5'/%3E%3C/svg%3E");
  background-position: 4% 18%, 95% 22%, 7% 84%, 93% 80%;
  background-size: 64px, 56px, 58px, 60px;
}
/* Contact -> telecom icons (wifi, sim, route, server) */
.elementor-element-swcontact::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003D90' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8.5a16 16 0 0 1 20 0'/%3E%3Cpath d='M5 12a11 11 0 0 1 14 0'/%3E%3Cpath d='M8.5 15.5a6 6 0 0 1 7 0'/%3E%3Cpath d='M12 19h.01'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003D90' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h7l4 4v13a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Crect x='10.5' y='12' width='5' height='6' rx='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003D90' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M6 15.5V10a4 4 0 0 1 4-4h5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003D90' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='16' height='7' rx='1.5'/%3E%3Cpath d='M8 7.5h.01M8 16.5h.01'/%3E%3C/svg%3E");
  background-position: 5% 20%, 94% 24%, 8% 82%, 90% 78%;
  background-size: 60px, 52px, 58px, 56px;
}
/* hide the old global layer if any cached markup remains */
.sw-bg-deco { display: none !important; }
@media (max-width: 768px) {
  .elementor-element-swsolutions::before, .elementor-element-swcontact::before { opacity: .07; background-size: 44px; }
}

/* ====================================================================
   v5.0 — NATIVE About (converted from [sawatell_about] shortcode to
   editable Elementor widgets). Skin for the image-widget + badge.
   ==================================================================== */
.sw-about-media { position: relative; }
.sw-about-media .sw-about-img { border-radius: 20px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(38,50,56,.5); display:block; }
.sw-about-media .sw-about-img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; border-radius: 20px; }
.sw-about-badge { position: absolute !important; right: -18px; bottom: 28px; width: auto !important; max-width: 220px; }
.sw-about-badge .elementor-widget-container { margin: 0 !important; }
.sw-about-badge-logo img { height: 26px !important; width: auto !important; display: block; }
.sw-about-badge-sub .elementor-heading-title { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .12em; text-transform: uppercase; color: var(--sw-muted) !important; margin: 6px 0 0 !important; }
@media (max-width:900px){ .sw-about-badge { right: 16px; } }

/* ====================================================================
   v5.1 — NATIVE Solutions cards (converted from [sawatell_services]).
   Bridge my flat-HTML card CSS to Elementor's widget wrappers.
   ==================================================================== */
.sw-svc-card { text-decoration: none; }
.sw-svc-card > .elementor-widget { margin: 0; width: 100%; }
/* number watermark + title inherit the .sw-svc-* skin onto the inner tag */
.sw-svc-card .sw-svc-ix .elementor-heading-title { font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; }
.sw-svc-card .sw-svc-title .elementor-heading-title { font: inherit; color: inherit; margin: 0; }
.sw-svc-card .sw-svc-tag .elementor-heading-title { font: inherit; color: inherit; margin: 0; }
.sw-svc-card .sw-svc-desc p { margin: 0; }
/* icon TILE: keep it a 60x60 chip (Elementor widgets stretch otherwise) */
.sw-svc-card .sw-svc-ic { width: 60px !important; height: 60px !important; flex: 0 0 auto; align-self: flex-start; }
.sw-svc-card .sw-svc-ic .elementor-widget-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sw-svc-card .sw-svc-ic svg { width: 28px; height: 28px; }
/* CTA: neutralise the Elementor Button chrome into the text-link look + arrow */
.sw-svc-card .sw-svc-cta { width: auto; align-self: flex-start; margin-top: 18px; }
.sw-svc-card .sw-svc-cta .elementor-button {
  background: transparent !important; box-shadow: none !important; padding: 0 !important;
  color: inherit !important; font: inherit !important; border-radius: 0 !important; min-width: 0;
}
.sw-svc-card .sw-svc-cta .elementor-button-text { font-weight: 700; }
.sw-svc-card .sw-svc-cta .elementor-button::after { content: "\2192"; margin-left: 7px; display: inline-block; transition: transform .25s; }
.sw-svc-card:hover .sw-svc-cta .elementor-button::after { transform: translateX(5px); }
.sw-svc-card.is-priority .sw-svc-cta .elementor-button { color: #fff !important; }

/* ====================================================================
   v5.2 — NATIVE Telecom + Partners (from [sawatell_telecom]/[sawatell_partners]).
   ==================================================================== */
.sw-telecom-stats { display: flex; flex-wrap: wrap; gap: 16px 44px; margin-top: 30px; position: relative; z-index: 1; }
.sw-telecom-art .elementor-widget-container { margin: 0; }
.sw-telecom-card > .elementor-widget { margin: 0; width: 100%; }
.sw-telecom-ic { width: 48px !important; height: 48px !important; flex: 0 0 auto; }
.sw-telecom-ic .elementor-widget-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sw-telecom-card h3.elementor-heading-title { color: #fff; font-size: 19px; font-weight: 700; margin: 10px 0 8px; }
.sw-telecom-card .sw-telecom-num .elementor-heading-title { font: inherit; color: inherit; }
.sw-telecom-stat-n .elementor-heading-title { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.sw-telecom-stat-l .elementor-heading-title { font-size: 12.5px; color: var(--sw-cyan); letter-spacing: .04em; }
.sw-telecom-cta-btn .elementor-button { background: #fff !important; color: var(--sw-primary) !important; box-shadow: none !important; }
.sw-telecom-cta-btn .elementor-button:hover { background: #e9f1ff !important; color: var(--sw-primary) !important; }
.sw-telecom-cta-btn .elementor-button::after { content: " \2192"; }
/* Partners native (image widgets) */
.sw-partner-card .elementor-widget-container { width: 100%; height: 100%; }
.sw-partner-card img { width: 100%; height: 100%; object-fit: cover; }
.sw-partner-card a, .sw-partner-card figure { display: block; width: 100%; height: 100%; margin: 0; }

/* v5.2b — telecom headings sit on a DARK bg; native heading widgets inherit the
   global blue heading color, so force white/cyan with priority. */
.sw-telecom h2.elementor-heading-title { color: #fff !important; }
.sw-telecom-card h3.elementor-heading-title { color: #fff !important; }
.sw-telecom-stat-n .elementor-heading-title { color: #fff !important; }
.sw-telecom-stat-l .elementor-heading-title { color: var(--sw-cyan) !important; }
.sw-telecom-num .elementor-heading-title { color: var(--sw-cyan) !important; }

/* v5.3 — Hero buttons: the outline (secondary) button's 1px border made it 2px
   taller than the filled one. Give the filled button a matching same-colour
   border so both are identical height (mobile already matches, so scope >768). */
@media (min-width: 769px) {
  .sawatell-hero .elementor-element-swhrcta1 .elementor-button { border: 1px solid var(--sw-primary) !important; }
}

/* ====================================================================
   v5.4 — NATIVE Products grid + Reviews testimonials + FAQ accordion.
   ==================================================================== */
.sw-products-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
@media (max-width:1024px){ .sw-products-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .sw-products-grid { grid-template-columns: 1fr; } }
.sw-product-card { padding: 0 !important; overflow: hidden; }
.sw-product-card > .elementor-widget { margin: 0; width: 100%; }
.sw-product-card .sw-product-img .elementor-widget-container { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.sw-product-card .sw-product-img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.sw-product-body { padding: 4px 18px 18px !important; display: flex; flex-direction: column; gap: 2px; }
.sw-product-card .sw-product-brand .elementor-heading-title { font: inherit; color: inherit; }
.sw-product-card .sw-product-name .elementor-heading-title { font: inherit; color: inherit; margin: 2px 0; }
.sw-product-card .sw-product-cta { margin-top: auto; padding-top: 10px; }
.sw-product-card .sw-product-cta .elementor-button { background: transparent !important; color: var(--sw-primary) !important; padding: 0 !important; box-shadow: none !important; font: inherit !important; }
.sw-product-card .sw-product-cta .elementor-button::after { content: " \2192"; }

.sw-greviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; max-width: 1120px; margin: 0 auto; }
@media (max-width:900px){ .sw-greviews-grid { grid-template-columns: 1fr; } }
.sw-greview > .elementor-widget { margin: 0; width: 100%; }
.sw-greview .sw-greview-stars .elementor-heading-title { color: #FBBC05; font-size: 15px; letter-spacing: 1px; }
.sw-greview .sw-greview-text p { margin: 8px 0; }
.sw-greview .sw-greview-author .elementor-heading-title { font-size: 14px; font-weight: 700; color: var(--sw-text); }

.sw-faq-acc .elementor-accordion { max-width: 900px; margin: 0 auto; }
.sw-faq-acc .elementor-accordion-item { background: #fff; border: 1px solid var(--sw-border) !important; border-radius: 16px; margin-bottom: 14px; overflow: hidden; }
.sw-faq-acc .elementor-tab-title { padding: 18px 22px; font-weight: 700; color: var(--sw-text); border: 0 !important; font-size: 16px; }
.sw-faq-acc .elementor-tab-title.elementor-active { color: var(--sw-primary); }
.sw-faq-acc .elementor-tab-content { padding: 0 22px 18px !important; color: var(--sw-body); line-height: 1.6; font-size: 14.5px; border: 0 !important; }

/* v5.2c — text-editor widgets render an inner <p> that inherits the GLOBAL dark
   paragraph colour; on the dark telecom bg that made copy invisible. Force the
   intended light colours onto the inner <p> with priority. */
.sw-telecom-intro, .sw-telecom-intro p { color: #C7E9FF !important; }
.sw-telecom-card p { color: #BBD6EE !important; }
.sw-telecom-card .sw-svc-desc p, .sw-telecom-card .elementor-widget-text-editor p { color: #BBD6EE !important; }

/* ====================================================================
   v5.3 — NATIVE Contact info (form kept as functional shortcode).
   Info panel is dark blue -> force white/light text on native widgets.
   ==================================================================== */
.sw-contact-info > .elementor-widget-heading h3.elementor-heading-title { color: #fff !important; margin: 0; }
.sw-contact-info > .elementor-widget-text-editor p { color: #AEBBD6 !important; margin: 0; }
.sw-contact-list { display: flex; flex-direction: column; gap: 14px; }
.sw-ci-item { display: flex; gap: 12px; align-items: flex-start; }
.sw-ci-item > .elementor-widget { margin: 0; }
.sw-ci-txt p { color: #DCE5F5 !important; margin: 0; font-size: 14.5px; line-height: 1.5; }
.sw-ci-txt a { color: #fff !important; text-decoration: none; }
.sw-ci-ic { flex: 0 0 32px !important; width: 32px !important; height: 32px !important; }
.sw-ci-ic .elementor-widget-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sw-contact-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-contact-badges .sw-ci-badge { font-size: 12px; font-weight: 600; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); padding: 6px 12px; border-radius: 999px; align-self: flex-start; }
.sw-contact-badges .sw-ci-badge .elementor-heading-title { font: inherit; color: #DCE5F5 !important; margin: 0; }

/* v5.3b — contact item plain text (address/hours) isn't always wrapped in <p>;
   colour the widget container so all text is light, links stay white. */
.sw-ci-txt .elementor-widget-container { color: #DCE5F5 !important; font-size: 14.5px; line-height: 1.5; }
.sw-ci-txt a { color: #fff !important; }

/* v5.3c — force ALL contact-item text light (address/hours weren't in <p>/<li>);
   target Elementor's own text-editor class (reliable), keep links white + icon cyan. */
.sw-ci-item .elementor-widget-text-editor,
.sw-ci-item .elementor-widget-text-editor * { color: #DCE5F5 !important; }
.sw-ci-item .elementor-widget-text-editor a { color: #fff !important; }

/* ====================================================================
   v5.4 — NATIVE /telecoms-b2b page (from [sawatell_b2b]). Bridges for
   Elementor widget wrappers + dark sections (hero, stats, contact-info).
   ==================================================================== */
/* hero (dark) */
.sw-b2b-hero h1.elementor-heading-title, .sw-b2b-h1 .elementor-heading-title { color: #fff !important; }
.sw-b2b-hero-sub p, .sw-b2b-hero-sub .elementor-widget-container { color: #C7E9FF !important; }
.sw-b2b-hero-text > .elementor-widget { margin: 0 0 6px; width: 100%; }
.sw-b2b-hero-cta { display: flex; flex-direction: row; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.sw-b2b-hero-cta .sw-btn--cyan .elementor-button { background: #fff !important; color: var(--sw-primary) !important; box-shadow: none !important; }
.sw-b2b-hero-cta .sw-btn--cyan .elementor-button::after { content: "\2192"; margin-left: 8px; }
.sw-b2b-hero-cta .sw-btn-ghost .elementor-button { background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,.45) !important; box-shadow: none !important; }
/* services (light, white cards) */
.sw-b2b-card > .elementor-widget { margin: 0; width: 100%; }
.sw-b2b-card .elementor-widget-heading { margin: 0 0 8px; }
.sw-b2b-card h3.elementor-heading-title { color: var(--sw-text) !important; font-size: 20px; font-weight: 700; }
.sw-b2b-card .elementor-widget-text-editor p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--sw-body); }
.sw-b2b-card .sw-b2b-ic { width: 54px !important; height: 54px !important; flex: 0 0 auto; margin-bottom: 18px; }
.sw-b2b-card .sw-b2b-ic .elementor-widget-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sw-b2b-feats ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sw-b2b-feats li { position: relative; padding-left: 24px; font-size: 14px; color: var(--sw-body); line-height: 1.5; }
.sw-b2b-feats li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--sw-cyan-d); font-weight: 800; }
.sw-b2b-card-cta .elementor-button { background: transparent !important; color: var(--sw-primary) !important; box-shadow: none !important; padding: 0 !important; font-weight: 700; }
.sw-b2b-card-cta .elementor-button::after { content: " \2192"; }
/* why */
.sw-b2b-why-head > .elementor-element { width: 100%; }
.sw-b2b-why-card > .elementor-widget { margin: 0; width: 100%; }
.sw-b2b-why-card .sw-b2b-ic { flex: 0 0 auto; }
.sw-b2b-why-card .sw-b2b-ic .elementor-widget-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sw-b2b-why-card h4.elementor-heading-title { color: var(--sw-text) !important; font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.sw-b2b-why-card .elementor-widget-text-editor p { font-size: 13.5px; color: var(--sw-body); line-height: 1.55; margin: 0; }
.sw-b2b-quote blockquote { margin: 0; padding: 24px 28px; background: var(--sw-paper); border-left: 3px solid var(--sw-cyan); border-radius: 12px; color: var(--sw-text); font-size: 16px; line-height: 1.6; }
.sw-b2b-quote cite { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sw-muted); margin-top: 14px; font-style: normal; }
/* stats (dark blue box -> white text) */
.sw-b2b-stat-n .elementor-heading-title { color: #fff !important; font-size: 26px; font-weight: 800; }
.sw-b2b-stat-l .elementor-heading-title { color: var(--sw-cyan) !important; font-size: 12.5px; }
/* contact info (dark blue -> white text) */
.sw-b2b-contact-info h2.elementor-heading-title { color: #fff !important; font-size: 28px; margin: 6px 0 12px; }
.sw-b2b-contact-info > .elementor-widget-text-editor p { color: #C7E9FF !important; }

/* ====================================================================
   v5.5 — Partners AUTO-PLAY when the row overflows (JS adds .sw-partners--auto
   + a duplicated .sw-partners-track). Spacing lives in each card's margin so
   the two halves are identical -> translateX(-50%) loops seamlessly.
   ==================================================================== */
.sw-partners--auto {
  overflow: hidden; display: flex; flex-wrap: nowrap !important; justify-content: flex-start !important;
  gap: 0 !important; scroll-snap-type: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sw-partners--auto .sw-partners-track {
  display: flex; flex-wrap: nowrap; gap: 0; width: max-content; align-items: center;
  animation: sawatellPartners linear infinite; will-change: transform;
}
.sw-partners--auto .sw-partners-track > .sw-partner-card { flex: 0 0 auto; margin-right: 16px; }
.sw-partners--auto:hover .sw-partners-track { animation-play-state: paused; }
@keyframes sawatellPartners { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sw-partners--auto .sw-partners-track { animation: none; } }

/* ====================================================================
   v5.6 — Fixes after partial revert:
   • telecom + b2b stat items were stretching full-width -> force auto-width
     so the 4 stats sit on ONE horizontal row again.
   • FAQ (restored shortcode <details>) -> 2-up grid, collapsed by default.
   ==================================================================== */
.sw-telecom-stats .sw-telecom-stat, .sw-b2b-stats .sw-b2b-stat,
.sw-b2b-stats > div { flex: 0 0 auto !important; width: auto !important; }
.sw-telecom-stats { align-items: flex-start; }

.sw-faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; align-items: start; max-width: 1100px; margin-left: auto; margin-right: auto; }
@media (max-width: 768px) { .sw-faq-list { grid-template-columns: 1fr; } }

/* v5.6b — on mobile the wide column-gap forced the stats to 1-per-row; tighten it
   so telecom/b2b stats sit a tidy 2-up (like the original). */
@media (max-width: 768px) {
  .sw-telecom-stats, .sw-b2b-stats { gap: 14px 22px !important; }
  .sw-telecom-stats .sw-telecom-stat, .sw-b2b-stats .sw-b2b-stat { min-width: 40%; }
}

/* v5.6c — force a clean 2x2 grid for the stats on mobile (flex couldn't fit two
   wide labels in the padded container). */
@media (max-width: 768px) {
  .sw-telecom-stats, .sw-b2b-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px 16px !important; }
  .sw-telecom-stats .sw-telecom-stat, .sw-b2b-stats .sw-b2b-stat { width: auto !important; min-width: 0 !important; }
}

/* ====================================================================
   v5.7 — fixes: arrow-on-new-line, b2b why-card icon (full-width->tile),
   b2b contact-form padding, + more ambient SVGs on the landing page.
   ==================================================================== */
:root{
  --swic-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003D90' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E");
  --swic-cpu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003D90' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='1.5'/%3E%3Cpath d='M10 3v3M14 3v3M10 18v3M14 18v3M3 10h3M3 14h3M18 10h3M18 14h3'/%3E%3C/svg%3E");
  --swic-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003D90' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8.5a16 16 0 0 1 20 0'/%3E%3Cpath d='M5 12a11 11 0 0 1 14 0'/%3E%3Cpath d='M8.5 15.5a6 6 0 0 1 7 0'/%3E%3Cpath d='M12 19h.01'/%3E%3C/svg%3E");
  --swic-route:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003D90' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M6 15.5V10a4 4 0 0 1 4-4h5'/%3E%3C/svg%3E");
  --swic-sim:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003D90' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h7l4 4v13a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Crect x='10.5' y='12' width='5' height='6' rx='1'/%3E%3C/svg%3E");
  --swic-server:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003D90' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='16' height='7' rx='1.5'/%3E%3Cpath d='M8 7.5h.01M8 16.5h.01'/%3E%3C/svg%3E");
}
.elementor-element-swabout, .elementor-element-swproducts, .elementor-element-swfaq { position: relative; isolation: isolate; }
.elementor-element-swabout::before, .elementor-element-swproducts::before, .elementor-element-swfaq::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.085; background-repeat:no-repeat;
}
.elementor-element-swabout::before   { background-image: var(--swic-cpu), var(--swic-wave), var(--swic-home);  background-position: 93% 15%, 5% 80%, 49% 7%;  background-size: 54px,50px,46px; }
.elementor-element-swproducts::before{ background-image: var(--swic-route), var(--swic-server), var(--swic-sim); background-position: 4% 18%, 95% 22%, 8% 86%; background-size: 56px,50px,52px; }
.elementor-element-swfaq::before     { background-image: var(--swic-wave), var(--swic-cpu), var(--swic-home), var(--swic-route); background-position: 4% 14%, 95% 16%, 6% 88%, 92% 84%; background-size: 52px,54px,48px,56px; }
@media (max-width:768px){ .elementor-element-swabout::before, .elementor-element-swproducts::before, .elementor-element-swfaq::before { opacity:.06; background-size:40px; } }

/* arrow stays inline (button was display:block, dropping ::after to a new line) */
.sw-b2b-hero-cta .elementor-button, .sw-telecom-cta-btn .elementor-button, .sw-b2b-card-cta .elementor-button {
  display: inline-flex !important; align-items: center; justify-content: center; white-space: nowrap;
}
/* b2b "why" card icon was stretching full-width like a button -> small tile */
.sw-b2b-why-card .sw-b2b-ic { width: 46px !important; height: 46px !important; flex: 0 0 auto; align-self: flex-start; }
.sw-b2b-why-card .sw-b2b-ic .elementor-widget-container { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
/* trim the b2b quote-form padding */
.sw-b2b-contact-form { padding: 30px 34px !important; }

/* ====================================================================
   v5.8 — ghost button double-border, contact-card whitespace, mobile 90% width.
   ==================================================================== */
/* ghost CTA: the widget element AND the inner button both had a border -> keep one */
.sw-b2b-hero-cta .sw-btn-ghost { border: 0 !important; background: transparent !important; padding: 0 !important; }
/* contact card: the native container's padding was insetting the blue panel + form
   (the "white space on the borders") -> remove so the two halves fill edge-to-edge */
.sw-b2b-contact-card { padding: 0 !important; }
/* wider content on mobile (~90%) */
@media (max-width: 767px) {
  .elementor-element-swabout, .elementor-element-swsolutions, .elementor-element-swproducts,
  .elementor-element-swbrands, .elementor-element-swtest, .elementor-element-swfaq,
  .elementor-element-swcontact, .elementor-element-swtelecom { padding-left: 14px !important; padding-right: 14px !important; }
  .sw-telecom { padding-left: 18px !important; padding-right: 18px !important; }
  .sw-b2b-inner { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ====================================================================
   v5.8b — mobile ~90% width (trim section + inner padding), telecom card
   number aligned with the icon (top-right badge), stats keep one line.
   ==================================================================== */
@media (max-width: 767px) {
  .elementor-element-swabout, .elementor-element-swsolutions, .elementor-element-swproducts,
  .elementor-element-swbrands, .elementor-element-swtest, .elementor-element-swfaq,
  .elementor-element-swcontact, .elementor-element-swtelecom,
  .elementor-element-swabout > .e-con-inner, .elementor-element-swsolutions > .e-con-inner,
  .elementor-element-swproducts > .e-con-inner, .elementor-element-swbrands > .e-con-inner,
  .elementor-element-swtest > .e-con-inner, .elementor-element-swfaq > .e-con-inner,
  .elementor-element-swcontact > .e-con-inner, .elementor-element-swtelecom > .e-con-inner { padding-left: 9px !important; padding-right: 9px !important; }
  .sw-telecom { padding-left: 16px !important; padding-right: 16px !important; }
  .sw-b2b-inner { padding-left: 14px !important; padding-right: 14px !important; }
}
/* telecom card: number badge on the same row as the icon (top-right) */
.sw-telecom-card { position: relative; }
.sw-telecom-card .sw-telecom-num { position: absolute; top: 34px; right: 22px; margin: 0 !important; }
.sw-telecom-card .sw-telecom-num .elementor-heading-title { font-size: 15px; }
/* stats: numbers on one line + top-aligned so labels line up across the row */
@media (max-width: 768px) {
  .sw-telecom-stats, .sw-b2b-stats { align-items: start !important; }
  .sw-telecom-stat-n .elementor-heading-title, .sw-b2b-stat-n .elementor-heading-title { font-size: 18px !important; white-space: nowrap; }
}

/* v5.8c — the absolute number widget was full-width, so its text landed far-left.
   Shrink it to its content so the badge sits cleanly at the card's top-right. */
.sw-telecom-card .sw-telecom-num { left: auto !important; width: max-content !important; }
.sw-telecom-card .sw-telecom-num .elementor-widget-container,
.sw-telecom-card .sw-telecom-num .elementor-heading-title { text-align: right; width: auto; }

/* ====================================================================
   v5.9 — mobile review fixes: homepage contact whitespace, eyebrow colour
   on dark sections, stat font safety.
   ==================================================================== */
/* homepage contact: native container padding inset the blue panel (white border) */
.sw-contact { padding: 0 !important; overflow: hidden; }
/* native eyebrow headings kept the global blue inner title -> on dark sections the
   cyan eyebrow rendered blue-on-blue (invisible). Make inner title match the eyebrow. */
.sw-eyebrow .elementor-heading-title {
  color: inherit !important; font-size: inherit !important; font-weight: inherit !important;
  letter-spacing: inherit !important; line-height: inherit;
}
/* stat numbers: a touch smaller on mobile so "UE · MEA · Asie" never wraps (even ~360px) */
@media (max-width: 768px) {
  .sw-telecom-stat-n .elementor-heading-title, .sw-b2b-stat-n .elementor-heading-title { font-size: 17px !important; }
}

/* ====================================================================
   v6.0 — a few MORE ambient SVGs across the landing page (denser).
   ==================================================================== */
:root{
  --swic-gear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003D90' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4'/%3E%3C/svg%3E");
  --swic-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003D90' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v5c0 5-3.5 8.2-8 10-4.5-1.8-8-5-8-10V6z'/%3E%3C/svg%3E");
}
/* new: reviews section (light) */
.elementor-element-swtest { position: relative; isolation: isolate; }
.elementor-element-swtest::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.08; background-repeat:no-repeat;
  background-image: var(--swic-home), var(--swic-sim), var(--swic-cpu), var(--swic-route);
  background-position: 4% 16%, 95% 20%, 7% 84%, 92% 80%; background-size: 50px,46px,54px,52px;
}
/* denser: add more icons to existing sections */
.elementor-element-swabout::before {
  background-image: var(--swic-cpu), var(--swic-wave), var(--swic-home), var(--swic-gear), var(--swic-sim);
  background-position: 93% 13%, 4% 68%, 48% 6%, 9% 33%, 90% 90%; background-size: 54px,48px,46px,44px,50px;
}
.elementor-element-swproducts::before {
  background-image: var(--swic-route), var(--swic-server), var(--swic-sim), var(--swic-shield), var(--swic-wave);
  background-position: 3% 14%, 96% 18%, 7% 86%, 92% 82%, 50% 50%; background-size: 56px,50px,52px,48px,44px;
}
.elementor-element-swfaq::before {
  background-image: var(--swic-wave), var(--swic-cpu), var(--swic-home), var(--swic-route), var(--swic-gear);
  background-position: 4% 12%, 95% 14%, 5% 88%, 92% 86%, 50% 52%; background-size: 52px,54px,48px,56px,46px;
}
.elementor-element-swsolutions::before {
  background-image: var(--swic-home), var(--swic-cpu), var(--swic-gear), var(--swic-route), var(--swic-shield);
  background-position: 4% 16%, 95% 20%, 7% 84%, 93% 80%, 50% 6%; background-size: 56px,52px,50px,54px,46px;
}
@media (max-width: 768px) {
  .elementor-element-swtest::before { opacity: .06; background-size: 40px; }
}

/* ====================================================================
   v6.1 — mobile: equal-size B2B hero CTAs + contact item icon/text on one row.
   ==================================================================== */
@media (max-width: 768px) {
  .sw-b2b-hero-cta .sw-btn--cyan, .sw-b2b-hero-cta .sw-btn-ghost { width: 100% !important; }
  .sw-b2b-hero-cta .elementor-button { width: 100% !important; }
}
/* contact list items: keep the icon + text on the SAME row (text was wrapping below
   the icon because the text item wouldn't shrink). Let it shrink & wrap in its column. */
.sw-ci-item { flex-wrap: nowrap !important; }
.sw-ci-item .sw-ci-txt { flex: 1 1 auto !important; min-width: 0 !important; }

/* v6.1b — the cyan hero CTA widget still had .sw-btn base padding, so its inner button
   was narrower than the (zeroed) ghost. Zero it too -> both inner buttons fill 100%. */
.sw-b2b-hero-cta .sw-btn--cyan { padding: 0 !important; background: transparent !important; }

/* ====================================================================
   v6.2 — uniform UPPERCASE casing for stat numbers + labels (telecom/b2b),
   and a proper design for the (default-template) legal pages.
   ==================================================================== */
.sw-telecom-stat-n .elementor-heading-title, .sw-telecom-stat-l .elementor-heading-title,
.sw-b2b-stat-n .elementor-heading-title, .sw-b2b-stat-l .elementor-heading-title { text-transform: uppercase; }

/* Legal / default-template pages — bring them up to the site's look */
body.page-template-default.sawatell-theme .site-main {
  max-width: 900px; margin: 0 auto; padding: calc(40px + var(--sw-header-h)) 22px 80px; background: transparent;
}
body.page-template-default.sawatell-theme .page-header { margin: 0 0 30px; padding-bottom: 22px; border-bottom: 1px solid var(--sw-border); }
body.page-template-default.sawatell-theme .entry-title { font-size: clamp(30px, 5vw, 44px); font-weight: 800; letter-spacing: -.02em; color: var(--sw-primary); line-height: 1.12; margin: 0; }
body.page-template-default.sawatell-theme .entry-content,
body.page-template-default.sawatell-theme .page-content { color: var(--sw-body); font-size: 16px; line-height: 1.75; }
body.page-template-default.sawatell-theme .entry-content > p:first-child { font-size: 16.5px; color: var(--sw-text); }
body.page-template-default.sawatell-theme .entry-content h2,
body.page-template-default.sawatell-theme .page-content h2 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--sw-text); margin: 38px 0 12px; }
body.page-template-default.sawatell-theme .entry-content h3 { font-size: 17px; font-weight: 700; color: var(--sw-text); margin: 24px 0 8px; }
body.page-template-default.sawatell-theme .entry-content p { margin: 0 0 16px; }
body.page-template-default.sawatell-theme .entry-content ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
body.page-template-default.sawatell-theme .entry-content li { position: relative; padding-left: 22px; }
body.page-template-default.sawatell-theme .entry-content li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--sw-cyan-d); }
body.page-template-default.sawatell-theme .entry-content a { color: var(--sw-primary); text-decoration: underline; text-underline-offset: 2px; }
body.page-template-default.sawatell-theme .entry-content strong { color: var(--sw-text); font-weight: 700; }

/* ====================================================================
   v6.3 — "Avec qui on travaille." (partners) fixed background image is set
   natively in Elementor (section background, editable in the UI) so it stays
   editable. Here we only guard mobile: iOS/Android don't reliably support
   fixed attachment, so fall back to normal scroll there.
   ==================================================================== */
@media (max-width: 1024px) {
  .elementor-element-swbrands:not(.x) { background-attachment: scroll !important; }
}

/* ====================================================================
   v6.4 — Ambient telecom/automation SVGs on the CAREERS pages (archive +
   single vacancy), matching the landing-page sections. The careers
   templates are theme-rendered (.sw-careers-archive / .sw-vacancy-page) so
   they had no ambient layer; this adds the same subtle, bounded ::before.
   Language-agnostic (works for /careers/ in any language). Icons reuse the
   global :root --swic-* data-URI vars defined above.
   ==================================================================== */
.sw-careers-archive,
.sw-vacancy-page { position: relative; isolation: isolate; }

.sw-careers-archive::before,
.sw-vacancy-page::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .09; background-repeat: no-repeat;
}
/* careers archive -> denser connectivity/automation mix spread down the page */
.sw-careers-archive::before {
  background-image: var(--swic-route), var(--swic-cpu), var(--swic-wave), var(--swic-home), var(--swic-gear), var(--swic-sim), var(--swic-shield), var(--swic-server), var(--swic-route), var(--swic-wave), var(--swic-cpu);
  background-position: 4% 5%, 95% 9%, 7% 22%, 92% 28%, 5% 42%, 95% 50%, 6% 63%, 93% 70%, 8% 83%, 91% 89%, 50% 96%;
  background-size: 56px, 52px, 54px, 50px, 58px, 52px, 54px, 50px, 56px, 52px, 48px;
}
/* single vacancy -> denser, still calm */
.sw-vacancy-page::before {
  background-image: var(--swic-cpu), var(--swic-route), var(--swic-wave), var(--swic-server), var(--swic-shield), var(--swic-sim), var(--swic-gear), var(--swic-home);
  background-position: 4% 7%, 95% 14%, 6% 30%, 94% 40%, 5% 56%, 95% 66%, 7% 82%, 50% 93%;
  background-size: 54px, 52px, 56px, 50px, 52px, 54px, 50px, 52px;
}
@media (max-width: 768px) {
  .sw-careers-archive::before, .sw-vacancy-page::before { opacity: .06; background-size: 40px; }
}

/* ====================================================================
   v6.5 — (a) clip rounded stat boxes so an added background IMAGE + its
   overlay respect the border-radius; (b) priority service card: float the
   badge top-right so it never pushes the icon/title down (alignment fix).
   Both are class-based, so they apply on FR + EN pages automatically.
   ==================================================================== */
/* (a) Rounded stat boxes (.sw-b2b-stats / .sw-telecom-stats) can carry an
   Elementor background image + a ::before overlay. The element has a CSS
   border-radius but overflow:visible, so the square overlay/image corners
   poked out. Clip to the radius + round the overlay layer. */
.sw-b2b-stats, .sw-telecom-stats { overflow: hidden; }
.sw-b2b-stats::before, .sw-telecom-stats::before,
.sw-b2b-stats > .elementor-background-overlay,
.sw-telecom-stats > .elementor-background-overlay { border-radius: inherit; }

/* (b) Priority "PRIORITÉ STRATÉGIQUE" badge → top-right, out of the flow.
   The priority card previously had padding-top:60px (to clear a top-left
   badge), which dropped its icon/title ~28px below the other cards. Now all
   cards share the same top padding and the badge floats in the top-right. */
.sw-svc-card.is-priority { padding-top: 32px; }
.sw-svc-card.is-priority .sw-svc-ic { margin-top: 0; }
.sw-svc-tag {
  top: 18px; right: 22px; left: auto; bottom: auto;
  max-width: calc(100% - 76px);            /* stay clear of the top-left icon */
}
@media (max-width: 560px) {
  /* single-column cards are wide — give the badge room and keep it tidy */
  .sw-svc-tag { max-width: calc(100% - 90px); }
}
/* product card: admin-managed short description (2-line clamp keeps card heights even) */
.sw-product-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 5px; font-size: 13px; line-height: 1.45; color: var(--sw-body);
}

/* ====================================================================
   v6.6 — Ambient telecom SVGs on the /telecoms-b2b page light sections
   (services, why, FAQ, contact) — the hero + stats bands are dark with
   their own imagery, so they're left alone. Same bounded ::before pattern
   as the landing page. Shared element IDs → applies to FR + EN automatically.
   ==================================================================== */
.elementor-element-b2bsvc, .elementor-element-b2bwhy,
.elementor-element-b2bfaq, .elementor-element-b2bcontact { position: relative; isolation: isolate; }

.elementor-element-b2bsvc::before, .elementor-element-b2bwhy::before,
.elementor-element-b2bfaq::before, .elementor-element-b2bcontact::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .08; background-repeat: no-repeat;
}
/* services (VoIP / SMS A2P / SIM M2M) — routing + signal + server motifs */
.elementor-element-b2bsvc::before {
  background-image: var(--swic-route), var(--swic-sim), var(--swic-wave), var(--swic-server), var(--swic-gear), var(--swic-shield), var(--swic-route);
  background-position: 4% 7%, 95% 12%, 6% 30%, 94% 40%, 5% 60%, 95% 70%, 50% 90%;
  background-size: 56px, 54px, 52px, 50px, 54px, 52px, 50px;
}
/* why SAWATELL — trust + infrastructure motifs */
.elementor-element-b2bwhy::before {
  background-image: var(--swic-shield), var(--swic-gear), var(--swic-server), var(--swic-route), var(--swic-wave), var(--swic-sim);
  background-position: 4% 8%, 95% 14%, 6% 36%, 94% 48%, 7% 70%, 92% 84%;
  background-size: 54px, 52px, 56px, 50px, 52px, 54px;
}
/* FAQ B2B */
.elementor-element-b2bfaq::before {
  background-image: var(--swic-wave), var(--swic-route), var(--swic-cpu), var(--swic-gear), var(--swic-sim);
  background-position: 4% 12%, 95% 18%, 6% 58%, 93% 74%, 50% 92%;
  background-size: 52px, 54px, 50px, 52px, 50px;
}
/* contact / quote band */
.elementor-element-b2bcontact::before {
  background-image: var(--swic-route), var(--swic-server), var(--swic-sim), var(--swic-wave), var(--swic-shield);
  background-position: 4% 9%, 95% 16%, 6% 50%, 94% 64%, 8% 88%;
  background-size: 54px, 52px, 56px, 50px, 52px;
}
@media (max-width: 768px) {
  .elementor-element-b2bsvc::before, .elementor-element-b2bwhy::before,
  .elementor-element-b2bfaq::before, .elementor-element-b2bcontact::before { opacity: .05; background-size: 40px; }
}

/* ====================================================================
   v6.7 — subtle "made by" agency credit in the footer bottom bar.
   ==================================================================== */
.sw-footer-credit {
  font-size: 12px;
  color: rgba(255, 255, 255, .38);
  letter-spacing: .01em;
}
.sw-footer-credit a {
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  transition: color .25s ease, border-color .25s ease;
}
.sw-footer-credit a:hover { color: var(--sw-cyan); border-color: var(--sw-cyan); }
@media (max-width: 768px) { .sw-footer-credit { display: block; margin-top: 6px; } }
/* The fixed language pill (.sw-lang-float, ~145x40 @ bottom-right:18px) shows on
   desktop only (hidden <=768px) and sits over the footer's bottom-right corner.
   Put the credit on its OWN centred line (horizontally clear of the right-corner
   pill at any width) and lift the bar so the credit/legal never hide behind it. */
@media (min-width: 769px) {
  /* Symmetric, centred bottom bar: copyright + legal centred on one line, the
     credit centred on its own line beneath. Everything stays in the middle, so
     nothing sits in the bottom-right corner where the fixed language pill lives. */
  .sw-footer-bottom { justify-content: center; text-align: center; column-gap: 28px; padding-bottom: 44px; }
  .sw-footer-credit { flex-basis: 100%; order: 9; text-align: center; margin-top: 2px; }
}

/* ====================================================================
   v6.8 — branded scrollbar (navy track, cyan→blue gradient thumb).
   Covers WebKit/Blink (Chrome, Edge, Safari) + the standard
   scrollbar-* properties (Firefox). Honours reduced-motion.
   ==================================================================== */
/* Firefox + standard */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--sw-primary) rgba(10, 14, 26, .06);
}
/* WebKit / Blink */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track {
  background: rgba(10, 14, 26, .06);
}
::-webkit-scrollbar-thumb {
  border-radius: 9px;
  border: 3px solid transparent;        /* inset gap so the thumb floats in the track */
  background-clip: padding-box;
  background-color: var(--sw-primary);
  background-image: linear-gradient(180deg, var(--sw-primary-lt) 0%, var(--sw-primary) 100%);
  transition: background-color .25s ease;
}
::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(180deg, var(--sw-primary-lt) 0%, var(--sw-primary-2) 100%);
}
::-webkit-scrollbar-thumb:active {
  background-image: linear-gradient(180deg, var(--sw-primary) 0%, var(--sw-primary-2) 100%);
}
::-webkit-scrollbar-corner { background: transparent; }

/* On the dark hero/header overlay the page bg is navy — lighten the track there
   isn't needed (the scrollbar belongs to <html>), but keep the thumb readable on
   both light and dark by using the gradient above which has contrast on each. */
@media (prefers-reduced-motion: reduce) {
  ::-webkit-scrollbar-thumb { transition: none; }
}
/* Hide the scrollbar entirely on mobile/touch (native overlay feel; the styled
   12px bar looked heavy on phones). Scrolling still works. */
@media (max-width: 768px) {
  html { scrollbar-width: none; -ms-overflow-style: none; }
  ::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
}

/* ====================================================================
   v6.9 — HERO redesign: a calmer, modern, uncluttered layout.
   Supersedes the accumulated mobile-hero rules (v4.3/v4.9 area).
   Desktop: refine the measure + vertical rhythm only.
   Mobile : one consistent centred column — confident headline, a
            readable (un-justified) subtitle on a tight measure, and
            full-width STACKED CTAs with real tap targets.
   ==================================================================== */

/* ---- Desktop / tablet refinement (subtle) ---- */
@media (min-width: 769px) {
  /* tighten the subtitle measure so it reads as 2 calm lines, not a wide slab */
  body.sawatell-theme .sawatell-hero .elementor-widget-text-editor p {
    max-width: 600px !important; margin-left: auto !important; margin-right: auto !important;
    line-height: 1.6 !important; color: #D7DEE8 !important;
  }
  /* eyebrow: quiet cyan kicker with a touch more breathing room under it */
  body.sawatell-theme .sawatell-hero .elementor-element-swhrkic .elementor-heading-title {
    color: var(--sw-cyan) !important; letter-spacing: 3px !important; margin-bottom: 16px !important;
  }
  body.sawatell-theme .sawatell-hero .elementor-element-swhrh1 .elementor-heading-title { letter-spacing: -.015em !important; }
}

/* ---- Mobile: clean single centred column ---- */
@media (max-width: 768px) {
  /* vertically centre the whole text block; balanced padding */
  .sawatell-hero {
    justify-content: center !important;
    padding-top: calc(18px + var(--sw-header-h)) !important;
    padding-bottom: 48px !important;
    text-align: center !important;
  }

  /* eyebrow — small tracked cyan kicker */
  body.sawatell-theme .sawatell-hero .elementor-element-swhrkic .elementor-heading-title {
    font-size: 11px !important; letter-spacing: 2.5px !important; font-weight: 700 !important;
    color: var(--sw-cyan) !important; line-height: 1.3 !important; margin-bottom: 14px !important;
  }

  /* headline — confident (was a timid 22px) */
  body.sawatell-theme .sawatell-hero .elementor-element-swhrh1 .elementor-heading-title,
  body.sawatell-theme .sawatell-hero .elementor-heading-title {
    font-size: 30px !important; line-height: 1.1 !important; letter-spacing: -.015em !important;
    margin: 0 0 16px !important; text-align: center !important;
  }

  /* subtitle — centred, readable, tight measure (NO justify) */
  body.sawatell-theme .sawatell-hero .elementor-widget-text-editor p {
    text-align: center !important; text-justify: auto !important;
    font-size: 15px !important; line-height: 1.6 !important;
    max-width: 330px !important; margin: 0 auto !important; color: #D7DEE8 !important;
  }

  /* CTAs — STACKED, full-width, real tap targets (were cramped 11.5px pills) */
  .sawatell-hero .elementor-element-swhrbtns {
    flex-direction: column !important; flex-wrap: nowrap !important;
    align-items: stretch !important; justify-content: center !important;
    gap: 12px !important; width: 100% !important; max-width: 320px !important;
    margin: 0 auto !important; padding-top: 30px !important; padding-bottom: 0 !important;
  }
  .sawatell-hero .elementor-element-swhrcta1,
  .sawatell-hero .elementor-element-swhrcta2 { width: 100% !important; margin: 0 !important; display: flex !important; }
  .sawatell-hero .elementor-element-swhrbtns .elementor-button {
    width: 100% !important; justify-content: center !important; align-items: center !important;
    font-size: 14.5px !important; line-height: 1.2 !important; padding: 15px 22px !important;
    white-space: normal !important; border-radius: 10px !important; letter-spacing: .01em !important;
  }
}

/* very small phones (≤360px): ease the headline so it never crowds the edges */
@media (max-width: 360px) {
  body.sawatell-theme .sawatell-hero .elementor-element-swhrh1 .elementor-heading-title,
  body.sawatell-theme .sawatell-hero .elementor-heading-title { font-size: 26px !important; }
  body.sawatell-theme .sawatell-hero .elementor-widget-text-editor p { font-size: 14px !important; max-width: 290px !important; }
}

/* ====================================================================
   v7.0 — Hero mobile: LEFT-ALIGNED layout + kill the fallback-image
   "zoom on scroll". The fallback (hero-villa.jpg) was a background on
   the 100dvh hero element; when the mobile toolbar collapses on scroll
   the element height changes and `cover` re-scales => apparent zoom.
   Fix: paint the fallback on a fixed 100vh layer (largest viewport, so
   it never re-scales during scroll) and remove it from the element bg.
   ==================================================================== */
@media (max-width: 768px) {
  /* --- Keep the bg VIDEO on mobile, but PIN it ---
     The zoom-in/out on scroll was the video re-scaling: its box was tied to
     the 100dvh hero, which changes height as the mobile toolbar collapses,
     so `object-fit:cover` recomputed each time. Fix: pin the video to a
     FIXED 100vh box (vh is locked to the large viewport and never changes
     on scroll) => the video size is constant => no zoom. The fallback image
     sits behind it, darkened to match the footage so the no-autoplay / Low
     Power Mode case is never a raw, bright photo. */
  .sawatell-hero .elementor-background-video-container {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100vh !important; z-index: -2 !important;
  }
  .sawatell-hero video.elementor-background-video-hosted {
    width: 100% !important; height: 100vh !important;
    object-fit: cover !important; transform: none !important;
  }

  /* fallback image (shown only if the video never paints) — BEHIND everything */
  .sawatell-hero { background-image: none !important; }
  .sawatell-hero::before {
    content: ""; position: absolute; left: 0; top: 0; width: 100%;
    height: 100vh;                 /* fixed to the large viewport => no re-scale on toolbar collapse */
    z-index: -3; pointer-events: none;
    background: url("/wp-content/uploads/sawatell/hero-villa.jpg") center center / cover no-repeat;
  }
  /* ONE darkening overlay ON TOP of whatever shows (playing video, paused
     first frame, OR fallback image) but BELOW the text. This is why a
     non-autoplaying first frame looked bright before — the darkening was
     behind the video. z-index:-1 keeps it under all hero content (content
     is static/positioned => always above a negative-z-index layer). */
  .sawatell-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(7,16,38,.40) 0%, rgba(7,16,38,.60) 100%);
  }

  /* --- CENTRED text column (re-centred per request) --- */
  .sawatell-hero { justify-content: center !important; text-align: center !important; }
  body.sawatell-theme .sawatell-hero .elementor-element-swhrkic .elementor-heading-title,
  body.sawatell-theme .sawatell-hero .elementor-element-swhrh1 .elementor-heading-title,
  body.sawatell-theme .sawatell-hero .elementor-heading-title,
  body.sawatell-theme .sawatell-hero .elementor-widget-text-editor p {
    text-align: center !important;
  }
  body.sawatell-theme .sawatell-hero .elementor-widget-text-editor p {
    margin-left: auto !important; margin-right: auto !important; max-width: 330px !important;
  }
  /* CTAs: centred full-width stacked block */
  .sawatell-hero .elementor-element-swhrbtns {
    align-items: stretch !important; justify-content: center !important;
    margin-left: auto !important; margin-right: auto !important; max-width: 320px !important;
  }
  .sawatell-hero .elementor-element-swhrcta1,
  .sawatell-hero .elementor-element-swhrcta2 { width: 100% !important; }
  .sawatell-hero .elementor-element-swhrbtns .elementor-button {
    width: 100% !important; justify-content: center !important; display: flex !important; padding: 15px 22px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* nothing extra needed; the fallback layer is already static */
}

/* ====================================================================
   v7.2 — Kill stray horizontal scroll on mobile. Off-canvas bits (the
   partner-logo marquee track, the closed slide-in nav drawer) can poke
   a few px past the viewport. Clip the scroll root on small screens.
   The fixed header + language pill are position:fixed, so unaffected.
   ==================================================================== */
@media (max-width: 768px) {
  /* html stays the scroll root (window.scrollY intact -> header morph still
     fires). body uses overflow-x:clip, which clips horizontally WITHOUT
     becoming a scroll container, so it never steals vertical scrolling. */
  html { overflow-x: hidden !important; }
  body { overflow-x: clip !important; max-width: 100% !important; }
  .sawatell-hero { overflow-x: clip; }
}

/* ====================================================================
   v7.3 — "MARQUES SÉLECTIONNÉES" (brands) section: stronger text
   contrast over the background image (requested — paragraph was hard
   to read). Brighter text + a legibility shadow on all three blocks.
   ==================================================================== */
.elementor-element-swbrkic .elementor-heading-title,
.elementor-element-swbrh .elementor-heading-title,
.elementor-element-swbrintro p {
  text-shadow: 0 1px 16px rgba(7,16,38,.70), 0 1px 3px rgba(7,16,38,.55) !important;
}
.elementor-element-swbrh .elementor-heading-title { color: #FFFFFF !important; }
.elementor-element-swbrintro p { color: #F2F6FB !important; }

/* ====================================================================
   v7.4 — BLOG: card grid for the listing page + tidy single-post body
   ==================================================================== */
.sw-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 1180px; margin: 0 auto; padding: 8px 0 10px; }
@media (max-width: 1024px) { .sw-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .sw-blog-grid { grid-template-columns: 1fr; } }
.sw-blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sw-border); border-radius: 16px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
/* the whole card is an <a> — kill ALL inherited link decoration / visited colors */
.sw-blog-card, .sw-blog-card:link, .sw-blog-card:visited, .sw-blog-card:hover,
.sw-blog-card *, .sw-blog-card *:visited { text-decoration: none !important; }
.sw-blog-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(0,61,144,.4); border-color: #cdd9ea; }
.sw-blog-img { display: block; width: 100%; aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: var(--sw-paper); }
.sw-blog-img--ph { background: linear-gradient(135deg, #0e2f5c, #0A0E1A); }
.sw-blog-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.sw-blog-date { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sw-cyan-d) !important; }
.sw-blog-title { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--sw-text) !important; }
.sw-blog-excerpt { font-size: 14.5px; line-height: 1.55; color: var(--sw-body) !important; }
.sw-blog-cta { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--sw-primary) !important; }
.sw-blog-empty { text-align: center; color: var(--sw-body); font-size: 16px; padding: 30px 0; }
/* single post: comfortable reading column inside the themed page */
.single-post .entry-content, .single-post .sw-single-post { max-width: 760px; margin: 0 auto; line-height: 1.7; color: var(--sw-body); }
.single-post .entry-content h2, .single-post .entry-content h3 { color: var(--sw-text); margin-top: 1.4em; }

/* ====================================================================
   v7.5 — BLOG: premium single-post layout + upgraded listing cards
   ==================================================================== */
/* ---- single post (single.php) ---- */
.sw-post { background: var(--sw-paper); }
.sw-post-hero { position: relative; text-align: center; color: #fff;
  background: radial-gradient(120% 130% at 50% 0%, #11294c 0%, #0A0E1A 76%);
  padding: calc(var(--sw-header-h, 76px) + 66px) 22px 116px; }
.sw-post-hero-inner { max-width: 760px; margin: 0 auto; }
.sw-post-back { display: inline-block; margin-bottom: 20px; font-size: 13.5px; font-weight: 600;
  color: rgba(255,255,255,.7) !important; text-decoration: none !important; transition: color .2s ease; }
.sw-post-back:hover { color: var(--sw-cyan) !important; }
.sw-post-title { color: #fff; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.12; letter-spacing: -.02em; margin: 8px 0 22px; }
.sw-post-meta { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; color: rgba(255,255,255,.72); font-size: 14px; }
.sw-post-meta span { display: inline-flex; align-items: center; gap: 7px; }
.sw-post-meta svg { width: 16px; height: 16px; }
/* cover image overlapping the hero */
.sw-post-cover { max-width: 900px; margin: -78px auto 0; padding: 0 22px; position: relative; z-index: 2; }
.sw-post-cover img { width: 100%; height: auto; display: block; border-radius: 18px; box-shadow: 0 30px 70px -30px rgba(7,16,38,.55); }
/* article body — comfortable reading column */
.sw-post-body { max-width: 740px; margin: 0 auto; padding: 56px 22px 16px; color: var(--sw-text); font-size: 17px; line-height: 1.8; }
.sw-post-body > * { margin: 0 0 1.25em; }
.sw-post-body h2 { font-size: 26px; line-height: 1.25; margin: 1.5em 0 .5em; color: var(--sw-ink); letter-spacing: -.01em; }
.sw-post-body h3 { font-size: 21px; margin: 1.35em 0 .4em; color: var(--sw-ink); }
.sw-post-body a { color: var(--sw-primary); text-decoration: underline; text-underline-offset: 2px; }
.sw-post-body ul, .sw-post-body ol { padding-left: 1.3em; }
.sw-post-body li { margin: .4em 0; }
.sw-post-body img { max-width: 100%; height: auto; border-radius: 14px; }
.sw-post-body blockquote { margin: 1.6em 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--sw-cyan); color: var(--sw-ink); font-size: 19px; font-style: italic; }
.sw-post-foot { max-width: 740px; margin: 0 auto; padding: 16px 22px 96px; }
@media (max-width: 768px) { .sw-post-hero { padding-bottom: 92px; } .sw-post-cover { margin-top: -60px; } .sw-post-body { font-size: 16px; padding-top: 40px; } }

/* ---- upgraded listing cards (sexier: zoom, lift, deeper shadow) ---- */
.sw-blog-grid { gap: 30px; }
.sw-blog-card { border-radius: 18px; box-shadow: 0 6px 22px -12px rgba(7,16,38,.22); }
.sw-blog-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -26px rgba(0,61,144,.45); }
.sw-blog-card .sw-blog-img { transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.sw-blog-card:hover .sw-blog-img { transform: scale(1.07); }
.sw-blog-title { font-size: 20px; }
.sw-blog-card:hover .sw-blog-cta { color: var(--sw-cyan-d) !important; }

/* ====================================================================
   v7.6 — Blog cards FULL-WIDTH (one per row), horizontal layout
   ==================================================================== */
.sw-blog-grid { grid-template-columns: 1fr !important; max-width: 1040px; gap: 26px; }
.sw-blog-card { flex-direction: row !important; align-items: stretch; }
.sw-blog-img { width: 40%; flex: 0 0 40%; aspect-ratio: auto; min-height: 250px; }
.sw-blog-body { flex: 1; justify-content: center; padding: 32px 40px; gap: 11px; }
.sw-blog-title { font-size: 24px; line-height: 1.25; }
.sw-blog-excerpt { font-size: 15px; }
.sw-blog-cta { margin-top: 6px; font-size: 15px; }
@media (max-width: 680px) {
  .sw-blog-card { flex-direction: column !important; }
  .sw-blog-img { width: 100%; flex: none; aspect-ratio: 16/10; min-height: 0; }
  .sw-blog-body { padding: 22px 22px 24px; }
  .sw-blog-title { font-size: 20px; }
}

/* ====================================================================
   v7.7 — AJAX form result banner (shown inline, no page reload)
   ==================================================================== */
.sw-form-msg { padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; font-size: 14.5px; line-height: 1.5; font-weight: 500; }
.sw-form-msg.sw-form-ok  { background: #ECFDF5; border: 1px solid #10B981; color: #065F46; }
.sw-form-msg.sw-form-err { background: #FEF2F2; border: 1px solid #DC2626; color: #7F1D1D; }

/* ====================================================================
   v7.8 — Render-level removals (robust against Elementor re-saves):
   hide the phone contact items + the B2B "Demander un devis" button,
   and stop the telecom CTA button from overflowing on mobile.
   ==================================================================== */
/* phone removed only on the B2B page (these are B2B elements); home contact keeps its phone */
.elementor-element-b2bci0,      /* B2B contact: phone row container (icon + number) */
.elementor-element-b2bcit0,     /* B2B contact phone text */
.elementor-element-b2bp {       /* B2B hero: phone ghost button */
  display: none !important;
}
/* B2B hero quote button stays visible, re-labelled "Nous contacter" by the filter */
/* telecom teaser CTA: long label must wrap inside the pill, never overflow */
.elementor-element-telbtn .elementor-button,
.elementor-element-telbtn a.elementor-button,
.elementor-element-telbtn a {
  white-space: normal !important; max-width: 100% !important; height: auto !important; line-height: 1.3 !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; text-align: center;
}
@media (max-width: 768px) {
  .elementor-element-telbtn .elementor-button, .elementor-element-telbtn a {
    font-size: 14px !important; padding: 14px 18px !important; width: 100%;
  }
}

/* v7.9 — offset anchored sections below the fixed header (À propos etc.) */
#apropos, #content { scroll-margin-top: 92px; }

/* v8.0 — "Visit the shop" CTA in the partners section + footer social icons */
.sw-shop-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--sw-primary) !important;
  font-weight: 400; font-size: 15px; letter-spacing: normal;
  padding: 12px 24px; border-radius: 3px; text-decoration: none !important;
  box-shadow: none; text-shadow: none !important;
}
.sw-shop-cta, .sw-shop-cta * { text-shadow: none !important; }
/* v8.2 — match the B2B white button: crisp 3px corners, flat, no hover change */
.sw-shop-cta:hover { background: #fff; color: var(--sw-primary) !important; box-shadow: none; transform: none; text-shadow: none !important; }
/* footer social: keep all icons (incl. new FB / IG / TikTok) uniform */
.sw-footer-social a svg { width: 18px; height: 18px; display: block; }

/* ====================================================================
   v8.1 — Fix double-button: when sw-btn / sw-btn--cyan lands on an
   Elementor button WIDGET WRAPPER, the wrapper was being styled as a
   second (bigger) button, showing an oversized background/box-shadow
   on hover behind the real .elementor-button. Neutralise the wrapper.
   (Shortcode <a class="sw-btn"> buttons are unaffected — they don't
   carry .elementor-widget-button.)
   ==================================================================== */
.elementor-widget-button.sw-btn,
.elementor-widget-button.sw-btn--cyan,
.elementor-widget-button.sw-btn--cyan:hover,
.elementor-widget-button.sw-btn:hover {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
/* keep a clean, contained hover on the actual inner button */
.elementor-widget-button.sw-btn .elementor-button:hover,
.elementor-widget-button.sw-btn--cyan .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(0,0,0,.45);
}