/* ============================================================
   css/style.css - custom styles (prefer Tailwind; only what Tailwind cannot express lives here)
   Site styles - light, white-based palette
   ============================================================ */

/* ---------- Global basics ---------- */
:root {
  /* primary blue */
  /* primary blue, hover */
  /* primary blue */
  /* primary blue */
  /* page background */
  /* card surface */
  /* light grey surface */
  --color-border: #e8e8ed;
  /* primary text */
  /* secondary text */
  /* muted text */
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
  /* primary blue */
  background-image:
    radial-gradient(ellipse 70% 40% at 50% -10%, rgba(0, 113, 227, 0.07), transparent),
    radial-gradient(ellipse 40% 30% at 100% 0%, rgba(90, 200, 250, 0.05), transparent),
    radial-gradient(ellipse 40% 30% at 0% 0%, rgba(10, 132, 255, 0.05), transparent);
  background-attachment: fixed;
}

::selection {
  background: rgba(0, 113, 227, 0.15);
}

/* scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0071e3;
}

/* ---------- Sticky top navigation ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(15, 23, 42, 0.06);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
}

body.has-fixed-header {
  padding-top: 72px;
}

/* ---------- Multi-level dropdown menu ---------- */
.dropdown-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 230px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12);
  padding: 0.5rem 0;
  z-index: 60;
}

.nav-item:hover > .dropdown-menu,
.nav-item:focus-within > .dropdown-menu {
  display: block;
}

.dropdown-menu .dropdown-menu {
  left: 100%;
  top: -0.5rem;
}

.dropdown-item {
  position: relative;
}

.dropdown-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1.25rem;
  font-size: 0.875rem;
  color: var(--color-text-2);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-item > a:hover {
  background-color: rgba(0, 113, 227, 0.06);
  color: var(--color-primary);
}

/* Contact dropdown (nav bar, 2026-10-15): carries real values — an e-mail address is
   longer than a menu label, so this one menu is wider and its icons get a fixed slot
   so the text of all five rows stays left-aligned. */
.site-header .contact-dropdown {
  min-width: 288px;
}

.site-header .contact-dropdown > .dropdown-item > a {
  justify-content: flex-start;
  gap: 0.55rem;
  white-space: nowrap;
}

/* ---------- Language menu (2026-10-15) ---------- */
.lang-menu-btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1d1d1f;
}

.lang-menu-btn:hover {
  border-color: #1d1d1f;
}

.lang-menu .lang-menu-list {
  left: auto;
  right: 0;
  min-width: 190px;
}

.lang-menu.open .lang-menu-list {
  display: block;
}

.lang-menu-list a.is-current {
  font-weight: 700;
  color: var(--color-primary);
}

.lang-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 13.5px;
  color: #1d1d1f;
}

.lang-chip.is-current {
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

/* ---------- Buttons (pill) ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #0071e3;
  color: #fff;
  font-weight: 600;
  padding: 0.85rem 2rem;
  border-radius: 9999px;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 24px rgba(0, 113, 227, 0.25);
}

.btn-primary:hover {
  background: #0077ed;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 113, 227, 0.35);
}

/* Guard: a button's label must never be recoloured by a generic text utility class
   (this made the header CTA "Get a Quote" blue-on-blue and invisible on /contact/).
   type+class outranks a single utility class, so load order does not matter. */
a.btn-primary,
button.btn-primary,
a.btn-primary:hover,
button.btn-primary:hover {
  color: #fff;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #e8e8ed;
  color: var(--color-text);
  font-weight: 600;
  padding: 0.85rem 2rem;
  border-radius: 9999px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-ghost:hover {
  background: #dcdce1;
  transform: translateY(-2px);
}

/* ---------- Breadcrumbs ---------- */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-3);
}

.breadcrumb a {
  color: var(--color-text-2);
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.breadcrumb .sep {
  color: #cbd5e1;
}

/* ---------- Mobile bottom navigation bar ---------- */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  overflow: hidden;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 55;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.06);
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 0 8px;
  font-size: 12px;
  color: #64748b;
  transition: color 0.2s ease;
  /* The five tabs must never demand more width than the screen: a fixed-position bar whose
     items are wider than the viewport drags the whole document sideways (this made every
     page horizontally scrollable at 320-360px). */
  flex: 1 1 0;
  min-width: 0;
  padding-left: 2px;
  padding-right: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-nav-item.active {
  color: #0071e3;
}

.mobile-nav-item.active i {
  transform: translateY(-1px);
}

/* mobile only (<1024px) */
@media (max-width: 1023px) {
  .mobile-bottom-nav {
    display: flex;
  }
  /* reserve space at the bottom of the body so the fixed bar never covers content */
  body.has-fixed-header {
    /* the fixed bar renders 68px tall and also covers the iOS home indicator area */
    padding-bottom: 84px;
  }
}

/* ---------- Mobile menu ---------- */
.mobile-menu {
  display: none;
  background: #fff;
  border-top: 1px solid var(--color-border);
}

.mobile-menu.open {
  display: block;
}

.mobile-menu a {
  color: var(--color-text-2);
}

.mobile-menu a:hover {
  color: var(--color-primary);
  background: rgba(0, 113, 227, 0.05);
}

@media (min-width: 1280px) {
  .mobile-menu {
    display: none !important;
  }
}

/* ---------- Animation ---------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeInUp 0.9s ease both;
}

@keyframes pulseSlow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse-slow {
  animation: pulseSlow 2.4s ease-in-out infinite;
}

@keyframes floatY {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.animate-float {
  animation: floatY 5s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.05);
  }
}

.animate-glow {
  animation: glowPulse 4s ease-in-out infinite;
}

/* ---------- Cards ---------- */
.card-hover {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.card-hover:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 113, 227, 0.3) !important;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.1);
}

/* ---------- Scroll-in reveal (see the IntersectionObserver in main.js) ----------
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Channel wall horizontal scroll ---------- */
.channel-row {
  scrollbar-width: thin;
  scrollbar-color: #d4d4f0 transparent;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.channel-row::-webkit-scrollbar {
  height: 6px;
}

.channel-row::-webkit-scrollbar-track {
  background: transparent;
}

.channel-row::-webkit-scrollbar-thumb {
  background: #ddd6fe;
  border-radius: 3px;
}

/* ---------- Gradient text ---------- */
.gradient-text {
  background: linear-gradient(135deg, #0071e3 0%, #0a84ff 50%, #5ac8fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Shared styles for the terms / privacy pages ----------
   Note: those pages are edited as text without classes, so the element styles live here */
.policy-content h1 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.policy-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.policy-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  color: var(--color-text);
}

.policy-content p {
  line-height: 1.8;
  margin-bottom: 1.25rem;
  color: var(--color-text-2);
}

.policy-content ul,
.policy-content ol {
  margin: 0 0 1.25rem 1.5rem;
  line-height: 1.8;
  color: var(--color-text-2);
}

.policy-content li {
  margin-bottom: 0.5rem;
}

.policy-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.policy-content strong {
  color: var(--color-text);
}

/* Tap targets (WCAG 2.2 SC 2.5.8): pointer targets need at least 24x24 CSS px. Text links
   inside a sentence are exempt, but footer / breadcrumb / dropdown / TOC lists are not -
   those were rendering 16-20px tall. */
footer nav a,
footer .footer-links a,
.site-header .dropdown-menu a,
.mobile-menu a,
.breadcrumb a,
.pd-toc a,
.bl-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* WCAG 2.2 SC 2.5.8 (target size): standalone links, chips and form controls need at least
   24x24 CSS px. Links inside a sentence are exempt, so those are left untouched. */
.hl-sgo,
#mf-all,
.pd-seeall,
#nav-search-input,
#pc-q,
.pc-sort select {
  min-height: 24px;
}

/* Mobile form controls: iOS Safari zooms the whole page when a focused field's font-size is
   below 16px. Keep fields at 16px on small screens so typing does not jump the layout. */
@media (max-width: 1023px) {
  input[type='text'],
  input[type='search'],
  input[type='email'],
  input[type='tel'],
  input[type='number'],
  select,
  textarea {
    font-size: 16px;
  }
}

/* Six bottom-nav tabs (Home / Products / Solutions / Blog / Contact / WhatsApp) no longer fit
   with their labels on the narrowest phones: at 360px each tab gets 60px and "Solutions" needs
   ~63px, which clipped to "Solution…". Below 381px the bar falls back to icons only - the
   aria-labels on the links keep them announced. */
@media (max-width: 380px) {
  .mobile-nav-item span {
    display: none;
  }

  .mobile-nav-item {
    padding-top: 14px;
    padding-bottom: 12px;
    font-size: 12px;
  }
}

/* Long unbreakable strings (model numbers, URLs) must wrap instead of widening the page. */
.container, article, section, .blog-content {
  overflow-wrap: anywhere;
}
.blog-content pre,
.blog-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Footer legal links sit inside a <p>, so the nav rule above never reached them. */
footer p a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Blog filter chips are standalone controls (24px minimum target). */
.bl-chip {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

/* ---------- Hero: dark field (homepage) ---------- */
.hero-dark {
  position: relative;
  overflow: hidden;
  background: #101317;
  color: #fff;
  padding: 56px 0 64px;
}
/* Photo field: the image carries the hero, so the scrim only has to make the text side
   readable - it never turns the section into a flat dark block. */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    96deg,
    rgba(8, 11, 16, 0.44) 0%,
    rgba(8, 11, 16, 0.34) 34%,
    rgba(8, 11, 16, 0.14) 62%,
    rgba(8, 11, 16, 0.02) 100%
  );
}
@media (min-width: 641px) {
  .hero-scrim::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 180px;
    background: linear-gradient(180deg, rgba(8, 11, 16, 0.5), rgba(8, 11, 16, 0));
  }
}
@media (max-width: 640px) {
  .hero-scrim {
    background: linear-gradient(
      180deg,
      rgba(8, 11, 16, 0.52) 0%,
      rgba(8, 11, 16, 0.4) 52%,
      rgba(8, 11, 16, 0.2) 100%
    );
  }
}
@media (min-width: 1024px) {
  .hero-dark { padding: 72px 0 88px; }
}
.hero-lbl {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.hero-h1 {
  margin-top: 26px;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 15ch;
}
@media (min-width: 1024px) {
  .hero-h1 { font-size: 64px; }
}
.hero-sub {
  margin-top: 28px;
  max-width: 46ch;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: #cdced3;
}
@media (min-width: 1024px) {
  .hero-sub { font-size: 19px; }
}
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 24px;
  margin-top: 26px;
  font-size: 15.5px;
  font-weight: 500;
  color: #6cb2ff;
  text-decoration: none;
}
.hero-link:hover { color: #96c8ff; text-decoration: underline; }
.hero-link i { font-size: 12px; }
.hero-actions { margin-top: 30px; }
.hero-btn {
  font-family: 'Space Grotesk', Inter, sans-serif;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  background: #fff;
  color: #0a0b0d;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.hero-btn:hover { background: #e8e8ed; }
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}
.hero-card {
  position: relative;
  margin: 36px 0 0;
  border-radius: 20px;
  overflow: hidden;
  background: #121317;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
}
.hero-video {
  display: block;
  width: 100%;
  /* native aspect ratio: with a matching box the whole frame is visible, never cropped */
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}
.hero-copy {
  max-width: 620px;
}
@media (min-width: 1024px) {
  /* Five columns of copy beside a seven-column clip: keep the headline stack to three lines */
  .hero-h1 { font-size: 56px; }
}
@media (min-width: 1024px) {
  .hero-card { margin-top: 0; }
}
.hero-play {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: rgba(10, 11, 13, 0.35);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-play:hover { background: rgba(10, 11, 13, 0.6); transform: scale(1.05); }
.hero-cap {
  position: absolute;
  left: 18px;
  bottom: 20px;
  padding: 7px 13px;
  border-radius: 999px;
  /* the video frame changes brightness as it plays, so the label carries its own background */
  background: rgba(10, 11, 13, 0.66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
  /* The homepage hero has no moving media any more, so there is nothing to still. */
  .hero-video { visibility: hidden; }
}

/* The shared header sits on the dark field of the homepage: transparent, white type,
   and the CTA becomes a grey block (the convention this design follows). */
/* The homepage hero starts at the very top so the fixed header floats over the photo field,
   exactly like the reference. The hero keeps its own top padding to clear the header. */
.home-hero-dark.has-fixed-header { padding-top: 0; }
.home-hero-dark .hero-dark { padding-top: 120px; }
@media (min-width: 1024px) {
  .home-hero-dark .hero-dark { padding-top: 150px; }
}
.home-hero-dark .site-header {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
.home-hero-dark .site-header.scrolled {
  background: rgba(10, 11, 13, 0.92);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.home-hero-dark .site-header .text-slate-900,
.home-hero-dark .site-header .text-slate-600,
.home-hero-dark .site-header .text-slate-500 {
  color: #fff;
}
.home-hero-dark .site-header nav a,
.home-hero-dark .site-header .nav-item > a {
  color: rgba(255, 255, 255, 0.82);
}
.home-hero-dark .site-header nav a:hover,
.home-hero-dark .site-header .nav-item > a:hover {
  color: #fff;
}
.home-hero-dark .site-header .btn-primary {
  background: #565b63;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  min-height: 40px;
  padding: 0 22px;
}
.home-hero-dark .site-header .btn-primary:hover {
  background: #6b717a;
}
/* The blue logo mark and the blue gradient wordmark disappear against a photo. This page uses
   the reverse logo variant (white body, brand-blue mark) and a flat white wordmark instead. */
.logo-reverse { display: none; }
.home-hero-dark .logo-default { display: none; }
.home-hero-dark .logo-reverse { display: inline-block; }
.home-hero-dark .site-header .gradient-text {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
  color: #fff;
}
.home-hero-dark .site-header .mobile-menu-toggle,
.home-hero-dark .site-header .mobile-menu-toggle i {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

/* ---------- Video guides (click-to-load player) ----------
   The cover image is served from this site; the YouTube iframe is only created on click, so a
   page with video cards still makes zero third-party requests and stays light. */
.vg-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .vg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .vg-grid { grid-template-columns: repeat(3, 1fr); }
}
.vg-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e8e8ed;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.vg-card:hover {
  box-shadow: 0 18px 40px rgba(12, 32, 64, 0.10);
  transform: translateY(-2px);
}
.vg-play {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #0f1115;
  color: #fff;
  cursor: pointer;
  line-height: 0;
}
.vg-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(90% 120% at 12% 8%, rgba(0, 113, 227, 0.34), rgba(0, 113, 227, 0) 58%),
    linear-gradient(135deg, #101a2c 0%, #16263f 52%, #0d1524 100%);
  position: relative;
  overflow: hidden;
}
.vg-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(80% 70% at 30% 20%, #000 20%, transparent 78%);
  mask-image: radial-gradient(80% 70% at 30% 20%, #000 20%, transparent 78%);
}
/* ---------- cover with a real still from the guide itself ---------- */
.vg-cover.has-still::after {
  /* the grid is a placeholder for the drawn cover only; over photography it just dirties the frame */
  display: none;
}
.vg-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: 0;
}
/* scrim: keeps the group label legible at the bottom and the play control clear in the middle,
   without washing out the picture */
.vg-cover.has-still::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(9, 14, 24, 0.52) 0%, rgba(9, 14, 24, 0.12) 26%, rgba(9, 14, 24, 0) 46%),
    linear-gradient(0deg, rgba(9, 14, 24, 0.62) 0%, rgba(9, 14, 24, 0.16) 22%, rgba(9, 14, 24, 0) 40%);
}
.vg-cover.has-still .vg-cover-icon,
.vg-cover.has-still .vg-tag,
.vg-cover.has-still .vg-play-icon { z-index: 2; }
.vg-play:hover .vg-cover-img { transform: scale(1.03); transition: transform 0.35s ease; }
.vg-cover-icon {
  position: absolute;
  left: 22px;
  top: 20px;
  font-size: 30px;
  color: rgba(255, 255, 255, 0.92);
}
.vg-play:hover .vg-cover { filter: brightness(1.12); }
.vg-tag {
  position: absolute;
  left: 22px;
  bottom: 16px;
  line-height: 1.3;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.vg-play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #0071e3;
  font-size: 17px;
  padding-left: 3px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s ease;
}
.vg-play:hover .vg-play-icon { transform: translate(-50%, -50%) scale(1.08); }
.vg-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0f1115;
}
.vg-frame video {
  display: block;
  width: 100%;
  height: 100%;
  background: #0f1115;
}
.vg-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.vg-meta { padding: 18px 20px 22px; }
.vg-meta h3 {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: #1d1d1f;
}
.vg-meta p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #4f4f54;
}
.vg-meta .vg-src {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6e6e73;
}
.vg-feature .vg-meta h3 { font-size: 20px; }
.vg-feature .vg-meta { padding: 22px 24px 26px; }

/* ---------- /videos/ first screen: one-line conclusion + enquiry entry (2026-10-15) ---------- */
.vg-lede {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.6;
  color: #1d1d1f;
  max-width: 66ch;
}
@media (min-width: 1024px) {
  .vg-lede { font-size: 19px; }
}
.vg-cta-row {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.vg-cta-note {
  font-size: 13.5px;
  line-height: 1.5;
  color: #6e6e73;
  max-width: 42ch;
}

/* ---------- Per-video ask block: the cost question plus the enquiry entry ----------
   Sits at the bottom of every card, on /videos/ and on the homepage feature card. The answer is the
   site's published commercial term (quoted per model, no list price); no figure is invented here. */
.vg-ask {
  margin-top: auto;
  padding: 14px 20px 18px;
  border-top: 1px solid #ececf1;
  background: #fafafb;
}
.vg-feature .vg-ask { padding: 16px 24px 20px; }
.vg-ask-q {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: #1d1d1f;
}
.vg-ask-a {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6e6e73;
}
.vg-ask-link {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  font-size: 13.5px;
  font-weight: 600;
  color: #0071e3;
}
.vg-ask-link:hover { color: #0066cc; text-decoration: underline; }
.vg-ask-link i { font-size: 11px; }

@media (max-width: 640px) {
  .hero-light { padding: 80px 0 68px; }
  .vg-cta-row .btn-primary,
  .vg-cta-row .btn-ghost {
    padding: 11px 15px;
    font-size: 14.5px;
  }
  .vg-cta-row { margin-top: 20px; }
}

/* ---------- Homepage hero (light, first-party product photo) ----------
   Replaces the earlier dark-photo hero, which was built on stock imagery that turned out not to be
   ours (a car park standing in for a production line). Everything here uses the site's own palette,
   and the only picture is a real product shot from the catalogue. */
.hero-light {
  position: relative;
  padding: 96px 0 76px;
  background:
    radial-gradient(58% 50% at 80% 6%, rgba(0, 113, 227, 0.10), rgba(0, 113, 227, 0) 72%),
    linear-gradient(180deg, #f7f8fa 0%, #ffffff 80%);
  border-bottom: 1px solid #e8e8ed;
}
@media (min-width: 1024px) {
  .hero-light { padding: 148px 0 92px; }
}
.hero-light .hero-copy { max-width: 620px; }
.hero-light .hero-lbl {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6e6e73;
}
.hero-light .hero-h1 {
  margin-top: 18px;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 40px;
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: #1d1d1f;
}
@media (min-width: 1024px) {
  .hero-light .hero-h1 { font-size: 58px; }
}
.hero-light .hero-sub {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.62;
  color: #4f4f54;
}
.hero-light .hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 15px;
  font-weight: 600;
  color: #0066cc;
  min-height: 24px;
}
.hero-light .hero-actions { margin-top: 26px; }
.hero-light .hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #0071e3;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
}
.hero-light .hero-btn:hover { background: #0066cc; }
.hero-light .hero-facts {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6e6e73;
}

/* ---------- Homepage first screen: proof strip (2026-10-15) ----------
   Four figures, all derived from the catalogue at build time, sitting directly under the quote
   button so the first screen answers "what do they make, and can they do my standard" before the
   visitor decides whether to scroll. Replaces the old uppercase .hero-facts line, whose figures
   (190 models / 9 lines) are now the strip itself and whose remaining trust facts live one band
   below in the trust strip. */
.hero-light .hero-proof {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid #e8e8ed;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}
.hero-light .hero-proof .hp-cell { min-width: 0; }
.hero-light .hero-proof dt {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #1d1d1f;
}
.hero-light .hero-proof dd {
  margin: 5px 0 0;
  font-size: 11.5px;
  line-height: 1.38;
  color: #6e6e73;
}
.hero-light .hero-proof-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #6e6e73;
}
.hero-light .hero-proof-note b { color: #1d1d1f; font-weight: 600; }
@media (min-width: 1024px) {
  .hero-light .hero-proof { margin: 24px 0 0; padding-top: 20px; gap: 18px 26px; }
  .hero-light .hero-proof dt { font-size: 32px; }
  .hero-light .hero-proof dd { margin-top: 6px; font-size: 12.5px; }
  .hero-light .hero-proof-note { margin-top: 12px; font-size: 12.5px; }
}
/* Phones: the two first-screen buttons have to share one row (they are the enquiry entry, and a
   second row pushes the proof strip under the fixed bottom bar). */
@media (max-width: 640px) {
  .hero-light .hero-btn,
  .hero-light .hero-btn-ghost {
    padding: 11px 15px;
    font-size: 14.5px;
  }
}
.hero-light .hero-card {
  position: relative;
  margin: 34px 0 0;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e8e8ed;
  box-shadow: 0 22px 56px rgba(12, 32, 64, 0.08);
}
@media (min-width: 1024px) {
  .hero-light .hero-card { margin-top: 0; }
}
.hero-light .hero-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #f5f5f7;
  padding: 26px;
}
.hero-light .hero-cap {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #e8e8ed;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4f4f54;
}

/* ---------- Homepage hero: layered product stage (first-party product photography) ---------- */
.hero-light .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-light .hero-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #d7d7dd;
  color: #1d1d1f;
  font-size: 15px;
  font-weight: 600;
}
.hero-light .hero-btn-ghost:hover { border-color: #0071e3; color: #0066cc; }

.hero-stage { position: relative; }
.hero-stage-panel {
  position: relative;
  padding: 34px 30px 40px;
  border-radius: 24px;
  background:
    radial-gradient(70% 80% at 74% 8%, rgba(0, 113, 227, 0.16), rgba(0, 113, 227, 0) 62%),
    linear-gradient(160deg, #ffffff 0%, #f2f5fa 58%, #eaeff7 100%);
  border: 1px solid #e3e7ee;
  box-shadow: 0 30px 70px rgba(12, 32, 64, 0.10);
}
.hero-stage-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background-image:
    linear-gradient(rgba(16, 42, 82, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 42, 82, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(84% 76% at 50% 40%, #000 30%, transparent 82%);
  mask-image: radial-gradient(84% 76% at 50% 40%, #000 30%, transparent 82%);
  pointer-events: none;
}
.hero-stage-main {
  display: block;
  width: 100%;
  aspect-ratio: 1600 / 1103;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 26px 34px rgba(12, 32, 64, 0.18));
}
.hero-stage-shadow {
  position: absolute;
  left: 50%;
  bottom: 32px;
  width: 56%;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(12, 32, 64, 0.22), rgba(12, 32, 64, 0) 72%);
  z-index: 1;
}
.hero-chip-card {
  position: absolute;
  z-index: 3;
  margin: 0;
  width: 168px;
  padding: 10px 10px 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #e3e7ee;
  box-shadow: 0 18px 40px rgba(12, 32, 64, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero-chip-card img {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 7;
  object-fit: contain;
  background: #f7f8fb;
  border-radius: 10px;
}
.hero-chip-card figcaption {
  margin-top: 7px;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  color: #1d1d1f;
}
.hero-chip-a { left: -14px; bottom: 58px; }
.hero-chip-b { right: -14px; top: 46px; }
.hero-spec-chip {
  position: absolute;
  z-index: 3;
  left: 26px;
  top: 24px;
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e3e7ee;
  box-shadow: 0 14px 32px rgba(12, 32, 64, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero-spec-k {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6e6e73;
}
.hero-spec-v {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1f;
}

/* slow catalogue wall */
.hero-wall {
  margin-top: 54px;
  padding: 26px 0 8px;
  border-top: 1px solid #e8e8ed;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.hero-wall-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: hero-wall-scroll 64s linear infinite;
}
.hero-wall:hover .hero-wall-track { animation-play-state: paused; }
@keyframes hero-wall-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.hero-wall-item {
  margin: 0;
  width: 168px;
  padding: 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e8e8ed;
}
.hero-wall-item img {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 7;
  object-fit: contain;
  background: #f7f8fb;
  border-radius: 9px;
}
.hero-wall-item figcaption {
  margin-top: 8px;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  color: #4f4f54;
}

@media (max-width: 1023px) {
  .hero-stage-panel { padding: 24px 20px 30px; }
  .hero-chip-card { width: 128px; }
  .hero-chip-a { left: -8px; bottom: 34px; }
  .hero-chip-b { right: -8px; top: 30px; }
  .hero-spec-chip { left: 16px; top: 16px; padding: 8px 11px; }
  .hero-spec-v { font-size: 15px; }
  .hero-wall { margin-top: 36px; padding-top: 20px; }
  .hero-wall-item { width: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wall-track { animation: none; }
}

/* ---------- Hero motion ----------
   The product stage drifts a little as the page scrolls (main.js sets --hero-par), and the two
   floating device chips breathe on their own so the layer never looks pasted on. */
.hero-light .hero-stage-panel {
  transform: translate3d(0, var(--hero-par, 0px), 0);
  will-change: transform;
}
.hero-light .hero-chip-card {
  animation: hero-float 7.5s ease-in-out infinite;
}
.hero-light .hero-chip-b { animation-duration: 9.5s; animation-delay: -2.5s; }
@keyframes hero-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}
/* The wall keeps its own horizontal drift; fade it in without fighting that transform */
.hero-light .hero-wall.reveal { transform: none; }
.hero-light .hero-wall.reveal:not(.revealed) { opacity: 0; }
.hero-light .hero-wall.reveal.revealed { opacity: 1; transition: opacity 0.8s ease; }
@media (prefers-reduced-motion: reduce) {
  .hero-light .hero-stage-panel { transform: none; }
  .hero-light .hero-chip-card { animation: none; }
  /* Visitors who asked for less motion get the content instantly, without the slide-in. */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Hero hover interactions ----------
   The stage already owns its `transform` for the parallax, so every hover lift uses the independent
   `translate` / `scale` properties instead - the two can never overwrite each other. */
.hero-light .hero-stage-panel {
  transition: box-shadow 0.28s ease, border-color 0.28s ease, translate 0.28s ease;
}
.hero-light .hero-stage-main { transition: scale 0.35s ease; }
.hero-light .hero-stage-panel:hover {
  translate: 0 -6px;
  border-color: #d3dced;
  box-shadow: 0 42px 86px rgba(12, 32, 64, 0.15);
}
.hero-light .hero-stage-panel:hover .hero-stage-main { scale: 1.02; }

.hero-light .hero-chip-card {
  transition: translate 0.25s ease, scale 0.25s ease, box-shadow 0.25s ease;
}
.hero-light .hero-chip-card:hover {
  translate: 0 -6px;
  scale: 1.03;
  box-shadow: 0 26px 54px rgba(12, 32, 64, 0.22);
}

.hero-light .hero-wall-item {
  transition: translate 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.hero-light .hero-wall-item:hover {
  translate: 0 -5px;
  border-color: #cfdff5;
  box-shadow: 0 16px 34px rgba(12, 32, 64, 0.12);
}

/* Keyboard users get the same affordance */
.hero-light a:focus-visible,
.hero-light button:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 3px;
  border-radius: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .hero-light .hero-stage-panel:hover,
  .hero-light .hero-chip-card:hover,
  .hero-light .hero-wall-item:hover { translate: none; scale: none; }
  .hero-light .hero-stage-panel:hover .hero-stage-main { scale: none; }
}

/* ---------- Shared product stage ----------
   One soft surface behind product imagery everywhere. The gradient stays almost white because the
   catalogue shots are photographed on white - a darker panel would show the photo's own rectangle. */
.prod-stage {
  position: relative;
  background:
    radial-gradient(130% 100% at 50% 0%, #ffffff 0%, #f6f8fc 54%, #eaeff7 100%);
  border: 1px solid #e4eaf3;
  box-shadow: inset 0 1px 0 #ffffff, 0 14px 34px rgba(12, 32, 64, 0.08);
  overflow: hidden;
}
.prod-stage::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 44%;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(12, 32, 64, 0.10), rgba(12, 32, 64, 0) 72%);
  z-index: 0;
}
.prod-stage img { position: relative; z-index: 1; }

/* ---------- Inner page header + display type ----------
   Same soft field the homepage hero uses, so a visitor moving from the homepage into About, Solutions,
   FAQ or Contact stays in one visual world instead of hitting a flat grey or plain white band. */
.page-head {
  position: relative;
  background:
    radial-gradient(56% 60% at 78% 0%, rgba(0, 113, 227, 0.10), rgba(0, 113, 227, 0) 70%),
    linear-gradient(180deg, #f7f8fa 0%, #ffffff 84%);
  border-bottom: 1px solid #e8e8ed;
}
h1, h2 {
  font-family: 'Space Grotesk', Inter, sans-serif;
  letter-spacing: -0.022em;
}
.ab-eyebrow, .sl-eyebrow {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6e6e73;
}
/* cards that were flat grey boxes now match the rest of the site */
.faq-card {
  background: #ffffff;
  border: 1px solid #e8e8ed;
  border-radius: 16px;
  box-shadow: 0 1px 0 #ffffff inset, 0 10px 26px rgba(12, 32, 64, 0.05);
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.faq-card:hover {
  border-color: rgba(0, 113, 227, 0.35);
  box-shadow: 0 1px 0 #ffffff inset, 0 16px 34px rgba(12, 32, 64, 0.10);
}

/* ---------- Video cards: source line + native player ---------- */
/* two actions in the meta row must not collide with the flex row above */

.vg-media { position: relative; }
.vg-meta .vg-src {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.vg-src-link {
  color: #0066cc;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vg-frame video {
  display: block;
  width: 100%;
  height: 100%;
  background: #0f1115;
}
a.vg-play { text-decoration: none; }

/* ---------- .sr-only — visually hidden, still in the accessibility tree ----------
   Used by the server-rendered <nav class="sr-only"> in src/layouts/Layout.astro, which carries
   the site links that js/main.js otherwise injects by fetch() (so crawlers that do not run
   JavaScript can still find them).
   The classic clip-rect pattern: the element keeps its box and its text nodes, so screen
   readers and text extractors read it, while it is painted at 1x1 px outside the flow.
   Deliberately NOT display:none / visibility:hidden / aria-hidden - those remove the content
   from the accessibility tree as well, which would defeat the purpose.
   !important so nothing Tailwind's CDN injects at runtime can re-show the block. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Conversion entries: floating WhatsApp button ----------
   One unified spec covers the whole site group (2026-09-27). Every page carries exactly ONE
   green floating button; that is checked on the RENDERED DOM, never by grepping the source -
   the header and footer arrive over fetch(), so a source grep sees neither of them.
   WhatsApp green #25d366, flat, no gradient. Server-rendered from Layout.astro, so it exists
   for crawlers and no-JS visitors too. */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 26px;
  z-index: 56;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wa-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.28);
}

.wa-float i {
  font-size: 28px;
  line-height: 1;
}

.wa-float:focus-visible {
  outline: 3px solid #1d1d1f;
  outline-offset: 3px;
}

/* Phones/tablets: the fixed bottom bar renders ~68px tall and also covers the iOS home
   indicator, so the button clears both and never sits on top of a tab. */
@media (max-width: 1023px) {
  .wa-float {
    right: 14px;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px) + 14px);
    width: 52px;
    height: 52px;
  }

  .wa-float i {
    font-size: 26px;
  }
}

/* The bottom-bar WhatsApp tab: official green on the icon only, so the label keeps the
   same weight as its neighbours and the active state stays readable. */
.mobile-nav-item.wa-item i {
  color: #25d366;
}

/* ---------- Conversion entries: end-of-article CTA ----------
   The three labels stay on one line: at desktop widths the row is squeezed by the article
   column, and without nowrap "Chat on WhatsApp" broke into two lines inside a 48px pill. */
.wa-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1.5rem;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wa-cta-btn-wa {
  background: #25d366;
  color: #fff;
}

.wa-cta-btn-wa:hover {
  background: #1ebe5b;
  color: #fff;
}

.wa-cta-btn-mail,
.wa-cta-btn-quote {
  background: #fff;
  border: 1px solid #d2d2d7;
  color: #1d1d1f;
}

.wa-cta-btn-mail:hover,
.wa-cta-btn-quote:hover {
  border-color: #1d1d1f;
}

/* ---------- Top navigation: keep the labels on one line (2026-10-15) ----------
   The search box, the language menu and the quote button share the header row with the six
   top-level items. The items were being squeezed below their text width, so every label broke
   one character per line — in all six languages, from 1024 px up. Keep the label width and let
   the row's flexible parts take up the difference. */
.site-header nav a {
  white-space: nowrap;
}

/* ---------- Header right-hand group: never crush, never wrap (2026-10-19) ----------
   Issue: on a 1536-1920 px screen the row is logo + six nav items + search + language +
   WhatsApp + e-mail + quote button inside the max-w-7xl (1248 px usable) content column.
   The group had no shrink floor, so flexbox squeezed its members below their text width:
   "EN" broke into E/N, "Get a Quote" into three lines in a 40 px-wide pill, and the e-mail
   address wrapped after "cableiptv". The group and its members now keep their intrinsic
   width and their labels stay on one line; the space is made by the rules below, never by
   crushing the item. */
.site-header .header-actions {
  flex: 0 1 auto;
  min-width: 0;
}

.site-header .header-actions > * {
  flex: 0 0 auto;
}

.site-header .header-actions .lang-menu-btn,
.site-header .header-actions > a,
.site-header .header-actions form,
.site-header .header-actions .btn-primary {
  white-space: nowrap;
}

/* The search pill is the only member of the group that may give up width: in the longer
   languages (Russian, Spanish, French) the row needs 30-140 px more than the 1248 px content
   column has, and a narrower search field is a far smaller cost than a wrapped label. */
.site-header .header-actions form {
  flex: 0 1 230px;
  min-width: 6rem;
}

/* 1280 px and up: the six top-level labels are 12 % longer in Russian than in English, so the
   nav links give up 4 px of padding a side (labels, order and URLs unchanged). That, plus the
   flexible search pill above, lets every language fit without touching a label. */
@media (min-width: 1280px) {
  .site-header nav .nav-item > a {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* 1536 px and up: the utility row needs ~1474 px once the e-mail address is visible, and the
   1280 px content column cannot hold it. Let the header row itself grow with the viewport
   (capped at 1560 px) instead of dropping a function or crushing the group. */
@media (min-width: 1536px) {
  .site-header > .container {
    max-width: min(1560px, 100%);
  }
}

/* ---------- Right-to-left pages (Arabic, 2026-10-27) ----------
   <html lang="ar" dir="rtl"> already mirrors text alignment, list markers, flex rows and
   inline direction; only the offsets that are pinned to a physical side need help, plus the
   arrow glyphs, which would otherwise still point at the LTR "forward" side. */
html[dir='rtl'] .dropdown-menu {
  left: auto;
  right: 0;
}

html[dir='rtl'] .dropdown-menu .dropdown-menu {
  left: auto;
  right: 100%;
}

html[dir='rtl'] .lang-menu .lang-menu-list {
  right: auto;
  left: 0;
}

html[dir='rtl'] .fa-arrow-right,
html[dir='rtl'] .fa-chevron-right,
html[dir='rtl'] .fa-arrow-left,
html[dir='rtl'] .fa-chevron-left {
  transform: scaleX(-1);
}

/* The floating WhatsApp and AI buttons sit on the right edge in both directions. On an RTL
   page the hero proof row starts on that edge and its first figure ends up underneath them
   (the "190" was covered on the Arabic home page), so the row is inset from the inline start
   only — the rest of the mirrored hero keeps the full column width. */
html[dir='rtl'] .hero-proof {
  padding-inline-start: 3.75rem;
}