/* ══════════════════════════════════════════════════════════════
           SARA Landing — CSS patch (applied before linked stylesheets)
           ══════════════════════════════════════════════════════════════ */

        /* ── 0. Font Awesome 6 Pro — register all available weights ──
              Pro .woff2 files are in /webfonts/ but fontawesome.min.css
              only declares "Font Awesome 6 Free". Registering "Pro" here
              makes all icons using --icon-font (var) resolve correctly. */
        @font-face {
          font-family: "Font Awesome 6 Pro";
          font-style: normal; font-weight: 100; font-display: block;
          src: url('/site/icons/fontawesome/webfonts/fa-thin-100.woff2') format('woff2'),
               url('/site/icons/fontawesome/webfonts/fa-thin-100.ttf') format('truetype');
        }
        @font-face {
          font-family: "Font Awesome 6 Pro";
          font-style: normal; font-weight: 300; font-display: block;
          src: url('/site/icons/fontawesome/webfonts/fa-light-300.woff2') format('woff2'),
               url('/site/icons/fontawesome/webfonts/fa-light-300.ttf') format('truetype');
        }
        @font-face {
          font-family: "Font Awesome 6 Pro";
          font-style: normal; font-weight: 400; font-display: block;
          src: url('/site/icons/fontawesome/webfonts/fa-regular-400.woff2') format('woff2'),
               url('/site/icons/fontawesome/webfonts/fa-regular-400.ttf') format('truetype');
        }
        @font-face {
          font-family: "Font Awesome 6 Pro";
          font-style: normal; font-weight: 900; font-display: block;
          src: url('/site/icons/fontawesome/webfonts/fa-solid-900.woff2') format('woff2'),
               url('/site/icons/fontawesome/webfonts/fa-solid-900.ttf') format('truetype');
        }

        /* ── 1. Neutralise SARA flex wrapper ──────────────────────── */
        .min-h-screen:has(.page-wrapper),
        .min-h-screen:has(#variant-main) {
          min-height: unset !important;
          display: block !important;
        }
        .min-h-screen > link,
        .min-h-screen > style { display: none !important; }

        /* ── 1b. Reset html flex layout — globals.css sets html{display:flex}
              which can cause background bleeding. Override for landing pages. */
        html:has(.page-wrapper),
        html:has(#variant-main) {
          display: block !important;
          background-color: #061153 !important;
        }

        /* ── 2. Template CSS variables — defined on BODY so they cascade
              to ALL descendants including <Header> which sits outside
              .page-wrapper in the DOM tree.
              Also sets body background; overridden per-style below. */
        body:has(.page-wrapper),
        body:has(#variant-main) {
          --dark-color:   #061153;
          --theme-color:  #1053f3;
          --theme-color3: #061153;
          --title-font:   'Manrope', sans-serif;
          --body-font:    'Noto Sans', sans-serif;
          --body-color:   #4c5160;
          --white-color:  #ffffff;
          --light-color:  #f4f7ff;
          background-color: #061153;
        }

        /* ── 3. Body background override for style1 (light header) pages.
              style1 pages need a white body so the transparent .main-wrapper
              does not show the dark body colour through it. */
        body:has(.tv-header.header-style1) {
          background-color: #ffffff !important;
        }

        /* ── 3b. Explicit white background on style1 main-wrapper
               (belt-and-suspenders; style.css sets it to transparent) */
        .tv-header.header-style1 .main-wrapper {
          background-color: #ffffff !important;
        }

        /* ── 3c. Push header content 20px down in all languages / styles */
        .tv-header .main-wrapper {
          margin-top: 20px !important;
        }

        /* ── 4. CSS variables also on .page-wrapper for inner-page scope */
        .page-wrapper {
          --dark-color:   #061153;
          --theme-color:  #1053f3;
          --theme-color3: #061153;
          --title-font:   'Manrope', sans-serif;
          --body-font:    'Noto Sans', sans-serif;
          --body-color:   #4c5160;
          --white-color:  #ffffff;
          --light-color:  #f4f7ff;
          font-family: var(--body-font);
          color: var(--body-color);
        }

        /* ── 3c. FOUC prevention — keep fixed elements hidden before
              style.css loads (overridden by JS-added classes later) ── */
        .sticky-header:not(.fixed-header) { visibility: hidden; opacity: 0; }
        .sidebar-wrapper       { visibility: hidden; transform: translateX(100%); }
        .sidebar-overlay       { transform: translateX(100%); }

        /* ── 5. Reset global link styles ───────────────────────────── */
        .page-wrapper a,
        .page-wrapper a:hover { text-decoration: none; }

        /* ── 6. Navigation text colours ────────────────────────────── */
        .page-wrapper .main-menu > ul > li > a {
          color: var(--dark-color);
          font-family: var(--title-font);
          font-weight: 700;
        }
        .page-wrapper .main-menu > ul > li > a:hover,
        .page-wrapper .main-menu > ul > li.active > a { color: var(--theme-color); }

        /* ── 7. Header‑top text ─────────────────────────────────────── */
        .page-wrapper .header-top { color: rgba(255,255,255,0.8); }
        .page-wrapper .header-top a { color: rgba(255,255,255,0.8); }
        .page-wrapper .header-top a:hover { color: #fff; }

        /* ── 8. Logo — original template logos (156×42 natural size) ───────
              logo.png     = dark blue ink → for light header (style1)
              logo-2.png   = light blue    → for dark header (style2)
              Inversion rule kept for style2 dark header (original template
              used filter:brightness(0)invert(1) to flip dark→white).     */
        .tv-header.header-style2 .menu-area .header-logo a img:first-child,
        .page-wrapper .mobile-logo img,
        .page-wrapper .footer-brand .logo img {
          filter: brightness(0) invert(1);
        }

        /* ── 9. Tailwind preflight resets ───────────────────────────── */
        .page-wrapper * { box-sizing: border-box; }

        .page-wrapper ul,
        .page-wrapper ol { list-style: none; padding: 0; margin: 0; }

        /* The reset above outranks the template's own page-breadcrumb rule,
           which collapsed the pill onto its border. Restore the template
           padding at a specificity the reset cannot beat. */
        .page-wrapper .page-breadcrumb { padding: 4px 20px; }

        /* FIX #9 — removed font-weight:inherit; let template control heading weight */
        .page-wrapper h1,.page-wrapper h2,.page-wrapper h3,
        .page-wrapper h4,.page-wrapper h5,.page-wrapper h6 { margin: 0; }

        /* FIX #10 — removed margin:0 on p; Bootstrap/template handles spacing */

        /* FIX #4,12,14,15 — removed display:inline; template flex layouts need
           their own display values (display:flex for social-proof avatars etc.) */
        .page-wrapper img { max-width: 100%; }

        .page-wrapper button { cursor: pointer; }

        /* ── 10. Swiper images must be block ────────────────────────── */
        .swiper-slide img { display: block; }

        /* ── 11. Scrollbar — completely hidden visually, scroll still works */
        body::-webkit-scrollbar { width: 0; }
        * { scrollbar-width: none; }

        /* ── 12.a Preloader — force hide after 400ms, no JS needed ──────────
               The JS fadeOut also fires on window.load but that can be slow
               when heavy scripts (GSAP, Swiper) are still parsing.
               This CSS guarantee means users never wait more than 400ms.   */
        .loading-screen {
          animation: _hideLoader 0.15s ease 0.4s forwards !important;
        }
        @keyframes _hideLoader {
          to { opacity: 0; pointer-events: none; visibility: hidden; }
        }

        /* ── 11b. Nav Language Mega Menu ────────────────────────────────────── */

        /* ── Wrapper li: inline-flex so it stays in the nav's inline flow ── */
        .nav-lang-li {
          display: inline-flex !important;
          align-items: center !important;
          vertical-align: middle !important;
          position: relative;
          list-style: none;
        }

        /* ── Trigger button ── */
        .nav-lang-trigger {
          display: inline-flex; align-items: center;
          cursor: pointer; padding: 0;
          border: none; background: transparent;
          transition: all .25s; user-select: none;
          outline: none;
        }

        /* ── The glowing capsule ── */
        .nav-lang-pill {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 6px 11px 6px 8px;
          border-radius: 50px;
          position: relative;
          font-family: var(--title-font);
          font-size: 13px; font-weight: 700;
          letter-spacing: .06em;
          color: rgba(220,235,255,.9);
          line-height: 1;
          /* gradient border via pseudo-element */
          background: rgba(255,255,255,.05);
          border: 1px solid rgba(130,170,255,.22);
          box-shadow: 0 2px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06);
          transition: all .28s cubic-bezier(.4,0,.2,1);
          white-space: nowrap;
        }
        .nav-lang-trigger:hover .nav-lang-pill,
        .nav-lang-trigger.open    .nav-lang-pill {
          background: linear-gradient(135deg,rgba(16,83,243,.25) 0%,rgba(100,160,255,.18) 100%);
          border-color: rgba(100,160,255,.6);
          box-shadow: 0 0 0 3px rgba(16,83,243,.12), 0 4px 20px rgba(16,83,243,.22);
          color: #fff;
        }

        /* flag */
        .nav-lang-pill .nl-flag { font-size: 17px; line-height: 1; }

        /* divider */
        .nav-lang-pill .nl-div {
          width: 1px; height: 14px;
          background: rgba(255,255,255,.2);
          border-radius: 1px;
          transition: background .25s;
        }
        .nav-lang-trigger:hover .nl-div,
        .nav-lang-trigger.open  .nl-div { background: rgba(100,160,255,.45); }

        /* code */
        .nav-lang-pill .nl-code {
          font-size: 12px; font-weight: 800;
          letter-spacing: .08em; opacity: .92;
        }

        /* animated chevron */
        .nav-lang-pill .nl-chev {
          width: 14px; height: 14px;
          display: flex; align-items: center; justify-content: center;
          opacity: .5; transition: opacity .2s, transform .28s cubic-bezier(.4,0,.2,1);
        }
        .nav-lang-pill .nl-chev svg { display: block; }
        .nav-lang-trigger:hover .nl-chev { opacity: .85; }
        .nav-lang-trigger.open  .nl-chev { opacity: 1; transform: rotate(180deg); }

        /* light header adaptation */
        .tv-header.header-style1 .nav-lang-pill {
          color: rgba(10,20,60,.8);
          background: rgba(10,20,60,.05);
          border-color: rgba(10,20,60,.16);
          box-shadow: none;
        }
        .tv-header.header-style1 .nav-lang-trigger:hover .nav-lang-pill,
        .tv-header.header-style1 .nav-lang-trigger.open .nav-lang-pill {
          background: rgba(16,83,243,.07);
          border-color: rgba(16,83,243,.4);
          color: var(--theme-color);
          box-shadow: 0 0 0 3px rgba(16,83,243,.08);
        }
        .tv-header.header-style1 .nl-div { background: rgba(10,20,60,.18); }

        /* sticky header — white bg, adapt pill to dark text like other nav items */
        .sticky-header .nav-lang-pill {
          color: var(--dark-color);
          background: rgba(10,20,60,.05);
          border-color: rgba(10,20,60,.18);
          box-shadow: none;
        }
        .sticky-header .nav-lang-trigger:hover .nav-lang-pill,
        .sticky-header .nav-lang-trigger.open .nav-lang-pill {
          background: rgba(16,83,243,.07);
          border-color: rgba(16,83,243,.4);
          color: var(--theme-color);
          box-shadow: 0 0 0 3px rgba(16,83,243,.08);
        }
        .sticky-header .nl-div { background: rgba(10,20,60,.18); }
        .sticky-header .nl-code,
        .sticky-header .nl-chev { opacity: 1; }

        /* ── Mega dropdown ── */
        .nav-lang-mega {
          display: none; position: absolute; top: calc(100% + 10px);
          right: 0; left: auto; width: 390px;
          background: linear-gradient(160deg,rgba(5,10,45,.98) 0%,rgba(8,16,56,.98) 100%);
          border: 1px solid rgba(100,160,255,.18);
          border-radius: 18px;
          box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(100,160,255,.06);
          padding: 14px 12px;
          backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
          z-index: 9999;
        }
        .nav-lang-mega.open { display: block; animation: langFadeIn .2s cubic-bezier(.4,0,.2,1); }
        @keyframes langFadeIn {
          from { opacity:0; transform:translateY(-8px) scale(.98); }
          to   { opacity:1; transform:translateY(0) scale(1); }
        }
        .nav-lang-mega::before {
          content:''; position:absolute; top:-6px; right:18px;
          width:12px; height:12px;
          background:rgba(6,12,52,0.97);
          border-left:1px solid rgba(100,160,255,.18);
          border-top: 1px solid rgba(100,160,255,.18);
          transform:rotate(45deg);
        }
        .nav-lang-mega-title {
          font-size:10px; letter-spacing:.12em; text-transform:uppercase;
          color:rgba(150,180,255,.5); padding:2px 8px 8px;
          border-bottom:1px solid rgba(100,160,255,.1); margin-bottom:8px;
        }
        .nav-lang-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px; }
        .nav-lang-item {
          display:flex; align-items:center; gap:8px;
          padding:8px 10px; border-radius:8px; cursor:pointer;
          transition:background .15s; border:1px solid transparent; position:relative;
        }
        .nav-lang-item:hover { background:rgba(100,160,255,.1); border-color:rgba(100,160,255,.18); }
        .nav-lang-item.active { background:rgba(100,160,255,.12); border-color:rgba(100,160,255,.25); }
        .nav-lang-item .flag { font-size:18px; line-height:1; flex-shrink:0; }
        .nav-lang-item .lang-text { min-width:0; overflow:hidden; }
        .nav-lang-item .lang-native {
          font-size:12px; font-weight:600; color:rgba(220,235,255,.9);
          display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3;
        }
        .nav-lang-item .lang-label { font-size:10px; color:rgba(150,180,255,.6); display:block; line-height:1.2; }
        .nav-lang-item.active .lang-native { color:#7ab4ff; }
        .nav-lang-check {
          position:absolute; top:5px; right:5px;
          width:14px; height:14px; background:var(--theme-color,#1053f3);
          border-radius:50%; display:flex; align-items:center;
          justify-content:center; font-size:8px; color:#fff;
        }
        [dir="rtl"] .nav-lang-mega { right:auto; left:0; }
        [dir="rtl"] .nav-lang-mega::before { right:auto; left:18px; }
        .nav-lang-li { position: relative; list-style: none; }

        /* ── 11c. Nav — force single row, tighten spacing for lang pill ────── */
        .page-wrapper .main-menu > ul.navigation,
        .sticky-header .main-menu > ul.navigation {
          display: flex !important;
          flex-wrap: nowrap !important;
          align-items: center !important;
        }
        /* Reduce inter-item margin so all 8 items + lang pill fit */
        .tv-header .main-wrapper .main-menu > ul.navigation > li,
        .sticky-header .main-menu > ul.navigation > li {
          margin-right: 16px !important;
        }
        @media (max-width: 1399px) {
          .tv-header .main-wrapper .main-menu > ul.navigation > li,
          .sticky-header .main-menu > ul.navigation > li {
            margin-right: 12px !important;
          }
        }
        /* Shrink font slightly to gain space */
        .tv-header .main-wrapper .main-menu a,
        .sticky-header .main-menu a {
          font-size: 15px !important;
        }

        /* ── 11d. What-We-Do submenu — consistent item alignment in all headers ──
           All li items must start at the same left edge inside the dropdown.
           Reset any inherited margin/padding that might shift the first child.     */
        .what-we-do-menu > li {
          position: static !important;
          margin: 1px 0 !important;
          padding: 0 !important;
          width: 100% !important;
          float: none !important;
        }
        .what-we-do-menu > li > a {
          width: 100% !important;
          box-sizing: border-box !important;
          position: relative !important;
          left: auto !important;
          right: auto !important;
          margin: 0 !important;
        }

        /* ── 12. What We Do — premium animated submenu ──────────────────────── */
        .what-we-do-menu {
          min-width: 240px !important;
          padding: 12px 8px !important;
          background: linear-gradient(160deg, #06112e 0%, #081540 55%, #0a1a52 100%) !important;
          border: 1px solid rgba(80,120,255,0.22) !important;
          border-radius: 20px !important;
          box-shadow:
            0 24px 64px rgba(4,10,50,0.75),
            0 0 0 1px rgba(16,83,243,0.08),
            inset 0 1px 0 rgba(255,255,255,0.06),
            inset 0 -1px 0 rgba(0,0,0,0.2) !important;
        }
        .what-we-do-menu li { border-bottom: none !important; margin: 1px 0 !important; }
        .what-we-do-menu li a {
          display: flex !important;
          align-items: center !important;
          gap: 12px !important;
          padding: 7px 10px !important;
          border-radius: 13px !important;
          color: rgba(200,215,255,0.85) !important;
          font-size: 18px !important;
          font-weight: 600 !important;
          letter-spacing: 0.02em !important;
          transition: background 0.25s, color 0.25s, transform 0.2s, box-shadow 0.25s !important;
          white-space: nowrap !important;
          background: transparent !important;
          position: relative !important;
        }
        .what-we-do-menu li a::before {
          content: '';
          position: absolute;
          inset: 0;
          border-radius: 13px;
          background: linear-gradient(90deg, rgba(16,83,243,0.14), transparent);
          opacity: 0;
          transition: opacity 0.25s;
          pointer-events: none;
        }
        .what-we-do-menu li a:hover::before { opacity: 1 !important; }
        .what-we-do-menu li a:hover {
          color: #fff !important;
          transform: translateX(5px) !important;
          box-shadow: none !important;
        }
        .what-we-do-menu li a:hover .wwd-icon {
          background: linear-gradient(135deg, #1053f3 0%, #2b6eff 100%) !important;
          box-shadow: 0 0 18px rgba(16,83,243,0.65), 0 4px 12px rgba(16,83,243,0.3) !important;
          border-color: rgba(16,83,243,0.6) !important;
          transform: rotate(-8deg) scale(1.2) !important;
          animation: none !important;
        }
        .wwd-icon {
          width: 40px; height: 40px;
          border-radius: 12px;
          background: rgba(16,83,243,0.14);
          border: 1px solid rgba(80,140,255,0.22);
          color: #7aabff;
          display: flex; align-items: center; justify-content: center;
          flex-shrink: 0;
          font-size: 22px;
          transition: background 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s, border-color 0.25s;
          animation: wwdFloat 3s ease-in-out infinite;
        }
        .what-we-do-menu li:nth-child(1) .wwd-icon { animation-delay: 0s; }
        .what-we-do-menu li:nth-child(2) .wwd-icon { animation-delay: 0.35s; }
        .what-we-do-menu li:nth-child(3) .wwd-icon { animation-delay: 0.7s; }
        .what-we-do-menu li:nth-child(4) .wwd-icon { animation-delay: 1.05s; }
        .what-we-do-menu li:nth-child(5) .wwd-icon { animation-delay: 1.4s; }
        .what-we-do-menu li:nth-child(6) .wwd-icon { animation-delay: 1.75s; }
        .what-we-do-menu li:nth-child(7) .wwd-icon { animation-delay: 2.1s; }
        .what-we-do-menu li:nth-child(8) .wwd-icon { animation-delay: 2.45s; }
        .what-we-do-menu li:nth-child(9) .wwd-icon { animation-delay: 2.8s; }
        @keyframes wwdFloat {
          0%,100% { transform: translateY(0px); }
          50%      { transform: translateY(-3px); }
        }
        .wwd-text {
          line-height: 1;
          font-weight: 600;
          background: linear-gradient(90deg, rgba(200,215,255,0.9) 0%, rgba(160,190,255,0.75) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          transition: filter 0.25s;
        }
        .what-we-do-menu li a:hover .wwd-text {
          background: linear-gradient(90deg, #fff 0%, #c8d7ff 100%);
          -webkit-background-clip: text;
          background-clip: text;
          filter: brightness(1.15);
        }

        /* ── RTL overrides for what-we-do-menu ──────────────────────── */
        /* 1. Dropdown opens from the RIGHT side of its trigger in RTL */
        [dir="rtl"] .main-menu ul.sub-menu.what-we-do-menu {
          left: auto !important;
          right: 0 !important;
          text-align: right !important;
        }
        /* 2. Each row: icon-right, text-left, row right-anchored */
        [dir="rtl"] .what-we-do-menu li a {
          flex-direction: row-reverse !important;
          direction: ltr !important;
          justify-content: flex-start !important;
          letter-spacing: 0 !important;
          gap: 12px !important;
        }
        [dir="rtl"] .what-we-do-menu li a::before {
          background: linear-gradient(270deg, rgba(16,83,243,0.14), transparent) !important;
        }
        [dir="rtl"] .what-we-do-menu li a:hover {
          transform: translateX(-5px) !important;
        }
        [dir="rtl"] .wwd-text,
        [dir="rtl"] .what-we-do-menu .wwd-text {
          -webkit-text-fill-color: unset !important;
          background: none !important;
          color: rgba(200,215,255,0.9) !important;
          direction: rtl !important;
          unicode-bidi: embed !important;
        }
        [dir="rtl"] .what-we-do-menu li a:hover .wwd-text {
          color: #fff !important;
          -webkit-text-fill-color: #fff !important;
          background: none !important;
        }

        /* ── RTL hero-8 background mirror ───────────────────────────── */
        [dir="rtl"] .tv-hero-section.style-8 .hero-inner > .bg.image img {
          transform: scaleX(-1) !important;
        }

        /* ── RTL hero text-icon — star on right, text right-aligned ───── */
        [dir="rtl"] .hero-content-left .text-icon {
          display: flex !important;
          flex-direction: row-reverse !important;
          align-items: flex-start !important;
          justify-content: flex-end !important;
          gap: 12px !important;
          width: 100% !important;
        }
        [dir="rtl"] .hero-content-left .text-icon .icon {
          flex-shrink: 0 !important;
          margin: 4px 0 0 0 !important;
          order: 2 !important;
        }
        [dir="rtl"] .hero-content-left .text-icon .text {
          text-align: right !important;
          order: 1 !important;
        }

        /* ── RTL hero social-proof — text on RIGHT, images on LEFT ──────── */
        [dir="rtl"] .tv-hero-section.style-8 .info-box .hero-social-proof {
          flex-direction: row-reverse !important;
        }
        [dir="rtl"] .tv-hero-section.style-8 .info-box .hero-social-proof .happy-customers {
          text-align: right !important;
        }

        /* ── RTL footer social-links — start from RIGHT, icon centered ──── */
        [dir="rtl"] .footer-section .footer-brand .social-links {
          justify-content: flex-start !important;
          /* direction stays RTL so flex-start = RIGHT side */
        }
        [dir="rtl"] .footer-section .footer-brand .social-links a {
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          direction: ltr !important;  /* icon always centered, no RTL flip */
        }
        [dir="rtl"] .footer-section .footer-brand .social-links a + a {
          margin-right: 10px !important;
          margin-left: 0 !important;
        }

        /* ── Script fonts: Hindi (Devanagari) & Bengali ───────────────────── */
        [lang="hi"] body,
        [lang="hi"] h1, [lang="hi"] h2, [lang="hi"] h3, [lang="hi"] h4,
        [lang="hi"] p, [lang="hi"] a, [lang="hi"] span, [lang="hi"] li,
        [lang="hi"] .title, [lang="hi"] .sec-title, [lang="hi"] .text,
        [lang="hi"] .sub-title, [lang="hi"] .footer-widget {
          font-family: 'Noto Sans Devanagari', 'Noto Sans', sans-serif !important;
        }
        [lang="bn"] body,
        [lang="bn"] h1, [lang="bn"] h2, [lang="bn"] h3, [lang="bn"] h4,
        [lang="bn"] p, [lang="bn"] a, [lang="bn"] span, [lang="bn"] li,
        [lang="bn"] .title, [lang="bn"] .sec-title, [lang="bn"] .text,
        [lang="bn"] .sub-title, [lang="bn"] .footer-widget {
          font-family: 'Noto Sans Bengali', 'Noto Sans', sans-serif !important;
        }
        /* ── Normalize inflated line-height from Devanagari/Bengali metrics ─ */
        [lang="hi"] .tv-hero-section .title.sec-title,
        [lang="bn"] .tv-hero-section .title.sec-title {
          line-height: 1.2 !important;
          font-size: clamp(34px, 4.5vw, 52px) !important;
        }
        /* Title stays one line — size scales with the block (see below). */
        [lang="hi"] .newsletter-section .title,
        [lang="bn"] .newsletter-section .title {
          line-height: 1.2 !important;
        }
        [lang="hi"] .tv-header .main-menu > ul > li > a,
        [lang="bn"] .tv-header .main-menu > ul > li > a {
          line-height: 1 !important;
        }

        /* ── 13. Hero style-2 — match template height (font metrics offset) ── */
        .tv-hero-section.style-2 .hero-area .hero-left-content {
          margin: 160px 0 190px !important;
        }

        /* ── IT-SOLUTIONS HERO + MARQUEE — all locales (LTR + RTL) ──────────
           header-style2 sits in the flow; 85px clears the header on all pages.
           Dark navy bg + blue card border applies to every locale. */
        .tv-hero-section.style-2 {
          padding-top: 85px;
        }
        .tv-hero-section.style-2 .hero-area {
          margin-top: 20px !important;
        }
        /* Navy backdrop + framing belong to the hero/marquee pair on the
           variant home pages. Scoped to a following sibling of that hero so
           inner pages, which place the marquee on a white section, stay light.
           (A general sibling combinator, because the variant markup injects a
           style element between the two.) */
        .page-wrapper .tv-hero-section.style-2 {
          background-color: #061153 !important;
        }
        .page-wrapper .tv-hero-section.style-2 .hero-area {
          border: 2px solid var(--theme-color);
          border-bottom: none !important;
        }
        .page-wrapper .tv-hero-section.style-2 ~ .tv-marquee-section.bg-light {
          background-color: #061153 !important;
        }
        .page-wrapper .tv-hero-section.style-2 ~ .tv-marquee-section.bg-light .marquee-wrap.style-2 {
          border: 2px solid var(--theme-color) !important;
          border-top: none !important;
        }

        /* ── 14. Marquee — pre-init fix (do NOT use flex — breaks plugin float:left) ── */
        /* Before marquee.min.js runs, li items default to display:block and stack.
           Setting inline-flex on items gives a horizontal row without touching the
           ul itself, so the plugin's js-marquee-wrapper / float:left structure works.
           overflow:hidden stays on the outer container-fluid, NOT on the ul,
           so transform:translateX animation on js-marquee-wrapper is not clipped. */
        .marquee-wrap ul.marquee_mode,
        .marquee-wrap .marquee__group {
          list-style: none !important;
          padding-left: 0 !important;
          margin: 0 !important;
          white-space: nowrap !important;
        }
        .marquee-wrap ul.marquee_mode > .m-item,
        .marquee-wrap .marquee__group > .m-item {
          display: inline-flex !important;
          align-items: center !important;
          white-space: nowrap !important;
          vertical-align: middle !important;
        }
        /* clearfix so the ul wraps the floated js-marquee divs correctly */
        .marquee-wrap ul.marquee_mode::after {
          content: '' !important;
          display: table !important;
          clear: both !important;
        }
        /* ── 15. Contact form on dark sections ────────────────────────────
           Premium glassmorphism redesign for all dark-background contact forms.
           Covers .bg-theme3 (digital-marketing) and
           .tv-contact-section.style-2 (it-solutions). */

        /* Native controls stay visible without a replacement plugin. */
        .contact-form select.custom-select {
          opacity: 1 !important;
          pointer-events: auto !important;
          position: static !important;
          width: 100% !important;
          height: auto !important;
          min-height: 48px;
        }

        /* ── Card ────────────────────────────────────────────────── */
        .bg-theme3 .contact-form,
        .tv-contact-section.style-2 .contact-form {
          background: linear-gradient(
            145deg,
            rgba(12, 22, 80, 0.82) 0%,
            rgba(6, 17, 60, 0.92) 100%
          ) !important;
          border: 1px solid rgba(16, 83, 243, 0.30) !important;
          border-radius: 20px !important;
          backdrop-filter: blur(28px) !important;
          -webkit-backdrop-filter: blur(28px) !important;
          box-shadow:
            0 32px 80px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(16, 83, 243, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
          padding: 40px 44px 44px !important;
        }

        /* ── Title ───────────────────────────────────────────────── */
        .bg-theme3 .contact-form .sec-title,
        .tv-contact-section.style-2 .contact-form .sec-title {
          color: #ffffff !important;
          font-size: 22px !important;
          font-weight: 700 !important;
          margin-bottom: 26px !important;
          letter-spacing: -0.3px !important;
        }

        /* ── Inputs + textarea ───────────────────────────────────── */
        .bg-theme3 .contact-form input,
        .bg-theme3 .contact-form textarea,
        .tv-contact-section.style-2 .contact-form input,
        .tv-contact-section.style-2 .contact-form textarea {
          background: rgba(255, 255, 255, 0.06) !important;
          border: 1px solid rgba(255, 255, 255, 0.10) !important;
          color: rgba(255, 255, 255, 0.90) !important;
          border-radius: 12px !important;
          height: 50px !important;
          padding: 0 18px !important;
          font-size: 14px !important;
          font-weight: 500 !important;
          transition: border-color 0.25s, background 0.25s, box-shadow 0.25s !important;
        }
        .bg-theme3 .contact-form textarea,
        .tv-contact-section.style-2 .contact-form textarea {
          height: auto !important;
          min-height: 110px !important;
          padding: 14px 18px !important;
          resize: vertical !important;
          line-height: 1.6 !important;
        }
        .bg-theme3 .contact-form input::placeholder,
        .bg-theme3 .contact-form textarea::placeholder,
        .tv-contact-section.style-2 .contact-form input::placeholder,
        .tv-contact-section.style-2 .contact-form textarea::placeholder {
          color: rgba(255, 255, 255, 0.32) !important;
          font-weight: 400 !important;
        }
        .bg-theme3 .contact-form input:focus,
        .bg-theme3 .contact-form textarea:focus,
        .tv-contact-section.style-2 .contact-form input:focus,
        .tv-contact-section.style-2 .contact-form textarea:focus {
          background: rgba(16, 83, 243, 0.10) !important;
          border-color: rgba(16, 83, 243, 0.70) !important;
          box-shadow: 0 0 0 3px rgba(16, 83, 243, 0.18) !important;
          outline: none !important;
          color: #fff !important;
        }

        /* ── form-grid gap ───────────────────────────────────────── */
        .bg-theme3 .contact-form form .form-grid,
        .tv-contact-section.style-2 .contact-form form .form-grid {
          gap: 14px !important;
          margin-bottom: 14px !important;
        }
        .bg-theme3 .contact-form form .form-group,
        .tv-contact-section.style-2 .contact-form form .form-group {
          margin-bottom: 0 !important;
        }

        /* ── Select2 trigger inside dark form ────────────────────── */
        .bg-theme3 .contact-form .select2-container,
        .tv-contact-section.style-2 .contact-form .select2-container {
          width: 100% !important;
        }
        .bg-theme3 .contact-form .select2-container--default .select2-selection--single,
        .tv-contact-section.style-2 .contact-form .select2-container--default .select2-selection--single {
          background: rgba(255, 255, 255, 0.06) !important;
          border: 1px solid rgba(255, 255, 255, 0.10) !important;
          border-radius: 12px !important;
          height: 50px !important;
          display: flex !important;
          align-items: center !important;
          transition: border-color 0.25s, box-shadow 0.25s !important;
        }
        .bg-theme3 .contact-form .select2-container--default.select2-container--focus .select2-selection--single,
        .bg-theme3 .contact-form .select2-container--default.select2-container--open .select2-selection--single,
        .tv-contact-section.style-2 .contact-form .select2-container--default.select2-container--focus .select2-selection--single,
        .tv-contact-section.style-2 .contact-form .select2-container--default.select2-container--open .select2-selection--single {
          background: rgba(16, 83, 243, 0.10) !important;
          border-color: rgba(16, 83, 243, 0.70) !important;
          box-shadow: 0 0 0 3px rgba(16, 83, 243, 0.18) !important;
        }
        .bg-theme3 .contact-form .select2-container--default .select2-selection--single .select2-selection__rendered,
        .tv-contact-section.style-2 .contact-form .select2-container--default .select2-selection--single .select2-selection__rendered {
          color: rgba(255, 255, 255, 0.88) !important;
          line-height: 50px !important;
          font-size: 14px !important;
          font-weight: 500 !important;
          padding-left: 18px !important;
        }
        .bg-theme3 .contact-form .select2-container--default .select2-selection--single .select2-selection__placeholder,
        .tv-contact-section.style-2 .contact-form .select2-container--default .select2-selection--single .select2-selection__placeholder {
          color: rgba(255, 255, 255, 0.32) !important;
          font-weight: 400 !important;
        }
        .bg-theme3 .contact-form .select2-container--default .select2-selection--single .select2-selection__arrow,
        .tv-contact-section.style-2 .contact-form .select2-container--default .select2-selection--single .select2-selection__arrow {
          height: 50px !important;
          top: 0 !important;
          right: 14px !important;
        }
        .bg-theme3 .contact-form .select2-container--default .select2-selection--single .select2-selection__arrow b,
        .tv-contact-section.style-2 .contact-form .select2-container--default .select2-selection--single .select2-selection__arrow b {
          border-color: rgba(255, 255, 255, 0.45) transparent transparent transparent !important;
        }
        .bg-theme3 .contact-form .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
        .tv-contact-section.style-2 .contact-form .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
          border-color: transparent transparent rgba(255, 255, 255, 0.45) transparent !important;
        }

        /* ── Submit button ───────────────────────────────────────── */
        .bg-theme3 .contact-form button[type=submit],
        .bg-theme3 .contact-form .theme-btn,
        .tv-contact-section.style-2 .contact-form button[type=submit],
        .tv-contact-section.style-2 .contact-form .theme-btn {
          width: 100% !important;
          background: linear-gradient(135deg, #1a65f5 0%, #0a3dbf 100%) !important;
          border: none !important;
          border-radius: 14px !important;
          height: 52px !important;
          padding: 0 28px !important;
          font-size: 15px !important;
          font-weight: 600 !important;
          letter-spacing: 0.3px !important;
          color: #fff !important;
          cursor: pointer !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 10px !important;
          margin-top: 8px !important;
          transition: box-shadow 0.3s, transform 0.2s !important;
          box-shadow: 0 6px 22px rgba(16, 83, 243, 0.40) !important;
        }
        .bg-theme3 .contact-form button[type=submit]:hover,
        .bg-theme3 .contact-form .theme-btn:hover,
        .tv-contact-section.style-2 .contact-form button[type=submit]:hover,
        .tv-contact-section.style-2 .contact-form .theme-btn:hover {
          box-shadow: 0 10px 32px rgba(16, 83, 243, 0.60) !important;
          transform: translateY(-1px) !important;
        }
        /* Keep the link-effect span visible */
        .bg-theme3 .contact-form .theme-btn .btn-title,
        .tv-contact-section.style-2 .contact-form .theme-btn .btn-title {
          color: #fff !important;
        }

        /* ── Style-3 contact form (it-services) — light theme ─────────────
           The style-3 form sits on a white panel; we only need to fix
           Select2 container width and give the submit button a consistent look. */
        .tv-contact-section.style-3 .contact-form .select2-container {
          width: 100% !important;
        }
        .tv-contact-section.style-3 .contact-form .select2-container--default .select2-selection--single {
          background: var(--light-color, #f5f7fa) !important;
          border: 1px solid var(--bs-border-color8, #e2e8f0) !important;
          border-radius: 10px !important;
          height: 50px !important;
          display: flex !important;
          align-items: center !important;
        }
        .tv-contact-section.style-3 .contact-form .select2-container--default .select2-selection--single .select2-selection__rendered {
          line-height: 50px !important;
          padding-left: 24px !important;
          padding-right: 40px !important;
          font-size: 15px !important;
          color: var(--body-color, #555) !important;
        }
        .tv-contact-section.style-3 .contact-form .select2-container--default .select2-selection--single .select2-selection__arrow {
          height: 50px !important;
          right: 12px !important;
        }
        .tv-contact-section.style-3 .contact-form .select2-container--default.select2-container--focus .select2-selection--single,
        .tv-contact-section.style-3 .contact-form .select2-container--default.select2-container--open .select2-selection--single {
          border-color: var(--theme-color, #1053f3) !important;
          box-shadow: 0 0 0 3px rgba(16, 83, 243, 0.12) !important;
        }
        /* form-grid spacing */
        .tv-contact-section.style-3 .contact-form form .form-grid {
          gap: 14px !important;
          margin-bottom: 14px !important;
        }
        .tv-contact-section.style-3 .contact-form form .form-group {
          margin-bottom: 0 !important;
        }
        /* Submit button */
        .tv-contact-section.style-3 .contact-form button[type=submit],
        .tv-contact-section.style-3 .contact-form .theme-btn {
          width: 100% !important;
          background: linear-gradient(135deg, #1a65f5 0%, #0a3dbf 100%) !important;
          border: none !important;
          border-radius: 14px !important;
          height: 52px !important;
          font-size: 15px !important;
          font-weight: 600 !important;
          color: #fff !important;
          cursor: pointer !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 10px !important;
          margin-top: 8px !important;
          box-shadow: 0 6px 22px rgba(16, 83, 243, 0.35) !important;
          transition: box-shadow 0.3s, transform 0.2s !important;
        }
        .tv-contact-section.style-3 .contact-form button[type=submit]:hover,
        .tv-contact-section.style-3 .contact-form .theme-btn:hover {
          box-shadow: 0 10px 32px rgba(16, 83, 243, 0.55) !important;
          transform: translateY(-1px) !important;
        }
        .tv-contact-section.style-3 .contact-form .theme-btn .btn-title {
          color: #fff !important;
        }

        /* ── 15. Select2 — beautiful premium dropdown ─────────────────────
           The select2 dropdown is appended to <body> so it must be global.
           Design: glassmorphism dark panel with blue accent, smooth animations. */

        /* ── Trigger box (selection) ─────────────────── */
        .select2-container--default .select2-selection--single {
          border-radius: 12px !important;
          transition: border-color 0.25s, box-shadow 0.25s !important;
        }
        .select2-container--default.select2-container--focus .select2-selection--single,
        .select2-container--default.select2-container--open .select2-selection--single {
          border-color: var(--theme-color) !important;
          box-shadow: 0 0 0 3px rgba(16, 83, 243, 0.18) !important;
          outline: none !important;
        }
        /* Animated arrow — rotate on open */
        .select2-container--default .select2-selection--single .select2-selection__arrow {
          transition: transform 0.3s ease !important;
        }
        .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
          transform: rotate(180deg) !important;
        }

        /* ── Dropdown panel ──────────────────────────── */
        .select2-dropdown {
          background: #0c1224 !important;
          border: 1px solid rgba(16, 83, 243, 0.35) !important;
          border-radius: 16px !important;
          box-shadow:
            0 24px 64px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(16, 83, 243, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
          overflow: hidden !important;
          margin-top: 8px !important;
          animation: s2DropIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        }
        @keyframes s2DropIn {
          from { opacity: 0; transform: translateY(-8px) scale(0.97); }
          to   { opacity: 1; transform: translateY(0)   scale(1);    }
        }

        /* ── Options list ────────────────────────────── */
        .select2-results {
          padding: 6px !important;
        }
        /* Correct selector matching Select2's own specificity */
        .select2-container--default .select2-results > .select2-results__options {
          max-height: 220px !important;
          overflow-y: auto !important;
          padding: 0 !important;
        }
        .select2-results__option {
          padding: 11px 16px !important;
          border-radius: 10px !important;
          font-size: 14px !important;
          font-weight: 500 !important;
          color: rgba(255, 255, 255, 0.72) !important;
          transition: background 0.18s, color 0.18s, transform 0.18s !important;
          margin: 2px 0 !important;
          cursor: pointer !important;
          display: flex !important;
          align-items: center !important;
          gap: 10px !important;
          position: relative !important;
        }
        .select2-results__option::before {
          content: '' !important;
          width: 6px !important;
          height: 6px !important;
          border-radius: 50% !important;
          background: rgba(16, 83, 243, 0.4) !important;
          flex-shrink: 0 !important;
          transition: background 0.18s, transform 0.18s !important;
        }
        .select2-container--default .select2-results__option--highlighted[aria-selected],
        .select2-container--default .select2-results__option:hover {
          background: linear-gradient(135deg, rgba(16,83,243,0.28) 0%, rgba(10,61,191,0.18) 100%) !important;
          color: #fff !important;
          transform: translateX(3px) !important;
        }
        [dir="rtl"] .select2-container--default .select2-results__option--highlighted[aria-selected],
        [dir="rtl"] .select2-container--default .select2-results__option:hover {
          transform: translateX(-3px) !important;
        }
        .select2-container--default .select2-results__option--highlighted[aria-selected]::before,
        .select2-container--default .select2-results__option:hover::before {
          background: var(--theme-color) !important;
          transform: scale(1.4) !important;
        }
        .select2-container--default .select2-results__option[aria-selected=true] {
          background: rgba(16, 83, 243, 0.15) !important;
          color: #a5b4fc !important;
        }
        .select2-container--default .select2-results__option[aria-disabled=true] {
          color: rgba(255, 255, 255, 0.28) !important;
          font-style: italic !important;
        }
        .select2-container--default .select2-results__option[aria-disabled=true]::before {
          display: none !important;
        }

        /* ── Search box ──────────────────────────────── */
        .select2-search--dropdown {
          padding: 8px 8px 2px !important;
        }
        .select2-container--default .select2-search--dropdown .select2-search__field {
          background: rgba(255, 255, 255, 0.07) !important;
          border: 1px solid rgba(255, 255, 255, 0.12) !important;
          border-radius: 8px !important;
          color: rgba(255, 255, 255, 0.8) !important;
          height: 36px !important;
          padding: 0 12px !important;
          font-size: 13px !important;
          outline: none !important;
          transition: border-color 0.2s, box-shadow 0.2s !important;
        }
        .select2-container--default .select2-search--dropdown .select2-search__field:focus {
          border-color: rgba(16, 83, 243, 0.6) !important;
          box-shadow: 0 0 0 2px rgba(16, 83, 243, 0.14) !important;
        }

        /* Scrollbar inside dropdown */
        .select2-results__options::-webkit-scrollbar {
          width: 4px;
        }
        .select2-results__options::-webkit-scrollbar-track {
          background: transparent;
        }
        .select2-results__options::-webkit-scrollbar-thumb {
          background: rgba(16, 83, 243, 0.35);
          border-radius: 4px;
        }

        /* ── Contact section info-card position ─────────────────────── */
        .tv-contact-section .tv-contact-inner .choose-image-wrapper .info-card {
          top: 320px !important;
          left: -10px !important;
          right: auto !important;
        }
        @media (max-width: 1500px) {
          .tv-contact-section .tv-contact-inner .choose-image-wrapper .info-card {
            top: 280px !important;
            left: -30px !important;
            right: auto !important;
          }
        }
        @media (min-width: 992px) and (max-width: 1024px) {
          .tv-contact-section .tv-contact-inner .choose-image-wrapper .info-card {
            top: 240px !important;
            left: -60px !important;
            right: auto !important;
          }
        }
        /* RTL: mirror info-card to the right side */
        [dir="rtl"] .tv-contact-section .tv-contact-inner .choose-image-wrapper .info-card {
          left: auto !important;
          right: -10px !important;
        }
        @media (max-width: 1500px) {
          [dir="rtl"] .tv-contact-section .tv-contact-inner .choose-image-wrapper .info-card {
            left: auto !important;
            right: -30px !important;
          }
        }
        @media (min-width: 992px) and (max-width: 1024px) {
          [dir="rtl"] .tv-contact-section .tv-contact-inner .choose-image-wrapper .info-card {
            left: auto !important;
            right: -60px !important;
          }
        }

        /* ── RTL: fix bidi text rendering for fa/ar/ur pages ──────────── */
        [dir="rtl"] .page-wrapper h1,
        [dir="rtl"] .page-wrapper h2,
        [dir="rtl"] .page-wrapper h3,
        [dir="rtl"] .page-wrapper h4,
        [dir="rtl"] .page-wrapper p,
        [dir="rtl"] .page-wrapper span,
        [dir="rtl"] .page-wrapper a {
          unicode-bidi: plaintext !important;
          direction: rtl !important;
        }
        /* Except in the breadcrumb: plaintext lets the first strong character
           choose a run's direction, and there that character is the home
           icon's private-use glyph, which counts as left-to-right and drags
           the icon to the far side of its own label. The hand-written pages
           put their breadcrumb outside .page-wrapper and never hit the rule,
           so match what they already do. */
        [dir="rtl"] .page-wrapper .page-breadcrumb a,
        [dir="rtl"] .page-wrapper .page-breadcrumb span {
          unicode-bidi: normal !important;
        }
        /* Prevent SplitType char-spans from breaking RTL flow */
        [dir="rtl"] .char {
          display: inline !important;
          unicode-bidi: plaintext !important;
        }
        /* style-8 sub-title badge */
        [dir="rtl"] .tv-hero-section.style-8 .hero-content-left .sub-title {
          display: inline-block !important;
          float: none !important;
        }

        /* ── Project filter buttons — fit wider Farsi labels ─────────── */
        .tv-project-section.inner .project-filter-buttons .menu-filtering {
          max-width: 780px !important;
          flex-wrap: nowrap !important;
          gap: 6px !important;
        }
        .tv-project-section.inner .project-filter-buttons .menu-filtering li {
          white-space: nowrap !important;
          padding: 0 18px !important;
          font-size: 15px !important;
        }
        @media (max-width: 767px) {
          .tv-project-section.inner .project-filter-buttons .menu-filtering {
            max-width: 100% !important;
            flex-wrap: wrap !important;
          }
        }

        /* ── Process boxes equal height ─────────────────────────────── */
        .tv-process-section .row.gy-30 {
          align-items: stretch !important;
        }
        .tv-process-section .tv-process-item {
          height: 100% !important;
          display: flex !important;
          flex-direction: column !important;
        }
        .tv-process-section .process-box {
          flex: 1 !important;
          display: flex !important;
          flex-direction: column !important;
          height: 100% !important;
        }
        .tv-process-section .process-box p {
          flex: 1 !important;
        }

        /* ── Service tags no-wrap ────────────────────────────────────── */
        .tv-service-item .tags {
          display: flex !important;
          flex-wrap: wrap !important;
          gap: 8px !important;
        }
        .tv-service-item .tags span {
          white-space: nowrap !important;
          flex-shrink: 0 !important;
        }

        /* ── it-services style-3: thumb clip-path + border-radius (LTR + RTL) ──
           Global img-anim-* uses inset() without "round", so corners stay square
           and fight .thumb { border-radius: 24px }. Rounded inset matches template. */
        @keyframes img-anim-right-it-svc-round {
          0% {
            transform: translateX(5%);
            clip-path: inset(0 0 0 100% round 24px);
            -webkit-clip-path: inset(0 0 0 100% round 24px);
            opacity: 0;
          }
          100% {
            transform: translateX(0);
            clip-path: inset(0 0 0 0 round 24px);
            -webkit-clip-path: inset(0 0 0 0 round 24px);
            opacity: 1;
          }
        }
        @keyframes img-anim-left-it-svc-round {
          0% {
            transform: translateX(-5%);
            clip-path: inset(0 100% 0 0 round 24px);
            -webkit-clip-path: inset(0 100% 0 0 round 24px);
            opacity: 0;
          }
          100% {
            transform: translateX(0);
            clip-path: inset(0 0 0 0 round 24px);
            -webkit-clip-path: inset(0 0 0 0 round 24px);
            opacity: 1;
          }
        }
        .tv-service-wrapper .tv-service-item-two .tv-service-inner .thumb {
          overflow: hidden !important;
          border-radius: 24px !important;
          isolation: isolate;
        }
        .tv-service-wrapper .tv-service-item-two .tv-service-inner .thumb img {
          display: block !important;
          width: 100% !important;
          height: auto !important;
          border-radius: inherit;
        }
        .tv-service-wrapper .tv-service-item-two .tv-service-inner .thumb.img-anim-right {
          animation-name: img-anim-right-it-svc-round !important;
          animation-duration: 1.3s !important;
          animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important;
          animation-delay: 0.4s !important;
          animation-fill-mode: forwards !important;
        }
        .tv-service-wrapper .tv-service-item-two .tv-service-inner .thumb.img-anim-left {
          animation-name: img-anim-left-it-svc-round !important;
          animation-duration: 1.3s !important;
          animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important;
          animation-delay: 0.4s !important;
          animation-fill-mode: forwards !important;
        }
        /* RTL: flex order swaps thumb side — mirror reveal direction */
        [dir='rtl']
          .tv-service-wrapper
          .tv-service-item-two
          .tv-service-inner
          .thumb.img-anim-right {
          animation-name: img-anim-left-it-svc-round !important;
        }
        [dir='rtl']
          .tv-service-wrapper
          .tv-service-item-two
          .tv-service-inner
          .thumb.img-anim-left {
          animation-name: img-anim-right-it-svc-round !important;
        }


        /* ── 16a. Hero CTA — AI/magic premium button ── */
        .hero-cta-magic {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 16px 44px;
          border: none;
          border-radius: 60px;
          cursor: pointer;
          font-family: var(--title-font, inherit);
          font-size: 16px;
          font-weight: 600;
          letter-spacing: 0.3px;
          color: #fff;
          background: linear-gradient(135deg, rgba(16,83,243,0.65) 0%, rgba(90,40,220,0.55) 50%, rgba(16,83,243,0.65) 100%);
          background-size: 200% 200%;
          animation: heroCta-gradientShift 4s ease infinite;
          backdrop-filter: blur(16px) saturate(180%);
          -webkit-backdrop-filter: blur(16px) saturate(180%);
          box-shadow:
            0 0 0 1px rgba(255,255,255,0.12) inset,
            0 1px 0 rgba(255,255,255,0.18) inset,
            0 4px 24px rgba(16,83,243,0.25),
            0 0 48px rgba(90,40,220,0.10);
          overflow: hidden;
          transition: transform 0.45s cubic-bezier(0.22,1,0.36,1),
                      box-shadow 0.45s cubic-bezier(0.22,1,0.36,1);
          z-index: 1;
        }
        .hero-cta-magic:hover {
          transform: translateY(-2px) scale(1.03);
          box-shadow:
            0 0 0 1px rgba(255,255,255,0.22) inset,
            0 1px 0 rgba(255,255,255,0.30) inset,
            0 8px 40px rgba(16,83,243,0.35),
            0 0 72px rgba(90,40,220,0.18),
            0 0 0 4px rgba(90,170,255,0.08);
        }
        .hero-cta-magic:active {
          transform: translateY(0) scale(0.98);
        }
        /* rotating glow ring behind */
        .hero-cta-glow {
          position: absolute;
          inset: -2px;
          border-radius: inherit;
          background: conic-gradient(
            from 0deg,
            rgba(90,170,255,0)   0%,
            rgba(90,170,255,0.5) 25%,
            rgba(180,120,255,0.4) 50%,
            rgba(90,170,255,0)   75%,
            rgba(90,170,255,0)   100%
          );
          animation: heroCta-spin 3s linear infinite;
          opacity: 0.5;
          z-index: -1;
          pointer-events: none;
        }
        .hero-cta-magic:hover .hero-cta-glow {
          opacity: 0.85;
        }
        .hero-cta-label {
          position: relative;
          z-index: 2;
          text-shadow: 0 1px 8px rgba(0,0,0,0.25);
        }
        @keyframes heroCta-gradientShift {
          0%, 100% { background-position: 0% 50%; }
          50%      { background-position: 100% 50%; }
        }
        @keyframes heroCta-spin {
          to { transform: rotate(360deg); }
        }

        /* ── 16b. Glassmorphism: CTA arrow circle + Newsletter send button ── */
        .theme-btn .arrow-all {
          background: rgba(255, 255, 255, 0.12) !important;
          backdrop-filter: blur(12px) saturate(180%) !important;
          -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
          border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
          box-shadow:
            0 4px 20px rgba(0, 0, 0, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
          color: #fff !important;
          top: 50% !important;
          transform: translateY(-50%) !important;
          width: 36px !important;
          height: 36px !important;
          transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
        }
        .theme-btn:hover .arrow-all {
          background: rgba(255, 255, 255, 0.22) !important;
          border-color: rgba(255, 255, 255, 0.4) !important;
          box-shadow:
            0 8px 32px rgba(255, 255, 255, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.45),
            0 0 20px rgba(255, 255, 255, 0.06) !important;
          transform: translateY(-50%) scale(1.1) !important;
        }

        .newsletter-form .form-group button[type=submit] {
          /* 0.55 alpha over the white field left this the palest thing in the
             block, and 38px missed the 44px touch minimum. */
          width: 44px !important;
          height: 44px !important;
          font-size: 18px !important;
          background: rgba(16, 83, 243, 0.92) !important;
          backdrop-filter: blur(12px) saturate(180%) !important;
          -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
          border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
          box-shadow:
            0 4px 20px rgba(16, 83, 243, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
          color: #fff !important;
          transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
        }
        .newsletter-form .form-group button[type=submit]:hover {
          background: rgba(16, 83, 243, 1) !important;
          border-color: rgba(255, 255, 255, 0.32) !important;
          box-shadow:
            0 8px 32px rgba(16, 83, 243, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.35),
            0 0 24px rgba(16, 83, 243, 0.08) !important;
          transform: translateY(-50%) scale(1.1) !important;
        }

        /* ══════════════════════════════════════════════════════════════
           RESPONSIVE SYSTEM — Mobile-first adaptive layout
           Breakpoints: 428 (mobile-l) · 768 (tablet) · 1024 (tablet-l) · 1200 (desktop)
           ══════════════════════════════════════════════════════════════ */

        /* ── 1. Animated Hamburger ─────────────────────────────────── */
        .mobile-hamburger {
          display: flex;
          flex-direction: column;
          gap: 5px;
          padding: 10px;
          width: 44px;
          height: 44px;
          align-items: center;
          justify-content: center;
          background: transparent;
          border: none;
          cursor: pointer;
          position: relative;
          z-index: 5;
        }
        .hamburger-line {
          width: 22px;
          height: 2px;
          background: #ffffff;
          border-radius: 2px;
          transition: all 0.35s cubic-bezier(0.77, 0, 0.175, 1);
          transform-origin: center;
        }
        .mobile-hamburger.is-active .hamburger-line:nth-child(1) {
          transform: translateY(7px) rotate(45deg);
        }
        .mobile-hamburger.is-active .hamburger-line:nth-child(2) {
          opacity: 0;
          transform: scaleX(0);
        }
        .mobile-hamburger.is-active .hamburger-line:nth-child(3) {
          transform: translateY(-7px) rotate(-45deg);
        }

        /* ── Filter tabs (services / pages / lang / contact) ──
           Each tab uses --tab-color (set inline by Header.tsx) for its
           active glow + icon ring, so every tab feels distinct. */
        .mobile-quick-strip {
          display: flex !important;
          gap: 8px !important;
          padding: 6px 20px 10px !important;
          flex-shrink: 0 !important;
        }
        .mobile-quick-strip-btn {
          flex: 1 !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          gap: 6px !important;
          padding: 11px 4px !important;
          border-radius: 14px !important;
          background:
            linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)) !important;
          border: 1px solid rgba(255,255,255,0.07) !important;
          color: rgba(255,255,255,0.65) !important;
          text-decoration: none !important;
          font-size: 10px !important;
          font-weight: 600 !important;
          letter-spacing: 0.1px !important;
          min-height: 56px !important;
          cursor: pointer !important;
          transition: transform 0.18s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
        }
        .mobile-quick-strip-btn i {
          font-size: 18px !important;
          color: rgba(255,255,255,0.55) !important;
          transition: color 0.25s ease, transform 0.25s ease, filter 0.25s ease !important;
        }
        .mobile-quick-strip-btn:hover {
          background:
            linear-gradient(180deg, rgba(var(--tab-color-rgb, 91,157,255), 0.10), rgba(var(--tab-color-rgb, 91,157,255), 0.04)) !important;
          border-color: color-mix(in srgb, var(--tab-color, #5b9dff) 35%, transparent) !important;
          color: #ffffff !important;
        }
        .mobile-quick-strip-btn:hover i {
          color: var(--tab-color, #5b9dff) !important;
          transform: scale(1.1) !important;
          filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--tab-color, #5b9dff) 60%, transparent));
        }
        .mobile-quick-strip-btn:active {
          transform: scale(0.96) !important;
        }
        /* Selected (filter-tab) state — vibrant per-colour glow */
        .mobile-quick-strip-btn.active {
          background:
            linear-gradient(180deg, color-mix(in srgb, var(--tab-color, #5b9dff) 22%, transparent), color-mix(in srgb, var(--tab-color, #5b9dff) 8%, transparent)) !important;
          border-color: color-mix(in srgb, var(--tab-color, #5b9dff) 65%, transparent) !important;
          color: #ffffff !important;
          box-shadow:
            0 6px 20px color-mix(in srgb, var(--tab-color, #5b9dff) 30%, transparent),
            inset 0 1px 0 rgba(255,255,255,0.10) !important;
          animation: tabActivePop 0.32s cubic-bezier(.34,1.56,.64,1);
        }
        .mobile-quick-strip-btn.active i {
          color: var(--tab-color, #5b9dff) !important;
          transform: scale(1.15) !important;
          filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--tab-color, #5b9dff) 70%, transparent));
        }
        @keyframes tabActivePop {
          0%   { transform: scale(0.95); }
          60%  { transform: scale(1.04); }
          100% { transform: scale(1); }
        }

        /* ── 2. Floating Glass Header (mobile) ────────────────────── */
        @media (max-width: 991px) {
          .tv-header .main-wrapper {
            margin: 6px 10px 0 !important;
            border-radius: 16px !important;
            background: rgba(8, 8, 28, 0.75) !important;
            backdrop-filter: blur(20px) saturate(1.5) !important;
            -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
            border: 1px solid rgba(255,255,255,0.06) !important;
            box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
            padding: 4px 8px !important;
            transition: all 0.3s ease !important;
          }
          .tv-header .header-right-wrapper {
            display: none !important;
          }
          .sticky-header.fixed-header .menu-area {
            margin: 0 10px !important;
            border-radius: 16px !important;
            background: rgba(8, 8, 28, 0.9) !important;
            backdrop-filter: blur(20px) saturate(1.5) !important;
            -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
            border: 1px solid rgba(255,255,255,0.06) !important;
            padding: 4px 8px !important;
          }
          .sticky-header.fixed-header .header-logo img {
            max-height: 28px !important;
          }
        }

        /* ── 3. Dropdown Sheet Mobile Menu ──────────────────────── */
        .mn-sheet-backdrop {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 9999999;
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
          background: rgba(0,0,0,0.45);
          transition: opacity 0.3s ease, visibility 0s 0.3s;
        }
        .mn-sheet-backdrop.mn-open {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
          transition: opacity 0.3s ease, visibility 0s 0s;
        }

        .mn-sheet-panel {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          max-height: 85dvh;
          width: 100%;
          background: rgba(10, 10, 24, 0.97);
          backdrop-filter: blur(32px) saturate(1.5);
          -webkit-backdrop-filter: blur(32px) saturate(1.5);
          display: flex;
          flex-direction: column;
          overflow: hidden;
          border-radius: 0 0 24px 24px;
          box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3);
          transform: translateY(-105%);
          transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
          padding: 0;
          padding-top: env(safe-area-inset-top);
          z-index: 2;
        }
        .mn-sheet-backdrop.mn-open .mn-sheet-panel {
          transform: translateY(0);
        }

        /* ── Close button (X) — gradient ring + glow + spin on tap ── */
        .mobile-menu-close {
          position: absolute !important;
          top: max(14px, env(safe-area-inset-top)) !important;
          right: 16px !important;
          left: auto !important;
          z-index: 10 !important;
          width: 42px !important;
          height: 42px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          border-radius: 50% !important;
          background:
            linear-gradient(135deg, rgba(124,58,237,0.20), rgba(16,83,243,0.20)) padding-box,
            linear-gradient(135deg, #ec4899, #7c3aed, #5b9dff) border-box !important;
          border: 1.5px solid transparent !important;
          color: #ffffff !important;
          cursor: pointer !important;
          box-shadow:
            0 6px 20px rgba(124,58,237,0.28),
            inset 0 1px 0 rgba(255,255,255,0.18) !important;
          transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease, background 0.25s ease !important;
        }
        [dir="rtl"] .mobile-menu-close {
          right: auto !important;
          left: 16px !important;
        }
        .mobile-menu-close:hover {
          box-shadow:
            0 10px 28px rgba(124,58,237,0.45),
            inset 0 1px 0 rgba(255,255,255,0.22) !important;
          transform: rotate(90deg) scale(1.05) !important;
        }
        .mobile-menu-close:active {
          transform: rotate(90deg) scale(0.92) !important;
        }
        .mobile-menu-close svg {
          width: 16px !important;
          height: 16px !important;
          stroke-width: 3 !important;
          filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)) !important;
        }

        /* ── Primary CTA in mobile sheet ──
           padding-top is generous enough that the CTA always clears the
           absolutely-positioned close button (X) by ≥6px regardless of
           safe-area or notch. */
        .mobile-cta-row {
          padding: 14px 20px 6px !important;
          margin-top: 4px !important;
          flex-shrink: 0 !important;
        }
        .mobile-cta-btn {
          position: relative !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 10px !important;
          width: 100% !important;
          padding: 13px 18px !important;
          border-radius: 14px !important;
          background: linear-gradient(135deg, #5b9dff, #1053f3 45%, #7c3aed) !important;
          color: #ffffff !important;
          font-size: 14px !important;
          font-weight: 700 !important;
          text-decoration: none !important;
          letter-spacing: 0.2px !important;
          box-shadow:
            0 8px 24px rgba(16,83,243,0.40),
            inset 0 1px 0 rgba(255,255,255,0.25) !important;
          overflow: hidden !important;
          transition: transform 0.18s ease, box-shadow 0.18s ease !important;
          animation: ctaPulse 2.6s ease-in-out infinite !important;
        }
        .mobile-cta-btn:hover {
          transform: translateY(-1px) !important;
          box-shadow:
            0 12px 30px rgba(16,83,243,0.50),
            inset 0 1px 0 rgba(255,255,255,0.30) !important;
        }
        .mobile-cta-btn:active {
          transform: translateY(0) scale(0.985) !important;
        }
        .mobile-cta-btn i {
          font-size: 14px !important;
          color: #ffffff !important;
        }
        .mobile-cta-arrow {
          transition: transform 0.25s ease !important;
        }
        .mobile-cta-btn:hover .mobile-cta-arrow {
          transform: translateX(2px) !important;
        }
        [dir="rtl"] .mobile-cta-btn:hover .mobile-cta-arrow {
          transform: translateX(-2px) !important;
        }
        .mobile-cta-shimmer {
          position: absolute;
          inset: 0;
          background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
          transform: translateX(-100%);
          animation: ctaShimmer 3.6s ease-in-out infinite;
          pointer-events: none;
        }
        @keyframes ctaPulse {
          0%, 100% { box-shadow: 0 8px 24px rgba(16,83,243,0.40), inset 0 1px 0 rgba(255,255,255,0.25); }
          50%      { box-shadow: 0 10px 32px rgba(16,83,243,0.55), inset 0 1px 0 rgba(255,255,255,0.30); }
        }
        @keyframes ctaShimmer {
          0%   { transform: translateX(-100%); }
          50%  { transform: translateX(100%); }
          100% { transform: translateX(100%); }
        }

        /* Header — reserve space on the close-button side so the logo
           (and anything else inside the header) never sits under the X.
           padding-inline-start handles RTL automatically. */
        .mobile-menu-header {
          padding: 14px 20px 6px !important;
          padding-inline-start: 64px !important;
          flex-shrink: 0 !important;
        }

        /* Drag handle at bottom of sheet */
        .mobile-sheet-handle {
          display: flex !important;
          justify-content: center !important;
          padding: 8px 0 12px !important;
          flex-shrink: 0 !important;
        }
        .mobile-sheet-handle span {
          width: 36px !important;
          height: 4px !important;
          border-radius: 2px !important;
          background: rgba(255,255,255,0.15) !important;
        }

        /* Search */
        .mobile-menu-search {
          padding: 4px 20px 0 !important;
          flex-shrink: 0 !important;
        }
        .mobile-search-box {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 10px 14px;
          border-radius: 12px;
          background: rgba(255,255,255,0.06);
          border: 1px solid rgba(255,255,255,0.08);
          transition: border-color 0.2s;
        }
        .mobile-search-box:focus-within {
          border-color: rgba(16,83,243,0.4);
          background: rgba(255,255,255,0.08);
        }

        /* Sara CTA */
        .mobile-sara-cta {
          padding: 8px 20px !important;
          flex-shrink: 0 !important;
        }
        .mobile-sara-cta button {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 16px;
          border-radius: 14px;
          border: 1px solid rgba(16,83,243,0.25);
          background: linear-gradient(135deg, rgba(16,83,243,0.12), rgba(16,83,243,0.04));
          cursor: pointer;
          position: relative;
          overflow: hidden;
          transition: all 0.25s;
        }
        .mobile-sara-cta button:active {
          transform: scale(0.98);
          background: linear-gradient(135deg, rgba(16,83,243,0.2), rgba(16,83,243,0.08));
        }
        .mobile-sara-cta-glow {
          position: absolute;
          inset: -2px;
          border-radius: 14px;
          background: linear-gradient(135deg, rgba(16,83,243,0.3), transparent, rgba(16,83,243,0.15));
          opacity: 0.5;
          animation: saraCtaglow 3s ease infinite;
        }
        @keyframes saraCtaglow {
          0%, 100% { opacity: 0.3; }
          50% { opacity: 0.6; }
        }
        .mobile-sara-cta-text {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 1px;
          position: relative;
        }
        .mobile-sara-cta-text strong {
          color: white;
          font-size: 14px;
          font-weight: 600;
        }
        .mobile-sara-cta-text small {
          color: #4ade80;
          font-size: 10px;
          font-weight: 500;
          display: flex;
          align-items: center;
          gap: 4px;
        }
        .mobile-sara-cta-text small::before {
          content: '';
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: #4ade80;
          display: inline-block;
        }

        /* Scrollable nav area */
        .mobile-menu-scroll {
          flex: 1 !important;
          overflow-y: auto !important;
          -webkit-overflow-scrolling: touch !important;
          padding: 4px 0 calc(20px + env(safe-area-inset-bottom)) !important;
          scrollbar-width: none;
        }
        .mobile-menu-scroll::-webkit-scrollbar { display: none; }

        /* Category */
        .mobile-nav-category {
          padding: 4px 20px 0 !important;
        }
        .mobile-nav-category-title {
          font-size: 10px !important;
          font-weight: 600 !important;
          color: rgba(255,255,255,0.3) !important;
          text-transform: uppercase !important;
          letter-spacing: 0.1em !important;
          padding: 10px 4px 6px !important;
        }
        .mobile-nav-category-items {
          display: flex !important;
          flex-direction: column !important;
          gap: 3px !important;
        }

        /* ── Nav items ──
           Each row gets its own --item-color (set inline by Header.tsx)
           which drives the icon gradient and active glow. */
        .mobile-nav-item {
          display: flex !important;
          align-items: center !important;
          gap: 12px !important;
          padding: 6px 12px !important;
          border-radius: 14px !important;
          text-decoration: none !important;
          color: rgba(255,255,255,0.85) !important;
          font-size: 14px !important;
          font-weight: 500 !important;
          line-height: 1.2 !important;
          /* Tight enough that all six pages and the tabs below them fit on a
             640px-tall phone without scrolling, and still a 48px touch target. */
          min-height: 48px !important;
          border: 1px solid transparent !important;
          background: transparent !important;
          position: relative !important;
          transition: background 0.22s ease, border-color 0.22s ease, transform 0.18s ease !important;
        }
        .mobile-nav-item:hover {
          background: linear-gradient(90deg, color-mix(in srgb, var(--item-color, #5b9dff) 12%, transparent), transparent) !important;
          border-color: color-mix(in srgb, var(--item-color, #5b9dff) 22%, transparent) !important;
          color: #ffffff !important;
        }
        .mobile-nav-item:hover .mobile-nav-item-icon {
          transform: scale(1.08) rotate(-3deg) !important;
          box-shadow: 0 6px 18px color-mix(in srgb, var(--item-color, #5b9dff) 45%, transparent), inset 0 1px 0 rgba(255,255,255,0.18) !important;
        }
        .mobile-nav-item:hover .mobile-nav-item-chev {
          opacity: 1 !important;
          transform: translateX(0) !important;
        }
        [dir="rtl"] .mobile-nav-item:hover .mobile-nav-item-chev {
          transform: translateX(0) !important;
        }
        .mobile-nav-item:active {
          transform: scale(0.985) !important;
        }
        .mobile-nav-item.active {
          background: linear-gradient(90deg, color-mix(in srgb, var(--item-color, #5b9dff) 18%, transparent), color-mix(in srgb, var(--item-color, #5b9dff) 4%, transparent)) !important;
          border-color: color-mix(in srgb, var(--item-color, #5b9dff) 35%, transparent) !important;
          color: #ffffff !important;
        }
        .mobile-nav-item.active .mobile-nav-item-chev {
          opacity: 1 !important;
          transform: translateX(0) !important;
        }

        .mobile-nav-item-icon {
          width: 34px !important;
          height: 34px !important;
          border-radius: 10px !important;
          background: linear-gradient(135deg,
            color-mix(in srgb, var(--item-color, #5b9dff) 28%, transparent),
            color-mix(in srgb, var(--item-color, #5b9dff) 12%, transparent)) !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          font-size: 15px !important;
          color: var(--item-color, #5b9dff) !important;
          flex-shrink: 0 !important;
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.10) !important;
          transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease !important;
        }
        .mobile-nav-item.active .mobile-nav-item-icon {
          background: linear-gradient(135deg,
            color-mix(in srgb, var(--item-color, #5b9dff) 60%, transparent),
            color-mix(in srgb, var(--item-color, #5b9dff) 25%, transparent)) !important;
          box-shadow:
            0 4px 14px color-mix(in srgb, var(--item-color, #5b9dff) 45%, transparent),
            inset 0 1px 0 rgba(255,255,255,0.20) !important;
        }
        .mobile-nav-item-icon i {
          filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
        }

        .mobile-nav-item-label {
          flex: 1 !important;
        }
        .mobile-nav-item-chev {
          font-size: 11px !important;
          color: rgba(255,255,255,0.35) !important;
          opacity: 0 !important;
          transform: translateX(-4px) !important;
          transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease !important;
        }
        [dir="rtl"] .mobile-nav-item-chev {
          transform: translateX(4px) !important;
        }
        .mobile-nav-item:hover .mobile-nav-item-chev,
        .mobile-nav-item.active .mobile-nav-item-chev {
          color: var(--item-color, #5b9dff) !important;
        }

        /* Staggered entrance — items fade in after sheet slides down.
           (Sara CTA and search box rows removed — only nav items animate.) */
        .mn-sheet-backdrop.mn-open .mobile-nav-item {
          animation: mobileNavItemIn 0.25s ease forwards;
          opacity: 0;
          transform: translateY(-6px);
        }
        .mn-sheet-backdrop.mn-open .mobile-nav-item:nth-child(1) { animation-delay: 0.28s; }
        .mn-sheet-backdrop.mn-open .mobile-nav-item:nth-child(2) { animation-delay: 0.30s; }
        .mn-sheet-backdrop.mn-open .mobile-nav-item:nth-child(3) { animation-delay: 0.32s; }
        .mn-sheet-backdrop.mn-open .mobile-nav-item:nth-child(4) { animation-delay: 0.34s; }
        .mn-sheet-backdrop.mn-open .mobile-nav-item:nth-child(5) { animation-delay: 0.36s; }
        .mn-sheet-backdrop.mn-open .mobile-nav-item:nth-child(6) { animation-delay: 0.38s; }
        .mn-sheet-backdrop.mn-open .mobile-nav-item:nth-child(7) { animation-delay: 0.40s; }
        .mn-sheet-backdrop.mn-open .mobile-nav-item:nth-child(8) { animation-delay: 0.42s; }
        .mn-sheet-backdrop.mn-open .mobile-nav-item:nth-child(n+9) { animation-delay: 0.44s; }

        @keyframes mobileNavItemIn {
          to { opacity: 1; transform: translateY(0); }
        }

        /* Language grid */
        .mobile-lang-grid {
          display: grid !important;
          grid-template-columns: repeat(3, 1fr) !important;
          gap: 6px !important;
          padding: 4px 0 !important;
        }
        .mobile-lang-btn {
          display: flex !important;
          align-items: center !important;
          gap: 8px !important;
          padding: 8px 10px !important;
          border-radius: 10px !important;
          border: 1px solid rgba(255,255,255,0.06) !important;
          background: rgba(255,255,255,0.03) !important;
          cursor: pointer !important;
          transition: all 0.15s !important;
          min-height: 40px !important;
        }
        .mobile-lang-btn.active {
          background: rgba(16,83,243,0.15) !important;
          border-color: rgba(16,83,243,0.4) !important;
        }
        .mobile-lang-btn:active {
          transform: scale(0.97) !important;
        }
        /* ── Lang flag emoji: gentle wave-in-the-wind animation.
           Each language gets a different delay so the grid feels alive
           rather than synchronised. */
        .mobile-lang-flag {
          font-size: 18px !important;
          line-height: 1 !important;
          display: inline-block !important;
          transform-origin: 30% 70%;
          animation: flagWave 4.5s ease-in-out infinite;
          will-change: transform;
        }
        .mobile-lang-btn:nth-child(2n) .mobile-lang-flag { animation-delay: -0.4s; }
        .mobile-lang-btn:nth-child(3n) .mobile-lang-flag { animation-delay: -0.8s; }
        .mobile-lang-btn:nth-child(4n) .mobile-lang-flag { animation-delay: -1.2s; }
        .mobile-lang-btn:nth-child(5n) .mobile-lang-flag { animation-delay: -1.6s; }
        .mobile-lang-btn:nth-child(7n) .mobile-lang-flag { animation-delay: -2.0s; }
        .mobile-lang-btn:hover .mobile-lang-flag,
        .mobile-lang-btn.active .mobile-lang-flag {
          animation-duration: 1.8s;
          filter: drop-shadow(0 2px 6px rgba(91,157,255,0.45));
        }
        @keyframes flagWave {
          0%, 100% { transform: rotate(0deg)   skewX(0deg); }
          15%      { transform: rotate(-3deg)  skewX(2deg); }
          35%      { transform: rotate(2deg)   skewX(-2deg); }
          55%      { transform: rotate(-2deg)  skewX(2deg); }
          75%      { transform: rotate(3deg)   skewX(-1deg); }
        }
        @media (prefers-reduced-motion: reduce) {
          .mobile-lang-flag {
            animation: none !important;
            transform: none !important;
          }
        }
        .mobile-lang-name { display: none !important; }
        .mobile-lang-code {
          font-size: 10px !important;
          color: rgba(255,255,255,0.5) !important;
          font-weight: 600 !important;
          letter-spacing: 0.05em !important;
        }

        /* Footer */
        .mobile-nav-footer {
          padding: 12px 20px !important;
          margin-top: 8px !important;
          border-top: 1px solid rgba(255,255,255,0.06) !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 4px !important;
        }
        /* ── Contact row: each line is its own coloured chip with a
           gradient icon ring, hover lift + glow, and an inline action
           hint that fades in (call / email / map). ── */
        .mobile-contact-row {
          display: flex !important;
          align-items: center !important;
          gap: 14px !important;
          padding: 12px 14px !important;
          margin-bottom: 6px !important;
          border-radius: 14px !important;
          background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)) !important;
          border: 1px solid rgba(255,255,255,0.06) !important;
          color: rgba(255,255,255,0.85) !important;
          font-size: 13.5px !important;
          font-weight: 500 !important;
          text-decoration: none !important;
          position: relative !important;
          transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
        }
        .mobile-contact-row > span {
          flex: 1 !important;
          letter-spacing: 0.2px !important;
        }
        .mobile-contact-row i {
          width: 36px !important;
          height: 36px !important;
          font-size: 14px !important;
          border-radius: 10px !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          flex-shrink: 0 !important;
          color: #ffffff !important;
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.15) !important;
          transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease !important;
        }
        /* Per-row brand colour for the icon chip */
        .mobile-contact-row:nth-of-type(1) i {
          background: linear-gradient(135deg, #10b981, #059669) !important;
          box-shadow: 0 4px 14px rgba(16,185,129,0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
        }
        .mobile-contact-row:nth-of-type(2) i {
          background: linear-gradient(135deg, #5b9dff, #1053f3) !important;
          box-shadow: 0 4px 14px rgba(91,157,255,0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
        }
        .mobile-contact-row:nth-of-type(3) i {
          background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
          box-shadow: 0 4px 14px rgba(245,158,11,0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
        }
        .mobile-contact-row:hover {
          background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)) !important;
          border-color: rgba(255,255,255,0.12) !important;
          transform: translateY(-1px) !important;
          color: #ffffff !important;
        }
        .mobile-contact-row:hover i {
          transform: scale(1.08) rotate(-3deg) !important;
        }
        .mobile-contact-row:active {
          transform: scale(0.985) !important;
        }
        /* Inline action hint (Call / Email / Map) on hover.
           Hidden by default to keep the line compact. */
        .mobile-contact-row::after {
          content: attr(data-action);
          font-size: 10px;
          font-weight: 700;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          padding: 4px 8px;
          border-radius: 999px;
          background: rgba(255,255,255,0.08);
          color: rgba(255,255,255,0.7);
          opacity: 0;
          transition: opacity 0.2s ease, transform 0.2s ease;
          transform: translateX(4px);
          flex-shrink: 0;
        }
        [dir="rtl"] .mobile-contact-row::after {
          transform: translateX(-4px);
        }
        .mobile-contact-row[data-action]:hover::after {
          opacity: 1;
          transform: translateX(0);
        }
        /* ── Social row — 7 brand-coloured chips with hover lift + glow ── */
        .mobile-social-row {
          display: flex !important;
          gap: 9px !important;
          padding: 10px 0 4px !important;
          justify-content: center !important;
          flex-wrap: wrap !important;
        }
        .mobile-social-row a {
          width: 40px !important;
          height: 40px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          border-radius: 50% !important;
          background: rgba(255,255,255,0.05) !important;
          border: 1px solid rgba(255,255,255,0.08) !important;
          color: rgba(255,255,255,0.7) !important;
          font-size: 15px !important;
          text-decoration: none !important;
          transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
        }
        .mobile-social-row a:hover {
          transform: translateY(-3px) scale(1.08) !important;
          color: #ffffff !important;
        }
        .mobile-social-row a:active { transform: translateY(0) scale(0.95) !important; }

        /* Brand colours (each chip lights up in its native palette on hover) */
        .mobile-social-row .ms-linkedin:hover  { background: #0a66c2 !important; border-color: #0a66c2 !important; box-shadow: 0 8px 22px rgba(10,102,194,0.55) !important; }
        .mobile-social-row .ms-instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important; border-color: #dc2743 !important; box-shadow: 0 8px 22px rgba(220,39,67,0.55) !important; }
        .mobile-social-row .ms-facebook:hover  { background: #1877f2 !important; border-color: #1877f2 !important; box-shadow: 0 8px 22px rgba(24,119,242,0.55) !important; }
        .mobile-social-row .ms-youtube:hover   { background: #ff0033 !important; border-color: #ff0033 !important; box-shadow: 0 8px 22px rgba(255,0,51,0.55) !important; }
        .mobile-social-row .ms-tiktok:hover    { background: linear-gradient(135deg, #25f4ee, #000000 50%, #fe2c55) !important; border-color: #fe2c55 !important; box-shadow: 0 8px 22px rgba(254,44,85,0.55) !important; }
        .mobile-social-row .ms-pinterest:hover { background: #e60023 !important; border-color: #e60023 !important; box-shadow: 0 8px 22px rgba(230,0,35,0.55) !important; }

        /* ══════════════════════════════════════════════════════════════════
           Mobile sheet — landscape phone optimisation
           When the viewport is wider than tall and short (typical phone
           rotated to landscape), the default vertical layout overflows.
           Compact every fixed-height element so the menu stays usable
           without forcing a very long scroll.
           ══════════════════════════════════════════════════════════════════ */
        @media (max-height: 500px) and (orientation: landscape) {
          .mobile-menu-header {
            padding: 8px 16px 4px !important;
            padding-inline-start: 56px !important;
          }
          .mobile-menu-header img {
            height: 26px !important;
          }
          .mobile-menu-close {
            width: 36px !important;
            height: 36px !important;
            top: 8px !important;
          }
          .mobile-menu-close svg {
            width: 14px !important;
            height: 14px !important;
          }
          .mobile-cta-row {
            padding: 8px 16px 4px !important;
            margin-top: 0 !important;
          }
          .mobile-cta-btn {
            padding: 9px 14px !important;
            font-size: 13px !important;
            border-radius: 12px !important;
          }
          .mobile-quick-strip {
            padding: 4px 16px 6px !important;
            gap: 6px !important;
          }
          .mobile-quick-strip-btn {
            padding: 8px 4px !important;
            min-height: 44px !important;
            border-radius: 12px !important;
            font-size: 9px !important;
            gap: 4px !important;
          }
          .mobile-quick-strip-btn i {
            font-size: 15px !important;
          }
          .mobile-menu-scroll {
            padding: 0 16px 4px !important;
          }
          .mobile-nav-category-title {
            padding: 6px 0 4px !important;
            font-size: 10px !important;
          }
          .mobile-nav-item {
            padding: 6px 10px !important;
            min-height: 38px !important;
            border-radius: 10px !important;
            font-size: 12.5px !important;
            gap: 10px !important;
          }
          .mobile-nav-item-icon {
            width: 28px !important;
            height: 28px !important;
            border-radius: 7px !important;
            font-size: 12px !important;
          }
          .mobile-lang-grid {
            grid-template-columns: repeat(6, 1fr) !important;
            gap: 4px !important;
            padding: 2px 0 !important;
          }
          .mobile-lang-btn {
            padding: 6px 6px !important;
            min-height: 32px !important;
            border-radius: 8px !important;
            gap: 4px !important;
          }
          .mobile-lang-flag { font-size: 14px !important; }
          .mobile-lang-code { font-size: 9px !important; }
          .mobile-nav-footer {
            padding: 6px 0 !important;
            margin-top: 4px !important;
          }
          .mobile-contact-row {
            padding: 6px 10px !important;
            margin-bottom: 3px !important;
            font-size: 12px !important;
            gap: 10px !important;
            border-radius: 10px !important;
          }
          .mobile-contact-row i {
            width: 28px !important;
            height: 28px !important;
            font-size: 12px !important;
            border-radius: 7px !important;
          }
          .mobile-contact-row::after { display: none !important; }
          .mobile-social-row {
            padding: 4px 0 !important;
            gap: 6px !important;
          }
          .mobile-social-row a {
            width: 32px !important;
            height: 32px !important;
            font-size: 13px !important;
          }
          .mobile-sheet-handle {
            padding: 4px 0 6px !important;
          }
        }

        /* ══════════════════════════════════════════════════════════════════
           Mobile sheet — short portrait phones
           On a 640px-tall screen the panel is only ~544px, which the logo, the
           consultation button and six page rows overrun. Trimming the fixed
           furniture rather than the rows keeps every page reachable without a
           scroll, and the rows stay a 44px touch target.
           ══════════════════════════════════════════════════════════════════ */
        @media (max-height: 720px) and (orientation: portrait) {
          .mn-sheet-panel { max-height: 92dvh !important; }
          .mobile-menu-header { padding: 10px 20px 2px !important; }
          .mobile-menu-header img { height: 28px !important; }
          .mobile-cta-row { padding: 8px 20px 2px !important; margin-top: 0 !important; }
          .mobile-cta-btn { padding: 10px 16px !important; }
          .mobile-nav-category-title { padding: 6px 4px 4px !important; }
          .mobile-nav-item { min-height: 44px !important; padding: 5px 12px !important; }
          .mobile-nav-item-icon { width: 32px !important; height: 32px !important; }
          .mobile-quick-strip { padding: 4px 20px 6px !important; }
          .mobile-quick-strip-btn { min-height: 48px !important; padding: 8px 4px !important; }
          .mobile-sheet-handle { padding: 4px 0 8px !important; }
        }

        /* ── 2. Chat Widget — Mobile Bottom Sheet ─────────────────── */
        @media (max-width: 768px) {
          .chat-fab-btn {
            bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
          }
          [dir="rtl"] .chat-fab-btn {
            left: auto !important;
            right: 16px !important;
          }
        }

        /* ── Breadcrumb section: push 50px down on responsive widths
           so the title doesn't sit too close to the fixed header. ── */
        @media (max-width: 991px) {
          .tv-breadcrumb-section {
            padding-top: 50px !important;
          }
        }

        /* ── 3. Hero — Mobile Adaptive ────────────────────────────── */
        /* ── Tablet (768–991px): Side-by-side 55/45 split ────────── */
        @media (max-width: 991px) and (min-width: 769px) {
          .tv-hero-section.style-8 .hero-inner {
            margin: 0 !important;
            border-radius: 0 !important;
            min-height: auto !important;
            padding: 100px 0 60px !important;
          }
          .tv-hero-section.style-8 .row {
            flex-direction: row !important;
            flex-wrap: nowrap !important;
          }
          .tv-hero-section.style-8 .col-lg-7 {
            flex: 0 0 55% !important;
            max-width: 55% !important;
          }
          .tv-hero-section.style-8 .col-lg-5 {
            flex: 0 0 45% !important;
            max-width: 45% !important;
          }
          .tv-hero-section.style-8 .hero-content-left .title {
            font-size: clamp(26px, 4.5vw, 38px) !important;
            line-height: 1.2 !important;
          }
          .tv-hero-section.style-8 .hero-content-left .text {
            font-size: clamp(13px, 2vw, 15px) !important;
          }
          .tv-hero-section.style-8 .hero-right {
            display: flex !important;
            justify-content: center !important;
            align-items: flex-end !important;
          }
          .tv-hero-section.style-8 .hero-right .img {
            margin: 0 !important;
            max-width: 100% !important;
            max-height: 420px !important;
            object-fit: contain !important;
          }
          .tv-hero-section.style-8 .info-box {
            position: relative !important;
            bottom: auto !important;
            left: auto !important;
            margin: 20px auto 0 !important;
          }
        }

        /* ── Mobile portrait (<768px): Text then image stacked ──── */
        @media (max-width: 768px) {
          .tv-hero-section.style-8 {
            margin-top: 0 !important;
          }
          .tv-hero-section.style-8 .hero-inner {
            margin: 0 !important;
            border-radius: 0 !important;
            min-height: auto !important;
            padding: 64px 0 0 !important;
            overflow: hidden !important;
            position: relative !important;
          }
          .tv-hero-section.style-8 .row {
            flex-direction: column !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
          }
          .tv-hero-section.style-8 .col-lg-7 {
            flex: 0 0 auto !important;
            max-width: 100% !important;
            width: 100% !important;
            order: 1 !important;
            padding-bottom: 8px !important;
          }
          .tv-hero-section.style-8 .col-lg-5 {
            flex: 0 0 auto !important;
            max-width: 100% !important;
            width: 100% !important;
            order: 2 !important;
            margin-top: -200px !important;
          }
          .tv-hero-section.style-8 .hero-content-left .title {
            font-size: clamp(22px, 6.5vw, 32px) !important;
            line-height: 1.25 !important;
            text-align: center !important;
            margin-bottom: 8px !important;
          }
          .tv-hero-section.style-8 .hero-content-left .sub-title {
            font-size: 11px !important;
            text-align: center !important;
            justify-content: center !important;
            margin-bottom: 8px !important;
          }
          .tv-hero-section.style-8 .hero-content-left .text {
            font-size: clamp(12px, 3vw, 14px) !important;
            text-align: center !important;
            margin-bottom: 0 !important;
            line-height: 1.5 !important;
          }
          .tv-hero-section.style-8 .hero-content-left .mt-50 {
            margin-top: 14px !important;
            display: flex !important;
            justify-content: center !important;
          }
          .tv-hero-section.style-8 .hero-right {
            display: flex !important;
            justify-content: center !important;
            align-items: flex-end !important;
            position: relative !important;
            overflow: visible !important;
          }
          .tv-hero-section.style-8 .hero-right .image-thumb {
            position: relative !important;
            display: flex !important;
            justify-content: center !important;
          }
          .tv-hero-section.style-8 .hero-right .img {
            margin: 0 auto !important;
            width: 90vw !important;
            max-width: 420px !important;
            height: auto !important;
            max-height: none !important;
            object-fit: contain !important;
            object-position: center bottom !important;
            filter: drop-shadow(0 6px 24px rgba(16, 83, 243, 0.3)) !important;
          }

          /* Decorative glow behind the image */
          .tv-hero-section.style-8 .hero-right .image-thumb::before {
            content: '' !important;
            position: absolute !important;
            bottom: 10% !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            width: 60vw !important;
            height: 60vw !important;
            max-width: 260px !important;
            max-height: 260px !important;
            border-radius: 50% !important;
            background: radial-gradient(circle, rgba(16,83,243,0.18) 0%, transparent 70%) !important;
            filter: blur(30px) !important;
            z-index: -1 !important;
            pointer-events: none !important;
          }

          .tv-hero-section.style-8 .info-box {
            position: relative !important;
            bottom: auto !important;
            left: auto !important;
            margin: 8px auto 0 !important;
          }
        }

        /* ── Very small mobile (<428px) ─────────────────────────── */
        @media (max-width: 428px) {
          .tv-hero-section.style-8 .hero-inner {
            padding: 60px 0 0 !important;
          }
          .tv-hero-section.style-8 .hero-right .img {
            width: 90vw !important;
            max-width: 380px !important;
          }
        }

        /* Hero CTA sticky on mobile */
        .hero-cta-sticky-mobile {
          display: none;
        }
        @media (max-width: 768px) {
          .hero-cta-sticky-mobile {
            display: block;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 9990;
            padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
            background: linear-gradient(to top, rgba(8,8,20,0.98), rgba(8,8,20,0.85));
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            transform: translateY(100%);
            opacity: 0;
            transition: transform 0.35s ease, opacity 0.35s ease;
          }
          .hero-cta-sticky-mobile.visible {
            transform: translateY(0);
            opacity: 1;
          }
        }

        /* ── Landscape mobile: side-by-side compact ───────────────── */
        @media (max-width: 768px) and (orientation: landscape) {
          .tv-hero-section.style-8 .hero-inner {
            min-height: auto !important;
            padding: 70px 0 30px !important;
          }
          .tv-hero-section.style-8 .row {
            flex-direction: row !important;
            flex-wrap: nowrap !important;
          }
          .tv-hero-section.style-8 .col-lg-7 {
            flex: 0 0 55% !important;
            max-width: 55% !important;
          }
          .tv-hero-section.style-8 .col-lg-5 {
            flex: 0 0 45% !important;
            max-width: 45% !important;
            margin-top: 0 !important;
          }
          .tv-hero-section.style-8 .hero-right .img {
            max-width: 180px !important;
            max-height: 200px !important;
            animation: none !important;
          }
          .tv-hero-section.style-8 .hero-right .image-thumb::before {
            display: none !important;
          }
        }

        /* ── 4. Card Horizontal Scroll on Mobile ──────────────────── */
        @media (max-width: 768px) {
          .tv-service-section .row.gy-30,
          .tv-project-section .project-items,
          .tv-pricing-section .row.gy-30 {
            display: flex !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            scroll-snap-type: x mandatory !important;
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: none !important;
            gap: 16px !important;
            padding: 0 16px 16px !important;
            margin: 0 -16px !important;
          }
          .tv-service-section .row.gy-30::-webkit-scrollbar,
          .tv-project-section .project-items::-webkit-scrollbar,
          .tv-pricing-section .row.gy-30::-webkit-scrollbar {
            display: none !important;
          }
          .tv-service-section .row.gy-30 > [class*="col-"],
          .tv-pricing-section .row.gy-30 > [class*="col-"] {
            flex: 0 0 85vw !important;
            max-width: 85vw !important;
            scroll-snap-align: center !important;
            padding: 0 !important;
          }
          .tv-project-section .project-items > [class*="col-"],
          .tv-project-section .project-items > .project-card-wrap {
            flex: 0 0 85vw !important;
            max-width: 85vw !important;
            scroll-snap-align: center !important;
          }

          /* Pricing — stack with popular first */
          .tv-pricing-section .tv-pricing-card.style2 {
            order: -1 !important;
          }
          .tv-pricing-section .popular-badge {
            animation: priceBadgePulse 2s infinite !important;
          }
          @keyframes priceBadgePulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
          }
        }

        /* (Bottom tab bar removed — navigation moved to header quick-nav) */

        /* ── 6. Responsive Typography — clamp() everywhere ────────── */
        .page-wrapper .sec-title {
          font-size: clamp(24px, 5vw, 48px) !important;
          line-height: 1.2 !important;
        }
        .page-wrapper .title-wrap p,
        .page-wrapper .about-content-wrap p {
          font-size: clamp(13px, 2.5vw, 16px) !important;
          line-height: 1.6 !important;
        }
        .page-wrapper h3.title,
        .page-wrapper h3.title-two {
          font-size: clamp(20px, 4vw, 32px) !important;
        }
        @media (max-width: 768px) {
          .page-wrapper .sub-title,
          .page-wrapper .sub-title-2 {
            font-size: clamp(10px, 2.8vw, 14px) !important;
          }
          .breadcrumb-area .page-title {
            font-size: clamp(24px, 6vw, 40px) !important;
          }
          .breadcrumb-area .breadcrumb li {
            font-size: clamp(12px, 3vw, 14px) !important;
          }

          /* Tighter spacing on mobile */
          .space { padding: 60px 0 !important; }
          .space-top { padding-top: 60px !important; }
          .space-bottom { padding-bottom: 60px !important; }

          /* Feature boxes — stack nicely */
          .tv-feature-box,
          .tv-feature-item {
            margin-bottom: 0 !important;
          }

          /* Team cards */
          .tv-team-card .team-info .info-inner {
            padding: 12px !important;
          }

          /* Touch targets — minimum 44px */
          .theme-btn,
          .filter-btn,
          button {
            min-height: 44px !important;
          }
        }

        @media (max-width: 428px) {
          .page-wrapper .sec-title {
            font-size: clamp(20px, 6vw, 32px) !important;
          }
          .container {
            padding-left: 16px !important;
            padding-right: 16px !important;
          }
        }

        /* ── About page on a phone ──────────────────────────────────
              The template designs these sections as side-by-side columns
              and simply stacks them on a narrow screen, which leaves every
              heading, badge and button hugging the start edge of a column
              that is now the full width. Centre them instead. */
        @media (max-width: 767px) {
          .tv-feature-section .tv-feature-box,
          .tv-feature-section .tv-feature-item,
          .tv-about-section.style-3 .about-left,
          .tv-about-section.style-3 .about-content-wrap,
          .tv-team-section.style-2 .team-content-wrap,
          .tv-cta-section.style-2 .cta-left,
          .achivement-split .achivement-content-wrapper,
          .tv-brands-section + section .row > [class*='col-'] {
            text-align: center;
          }
          /* rtl-fixes.css pins this column to the far edge with a four-class
             selector of its own, so beating it takes one more class. */
          [dir] .page-wrapper .tv-cta-section.style-2 .cta-right.text-right,
          .tv-cta-section.style-2 .cta-right {
            text-align: center !important;
          }

          /* Rows of chips, badges and proof avatars follow the text. */
          .tv-about-section.style-3 .sub-title-2,
          .tv-team-section.style-2 .sub-title-2,
          .achivement-split .sub-title-2,
          .tv-about-section.style-3 .about-counter,
          .about-activities,
          .tv-feature-item .client-social-proof,
          .tv-feature-item .client-social-proof .social,
          .tv-team-section.style-2 .client-social-proof,
          .tv-team-section.style-2 .array-button,
          .tv-about-section.style-3 .about-right,
          .tv-cta-section.style-2 .cta-right {
            justify-content: center !important;
            align-items: center !important;
          }
          /* The counter reads left to right ("23+") even in RTL, so the plus
             belongs against the digits. Centring reaches inside this block and
             floats the plus into the middle of the label's width, which leaves
             it stranded 54px from the number. Centre the group, not its parts. */
          .tv-about-section.style-3 .about-counter .text {
            text-align: left !important;
          }
          .tv-feature-item .client-social-proof,
          .tv-team-section.style-2 .client-social-proof {
            flex-direction: column;
            gap: 10px;
          }
          .achivement-split .achivement-content-wrapper .theme-btn,
          .tv-about-section.style-3 .about-content-wrap .theme-btn,
          .tv-cta-section.style-2 .cta-right .theme-btn {
            margin-inline: auto;
          }

          /* Three leftovers from the desktop layout that keep this section off
             the centre line once the columns stack: the thumb holds the width
             of the placeholder it replaced, the right-hand column keeps its
             40px gutter, and the play circle keeps the margin that used to
             hold it clear of the column edge. */
          /* The 80px rail on the photo and the 40px gutter on the right-hand
             column line the two up with the text between them on a wide
             screen. Stacked, they only shrink the photo and pull the column
             off centre. rtl-fixes.css pins both with selectors of the same
             weight, and being a linked sheet it is read after this one, so
             matching it is not enough — these carry one class more. */
          [dir] .page-wrapper .tv-about-section.style-3 .about-thumb {
            padding-left: 0 !important;
            padding-right: 0 !important;
          }
          [dir] .page-wrapper .tv-about-section.style-3 .about-thumb img {
            width: 100%;
            max-width: 100%;
            height: auto;
          }
          [dir] .page-wrapper .tv-about-section.style-3 .about-right {
            margin-left: 0 !important;
            margin-right: 0 !important;
            width: 100%;
          }
          [dir] .page-wrapper .tv-about-section.style-3 .video-box {
            margin-left: 0 !important;
            margin-right: 0 !important;
            width: 100%;
            display: flex;
            justify-content: center;
          }
          [dir] .page-wrapper .tv-about-section.style-3 .profile-card {
            margin-inline: auto;
          }
          /* The same file forces this column's copy back to the edge. */
          [dir] .page-wrapper .tv-about-section.style-3 .about-right .title-wrap h2,
          [dir] .page-wrapper .tv-about-section.style-3 .about-right .title-wrap .sub-title-2,
          [dir] .page-wrapper .tv-about-section.style-3 .about-right p {
            text-align: center !important;
          }

          /* A chip has to be able to wrap: the licence wording runs long and
             was being cut off at the card's edge. */
          .about-activities li {
            max-width: 100%;
            min-width: 0;
            text-align: start;
          }
          .about-activities li i {
            flex-shrink: 0;
          }

          /* Both team members side by side rather than one per swipe. There
             are only two of them, so the slider has nothing left to slide. */
          .tv-team-slider .swiper-wrapper {
            transform: none !important;
            gap: 12px;
          }
          .tv-team-slider .swiper-slide {
            width: calc(50% - 6px) !important;
            margin-inline-end: 0 !important;
            flex-shrink: 0;
          }
          .tv-team-section.style-2 .team-btn-wrapper {
            display: none !important;
          }

          /* At half width the card's own proportions stop working: the name
             wraps onto two lines, which pushes the role past the card's
             padding and leaves the notched corners floating away from the
             panel edge they are cut into. Compact everything to match. */
          .tv-team-card.style-2 {
            padding: 10px 10px 12px !important;
            border-radius: 18px !important;
          }
          .tv-team-card .team-photo,
          .tv-team-card .team-photo img {
            border-radius: 12px !important;
          }
          .tv-team-card .team-info {
            position: static !important;
            width: 100% !important;
            padding: 10px 8px !important;
            margin-top: 10px !important;
            border-radius: 12px !important;
            transform: none !important;
          }
          .tv-team-card .team-info::before,
          .tv-team-card .team-info::after {
            display: none !important;
          }
          .tv-team-card .team-info .info-inner {
            padding: 0 !important;
            text-align: center;
          }
          .tv-team-card .team-info .info-inner .team-name {
            font-size: 14px !important;
            line-height: 1.35 !important;
            margin-bottom: 2px !important;
          }
          .tv-team-card .team-info .info-inner .team-role,
          .tv-team-card .team-info .info-inner p {
            font-size: 12px !important;
            margin: 0 !important;
          }
          /* The hover-in social strip sits where the panel now is. */
          .tv-team-card .team-social {
            display: none !important;
          }
        }

        /* ── Brand wall ────────────────────────────────────────────
              Marquee rows, alternating direction. How many marks a row shows
              is whatever their widths add up to, not a set number of columns:
              each slot is only as wide as its own mark needs. */
        /* The wall is dense enough on its own; the template's 120px section
           padding left it floating in an oversized panel. */
        .brand-inner--wall {
          padding-block: 10px;
        }
        /* Every mark is drawn at --logo-height and its slot is only as wide as
           that mark needs, from the ratio the build reads out of the file. The
           old equal-width slots meant a wordmark hit the width limit long before
           the height one: UnitedHealth came out 8px tall next to a 42px Apple.
           BrandWall.tsx mirrors these numbers to time each row. */
        .brand-wall {
          display: grid;
          gap: 18px;
          --logo-height: 30px;
          --logo-gap: 26px;
          --logo-max-ratio: 7;
        }
        .brand-wall__row {
          container-type: inline-size;
          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);
          /* The wall sits well below the fold, yet its eight tracks are 7800px
             wide and animate from the first frame. Skipping the rows while they
             are off screen keeps that work out of the load, and the reserved
             height means the page is exactly as tall either way. */
          content-visibility: auto;
          contain-intrinsic-size: auto 62px;
        }
        .brand-wall__track {
          display: flex;
          width: max-content;
          animation-name: brand-wall-scroll;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
        }
        .brand-wall__row:hover .brand-wall__track { animation-play-state: paused; }
        .brand-wall__group { display: flex; }
        .brand-wall__item {
          flex: 0 0 calc(
            var(--logo-height) * min(var(--ratio, 2), var(--logo-max-ratio))
            + var(--logo-gap) * 2
          );
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 10px var(--logo-gap);
          min-height: 62px;
          /* A flex item defaults to min-width:auto, which lets content push the
             slot past its basis — the capped marks would widen their row and
             run it faster than the others. */
          min-width: 0;
        }
        .brand-wall__item img {
          height: var(--logo-height);
          width: auto;
          /* The handful of marks past the cap letterbox inside their slot
             rather than overflow it, so they ride shorter but keep their shape. */
          max-width: 100%;
          max-height: var(--logo-height);
          object-fit: contain;
          /* Brand colours stay on — the wall is the colour. A touch of
             transparency keeps 180 marks from shouting over the page. */
          opacity: 0.88;
          transition: opacity 220ms ease, transform 220ms ease;
        }
        .brand-wall__item:hover img {
          opacity: 1;
          transform: scale(1.08);
        }
        @keyframes brand-wall-scroll {
          from { transform: translate3d(0, 0, 0); }
          to { transform: translate3d(-50%, 0, 0); }
        }
        /* Narrower screens get a smaller mark and tighter spacing rather than a
           different number across: how many fit is now whatever the widths add
           up to. Row height and gap come down together so eight rows still read
           as one band and not a page of their own. */
        @media (max-width: 1399px) {
          .brand-wall { gap: 16px; --logo-gap: 22px; }
        }
        @media (max-width: 1199px) {
          .brand-wall { gap: 14px; --logo-height: 27px; --logo-gap: 20px; }
          .brand-wall__row { contain-intrinsic-size: auto 58px; }
          .brand-wall__item { min-height: 58px; padding-block: 9px; }
        }
        @media (max-width: 991px) {
          .brand-wall { gap: 11px; --logo-height: 24px; --logo-gap: 16px; }
          .brand-wall__item { min-height: 50px; padding-block: 8px; }
          /* Touch has no hover, so the fade edges are the only depth cue left;
             widen them a little on a narrow row. */
          .brand-wall__row {
            contain-intrinsic-size: auto 50px;
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          }
        }
        @media (max-width: 600px) {
          .brand-wall { gap: 8px; --logo-height: 21px; --logo-gap: 13px; }
          .brand-wall__row { contain-intrinsic-size: auto 44px; }
          .brand-wall__item { min-height: 44px; padding-block: 7px; }
          .brand-wall__item img { opacity: 0.92; }
          .brand-inner--wall { padding-block: 8px; }
        }
        /* A tap should not leave a logo stuck mid-zoom. */
        @media (hover: none) {
          .brand-wall__item:hover img { transform: none; }
          .brand-wall__row:hover .brand-wall__track { animation-play-state: running; }
        }
        @media (prefers-reduced-motion: reduce) {
          .brand-wall__track { animation: none; }
          .brand-wall__row { overflow-x: auto; }
        }

        /* ── Interactive crest ─────────────────────────────────────
              Sized to the still it replaces so the surrounding layout,
              which offsets this column by a negative margin, is unchanged. */
        /* Sized by aspect ratio rather than a fixed height, so on a phone the
           crest shrinks instead of sitting in a 734px-tall empty column. */
        .crest-3d {
          position: relative;
          width: min(632px, 100%);
          aspect-ratio: 632 / 734;
          margin-inline: auto;
        }
        .crest-3d__stage {
          width: 100%;
          height: 100%;
          cursor: grab;
          /* Vertical swipes keep scrolling the page; horizontal ones turn the crest. */
          touch-action: pan-y;
        }
        .crest-3d__stage:active { cursor: grabbing; }
        .crest-3d__stage canvas { display: block; }
        .crest-3d__poster {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: contain;
          pointer-events: none;
        }
        @media (max-width: 1500px) {
          .crest-3d { width: min(520px, 100%); }
        }
        @media (max-width: 991px) {
          .crest-3d { width: min(420px, 84%); }
        }
        @media (max-width: 600px) {
          .crest-3d { width: min(300px, 78%); }
        }

        /* ── Section reveal ─────────────────────────────────────────
              Driven by scroll position in CSS, not by script. The old version
              ran after hydration, which on this page is three to four seconds
              after first paint: readers watched a section they were already
              looking at fade out and come back. A scroll-driven animation is
              in effect from the very first frame, so nothing is ever hidden
              after it has been seen, and browsers without it simply show the
              section — there is no state in which content can go missing. */
        @supports (animation-timeline: view()) {
          @media (prefers-reduced-motion: no-preference) {
            .tv-about-section,
            .tv-choose-section,
            .tv-portfolio-section,
            .tv-achivement-section,
            .tv-strategy-section,
            .tv-brands-section,
            .tv-cta-section,
            .tv-pricing-section,
            .tv-contact-section,
            .tv-testimonial-section,
            .tv-blog-section {
              animation: tv-reveal linear both;
              animation-timeline: view();
              animation-range: entry 0% entry 45%;
            }
          }
        }
        @keyframes tv-reveal {
          from { opacity: 0; transform: translateY(28px); }
          to   { opacity: 1; transform: none; }
        }

        /* ── Team slider: hold its shape until Swiper wakes up ───────
              The template's own script initialises this one, a second or two
              after paint. Until then the slides carry no width and stack,
              which dropped the section by 560px the moment it initialised.
              These are the widths Swiper itself applies. */
        .tv-team-slider:not(.swiper-initialized) .swiper-wrapper {
          display: flex;
          gap: 24px;
        }
        .tv-team-slider:not(.swiper-initialized) .swiper-slide {
          flex: 0 0 auto;
          width: calc(50% - 12px);
        }
        @media (max-width: 1023px) and (min-width: 768px) {
          .tv-team-slider:not(.swiper-initialized) .swiper-slide { width: 100%; }
        }
        @media (max-width: 575px) {
          .tv-team-slider:not(.swiper-initialized) .swiper-slide { width: 100%; }
        }

        /* A pill is a comfortable size for a mouse; a thumb needs more. */
        @media (pointer: coarse) {
          .nav-lang-pill { min-height: 44px; }
        }

        /* ── Achievement section: text beside the crest ─────────────
              The template laid this row out as text | crest | counters, so the
              crest carries a -340px side pull that only reads correctly from
              that narrow middle column. With two columns it has to stay inside
              its own, which margin-inline handles in both directions. */
        .achivement-split .achivement-content-wrapper .title-wrap.three {
          margin-bottom: 0;
        }
        /* Centre the crest by keeping .thumb block-level (its own
           margin-inline:auto does the rest). Making this a flex item instead
           would leave the crest's width:100% resolving against a shrink-to-fit
           box, which collapses to nothing until the canvas exists and then
           shifts the page when it appears. */
        .achivement-split .achivement-image-wrapper .thumb {
          margin-inline: 0 !important;
        }
        /* The counters used to carry the section's bottom spacing. */
        .achivement-split {
          padding-bottom: 60px;
        }

        /* ── CTA headline: one line in every locale and width ───────
              Same idea as the newsletter title: the column's width does not
              depend on the headline, so it can drive the size, and --cta-chars
              is the width one px of font-size costs in each language. */
        .tv-cta-section.style-2 .cta-left {
          container-type: inline-size;
          --cta-chars: 25;
        }
        .tv-cta-section.style-2 .cta-left .sec-title {
          white-space: nowrap !important;
          line-height: 1.25 !important;
          font-size: min(48px, calc(100cqw / var(--cta-chars))) !important;
        }
        .tv-cta-section.style-2 .cta-left .sec-title br {
          display: none !important;
        }
        [lang="en"] .tv-cta-section.style-2 .cta-left { --cta-chars: 20; }
        [lang="fa"] .tv-cta-section.style-2 .cta-left { --cta-chars: 17; }
        [lang="ar"] .tv-cta-section.style-2 .cta-left { --cta-chars: 11; }
        [lang="ur"] .tv-cta-section.style-2 .cta-left { --cta-chars: 18; }
        [lang="de"] .tv-cta-section.style-2 .cta-left { --cta-chars: 24; }
        [lang="es"] .tv-cta-section.style-2 .cta-left { --cta-chars: 20; }
        [lang="fr"] .tv-cta-section.style-2 .cta-left { --cta-chars: 25; }
        [lang="it"] .tv-cta-section.style-2 .cta-left { --cta-chars: 21; }
        [lang="pt"] .tv-cta-section.style-2 .cta-left { --cta-chars: 22; }
        [lang="ru"] .tv-cta-section.style-2 .cta-left { --cta-chars: 23; }
        [lang="zh"] .tv-cta-section.style-2 .cta-left { --cta-chars: 14; }
        [lang="ja"] .tv-cta-section.style-2 .cta-left { --cta-chars: 22; }
        [lang="ko"] .tv-cta-section.style-2 .cta-left { --cta-chars: 16; }
        [lang="tr"] .tv-cta-section.style-2 .cta-left { --cta-chars: 20; }
        [lang="hi"] .tv-cta-section.style-2 .cta-left { --cta-chars: 19; }
        [lang="bn"] .tv-cta-section.style-2 .cta-left { --cta-chars: 21; }
        [lang="tl"] .tv-cta-section.style-2 .cta-left { --cta-chars: 23; }
        @supports not (width: 1cqw) {
          .tv-cta-section.style-2 .cta-left .sec-title {
            font-size: clamp(18px, 2.2vw, 48px) !important;
          }
        }
        /* Below the tablet breakpoint one line costs more than it buys: at 320px
           it drops the headline to 17px, the same size as body copy. Let it wrap
           there and keep the type at a headline size. */
        @media (max-width: 575px) {
          .tv-cta-section.style-2 .cta-left .sec-title {
            white-space: normal !important;
            text-wrap: balance;
            font-size: clamp(22px, 7vw, 34px) !important;
          }
        }

        /* ── About style-3: drop the template's faint divider lines
              (vertical hairline on the thumb + horizontal rule). ── */
        .tv-about-section.style-3 .about-left .about-thumb::before {
          display: none !important;
        }
        .tv-about-section.style-3 .about-left .border {
          display: none !important;
        }

        /* ── About style-3 between phone and desktop ────────────────
              The row is 4 / 5 / 3 columns at lg, but only the middle and right
              ones carry md classes, so from 576px to 991px the photo spanned
              the full row while the copy kept half of it — a four-line ragged
              heading beside an empty half. Give the copy the full measure up to
              767px, then pair it with the photo and run the video and portrait
              across the row below. */
        @media (min-width: 576px) and (max-width: 767.98px) {
          .tv-about-section.style-3 .row > .col-lg-5,
          .tv-about-section.style-3 .row > .col-lg-3 {
            flex: 0 0 100%;
            width: 100%;
            max-width: 100%;
          }
        }
        @media (min-width: 768px) and (max-width: 991.98px) {
          .tv-about-section.style-3 .row > .col-lg-4,
          .tv-about-section.style-3 .row > .col-lg-5 {
            flex: 0 0 50%;
            width: 50%;
            max-width: 50%;
          }
          .tv-about-section.style-3 .row > .col-lg-3 {
            flex: 0 0 100%;
            width: 100%;
            max-width: 100%;
          }
          .tv-about-section.style-3 .about-right {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 40px;
            margin-inline-start: 0 !important;
          }
          .tv-about-section.style-3 .about-right .profile-card {
            margin-top: 0 !important;
          }
        }
        /* Bootstrap's 12px container padding is a hairline on a tablet, where
           there is no leftover width to stand in for a margin. */
        @media (min-width: 576px) and (max-width: 991.98px) {
          .page-wrapper .container {
            padding-inline: 24px;
          }
        }

        /* ── Breadcrumb links: 16px text in a 25px line was under the 40px
              touch minimum. ── */
        .tv-breadcrumb-section .page-breadcrumb li a {
          display: inline-flex;
          align-items: center;
          min-height: 40px;
        }

        /* ── Team photos: lock a portrait ratio so cards in the same row
              stay equal height regardless of source image proportions. ── */
        .tv-team-card .team-photo img {
          aspect-ratio: 4 / 5;
          object-fit: cover;
          object-position: top center;
        }

        /* ── Newsletter submit feedback ────────────────────────────── */
        .newsletter-status {
          margin: 10px 0 0;
          min-height: 1.2em;
          font-size: 14px;
          font-weight: 600;
          color: #ffffff;
        }
        .newsletter-status:empty {
          margin: 0;
          min-height: 0;
        }

        /* ── Scroll progress indicator ─────────────────────────────── */
        .scroll-progress-bar {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          height: 3px;
          background: linear-gradient(90deg, #1053f3, #6ea8fe);
          z-index: 99998;
          transform-origin: left;
          transform: scaleX(0);
        }
        [dir="rtl"] .scroll-progress-bar {
          transform-origin: right;
          background: linear-gradient(-90deg, #1053f3, #6ea8fe);
          transition: none;
          will-change: transform;
        }

        /* ── Mobile: Hide sticky header, make main header fixed ── */
        @media (max-width: 991px) {
          .sticky-header {
            display: none !important;
          }
          .tv-header .main-wrapper {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            z-index: 99999 !important;
            background: rgba(6, 6, 18, 0.85) !important;
            backdrop-filter: blur(20px) saturate(1.4) !important;
            -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
            border-bottom: 1px solid rgba(255,255,255,0.06) !important;
            transition: background 0.3s !important;
          }
          .tv-header .main-wrapper .menu-area {
            padding: 8px 0 !important;
          }
        }

        /* ── Newsletter title: always a single line (all locales / widths) ──
           The size is derived from the text block's own width, so it needs a
           width that does not depend on the text: flex-basis 0 plus grow gives
           the row's leftover space, and container-type exposes it as cqw.
           --nl-chars is how many px of that width one px of font-size costs in
           each language (measured), so the longest copy still lands on one
           line instead of being clamped down to something unreadable. */
        section.newsletter-section .newsletter {
          gap: 28px !important;
        }
        section.newsletter-section .newsletter .image-text {
          flex: 1 1 0% !important;
          min-width: 0 !important;
          align-items: center !important;
          gap: 14px !important;
          padding-inline-start: 0 !important;
          padding-inline-end: 0 !important;
          container-type: inline-size;
          /* 32px check icon + its gap: width the title cannot use. */
          --nl-reserve: 46px;
          --nl-chars: 33;
        }
        @media (min-width: 1200px) {
          /* Keep clear of the portrait, which only shows from this width up. */
          section.newsletter-section .newsletter .image-text {
            padding-inline-start: 205px !important;
          }
        }
        [lang="en"] section.newsletter-section .newsletter .image-text { --nl-chars: 23; }
        [lang="fa"] section.newsletter-section .newsletter .image-text { --nl-chars: 22; }
        [lang="ar"] section.newsletter-section .newsletter .image-text { --nl-chars: 24; }
        [lang="ur"] section.newsletter-section .newsletter .image-text { --nl-chars: 25; }
        [lang="de"] section.newsletter-section .newsletter .image-text { --nl-chars: 31; }
        [lang="es"] section.newsletter-section .newsletter .image-text { --nl-chars: 31; }
        [lang="fr"] section.newsletter-section .newsletter .image-text { --nl-chars: 33; }
        [lang="it"] section.newsletter-section .newsletter .image-text { --nl-chars: 30; }
        [lang="pt"] section.newsletter-section .newsletter .image-text { --nl-chars: 27; }
        [lang="ru"] section.newsletter-section .newsletter .image-text { --nl-chars: 32; }
        [lang="zh"] section.newsletter-section .newsletter .image-text { --nl-chars: 17; }
        [lang="ja"] section.newsletter-section .newsletter .image-text { --nl-chars: 28; }
        [lang="ko"] section.newsletter-section .newsletter .image-text { --nl-chars: 21; }
        [lang="tr"] section.newsletter-section .newsletter .image-text { --nl-chars: 25; }
        [lang="hi"] section.newsletter-section .newsletter .image-text { --nl-chars: 23; }
        [lang="bn"] section.newsletter-section .newsletter .image-text { --nl-chars: 28; }
        [lang="tl"] section.newsletter-section .newsletter .image-text { --nl-chars: 33; }
        section.newsletter-section .newsletter .image-text .title {
          white-space: nowrap !important;
          line-height: 1.25 !important;
          margin: 0 !important;
          font-size: min(28px, calc((100cqw - var(--nl-reserve)) / var(--nl-chars))) !important;
        }
        section.newsletter-section .newsletter .image-text .title br {
          display: none !important;
        }
        @supports not (width: 1cqw) {
          section.newsletter-section .newsletter .image-text .title {
            font-size: clamp(12px, 1.5vw, 28px) !important;
          }
        }
        /* Stacked layout: the title owns the whole row, icon sits above it. */
        @media (max-width: 768px) {
          section.newsletter-section .newsletter {
            flex-direction: column !important;
            align-items: stretch !important;
          }
          section.newsletter-section .newsletter .image-text {
            flex: 0 0 auto !important;
            width: 100% !important;
            --nl-reserve: 0px;
          }
        }
        /* Same trade as the CTA headline: one line on a phone shrinks this to
           11.6px at 320px, below the 16px body copy it is meant to head. */
        @media (max-width: 575px) {
          section.newsletter-section .newsletter .image-text .title {
            white-space: normal !important;
            text-wrap: balance;
            font-size: clamp(17px, 5.2vw, 24px) !important;
          }
        }

        /* ── Newsletter — Mobile Responsive ─────────────────────── */
        @media (max-width: 768px) {
          .newsletter-section {
            margin-top: -40px !important;
            margin-bottom: 0 !important;
          }
          .newsletter-section .newsletter {
            padding: 28px 16px 24px !important;
            border-radius: 20px !important;
            text-align: center !important;
          }
          .newsletter-section .newsletter .bg.image img {
            border-radius: 20px !important;
          }
          .newsletter-section .image-text {
            flex-direction: column !important;
            align-items: center !important;
            gap: 8px !important;
            margin-bottom: 16px !important;
            width: 100% !important;
          }
          .newsletter-section .image-text img {
            width: 28px !important;
            height: 28px !important;
          }
          .newsletter-section .image-text .title {
            text-align: center !important;
          }
          .newsletter-section .newsletter-form {
            max-width: 100% !important;
            padding: 0 !important;
          }
          .newsletter-section .newsletter-form .form-group {
            flex-direction: row !important;
            border-radius: 50px !important;
            overflow: hidden !important;
          }
          .newsletter-section .newsletter-form input.email {
            font-size: 13px !important;
            padding: 12px 16px !important;
          }
          .newsletter-section .newsletter-form button {
            min-width: 48px !important;
            padding: 12px 16px !important;
          }
          .newsletter-section .arrow-shape {
            display: none !important;
          }
        }

        /* ── Footer — Mobile Responsive ──────────────────────────── */
        @media (max-width: 768px) {
          .footer-section {
            text-align: center !important;
          }
          .footer-section .footer-top {
            padding: 40px 0 20px !important;
          }
          .footer-section .footer-brand {
            margin-bottom: 24px !important;
          }
          .footer-section .footer-brand .logo {
            display: flex !important;
            justify-content: center !important;
            margin-bottom: 20px !important;
          }
          .footer-section .footer-brand .logo img {
            max-width: 140px !important;
          }
          .footer-section .contact-info {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 16px !important;
          }
          .footer-section .contact-item {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 4px !important;
          }
          .footer-section .contact-item .title {
            font-size: 13px !important;
            opacity: 0.6 !important;
            margin-bottom: 2px !important;
          }
          .footer-section .contact-item a {
            font-size: 14px !important;
          }
          .footer-section .footer-brand .social-links {
            display: flex !important;
            justify-content: center !important;
            gap: 10px !important;
            margin-top: 20px !important;
            flex-wrap: wrap !important;
          }
          .footer-section .footer-brand .social-links a.social-icon {
            width: 40px !important;
            height: 40px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 50% !important;
            background: rgba(255,255,255,0.06) !important;
            border: 1px solid rgba(255,255,255,0.1) !important;
            font-size: 14px !important;
            transition: all 0.2s !important;
          }
          .footer-section .col-lg-6 {
            margin-top: 8px !important;
          }
          .footer-section .col-lg-6:not(.footer-links) .row {
            display: flex !important;
            flex-direction: row !important;
            justify-content: center !important;
            gap: 0 !important;
          }
          .footer-section .footer-widget {
            text-align: center !important;
            padding: 0 12px !important;
          }
          .footer-section .footer-widget h4.title {
            font-size: 15px !important;
            margin-bottom: 12px !important;
            position: relative !important;
            display: inline-block !important;
          }
          .footer-section .footer-widget ul li {
            margin-bottom: 6px !important;
          }
          .footer-section .footer-widget ul li a {
            font-size: 13px !important;
          }
          .footer-section .footer-bottom {
            padding: 16px 0 !important;
            border-top: 1px solid rgba(255,255,255,0.08) !important;
          }
          .footer-section .footer-bottom p {
            font-size: 12px !important;
          }
        }

        /* ── Orientation-aware adjustments ─────────────────────────── */
        @media (max-width: 991px) and (orientation: landscape) {
          .breadcrumb-area {
            min-height: auto !important;
            padding: 80px 0 40px !important;
          }
        }