/* ============================================================
   vorza360 UI+ overlay — REVERSIBLE layer.
   Drop everything: remove the v360-uiplus.css + v360-uiplus.js
   tags from index.html. Drop one item: delete its [UIP-n] block.
   ============================================================ */

/* [UIP-1] Scroll reveal (classes applied by JS; no-JS = fully visible) */
.uip-reveal{ opacity:0; transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--uip-d, 0s); will-change:opacity,transform; }
.uip-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .uip-reveal{ opacity:1; transform:none; transition:none; } }

/* [UIP-2] Services / IT Support / Tech Stack tab cards — v2 redesign */
.elementor-element-fbbcbbb .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading),
.elementor-element-6d7c0b9 .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading){
  background:linear-gradient(180deg,#ffffff 0%,#f6fafb 100%) !important;
  border:1px solid #e8edf0 !important; border-radius:20px !important;
  padding:34px 30px !important; position:relative; overflow:hidden;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), border-color .35s ease;
}
/* title + growing teal underline */
.elementor-element-fbbcbbb .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading) .elementor-heading-title,
.elementor-element-6d7c0b9 .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading) .elementor-heading-title{
  color:#10111a !important; font-size:19px !important; font-weight:600 !important; line-height:1.35 !important;
}
.elementor-element-fbbcbbb .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading) .elementor-heading-title::after,
.elementor-element-6d7c0b9 .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading) .elementor-heading-title::after{
  content:""; display:block; width:28px; height:3px; border-radius:2px; background:#00A8BB;
  margin-top:12px; transition:width .35s cubic-bezier(.16,1,.3,1);
}
.elementor-element-fbbcbbb .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading):hover .elementor-heading-title::after,
.elementor-element-6d7c0b9 .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading):hover .elementor-heading-title::after{
  width:48px;
}
/* body copy */
.elementor-element-fbbcbbb .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading) .elementor-widget-text-editor,
.elementor-element-6d7c0b9 .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading) .elementor-widget-text-editor{
  color:#5f6570 !important; font-size:14.5px !important; line-height:1.7 !important;
}
.elementor-element-fbbcbbb .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading) .elementor-widget-text-editor *,
.elementor-element-6d7c0b9 .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading) .elementor-widget-text-editor *{
  color:inherit !important; font-size:inherit !important; line-height:inherit !important;
}
/* hover: lift + soft shadow + arrow chip */
.elementor-element-fbbcbbb .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading):hover,
.elementor-element-6d7c0b9 .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading):hover{
  transform:translateY(-5px); border-color:rgba(0,168,187,.45) !important;
  box-shadow:0 18px 40px rgba(2,32,38,.08);
}
.elementor-element-fbbcbbb .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading)::after,
.elementor-element-6d7c0b9 .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading)::after{
  content:"\2197"; position:absolute; right:22px; bottom:20px; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:#00A8BB; color:#fff; font-size:16px; opacity:0; transform:translateY(8px) scale(.85);
  transition:opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.elementor-element-fbbcbbb .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading):hover::after,
.elementor-element-6d7c0b9 .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading):hover::after{
  opacity:1; transform:none;
}
/* intro panel = dark anchor card (tagged by JS) — selectors mirror the card rules to win specificity */
.elementor-element-fbbcbbb .e-n-tabs-content .e-con.e-child.uip-tab-intro,
.elementor-element-6d7c0b9 .e-n-tabs-content .e-con.e-child.uip-tab-intro{
  background:#10111a !important; border-color:#10111a !important; }
.elementor-element-fbbcbbb .e-n-tabs-content .e-con.e-child.uip-tab-intro .elementor-heading-title,
.elementor-element-6d7c0b9 .e-n-tabs-content .e-con.e-child.uip-tab-intro .elementor-heading-title{
  color:#ffffff !important; font-size:22px !important; }
.elementor-element-fbbcbbb .e-n-tabs-content .e-con.e-child.uip-tab-intro .elementor-heading-title::after,
.elementor-element-6d7c0b9 .e-n-tabs-content .e-con.e-child.uip-tab-intro .elementor-heading-title::after{
  background:#00e0f7 !important; }
.elementor-element-fbbcbbb .e-n-tabs-content .e-con.e-child.uip-tab-intro .elementor-widget-text-editor,
.elementor-element-6d7c0b9 .e-n-tabs-content .e-con.e-child.uip-tab-intro .elementor-widget-text-editor{
  color:#b9bec8 !important; }
.elementor-element-fbbcbbb .e-n-tabs-content .e-con.e-child.uip-tab-intro:hover,
.elementor-element-6d7c0b9 .e-n-tabs-content .e-con.e-child.uip-tab-intro:hover{
  border-color:#10111a !important; transform:none; box-shadow:none; }
.elementor-element-fbbcbbb .e-n-tabs-content .e-con.e-child.uip-tab-intro::after,
.elementor-element-6d7c0b9 .e-n-tabs-content .e-con.e-child.uip-tab-intro::after{ display:none !important; }

/* [UIP-3] Our Services card description line (injected by JS) */
.uip-svc-desc{ margin:6px 0 0; font-size:13.5px; line-height:1.55; color:#6b7078; }

/* [UIP-4] Hero entrance stagger (classes applied by JS) + quote de-emphasis */
.uip-hero-item{ opacity:0; transform:translateY(18px);
  animation:uipHeroIn .7s cubic-bezier(.16,1,.3,1) forwards; animation-delay:var(--uip-d,0s); }
@keyframes uipHeroIn{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .uip-hero-item{ animation:none; opacity:1; transform:none; } }

/* [UIP-5] How-we-do-it teal cards: consistent padding + readable text */
.uip-hwdi-card{ padding:44px 40px !important; }
.uip-hwdi-card .elementor-widget-text-editor{ font-size:15px !important; line-height:1.7 !important; }

/* [UIP-7] superseded by UIP-22 (process card accordions) */

/* [UIP-8] Light rhythm: uniform gap between section heading block and its content */
.uip-sechead{ margin-bottom:14px !important; }

/* [UIP-9] Marquee edge fade */
.uip-marquee{ -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }

/* [UIP-10] Micro-interactions: read-more arrow slide + footer link hover */
.elementor-button .elementor-button-icon{ transition:transform .25s cubic-bezier(.16,1,.3,1); }
.elementor-button:hover .elementor-button-icon{ transform:translateX(4px); }
a.uip-footlink{ transition:color .2s ease, transform .2s ease; display:inline-block; }
a.uip-footlink:hover{ color:#dff7fa !important; transform:translateX(3px); }

/* [UIP-12] NAVBAR redesign — floating dark-glass pill, scroll-aware */
/* fixed full-width rail (header was already absolute overlay, so no layout shift) */
.uip-nav-rail{ position:fixed !important; top:0; left:0; right:0; z-index:1200 !important;
  pointer-events:none; transition:transform .45s cubic-bezier(.16,1,.3,1); }
.uip-nav-rail > *{ pointer-events:auto; }
.uip-nav-hidden{ transform:translateY(-120%); }
/* the pill shell (desktop header row) */
.uip-nav-shell{ max-width:1240px; margin:14px auto 0 !important; padding:8px 12px 8px 24px !important;
  background:rgba(13,17,23,.88) !important; -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5); border:1px solid rgba(255,255,255,.14) !important;
  border-radius:999px !important; box-shadow:0 8px 30px rgba(2,10,14,.18);
  transition:background .3s ease, box-shadow .3s ease, margin .3s ease; }
.uip-nav-scrolled .uip-nav-shell{ background:rgba(11,14,19,.94) !important;
  box-shadow:0 12px 36px rgba(2,10,14,.32); margin-top:10px !important; }
/* links: pill highlight on hover */
.uip-nav-rail .elementskit-navbar-nav > li > a{
  color:rgba(255,255,255,.92) !important; padding:9px 15px !important; border-radius:999px !important;
  transition:background .25s ease, color .25s ease; }
.uip-nav-rail .elementskit-navbar-nav > li > a:hover,
.uip-nav-rail .elementskit-navbar-nav > li.current-menu-item > a{
  background:rgba(255,255,255,.13) !important; color:#fff !important; }
/* CTA: brand teal pill */
.uip-nav-rail .elementor-element a.elementor-button.elementor-button{
  background:#00A8BB !important; color:#fff !important;
  transition:background .25s ease, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.uip-nav-rail .elementor-element a.elementor-button.elementor-button:hover{
  background:#00bfd4 !important; transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,168,187,.35); }
/* dropdown / megamenu reskin */
.uip-nav-rail .elementskit-megamenu-panel,
.uip-nav-rail .elementskit-dropdown{
  border-radius:20px !important; overflow:hidden; border:1px solid #e9edf0 !important;
  box-shadow:0 24px 60px rgba(2,10,14,.16) !important; margin-top:10px !important; }
@media (prefers-reduced-motion: reduce){
  .uip-nav-rail{ transition:none; }
}
/* mobile: keep the shell comfortable, hamburger visible on glass */
@media (max-width:1024px){
  .uip-nav-shell{ padding:8px 14px !important; }
}

/* [UIP-12] mobile hamburger on dark glass */
.uip-nav-rail .elementskit-menu-hamburger{ border-color:rgba(255,255,255,.35) !important; border-radius:12px !important; }
.uip-nav-rail .elementskit-menu-hamburger .elementskit-menu-hamburger-icon,
.uip-nav-rail .elementskit-menu-hamburger span{ background:#ffffff !important; }
.uip-nav-rail .elementskit-menu-hamburger .ekit-menu-icon{ color:#ffffff !important; }

/* [UIP-12b] navbar padding polish — slim balanced pill */
.uip-nav-shell{ padding:8px 12px 8px 26px !important; }
.uip-nav-shell img{ height:38px !important; width:auto !important; }
.uip-nav-scrolled .uip-nav-shell img{ height:34px !important; }
@media (max-width:1024px){ .uip-nav-shell img{ height:32px !important; } .uip-nav-shell{ padding:8px 12px 8px 18px !important; } }

/* [UIP-13] DROPDOWNS — dark glass system matching the navbar (desktop only) */
@media (min-width:1025px){
  @keyframes uipDropIn{ from{ opacity:0; transform:translateY(-10px) scale(.985); } to{ opacity:1; transform:none; } }
  .uip-nav-rail .elementskit-megamenu-panel,
  .uip-nav-rail .elementskit-dropdown{
    background:rgba(11,14,19,.88) !important;
    -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:22px !important; overflow:hidden;
    box-shadow:0 30px 80px rgba(2,10,14,.45) !important; margin-top:12px !important;
  }
  .uip-nav-rail .elementskit-navbar-nav > li:hover > .elementskit-megamenu-panel,
  .uip-nav-rail .elementskit-navbar-nav > li:hover > .elementskit-dropdown{
    animation:uipDropIn .32s cubic-bezier(.16,1,.3,1);
  }
  /* chevron rotates while its menu is open */
  .uip-nav-rail .elementskit-navbar-nav > li > a .elementskit-submenu-indicator,
  .uip-nav-rail .elementskit-navbar-nav > li > a svg,
  .uip-nav-rail .elementskit-navbar-nav > li > a i{
    transition:transform .3s cubic-bezier(.16,1,.3,1); }
  .uip-nav-rail .elementskit-navbar-nav > li:hover > a .elementskit-submenu-indicator,
  .uip-nav-rail .elementskit-navbar-nav > li:hover > a svg,
  .uip-nav-rail .elementskit-navbar-nav > li:hover > a i{ transform:rotate(180deg); }
  /* panel content: dark theme */
  .uip-nav-rail .elementskit-megamenu-panel .elementor-heading-title,
  .uip-nav-rail .elementskit-megamenu-panel h1, .uip-nav-rail .elementskit-megamenu-panel h2,
  .uip-nav-rail .elementskit-megamenu-panel h3, .uip-nav-rail .elementskit-megamenu-panel h4{
    color:#ffffff !important; }
  .uip-nav-rail .elementskit-megamenu-panel a:not(.elementor-button),
  .uip-nav-rail .elementskit-megamenu-panel .elementor-icon-list-text,
  .uip-nav-rail .elementskit-megamenu-panel p,
  .uip-nav-rail .elementskit-megamenu-panel .elementor-widget-text-editor{
    color:rgba(255,255,255,.72) !important;
    transition:color .22s ease, transform .22s ease; }
  .uip-nav-rail .elementskit-megamenu-panel a:not(.elementor-button):hover,
  .uip-nav-rail .elementskit-megamenu-panel a:hover .elementor-icon-list-text{
    color:#4fd9e8 !important; }
  .uip-nav-rail .elementskit-megamenu-panel .elementor-icon-list-item a:hover{
    transform:translateX(4px); display:inline-block; }
  /* category rail (nested-tab titles inside the panel) */
  .uip-nav-rail .elementskit-megamenu-panel .e-n-tab-title{
    background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.08) !important;
    border-radius:14px !important; color:#fff !important;
    transition:background .25s ease, border-color .25s ease; }
  .uip-nav-rail .elementskit-megamenu-panel .e-n-tab-title:hover{
    background:rgba(0,168,187,.18) !important; border-color:rgba(0,168,187,.45) !important; }
  .uip-nav-rail .elementskit-megamenu-panel .e-n-tab-title[aria-selected="true"]{
    background:rgba(0,168,187,.26) !important; border-color:#00A8BB !important; }
  .uip-nav-rail .elementskit-megamenu-panel .e-n-tab-title *{ color:#fff !important; }
}
/* [UIP-13] inner panel layers must be transparent so the glass shows through */
@media (min-width:1025px){
  .uip-nav-rail .elementskit-megamenu-panel .elementor,
  .uip-nav-rail .elementskit-megamenu-panel [data-elementor-type],
  .uip-nav-rail .elementskit-megamenu-panel .e-con,
  .uip-nav-rail .elementskit-megamenu-panel .e-con-inner,
  .uip-nav-rail .elementskit-megamenu-panel .elementor-widget-container{
    background:transparent !important; background-color:transparent !important; background-image:none !important; }
  /* category chips keep their glass card look (re-assert after transparency reset) */
  .uip-nav-rail .elementskit-megamenu-panel .e-n-tab-title{
    background:rgba(255,255,255,.05) !important; }
  .uip-nav-rail .elementskit-megamenu-panel .e-n-tab-title:hover{
    background:rgba(0,168,187,.18) !important; }
  .uip-nav-rail .elementskit-megamenu-panel .e-n-tab-title[aria-selected="true"]{
    background:rgba(0,168,187,.26) !important; }
}
/* [UIP-13] refinements: opacity, stray whites, sub-heading colors */
@media (min-width:1025px){
  .uip-nav-rail .elementskit-megamenu-panel,
  .uip-nav-rail .elementskit-dropdown{ background:rgba(10,13,18,.95) !important; }
  .uip-nav-rail .elementskit-megamenu-panel li,
  .uip-nav-rail .elementskit-megamenu-panel ul{ background:transparent !important; }
  .uip-nav-rail .elementskit-megamenu-panel h5,
  .uip-nav-rail .elementskit-megamenu-panel h6,
  .uip-nav-rail .elementskit-megamenu-panel strong,
  .uip-nav-rail .elementskit-megamenu-panel .elementor-icon-list-item a{
    color:rgba(255,255,255,.85) !important; }
  .uip-nav-rail .elementskit-megamenu-panel .elementor-icon-list-item a:hover{ color:#4fd9e8 !important; }
  .uip-nav-rail .elementskit-megamenu-panel .e-n-tab-title.e-active,
  .uip-nav-rail .elementskit-megamenu-panel .e-n-tab-title[aria-selected="true"]{
    background:rgba(0,168,187,.26) !important; border-color:#00A8BB !important; }
}
/* [UIP-13] final: solid panel, tighter shadow */
@media (min-width:1025px){
  .uip-nav-rail .elementskit-megamenu-panel,
  .uip-nav-rail .elementskit-dropdown{
    background:#0b0e13 !important;
    box-shadow:0 18px 50px rgba(2,10,14,.35) !important; }
}
/* [UIP-13] View All + any residual dim text inside the panel */
@media (min-width:1025px){
  .uip-nav-rail .elementskit-megamenu-panel [class*="view-all"],
  .uip-nav-rail .elementskit-megamenu-panel u,
  .uip-nav-rail .elementskit-megamenu-panel button:not(.e-n-tab-title){
    color:#4fd9e8 !important; }
}

/* [UIP-13b] tablet/mobile drawer joins the dark system (white-on-white fix) */
@media (max-width:1024px){
  .uip-nav-rail .elementskit-menu-offcanvas-elements{
    background:#0b0e13 !important; border-right:1px solid rgba(255,255,255,.08); }
  .uip-nav-rail .elementskit-menu-offcanvas-elements .elementskit-navbar-nav a,
  .uip-nav-rail .elementskit-menu-offcanvas-elements a,
  .uip-nav-rail .elementskit-menu-offcanvas-elements span,
  .uip-nav-rail .elementskit-menu-offcanvas-elements li{
    color:rgba(255,255,255,.9) !important; background:transparent !important; }
  .uip-nav-rail .elementskit-menu-offcanvas-elements a:hover{ color:#4fd9e8 !important; }
  .uip-nav-rail .elementskit-menu-offcanvas-elements .elementskit-submenu-indicator,
  .uip-nav-rail .elementskit-menu-offcanvas-elements .elementskit-menu-close,
  .uip-nav-rail .elementskit-menu-offcanvas-elements .elementskit-menu-close *{
    color:#ffffff !important; border-color:rgba(255,255,255,.3) !important; }
  .uip-nav-rail .elementskit-menu-offcanvas-elements .elementskit-dropdown,
  .uip-nav-rail .elementskit-menu-offcanvas-elements .elementskit-megamenu-panel{
    background:rgba(255,255,255,.04) !important; border:0 !important; box-shadow:none !important; }
  .uip-nav-rail .elementskit-menu-offcanvas-elements li{ border-color:rgba(255,255,255,.08) !important; }
}
/* [UIP-13b] View All inside panels was near-black on black */
.uip-nav-rail .elementskit-megamenu-panel .e-n-accordion-item-title-text,
.uip-nav-rail .elementskit-megamenu-panel .e-n-accordion-item-title{
  color:#4fd9e8 !important; }
/* [UIP-13b] drawer height: 100% of fixed rail = navbar-tall strip; force viewport height */
@media (max-width:1024px){
  .uip-nav-rail .elementskit-menu-offcanvas-elements{
    height:100vh !important; min-height:100vh !important; top:0 !important;
    overflow-y:auto !important; }
}

/* [UIP-12c] nav links were 5px below pill center (baseline alignment) — true-center them */
@media (min-width:1025px){
  .uip-nav-rail .elementskit-navbar-nav{ display:flex; align-items:center; }
  .uip-nav-rail .elementskit-navbar-nav > li{ display:flex; align-items:center; margin:0 !important; }
  .uip-nav-rail .elementskit-navbar-nav > li > a{
    display:inline-flex; align-items:center; line-height:1.2 !important; }
}
/* [UIP-12c] ul had fixed 30px height; 36px link pills overflowed downward */
@media (min-width:1025px){
  .uip-nav-rail .elementskit-navbar-nav{ height:auto !important; }
}
/* [UIP-12c] final nudge: theme hard-caps ul height; lift the list to true center */
@media (min-width:1025px){
  .uip-nav-rail .elementskit-navbar-nav{ transform:translateY(-3px); }
}

/* [UIP-12d] Talk To Us remake — white pill on dark glass, inverts to teal on hover */
.uip-nav-rail .elementor-element a.elementor-button.elementor-button{
  background:#ffffff !important; color:#10111a !important;
  border:0 !important; box-shadow:0 4px 14px rgba(2,10,14,.25);
  padding:11px 24px !important; font-weight:600 !important; letter-spacing:.2px;
  transition:background .25s ease, color .25s ease, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.uip-nav-rail .elementor-element a.elementor-button.elementor-button:hover{
  background:#00A8BB !important; color:#ffffff !important;
  transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,168,187,.4); }
.uip-nav-rail .elementor-element a.elementor-button.elementor-button *{ color:inherit !important; }
/* drawer: keep button text ink (drawer text-whitening must not hit the button) */
@media (max-width:1024px){
  .uip-nav-rail .elementskit-menu-offcanvas-elements a.elementor-button,
  .uip-nav-rail .elementskit-menu-offcanvas-elements a.elementor-button *{
    color:#10111a !important; background:#ffffff !important; }
}

/* [UIP-4b] hero buttons join the new button language */
.uip-hero a.elementor-button.uip-hero-primary{
  background:#ffffff !important; color:#10111a !important; border:0 !important;
  box-shadow:0 6px 18px rgba(2,10,14,.18);
  transition:background .25s ease, color .25s ease, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.uip-hero a.elementor-button.uip-hero-primary:hover{
  background:#10111a !important; color:#ffffff !important;
  transform:translateY(-2px); box-shadow:0 12px 26px rgba(2,10,14,.3); }
.uip-hero a.elementor-button.uip-hero-primary *{ color:inherit !important; }
.uip-hero a.elementor-button.uip-hero-ghost{
  background:transparent !important; color:#ffffff !important;
  border:2px solid rgba(255,255,255,.85) !important;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.16,1,.3,1); }
.uip-hero a.elementor-button.uip-hero-ghost:hover{
  background:#ffffff !important; color:#10111a !important; border-color:#ffffff !important;
  transform:translateY(-2px); }
.uip-hero a.elementor-button.uip-hero-ghost *{ color:inherit !important; }
/* [UIP-4b] equalize hero buttons: fixed height regardless of border */
.uip-hero a.elementor-button.uip-hero-primary,
.uip-hero a.elementor-button.uip-hero-ghost{
  box-sizing:border-box !important; height:46px !important;
  padding:0 26px !important; display:inline-flex !important;
  align-items:center !important; justify-content:center !important; }

/* [UIP-14] logo loops: constant glide + edge fade */
.uip-loopglide .swiper-wrapper{ transition-timing-function:linear !important; }
.uip-loopglide{ -webkit-mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.uip-loopglide .swiper-slide{ opacity:.92; transition:opacity .25s ease; }
.uip-loopglide .swiper-slide:hover{ opacity:1; }

/* [UIP-15] Our Services cards: unified structure + type + read-more */
.uip-svc-card{
  background:linear-gradient(180deg,#ffffff 0%,#f6fafb 100%) !important;
  border:1px solid #e8edf0 !important; border-radius:20px !important;
  padding:28px 26px !important; display:flex; flex-direction:column;
}
.uip-svc-card .elementor-heading-title{
  font-size:19px !important; font-weight:600 !important; line-height:1.3 !important;
  color:#10111a !important; min-height:2.6em; display:flex; align-items:flex-start; }
.uip-svc-card .uip-svc-desc{ min-height:4.65em; margin-top:2px; }
.uip-svc-card .elementor-widget-icon .elementor-icon{
  border-radius:12px !important; transition:transform .3s cubic-bezier(.16,1,.3,1); }
.uip-svc-card:hover .elementor-widget-icon .elementor-icon{ transform:scale(1.08); }
/* read-more: teal, weighted, arrow slides in */
.uip-svc-card a.elementor-button{
  color:#00A8BB !important; font-weight:600 !important; padding:0 !important;
  background:transparent !important; box-shadow:none !important; height:auto !important; }
.uip-svc-card a.elementor-button .elementor-button-text::after{
  content:"\2192"; display:inline-block; margin-left:6px;
  transition:transform .25s cubic-bezier(.16,1,.3,1); }
.uip-svc-card a.elementor-button:hover{ background:transparent !important; transform:none; }
.uip-svc-card a.elementor-button:hover .elementor-button-text::after{ transform:translateX(4px); }
/* "+N More" card -> dark anchor with arrow chip */
.uip-svc-more{
  background:#10111a !important; border:1px solid #10111a !important; border-radius:20px !important;
  position:relative; transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.uip-svc-more *{ color:#ffffff !important; }
.uip-svc-more::after{
  content:"\2197"; position:absolute; right:22px; bottom:20px; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:#00A8BB; color:#fff; font-size:16px; }
.uip-svc-more:hover{ transform:translateY(-6px); box-shadow:0 14px 30px rgba(16,17,26,.25); }
/* [UIP-15b] +4 More must fully cover the card stacked behind it (its Read More was peeking out) */
.uip-svc-more{ height:100% !important; min-height:100% !important; width:100% !important;
  z-index:2; }

/* [UIP-15c] expand animation for the +4 More reveal */
@keyframes uipCardIn{ from{ opacity:0; transform:translateY(22px) scale(.98); } to{ opacity:1; transform:none; } }
.uip-expand-in{ animation:uipCardIn .55s cubic-bezier(.16,1,.3,1) both; animation-delay:var(--uip-d,0s); }
@media (prefers-reduced-motion: reduce){ .uip-expand-in{ animation:none; } }
.uip-more-hidden{ opacity:0 !important; pointer-events:none !important; transition:opacity .35s ease; }

/* [UIP-16] How-we-do-it: elevated teal step cards + rounded imagery */
.uip-hwdi .uip-hwdi-card{
  background:linear-gradient(135deg,#00b7cb 0%,#008fa0 100%) !important;
  border-radius:22px !important; padding:46px 44px !important;
  display:flex; flex-direction:column; justify-content:center;
}
.uip-hwdi .uip-hwdi-card::before{
  content:attr(data-uip-step); display:block;
  font-size:54px; font-weight:700; line-height:1; letter-spacing:1px;
  color:rgba(255,255,255,.28); margin-bottom:14px;
}
.uip-hwdi .uip-hwdi-card .elementor-heading-title{
  color:#ffffff !important; font-size:26px !important; font-weight:600 !important; line-height:1.25 !important; }
.uip-hwdi .uip-hwdi-card .elementor-widget-text-editor,
.uip-hwdi .uip-hwdi-card .elementor-widget-text-editor *{
  color:rgba(255,255,255,.88) !important; font-size:15px !important; line-height:1.75 !important; }
.uip-hwdi .uip-hwdi-card a.elementor-button{
  background:transparent !important; color:#ffffff !important;
  border:2px solid rgba(255,255,255,.75) !important;
  box-sizing:border-box !important; height:44px !important; padding:0 24px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  align-self:flex-start; margin-top:8px;
  transition:background .25s ease, color .25s ease, transform .25s cubic-bezier(.16,1,.3,1); }
.uip-hwdi .uip-hwdi-card a.elementor-button:hover{
  background:#ffffff !important; color:#00808f !important; transform:translateY(-2px); }
.uip-hwdi .uip-hwdi-card a.elementor-button *{ color:inherit !important; }
/* imagery: rounded, cover, equal height with its card */
.uip-hwdi .uip-hwdi-img{ border-radius:22px !important; overflow:hidden; }
.uip-hwdi .uip-hwdi-img img{ width:100%; height:100%; object-fit:cover; }

/* [UIP-17] Who We Are pillars: no divider lines, teal dash, uniform imagery, gentle float */
.uip-who .elementor-element-8f5e4e3,
.uip-who .elementor-element-6c59b23{ border-right:0 !important; }
.uip-who .uip-who-pillar{ padding:0 26px; }
.uip-who .uip-who-pillar .elementor-heading-title{
  font-size:20px !important; font-weight:600 !important; color:#10111a !important; }
.uip-who .uip-who-pillar .elementor-heading-title::after{
  content:""; display:block; width:28px; height:3px; border-radius:2px;
  background:#00A8BB; margin:12px auto 0; transition:width .35s cubic-bezier(.16,1,.3,1); }
.uip-who .uip-who-pillar:hover .elementor-heading-title::after{ width:48px; }
.uip-who .uip-who-pillar .elementor-widget-text-editor,
.uip-who .uip-who-pillar .elementor-widget-text-editor *{
  color:#5f6570 !important; font-size:14.5px !important; line-height:1.7 !important; }
.uip-who .uip-who-pillar img{
  height:150px !important; width:auto !important; object-fit:contain;
  transition:transform .45s cubic-bezier(.16,1,.3,1); }
.uip-who .uip-who-pillar:hover img{ transform:translateY(-6px); }
@media (prefers-reduced-motion: reduce){
  .uip-who .uip-who-pillar img, .uip-who .uip-who-pillar:hover img{ transition:none; transform:none; } }

/* [UIP-17b] Who We Are wrapped in one big rounded panel */
.uip-who{
  max-width:1240px !important; margin-left:auto !important; margin-right:auto !important;
  background:linear-gradient(180deg,#fbfdfe 0%,#f3f8fa 100%) !important;
  border:1px solid #e8edf0 !important; border-radius:28px !important;
  padding:64px 48px !important; box-shadow:0 10px 40px rgba(16,17,26,.04);
}
@media (max-width:1024px){ .uip-who{ width:auto !important; max-width:none !important; margin-left:16px !important; margin-right:16px !important; padding:44px 24px !important; } }
/* [UIP-17c] Who We Are: left-aligned variant */
.uip-who .elementor-heading-title,
.uip-who .elementor-widget-text-editor,
.uip-who .elementor-widget-text-editor *{ text-align:left !important; }
.uip-who .uip-who-pillar .elementor-heading-title::after{ margin:12px 0 0 !important; }
.uip-who .uip-who-pillar img{ margin-right:auto; display:block; }
.uip-who .uip-who-pillar .elementor-widget-image .elementor-widget-container{ text-align:left !important; }
/* [UIP-17d] Who We Are intro paragraph: fuller copy at readable size */
.uip-who .uip-who-sub,
.uip-who .uip-who-sub *{
  font-size:17px !important; line-height:1.75 !important; color:#454a54 !important; }
.uip-who .uip-who-sub{ max-width:820px; margin-bottom:14px; }

/* [UIP-16b] How-we-do-it heading block: left aligned, readable intro */
.uip-hwdi-head .elementor-heading-title,
.uip-hwdi-head .elementor-widget-text-editor,
.uip-hwdi-head .elementor-widget-text-editor *{ text-align:left !important; }
.uip-hwdi-head .uip-hwdi-sub,
.uip-hwdi-head .uip-hwdi-sub *{
  font-size:17px !important; line-height:1.75 !important; color:#454a54 !important; }
.uip-hwdi-head .uip-hwdi-sub{ max-width:820px; }

/* [UIP-15d] Our Services heading block: left aligned, readable intro */
.uip-svc-head .elementor-heading-title,
.uip-svc-head .elementor-widget-text-editor,
.uip-svc-head .elementor-widget-text-editor *{ text-align:left !important; }
.uip-svc-head .uip-svc-sub,
.uip-svc-head .uip-svc-sub *{
  font-size:17px !important; line-height:1.75 !important; color:#454a54 !important; }
.uip-svc-head .uip-svc-sub{ max-width:820px; }

/* [UIP-18] shared heading-block standard: left aligned + readable intro */
.uip-headblock .elementor-heading-title,
.uip-headblock .elementor-widget-text-editor,
.uip-headblock .elementor-widget-text-editor *{ text-align:left !important; }
.uip-headblock .uip-headblock-sub,
.uip-headblock .uip-headblock-sub *{
  font-size:17px !important; line-height:1.75 !important; color:#454a54 !important; }
.uip-headblock .uip-headblock-sub{ max-width:820px; }

/* [UIP-19] Our Projects cards: unified surface, tiles, chips, read-more */
.uip-proj .uip-proj-card{
  background:linear-gradient(180deg,#ffffff 0%,#f6fafb 100%) !important;
  border:1px solid #e8edf0 !important; border-radius:20px !important;
  padding:16px 16px 24px !important; display:flex; flex-direction:column;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), border-color .35s ease;
}
.uip-proj .uip-proj-card:hover{
  transform:translateY(-6px); border-color:rgba(0,168,187,.45) !important;
  box-shadow:0 18px 40px rgba(2,32,38,.08);
}
.uip-proj .uip-proj-card .elementor-widget-image{ border-radius:14px; overflow:hidden; }
.uip-proj .uip-proj-card .elementor-widget-image img{
  width:100% !important; height:210px !important; object-fit:cover;
  transition:transform .5s cubic-bezier(.16,1,.3,1); }
.uip-proj .uip-proj-card:hover .elementor-widget-image img{ transform:scale(1.05); }
.uip-proj .uip-proj-chip{
  display:inline-block; align-self:flex-start; margin:16px 10px 0;
  padding:4px 12px; border-radius:999px; font-size:12px; font-weight:600;
  color:#00808f; background:rgba(0,168,187,.12); letter-spacing:.3px; }
.uip-proj .uip-proj-card .elementor-heading-title{
  font-size:19px !important; font-weight:600 !important; color:#10111a !important;
  line-height:1.3 !important; min-height:1.35em; }
.uip-proj .uip-proj-card .elementor-widget-text-editor,
.uip-proj .uip-proj-card .elementor-widget-text-editor *{
  color:#5f6570 !important; font-size:14.5px !important; line-height:1.7 !important; }
.uip-proj .uip-proj-card .elementor-widget-text-editor{ min-height:6.2em; }
.uip-proj .uip-proj-card a{ color:#00A8BB !important; font-weight:600 !important; }
@media (prefers-reduced-motion: reduce){
  .uip-proj .uip-proj-card, .uip-proj .uip-proj-card img{ transition:none !important; transform:none !important; } }
.uip-proj .uip-proj-chip.uip-chip-ghost{ visibility:hidden; }
/* [UIP-19b] normalize internal card rhythm: flex gap, kill per-element margins */
.uip-proj .uip-proj-card{ gap:12px !important; }
.uip-proj .uip-proj-card > *{ margin-top:0 !important; margin-bottom:0 !important; }
.uip-proj .uip-proj-card .uip-proj-chip{ margin:6px 10px 0 !important; }
.uip-proj .uip-proj-card .elementor-widget-heading,
.uip-proj .uip-proj-card .elementor-widget-text-editor,
.uip-proj .uip-proj-card .elementor-widget-button{ padding:0 10px !important; }
.uip-proj .uip-proj-card .e-con.e-child{ margin:0 !important; padding:0 !important; }
.uip-proj .uip-proj-card .elementor-widget-image{ margin:0 !important; }
.uip-proj .uip-proj-card .elementor-widget-image .elementor-widget-container{ margin:0 !important; padding:0 !important; }
/* [UIP-19c] lock zones: image, 2-line title, button pinned to bottom */
.uip-proj .uip-proj-card > .e-con.e-child{ height:213px !important; min-height:213px !important; overflow:hidden; border-radius:14px; }
.uip-proj .uip-proj-card .elementor-widget-heading{ min-height:2.7em; }
.uip-proj .uip-proj-card .elementor-widget-text-editor{ min-height:0 !important; }
.uip-proj .uip-proj-card .elementor-widget-button{ margin-top:auto !important; }

/* [UIP-19d] Projects v2 — studio index list. Overrides the card look. */
.uip-proj .uip-proj-listwrap{ display:flex !important; flex-direction:column !important; gap:0 !important; }
.uip-proj .uip-proj-listwrap > *{ width:100% !important; max-width:100% !important; }
.uip-proj .uip-proj-card{
  display:grid !important; grid-template-columns:96px 1fr auto;
  grid-template-areas:"idx chip btn" "idx title btn" "idx desc btn";
  align-items:center; column-gap:28px; row-gap:4px;
  background:transparent !important; border:0 !important;
  border-bottom:1px solid #e5eaee !important; border-radius:0 !important;
  padding:30px 12px !important; box-shadow:none !important;
  transition:background .3s ease, padding-left .3s cubic-bezier(.16,1,.3,1);
}
.uip-proj .uip-proj-card:first-child{ border-top:1px solid #e5eaee !important; }
.uip-proj .uip-proj-card:hover{
  background:#f4f9fa !important; padding-left:22px !important;
  transform:none !important; box-shadow:none !important; border-color:#e5eaee !important; }
.uip-proj .uip-proj-card::before{
  content:attr(data-uip-idx); grid-area:idx;
  font-size:46px; font-weight:700; line-height:1; letter-spacing:1px;
  color:rgba(16,17,26,.14); transition:color .3s ease; }
.uip-proj .uip-proj-card:hover::before{ color:rgba(0,168,187,.45); }
.uip-proj .uip-proj-card > .e-con.e-child{ display:none !important; }   /* logo tiles gone */
.uip-proj .uip-proj-card .uip-proj-chip{ grid-area:chip; justify-self:start; margin:0 !important; }
.uip-proj .uip-proj-card .elementor-widget-heading{
  grid-area:title; min-height:0 !important; padding:0 !important; }
.uip-proj .uip-proj-card .elementor-heading-title{
  font-size:24px !important; min-height:0 !important; transition:color .25s ease; }
.uip-proj .uip-proj-card:hover .elementor-heading-title{ color:#00A8BB !important; }
.uip-proj .uip-proj-card .elementor-widget-text-editor{
  grid-area:desc; min-height:0 !important; padding:0 !important; max-width:680px; }
.uip-proj .uip-proj-card .elementor-widget-button{
  grid-area:btn; margin:0 !important; padding:0 !important; justify-self:end; }
@media (max-width:1024px){
  .uip-proj .uip-proj-card{ grid-template-columns:64px 1fr auto; }
  .uip-proj .uip-proj-card::before{ font-size:32px; }
  .uip-proj .uip-proj-card .elementor-heading-title{ font-size:19px !important; }
}

/* [UIP-20] client-logo band: gradient surface, uniform logos, comfort padding */
.uip-clientband{
  background:linear-gradient(135deg,#00b7cb 0%,#008fa0 100%) !important;
  padding-top:34px !important; padding-bottom:34px !important;
}
.uip-clientband img{
  height:34px !important; width:auto !important; max-width:none !important;
  object-fit:contain; opacity:.92; transition:opacity .25s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.uip-clientband .swiper-slide:hover img{ opacity:1; transform:translateY(-2px); }
.uip-clientband .swiper-slide{ display:flex; align-items:center; justify-content:center; }
/* [UIP-20b] client band: SLIM strip (previous version too thick) */
.uip-clientband{
  background:#00A8BB !important;
  padding-top:14px !important; padding-bottom:14px !important;
  min-height:0 !important;
}
.uip-clientband img{ height:26px !important; }
.uip-clientband .e-con-inner, .uip-clientband .elementor-widget,
.uip-clientband .elementor-widget-container{ margin:0 !important; padding:0 !important; min-height:0 !important; }
/* [UIP-20c] client band DROPPED per Hassan */
.uip-clientband{ display:none !important; }

/* [UIP-21] CONTACT US — big panel + form + team redesign */
.uip-contact-head{
  max-width:1240px !important; margin-left:auto !important; margin-right:auto !important;
  background:linear-gradient(180deg,#fbfdfe 0%,#f3f8fa 100%) !important;
  border:1px solid #e8edf0 !important; border-radius:28px !important;
  padding:64px 48px !important; box-shadow:0 10px 40px rgba(16,17,26,.04);
}
@media (max-width:1024px){ .uip-contact-head{ width:auto !important; max-width:none !important; margin-left:16px !important; margin-right:16px !important; padding:44px 22px !important; } }
/* form card: crisp white on the panel */
.uip-contact-head form{ }
.uip-contact-head .elementor-widget-form,
.uip-contact-head form{ }
/* inputs: filled fields, 48px, site focus standard */
.uip-contact-head .elementor-field-textual{
  background:#ffffff !important; border:1.5px solid #dfe6ea !important;
  border-radius:12px !important; height:48px !important; padding:0 16px !important;
  font-size:14.5px !important; color:#10111a !important; box-shadow:none !important;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.uip-contact-head textarea.elementor-field-textual{
  height:auto !important; min-height:120px !important; padding:13px 16px !important; resize:vertical;
}
.uip-contact-head .elementor-field-textual:focus{
  outline:none !important; border-color:#00A8BB !important;
  box-shadow:0 0 0 4px rgba(0,168,187,.14) !important;
}
.uip-contact-head .elementor-field-textual::placeholder{ color:#98a0aa; }
.uip-contact-head .elementor-field-group{ margin-bottom:14px !important; }
/* form heading: calmer scale */
.uip-contact-head form ~ *, .uip-contact-head .elementor-widget-heading .elementor-heading-title{ }
/* submit: teal pill, consistent hover */
.uip-contact-head button.elementor-button, .uip-contact-head .e-form__buttons .elementor-button{
  background:#00A8BB !important; color:#fff !important; height:48px !important;
  padding:0 28px !important; font-weight:600 !important; border:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  transition:background .25s ease, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
.uip-contact-head button.elementor-button:hover{
  background:#0092a3 !important; transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,168,187,.35);
}
/* team rows */
.uip-contact-head .uip-team-row{
  border-radius:16px; padding:10px 12px !important;
  transition:background .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.uip-contact-head .uip-team-row:hover{ background:#ffffff; transform:translateX(4px); }
.uip-contact-head .uip-team-avatar{
  border:3px solid rgba(0,168,187,.35) !important; border-radius:50% !important;
  padding:2px; background:#fff;
}
.uip-contact-head .uip-team-row .elementor-heading-title{
  font-size:17px !important; font-weight:600 !important; color:#10111a !important; }
.uip-contact-head .uip-team-row .elementor-widget-text-editor,
.uip-contact-head .uip-team-row .elementor-widget-text-editor *{
  font-size:13.5px !important; color:#6b7078 !important; }
/* [UIP-21b] contact panel: compress stacked padding */
.uip-contact-head{ padding:44px 44px 40px !important; }
.uip-contact-head > .e-con-inner > .e-con{ padding-top:0 !important; padding-bottom:0 !important; margin-top:0 !important; margin-bottom:0 !important; }
.uip-contact-head .uip-headblock-sub{ margin-bottom:6px !important; }


/* [UIP-24] process v2 — editorial split: track selector + vertical timeline */
.elementor-element-33739cc{ padding-top:40px !important; padding-bottom:80px !important; }
.elementor-element-33739cc .elementor-element-16ad0c8{ display:none !important; } /* original accordion hidden; content re-rendered below */
.uip-proc2{ max-width:1240px; margin:0 auto; padding:0 10px;
  display:grid; grid-template-columns:minmax(300px,400px) 1fr; gap:64px; align-items:start; }
.uip-proc2-left{ position:sticky; top:120px; }
.uip-proc2-title{ font-family:"Montserrat",Sans-serif; font-size:43px; font-weight:600;
  color:#10111a; line-height:1.15; margin:0 0 16px; text-align:left; }
.uip-proc2-sub{ font-size:16.5px; line-height:1.75; color:#454a54; margin:0 0 36px; text-align:left; }
.uip-proc2-tracks{ display:flex; flex-direction:column; }
.uip-proc2 button.uip-track{ display:flex !important; align-items:baseline; gap:14px; width:100%;
  background:none !important; border:0 !important; border-top:1px solid #e5eaee !important;
  border-radius:0 !important; box-shadow:none !important; cursor:pointer;
  padding:18px 2px !important; margin:0 !important; text-align:left !important; justify-content:flex-start !important;
  font-family:"Montserrat",Sans-serif !important; font-size:18px !important; font-weight:600 !important;
  color:#9aa1ab !important; line-height:1.3 !important; text-transform:none !important; letter-spacing:0 !important;
  transition:color .3s ease, padding-left .3s cubic-bezier(.16,1,.3,1) !important; }
.uip-proc2 button.uip-track:last-child{ border-bottom:1px solid #e5eaee !important; }
.uip-proc2 button.uip-track:hover{ background:none !important; color:#10111a !important; transform:none !important; }
.uip-track-num{ font-size:12px !important; font-weight:700; letter-spacing:.08em !important; color:#b6bdc6 !important;
  transition:color .3s ease; }
.uip-proc2 button.uip-track.is-active{ color:#10111a !important; padding-left:10px !important; }
.uip-proc2 button.uip-track.is-active .uip-track-num{ color:#00A8BB !important; }
.uip-proc2-lead{ font-size:17px; line-height:1.8; color:#454a54; margin:6px 0 38px; max-width:720px; }
.uip-proc2-steps{ list-style:none; margin:0; padding:0; }
.uip-proc2-steps li{ position:relative; display:grid; grid-template-columns:46px 1fr;
  gap:0 22px; padding-bottom:34px; }
.uip-proc2-steps li::before{ content:""; position:absolute; left:15px; top:36px; bottom:2px;
  width:1px; background:#e5eaee; }
.uip-proc2-steps li:last-child::before{ display:none; }
.uip-step-n{ width:31px; height:31px; border-radius:50%; border:1px solid rgba(0,168,187,.45);
  background:#fff; color:#00A8BB; font-family:"Montserrat",Sans-serif; font-size:12.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
.uip-proc2-steps h3{ font-family:"Montserrat",Sans-serif; font-size:17px; font-weight:700;
  color:#10111a; margin:4px 0 7px; line-height:1.35; }
.uip-proc2-steps p{ font-size:15px; line-height:1.7; color:#5f6570; margin:0; max-width:680px; }
/* track-switch entrance */
.uip-proc2-right .uip-anim{ opacity:0; transform:translateY(14px);
  animation:uipStepIn .55s cubic-bezier(.16,1,.3,1) forwards; animation-delay:var(--uip-d,0s); }
@keyframes uipStepIn{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .uip-proc2-right .uip-anim{ animation:none; opacity:1; transform:none; } }
@media (max-width:1024px){
  .uip-proc2{ grid-template-columns:1fr; gap:36px; }
  .uip-proc2-left{ position:static; }
  .uip-proc2-title{ font-size:34px; }
}

/* [UIP-25] FAQ v2 — editorial split: sticky intro left, hairline list right */
.elementor-element-f10f5ed > .e-con-inner{
  display:grid !important; grid-template-columns:minmax(300px,400px) 1fr;
  gap:64px; align-items:start; }
.elementor-element-f10f5ed .elementor-element-40cd20c{ position:sticky; top:120px; }
.uip-faq-cta{ display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  height:46px; padding:0 26px; border:1px solid #cfd6da; border-radius:999px;
  font-family:"Montserrat",Sans-serif; font-size:14.5px; font-weight:600; color:#10111a;
  text-decoration:none; background:#fff;
  transition:border-color .3s ease, color .3s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.uip-faq-cta:hover{ border-color:#00A8BB; color:#00A8BB; transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(2,32,38,.07); }
/* strip any prior card look; pure typographic rows */
.elementor-element-f10f5ed .e-n-accordion{ display:block; }
.elementor-element-f10f5ed .e-n-accordion-item{
  background:none !important; border:0 !important; border-top:1px solid #e5eaee !important;
  border-radius:0 !important; box-shadow:none !important; transform:none !important; overflow:hidden; }
.elementor-element-f10f5ed .e-n-accordion-item:last-of-type{ border-bottom:1px solid #e5eaee !important; }
.elementor-element-f10f5ed summary.e-n-accordion-item-title{
  display:flex; align-items:center; gap:20px;
  padding:24px 2px !important; cursor:pointer; list-style:none; border:0 !important; }
.elementor-element-f10f5ed .e-n-accordion-item-title-text{
  font-size:18px !important; font-weight:600 !important; color:#10111a !important;
  line-height:1.45; transition:color .25s ease; }
.elementor-element-f10f5ed summary:hover .e-n-accordion-item-title-text{ color:#00A8BB !important; }
/* thin plus -> x */
.elementor-element-f10f5ed summary.e-n-accordion-item-title .e-n-accordion-item-title-icon,
.elementor-element-f10f5ed .e-n-accordion-item-title-icon,
.elementor-element-f10f5ed .e-n-accordion-item-title-icon .e-opened,
.elementor-element-f10f5ed .e-n-accordion-item-title-icon .e-closed{ display:none !important; }
.elementor-element-f10f5ed summary.e-n-accordion-item-title::after{
  content:"+"; margin-left:auto; flex:0 0 auto;
  font-family:"Open Sans",Sans-serif; font-size:26px; font-weight:300; line-height:1; color:#9aa1ab;
  transition:transform .4s cubic-bezier(.16,1,.3,1), color .3s ease; }
.elementor-element-f10f5ed .e-n-accordion-item[open] > summary::after{
  transform:rotate(45deg); color:#00A8BB; }
.elementor-element-f10f5ed .e-n-accordion-item > .e-con{
  border:0 !important; margin:0 !important; padding:0 0 26px !important; }
.elementor-element-f10f5ed .e-n-accordion-item .e-con-inner{ padding:0 !important; }
.elementor-element-f10f5ed .e-n-accordion-item p,
.elementor-element-f10f5ed .e-n-accordion-item li{
  font-size:15.5px !important; line-height:1.75 !important; color:#454a54 !important; }
.elementor-element-f10f5ed .e-n-accordion-item .e-con p{ max-width:720px; }
@media (max-width:1024px){
  .elementor-element-f10f5ed > .e-con-inner{ grid-template-columns:1fr; gap:30px; }
  .elementor-element-f10f5ed .elementor-element-40cd20c{ position:static; }
  .elementor-element-f10f5ed .e-n-accordion-item-title-text{ font-size:16.5px !important; }
}

/* [UIP-26] FOOTER redesign — dark ink, editorial (matches navbar/dropdown family) */
.uip-footer{ background:#0b0e13 !important;
  /* some pages (e.g. about) carry per-page kit rules boxing the footer — force full-bleed */
  max-width:none !important; width:100% !important; border-radius:0 !important;
  margin-left:0 !important; margin-right:0 !important; }
.elementor-element-ee4d9b5.uip-footer{
  border-top:1px solid rgba(255,255,255,.08) !important; margin-top:0 !important; }
/* default text + links */
.uip-footer .elementor-widget-text-editor,
.uip-footer .elementor-widget-text-editor *:not(a){ color:#9aa1ab !important; font-size:14px !important; line-height:1.7 !important; }
.uip-footer a{ color:#c9cfd8 !important; font-size:14px; text-decoration:none;
  transition:color .25s ease, transform .25s ease; }
.uip-footer a:hover{ color:#ffffff !important; }
.uip-footer .elementor-icon-list-item a{ display:inline-block; }
.uip-footer .elementor-icon-list-item a:hover{ transform:translateX(3px); }
.uip-footer .elementor-icon-list-item{ padding:4px 0; }
/* big block headings: We are located in / Contact Us */
.uip-footer .elementor-widget-heading .elementor-heading-title{ color:#ffffff !important; }
.elementor-element-e831c83 .elementor-heading-title,
.elementor-element-cf7bd11 .elementor-heading-title,
.elementor-element-6f6fa7f .elementor-heading-title{
  font-size:18px !important; font-weight:600 !important; letter-spacing:.01em; }
/* country rows */
.elementor-element-f15baa3 .elementor-heading-title,
.elementor-element-ee24e03 .elementor-heading-title{ font-size:16px !important; font-weight:600 !important; }
/* column heads (tagged by JS) */
.uip-footer .uip-foot-colhead, .uip-footer .uip-foot-colhead *{
  color:#7f8791 !important; font-family:"Montserrat",Sans-serif !important;
  font-size:12.5px !important; font-weight:700 !important;
  letter-spacing:.14em !important; text-transform:uppercase !important; }
.uip-footer .uip-foot-colhead{ margin-bottom:10px !important; }
/* contact pills: email = white pill, phone = ghost */
.uip-footer .elementor-element a.elementor-button.elementor-button{
  background:#ffffff !important; color:#10111a !important; border:1px solid #ffffff !important;
  height:44px !important; padding:0 22px !important; border-radius:999px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  font-weight:600 !important; font-size:14px !important;
  transition:background .25s ease, color .25s ease, border-color .25s ease,
    transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease !important; }
.uip-footer .elementor-element a.elementor-button.elementor-button *{ color:inherit !important; }
.uip-footer .elementor-element a.elementor-button.elementor-button:hover{
  background:#00A8BB !important; border-color:#00A8BB !important; color:#ffffff !important;
  transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,168,187,.30); }
/* second pill (phone) = ghost */
.uip-footer .elementor-widget-button + .elementor-widget-button a.elementor-button.elementor-button,
.uip-footer .e-con .elementor-widget-button:nth-of-type(2) a.elementor-button.elementor-button{
  background:transparent !important; color:#ffffff !important; border-color:rgba(255,255,255,.25) !important; }
.uip-footer .elementor-widget-button + .elementor-widget-button a.elementor-button.elementor-button:hover{
  background:transparent !important; color:#4fd9e8 !important; border-color:#4fd9e8 !important;
  box-shadow:none; }
/* SEO location tabs — quiet chips over hairline */
.uip-footer .elementor-widget-n-tabs{ border-top:1px solid rgba(255,255,255,.08); padding-top:26px; margin-top:10px; }
.uip-footer .e-n-tab-title{
  background:none !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:999px !important;
  padding:8px 18px !important; cursor:pointer;
  transition:color .25s ease, border-color .25s ease; }
.uip-footer .e-n-tab-title, .uip-footer .e-n-tab-title *{
  color:#8b929c !important; font-size:13px !important; font-weight:600 !important; }
.uip-footer .e-n-tab-title:hover, .uip-footer .e-n-tab-title:hover *{ color:#ffffff !important; }
.uip-footer .e-n-tab-title[aria-selected="true"]{ border-color:rgba(0,168,187,.6) !important; }
.uip-footer .e-n-tab-title[aria-selected="true"] *{ color:#4fd9e8 !important; }
.uip-footer .e-n-tabs-content a{ font-size:13px !important; color:#7f8791 !important; }
.uip-footer .e-n-tabs-content a:hover{ color:#c9cfd8 !important; }
/* bottom bar */
.elementor-element-ee4d9b5 .elementor-icon-list-item a{ font-size:13.5px !important; color:#9aa1ab !important; }
.elementor-element-ee4d9b5 .elementor-icon-list-item a:hover{ color:#ffffff !important; }
.elementor-element-ee4d9b5 .elementor-widget-text-editor,
.elementor-element-ee4d9b5 .elementor-widget-text-editor *{ color:#7f8791 !important; font-size:13px !important; }
/* social icons: ghost circles */
.uip-footer .elementor-social-icon{
  background:transparent !important; border:1px solid rgba(255,255,255,.16) !important;
  border-radius:50% !important; width:38px !important; height:38px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  transition:border-color .25s ease, transform .3s cubic-bezier(.16,1,.3,1), background .25s ease; }
.uip-footer .elementor-social-icon i,
.uip-footer .elementor-social-icon svg{ color:#c9cfd8 !important; fill:#c9cfd8 !important; font-size:15px !important; }
.uip-footer .elementor-social-icon:hover{
  border-color:#00A8BB !important; background:rgba(0,168,187,.12) !important; transform:translateY(-3px); }
.uip-footer .elementor-social-icon:hover i,
.uip-footer .elementor-social-icon:hover svg{ color:#ffffff !important; fill:#ffffff !important; }
/* rhythm */
.elementor-element-3209b40.uip-footer{ padding-top:72px !important; padding-bottom:40px !important; }
@media (max-width:767px){
  .uip-footer .elementor-element a.elementor-button.elementor-button{
    height:auto !important; min-height:44px !important; padding:10px 20px !important;
    white-space:normal !important; line-height:1.3 !important; }
}
/* [UIP-26b] SEO location tabs have EMPTY panels in the export — dead UI, hide (revert: delete this rule) */
.uip-footer .elementor-widget-n-tabs{ display:none !important; }

/* [UIP-27] hero clearance below fixed navbar — tune the one value.
   Hero is min-height:600px with CENTERED content (Elementor), so padding alone
   gets re-centered away; grow min-height by the same amount for a 1:1 shift. */
.uip-hero{ padding-top:var(--uip-hero-push, 96px) !important;
  min-height:calc(600px + var(--uip-hero-push, 96px)) !important; }

/* [UIP-28] generic accordion standard (tagged .uip-acc by JS) — mirrors homepage FAQ */
.uip-acc .e-n-accordion{ display:block; }
.uip-acc .e-n-accordion-item{
  background:none !important; border:0 !important; border-top:1px solid #e5eaee !important;
  border-radius:0 !important; box-shadow:none !important; overflow:hidden; }
.uip-acc .e-n-accordion-item:last-of-type{ border-bottom:1px solid #e5eaee !important; }
.uip-acc summary.e-n-accordion-item-title{
  display:flex; align-items:center; gap:16px;
  padding:22px 2px !important; cursor:pointer; list-style:none; border:0 !important; }
.uip-acc .e-n-accordion-item-title-text{
  font-size:17px !important; font-weight:600 !important; color:#10111a !important;
  line-height:1.45; transition:color .25s ease; }
.uip-acc summary:hover .e-n-accordion-item-title-text{ color:#00A8BB !important; }
.uip-acc summary.e-n-accordion-item-title::after{
  content:"+"; margin-left:auto; flex:0 0 auto;
  font-family:"Open Sans",Sans-serif; font-size:24px; font-weight:300; line-height:1; color:#9aa1ab;
  transition:transform .4s cubic-bezier(.16,1,.3,1), color .3s ease; }
.uip-acc .e-n-accordion-item[open] > summary::after{ transform:rotate(45deg); color:#00A8BB; }
.uip-acc .e-n-accordion-item > .e-con{
  border:0 !important; margin:0 !important; padding:0 0 22px !important; }
.uip-acc .e-n-accordion-item .e-con-inner{ padding:0 !important; }
.uip-acc .e-n-accordion-item p, .uip-acc .e-n-accordion-item li{
  font-size:15.5px !important; line-height:1.75 !important; color:#454a54 !important; }

/* [UIP-29] global guard: no horizontal scroll from pre-init swipers/marquees */
html, body{ overflow-x:clip; }

/* [UIP-12c] header template 1494 (careers/blog posts): black logo variant -> white on dark pill */
.elementor-element-205ee08 img{ filter:brightness(0) invert(1); }

/* [UIP-31] careers: hide "Roles We're Currently Looking to Fill" — all 8 job pages dropped at launch.
   Restore by deleting this rule when roles reopen. */
.elementor-element-3ca59603{ display:none !important; }



/* [UIP-32] about hero v3 — mission statement on teal */
.uip-abhero{ padding:150px 0 84px !important; min-height:440px; }
.uip-abhero .uip-abhero-old{ display:none !important; }
.uip-abhero-stack{ max-width:1240px; margin:0 auto; padding:0 10px; }
.uip-abhero-eyebrow{ font-family:"Montserrat",Sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.18em; color:rgba(255,255,255,.75); margin-bottom:18px; }
.uip-abhero-title{ font-family:"Montserrat",Sans-serif; font-size:48px; font-weight:600;
  color:#ffffff; line-height:1.14; margin:0 0 22px; }
.uip-abhero-title span{ color:#0b3b41; }
.uip-abhero-sub{ font-size:17px; line-height:1.8; color:rgba(255,255,255,.92); max-width:620px; margin:0; }
@media (max-width:767px){
  .uip-abhero{ padding:120px 0 60px !important; min-height:0; }
  .uip-abhero-stack{ padding:0 18px; }
  .uip-abhero-title{ font-size:32px; }
}

/* [UIP-32b] stat bar — credibility strip directly under the hero */
.uip-statbar{ background:#fff; border-bottom:1px solid #eef2f4; }
.uip-statbar-grid{ max-width:1240px; margin:0 auto; padding:48px 10px;
  display:grid; grid-template-columns:repeat(4,1fr); }
.uip-statcell{ text-align:center; padding:6px 18px; border-left:1px solid #e5eaee; }
.uip-statcell:first-child{ border-left:0; }
.uip-statnum{ font-family:"Montserrat",Sans-serif; font-size:42px; font-weight:700;
  color:#10111a; line-height:1.1; }
.uip-statnum::after{ content:""; }
.uip-statlbl{ font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#8b929c; margin-top:8px; }
@media (max-width:767px){
  .uip-statbar-grid{ grid-template-columns:1fr 1fr; gap:22px 0; padding:30px 10px; }
  .uip-statcell:nth-child(3){ border-left:0; }
  .uip-statnum{ font-size:32px; }
}

/* [UIP-33] OUR STORY — open editorial split */
.uip-abit2{ padding:90px 0 80px !important; }
.uip-abit2 .uip-abit2-old{ display:none !important; }
.uip-abit2-grid{ max-width:1240px; margin:0 auto; padding:0 10px;
  display:grid; grid-template-columns:minmax(280px,400px) 1fr; gap:8px 80px; align-items:start; }
.uip-abit2-left{ position:sticky; top:120px; }
.uip-abit2-left .elementor-widget{ width:auto !important; max-width:none !important; }
.uip-abit2-left .elementor-element-9618577 .elementor-heading-title{
  font-family:"Montserrat",Sans-serif !important; font-size:13px !important; font-weight:700 !important;
  letter-spacing:.18em !important; text-transform:uppercase; color:#00A8BB !important;
  text-align:left !important; margin:0 0 12px; }
.uip-abit2-left .elementor-element-2db2260 .elementor-heading-title{
  font-family:"Montserrat",Sans-serif !important; font-size:32px !important; font-weight:600 !important;
  color:#10111a !important; line-height:1.25 !important; text-align:left !important; }
.uip-abit2-left .elementor-widget-button{ margin-top:26px; }
.uip-abit2-left a.elementor-button{
  background:transparent !important; color:#10111a !important; border:1px solid #cfd6da !important;
  height:46px !important; padding:0 26px !important; font-weight:600 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  transition:border-color .3s ease, color .3s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease !important; }
.uip-abit2-left a.elementor-button:hover{
  border-color:#00A8BB !important; color:#00A8BB !important; transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(2,32,38,.07); }
.uip-abit2-right .elementor-widget{ width:100% !important; max-width:none !important; }
.uip-abit2-right p{ font-size:16.5px !important; line-height:1.85 !important; color:#454a54 !important;
  text-align:left !important; margin:0 0 18px !important; max-width:720px; }
.uip-abit2-right p:first-of-type{ font-size:19px !important; line-height:1.7 !important;
  color:#10111a !important; font-weight:500; }
@media (max-width:1024px){
  .uip-abit2-grid{ grid-template-columns:1fr; gap:26px; padding:0 18px; }
  .uip-abit2-left{ position:static; }
}

/* [UIP-34] about teal logo band — dropped */
.elementor-element-2ec3253{ display:none !important; }

/* [UIP-36] closing CTA — plain centered text, no card */
.uip-nextch2{ padding-top:70px !important; padding-bottom:110px !important; background:none !important; }
.uip-nextch2 > .e-con-inner{
  max-width:760px; margin:0 auto; border-radius:0; background:none !important;
  display:flex !important; flex-direction:column !important; --flex-direction:column;
  align-items:stretch !important; padding:0 18px !important; gap:0 !important; }
.uip-nextch2 .uip-nextch2-deadstats{ display:none !important; }
.uip-nextch2 .uip-nextch2-content{
  width:100% !important; max-width:720px !important; margin:0 auto !important;
  min-height:0 !important; align-items:center !important; text-align:center; border:0 !important; }
.uip-nextch2 .uip-nextch2-content .elementor-widget{ width:auto !important; max-width:none !important; }
.uip-nextch2 .uip-nextch2-content .elementor-heading-title{
  color:#10111a !important; font-family:"Montserrat",Sans-serif !important;
  font-size:36px !important; font-weight:600 !important; line-height:1.25 !important;
  text-align:center !important; }
.uip-nextch2 .uip-nextch2-content .elementor-widget-text-editor,
.uip-nextch2 .uip-nextch2-content .elementor-widget-text-editor *{
  color:#454a54 !important; font-size:16.5px !important; line-height:1.8 !important;
  text-align:center !important; }
.uip-nextch2 .elementor-element-db8fb30{
  display:flex !important; gap:14px; width:auto !important; justify-content:center;
  margin-top:28px !important; }
.uip-nextch2 .elementor-element-db8fb30 .elementor-widget{ width:auto !important; }
.uip-nextch2 .elementor-element a.elementor-button.elementor-button{
  border-radius:999px !important; height:46px !important; padding:0 26px !important;
  font-weight:600 !important; display:inline-flex !important; align-items:center !important;
  justify-content:center !important;
  transition:background .25s ease, color .25s ease, border-color .25s ease,
    transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease !important; }
.uip-nextch2 .elementor-widget-button:first-of-type a.elementor-button.elementor-button{
  background:#00A8BB !important; color:#ffffff !important; border:1px solid #00A8BB !important; }
.uip-nextch2 .elementor-widget-button:first-of-type a.elementor-button.elementor-button:hover{
  background:#0092a3 !important; border-color:#0092a3 !important; color:#fff !important;
  transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,168,187,.30); }
.uip-nextch2 .elementor-widget-button + .elementor-widget-button a.elementor-button.elementor-button{
  background:transparent !important; color:#10111a !important; border:1px solid #cfd6da !important; }
.uip-nextch2 .elementor-widget-button + .elementor-widget-button a.elementor-button.elementor-button:hover{
  color:#00A8BB !important; border-color:#00A8BB !important; transform:translateY(-2px); }
@media (max-width:1024px){
  .uip-nextch2{ padding-top:50px !important; padding-bottom:80px !important; }
  .uip-nextch2 .uip-nextch2-content .elementor-heading-title{ font-size:28px !important; }
}

/* [UIP-37b] contact page rhythm */
.elementor-element-d19b5ad.uip-contact-head{ margin-top:70px !important; margin-bottom:10px !important; }
.elementor-element-f65bd8b{ padding-top:40px !important; padding-bottom:96px !important; }
/* [UIP-39b] contact FAQ headblock: force left-align (per-page center rules win otherwise) */
.elementor-element-f65bd8b .elementor-widget-heading .elementor-heading-title,
.elementor-element-f65bd8b .uip-headblock-sub,
.elementor-element-f65bd8b .uip-headblock-sub *{ text-align:left !important; }
.elementor-element-f65bd8b .uip-headblock-sub{ margin-left:0 !important; max-width:820px; }
/* [UIP-39c] contact FAQ: widgets are narrow centered boxes — stretch the column */
.elementor-element-f65bd8b .e-con{ align-items:flex-start !important; }
.elementor-element-f65bd8b .elementor-widget-heading,
.elementor-element-f65bd8b .elementor-widget-text-editor,
.elementor-element-f65bd8b .elementor-widget-n-accordion{
  width:100% !important; max-width:none !important; }

/* [UIP-41] projects features — white cards, teal icon chips */
.uip-feat{ padding-top:80px !important; padding-bottom:70px !important; }
.uip-feat .elementor-widget-heading .elementor-heading-title{
  font-family:"Montserrat",Sans-serif !important; font-size:38px !important;
  font-weight:600 !important; color:#10111a !important; text-align:left !important; }
.uip-feat .uip-feat-card{
  background:linear-gradient(180deg,#ffffff,#f6fafb) !important;
  border:1px solid #e8edf0 !important; border-radius:20px !important;
  padding:30px 28px !important; width:100% !important; min-height:0 !important;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .3s ease; }
.uip-feat .uip-feat-card:hover{
  transform:translateY(-5px); border-color:rgba(0,168,187,.4) !important;
  box-shadow:0 18px 40px rgba(2,32,38,.08); }
.uip-feat .uip-feat-card .elementor-icon{
  background:rgba(0,168,187,.10) !important; border-radius:14px !important;
  padding:13px !important; display:inline-flex !important; }
.uip-feat .uip-feat-card .elementor-icon svg{ fill:#00A8BB !important; width:24px; height:24px; }
.uip-feat .uip-feat-card .elementor-icon i{ color:#00A8BB !important; }
.uip-feat .uip-feat-card .elementor-heading-title{
  font-size:17.5px !important; font-weight:700 !important; color:#10111a !important; }
.uip-feat .uip-feat-card p{
  font-size:14.5px !important; line-height:1.7 !important; color:#5f6570 !important; }

/* [UIP-42] projects studio index list (mirrors homepage language) */
.elementor-element-b19e3eb{ padding-top:20px !important; padding-bottom:60px !important; }
.uip-proj2-list{ max-width:1240px; margin:26px auto 0; padding:0 10px; }
.uip-proj2-row{ display:grid; grid-template-columns:96px 1fr; gap:0 22px;
  padding:30px 12px; border-top:1px solid #e5eaee;
  transition:background .3s ease, padding-left .3s cubic-bezier(.16,1,.3,1); border-radius:14px; }
.uip-proj2-row:last-child{ border-bottom:1px solid #e5eaee; }
.uip-proj2-row:hover{ background:#f4f9fa; padding-left:22px; }
.uip-proj2-idx{ font-family:"Montserrat",Sans-serif; font-size:30px; font-weight:700; color:#d3dbe0;
  line-height:1; padding-top:4px; transition:color .3s ease; }
.uip-proj2-row:hover .uip-proj2-idx{ color:#00A8BB; }
.uip-proj2-chip{ display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#00A8BB; background:rgba(0,168,187,.10);
  border-radius:999px; padding:5px 12px; margin-bottom:10px; }
.uip-proj2-main h3{ font-family:"Montserrat",Sans-serif; font-size:22px; font-weight:600;
  color:#10111a; margin:0 0 8px; transition:color .3s ease; }
.uip-proj2-row:hover .uip-proj2-main h3{ color:#00A8BB; }
.uip-proj2-main p{ font-size:15px; line-height:1.75; color:#5f6570; margin:0; max-width:820px; }
@media (max-width:767px){
  .uip-proj2-row{ grid-template-columns:52px 1fr; padding:22px 6px; }
  .uip-proj2-idx{ font-size:22px; }
}

/* projects page rhythm + headblock left-align guards */
.elementor-element-ba6507b .e-con{ align-items:flex-start !important; }
.elementor-element-b19e3eb .elementor-widget-heading .elementor-heading-title,
.elementor-element-b19e3eb .uip-headblock-sub, .elementor-element-b19e3eb .uip-headblock-sub *{
  text-align:left !important; }
.elementor-element-b19e3eb .elementor-widget-heading,
.elementor-element-b19e3eb .elementor-widget-text-editor{ width:100% !important; max-width:none !important; }
.elementor-element-b19e3eb .e-con{ align-items:flex-start !important; }
.elementor-element-34141d2.uip-contact-head{ margin-top:40px !important; margin-bottom:80px !important; }

/* [UIP-44] CAREERS page standardization */
.uip-carsec > .e-con-inner > .e-con .elementor-widget-heading .elementor-heading-title,
.uip-carsec .elementor-widget-heading .elementor-heading-title{
  font-family:"Montserrat",Sans-serif !important; color:#10111a !important; }
.uip-carsec h2.elementor-heading-title{ font-size:38px !important; font-weight:600 !important; }
/* culture cards */
.uip-cult .uip-cult-card{
  background:linear-gradient(180deg,#ffffff,#f6fafb) !important;
  border:1px solid #e8edf0 !important; border-radius:20px !important;
  padding:28px 26px !important; min-height:0 !important;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .3s ease; }
.uip-cult .uip-cult-card:hover{
  transform:translateY(-5px); border-color:rgba(0,168,187,.4) !important;
  box-shadow:0 18px 40px rgba(2,32,38,.08); }
.uip-cult .uip-cult-card .elementor-heading-title{
  font-size:17.5px !important; font-weight:700 !important; }
.uip-cult .uip-cult-card p, .uip-cult .uip-cult-card .elementor-widget-text-editor *{
  font-size:14.5px !important; line-height:1.7 !important; color:#5f6570 !important; }
/* benefits chips */
.uip-ben{ background:linear-gradient(180deg,#ffffff,#f6fafb) !important;
  border:1px solid #e8edf0 !important; border-radius:16px !important;
  padding:16px 18px !important;
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .35s ease; }
.uip-ben:hover{ transform:translateY(-3px); border-color:rgba(0,168,187,.4) !important;
  box-shadow:0 12px 28px rgba(2,32,38,.07); }
.uip-ben .elementor-icon-box-title, .uip-ben .elementor-icon-box-title *{
  font-size:14.5px !important; font-weight:600 !important; color:#10111a !important; }
.uip-ben .elementor-icon svg{ fill:#00A8BB !important; }
.uip-ben .elementor-icon i{ color:#00A8BB !important; }
.uip-ben .elementor-widget-container{ background:none !important; border:0 !important; }
/* testimonials quote grid */
.uip-quote-grid{ max-width:1240px; margin:30px auto 0; padding:0 10px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.uip-quote-card{ background:linear-gradient(180deg,#ffffff,#f6fafb);
  border:1px solid #e8edf0; border-radius:20px; padding:30px 28px;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .3s ease; }
.uip-quote-card:hover{ transform:translateY(-5px); border-color:rgba(0,168,187,.4);
  box-shadow:0 18px 40px rgba(2,32,38,.08); }
.uip-quote-mark{ font-family:"Montserrat",Sans-serif; font-size:44px; font-weight:700;
  color:#00A8BB; line-height:.6; margin-bottom:14px; }
.uip-quote-card p{ font-size:15px; line-height:1.75; color:#454a54; margin:0 0 16px; }
.uip-quote-name{ font-family:"Montserrat",Sans-serif; font-size:13.5px; font-weight:700; color:#10111a; }
@media (max-width:1024px){ .uip-quote-grid{ grid-template-columns:1fr; } }
/* stories: teal band -> white, cards readable */
.uip-stories{ background:#ffffff !important; }
.uip-stories .e-loop-item{ background-color:#ffffff !important; border:1px solid #e8edf0 !important;
  border-radius:20px !important; overflow:hidden;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; }
.uip-stories .e-loop-item:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(2,32,38,.08); }
.uip-stories .e-loop-item h1, .uip-stories .e-loop-item h2, .uip-stories .e-loop-item h3,
.uip-stories .e-loop-item h4, .uip-stories .e-loop-item h5,
.uip-stories .e-loop-item .elementor-heading-title{
  color:#10111a !important; font-size:17px !important; font-weight:700 !important; }
.uip-stories .e-loop-item p, .uip-stories .e-loop-item .elementor-widget-text-editor *{
  color:#5f6570 !important; font-size:14px !important; line-height:1.65 !important; }
.uip-stories .e-loop-item .elementor-icon-list-text{ color:#8b929c !important; font-size:12.5px !important; }

/* [UIP-44i] careers socials: system link styling */
.elementor-element-289ba33d .elementor-icon-list-text{ color:#10111a !important; font-weight:600; }
.elementor-element-289ba33d .elementor-icon-list-item a:hover .elementor-icon-list-text{ color:#00A8BB !important; }
.elementor-element-289ba33d .elementor-icon-list-icon i,
.elementor-element-289ba33d .elementor-icon-list-icon svg{ color:#00A8BB !important; fill:#00A8BB !important; }
/* [UIP-44j] story cards: Elementor entrance animation never fires inside loop items -> content stuck invisible */
.uip-stories .e-loop-item .e-con, .uip-stories .e-loop-item .elementor-invisible{
  opacity:1 !important; animation:none !important; transform:none !important; }


/* [UIP-46] partners-program: heading rhythm on the long content section */
.uip-pp .uip-pp-major .elementor-heading-title{
  font-family:"Montserrat",Sans-serif !important; font-size:34px !important; font-weight:600 !important;
  color:#10111a !important; text-align:left !important; }
.uip-pp .uip-pp-major{ margin-top:20px !important; margin-bottom:6px !important; }
.uip-pp > .e-con-inner{ padding-top:24px !important; }
.uip-pp .elementor-widget-text-editor, .uip-pp .elementor-widget-text-editor *{ text-align:left !important; }
.uip-pp .elementor-widget-text-editor p{ font-size:16px !important; line-height:1.75 !important; color:#454a54 !important; }
.uip-pp .elementor-widget-text-editor li{ font-size:16px !important; line-height:1.7 !important; color:#454a54 !important; }

/* [UIP-47] hub-tree hero CTA button (white pill on teal) */
.uip-abhero-cta{ display:inline-flex; align-items:center; margin-top:28px; height:48px; padding:0 30px;
  background:#ffffff; color:#10111a; border-radius:999px; font-family:"Montserrat",Sans-serif;
  font-weight:600; font-size:14.5px; text-decoration:none;
  transition:background .25s ease, color .25s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.uip-abhero-cta:hover{ background:#00A8BB; color:#ffffff; transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(0,168,187,.32); }

/* [UIP-48] legal pages: readable document typography */
.uip-legal{ padding-top:64px !important; padding-bottom:88px !important; }
.uip-legal > .e-con-inner{ max-width:820px !important; }
.uip-legal .elementor-widget-text-editor, .uip-legal .elementor-widget-text-editor p,
.uip-legal .elementor-widget-text-editor li, .uip-legal .elementor-widget-text-editor span{
  font-size:15.5px !important; line-height:1.85 !important; color:#454a54 !important; text-align:left !important; }
.uip-legal .elementor-widget-text-editor h2,
.uip-legal .elementor-widget-text-editor h3,
.uip-legal .elementor-widget-text-editor h4{
  font-family:"Montserrat",Sans-serif !important; font-size:20px !important; font-weight:700 !important;
  color:#10111a !important; margin:34px 0 12px !important; line-height:1.35 !important; }
.uip-legal .elementor-widget-text-editor strong{ color:#10111a !important; font-weight:700 !important; }
.uip-legal .elementor-widget-text-editor a{ color:#00A8BB !important; text-decoration:underline; }
.uip-legal .elementor-widget-text-editor ul, .uip-legal .elementor-widget-text-editor ol{
  margin:12px 0 !important; padding-left:22px !important; }
.uip-legal .elementor-widget-text-editor li{ margin-bottom:8px !important; }
.uip-legal .elementor-widget-heading .elementor-heading-title{
  font-family:"Montserrat",Sans-serif !important; font-size:26px !important; font-weight:600 !important;
  color:#10111a !important; text-align:left !important; margin-bottom:10px !important; }
.uip-legal a.elementor-button{
  background:transparent !important; color:#10111a !important; border:1px solid #cfd6da !important;
  height:46px !important; padding:0 24px !important; border-radius:999px !important; font-weight:600 !important;
  display:inline-flex !important; align-items:center !important;
  transition:border-color .3s ease, color .3s ease, transform .3s cubic-bezier(.16,1,.3,1) !important; }
.uip-legal a.elementor-button:hover{ border-color:#00A8BB !important; color:#00A8BB !important; transform:translateY(-2px); }

/* [UIP-51] HOME-V2 dark cinematic hero */
.uip-h2{ position:relative; overflow:hidden; background:#080a0f;
  min-height:660px; display:flex; align-items:center; justify-content:center;
  padding:150px 20px 80px; text-align:center; }
.uip-h2-aurora{ position:absolute; inset:-30% -10% auto -10%; height:150%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 42% at 30% 30%, rgba(0,168,187,.45), transparent 70%),
    radial-gradient(34% 40% at 72% 28%, rgba(79,217,232,.30), transparent 70%),
    radial-gradient(40% 44% at 52% 68%, rgba(0,120,150,.35), transparent 72%);
  filter:blur(30px); opacity:.9; animation:uipAur 18s ease-in-out infinite alternate; }
@keyframes uipAur{ 0%{ transform:translate3d(-3%,-2%,0) scale(1); }
  50%{ transform:translate3d(3%,2%,0) scale(1.08); } 100%{ transform:translate3d(-2%,3%,0) scale(1.03); } }
.uip-h2-grid{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 42%, #000 0%, transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 42%, #000 0%, transparent 78%); }
.uip-h2-inner{ position:relative; z-index:1; max-width:920px; }
.uip-h2-eyebrow{ display:inline-flex; align-items:center; gap:9px;
  font-family:"Montserrat",Sans-serif; font-size:12px; font-weight:700; letter-spacing:.16em;
  color:rgba(255,255,255,.72); text-transform:uppercase;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
  padding:8px 16px; border-radius:999px; margin-bottom:28px; }
.uip-h2-dot{ width:7px; height:7px; border-radius:50%; background:#4fd9e8;
  box-shadow:0 0 0 0 rgba(79,217,232,.6); animation:uipPulse 2s ease-out infinite; }
@keyframes uipPulse{ 0%{ box-shadow:0 0 0 0 rgba(79,217,232,.5); } 70%{ box-shadow:0 0 0 8px rgba(79,217,232,0); } 100%{ box-shadow:0 0 0 0 rgba(79,217,232,0); } }
.uip-h2-title{ font-family:"Montserrat",Sans-serif; font-size:60px; font-weight:600;
  line-height:1.08; color:#ffffff; margin:0 0 22px; letter-spacing:-.01em; }
.uip-h2-rotate{ display:inline-block; }
.uip-h2-word{ display:inline-block; color:#4fd9e8;
  transition:opacity .34s ease, transform .34s cubic-bezier(.16,1,.3,1); }
.uip-h2-sub{ font-size:18px; line-height:1.75; color:#aab2bd; max-width:620px;
  margin:0 auto 34px; }
.uip-h2-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.uip-h2-primary{ display:inline-flex; align-items:center; height:52px; padding:0 30px;
  background:#00A8BB; color:#fff; border-radius:999px; font-family:"Montserrat",Sans-serif;
  font-weight:600; font-size:15px; text-decoration:none;
  box-shadow:0 12px 30px rgba(0,168,187,.35);
  transition:background .25s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.uip-h2-primary:hover{ background:#0bbcd0; transform:translateY(-2px); box-shadow:0 16px 38px rgba(0,168,187,.45); }
.uip-h2-ghost{ display:inline-flex; align-items:center; gap:8px; height:52px; padding:0 26px;
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.22); border-radius:999px;
  font-family:"Montserrat",Sans-serif; font-weight:600; font-size:15px; text-decoration:none;
  transition:border-color .25s ease, color .25s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.uip-h2-ghost span{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
.uip-h2-ghost:hover{ border-color:#4fd9e8; color:#4fd9e8; transform:translateY(-2px); }
.uip-h2-ghost:hover span{ transform:translateX(4px); }
.uip-h2-trust{ margin-top:40px; font-size:13.5px; color:#7f8791; display:inline-flex;
  align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; }
.uip-h2-stars{ color:#ffc93c; letter-spacing:1px; }
.uip-h2-sep{ width:4px; height:4px; border-radius:50%; background:#4a525d; }
@media (prefers-reduced-motion: reduce){ .uip-h2-aurora, .uip-h2-dot{ animation:none; } }
@media (max-width:768px){
  .uip-h2{ min-height:0; padding:130px 18px 64px; }
  .uip-h2-title{ font-size:38px; }
  .uip-h2-sub{ font-size:16px; }
}

/* [UIP-fix] About page JS mis-tags the FOOTER with .uip-contact-head, which draws a
   1px #e8edf0 panel border + max-width boxing around it. Never let contact-panel
   boxing apply to a footer, so the footer is identical on every page. */
.uip-footer.uip-contact-head{
  border:0 !important; box-shadow:none !important; border-radius:0 !important;
  max-width:none !important; margin-left:0 !important; margin-right:0 !important;
  background:#0b0e13 !important;
}

/* ============================================================
   PHASE-1 FIX BATCH (Aima) — Task 6, Task 3, Point 1, Point 2
   ============================================================ */

/* [UIP-52] Task 6 — home "How we do it": the big 01/02/03 numbers sat flush to
   the card's inner top-left. Give them breathing room (top + left padding). */
.uip-hwdi .uip-hwdi-card::before{
  padding-top:16px !important; padding-left:16px !important;
  margin-bottom:16px !important;
}

/* [UIP-53] Task 3 dropdown column layout — DEFERRED. The megamenu is a
   deeply nested ElementsKit widget; a correct 3-column (6/5/5) rebuild
   needs a proper DOM-accurate pass, so no override ships here (native
   dropdown left intact rather than a half-broken column attempt). */

/* [UIP-54] Point 1 — inner-page banners (Services, Technologies, IT Support,
   Projects) RESKINNED to match the HOME dark cinematic hero: dark base + aurora
   glow + grid, white eyebrow/headline, muted subtitle, matching CTA buttons.
   Replaces the native teal "What We Do" banner so subpages match the home page.
   Tagged .uip-hero-sub by JS (URL-scoped). About keeps its bespoke hero. */
.uip-hero-sub{
  position:relative !important; overflow:hidden !important;
  background:#080a0f !important; background-image:none !important; background-color:#080a0f !important;
  padding-top:var(--uip-hero-push,150px) !important; padding-bottom:84px !important;
}
/* aurora + grid, mirroring the home hero (UIP-51) */
.uip-hero-sub::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:150%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 42% at 30% 30%, rgba(0,168,187,.45), transparent 70%),
    radial-gradient(34% 40% at 72% 28%, rgba(79,217,232,.30), transparent 70%),
    radial-gradient(40% 44% at 52% 68%, rgba(0,120,150,.35), transparent 72%);
  filter:blur(30px); opacity:.9; }
.uip-hero-sub::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 42%, #000 0%, transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 42%, #000 0%, transparent 78%); }
.uip-hero-sub > *{ position:relative; z-index:1; }
/* kill any child teal background so only the dark base shows */
.uip-hero-sub > .e-con-inner, .uip-hero-sub .e-con-inner > .e-con,
.uip-hero-sub .elementor-widget-container{ background:transparent !important; background-image:none !important; }
/* eyebrow (small label above the title, e.g. OUR SERVICES) */
.uip-hero-sub .elementor-widget:first-of-type .elementor-heading-title{
  color:#4fd9e8 !important; }
/* headline + all headings white */
.uip-hero-sub .elementor-heading-title, .uip-hero-sub h1, .uip-hero-sub h2, .uip-hero-sub h3{
  color:#ffffff !important; }
/* subtitle / paragraph muted light */
.uip-hero-sub .elementor-widget-text-editor, .uip-hero-sub .elementor-widget-text-editor *,
.uip-hero-sub p{ color:#aab2bd !important; }
/* CTA buttons (if the banner has any): teal primary + ghost, matching the home hero */
.uip-hero-sub a.elementor-button{
  background:#00A8BB !important; color:#fff !important; border:0 !important;
  box-shadow:0 12px 30px rgba(0,168,187,.35); box-sizing:border-box !important;
  height:50px !important; padding:0 28px !important; border-radius:999px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  transition:background .25s ease, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.uip-hero-sub a.elementor-button:hover{
  background:#0bbcd0 !important; transform:translateY(-2px); box-shadow:0 16px 38px rgba(0,168,187,.45); }
.uip-hero-sub a.elementor-button.uip-hero-ghost{
  background:transparent !important; border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:none !important; }
.uip-hero-sub a.elementor-button.uip-hero-ghost:hover{
  background:transparent !important; border-color:#4fd9e8 !important; color:#4fd9e8 !important; }
.uip-hero-sub a.elementor-button *{ color:inherit !important; }
@media (max-width:767px){ .uip-hero-sub{ padding-top:120px !important; padding-bottom:56px !important; } }

/* [UIP-55] Point 2 — FOUC gate. A tiny <head> snippet (in each page's head)
   adds html.uip-boot before first paint. During boot we hide (a) the header —
   which would flash as a raw full-width bar before becoming the pill — and
   (b) the FIRST hero section, which JS rebuilds (home) or reskins to dark
   (subpages); hiding it prevents the old teal/native hero from flashing before
   the new one paints. A soft opacity fade brings both back the instant the UI+
   JS finishes, with a 900ms failsafe in the snippet so nothing can stay hidden. */
html.uip-boot .elementor-location-header,
html.uip-boot .elementor-element-df9b228,
html.uip-boot .elementor-element-a421b4a,
html.uip-boot .elementor-element-d6feba3,
html.uip-boot .elementor-element-f5dac1b,
html.uip-boot .uip-nav-rail{ visibility:hidden !important; }
/* hide the first content section (the hero) during boot to kill the hero flash */
html.uip-boot [data-elementor-type="wp-page"] > .e-con.e-parent:first-of-type,
html.uip-boot .elementor > .e-con.e-parent:first-of-type{
  visibility:hidden !important; }
/* once booted, the header + hero fade in cleanly (class removed by JS) */
.elementor-location-header, .uip-nav-rail,
[data-elementor-type="wp-page"] > .e-con.e-parent:first-of-type,
.elementor > .e-con.e-parent:first-of-type{
  transition:opacity .28s ease; }
/* reduced-motion users skip the gate (no flash bothers them; never risk a blank screen) */
@media (prefers-reduced-motion: reduce){
  html.uip-boot .elementor-location-header,
  html.uip-boot .elementor-element-df9b228,
  html.uip-boot .elementor-element-a421b4a,
  html.uip-boot .elementor-element-d6feba3,
  html.uip-boot .elementor-element-f5dac1b,
  html.uip-boot .uip-nav-rail,
  html.uip-boot [data-elementor-type="wp-page"] > .e-con.e-parent:first-of-type,
  html.uip-boot .elementor > .e-con.e-parent:first-of-type{ visibility:visible !important; }
}

/* [UIP-56] Blog FOUC gate. The blog uses the same UI+ layer but rebuilds its
   whole content into .uip-mag via JS, so the raw WP layout flashes first. On
   blog pages the head snippet adds `uip-boot uip-blog`; this hides every
   top-level section during boot (not just header+hero like UIP-55), revealed
   the instant JS removes `uip-boot`. `uip-blog` stays (harmless marker) so the
   selector only ever hides during the boot window. Main pages never get
   `uip-blog`, so they are unaffected. 900ms failsafe lives in the snippet. */
html.uip-boot.uip-blog{ background:#080a0f !important; }
html.uip-boot.uip-blog body{ visibility:hidden !important; }
/* reduced-motion users skip the gate (never risk a stuck blank screen) */
@media (prefers-reduced-motion: reduce){
  html.uip-boot.uip-blog body{ visibility:visible !important; }
}

/* ============================================================
   MOBILE PUNCH LIST (Aima 2026-08-08) — batch 1: home hero
   ============================================================ */
/* [UIP-M2] Task 2 — home hero on mobile: smaller heading, more side padding,
   and split the trust line into two clean lines (desktop unchanged; the seps
   carry extra classes only used here). */
@media (max-width:768px){
  .uip-h2{ padding-left:22px !important; padding-right:22px !important; }
  .uip-h2-title{ font-size:30px !important; line-height:1.18 !important; }
  .uip-h2-sub{ font-size:15px !important; }
  .uip-h2-trust{ margin-top:30px !important; line-height:1.9 !important; row-gap:2px; }
  /* line break after "Reviewed on Clutch" so the stats drop to line 2 */
  .uip-h2-trust .uip-h2-sep-break{
    flex-basis:100% !important; width:100% !important; height:0 !important;
    background:none !important; margin:0 !important; }
  /* between the two stats show " & " instead of the dot */
  .uip-h2-trust .uip-h2-sep-amp{
    background:none !important; width:auto !important; height:auto !important;
    border-radius:0 !important; margin:0 !important; }
  .uip-h2-trust .uip-h2-sep-amp::before{ content:"\0026"; color:#7f8791; margin:0 5px; }
}

/* [UIP-M3] Task 3 — logo loop below the hero: icons too big on mobile (only 2
   showed). Shrink so 3-4 are visible at once. */
@media (max-width:768px){
  .uip-loopglide .swiper-slide img,
  .uip-loopglide img{ max-height:44px !important; height:44px !important; width:auto !important; }
}

/* [UIP-M6] Task 6 — mobile navbar & logo. The logo column centers the logo
   (justify-content:center on .elementor-element-3cbf2c1), pushing it to the
   middle-left; left-align it, enlarge the logo, and shorten the bar. Scoped to
   the main header template; the desktop pill is unaffected (>1024px). */
@media (max-width:1024px){
  .uip-nav-rail .elementor-element-3cbf2c1{ justify-content:flex-start !important; }
  .uip-nav-rail .elementor-element-1d5ea96,
  .uip-nav-rail .elementor-element-1d5ea96 .elementor-widget-container,
  .uip-nav-rail .elementor-element-1d5ea96 a{ text-align:left !important; }
  .uip-nav-rail .elementor-element-1d5ea96 img,
  .uip-nav-rail .uip-nav-shell img{ height:40px !important; width:auto !important; max-width:none !important; }
  .uip-nav-rail .elementor-element-95b7fe7{ padding-top:4px !important; padding-bottom:4px !important; }
  .uip-nav-rail .uip-nav-shell{ padding-top:2px !important; padding-bottom:2px !important; margin-top:6px !important; }
}

/* [UIP-M4] Task 4 — home "How we do it" images on mobile were inconsistent:
   one used object-fit:cover (cropped/cut off at the top), the other two used
   contain, and the container heights differed (220/220/200). Make all three
   show the FULL image, centered, at the same height. Mobile-only. */
@media (max-width:768px){
  .elementor-element-390ebdd img,
  .elementor-element-46e252c img,
  .elementor-element-9b67956 img{
    object-fit:contain !important; object-position:center !important;
    height:190px !important; max-height:190px !important; min-height:190px !important;
    width:100% !important; }
}

/* [UIP-M5] Tasks 5 & 8 — global mobile breathing room. Add side padding to
   BOXED content sections (full-bleed .e-con-full bands/footers/heroes keep
   their edge-to-edge look) and trim oversized body paragraphs. Conservative
   and mobile-only. Custom-designed sections use their own classes, so this
   only touches the generic body copy Aima flagged as "too big / too tight". */
@media (max-width:767px){
  [data-elementor-type] > .e-con.e-con-boxed > .e-con-inner{
    padding-left:20px !important; padding-right:20px !important; }
  .elementor-widget-text-editor p,
  .elementor-widget-text-editor li,
  .elementor-widget-text-editor{ font-size:14.5px !important; line-height:1.7 !important; }
}

/* [UIP-M7] Task 7 — About hero on mobile: it used the teal treatment; match the
   dark home hero (#080a0f + aurora). Content is already white; recolor the
   title accent from dark-teal to the home hero's cyan so it stays visible.
   Mobile-only; desktop About hero unchanged. (Services/Tech/IT/Projects already
   dark via .uip-hero-sub; the Blog hub already uses the dark home hero.) */
@media (max-width:767px){
  .uip-abhero{
    background:#080a0f !important; background-color:#080a0f !important;
    background-image:none !important; position:relative !important; overflow:hidden !important; }
  .uip-abhero::after{
    content:""; position:absolute; inset:-30% -10% auto -10%; height:150%; z-index:0; pointer-events:none;
    background:
      radial-gradient(38% 42% at 30% 30%, rgba(0,168,187,.42), transparent 70%),
      radial-gradient(34% 40% at 72% 28%, rgba(79,217,232,.28), transparent 70%),
      radial-gradient(40% 44% at 52% 68%, rgba(0,120,150,.32), transparent 72%);
    filter:blur(30px); opacity:.9; }
  .uip-abhero > *{ position:relative; z-index:1; }
  .uip-abhero-title span{ color:#4fd9e8 !important; }
}

/* ============================================================================
   [VZ-8] Mobile drawer: persistent black strip + drawer opening off-position
   ----------------------------------------------------------------------------
   Root cause (introduced by our own header pill): .uip-nav-shell sets
   backdrop-filter, and backdrop-filter makes an element the containing block
   for its position:fixed descendants. Elementskit renders the offcanvas drawer
   and its backdrop inside the nav widget, i.e. inside the pill - so their
   left:-100% / width:100% resolved against the pill (~328px wide, offset 31px
   from the viewport edge) instead of against the viewport.

   Two visible symptoms, one cause:
     closed - the backdrop stopped at right:+31px, leaving a 31px black strip
              down the side of every page, permanently.
     open   - the drawer landed at x=31 instead of flush left, and the backdrop
              covered only 328px instead of the whole screen.

   Fix: pin both to the viewport and drive open/close with transform.
   translateX(-100%) is relative to the element's OWN box, so it cannot be
   trapped by an ancestor's containing block no matter what the header does.
   ========================================================================== */
@media (max-width:1024px){
  .elementskit-menu-overlay{
    top:0 !important; left:0 !important; right:auto !important;
    width:100vw !important; height:100vh !important;
    transform:translateX(-100%) !important;
    /* the plugin's own rule is `transition:all .6s`, which animates the slide-out
       at full opacity and leaves the backdrop visibly lingering. Transition only
       what we drive, and fade first so nothing dark hangs around. */
    transition:transform .35s cubic-bezier(.22,.61,.24,1), opacity .2s ease !important;
    opacity:0 !important; pointer-events:none !important;
  }
  .elementskit-menu-overlay.active{
    transform:translateX(0) !important; opacity:1 !important; pointer-events:auto !important;
  }
  .elementskit-menu-container{
    top:0 !important; left:0 !important; right:auto !important;
    height:100vh !important;
    transform:translateX(-100%) !important;
    transition:transform .35s cubic-bezier(.22,.61,.24,1) !important;
  }
  .elementskit-menu-container.active{ transform:translateX(0) !important; }
}
@supports (height:100dvh){
  @media (max-width:1024px){
    .elementskit-menu-overlay,.elementskit-menu-container{ height:100dvh !important; }
  }
}

/* [VZ-8b] Release the drawer from the header pill's containing block.
   backdrop-filter on .uip-nav-shell is what trapped it. The plugin's toggle
   uses relative traversal - $(this).parents('.elementskit-menu-container')
   .parent().find('.elementskit-menu-offcanvas-elements') - so the drawer
   cannot simply be reparented to <body> without reimplementing the toggle.
   Instead the blur is dropped only at the widths where the drawer exists
   (<=1024px), swapped for a marginally more opaque solid fill. Behind a 350px
   drawer on a phone the frosted effect is imperceptible; on desktop, where the
   pill sits over the hero and the blur reads, nothing changes at all. */
@media (max-width:1024px){
  .uip-nav-shell{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background:rgba(13,17,23,.94) !important;
  }
  .uip-nav-scrolled .uip-nav-shell{ background:rgba(11,14,19,.97) !important; }
}

/* [VZ-7] Mobile navbar: vertically centre the logo in the pill.
   The pill (.uip-nav-shell) is 68px tall but its inner columns default to
   align-items:normal, so the logo sat 3px from the top and 25px from the
   bottom - its centre 11px above the pill's. Centre the rows and the widget
   so the logo stays balanced whatever the pill height ends up being. */
@media (max-width:1024px){
  .uip-nav-shell{ align-items:center !important; }
  .uip-nav-shell > .e-con,
  .uip-nav-shell > .e-con > .e-con-inner{ align-items:center !important; }
  .uip-nav-shell .elementor-widget-image,
  .uip-nav-shell .elementor-widget-image > .elementor-widget-container{
    display:flex !important; align-items:center !important;
  }
  .uip-nav-shell .elementor-widget-image img{ display:block; }
}

/* ============================================================================
   [VZ-9] + [VZ-10] Mobile tech-stack marquee
   ----------------------------------------------------------------------------
   VZ-9  Items broke onto two lines inconsistently. The slide's inner container
         is flex-wrap:wrap with a 140px content box, so an item wrapped whenever
         icon + gap + label exceeded it: JavaScript needed 149px and WordPress
         142px (wrapped), HTML 111px and Shopify 116px (did not). Hence some
         items showed icon-beside-text and others icon-above-text.
   VZ-10 Spacing was inconsistent for the same reason - the gap is authored per
         item, some 10px and some 20px - and only ~2.4 items fitted on screen.

   Fix: never wrap, one standard gap, one standard icon size, and a slide width
   that puts about three items on a phone screen.
   ========================================================================== */
@media (max-width:767px){
  /* one standard slide width -> ~3 visible at 390px */
  .elementor-element-e258b1c .swiper-slide .e-con-inner{
    flex-wrap:nowrap !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    padding-left:2px !important; padding-right:2px !important;
  }
  /* label never drops under the icon */
  .elementor-element-e258b1c .swiper-slide .elementor-heading-title,
  .elementor-element-e258b1c .swiper-slide .elementor-widget-text-editor,
  .elementor-element-e258b1c .swiper-slide .elementor-widget-heading{
    white-space:nowrap !important;
  }
  .elementor-element-e258b1c .swiper-slide .elementor-widget-heading .elementor-heading-title{
    font-size:12px !important; line-height:1.2 !important; letter-spacing:-.01em;
  }
  /* labels hug their text so the 8px gap is the real gap, not leftover
     space inside a stretched block */
  .elementor-element-e258b1c .swiper-slide .elementor-widget-heading{ flex:0 0 auto !important; width:auto !important; }
  .elementor-element-e258b1c .swiper-slide .elementor-widget-heading > .elementor-widget-container{ width:auto !important; }
  /* one standard icon size, vertically centred with the label */
  .elementor-element-e258b1c .swiper-slide .elementor-widget-image img,
  .elementor-element-e258b1c .swiper-slide .elementor-widget-image svg{
    width:30px !important; height:30px !important;
    max-width:30px !important; object-fit:contain; display:block;
  }
  /* Pin the icon widget to exactly the icon size. Elementor gives container
     children --container-widget-flex-grow:1, so the image widget was both
     growing (wide slides -> gap crept to 25px) and shrinking (WordPress, the
     longest label -> icon box squeezed to 22px and the gap collapsed to 0).
     Fixing the basis is what makes the gap uniform, not tuning slide width. */
  .elementor-element-e258b1c .swiper-slide .elementor-widget-image{
    flex:0 0 30px !important; width:30px !important; max-width:30px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    margin:0 !important;
  }
  .elementor-element-e258b1c .swiper-slide .elementor-widget-image > .elementor-widget-container{
    display:flex !important; align-items:center !important; justify-content:center !important;
    width:30px !important; margin:0 !important;
  }
  .elementor-element-e258b1c .swiper-slide .elementor-widget{ margin-bottom:0 !important; }
}

/* [VZ-10] ~3 tech items visible on a phone instead of 2.
   Elementor's nested carousel takes slidesPerView from this custom property,
   so this is the supported way to change it - overriding .swiper-slide width
   in CSS would desync Swiper's inline widths and translate maths.
   Scoped to the tech marquee (e258b1c) so the other five carousels on the page
   (How We Do It, services, countries) keep their own settings. */
@media (max-width:767px){
  .elementor-element-e258b1c{
    --e-n-carousel-swiper-slides-to-display:3 !important;
    --e-n-carousel-swiper-slides-gap:8px !important;
  }
}
/* Below 390px, three full items would clip the two longest labels (JavaScript,
   WordPress). Ease the count so the third item is still clearly visible but no
   label is ever cut. Thresholds set by measuring, not guessed: at 375px three
   clips one label, 2.6 clips none; at 320px even 2.6 clips two, 2.2 clips none. */
@media (max-width:389px){
  .elementor-element-e258b1c{
    --e-n-carousel-swiper-slides-to-display:2.6 !important;
  }
}
@media (max-width:339px){
  .elementor-element-e258b1c{
    --e-n-carousel-swiper-slides-to-display:2.2 !important;
  }
}

/* ============================================================================
   [VZ-20] Footer contact buttons overlap on mobile
   ----------------------------------------------------------------------------
   The email button's intrinsic width is 201px (long address + 20px side padding)
   but the flex row only allots its column 143px. The button is inline-flex and
   does not shrink, so it overflowed its column by ~58px and ran straight over
   the phone button beside it: 52px of overlap at 360, 38px at 390, 27px at 414.

   Fix: let the columns size to their content and wrap, trim the button padding
   and text a little so the pair fits side by side once there is room, and stack
   them full-width below that - which is what the ticket asks for on very narrow
   screens, rather than forcing two buttons into insufficient width.
   Both footer variants are targeted; the markup ships a second, hidden copy.
   ========================================================================== */
@media (max-width:767px){
  .elementor-element-6b28003,
  .elementor-element-6b3fd81{
    flex-wrap:wrap !important;
    gap:12px !important;
    align-items:stretch !important;
  }
  .elementor-element-6b28003 > .elementor-element,
  .elementor-element-6b3fd81 > .elementor-element{
    flex:1 1 auto !important; min-width:0 !important;
  }
  .elementor-element-6b28003 .elementor-button,
  .elementor-element-6b3fd81 .elementor-button{
    max-width:100% !important;
    padding:10px 14px !important;
    font-size:13px !important;
    white-space:nowrap;
  }
}
/* Below ~445px the two buttons cannot sit side by side without the email text
   being squeezed, so they stack full width - a bigger, cleaner touch target. */
@media (max-width:444px){
  .elementor-element-6b28003 > .elementor-element,
  .elementor-element-6b3fd81 > .elementor-element{ flex:1 1 100% !important; }
  .elementor-element-6b28003 .elementor-button,
  .elementor-element-6b3fd81 .elementor-button{
    width:100% !important; justify-content:center !important;
  }
}

/* [VZ-19] FAQ section is unnecessarily tall on mobile.
   Measured: 10 items, 25px margin between each, and 24px of vertical padding
   inside every question header - 1199px of accordion on a 390px-wide screen.
   Halve the inter-item gap and trim the header padding, keeping the tap target
   comfortably above the 44px minimum so it does not become cramped.
   Accordion behaviour is untouched. */
@media (max-width:767px){
  .elementor-element-8ef4217 .e-n-accordion-item,
  .elementor-element-8ef4217 details{
    margin-bottom:12px !important;
  }
  .elementor-element-8ef4217 details:last-of-type{ margin-bottom:0 !important; }
  /* Elementor sets this on .e-n-accordion-item-title with its own weight, so a
     bare `summary` selector loses. Target the class it actually uses. */
  .elementor-element-8ef4217 summary.e-n-accordion-item-title,
  .elementor-element-8ef4217 .e-n-accordion-item-title{
    padding-top:16px !important; padding-bottom:16px !important;
  }
}

/* [VZ-15] Services / IT Support / Tech Stack cards blend into the page.
   Measured: card #E8EBEB on a white page is only 1.20:1 of separation, which
   is why the card edges are hard to read as separate blocks. Stepped to
   #D8DEDE = 1.36:1, about 14% more separation - enough to read as a distinct
   card without darkening the section or changing the palette, which is what
   the ticket asks for. Text on the card is unaffected: it sits on the card,
   and a darker card only improves its contrast.
   Mobile only, per the ticket - desktop is not part of this change. */
@media (max-width:767px){
  .elementor-element-9b67956,
  .elementor-element-390ebdd,
  .elementor-element-035aac9{
    background-color:#D8DEDE !important;
  }
}

/* ============================================================================
   [VZ-24] Projects page - "Why businesses choose vorza360" feature blocks
   ----------------------------------------------------------------------------
   Measured: each block is 310x170 with 30px/28px padding, laid out as a column
   with the icon above the title. The description paragraph inside is already
   display:none on mobile, so most of that 170px is empty space around two
   elements - which is exactly the "too tall, too much empty space" in the
   ticket.

   Taking the ticket's preferred option: icon on the left, text beside it,
   shorter card. Background stepped off white to #D8DEDE, the same card tone
   used for the homepage service cards in VZ-15, so the two sections match
   rather than each inventing their own grey.
   Mobile only - the ticket says desktop is already fine.
   ========================================================================== */
@media (max-width:767px){
  .elementor-element-56364b2{ gap:12px !important; }

  .elementor-element-56364b2 > .elementor-element{
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    gap:14px !important;
    padding:14px 16px !important;
    background-color:#D8DEDE !important;
    border-radius:10px !important;
  }
  /* icon keeps its size and never stretches; the title takes the rest */
  .elementor-element-56364b2 > .elementor-element > .elementor-element:nth-child(1){
    flex:0 0 auto !important; width:auto !important; margin:0 !important;
  }
  .elementor-element-56364b2 > .elementor-element > .elementor-element:nth-child(2){
    flex:1 1 auto !important; width:auto !important; margin:0 !important;
  }
  .elementor-element-56364b2 .elementor-icon-wrapper{ display:flex !important; align-items:center !important; }
}

/* [VZ-4][VZ-5] Service-card rows: content starts at the top of every card, so
   a shorter description can no longer push its card's heading, divider and
   text downward relative to its neighbours. Applied only to cards tagged by
   the JS above, i.e. cards that actually sit in a multi-card row. */
.uip-card-topalign{ justify-content:flex-start !important; }

/* [VZ-13] Equal card heights only.
   The three slides are 460px but the cards inside measured 440 / 420 / 400 and
   the slide centres its card, so the shorter cards sat lower. Stretching each
   card to the slide height fixes that much safely.

   NOT done here: equalising the positions of the image, heading, description
   and button inside the cards. Those three cards are authored with different
   widget order and different media-block heights in Elementor. CSS attempts to
   normalise them (flex order, fixed media height, forced image sizing) did make
   every measurement read as aligned, but visibly broke the rendering - the
   image collapsed inside an oversized block and the description overflowed the
   card. Reverted rather than shipped. This needs the three cards rebuilt with
   the same widget structure in Elementor; raised on VZ-13. */
.uip-hwdi-slide,
.uip-hwdi-slide.e-con-inner{ justify-content:flex-start !important; }
.uip-hwdi-card{ height:100% !important; justify-content:flex-start !important; }

/* ============================================================================
   [VZ-18] Contact person cards - mobile
   ----------------------------------------------------------------------------
   Measured: the three profiles sit in a 208px-wide flex row on a 390px screen,
   giving each card 69px of width and a 25x25px profile picture. That is the
   "tiny circle treatment" the ticket asks to replace.

   Rebuilt as the vertical list the ticket describes: one profile per row, a
   prominent circular image, name under the image, designation under the name,
   and the LinkedIn link given a real tap target rather than a 25px icon.
   ========================================================================== */
@media (max-width:767px){
  /* the row becomes a full-width vertical stack */
  .elementor-element-38d1e3f{
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    max-width:100% !important;
    gap:18px !important;
    align-items:stretch !important;
  }
  .elementor-element-2768ab1,
  .elementor-element-62c6208,
  .elementor-element-3a655cc{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    flex:0 0 auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    gap:10px !important;
    padding:20px 16px !important;
    background:#D8DEDE !important;
    border-radius:12px !important;
  }
  /* prominent circular portrait */
  .elementor-element-2768ab1 img,
  .elementor-element-62c6208 img,
  .elementor-element-3a655cc img{
    width:96px !important; height:96px !important;
    max-width:96px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    display:block !important;
  }
  .elementor-element-2768ab1 > *,
  .elementor-element-62c6208 > *,
  .elementor-element-3a655cc > *{
    width:100% !important; max-width:100% !important;
    margin:0 !important; flex:0 0 auto !important;
  }
  /* name and designation both centred - the designation carries its own
     alignment and was sitting left of the centred name */
  .elementor-element-2768ab1 .elementor-widget-container,
  .elementor-element-62c6208 .elementor-widget-container,
  .elementor-element-3a655cc .elementor-widget-container,
  .elementor-element-2768ab1 .elementor-heading-title,
  .elementor-element-62c6208 .elementor-heading-title,
  .elementor-element-3a655cc .elementor-heading-title,
  .elementor-element-2768ab1 p,
  .elementor-element-62c6208 p,
  .elementor-element-3a655cc p{
    text-align:center !important;
  }
  .elementor-element-2768ab1 .elementor-icon-wrapper,
  .elementor-element-62c6208 .elementor-icon-wrapper,
  .elementor-element-3a655cc .elementor-icon-wrapper{ text-align:center !important; }
  /* the profile column and its wrappers are squeezed to 208px by ancestor
     padding, which is what forced the three cards to 69px each */
  .elementor-element-38d1e3f,
  .elementor-element-f256f47{
    width:100% !important; max-width:100% !important;
  }
  .elementor-element-f256f47{ flex-direction:column !important; }

  /* The LinkedIn icon widget is display:none on mobile, which is why the
     profiles had no visible link at all. The ticket asks for LinkedIn to be
     prominent, so it is shown and given a real tap target. */
  .elementor-element-2768ab1 .elementor-widget-icon,
  .elementor-element-62c6208 .elementor-widget-icon,
  .elementor-element-3a655cc .elementor-widget-icon{
    display:block !important;
  }
  .elementor-element-2768ab1 a.elementor-icon,
  .elementor-element-62c6208 a.elementor-icon,
  .elementor-element-3a655cc a.elementor-icon{
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    min-width:44px !important; min-height:44px !important; font-size:24px !important;
  }
}

/* ============================================================================
   [VZ-17] Contact Us section - mobile
   ----------------------------------------------------------------------------
   Measured on a 390px screen: nested containers each add their own horizontal
   padding, so the content narrows 390 -> 300 -> 260 -> 240 -> 180. The contact
   form ends up 180px wide with 121px of space on its left and 89px on its
   right - visibly off-centre as well as cramped. That is the ticket's
   "compressed, crowded, desktop positioning that has not translated".

   Fix: collapse the nested horizontal padding and keep one consistent gutter
   on the section, so every block lines up on the same left and right edge with
   room to breathe. Vertical rhythm is set once on the section rather than
   inherited from desktop spacing.
   ========================================================================== */
@media (max-width:767px){
  .elementor-element-4e8f6a1,
  .elementor-element-f256f47,
  .elementor-element-9e1353b,
  .elementor-element-bdd500d,
  .elementor-element-38d1e3f,
  .elementor-element-a52cf1b,
  .elementor-element-5280827,
  .elementor-element-49bc137{
    width:100% !important;
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  /* one gutter for the whole section */
  .elementor-element-4e8f6a1{
    padding-left:16px !important; padding-right:16px !important;
  }
  /* the form keeps its own comfortable inner padding, just not the inherited
     desktop 60px/30px which is what squeezed it to 180px */
  .elementor-element-a52cf1b{
    padding-top:24px !important; padding-bottom:24px !important;
  }
  /* vertical breathing room between the blocks */
  .elementor-element-4e8f6a1{ gap:20px !important; }
  .elementor-element-f256f47{ gap:24px !important; }
}

/* [VZ-17] The asymmetry was here: 4a251ae carries 16px side margins AND 44px
   side padding, so with a full width it started at x=16 and ran 16px past the
   right edge - which pushed every block inside it to the right. Let it size to
   the viewport and carry one modest gutter instead. */
@media (max-width:767px){
  .elementor-element-4a251ae{
    width:auto !important; max-width:100% !important;
    margin-left:0 !important; margin-right:0 !important;
    padding-left:16px !important; padding-right:16px !important;
  }
  /* the inner wrapper already provides the gutter, so drop its extra 20px */
  .elementor-element-4a251ae > .e-con-inner{
    padding-left:0 !important; padding-right:0 !important;
    max-width:100% !important;
  }
  .elementor-element-4e8f6a1{ padding-left:0 !important; padding-right:0 !important; }
}

/* [AUDIT P0-AL] The default-open FAQ answer rendered invisible: uip-reveal
   sets opacity:0 + translateY and only clears it on scroll-into-view, which
   never fires for content already open at page load. Anything inside an open
   <details> must simply be visible. */
details[open] .uip-reveal{ opacity:1 !important; transform:none !important; }

/* [AUDIT P0-A][P1-AH] form status + book-a-call link */
.v360-form-status{ margin:0; font-size:15px; line-height:1.55; }
.v360-form-status:not(:empty){ margin-top:12px; }
.v360-form-status.ok{ color:#39c98e; }
.v360-form-status.err{ color:#ffb0a8; }
.v360-form-status a{ color:inherit; text-decoration:underline; }
.v360-book-call{ display:inline-flex; align-items:center; min-height:44px; margin-top:14px;
  font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* [VZ-16] mobile project collapse */
@media (max-width:767px){
  .uip-proj-hidden{ display:none !important; }
  .uip-proj-more{
    display:flex; align-items:center; justify-content:center;
    width:100%; min-height:48px; margin:8px 0 0; padding:0 24px;
    background:#0b0e13; color:#fff; border:1px solid #22303a; border-radius:999px;
    font:600 15px/1 Montserrat,sans-serif; cursor:pointer; transition:border-color .2s;
  }
  .uip-proj-more:hover{ border-color:#00A8BB; }
  .uip-proj-more:focus-visible{ outline:3px solid #00A8BB; outline-offset:3px; }
}

/* [VZ-11] Hardening for the services grid (the +13 More design itself was
   built in an earlier session and its expander works - section 971px
   collapsed, 3344px expanded). Screenshots caught two transient defects
   mid-reveal-animation: a long card heading crossing its card edge, and a
   hidden card's text leaking past the dark tile. Neither reproduces in the
   settled DOM; these rules make both impossible at any animation frame. */
@media (max-width:767px){
  /* The desktop card rules (line ~359) set display:flex + 19px + 26px side
     padding; on a ~143px mobile card that left a 91px text box where a bare
     text node became an anonymous flex item whose min-content ignores
     overflow-wrap - so "Development" could NEVER break and painted into the
     page gutter. Block display + 16px + slimmer padding = every service name
     fits without mid-word breaks. Selector matches that block's specificity. */
  .uip-svc-card .elementor-heading-title{
    display:block !important; width:100% !important;
    font-size:16px !important;
    overflow-wrap:break-word; hyphens:auto;
  }
  .uip-svc-card{ padding:18px 14px !important; }
  /* !important: Elementor's .e-con { overflow:var(--overflow) } wins the
     cascade otherwise (computed stayed "visible" - measured, not assumed) */
  .uip-svc-card{ overflow:hidden !important; }
  .uip-svc-more{ overflow:hidden !important; }
}

/* [VZ-14] "Who We Are" mobile redesign (ticket: desktop layout compressed into
   mobile — 123px text column, cropped icons, dead space right, no hierarchy).
   Option B from the ticket, refined: each item becomes a full-width card with
   the icon (56px, uncropped) beside its heading, and the description spanning
   the card's full width below them. Homepage section dd68b20. */
@media (max-width:767px){
  /* stack of the 3 items */
  .elementor-element-dd68b20 .elementor-element-5525a26{
    row-gap:14px;
  }
  /* each item -> card with a 2-col grid: icon | heading, description spans */
  .elementor-element-dd68b20 .elementor-element-5525a26 > .e-con{
    display:grid !important;
    grid-template-columns:56px 1fr;
    grid-template-rows:auto auto;
    column-gap:14px; row-gap:10px;
    align-items:center;
    width:100% !important; max-width:100%;
    background:#ffffff;
    border:1px solid rgba(13,23,33,.08);
    border-radius:16px;
    padding:18px 16px !important;
    box-shadow:0 2px 10px rgba(13,23,33,.04);
  }
  /* icon: fixed square, never cropped */
  .elementor-element-dd68b20 .elementor-element-5525a26 > .e-con > .elementor-widget-image{
    grid-column:1; grid-row:1;
    width:56px !important; max-width:56px !important;
  }
  .elementor-element-dd68b20 .elementor-element-5525a26 > .e-con > .elementor-widget-image img{
    width:56px !important; height:56px !important; object-fit:contain;
  }
  /* dissolve the inner text container so heading/description join the grid */
  .elementor-element-dd68b20 .elementor-element-5525a26 > .e-con > .e-con{
    display:contents !important;
  }
  .elementor-element-dd68b20 .elementor-element-5525a26 > .e-con > .e-con > .elementor-widget-heading{
    grid-column:2; grid-row:1;
    width:100% !important; max-width:100% !important;
  }
  .elementor-element-dd68b20 .elementor-element-5525a26 > .e-con > .e-con > .elementor-widget-text-editor{
    grid-column:1 / -1; grid-row:2;
    width:100% !important; max-width:100% !important;
  }
}

/* [VZ-21] Mobile homepage consistency pass. Measured content left edges
   varied 22/30/37/40px across sections and the FAQ section heading was 24px
   while every other section heading is 32px. Normalize the three outliers to
   the dominant 40px edge and bring the FAQ heading onto the section-heading
   scale. (Hero deliberately untouched: its 22px inset + 30px title were tuned
   for the rotating headline; centered full-bleed hero reads fine.) */
@media (max-width:767px){
  /* repeated class = specificity (0,5,0), to outrank the earlier global
     [data-elementor-type] > .e-con.e-con-boxed > .e-con-inner (0,4,0) rule */
  .elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462 > .e-con-inner{
    padding-left:30px !important; padding-right:30px !important;
  }
  .elementor-element-4a251ae.elementor-element-4a251ae.elementor-element-4a251ae.elementor-element-4a251ae.elementor-element-4a251ae > .e-con-inner{
    padding-left:23px !important; padding-right:23px !important;
  }
  .elementor-element-5f98653 h2.elementor-heading-title{
    font-size:32px !important; line-height:1.2 !important;
  }
  /* "Our Services" was the only centered section header; left-align its
     heading + subtitle to the shared 40px edge like every other section */
  .elementor-element-932112a .elementor-element-edbd213,
  .elementor-element-932112a .elementor-element-17c0f08{
    align-self:flex-start;
  }
  .elementor-element-932112a .elementor-element-edbd213 *,
  .elementor-element-932112a .elementor-element-17c0f08 *{
    text-align:left !important;
  }
}

/* [VZ-6] Desktop services tabs (Services / IT Support / Tech Stack): card
   contents used three different vertical alignments in one row - some cards
   justify-content:center, and the wide cards (Ubuntu, WordPress) faked
   centering with margin-top:40px on their heading widget. Row headings sat at
   3 different heights (measured 5035/5046/5075). Top-align everything. */
@media (min-width:768px){
  .e-n-tabs-content .e-con.e-child{ justify-content:flex-start !important; }
  .e-n-tabs-content .e-con.e-child .elementor-widget-heading > .elementor-widget-container{
    margin-top:0 !important;
  }
}

/* [VZ-33] Mobile navbar hamburger sat ~90px in from the right edge instead of
   on the right. Two causes inside the mobile pill (.uip-nav-shell): the burger
   column is --width:40% next to a 50% logo column, so with the 20px flex gap it
   stopped ~11px short of the pill's right edge; and its contents computed to
   align-items:center (Elementor's --align-items:flex-end was being overridden),
   which floated the 45px button another ~27px inward. Its own 10px padding-right
   added the rest. Pin the column to the pill's right edge and right-align the
   button in it; justify-content keeps it vertically centred (column direction).
   Selector is structural, not ID-based, because the two header templates use
   different element ids (1495: 95b7fe7/0c7fb05, 1494: 8b85d2e/...). The :has()
   rule is the precise one; the :last-child rule is the fallback for engines
   without :has() - they must stay separate, since an unsupported :has() would
   invalidate the whole selector list. Mobile-only: this container is
   elementor-hidden-desktop/-tablet, and the desktop pill is untouched. */
@media (max-width:767px){
  .uip-nav-rail .uip-nav-shell > .e-con.e-child:last-child{
    margin-left:auto !important;
    align-items:flex-end !important;
    justify-content:center !important;
    padding-right:4px !important;
  }
  .uip-nav-rail .uip-nav-shell > .e-con.e-child:has(.elementskit-menu-hamburger){
    margin-left:auto !important;
    align-items:flex-end !important;
    justify-content:center !important;
    padding-right:4px !important;
  }
}

/* [VZ-35] NAVBAR DROPDOWNS - body-level overlay card + mobile caret button.
   Markup is built by the [VZ-35] module in v360-uiplus.js:
     .uip-mmroot > .uip-mm > .uip-mm-card > .uip-mm-grid > .uip-mm-col > a.uip-mm-item
   The card lives on <body>, not inside ElementsKit's megamenu panel, because
   that panel renders semi-transparently over the page (pre-existing - the
   original dropdown does it too). Theme matches the navbar pill: dark glass,
   #00A8BB / #4fd9e8 accent, 22px radius. */

.uip-mmroot{ position:static; }

/* The background MUST sit on the fixed, z-indexed element itself. Backing a
   static child instead renders see-through over the hero - the same symptom the
   original ElementsKit panel has, and the reason the first attempt failed.
   Verified empirically: identical styles on an inner wrapper bleed the hero
   through; moved onto this element they cover it completely. Don't refactor the
   background onto a child. */
.uip-mm{
  position:fixed; z-index:2147482000;
  display:none; pointer-events:auto;
  box-sizing:border-box;
  background:#0d1117;
  border:1px solid rgba(255,255,255,.13);
  border-radius:22px;
  box-shadow:0 30px 80px rgba(2,10,14,.55);
  padding:20px;
}
.uip-mm.uip-mm-open{ display:block; }

/* transparent bridge across the gap up to the pill - it belongs to .uip-mm, so
   the pointer crossing it keeps the menu open. */
.uip-mm::before{
  content:""; position:absolute; left:0; right:0; top:-18px; height:18px;
}

.uip-mm-card{ display:block; }

.uip-mm-grid{
  display:grid; grid-template-columns:repeat(var(--uip-mm-cols, 3), minmax(0,1fr));
  gap:4px 10px; align-items:stretch;
}
.uip-mm-c1 .uip-mm-grid{ --uip-mm-cols:1; }
.uip-mm-c2 .uip-mm-grid{ --uip-mm-cols:2; }
.uip-mm-c3 .uip-mm-grid{ --uip-mm-cols:3; }

.uip-mm-col{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.uip-mm-col + .uip-mm-col{ border-left:1px solid rgba(255,255,255,.08); padding-left:10px; }

.uip-mm a.uip-mm-item{
  display:flex; align-items:center; gap:12px;
  padding:9px 12px; border-radius:14px;
  border:1px solid transparent;
  color:rgba(255,255,255,.82); text-decoration:none; min-width:0;
  transition:background .22s ease, border-color .22s ease, transform .22s cubic-bezier(.16,1,.3,1);
}
.uip-mm a.uip-mm-item:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(0,168,187,.42);
  transform:translateX(3px);
}
.uip-mm-ico{
  flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center;
  border-radius:10px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
  transition:background .22s ease, border-color .22s ease;
}
.uip-mm-ico svg, .uip-mm-ico img{
  width:19px !important; height:19px !important;
  max-width:19px !important; max-height:19px !important;
  display:block; object-fit:contain;
}
.uip-mm a.uip-mm-item:hover .uip-mm-ico{
  background:rgba(0,168,187,.20); border-color:rgba(0,168,187,.50); }

.uip-mm-label{
  font-size:14.5px; line-height:1.35; font-weight:500; letter-spacing:.1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.uip-mm a.uip-mm-item:hover .uip-mm-label{ color:#4fd9e8; }

.uip-mm-foot{
  margin-top:14px; padding-top:13px;
  border-top:1px solid rgba(255,255,255,.09);
  display:flex; justify-content:flex-end;
}
.uip-mm a.uip-mm-all{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:999px;
  background:rgba(0,168,187,.14); border:1px solid rgba(0,168,187,.38);
  color:#4fd9e8; font-size:13.5px; font-weight:600; text-decoration:none;
  transition:background .22s ease, border-color .22s ease, color .22s ease;
}
.uip-mm a.uip-mm-all::after{
  content:"\2192"; font-size:15px; line-height:1;
  transition:transform .22s cubic-bezier(.16,1,.3,1); }
.uip-mm a.uip-mm-all:hover{
  background:rgba(0,168,187,.26); border-color:#00A8BB; color:#fff; }
.uip-mm a.uip-mm-all:hover::after{ transform:translateX(3px); }

/* desktop: the overlay replaces ElementsKit's panel, so hide the original.
   It stays in the DOM (data source + reversible); below 1025px this nav is
   hidden wholesale anyway and the drawer uses a separate menu. */
@media (min-width:1025px){
  .uip-nav-rail .elementskit-megamenu-panel{ display:none !important; }
  /* keep the trigger's caret rotated while its overlay is open */
  .uip-nav-rail .elementskit-navbar-nav > li.uip-mm-active > a .elementskit-submenu-indicator,
  .uip-nav-rail .elementskit-navbar-nav > li.uip-mm-active > a i{ transform:rotate(180deg); }
}
/* the overlay is desktop-only */
@media (max-width:1024px){
  .uip-mm{ display:none !important; }
}

/* [VZ-35] mobile drawer - caret is now a real button beside the link, so the
   text navigates and the caret only expands. */
@media (max-width:1024px){
  .elementskit-navbar-nav li.uip-has-toggle{ position:relative; }
  .elementskit-navbar-nav li.uip-has-toggle > a{ padding-right:54px !important; }

  /* The theme styles [type="button"] with a pink border and a focus fill. That
     selector ties this class on specificity and loads later, so the reset needs
     !important and must cover the interaction states too. */
  .uip-sub-toggle,
  .uip-sub-toggle:hover,
  .uip-sub-toggle:focus,
  .uip-sub-toggle:active{
    position:absolute; top:0; right:0;
    width:48px !important; min-width:48px !important; height:48px !important;
    box-sizing:border-box !important;
    display:flex !important; align-items:center; justify-content:center;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:0 !important; box-shadow:none !important; outline:none !important;
    -webkit-appearance:none !important; appearance:none !important;
    padding:0 !important; margin:0 !important;
    color:inherit; cursor:pointer; z-index:2;
    -webkit-tap-highlight-color:transparent;
  }
  /* keyboard users still get a visible focus ring */
  .uip-sub-toggle:focus-visible{
    outline:2px solid #4fd9e8 !important; outline-offset:-4px !important;
    border-radius:10px;
  }
  .uip-sub-toggle .elementskit-submenu-indicator{
    margin:0 !important; transition:transform .25s cubic-bezier(.16,1,.3,1); }
  .elementskit-navbar-nav li.uip-sub-open > .uip-sub-toggle .elementskit-submenu-indicator{
    transform:rotate(180deg); }

  /* our class drives the submenu, so it survives ElementsKit's own inline state */
  .elementskit-navbar-nav li.uip-sub-open > .elementskit-submenu-panel,
  .elementskit-navbar-nav li.uip-sub-open > ul.elementskit-dropdown{
    display:block !important; height:auto !important; opacity:1 !important; visibility:visible !important;
  }
  .elementskit-navbar-nav li.uip-has-toggle:not(.uip-sub-open) > .elementskit-submenu-panel,
  .elementskit-navbar-nav li.uip-has-toggle:not(.uip-sub-open) > ul.elementskit-dropdown{
    display:none !important;
  }
}

/* [VZ-37] MOBILE: contact form, profile cards and the navbar logo inset.
   Design only - no markup, link, field-name or behaviour changes - and every
   rule sits inside max-width:767px so desktop and tablet are untouched.

   The block ships on three pages (home, contact, projects) with different
   element ids, so this hangs off the class hooks [UIP-21] already applies in
   v360-uiplus.js - .uip-contact-head on the section, .uip-team-row on each
   profile card, .uip-team-avatar on the photo - rather than on ids. One rule
   set, all three pages.

   What was wrong: home's form card had `padding:24px 0`, so the inputs ran to
   the card edges; contact and projects buried the same card under four levels
   of padding (16 outer + 44 section + 20 inner + 10 column), leaving a 208px
   well with 148px inputs. The team cards were a 3-across row inside that well
   - 69px per card - and their LinkedIn icons were elementor-hidden-mobile,
   i.e. dropped on phones entirely. */
@media (max-width:767px){

  /* ---------- 1. section: one consistent gutter ---------- */
  .uip-contact-head{
    margin-left:12px !important; margin-right:12px !important;
    padding:34px 0 38px !important;
    border-radius:22px !important;
  }
  /* Elementor ships this container's inner padding as a 5x-repeated-class rule
     (specificity 0,6,0, !important, and it may load after this file). Repeat
     the hook 7x to out-specify it regardless of order - ugly, but it is the
     only lever that reclaims the width. */
  .uip-contact-head.uip-contact-head.uip-contact-head.uip-contact-head.uip-contact-head.uip-contact-head.uip-contact-head > .e-con-inner{
    padding-left:12px !important; padding-right:12px !important;
    width:auto !important; max-width:none !important;
    row-gap:22px !important;
  }
  .uip-contact-head > .e-con-inner > .e-con{
    padding-left:0 !important; padding-right:0 !important;
    width:100% !important; max-width:100% !important;
    row-gap:20px !important;
  }

  /* section heading + intro (contact page carries these) */
  .uip-contact-head .uip-headblock-sub,
  .uip-contact-head .uip-headblock-sub *{ font-size:15.5px !important; line-height:1.7 !important; }

  /* ---------- 2. the form card ---------- */
  .uip-contact-head .e-con:has(> .elementor-widget-form){
    width:100% !important; max-width:100% !important;
    padding:22px 16px 20px !important;
    row-gap:16px !important;
    background:#ffffff !important;
    border:1px solid rgba(15,23,32,.08) !important;
    border-radius:18px !important;
    box-shadow:0 10px 30px rgba(2,10,14,.07) !important;
  }
  .uip-contact-head .e-con:has(> .elementor-widget-form) .elementor-heading-title{
    font-size:20px !important; line-height:1.32 !important;
    letter-spacing:-.2px !important; margin:0 !important;
  }

  /* fields: one width, one height, one radius, one rhythm */
  .uip-contact-head .elementor-field-group{
    width:100% !important; max-width:100% !important; flex-basis:100% !important;
    margin:0 0 11px !important; padding:0 !important;
  }
  .uip-contact-head .elementor-field-group.elementor-field-type-submit{ margin-bottom:0 !important; }
  .uip-contact-head .elementor-field-textual{
    width:100% !important; max-width:100% !important;
    height:50px !important; min-height:50px !important;
    padding:0 15px !important;
    font-size:15px !important;
    border-radius:12px !important;
    border:1.5px solid #dfe6ea !important;
  }
  .uip-contact-head textarea.elementor-field-textual{
    height:116px !important; min-height:116px !important;
    padding:14px 15px !important; resize:vertical !important;
  }

  /* submit: full width, same radius family as the pill nav */
  .uip-contact-head button.elementor-button,
  .uip-contact-head .e-form__buttons .elementor-button{
    width:100% !important; height:52px !important; min-height:52px !important;
    padding:0 20px !important; border-radius:999px !important;
    font-size:14.5px !important; letter-spacing:.5px !important;
  }
  .uip-contact-head .e-form__buttons{ width:100% !important; }

  /* "Prefer to talk?" is injected after the form - make it a real footer row
     of the card rather than a loose red line under it. */
  .uip-contact-head .elementor-widget-form > .elementor-widget-container > a{
    display:block !important; text-align:center !important;
    margin:15px 0 0 !important; padding:13px 6px 0 !important;
    border-top:1px solid rgba(15,23,32,.09) !important;
    font-size:13.5px !important; line-height:1.5 !important; font-weight:600 !important;
  }

  /* ---------- 3. profile cards: compact horizontal rows ---------- */
  .uip-contact-head .e-con:has(> .uip-team-row){
    flex-direction:column !important; flex-wrap:nowrap !important;
    gap:9px !important; row-gap:9px !important;
    width:100% !important; max-width:100% !important; height:auto !important;
    padding:0 !important;
  }
  .uip-contact-head .uip-team-row{
    position:relative !important;
    flex-direction:row !important; align-items:center !important; flex-wrap:nowrap !important;
    width:100% !important; max-width:100% !important; height:auto !important;
    gap:12px !important;
    padding:9px 10px 9px 9px !important;
    background:#ffffff !important;
    border:1px solid rgba(15,23,32,.09) !important;
    border-radius:14px !important;
    box-shadow:0 4px 14px rgba(2,10,14,.05) !important;
  }
  .uip-contact-head .uip-team-row:hover{ transform:none !important; }

  /* avatar */
  .uip-contact-head .uip-team-row > .e-con:first-child{
    flex:0 0 50px !important; width:50px !important; height:50px !important;
    padding:0 !important; margin:0 !important;
  }
  .uip-contact-head .uip-team-row > .e-con:first-child .elementor-widget-image,
  .uip-contact-head .uip-team-row > .e-con:first-child .elementor-widget-container{
    width:50px !important; height:50px !important; margin:0 !important; line-height:0 !important;
  }
  .uip-contact-head .uip-team-avatar{
    width:50px !important; height:50px !important; max-width:50px !important;
    border-width:2px !important; padding:1px !important;
    border-radius:50% !important; object-fit:cover !important; display:block !important;
  }

  /* text column. Explicitly relative so the corner icon resolves against IT on
     every page: on home the column carries a reveal transform (will-change:
     transform), which makes it the containing block whatever `position` says,
     while on contact it does not. Pinning it here keeps the icon identical
     across all three rather than depending on animation state. */
  .uip-contact-head .uip-team-row > .e-con:last-child{
    position:relative !important;
    flex:1 1 auto !important; width:auto !important; min-width:0 !important;
    align-self:stretch !important; height:auto !important;
    padding:0 !important; margin:0 !important;
    align-items:flex-start !important; justify-content:center !important;
    gap:0 !important; row-gap:0 !important;
  }
  /* the icon is excluded - a forced width would over-constrain its absolute box */
  .uip-contact-head .uip-team-row > .e-con:last-child > .elementor-widget:not(.elementor-widget-icon){
    width:100% !important; margin:0 !important; padding-right:38px !important;
  }
  /* text-align:left matters: the widgets are full width, so the name inherits
     the desktop centre alignment and floats away from the designation under it. */
  .uip-contact-head .uip-team-row > .e-con:last-child > .elementor-widget,
  .uip-contact-head .uip-team-row .elementor-widget-container{
    text-align:left !important;
  }
  .uip-contact-head .uip-team-row .elementor-heading-title{
    font-size:15px !important; line-height:1.28 !important; font-weight:600 !important;
    margin:0 !important; white-space:nowrap !important; text-align:left !important;
    overflow:hidden !important; text-overflow:ellipsis !important;
  }
  .uip-contact-head .uip-team-row .elementor-widget-text-editor,
  .uip-contact-head .uip-team-row .elementor-widget-text-editor *{
    font-size:12px !important; line-height:1.35 !important;
    margin:0 !important; white-space:nowrap !important; text-align:left !important;
  }

  /* LinkedIn: un-hide (scoped to team rows) and pin to the card's top-right.
     left:auto matters - an absolute box with both a width and `right` set
     resolves `left` to a negative value and slides back over the avatar. */
  .uip-contact-head .uip-team-row .elementor-widget.elementor-widget-icon,
  .uip-contact-head .uip-team-row .elementor-widget.elementor-hidden-mobile{
    display:block !important;
    position:absolute !important;
    top:0 !important; right:0 !important; left:auto !important; bottom:auto !important;
    transform:none !important;
    width:auto !important; max-width:none !important; min-width:0 !important;
    height:auto !important; margin:0 !important; padding:0 !important;
  }
  .uip-contact-head .uip-team-row .elementor-widget-icon .elementor-icon-wrapper{
    line-height:0 !important; text-align:right !important;
  }
  /* Elementor's per-widget CSS sizes .elementor-icon at (0,4,0); match it and
     win on order, and reset box-sizing so the chip is exactly 30px. */
  .uip-contact-head .uip-team-row .elementor-widget-icon .elementor-icon{
    box-sizing:border-box !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    width:30px !important; height:30px !important;
    min-width:0 !important; max-width:none !important;
    padding:0 !important; margin:0 !important;
    border-radius:9px !important; font-size:15px !important;
    background:rgba(0,168,187,.10) !important; color:#00A8BB !important;
    transition:background .2s ease, color .2s ease;
  }
  .uip-contact-head .uip-team-row .elementor-widget-icon .elementor-icon:hover{
    background:#00A8BB !important; color:#ffffff !important; }
  .uip-contact-head .uip-team-row .elementor-widget-icon .elementor-icon svg{
    width:15px !important; height:15px !important; fill:currentColor !important; }

  /* ---------- 4. navbar: match the logo inset to the hamburger ----------
     The logo column centres its image, so the mark sat ~71px from the left
     while [VZ-33] puts the hamburger 47px from the right. Left-align the image
     and set the pill's left padding to (pill padding-right 12 + burger column
     inset 4) so both marks land at the same visual inset. */
  .uip-nav-rail .uip-nav-shell{ padding-left:16px !important; }
  .uip-nav-rail .uip-nav-shell > .e-con.e-child:first-child{
    align-items:flex-start !important; justify-content:center !important;
  }
  .uip-nav-rail .uip-nav-shell > .e-con.e-child:first-child .elementor-widget-image,
  .uip-nav-rail .uip-nav-shell > .e-con.e-child:first-child .elementor-widget-container,
  .uip-nav-rail .uip-nav-shell > .e-con.e-child:first-child a,
  .uip-nav-rail .uip-nav-shell > .e-con.e-child:first-child img{
    margin-left:0 !important; margin-right:auto !important; text-align:left !important;
  }
}

/* [VZ-38] Navbar inset tune, shared-hero + Who-We-Are consistency, form CTA gap.

   Audit behind this (measured at 1440 across all 9 top-level pages):
     hero dark #080a0f ... home, services, projects, technologies, it-support
     hero old teal image .. about, contact, partners-program
     who we are ........... home (3 pillars + intro) and about (6 pillars, no intro)
   So "dark" is the established treatment and three pages were still on the old
   teal artwork; [UIP-M7] had applied dark to .uip-abhero but scoped it to
   max-width:767px, which is exactly the mobile/desktop split reported. */

/* ---- 1. mobile navbar: ease both marks off the screen edges (47px -> 61px) ---- */
@media (max-width:767px){
  .uip-nav-rail .uip-nav-shell{ padding-left:30px !important; }
  .uip-nav-rail .uip-nav-shell > .e-con.e-child:last-child{ padding-right:18px !important; }
  .uip-nav-rail .uip-nav-shell > .e-con.e-child:has(.elementskit-menu-hamburger){
    padding-right:18px !important; }
}

/* ---- 2. shared hero: the dark treatment at every width, not just mobile ----
   Same values as [UIP-M7] so mobile is unchanged; this lifts the max-width:767px
   scoping so about / contact / partners match the pages that were already dark.
   The old teal artwork is a background-image, hence the explicit none. */
.uip-abhero{
  background:#080a0f !important; background-color:#080a0f !important;
  background-image:none !important;
  position:relative !important; overflow:hidden !important;
}
.uip-abhero::after{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:150%;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 42% at 30% 30%, rgba(0,168,187,.42), transparent 70%),
    radial-gradient(34% 40% at 72% 28%, rgba(79,217,232,.28), transparent 70%),
    radial-gradient(40% 44% at 52% 68%, rgba(0,120,150,.32), transparent 72%);
  filter:blur(30px); opacity:.9;
}
.uip-abhero > *{ position:relative; z-index:1; }
/* the accent was dark teal for the light artwork - invisible on #080a0f */
.uip-abhero-title span{ color:#4fd9e8 !important; }

/* ---- 3. Who We Are: same design wherever the section appears ----
   [UIP-17] removed the pillar dividers by naming two homepage element ids
   (.elementor-element-8f5e4e3 / -6c59b23), so About kept its rules. Target the
   tagged pillar instead, which is page-agnostic. */
.uip-who .uip-who-pillar,
.uip-who .uip-who-pillar > .e-con,
.uip-who .uip-who-pillar .elementor-widget-container{
  border-left:0 !important; border-right:0 !important;
}
/* About nests a second matching container inside each pillar, so [UIP-17]'s
   `padding:0 26px` was applied twice and indented the column further than the
   homepage. Neutralise the inner one. */
.uip-who .uip-who-pillar .uip-who-pillar{ padding:0 !important; }
/* the intro is tagged .uip-who-sub by the [VZ-38] JS module on every page */
.uip-who .uip-who-sub{ max-width:820px; margin-bottom:14px; }

/* ---- 4. contact form: separate the submit from the call CTA ----
   They read as attached: the CTA sat 15px under the button with its rule almost
   touching it. Push the divider down and give the text room under it. */
@media (max-width:767px){
  /* Elementor's field wrapper carries margin-bottom:-30px (its row-gutter
     compensation), which collapses through the form and ate most of the gap.
     The field groups already have explicit margins from [VZ-37], so zeroing it
     is safe and makes the spacing below the button predictable. */
  .uip-contact-head .elementor-form-fields-wrapper{ margin-bottom:0 !important; }
  .uip-contact-head .elementor-widget-form > .elementor-widget-container > a{
    margin-top:26px !important; padding-top:18px !important;
  }
  .uip-contact-head .elementor-field-group.elementor-field-type-submit{
    margin-bottom:0 !important;
  }
}

/* [VZ-39] "Who We Are" mobile: apply the [VZ-14] card design wherever the
   section appears, not just on the homepage.

   [VZ-14] built the mobile design - full-width card, 56px uncropped icon beside
   the heading, description spanning below - but every selector named the
   homepage ids (.elementor-element-dd68b20 / -5525a26). The About page uses
   8d43125 / ca59dd0, so it kept the old compressed layout: the 150px desktop
   image squashed to 59px wide, heading pushed under it, and a 123px text
   column. Measured at 390px before this fix:
       home  icon 56x56, heading beside it at x=141, description 216px, section 1357px tall
       about icon 59x150, heading below at x=81,  description 123px, section 1842px tall
   The two sections have identical DOM shape, so the same rules re-expressed
   against the .uip-who / .uip-who-pillar hooks cover both (and any future page).
   Values are copied from [VZ-14] verbatim so the homepage renders unchanged. */
@media (max-width:767px){
  /* the stack of items */
  .uip-who .e-con:has(> .uip-who-pillar){ row-gap:14px !important; }

  /* each item -> card with a 2-col grid: icon | heading, description spans */
  .uip-who .uip-who-pillar{
    display:grid !important;
    grid-template-columns:56px 1fr !important;
    grid-template-rows:auto auto !important;
    column-gap:14px !important; row-gap:10px !important;
    align-items:center !important;
    width:100% !important; max-width:100% !important;
    background:#ffffff !important;
    border:1px solid rgba(13,23,33,.08) !important;
    border-radius:16px !important;
    padding:18px 16px !important;
    box-shadow:0 2px 10px rgba(13,23,33,.04) !important;
  }
  /* icon: fixed square, never cropped */
  .uip-who .uip-who-pillar > .elementor-widget-image{
    grid-column:1 !important; grid-row:1 !important;
    width:56px !important; max-width:56px !important;
  }
  .uip-who .uip-who-pillar > .elementor-widget-image img{
    width:56px !important; height:56px !important;
    max-width:56px !important; object-fit:contain !important;
  }
  /* dissolve the inner text container so heading/description join the grid */
  .uip-who .uip-who-pillar > .e-con{ display:contents !important; }
  .uip-who .uip-who-pillar > .e-con > .elementor-widget-heading{
    grid-column:2 !important; grid-row:1 !important;
    width:100% !important; max-width:100% !important;
  }
  .uip-who .uip-who-pillar > .e-con > .elementor-widget-text-editor{
    grid-column:1 / -1 !important; grid-row:2 !important;
    width:100% !important; max-width:100% !important;
  }
  /* a nested duplicate pillar must not re-apply the card chrome */
  .uip-who .uip-who-pillar .uip-who-pillar{
    display:contents !important; background:none !important;
    border:0 !important; box-shadow:none !important; padding:0 !important;
  }
}

/* The About intro carries a hard <br> authored for the old narrow column, which
   breaks "Long-Term" across lines mid-word at every width. Let the paragraph
   reflow instead - the copy itself is untouched. */
.uip-who .uip-who-sub br{ display:none !important; }

/* [VZ-40] Dropdown caret alignment - desktop nav and mobile drawer.

   Desktop: the caret is an icon-font <i> whose line box is 13.2px tall against
   an 11px glyph, so its box centre sat below the label's optical centre (the
   labels have no descenders, so their ink sits high in the line box). Give the
   caret a square, flex-centred box and nudge it up a hair. `top` is used rather
   than a transform because [UIP-13] and [VZ-35] already own `transform` on this
   element for the open-state rotation.

   Mobile: the caret carried its own 18x26 pill outline (border + 30px radius)
   with the glyph filling it edge to edge - the "arrows touching the box" in the
   ticket. Make it a proper 30px circle with the glyph centred inside, so the
   180deg rotation between states pivots about the centre of a square box and
   stays centred. Alignment only - the toggle behaviour from [VZ-35] is untouched. */

/* ---- desktop ---- */
@media (min-width:1025px){
  .uip-nav-rail .elementskit-navbar-nav > li > a > .elementskit-submenu-indicator{
    display:inline-flex !important;
    align-items:center !important; justify-content:center !important;
    width:12px !important; height:12px !important;
    line-height:1 !important;
    margin:0 0 0 7px !important; padding:0 !important;
    position:relative !important; top:-1px !important;
    vertical-align:middle !important;
  }
}

/* ---- mobile drawer ---- */
@media (max-width:1024px){
  .uip-sub-toggle .elementskit-submenu-indicator{
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important; justify-content:center !important;
    width:30px !important; height:30px !important;
    min-width:30px !important; max-width:30px !important;
    padding:0 !important; margin:0 !important;
    border:1px solid rgba(255,255,255,.28) !important;
    border-radius:50% !important;
    font-size:12px !important; line-height:1 !important;
    color:#ffffff !important;
    transition:transform .25s cubic-bezier(.16,1,.3,1), border-color .2s ease, background .2s ease;
  }
  .uip-sub-toggle:hover .elementskit-submenu-indicator,
  .elementskit-navbar-nav li.uip-sub-open > .uip-sub-toggle .elementskit-submenu-indicator{
    border-color:rgba(255,255,255,.5) !important;
    background:rgba(255,255,255,.06) !important;
  }
}

/* [VZ-41] Subcategory list - mobile card design (Services / Technologies /
   IT Support category pages). Markup is built by the [VZ-41] module in
   v360-uiplus.js. The host container is already elementor-hidden-desktop /
   -hidden-tablet, so desktop and tablet never render this; the media query is
   belt-and-braces. Descriptions are clamped to two lines rather than rewritten,
   so the published copy is never altered. */
@media (max-width:767px){
  .uip-sub-host > .uip-sub-old{ display:none !important; }

  .uip-sub{ display:flex; flex-direction:column; gap:10px; width:100%; }

  .uip-sub-item{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:12px; row-gap:5px;
    align-items:start;
    background:#ffffff;
    border:1px solid rgba(15,23,32,.09);
    border-radius:14px;
    padding:14px 16px;
    box-shadow:0 3px 12px rgba(2,10,14,.05);
  }
  /* number: no box, brand teal, tabular so 01-12 align */
  .uip-sub-n{
    grid-column:1; grid-row:1;
    font-size:15px; font-weight:700; line-height:1.35;
    color:#00A8BB;
    font-variant-numeric:tabular-nums;
    letter-spacing:.2px;
  }
  .uip-sub-t{
    grid-column:2; grid-row:1;
    font-size:15px; font-weight:600; line-height:1.35;
    color:#10111a; margin:0;
    font-family:"Montserrat",Sans-serif;
  }
  /* description sits under the heading, not under the number */
  .uip-sub-d{
    grid-column:2; grid-row:2;
    font-size:12.5px; line-height:1.5;
    color:#5f6570; margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .uip-sub-item.is-extra{ display:none; }
  .uip-sub.is-open .uip-sub-item.is-extra{ display:grid; }

  .uip-sub-more{
    display:flex !important; align-items:center; justify-content:center; gap:9px;
    width:100%; margin:0; padding:15px 18px;
    background:#0d1117 !important; color:#ffffff !important;
    border:0 !important; border-radius:14px !important;
    box-shadow:none !important; -webkit-appearance:none; appearance:none;
    font-family:"Montserrat",Sans-serif;
    font-size:14px; font-weight:600; letter-spacing:.2px;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .uip-sub-more:hover, .uip-sub-more:focus, .uip-sub-more:active{
    background:#0d1117 !important; color:#ffffff !important;
    border:0 !important; outline:none !important;
  }
  .uip-sub-more:focus-visible{ outline:2px solid #4fd9e8 !important; outline-offset:2px; }
  .uip-sub-more svg{ display:block; transition:transform .25s cubic-bezier(.16,1,.3,1); }
  .uip-sub.is-open .uip-sub-more svg{ transform:rotate(180deg); }

  @media (prefers-reduced-motion: reduce){
    .uip-sub-more svg{ transition:none; }
  }
}

/* [VZ-42] Subcategory cards: make the number a real visual anchor.
   It was 15px - the same size as the heading beside it - so it read as a label
   rather than an ordinal. Span it across both grid rows (heading + description)
   and centre it against that block, so it grows without making the card taller:
   the text column stays the tallest element, which is what sets card height.
   Colour, tabular figures and the [VZ-41] behaviour are unchanged. */
@media (max-width:767px){
  /* explicit rows matter: with only implicit rows, `grid-row:1 / -1` resolves
     -1 against the (empty) explicit grid and spans a single row, which left the
     number pinned beside the heading instead of centred on the pair. */
  .uip-sub-item{
    column-gap:14px !important;
    grid-template-rows:auto auto !important;
  }
  .uip-sub-n{
    grid-column:1 !important;
    grid-row:1 / -1 !important;      /* spans heading + description */
    align-self:start !important;     /* top-aligned with the heading */
    display:flex !important; align-items:flex-start !important;
    /* the boxes align exactly, but a 44px numeral's ink starts ~3px below a
       15px heading's cap line, so nudge it up to sit optically flush */
    margin-top:-3px !important;
    font-size:44px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:-1.5px !important;
    color:#00A8BB !important;
    font-variant-numeric:tabular-nums !important;
    white-space:nowrap !important;
    min-width:0 !important;
  }
  /* keep every card the same height even when a description runs short */
  .uip-sub-d{ min-height:calc(2 * 1.5 * 12.5px) !important; }
}

/* [VZ-43] Subcategory cards: one height for every card, without padding out the
   short ones.

   Point 6, approved 2026-09-04. Measured at 390px across all 42 category pages
   in headless Chrome, cards came in three heights, not two:
     93px  - 338 cards (one-line heading)
     113px - 153 cards (two-line heading)
     133px -   1 card  (three-line heading: services/blockchain item 08)

   The description was never the variable. [VZ-42] already pins it to a two-line
   slot, and every approved [VZ-43] short description measures exactly two lines.
   The height came only from how many lines the HEADING took.

   The obvious fix - reserve two heading lines on every card - was rejected: it
   drops visible empty space under every one-line heading, which is the thing we
   were asked to avoid. Instead the card takes one height and the heading +
   description block is centred inside it, so the leftover space becomes balanced
   breathing room above and below rather than a gap under the title. The number
   still sits optically flush with the heading's first line, because it is
   aligned to the start of that centred block.

   The heading is capped at two lines so one very long title cannot push a single
   card taller than every other card on the site.

   Revert: delete this block - cards return to their natural 93/113/133px. */
@media (max-width:767px){
  .uip-sub-item{
    /* two heading lines + row gap + two description lines + padding + borders */
    min-height:calc(2 * 15px * 1.35 + 5px + 2 * 12.5px * 1.5 + 28px + 2px) !important;
    align-content:center !important;
  }
  .uip-sub-t{
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
}

/* [VZ-44] Tablet navbar (768-1024px): logo left, hamburger and CTA together right.

   Point 4, approved 2026-09-04. Layout only - the navigation behaviour, drawer,
   submenu carets and the hamburger's own toggle are untouched.

   Before: the hamburger's column was 566px wide and centred its contents, so the
   icon floated in the middle of the bar, and "Talk To Us" wrapped onto two lines
   (measured 64px tall at 768 and 900, against 50px at 1025 where it fits).

   Columns are tagged by [VZ-44] in v360-uiplus.js rather than addressed by
   element id, so the careers/blog header template (1494) is covered too -
   verified identical there.

   Target: Logo - [ space ] - Hamburger - 24px - Talk To Us

   The 24px is the real measured gap between the icon and the button. The shell
   contributes a 20px flex gap and each column carries 10px of side padding, so
   the two facing paddings are zeroed and the shell gap is set to 24px; the CTA
   column keeps its right padding so the button stays inset from the pill edge.

   Revert: delete this block. */
@media (min-width:768px) and (max-width:1024px){
  .uip-nav-shell{ column-gap:24px !important; }

  /* hug the icon and push the pair to the right */
  .uip-nav-shell > .uip-nav-burgercol{
    flex:0 0 auto !important;
    width:auto !important;
    margin-left:auto !important;
    justify-content:flex-end !important;
    padding-right:0 !important;
  }
  .uip-nav-shell > .uip-nav-ctacol{
    flex:0 0 auto !important;
    width:auto !important;
    margin-left:0 !important;
    padding-left:0 !important;
    justify-content:flex-end !important;
  }

  /* the column was 107px, so "Talk To Us" broke onto two lines - let the button
     size to its own text and stay on one line */
  .uip-nav-ctacol .elementor-widget-button,
  .uip-nav-ctacol .elementor-button-wrapper{ width:auto !important; }
  .uip-nav-ctacol .elementor-button{
    white-space:nowrap !important;
    width:auto !important;
  }
}

/* [VZ-45] FAQ - the approved editorial split, applied by class on every page.

   Point 5, approved 2026-09-04. This is [UIP-25]'s design expressed against the
   .uip-faq / .uip-faq-aside / .uip-faq-list hooks that [VZ-45] in
   v360-uiplus.js applies, instead of one page's element id. It therefore covers
   home, contact, services, technologies and it-support from a single rule set,
   and any FAQ added later.

   [UIP-25] is left in place: it targets the homepage id and sets the same
   values, so it is now redundant rather than conflicting. [UIP-39b/c] still
   does useful left-align/stretch work on contact.

   Revert: delete this block and the [VZ-45] JS module. */
.uip-faq > .e-con-inner{
  display:grid !important;
  grid-template-columns:minmax(300px,400px) 1fr !important;
  gap:64px !important;
  align-items:start !important;
}
.uip-faq-aside{ position:sticky; top:120px; min-width:0; }
.uip-faq-aside > *{ width:100% !important; max-width:100% !important; }
.uip-faq-list{ min-width:0; width:100% !important; max-width:none !important; }

/* strip any prior card look; pure typographic rows */
.uip-faq .e-n-accordion{ display:block; }
.uip-faq .e-n-accordion-item{
  background:none !important; border:0 !important; border-top:1px solid #e5eaee !important;
  border-radius:0 !important; box-shadow:none !important; transform:none !important;
  overflow:hidden; }
.uip-faq .e-n-accordion-item:last-of-type{ border-bottom:1px solid #e5eaee !important; }
.uip-faq summary.e-n-accordion-item-title{
  display:flex; align-items:center; gap:20px;
  padding:24px 2px !important; cursor:pointer; list-style:none; border:0 !important; }
.uip-faq .e-n-accordion-item-title-text{
  font-size:18px !important; font-weight:600 !important; color:#10111a !important;
  line-height:1.45; transition:color .25s ease; }
.uip-faq summary:hover .e-n-accordion-item-title-text{ color:#00A8BB !important; }

/* thin plus -> x, matching the homepage */
.uip-faq summary.e-n-accordion-item-title .e-n-accordion-item-title-icon,
.uip-faq .e-n-accordion-item-title-icon,
.uip-faq .e-n-accordion-item-title-icon .e-opened,
.uip-faq .e-n-accordion-item-title-icon .e-closed{ display:none !important; }
.uip-faq summary.e-n-accordion-item-title::after{
  content:"+"; margin-left:auto; flex:0 0 auto;
  font-family:"Open Sans",Sans-serif; font-size:26px; font-weight:300; line-height:1; color:#9aa1ab;
  transition:transform .4s cubic-bezier(.16,1,.3,1), color .3s ease; }
.uip-faq .e-n-accordion-item[open] > summary::after{ transform:rotate(45deg); color:#00A8BB; }

.uip-faq .e-n-accordion-item > .e-con{ border:0 !important; margin:0 !important; padding:0 0 26px !important; }
.uip-faq .e-n-accordion-item .e-con-inner{ padding:0 !important; }
.uip-faq .e-n-accordion-item p,
.uip-faq .e-n-accordion-item li{
  font-size:15.5px !important; line-height:1.75 !important; color:#454a54 !important; }
.uip-faq .e-n-accordion-item .e-con p{ max-width:720px; }

@media (max-width:1024px){
  .uip-faq > .e-con-inner{ grid-template-columns:1fr !important; gap:30px !important; }
  .uip-faq-aside{ position:static; }
  .uip-faq .e-n-accordion-item-title-text{ font-size:16.5px !important; }
}

/* [VZ-47] Mobile "Our Services" grid redesign (homepage section 932112a, which
   carries elementor-hidden-desktop + elementor-hidden-tablet, so it renders at
   <=767px ONLY - the desktop/tablet section is the separate 58c4b86 duplicate
   and is never touched by this block).

   Before: 2 cards per row at --width:46%, each card carrying icon + title +
   the [UIP-3] description + a "Read More" button, with only 3 services shown
   and a black absolutely-positioned "+ 13 More" tile (e5fffe1) covering the
   4th card; the remaining 13 lived in a second container (aaf087d).

   After: one flat 3-per-row grid of icon+title tiles built by [VZ-47] in the
   JS overlay, first 6 shown, the rest behind a "+N More" / "Show Less" toggle.
   Descriptions and Read More buttons are dropped on mobile (they come back
   untouched on desktop, which uses its own section).

   Desktop safety: .uip-msvc / .uip-msvc-more are display:none at every width
   and are only switched on inside the max-width:767px query below, so even if
   Elementor's hidden-desktop class were ever removed this grid cannot paint on
   desktop. The originals are only hidden inside the same query.

   Revert: delete this block and the [VZ-47] block in v360-uiplus.js. */
.uip-msvc,
.uip-msvc-wrap,
.uip-msvc-more{ display:none !important; }

@media (max-width:767px){
  /* the two original card containers (8cd6f4d = first row + dark tile,
     aaf087d = services-content-1 overflow panel) stay in the DOM so the
     page's own inline toggle script keeps finding its nodes - just unpainted */
  .uip-msvc-off{ display:none !important; }

  .uip-msvc-wrap{
    display:flex !important; flex-direction:column; align-items:center;
    gap:16px; width:100%; box-sizing:border-box;
  }

  /* minmax(0,1fr) is what makes horizontal overflow impossible: a long word in
     a title can never push a track wider than a third of the row */
  .uip-msvc{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr));
    grid-auto-rows:1fr;                /* every row matches the tallest -> uniform tile height */
    gap:clamp(7px,2.5vw,11px);
    width:100%;
    box-sizing:border-box;
  }

  .uip-msvc-card{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    height:100%;
    gap:9px;
    min-width:0;                       /* ditto - lets the flex item shrink */
    padding:14px 6px 13px;
    background:#ffffff;
    border:1px solid #E7E7E7;          /* same border + radius as the original cards */
    border-radius:15px;
    text-decoration:none;
    text-align:center;
    overflow:hidden;
    -webkit-tap-highlight-color:transparent;
    transition:border-color .25s ease, box-shadow .25s ease, transform .2s ease;
  }
  .uip-msvc-card:active{ transform:scale(.97); }
  .uip-msvc-card:hover{ border-color:#00A8BB; box-shadow:0 6px 18px rgba(13,23,33,.07); }
  .uip-msvc-card:focus-visible{ outline:2px solid #00A8BB; outline-offset:2px; }

  /* the icon widget node is the page's own element, MOVED (not cloned) into the
     card by the JS block, so its stacked purple chip + [VZ-32] localized SVG
     defs survive intact; these rules only rescale it for a 3-up row.
     !important because Elementor's per-element rules
     (.elementor-element-<id> .elementor-icon{font-size:30px;padding:10px}) are
     more specific than anything scoped to .uip-msvc. */
  .uip-msvc-ico{ display:flex; align-items:center; justify-content:center; }
  .uip-msvc-ico > .elementor-widget-container{ display:flex; }
  .uip-msvc .elementor-icon-wrapper{ text-align:center !important; line-height:0; }
  .uip-msvc .elementor-icon{
    display:inline-flex !important; align-items:center; justify-content:center;
    padding:8px !important;
    border-radius:11px !important;
  }
  .uip-msvc .elementor-icon svg{
    width:clamp(17px,5vw,21px) !important;
    height:clamp(17px,5vw,21px) !important;
    display:block;
  }

  .uip-msvc-t{
    width:100%;
    font-family:"Montserrat", Sans-serif;
    font-size:clamp(10.5px,3.05vw,12.5px);
    font-weight:600;
    line-height:1.3;
    color:#10111A;
    overflow-wrap:break-word;
    hyphens:auto;
  }

  /* collapsed state */
  .uip-msvc:not(.is-open) .uip-msvc-x{ display:none; }

  .uip-msvc-more{
    display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
    margin:0 auto;
    padding:11px 26px;
    font-family:"Montserrat", Sans-serif;
    font-size:13.5px; font-weight:600; line-height:1;
    /* the theme ships button{background:transparent;color:#c36} which was
       winning the cascade and painting this pill Elementor-default pink */
    color:#ffffff !important; background:#10111A !important;
    border:0 !important; border-radius:999px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .25s ease, transform .2s ease;
  }
  .uip-msvc-more:active{ transform:scale(.97); }
  .uip-msvc-more:hover{ background:#00A8BB !important; }
  .uip-msvc-more:focus-visible{ outline:2px solid #00A8BB; outline-offset:3px; }
  .uip-msvc-more::after{
    content:""; width:7px; height:7px; margin-top:-3px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    transition:transform .3s ease;
  }
  .uip-msvc-more[aria-expanded="true"]::after{ transform:rotate(-135deg); margin-top:2px; }

  .uip-msvc.is-open .uip-msvc-x{
    animation:uip-msvc-in .38s cubic-bezier(.16,1,.3,1) both;
    animation-delay:var(--uip-d,0s);
  }
  @keyframes uip-msvc-in{
    from{ opacity:0; transform:translateY(9px); }
    to  { opacity:1; transform:none; }
  }
  @media (prefers-reduced-motion:reduce){
    .uip-msvc.is-open .uip-msvc-x{ animation:none; }
    .uip-msvc-card, .uip-msvc-more{ transition:none; }
  }
}

/* ============================================================================
   [VZ-48] .. [VZ-58] — mobile homepage pass 2. Everything here is additive;
   delete a block to revert that one change. Except where a block says
   otherwise, every rule sits inside @media (max-width:767px) so the
   desktop/tablet rendering is untouched.
   ========================================================================= */

/* [VZ-53] Point 1 — one horizontal content edge for the whole page.
   Measured left/right content insets at 390px before this block:
     Our Services 40, How we do it 40, tabs 40, FAQ 40   <- the majority
     Who We Are   71   (section 24 + boxed-inner centring 17 + 20 + 10)
     Contact Us   25
     Projects     30, How-we-do-it cards 30  (carousel widgets)
   "Our Services" and "How we do it" are the reference, so everything lands
   on a 40px edge. The tech-logo marquee (47aa503) is deliberately left
   full-bleed - it is a decorative scrolling strip, not page content. */
@media (max-width:767px){
  /* Who We Are and Contact Us both sat inside a narrower, centred boxed
     inner ([UIP-17]/[UIP-19] give .uip-who a 48px inset and .uip-contact-head
     a 7x-repeated 12px rule), so the only reliable way to land on 40 is to
     let the section run full width, zero its own side padding, and put the
     whole inset on the inner. Selectors are repeated to outrank those
     existing !important rules - the overlay stylesheet is linked before
     Elementor's, so equal specificity always loses here. */
  .elementor-element-dd68b20.elementor-element-dd68b20.elementor-element-dd68b20.elementor-element-dd68b20.elementor-element-dd68b20.elementor-element-dd68b20.elementor-element-dd68b20.elementor-element-dd68b20{
    --content-width:none;
    max-width:none !important; width:auto !important;
    margin-left:0 !important; margin-right:0 !important;
    padding-left:0 !important; padding-right:0 !important;
  }
  /* 29 here + the pillar's own 10 + the inner's 1px offset = the 40px edge */
  .elementor-element-dd68b20.elementor-element-dd68b20.elementor-element-dd68b20.elementor-element-dd68b20.elementor-element-dd68b20.elementor-element-dd68b20.elementor-element-dd68b20.elementor-element-dd68b20 > .e-con-inner{
    max-width:none !important; width:100% !important;
    padding-left:29px !important; padding-right:29px !important;
  }
  .elementor-element-4a251ae.elementor-element-4a251ae.elementor-element-4a251ae.elementor-element-4a251ae.elementor-element-4a251ae.elementor-element-4a251ae.elementor-element-4a251ae.elementor-element-4a251ae{
    --content-width:none;
    max-width:none !important; width:auto !important;
    margin-left:0 !important; margin-right:0 !important;
    padding-left:0 !important; padding-right:0 !important;
  }
  /* Contact Us children carry no padding of their own, so the full 40 here */
  .elementor-element-4a251ae.elementor-element-4a251ae.elementor-element-4a251ae.elementor-element-4a251ae.elementor-element-4a251ae.elementor-element-4a251ae.elementor-element-4a251ae.elementor-element-4a251ae > .e-con-inner{
    max-width:none !important; width:100% !important;
    padding-left:39px !important; padding-right:39px !important;
  }
  /* How-we-do-it cards: no heading in this section, so the inset goes on
     the inner and the carousel lands on 40 */
  .elementor-element-f828c8e.elementor-element-f828c8e.elementor-element-f828c8e.elementor-element-f828c8e.elementor-element-f828c8e > .e-con-inner{
    padding-left:30px !important; padding-right:30px !important;
  }
  /* Projects: the heading block already sits 10px inside its own wrapper, so
     padding the inner would push the heading to 50. Leave the inner at 20 and
     nudge only the carousel column, which has no such wrapper. */
  .elementor-element-a119d5b.elementor-element-a119d5b.elementor-element-a119d5b.elementor-element-a119d5b.elementor-element-a119d5b > .e-con-inner{
    padding-left:20px !important; padding-right:20px !important;
  }
  .elementor-element-a119d5b .elementor-element-f7a2d8d{
    padding-left:10px !important; padding-right:10px !important;
  }
  /* footer content edge (mobile footer template) */
  .elementor-location-footer .elementor-element-7a6c24d > .e-con-inner{
    padding-left:20px !important; padding-right:20px !important;
  }
}

/* [VZ-54] Point 14 — section headings: one size, centred, across the page.
   Before this the mobile headings were all 32px but left-aligned, except
   the ones inside carousels. [VZ-21] had deliberately left-aligned the
   "Our Services" heading + subtitle to match the others; this ticket
   reverses that decision for every section at once, so that rule is
   overridden here rather than edited in place. */
@media (max-width:767px){
  .elementor-element-932112a .elementor-element-edbd213,
  .elementor-element-932112a .elementor-element-17c0f08{
    align-self:stretch !important;
  }
  .elementor-element-932112a .elementor-element-edbd213 *,
  .elementor-element-932112a .elementor-element-17c0f08 *,
  .uip-sechead, .uip-sechead *,
  .elementor-element-932112a > .e-con-inner > .elementor-widget-heading .elementor-heading-title,
  .elementor-element-458344b .elementor-heading-title,
  .elementor-element-dd68b20 .elementor-element-ed242eb .elementor-heading-title,
  /* only the section heading here - this used to read
     ".elementor-element-a119d5b > .e-con-inner .elementor-heading-title",
     which also matched every project card title and centred them */
  .elementor-element-a119d5b .uip-sechead .elementor-heading-title,
  .elementor-element-4a251ae > .e-con-inner > .e-con > .elementor-widget-heading .elementor-heading-title,
  .elementor-element-f10f5ed .uip-faq-head .elementor-heading-title{
    text-align:center !important;
  }
  /* one type size for every section heading */
  .uip-sechead .elementor-heading-title,
  .elementor-element-932112a .elementor-element-edbd213 .elementor-heading-title,
  .elementor-element-dd68b20 .elementor-element-ed242eb .elementor-heading-title{
    font-size:32px !important; line-height:1.2 !important;
  }
  .elementor-element-5f98653.elementor-element-5f98653.elementor-element-5f98653.elementor-element-5f98653 h2.elementor-heading-title{
    text-align:center !important;
  }
  /* the sub-line under each heading follows its heading */
  .uip-hwdi-sub, .uip-hwdi-sub *,
  .uip-who-sub, .uip-who-sub *,
  .elementor-element-932112a .elementor-element-17c0f08 p{
    text-align:center !important;
  }
}

/* [VZ-55] Point 2 — "How we do it": the gap between the sub-line and the
   first card measured 84px while the heading -> sub-line gap is 34px.
   The 84 came from three stacked sources: the text section's bottom
   padding, the card section's top padding, and 44px of padding inside the
   card itself. Trim all three so the two gaps read the same. */
@media (max-width:767px){
  .elementor-element-458344b{ padding-bottom:0 !important; }
  .elementor-element-458344b > .e-con-inner{ padding-bottom:0 !important; row-gap:14px !important; }
  .elementor-element-f828c8e{ padding-top:0 !important; }
  .elementor-element-f828c8e > .e-con-inner{ padding-top:0 !important; }
}

/* [VZ-49] Point 3 — "How we do it" cards.
   One image height (was 237 / 230 / 190), one card order (Insightful
   Strategies had its image below the text), wider cards (the 40px side
   padding left a 230px card inside a 330px slide) and equal heights.
   Halves are tagged .uip-hwdi-img / .uip-hwdi-body by the [VZ-49] JS. */
@media (max-width:767px){
  .uip-hwdi-carousel .swiper-slide{ height:auto !important; }
  .uip-hwdi-card{
    display:flex !important; flex-direction:column !important;
    padding:16px 6px !important;
    width:100% !important; height:100% !important;
    gap:0 !important;
  }
  .uip-hwdi-img{
    order:0 !important;                /* image always first, all 3 cards */
    height:170px !important; min-height:170px !important; max-height:170px !important;
    padding:10px !important; box-sizing:border-box;
    display:flex !important; align-items:center; justify-content:center;
    overflow:hidden;
  }
  /* Insightful Strategies nests its image one container deeper */
  .uip-hwdi-img > .e-con{
    height:100% !important; width:100% !important; padding:0 !important;
    display:flex !important; align-items:center; justify-content:center;
  }
  .uip-hwdi-img .elementor-widget-image,
  .uip-hwdi-img .elementor-widget-image .elementor-widget-container{
    height:100% !important; width:100% !important; margin:0 !important; padding:0 !important;
    display:flex !important; align-items:center; justify-content:center;
  }
  .uip-hwdi-img img{
    height:100% !important; width:100% !important;
    object-fit:contain !important;
  }
  .uip-hwdi-body{
    order:1 !important;
    flex:1 1 auto !important;
    padding:18px 16px !important;
    display:flex !important; flex-direction:column; gap:10px;
  }
  .uip-hwdi-body .elementor-widget-heading,
  .uip-hwdi-body .elementor-widget-text-editor,
  .uip-hwdi-body .elementor-widget-button{ margin:0 !important; padding:0 !important; }
  .uip-hwdi-body .elementor-widget-button{ margin-top:auto !important; }
}

/* [VZ-56] Point 5 — tab carousels (Services / IT Support / Tech Stack):
   equal card heights. Autoplay is killed in the [VZ-51] JS block; these
   rules only stop the slides from sizing themselves independently. */
@media (max-width:767px){
  .elementor-element-0a68462 .swiper-slide{ height:auto !important; display:flex !important; }
  .elementor-element-0a68462 .swiper-slide > .e-con{
    width:100% !important; height:100% !important;
  }
  .elementor-element-0a68462 .swiper-wrapper{ align-items:stretch !important; }
}

/* [VZ-57] Point 7 — Our Projects cards, mobile.
   [UIP-19d] lays each card out as "idx | text | button" columns. At 390px
   that left the text column 106px wide, so a 122-character description
   wrapped after one or two words and ran 261px tall. Restack the same grid
   areas into a single column with the project number on top, which both
   widens the text to the full card and cuts the card height roughly in half. */
@media (max-width:767px){
  /* Country + title on the left, the 01/02/03 number pinned top-right,
     description and button spanning the full width underneath. */
  .uip-proj .uip-proj-card{
    /* an `auto` second track collapsed to 0 here and split "01" over two
       lines, so the number column is given a fixed width instead */
    grid-template-columns:1fr 44px !important;
    grid-template-areas:"chip idx" "title idx" "desc desc" "btn btn" !important;
    align-items:start !important;
    column-gap:12px !important; row-gap:6px !important;
    padding:20px 0 !important;
  }
  .uip-proj .uip-proj-card::before{
    align-self:start !important; justify-self:end !important;
    width:44px !important; text-align:right !important; white-space:nowrap !important;
  }
  /* project content stays left-aligned - the section heading is the only
     centred thing in this section */
  .uip-proj .uip-proj-card .elementor-heading-title,
  .uip-proj .uip-proj-card .elementor-widget-text-editor,
  .uip-proj .uip-proj-card .elementor-widget-text-editor *,
  .uip-proj .uip-proj-card .uip-proj-chip{
    text-align:left !important;
  }
  .uip-proj .uip-proj-card:hover{ padding-left:0 !important; }
  .uip-proj .uip-proj-card::before{
    font-size:26px !important; line-height:1 !important;
    margin-bottom:2px;
  }
  .uip-proj .uip-proj-card .elementor-widget-button{
    justify-self:start !important; margin-top:4px !important;
  }
  .uip-proj .uip-proj-card .elementor-heading-title{ font-size:20px !important; }
  .uip-proj .uip-proj-card .elementor-widget-text-editor,
  .uip-proj .uip-proj-card .elementor-widget-text-editor *{
    font-size:14px !important; line-height:1.6 !important;
  }
  /* [VZ-58] Point 8 — the swipe arrows sat far below the last card */
  .elementor-element-a119d5b .elementor-swiper-button{ margin-top:10px !important; }
  .elementor-element-a119d5b > .e-con-inner{ row-gap:14px !important; }
  .elementor-element-a119d5b .swiper{ padding-bottom:0 !important; }
}

/* [VZ-50] Point 4 — "Who We Are" pillars as a manual swipe rail.
   Dots + arrows are injected by the [VZ-50] JS block. Hidden above 768px so
   the desktop stack is untouched. */
.uip-wwa-nav{ display:none; }

@media (max-width:767px){
  .uip-wwa-track{
    display:flex !important; flex-direction:row !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important; overflow-y:hidden !important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:12px !important;
    padding-bottom:2px !important;
    align-items:stretch !important;
  }
  .uip-wwa-track::-webkit-scrollbar{ display:none; }
  .uip-wwa-card{
    flex:0 0 100% !important;
    width:100% !important; max-width:100% !important;
    scroll-snap-align:center;
    height:auto !important;
  }

  .uip-wwa-nav{
    display:flex !important; align-items:center; justify-content:center; gap:14px;
    margin-top:14px; width:100%;
  }
  /* The first pass used outlined white circles, which read as a foreign
     control, so they were restyled to match .elementor-swiper-button - and
     then dropped altogether on the next review: the three dots are now the
     whole control surface, and the rail advances itself. */
  .uip-wwa-dots{ display:flex; align-items:center; gap:7px; }
  .uip-wwa-dot{
    width:7px !important; height:7px !important; padding:0 !important;
    border:0 !important; border-radius:50% !important;
    background:#cfd8dc !important; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .25s ease;
  }
  .uip-wwa-dot.is-on{ background:#00A8BB !important; }
}

/* [VZ-59] Point 9 — Contact Us team cards: the LinkedIn control was a
   30x44 rounded rectangle. Make it a true circular icon button.
   Mobile only, per the ticket; the desktop card is unchanged. */
@media (max-width:767px){
  .uip-contact-head .uip-team-row .elementor-widget-icon a.elementor-icon[href*="linkedin"]{
    width:40px !important; height:40px !important;
    /* every axis pinned: a min-height:44px from the team-card rules beat
       max-height on its own and left the circle an oval */
    min-width:40px !important; max-width:40px !important;
    min-height:40px !important; max-height:40px !important;
    aspect-ratio:1 / 1;
    flex:0 0 40px; align-self:center !important;
    padding:0 !important; border:0 !important; box-sizing:border-box !important;
    border-radius:50% !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    /* LinkedIn brand blue with the mark knocked out in white */
    background:#0A66C2 !important;
    transition:background .25s ease, transform .2s ease;
  }
  .uip-contact-head .uip-team-row .elementor-widget-icon a.elementor-icon[href*="linkedin"] svg,
  .uip-contact-head .uip-team-row .elementor-widget-icon a.elementor-icon[href*="linkedin"] svg *{
    fill:#ffffff !important; color:#ffffff !important;
  }
  .uip-contact-head .uip-team-row .elementor-widget-icon a.elementor-icon[href*="linkedin"]:hover{
    background:#004182 !important; transform:translateY(-2px);
  }
  .uip-contact-head .uip-team-row .elementor-widget-icon a.elementor-icon[href*="linkedin"] svg{
    width:18px !important; height:18px !important; margin:0 !important;
  }
}

/* [VZ-60] Points 10-12 — footer.
   10: centre the vorza360 logo on mobile.
   11: remove the "We are located in:" block (USA + Pakistan) — this one is
       asked for on BOTH breakpoints, so the widget ids for the desktop
       footer (3209b40) and the mobile footer (7a6c24d) are both hidden and
       the rules sit outside the media query.
   12: remove the phone number, keep the sales@ email.
   The footer is a shared Elementor template, so all three apply site-wide. */
.elementor-location-footer .elementor-element-e831c83,   /* desktop: "We are located in:" */
.elementor-location-footer .elementor-element-f15baa3,   /* desktop: USA */
.elementor-location-footer .elementor-element-a3fab5a,   /* desktop: San Francisco */
.elementor-location-footer .elementor-element-ee24e03,   /* desktop: Pak */
.elementor-location-footer .elementor-element-8318ad7,   /* desktop: Lahore */
.elementor-location-footer .elementor-element-325e5b1,   /* mobile:  "We are located in:" */
.elementor-location-footer .elementor-element-c12606f,   /* mobile:  USA */
.elementor-location-footer .elementor-element-3add576,   /* mobile:  San Francisco */
.elementor-location-footer .elementor-element-f1d573c,   /* mobile:  Pak */
.elementor-location-footer .elementor-element-e9f9528,   /* mobile:  Lahore */
.elementor-location-footer .elementor-element-a58837a,   /* desktop: phone button */
.elementor-location-footer .elementor-element-6d11370{   /* mobile:  phone button */
  display:none !important;
}

@media (max-width:767px){
  .elementor-location-footer .elementor-element-c9b7ff8,
  .elementor-location-footer .elementor-element-c9b7ff8 .elementor-widget-container{
    text-align:center !important;
  }
  .elementor-location-footer .elementor-element-c9b7ff8 img{
    margin-left:auto !important; margin-right:auto !important; display:block !important;
  }
}

/* [VZ-62] Point 3 — "Who We Are" sat too far below the cards above it.
   Measured at 390px: the section carried 44px of its own top padding and its
   first child a further 30px top margin, i.e. 74px of dead space before the
   heading while the gap between the sections themselves was already 0.
   Drop the child margin and take the section padding to 18px: -56px, inside
   the 50-70px the ticket asked for, and level with the other sections. */
@media (max-width:767px){
  .elementor-element-dd68b20.elementor-element-dd68b20.elementor-element-dd68b20.elementor-element-dd68b20.elementor-element-dd68b20.elementor-element-dd68b20.elementor-element-dd68b20.elementor-element-dd68b20{
    padding-top:18px !important;
  }
  .elementor-element-dd68b20 .elementor-element-5e88805{
    margin-top:0 !important;
  }
}

/* [VZ-63] Point 5 — the Services / IT Support / Tech Stack tab labels were
   centred by the theme's own `button{text-align:center}` rule. The ticket
   wants them left-aligned; they are <button> elements, so both the text
   alignment and the flex justification have to be set. */
@media (max-width:767px){
  .elementor-element-0a68462 .e-n-tab-title,
  .elementor-element-0a68462 .e-n-tab-title-text{
    text-align:left !important;
    justify-content:flex-start !important;
  }
  .elementor-element-0a68462 .e-n-tabs-heading{ justify-content:flex-start !important; }
}

/* [VZ-64] Point 6 — cards inside those three tab carousels.
   The card boxes were already equal (303px each, from [VZ-56]); what still
   read as ragged was the content inside them. "IT Support & Management" was
   the one title that wrapped to two lines (66px vs 41px everywhere else),
   which pushed its description down and knocked that card out of step with
   the rest.

   Measured: the title column is 198px wide and the longest title needs 228px
   at the stock 19px, so 16px is the largest size that keeps every title on a
   single line. The title block is then pinned to one line's height and the
   description clamped to 4 lines, so every card has an identical internal
   rhythm no matter how long its copy is. */
@media (max-width:767px){
  .elementor-element-0a68462 .swiper-slide .elementor-widget-heading{
    margin:0 !important;
  }
  /* repeated class: an existing overlay rule
     (.elementor-element-fbbcbbb .e-n-tabs-content .e-con.e-child:has(> .elementor-widget-heading) ...)
     pins these titles at 19px !important. :has() carries the specificity of
     its argument, so that selector scores (0,6,0) - six repeats to clear it. */
  .elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462 .e-n-tabs-content .elementor-heading-title,
  .elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462 .swiper-slide .elementor-heading-title{
    /* The title column is (viewport - 162)px wide and the longest title,
       "IT Support & Management", needs ~13.6px of width per 1px of font size.
       A flat 16px therefore wraps below ~380px, so the size tracks the
       viewport: calc(7.2vw - 12px) keeps it on one line at 320 (11.6px),
       360 (13.9px) and 390 (16px, where the 16px cap takes over). */
    font-size:clamp(11.5px, calc(7.2vw - 12px), 16px) !important;
    line-height:1.35 !important;
    min-height:1.35em !important;
    text-align:left !important;
    overflow-wrap:break-word;
  }
  /* max 4 lines, identical block height on every card - same specificity
     escalation as the titles above */
  .elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462 .swiper-slide .elementor-widget-text-editor,
  .elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462 .swiper-slide .elementor-widget-text-editor p{
    font-size:14px !important;
    line-height:1.6 !important;
    text-align:left !important;
  }
  .elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462.elementor-element-0a68462 .swiper-slide .elementor-widget-text-editor p{
    /* Chrome blockifies display:-webkit-box here (computed comes back as
       flow-root), so -webkit-line-clamp never engages. Capping the height at
       exactly four line-boxes does the same job: 4 x 1.6em lands on a line
       boundary, so the cut is clean rather than through a row of text.
       Both bounds are set, so short and long copy occupy the same block. */
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden !important;
    min-height:calc(4 * 1.6em) !important;
    max-height:calc(4 * 1.6em) !important;
    margin:0 !important;
  }
  /* top-align the card contents so the shorter cards (Blockchain, SMM)
     line up with the taller ones instead of floating */
  .elementor-element-0a68462 .swiper-slide > .e-con,
  .elementor-element-0a68462 .swiper-slide > .e-con > .e-con{
    justify-content:flex-start !important;
  }
}

/* [VZ-65] Point 10 — footer gap between the logo/description block and
   Contact Us. [VZ-60] hid the "We are located in:" widgets but their
   containers stayed in the flow: the wrapper still measured 41px of empty
   space. The wrappers cannot be named by id safely (the desktop and mobile
   footers use different ones), so the [VZ-65] JS block collapses any footer
   container left with no visible widget in it. This rule just tightens what
   remains. Not inside a media query: the locations block was removed on both
   breakpoints, so both need the space reclaimed. */
.elementor-location-footer .uip-foot-empty{ display:none !important; }

@media (max-width:767px){
  .elementor-location-footer .elementor-element-7a6c24d .elementor-element-567f303{
    padding-bottom:0 !important;
  }
  .elementor-location-footer .elementor-element-7a6c24d .elementor-element-38bb3c7{
    padding-top:0 !important;
  }
}

/* [VZ-66] Point 11 — centre the copyright line on mobile. The text itself
   (trailing full stop) is set in the [VZ-52] JS block. */
@media (max-width:767px){
  .elementor-location-footer .elementor-element-cfd5f82,
  .elementor-location-footer .elementor-element-cfd5f82 *{
    text-align:center !important;
  }
}

/* [VZ-67] Point 1 — "How we do it" card headings were centred while their
   descriptions were already left-aligned. Left-align the headings so each
   card reads as one block. */
@media (max-width:767px){
  .uip-hwdi-body .elementor-widget-heading,
  .uip-hwdi-body .elementor-heading-title,
  .uip-hwdi-card .elementor-widget-heading,
  .uip-hwdi-card .elementor-heading-title{
    text-align:left !important;
  }
}

/* [VZ-68] Point 4 — Our Projects rendered its eight projects twice on mobile:
   once as the list that the existing "Show all 8 projects" button expands
   (container 5b31f21, 8 cards) and again as a 10-slide carousel underneath
   it (f7a2d8d, which is elementor-hidden-desktop, i.e. mobile-only). Drop
   the carousel copy and keep the list + button, which is the intended one.

   Because the carousel goes away, the [VZ-58] arrow-spacing rule and the
   [VZ-51] autoplay guard for this section are now moot but harmless.

   The button itself was still unstyled - transparent with the theme's
   default #c36 text. Give it the same pill as the Our Services "+N More"
   control, and pin that one's shape too: both were losing padding, radius
   and weight to the theme's `button` rule, so they now share one look. */
@media (max-width:767px){
  .elementor-element-a119d5b .elementor-element-f7a2d8d{ display:none !important; }
}

.uip-msvc-more,
.uip-proj-more{
  /* height:auto + min-height:0 so an inherited min-height cannot make one
     pill taller than the other - they must read as the same control */
  height:auto !important; min-height:0 !important;
  padding:11px 26px !important;
  font-family:"Montserrat", Sans-serif !important;
  font-size:13.5px !important; font-weight:600 !important; line-height:1 !important;
  color:#ffffff !important; background:#10111A !important;
  border:0 !important; border-radius:999px !important;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .25s ease, transform .2s ease;
}
.uip-msvc-more:hover,
.uip-proj-more:hover{ background:#00A8BB !important; }
.uip-msvc-more:active,
.uip-proj-more:active{ transform:scale(.97); }

@media (max-width:767px){
  .uip-proj-more{
    display:inline-flex !important; align-items:center; justify-content:center;
    margin:6px auto 0 !important;
  }
}

/* [VZ-69] Point 5 — Contact Us team cards. The row was already symmetric
   (measured 10px above and below the content once the scroll-reveal had
   settled), so the fix here is breathing room rather than alignment: a
   taller, evenly padded card with the icon / name / role group centred on
   the cross axis, including the inner text+icon block which was pinned to
   flex-start. */
@media (max-width:767px){
  .uip-contact-head .uip-team-row{
    padding:16px 14px !important;
    align-items:center !important;
  }
  .uip-contact-head .uip-team-row > .e-con{
    align-items:center !important;
    align-self:center !important;
  }
}

/* [VZ-70] Point 6 — the copyright text was centred inside its own widget but
   the widget sat in a flex parent set to justify-content:flex-end, so the
   whole 217px block was pushed to the right edge. Centre the parent and let
   the widget span the full width so the line lands on the page centre. */
@media (max-width:767px){
  .elementor-location-footer .elementor-element-51489f1{
    justify-content:center !important;
    align-items:center !important;
  }
  .elementor-location-footer .elementor-element-cfd5f82{
    width:100% !important; max-width:100% !important;
    margin-left:auto !important; margin-right:auto !important;
  }
}

/* [VZ-71] Point 1 — footer "Terms of Use / Privacy policy".
   The pair sat left-aligned (widget at x=50 with 163px of slack on the
   right) and the two items were separated by a bare 10px gap, so they read
   as one run-on line. Centre the whole group and put a hairline divider
   between them. The rule targets the row that holds the list rather than the
   list alone, because the widget was being pinned left by its flex parent
   (justify-content:flex-start). Mobile only. */
@media (max-width:767px){
  .elementor-location-footer .elementor-element-95f3b5f{
    justify-content:center !important;
  }
  .elementor-location-footer .elementor-element-4f18453{
    width:100% !important; max-width:100% !important;
    text-align:center !important;
  }
  .elementor-location-footer .elementor-element-4f18453 ul{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:0 !important;
    flex-wrap:nowrap !important;
    margin:0 auto !important; padding:0 !important;
  }
  .elementor-location-footer .elementor-element-4f18453 li{
    margin:0 !important; padding:0 !important;
  }
  /* the divider: a hairline between the two links, never before the first */
  .elementor-location-footer .elementor-element-4f18453 li + li{
    border-left:1px solid rgba(255,255,255,.38) !important;
    margin-left:14px !important;
    padding-left:14px !important;
  }
}

/* [VZ-72] Point 2 — the LinkedIn button on each team card is
   position:absolute with top:0 inside a 50px-tall relative block. At 40px
   tall that left it flush to the top with 10px of slack underneath, which is
   what read as "not centred". Pin it to the block's middle instead.

   An earlier overlay rule already pins this widget at (0,4,0) with
   top:0 / transform:none, both !important, so the selector below repeats
   the widget class to outrank it. */
@media (max-width:767px){
  .uip-contact-head .uip-team-row .elementor-widget.elementor-widget-icon.elementor-widget-icon{
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
  }
}

/* [VZ-73] Point 4 — one card per swipe.
   The rail already snapped, but a fling could carry past several snap points
   in one gesture. scroll-snap-stop:always forces the scroll to settle on the
   very next card, so 1 -> 2 -> 3 always advances a single step. Wrapping
   from the last card back to the first is handled by the loop timer in the
   [VZ-50] JS block. */
@media (max-width:767px){
  .uip-wwa-card{
    scroll-snap-stop:always !important;
    scroll-snap-align:center !important;
  }
}

/* ============================================================================
   [VZ-75] .. [VZ-78] — mobile homepage pass 3 + footer socials.
   Additive as always: everything below is new, nothing above it is edited.
   [VZ-75] (drop the SMM tile) and [VZ-78] (footer icons) need no CSS - they
   are JS-only and inherit the styling already in this file.
   ========================================================================= */

/* [VZ-76] Smooth collapse for both mobile reveal controls, plus a blue
   expanded state on both buttons.

   Before: "+10 More" and "Show all 8 projects" opened with a staggered fade
   ([VZ-47]) but closed by flipping display in a single frame, so the page
   lost 600-1400px instantly and the button leapt up the screen; [VZ-47] and
   [VZ-74] then called scrollIntoView to chase it, which is what read as the
   "sudden jump".

   After: the JS animates the container height and pins the button to its
   viewport position for the duration, so nothing jumps. These rules supply
   the two things the JS cannot do inline:
     1. the extra cards have to stay painted while the box shrinks - otherwise
        there is no content to shrink past - and fade out as it goes;
     2. the expanded button turns the theme blue; collapsed stays black.

   Height, overflow and transition are written inline by the JS rather than
   living here: Elementor drives container display through its own custom
   properties, and a stylesheet rule is not reliably stronger than that.

   Revert: delete this block and the [VZ-76] JS block. */
@media (max-width:767px){
  /* 1 - hold the hidden tiles on screen for the length of the collapse.
     Beats [VZ-47]'s `.uip-msvc:not(.is-open) .uip-msvc-x{display:none}`. */
  .uip-msvc.uip-collapsing .uip-msvc-x{
    display:flex !important;
    opacity:0 !important;
    transition:opacity .22s ease !important;
    animation:none !important;      /* [VZ-47]'s reveal keyframes must not re-fire */
  }
  /* the five extra project containers do the same; the JS keeps them
     displayed and only hides them once the height animation has finished */
  .uip-proj-fade{
    opacity:0 !important;
    transition:opacity .22s ease !important;
  }

  /* 2 - expanded = theme blue, collapsed = black.
     The black comes from [VZ-47] (services) and [VZ-68] (projects); both set
     it with !important, so the expanded state has to match that weight. */
  .uip-msvc-more[aria-expanded="true"],
  .uip-proj-more[aria-expanded="true"]{
    background:#00A8BB !important;
    color:#ffffff !important;
  }
  .uip-msvc-more[aria-expanded="true"]:hover,
  .uip-proj-more[aria-expanded="true"]:hover{
    background:#008C9C !important;
  }
}

/* [VZ-77] "Who We Are": a genuinely infinite rail.

   [VZ-50] built a native scroll-snap rail and looped it with a timer, but a
   native rail cannot be swiped past its last card: card 3 was a dead end, and
   the wrap back to card 1 was a long reverse scroll rather than one more step
   forward. The ticket asks for 1 - 2 - 3 - 1 - 2 - 3 with no endpoint.

   The fix keeps the rail native (no library, real momentum scrolling) and
   makes it endless by rotating the DOM instead of cloning: after every settle
   the centred card is moved back to the middle of the strip, so there is
   always exactly one card to its left and one to its right in both
   directions. Cards are MOVED, never cloned - cloning would duplicate the SVG
   pattern/clipPath ids that [VZ-32] localises, the same trap [VZ-47] avoids.

   The JS moves the three cards into a new inner element and hands it the
   .uip-wwa-track class, so every rail rule in [VZ-50] and [VZ-73] applies to
   it unchanged. What is left behind keeps .uip-wwa-host and stops being a
   scroll container, which is also what makes [VZ-50]'s own timer inert: its
   railActive() test reads scrollWidth > clientWidth on that element and is
   now false, so it returns without touching anything. Its dots are hidden and
   replaced by an identical set that tracks the rotating strip.

   Only built under 768px; on a wider viewport the cards are put back exactly
   as they were, so the desktop stack is untouched.

   Revert: delete this block and the [VZ-77] JS block. */
@media (max-width:767px){
  .uip-wwa-host{
    display:block !important;
    overflow:visible !important;
    padding-bottom:0 !important;
  }
  .uip-wwa-nav-off{ display:none !important; }
}

/* [VZ-78] Footer social row: one line, always.

   The row sits in a fixed-width footer column - measured 386px at 1280/1440,
   334 at 414, 310 at 390, 280 at 360, 277 at 900, 240 at 320 and 232 at 768 -
   while seven icons at the stock 38px box and 10px gap need 326px. Desktop
   and the wider phones have room to spare; the tablet band and the small
   phones do not, and the stock behaviour there is to spill icons onto a
   second line.

   The rule is: never wrap. The fit() function in the [VZ-78] JS block
   measures the real column and, only where seven will not fit, tightens the
   gap first and trims the icon box second, scaling the glyph with it. Every
   icon at a given width stays identical to its neighbours, and nothing is
   applied at all where the row already fits - so desktop keeps its stock 38px
   icons and 10px gaps untouched.

   Revert: delete this block and fit() in the [VZ-78] JS block. */
.uip-footer .elementor-social-icons-wrapper.uip-soc-fit{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:center !important;
  column-gap:var(--uip-soc-gap, 10px) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.uip-footer .elementor-social-icons-wrapper.uip-soc-fit .elementor-grid-item{
  margin:0 !important;               /* the Safari grid rules add margin-inline */
}
.uip-footer .elementor-social-icons-wrapper.uip-soc-fit .elementor-social-icon{
  width:var(--uip-soc-box, 38px) !important;
  height:var(--uip-soc-box, 38px) !important;
  min-width:var(--uip-soc-box, 38px) !important;
  min-height:var(--uip-soc-box, 38px) !important;
  flex:0 0 var(--uip-soc-box, 38px) !important;
}
.uip-footer .elementor-social-icons-wrapper.uip-soc-fit .elementor-social-icon svg{
  width:var(--uip-soc-glyph, 15px) !important;
  height:var(--uip-soc-glyph, 15px) !important;
  font-size:var(--uip-soc-glyph, 15px) !important;
}

/* [VZ-79] "Reviewed on Trustpilot" - the twin built by the [VZ-79] JS block.

   The clone inherits every Elementor class from the Clutch unit, so type,
   colour, alignment and spacing all come from the rules that already style
   that block. The only thing that needs saying here is the logo box: Clutch
   ships a fixed 82x23 raster, while Trustpilot's official mark is a vector at
   1132.8x278.2 (about 4.07:1). Pinning the height to the same 23px keeps the
   two logos optically level - the Trustpilot lockup then sits ~94px wide,
   which is the correct proportion for that mark rather than a squashed 82.

   Revert: delete this block and the [VZ-79] JS block. */
.uip-tp-logo{
  height:23px !important;
  width:auto !important;
  max-width:100% !important;
  /* inline-block + middle, matching how the Clutch <img> sits in its own
     widget: as a block the svg made its widget 29px tall against Clutch's
     26, which left the two review blocks 3px out of step */
  display:inline-block;
  vertical-align:middle;
}
/* the score stars: Trustpilot green, the same green as the star in the logo.
   The unmarked halves keep the footer's own muted tone. */
.uip-tp .uip-tp-star svg,
.uip-tp .uip-tp-star svg *{ fill:#00b67a !important; color:#00b67a !important; }

/* breathing room from the Clutch unit it stacks under, matched to the gap
   the footer already uses between its own blocks */
.uip-tp{ margin-top:12px !important; }

/* [VZ-80] Footer review band: Clutch | Trustpilot | Contact Us.

   Measured before the change, at 1280px. The band (118bd46, 1200 wide) held
   two columns: 52475b8 at x50 w439, stacking Clutch above Trustpilot, and
   a9e58db at x509 w721 holding Contact Us. The Contact Us column was more
   than half the band but its content sat hard against its own left edge, so
   the right-hand 500px of the footer was empty while the two review blocks
   were stacked in a narrow column on the left.

   Four things, all desktop-only except the last:

   1. The "Contact Us" heading started at x519 and the email button at x529.
      The heading widget has no inset, but the button sits inside a container
      (6b3fd81) that carries Elementor's default 10px padding - that 10px was
      the whole discrepancy. Zeroed, so both left edges land on the same line.

   2. Contact Us shrinks to its content and is pushed to the right edge with
      margin-left:auto, instead of being a 721px column with its content
      floating at the left.

   3. That frees the middle of the band, so 52475b8 becomes a row and the two
      review blocks sit side by side: Clutch, then Trustpilot, then Contact Us.

   4. "REVIEWED ON TRUSTPILOT" is nine characters longer than "REVIEWED ON
      CLUTCH" and was breaking into three lines in the 117px column the clone
      inherited, which made the Trustpilot block taller than the Clutch one
      next to it. The label column gets a floor wide enough for two lines, so
      both blocks read the same shape and height.

   Mobile keeps the Clutch block exactly as it was and only tightens the
   twin's own column gap - see the note in that media query.

   Nothing here touches the Clutch markup: every Trustpilot-specific rule is
   scoped to .uip-tp, whose classes are applied by the [VZ-79] JS.

   Revert: delete this block. */
@media (min-width:768px){
  /* 3 - Clutch and Trustpilot side by side. Keyed on the class the [VZ-79]
     JS puts on whichever container holds the pair, not on an Elementor id:
     the desktop and mobile footers use different ids for it. */
  .uip-tp-host{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:flex-start !important;
    column-gap:24px !important;
    flex:0 1 auto !important;
    width:auto !important;
  }
  /* the two blocks stop being full-width children of that container */
  .uip-tp-host > .e-con{
    width:auto !important;
    flex:0 0 auto !important;
  }

  /* 2 - Contact Us to the far right, sized to its own content */
  .elementor-location-footer .elementor-element-a9e58db{
    flex:0 0 auto !important;
    width:max-content !important;
    max-width:40% !important;
    margin-left:auto !important;
  }
  /* its children were block-level inside a 721px column and would otherwise
     keep stretching once the column shrinks to content */
  .elementor-location-footer .elementor-element-a9e58db > .e-con,
  .elementor-location-footer .elementor-element-a9e58db > .elementor-widget{
    width:100% !important;
  }

  /* 1 - the email button's row carried a 10px inset the heading did not */
  .elementor-location-footer .elementor-element-6b3fd81{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* 4 - two lines, not three, and the same two lines for both blocks.
     Once the column stops being full-width, each unit shrinks to its own
     content: that took the Trustpilot label to three lines and, measured
     after the first pass, squeezed the CLUTCH label to 66px and three lines
     too. Both label columns therefore get the same floor - the Trustpilot
     one needs 130px of text to break as "REVIEWED ON / TRUSTPILOT", and
     giving Clutch the identical column is what keeps the pair consistent
     in size and alignment rather than merely both being two lines.
     The class is applied to the Clutch column before the clone is taken,
     so both blocks carry it and one rule covers the pair. */
  .uip-tp-host{ --uip-rev-logo:124px; --uip-rev-label:150px; }
  .uip-rev-labelcol{ min-width:var(--uip-rev-label) !important; }

  /* Pin each block to the width of its two columns plus the unit's own
     10px insets. Left to width:auto they take their max-content, which
     counts the label as if it were on one line - measured, that padded the
     Clutch block by 41px and the Trustpilot one (longer word) by 82, so the
     visible gap between them came out at 85px instead of the 24 intended,
     and the two blocks were different widths. */
  .uip-tp-host > .uip-rev{
    width:calc(var(--uip-rev-logo) + var(--uip-rev-label) + 20px) !important;
    flex:0 0 auto !important;
  }

  /* the logo column: the Clutch mark is 82px and the Trustpilot lockup 94,
     and with the blocks shrunk to content the 82px image was being scaled
     down to 66. One floor wide enough for the wider mark keeps both at
     natural size and both columns the same width. */
  .uip-rev-logocol{ min-width:var(--uip-rev-logo) !important; }
  /* [VZ-fix 2026-09-24] "Reviewed On" broke onto two lines ("Reviewed / On")
     in both blocks; the eyebrow sits in the logo column only on desktop, so
     keeping it on one line is scoped here and never touches the mobile 2x2. */
  .uip-rev-logocol .elementor-heading-title{ white-space:nowrap !important; }

  /* Clutch + Trustpilot + Contact Us need about 837px across. The band has
     1200 at 1280 and 880 at 900, but only 748 at 768 - where, with nothing
     allowed to shrink, Contact Us was overlapping the Trustpilot block.
     Letting the band wrap drops Contact Us onto its own line there instead,
     still right-aligned; above ~900px nothing wraps and the three sit in a
     row as asked. */
  .uip-rev-band{ flex-wrap:wrap !important; row-gap:20px !important; }

  /* the twin carries a 12px top margin from [VZ-79], which was there to
     separate it from the Clutch block it used to sit under. Side by side
     that margin only pushes it 12px out of line, so it goes. */
  .uip-tp{ margin-top:0 !important; }
}

@media (max-width:767px){
  /* 5 - Clutch lays out as a 2x2 on mobile: "Reviewed On" beside the stars,
     then the logo beside "REVIEWED ON CLUTCH". The twin wrapped to a third
     line instead, because the Trustpilot lockup is 94px wide against Clutch's
     82 and its label 200px against 170: 94 + 200 + the row's own 20px gap is
     314, which does not fit the 310px row, so the label was pushed down.
     Tightening only the twin's gap to 12px brings that to 306 and the logo
     back up onto the label's line - the same 2x2 as Clutch, at the same logo
     size. The Clutch block is not touched: this is scoped to .uip-tp. */
  /* the pair stacks on mobile - the host row is only ~310px wide */
  .uip-tp-host{ flex-direction:column !important; row-gap:12px !important; align-items:flex-start !important; }
  /* ancestor-OR-SELF: on mobile the label widget sits directly in the unit,
     so the element carrying .uip-tp-labelcol is the twin root itself and a
     descendant selector never matched it. On desktop it is a child column. */
  .uip-tp.uip-tp-labelcol,
  .uip-tp .uip-tp-labelcol{ column-gap:12px !important; }

  /* Even at a 12px gap the label could not share the logo's line: measured
     at 390px the row has 290px of content box, and "REVIEWED ON TRUSTPILOT"
     is 200px against Clutch's 170 - 94 + 12 + 200 = 306. A flex item wraps
     on its max-content size before it will shrink, so the label was dropping
     to a third line. Giving it a small flex-basis lets it start on the same
     line and then grow into what is left, wrapping its text to two lines
     instead of itself to a new row - so the block reads as the same 2x2 as
     Clutch: eyebrow beside stars, logo beside the label. */
  .uip-tp .uip-tp-label{ flex:1 1 120px !important; min-width:0 !important; }
}

/* [VZ-82] FAQ section: the gap above it was the biggest on the page.

   Measured whitespace above each homepage heading at 1280px - from the bottom
   of the last painted thing above it to the top of the heading:

     Our Services 80   How we do it 203   Who We Are 199   Our Projects 149
     Contact Us 194    How We Get You There 177    FAQ 204

   and at 390px: Our Services 60, How we do it 64, Who We Are 139,
   Our Projects 115, Contact Us 119, FAQ 156. The FAQ is the largest on both.

   The cause is a 70px top margin that only this section carries. Checked
   against the same section on other pages before touching it: /services/ and
   /it-support/ have margin-top 0 and /contact/ 0 with 40px of padding - the
   homepage is the outlier, so this is scoped to the homepage and the other 46
   pages with a FAQ are deliberately left alone.

   40px is not an invented number: it is what the only two other homepage
   sections that carry a top margin use (Our Projects and How We Get You
   There). That takes the gap to 174 at 1280 and 126 at 390 - inside the range
   the rest of the page already sits in, rather than the largest on it.

   Keyed to .uip-faq (applied by [VZ-45]) rather than the section id, since
   Elementor gives the same section a different id on every page.

   Revert: delete this block; the section returns to a 70px top margin. */
.elementor-334 .uip-faq{ margin-top:40px !important; }


/* [VZ-83] Mobile drawer: the submenu circles sat below their menu text.

   Measured at 390px with the drawer open, on all three parent items
   (Services, Technologies, IT Support): the circle's centre was 6.5px below
   the centre of its label. Identical on all three, so it read as a systematic
   tilt rather than one broken row.

   Cause: [VZ-35] gives the toggle `position:absolute; top:0` with a 48px
   height for the touch target, inside a menu row that is only 36px tall. A
   48px box pinned to the top of a 36px row hangs 12px below it, which puts
   its centre - and therefore the circle drawn inside it - 6px low.

   Fix: centre the button on the row instead of pinning it to the top. The
   48px touch target is unchanged; only where it sits changes.

   The arrow inside the circle was checked and left alone: measured at 8x
   zoom, the chevron's ink centre is within a quarter pixel of the circle's
   centre both ways, and the elementskit icon font is confirmed loaded rather
   than falling back to a substitute glyph. The visible tilt was the circle,
   not the arrow in it.

   Revert: delete this block; the toggle goes back to top:0. */
@media (max-width:1024px){
  .elementskit-navbar-nav li > .uip-sub-toggle,
  .elementskit-navbar-nav li > .uip-sub-toggle:hover,
  .elementskit-navbar-nav li > .uip-sub-toggle:focus{
    top:50% !important;
    transform:translateY(-50%) !important;
  }
}

/* [VZ-84] The old design flashing on load, site-wide.

   WHAT WAS HAPPENING, measured on the homepage at 390px:

     first paint ................ 508ms   <- the ORIGINAL Elementor page
     DOMContentLoaded ........... 815ms
     redesign applied ........... 843ms   <- .uip-h2, .uip-msvc, .uip-tp, …

   i.e. the browser painted the untouched WordPress page for ~335ms locally,
   over a cached localhost. On a phone over Wi-Fi that is the 1-1.5s of old
   blue hero, old navbar and old footer being reported.

   WHY. Most of this redesign is applied by JavaScript, not by CSS alone. The
   overlay stylesheet is render-blocking in the head, so anything it styles
   directly is correct in the first frame - but 113 of its rules hang off
   .uip-nav-rail, 40 off .uip-footer, 30 off .uip-faq and more off
   .uip-headblock / .uip-sechead, and every one of those classes is added by
   v360-uiplus.js. Whole sections are rebuilt in JS too (the hero on the home
   page, .uip-abhero on the subpages, the mobile services grid, the footer
   review blocks). Until that script runs, the page is genuinely the old site:
   rendering /about/ with JavaScript disabled shows the old cyan hero, the old
   navbar and the old layout in full.

   A gate for this already existed - [UIP-55] and [UIP-56] - but it could not
   work as built:

     1. It lifted far too early. The `uip-boot` class is removed inside
        [UIP-12], immediately after the navbar rails are tagged, which is near
        the top of the file. Everything applied after that point - the footer,
        the FAQ, the section head blocks, the rebuilt heroes, every block in
        this session - lands on a page that is already visible.
     2. It covered far too little. On non-blog pages it hid only the header
        and the first section. On /about/ the entire page changes, so the rest
        of it flashed regardless.
     3. Its failsafe is a 900ms timer in the page's head snippet, which is
        shorter than the 843ms+ the redesign actually takes on a phone - so on
        a slow load the timer would reveal the old page anyway.

   THE FIX. The gate is now keyed to a class this overlay owns end to end:
   the body is hidden until <html> gets .uip-ready, and the [VZ-84] JS block -
   which is the last thing in v360-uiplus.js - adds it only once every other
   block has run. Nothing depends on the head snippet's 900ms timer any more,
   so a slow device cannot reveal a half-built page.

   The gate paints #080a0f, which is the measured background of the redesigned
   hero on every page (home .uip-h2, subpages .uip-abhero), so the first frame
   is the new theme's own colour rather than white or the old teal.

   Deliberately `visibility`, not `display` or `opacity`: visibility keeps the
   layout intact, so everything the JS measures while building (card heights,
   rail widths, the footer column) measures correctly, and it creates no
   stacking context that would break the fixed navbar.

   FAILSAFE. If v360-uiplus.js never runs - blocked, cached badly, an error
   before the last block - a keyframe with a 2.6s delay reveals the page
   anyway. It is an animation on purpose: animated values beat normal
   declarations, so the reveal cannot be lost to specificity, and the page can
   never be left blank.

   HONEST LIMIT. This removes the old design from the first frame; it does not
   make the redesign paint any earlier, because the redesign is JS. For the
   first few hundred milliseconds the visitor sees the new theme's background
   instead of the finished page. The only way to paint the finished design in
   frame one is to bake the redesigned markup and classes into the exported
   HTML so no JS is needed - a much larger change, and this project's
   convention is that the export is never edited.

   Revert: delete this block and the [VZ-84] JS block. */
/* The gate is a fixed cover painted OVER the page, not visibility on <body>.
   Hiding the body was measurably worse than the problem: with it, the page
   settled 1146px shorter (docH 11810 against 12956) because blocks that size
   themselves during load - and the carousels the theme initialises - measure
   a hidden subtree differently. A cover leaves layout, image loading and
   every measurement exactly as they are on an ungated page; it only stops
   the old design being SEEN. Verified: docH is identical with and without
   the gate. */
html:not(.uip-ready)::before{
  content:"";
  position:fixed; inset:0;
  background:#080a0f;
  z-index:2147483647;
  pointer-events:none;      /* never swallow a tap if it somehow outlives load */
  /* Failsafe, sized from measurement: the redesign lands at ~850ms on this
     machine, ~1.5s at 2x CPU throttle and ~3.4s at 4x - i.e. 1.5-3.4s on a
     real phone. 4s clears the cover where the script never runs at all,
     without cutting in front of a slow-but-working one. */
  animation:uip-gate-clear 1ms linear 4000ms forwards;
}
@keyframes uip-gate-clear{ to{ opacity:0; visibility:hidden; } }

/* [VZ-86] Point 2 — the gap above the grid on the three mobile pages.

   MEASURED at 390px, identical on Services, Technologies and IT Support
   (they share the section markup, so they shared the fault):

     hero band bottom edge  ->  "Offering versatile digital services"    70px
     intro paragraph bottom ->  "Our Services"                          110px

   So the grid sat 40px lower than the rhythm the page had already set one
   section earlier, which is the "excessive spacing" in the ticket. The 110px
   is four separate contributions stacked:

     60px  the intro section's own .e-con-inner padding-bottom
     10px  its inner container's padding-bottom
     20px  a container between the two sections that holds nothing but the
           page's inline show-more <script> - it renders 20px tall and empty
     20px  the grid section's .e-con-inner padding-top

   The first 70px is the section rhythm itself: it is exactly what separates
   the hero band from the intro heading (60 + 10, the same two paddings on the
   other side of that section). The last 40px is the surplus, so this block
   removes those two and leaves the rhythm alone - the intro section is not
   touched, which keeps the ticket's "section above the grid unchanged".

   Result on all three pages: 110px -> 70px, the same gap as hero -> intro.

   Both hooks are classes [VZ-85] applies to nodes it found structurally, not
   element ids: the grid section is 7d350d2 / 9686c34 / 6f65eaa - a different
   id on each page - and an id-scoped rule would have quietly fixed one page
   and left the other two ([VZ-45] again).

   Mobile only, and both hooks are set only on the three pages [VZ-85] runs
   on, so no desktop layout and no other page can be reached from here.

   Revert: delete this block. */
@media (max-width:767px){
  /* the empty 20px script container between the intro and the grid */
  .uip-mgrid-gap{ display:none !important; }

  /* the grid section's own top padding; the intro section's 70px below its
     text is what now sets the gap, exactly as it does under the hero */
  .uip-mgrid-sec > .e-con-inner{ padding-top:0 !important; }
}

/* [VZ-87] Points 1, 2, 3 and 5 — one section-spacing system on mobile.

   See the [VZ-87] JS block for the measurements this replaces and for why the
   tagging is done in JS. In short: a major section owns 36px above and below
   its content, and 72px on any side that meets a painted band or the footer,
   so two plain sections sit 72px apart - the rhythm /services/,
   /technologies/ and /it-support/ already measure.

   The section owns the space and its inner container owns none. That is the
   only way to get one number out of these sections: the same gap was being
   built from four places at once (section padding, .e-con-inner padding, a
   leading child margin, and a margin on the section itself), in different
   proportions on every page. Collapsing all of it onto the section leaves a
   single value to reason about, and it is the value below.

   TWO THINGS ARE REQUIRED TO WIN THE CASCADE HERE, and the first pass of this
   block got only one of them right - which left .uip-who at 18px of padding
   and the 40px margins above Contact Us and the FAQ untouched:

     1. Repeated class selectors. Elementor writes per-element rules as
        .elementor-<page> .elementor-element.elementor-element-<id>{...} - 0,3,0
        and frequently !important - and this overlay stylesheet is LINKED
        BEFORE Elementor's, so at equal specificity and equal importance the
        overlay always loses. Repeating the hook four times outranks it. This
        is the same technique the [VZ-64] block uses a few hundred lines up.

     2. Setting Elementor's own custom properties, not just the physical
        properties. Containers get their box from
        padding-block-start:var(--padding-top) and margin-block-start:
        var(--margin-top). Overriding --padding-top/--margin-top drives the
        engine that is actually painting the box, instead of racing it.

   Mobile only - nothing in this block exists above 767px. */
@media (max-width:767px){
  :root{
    --uip-sgap:36px;        /* a section's own space, above and below          */
    --uip-sgap-band:72px;   /* ... where it meets a painted band or the footer */
  }

  .uip-sgap.uip-sgap.uip-sgap.uip-sgap{
    --padding-top:var(--uip-sgap);
    --padding-bottom:var(--uip-sgap);
    --margin-top:0px;
    --margin-bottom:0px;
    padding-top:var(--uip-sgap) !important;
    padding-bottom:var(--uip-sgap) !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  /* the inner container contributes nothing vertically; its horizontal
     padding is left exactly as it was, because that is the 40px page edge
     [VZ-64] tuned */
  .uip-sgap.uip-sgap.uip-sgap.uip-sgap > .e-con-inner{
    padding-top:0 !important;
    padding-bottom:0 !important;
  }

  /* a leading or trailing margin inside the section re-opens the gap the
     section just closed - this is the 30px that sat on top of "Who We Are" */
  .uip-sgap.uip-sgap.uip-sgap.uip-sgap > .e-con-inner > :first-child,
  .uip-sgap.uip-sgap.uip-sgap.uip-sgap > :first-child{ margin-top:0 !important; }
  .uip-sgap.uip-sgap.uip-sgap.uip-sgap > .e-con-inner > :last-child,
  .uip-sgap.uip-sgap.uip-sgap.uip-sgap > :last-child{ margin-bottom:0 !important; }

  .uip-sgap-afterband.uip-sgap-afterband.uip-sgap-afterband.uip-sgap-afterband{
    --padding-top:var(--uip-sgap-band);
    padding-top:var(--uip-sgap-band) !important;
  }
  .uip-sgap-endband.uip-sgap-endband.uip-sgap-endband.uip-sgap-endband{
    --padding-bottom:var(--uip-sgap-band);
    padding-bottom:var(--uip-sgap-band) !important;
  }
}

/* ============================================================================
   [VZ-89] .. [VZ-91] — Contact form button balance, and the Careers page
   brought onto the current design system.
   Additive: nothing above this line is edited. Each block is independently
   deletable and says how to revert it.
   ========================================================================= */

/* [VZ-89] Point 1 — the "Send a Message" button sits off-centre.

   MEASURED at 390px, identical on every page that carries this section
   (/, /contact/, /projects/ - the same .uip-contact-head block):

     "What we can do for you" field  ->  button      11px
     button  ->  the divider rule under it           26px

   So the button hugged the field above it and floated well clear of the line
   below. Both sides are now 20px, which is the midpoint of what was there and
   keeps the block the same overall height (11+52+26 = 89 -> 20+52+20 = 92).

   WHERE THE TWO NUMBERS COME FROM. The 11px is not ours: it is Elementor's
   own form row gap (half of --grid-row-gap on each field group), which is why
   the existing `.uip-contact-head .elementor-field-group{margin-bottom:14px}`
   rule at the top of this file never took effect - Elementor's per-widget rule
   is more specific and this stylesheet is linked first, so at equal importance
   the overlay loses (the same cascade trap [VZ-87] documents). Hence the
   repeated class selectors below. The 26px is ours, from the [VZ-38] block.

   The divider is the top border of the "Prefer to talk?" link, so the gap
   below the button is that link's margin-top; its own 18px padding-top keeps
   the link text clear of the rule and is deliberately left alone.

   Mobile only, and correct on every page by construction: it is scoped to
   .uip-contact-head, the class the JS applies to this section wherever it
   appears, not to any one page's element id.

   Revert: delete this block. */
@media (max-width:767px){
  /* above the button: the last field before it stops using the form's row gap */
  .uip-contact-head .elementor-field-group.elementor-field-type-textarea.elementor-field-type-textarea.elementor-field-type-textarea{
    margin-bottom:20px !important;
  }
  /* below the button: distance to the divider rule */
  .uip-contact-head a.v360-book-call.v360-book-call.v360-book-call{
    margin-top:20px !important;
  }
}

/* [VZ-90] Point 2 — Careers page repainted in the current design system.

   See the [VZ-90] JS block for the structural side. This block is the paint,
   and it deliberately reuses the values already in this file rather than
   inventing a Careers palette:

     surface      #ffffff        card
     hairline     #E7E7E7        card border           (from [VZ-47] tiles)
     radius       15px           card corner           (from [VZ-47] tiles)
     ink          #10111A        headings / card titles
     muted        #5b6570        body copy
     accent       #00A8BB        the one brand colour
     hero         #080a0f        .uip-abhero band

   The page's own theme was a flat #00A8BB fill used as a section background,
   cyan body text on white, 6px corners and drop shadows. All of that is
   replaced with the hairline-on-white card the rest of the site uses; the
   cyan survives only as the accent it is everywhere else.

   MOBILE ONLY. Every rule sits inside @media (max-width:767px), so the
   desktop Careers page is untouched - the same rule the rest of this
   redesign has followed. Ask before extending it upward.

   Revert: delete this block and the [VZ-90] JS block. */
@media (max-width:767px){

  /* ---- copy promoted into the hero must not repeat below it ---------- */
  .uip-car-moved{ display:none !important; }

  /* ---- section rhythm ------------------------------------------------
     Deliberately not set here any more. This block used to give the
     Careers sections a flat 36px of their own, which is the right number
     only when both neighbours are plain sections. [VZ-93] tags them with
     the real [VZ-87] hooks instead, so a section under the hero band or
     above the footer gets 72px exactly like every other page. Leaving the
     flat rule here would have won on source order and defeated that. */
  .uip-car-sec{ background-image:none !important; }

  /* ---- headings ------------------------------------------------------ */
  .uip-car-sec .elementor-heading-title{
    font-family:"Montserrat", Sans-serif !important;
    color:#10111A !important;
    letter-spacing:-.01em;
  }
  .uip-car-sec h2.elementor-heading-title,
  .uip-car-sec h3.elementor-heading-title{
    font-size:28px !important; font-weight:700 !important; line-height:1.22 !important;
    text-align:left !important;
  }

  /* ---- body copy: the theme justified it, which combs white rivers
          through a 390px column ------------------------------------- */
  .uip-car-sec .elementor-widget-text-editor,
  .uip-car-sec .elementor-widget-text-editor *{
    text-align:left !important;
    hyphens:none !important;
  }
  .uip-car-sec .elementor-widget-text-editor p{
    font-size:15px !important; line-height:1.75 !important; color:#5b6570 !important;
    margin:0 0 14px !important;
  }

  /* ---- buttons: the house pill, primary black / secondary hairline --- */
  .uip-car-sec .elementor-widget-button a.elementor-button{
    display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
    height:auto !important; min-height:0 !important;
    padding:13px 26px !important;
    font-family:"Montserrat", Sans-serif !important;
    font-size:13.5px !important; font-weight:600 !important; line-height:1 !important;
    border-radius:999px !important;
    background:#10111A !important; color:#ffffff !important;
    border:1px solid #10111A !important;
    box-shadow:none !important;
    transition:background .25s ease, border-color .25s ease, transform .2s ease;
  }
  .uip-car-sec .elementor-widget-button a.elementor-button:active{ transform:scale(.97); }
  .uip-car-sec .elementor-widget-button a.elementor-button:hover{
    background:#00A8BB !important; border-color:#00A8BB !important;
  }
  /* the second button on the intro reads as the secondary action */
  .uip-car-intro .elementor-widget-button:nth-of-type(2) a.elementor-button,
  .uip-car-intro .e-con > .elementor-widget-button + .elementor-widget-button a.elementor-button{
    background:transparent !important; color:#10111A !important;
    border-color:#E7E7E7 !important;
  }
  .uip-car-intro .elementor-widget-button:nth-of-type(2) a.elementor-button:hover,
  .uip-car-intro .e-con > .elementor-widget-button + .elementor-widget-button a.elementor-button:hover{
    background:#10111A !important; color:#ffffff !important; border-color:#10111A !important;
  }

  /* ---- intro image: hairline card, not a bleed ----------------------- */
  .uip-car-intro .elementor-widget-image img{
    border-radius:15px !important;
    border:1px solid #E7E7E7 !important;
    width:100% !important; height:auto !important;
  }

  /* ---- culture strip: the flat cyan fill becomes a white section ----- */
  .uip-car-cult.uip-car-cult.uip-car-cult.uip-car-cult{
    background-color:#ffffff !important;
    background-image:none !important;
  }
  .uip-car-cult .elementor-heading-title{ color:#10111A !important; }
  .uip-car-cult .elementor-widget-text-editor,
  .uip-car-cult .elementor-widget-text-editor *{ color:#5b6570 !important; }
  .uip-car-cult .uip-cult-card{
    background:#ffffff !important;
    border:1px solid #E7E7E7 !important;
    border-radius:15px !important;
    box-shadow:none !important;
  }

  /* ---- benefits: hairline cards, accent icon ------------------------- */
  .uip-car-ben .uip-ben{
    background:#ffffff !important;
    background-image:none !important;
    border:1px solid #E7E7E7 !important;
    border-radius:15px !important;
    box-shadow:none !important;
    padding:18px 12px !important;
  }
  .uip-car-ben .uip-ben:hover{
    border-color:#00A8BB !important;
    box-shadow:0 6px 18px rgba(13,23,33,.07) !important;
    transform:none !important;
  }
  .uip-car-ben .uip-ben .elementor-icon-box-title,
  .uip-car-ben .uip-ben .elementor-icon-box-title *{
    font-family:"Montserrat", Sans-serif !important;
    font-size:13px !important; font-weight:600 !important; line-height:1.35 !important;
    color:#10111A !important;
  }
  /* the theme wrapped every chip in a tinted panel of its own */
  .uip-car-ben .e-con.e-child{ background-color:transparent !important; background-image:none !important; }

  /* ---- testimonials: same card as everywhere else -------------------- */
  .uip-car-quotes .e-con.e-child[class*="elementor-element-"]:has(> .elementor-widget-text-editor){
    background:#ffffff !important;
  }
  .uip-car-quotes .elementor-widget-text-editor p{ color:#5b6570 !important; }

  /* ---- socials row --------------------------------------------------- */
  .uip-car-soc .elementor-icon-list-text,
  .uip-car-soc a{ color:#10111A !important; font-weight:600 !important; }
  .uip-car-soc a:hover .elementor-icon-list-text,
  .uip-car-soc a:hover{ color:#00A8BB !important; }
  .uip-car-soc .elementor-icon-list-icon svg,
  .uip-car-soc .elementor-icon-list-icon i{ color:#00A8BB !important; fill:#00A8BB !important; }
}

/* [VZ-91] Point 3 — "How Joining vorza360 Works" rebuilt as a clean stepper.

   WHAT WAS THERE, measured at 390px. The section runs on a third-party
   timeline widget (twae) configured "both-sided", which is a desktop layout:

     - the rail was only 275px of a 390px screen, so every card was 203px wide
       and the nine titles wrapped to two lines;
     - the number badge is absolutely positioned at left:-72px, so the numbers
       floated outside the cards rather than aligning with them, and each one
       sat 49px down from its own card's top edge;
     - each step also carries a one-line explanation, but it does not show:
       the page's OWN stylesheet hides it with
       `.elementor-1418 .elementor-element-55953261 p{display:none !important}`.
       That is a deliberate decision made when the page was built, not a bug,
       so this block leaves it hidden and the steps stay title-only - which is
       also the calmer read the ticket asked for. To show the copy, delete
       that rule from the page CSS; the type for it is already set below;
     - the connector was a 4px WHITE line on a pale cyan gradient, i.e.
       invisible, and the cards used 6px corners and a drop shadow;
     - the whole thing sat on a cyan gradient background image.

   WHAT IT IS NOW: one column, one row per step. A 38px accent badge carrying
   the step number, a hairline connector running behind the badges, and the
   house card (white, 1px #E7E7E7, 15px radius) holding the step title.
   No new colours, no new type scale: the badge is
   the site accent, the card is the [VZ-47] tile, the title is the card title
   used across the site.

   Alternation is dropped on purpose. Both-sided timelines need width to read;
   at 390px they just make the eye zig-zag. Left-to-right, top-to-bottom is
   the calmer reading order and matches how the rest of the site stacks.

   The numbers are inline SVG with a hard-coded fill="#000000" presentation
   attribute; a CSS `fill` beats a presentation attribute, so they are simply
   recoloured to white rather than replaced.

   MOBILE ONLY - the desktop timeline is untouched.

   Revert: delete this block. The widget returns to its own styling. */
@media (max-width:767px){

  /* the cyan gradient artwork behind the section */
  .uip-car-join.uip-car-join.uip-car-join.uip-car-join{
    background-image:none !important;
    background-color:#ffffff !important;
  }

  .uip-car-join .twae-wrapper{ width:100% !important; max-width:none !important; }
  .uip-car-join .twae-start,
  .uip-car-join .twae-arrow{ display:none !important; }

  /* the rail: one hairline behind the badges, centred on the 38px badge */
  .uip-car-join .twae-timeline{
    position:relative !important;
    width:100% !important; max-width:none !important;
    padding:0 !important; margin:0 !important;
  }
  .uip-car-join .twae-timeline.twae-timeline.twae-timeline::before,
  .uip-car-join .twae-timeline.twae-timeline.twae-timeline::after{
    content:"" !important;
    position:absolute !important;
    left:18px !important; right:auto !important;
    top:19px !important; bottom:19px !important;
    width:2px !important; height:auto !important;
    background:#E7E7E7 !important;
    transform:none !important;
    z-index:0 !important;
  }
  .uip-car-join .twae-timeline::after{ display:none !important; }

  /* one step per row: badge column, then the card */
  .uip-car-join .twae-story,
  .uip-car-join .twae-story-left,
  .uip-car-join .twae-story-right{
    display:grid !important;
    grid-template-columns:38px 1fr !important;
    column-gap:14px !important;
    align-items:start !important;
    width:100% !important; max-width:none !important;
    float:none !important; clear:both !important;
    margin:0 0 12px !important; padding:0 !important;
    left:auto !important; right:auto !important;
    text-align:left !important;
    position:relative !important;
    z-index:1 !important;
  }
  .uip-car-join .twae-story:last-child{ margin-bottom:0 !important; }

  /* the number badge */
  .uip-car-join .twae-icon{
    position:static !important;
    grid-column:1 !important; grid-row:1 !important;
    width:38px !important; height:38px !important;
    min-width:38px !important;
    margin:0 !important; padding:0 !important;
    border-radius:50% !important;
    background:#00A8BB !important;
    border:3px solid #ffffff !important;   /* lifts the badge off the rail */
    box-shadow:none !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    left:auto !important; top:auto !important; right:auto !important;
    transform:none !important;
  }
  .uip-car-join .twae-icon svg{
    width:17px !important; height:17px !important;
    display:block !important;
  }
  /* the digits carry fill="#000000" inline; CSS fill outranks that */
  .uip-car-join .twae-icon svg,
  .uip-car-join .twae-icon svg *{ fill:#ffffff !important; }

  /* the card */
  .uip-car-join .twae-content.twae-content.twae-content{
    display:block !important;          /* the widget stacks these with flex-row */
    grid-column:2 !important; grid-row:1 !important;
    width:auto !important; max-width:none !important;
    overflow:visible !important;             /* the description was clipped away */
    background:#ffffff !important;
    border:1px solid #E7E7E7 !important;
    border-radius:15px !important;
    box-shadow:none !important;
    padding:14px 16px !important;
    margin:0 !important;
    text-align:left !important;
    transition:border-color .25s ease, box-shadow .25s ease;
  }
  .uip-car-join .twae-story:hover .twae-content{
    border-color:#00A8BB !important;
    box-shadow:0 6px 18px rgba(13,23,33,.07) !important;
  }

  .uip-car-join .twae-title{
    display:block !important;
    font-family:"Montserrat", Sans-serif !important;
    font-size:15.5px !important; font-weight:600 !important; line-height:1.3 !important;
    color:#10111A !important;                /* was 22px cyan */
    margin:0 0 5px !important; padding:0 !important;
    text-align:left !important;
  }

  /* the copy the widget was hiding at height:0 */
  .uip-car-join .twae-description.twae-description.twae-description.twae-description{
    display:block !important;
    height:auto !important; min-height:0 !important; max-height:none !important;
    overflow:visible !important;
    opacity:1 !important;
    font-family:"Montserrat", Sans-serif !important;
    font-size:13px !important; line-height:1.6 !important;
    color:#5b6570 !important;
    margin:0 !important;
  }
  .uip-car-join .twae-description *{
    font-size:13px !important; line-height:1.6 !important; color:#5b6570 !important;
    margin:0 !important;
  }

  /* section heading + intro line */
  .uip-car-join .elementor-heading-title{
    font-size:28px !important; font-weight:700 !important; line-height:1.22 !important;
    color:#10111A !important; text-align:left !important;
  }
  .uip-car-join .elementor-widget-text-editor,
  .uip-car-join .elementor-widget-text-editor *{
    font-size:15px !important; line-height:1.7 !important; color:#5b6570 !important;
    text-align:left !important;
  }
  .uip-car-join .elementor-widget-timeline-widget-addon{ margin-top:22px !important; }
}

/* [VZ-92] Point 2, second pass — three things the first pass left behind,
   found by measuring the rebuilt page rather than by eye.

   1. BENEFITS read as a ragged grid. The two columns are actually even - each
      wrapper measures 142.6px at x=40 and x=203 - but the chip inside is
      sized to its own text, so "Sick Leave" drew a narrow box next to a wide
      "Public Holidays". Filling the column fixes the raggedness without
      touching the grid.

   2. THE CULTURE STRIP is a swiper on mobile (e-n-carousel), not the
      .e-con.e-child rows [UIP-44e] tags, so its slides never got the card
      treatment and stayed transparent once the cyan fill was removed.

   3. ITS PAGINATION BULLETS are white - correct against the old cyan fill,
      invisible against the white section this redesign gives it. They now use
      the same pair as every other rail on the site (.uip-wwa-dot): #cfd8dc,
      accent when active.

   Mobile only, like the rest of the Careers work.

   Revert: delete this block. */
@media (max-width:767px){

  /* 1 - the chip fills the column it sits in */
  .uip-car-ben .uip-ben{
    width:100% !important;
    height:100% !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
  }

  /* 2 - every carousel slide is a house card */
  .uip-car-cult .swiper-slide > .e-con,
  .uip-car-cult .e-n-carousel .swiper-slide > .e-con{
    background:#ffffff !important;
    border:1px solid #E7E7E7 !important;
    border-radius:15px !important;
    box-shadow:none !important;
  }
  .uip-car-cult .swiper-slide .elementor-heading-title{ color:#10111A !important; }

  /* 3 - bullets that exist against a white section */
  .uip-car-cult .swiper-pagination-bullet{
    background:#cfd8dc !important;
    opacity:1 !important;
  }
  .uip-car-cult .swiper-pagination-bullet-active{ background:#00A8BB !important; }
}

/* [VZ-93] Points 1-9 — Careers page, second pass.

   See the [VZ-93] JS block for what it builds and why. This block paints it,
   with the same tokens as the rest of the site: #ffffff surface, #E7E7E7
   hairline, 15px radius, #10111A ink, #5b6570 body, #00A8BB accent.

   Section spacing is deliberately NOT set here: the JS hands every Careers
   section the [VZ-87] hooks, so the rhythm comes from that block's variables
   and cannot drift from the rest of the site. The flat 36px rule [VZ-90] had
   is removed for the same reason.

   Mobile only.

   Revert: delete this block and the [VZ-93] JS block. */
@media (max-width:767px){

  .uip-car-hide{ display:none !important; }

  /* ---- Point 2: both intro buttons in the theme blue ----------------- */
  .uip-car-sec .elementor-widget-button a.elementor-button,
  .uip-car-intro .elementor-widget-button:nth-of-type(2) a.elementor-button,
  .uip-car-intro .e-con > .elementor-widget-button + .elementor-widget-button a.elementor-button{
    background:#00A8BB !important;
    border-color:#00A8BB !important;
    color:#ffffff !important;
  }
  .uip-car-sec .elementor-widget-button a.elementor-button:hover,
  .uip-car-intro .elementor-widget-button:nth-of-type(2) a.elementor-button:hover,
  .uip-car-intro .e-con > .elementor-widget-button + .elementor-widget-button a.elementor-button:hover{
    background:#008C9C !important; border-color:#008C9C !important; color:#ffffff !important;
  }
  /* the buttons sat straight on top of the photo */
  .uip-car-intro .elementor-widget-image{ margin-top:26px !important; }

  /* ---- Point 3: one card per slide, image on top --------------------- */
  .uip-car-cult .swiper-wrapper{ align-items:stretch !important; }
  .uip-car-cult .swiper-slide{ height:auto !important; display:flex !important; }

  .uip-cult2-card{
    display:flex !important; flex-direction:column !important;
    width:100% !important; height:100% !important;
    background:#ffffff !important;
    border:1px solid #E7E7E7 !important;
    border-radius:15px !important;
    box-shadow:none !important;
    overflow:hidden !important;
    /* Elementor drives container padding through these */
    --padding-top:0px; --padding-bottom:18px; --padding-left:0px; --padding-right:0px;
    padding:0 0 18px !important;
  }
  /* the card inside the card */
  .uip-cult2-inner{
    background:transparent !important; background-image:none !important;
    border:0 !important; border-radius:0 !important; box-shadow:none !important;
    --padding-top:0px; --padding-bottom:0px; --padding-left:0px; --padding-right:0px;
    padding:0 !important; margin:0 !important;
    width:100% !important;
    display:flex !important; flex-direction:column !important;
  }
  /* the image is the top of the card, not a thumbnail in it */
  .uip-cult2-img{
    order:-1 !important;
    width:100% !important;
    margin:0 0 14px !important; padding:0 !important;
  }
  .uip-cult2-img .elementor-widget-container,
  .uip-cult2-img figure,
  .uip-cult2-img a{ display:block !important; width:100% !important; margin:0 !important; }
  .uip-cult2-img img{
    display:block !important;
    width:100% !important; max-width:none !important;
    height:150px !important;                /* same box on all four cards */
    object-fit:cover !important;
    border-radius:0 !important;
  }
  .uip-cult2-title{ padding:0 18px !important; margin:0 0 6px !important; }
  .uip-cult2-title .elementor-heading-title{
    font-size:17px !important; font-weight:700 !important; line-height:1.3 !important;
    color:#10111A !important; text-align:left !important;
  }
  .uip-cult2-desc{ padding:0 18px !important; margin:0 !important; }
  .uip-cult2-desc,
  .uip-cult2-desc *{
    font-size:13px !important; line-height:1.6 !important; color:#5b6570 !important;
    text-align:left !important; margin:0 !important;
  }

  /* ---- Point 4: the benefits tile grid ------------------------------- */
  /* .uip-msvc supplies the tile, the 3-up grid and the "+N More" pill; only
     the icon needs saying, because these are outline marks rather than the
     filled chips the services tiles carry */
  .uip-ben-grid .elementor-icon{
    padding:0 !important;
    background:transparent !important;
    border-radius:0 !important;
  }
  .uip-ben-grid .elementor-icon svg{
    width:26px !important; height:26px !important;
    overflow:visible !important;
  }
  /* interior white, outline in the theme blue - the marks ship stroke="black"
     with fill="none" as presentation attributes, which CSS outranks */
  .uip-ben-grid .elementor-icon svg *{
    stroke:#00A8BB !important;
    fill:#ffffff !important;
  }
  .uip-ben-grid .uip-msvc-t{ font-size:11px !important; line-height:1.3 !important; }

  /* ---- Point 5: the quote rail --------------------------------------- */
  .uip-crail{
    display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
    grid-template-columns:none !important;
    overflow-x:auto !important; overflow-y:hidden !important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:12px !important;
    align-items:stretch !important;
    padding-bottom:2px !important;
  }
  .uip-crail::-webkit-scrollbar{ display:none; }
  .uip-crail-card{
    flex:0 0 100% !important;
    width:100% !important; max-width:100% !important;
    height:auto !important;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    margin:0 !important;
  }
  .uip-crail-nav{
    display:flex !important; align-items:center; justify-content:center;
    gap:7px; width:100%; margin-top:14px;
  }
  .uip-crail-dot{
    width:7px !important; height:7px !important; padding:0 !important;
    border:0 !important; border-radius:50% !important;
    background:#cfd8dc !important; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .25s ease;
  }
  .uip-crail-dot.is-on{ background:#00A8BB !important; }

  /* ---- Point 7: the blog link becomes a button ----------------------- */
  .uip-car-blogbtn{
    display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
    margin:14px auto 0 !important;
    padding:13px 26px !important;
    font-family:"Montserrat", Sans-serif !important;
    font-size:13.5px !important; font-weight:600 !important; line-height:1 !important;
    color:#ffffff !important; background:#00A8BB !important;
    border:1px solid #00A8BB !important; border-radius:999px !important;
    text-decoration:none !important;
    -webkit-tap-highlight-color:transparent;
    transition:background .25s ease, transform .2s ease;
  }
  .uip-car-blogbtn:hover{ background:#008C9C !important; border-color:#008C9C !important; }
  .uip-car-blogbtn:active{ transform:scale(.97); }
  .uip-car-stories .e-con-inner{ text-align:center !important; }

  /* ---- Point 8: four icons, centred, no names ------------------------ */
  .uip-car-socrow{
    display:flex !important; align-items:center !important; justify-content:center !important;
    gap:28px !important;
    width:100% !important;
    margin:18px 0 0 !important;
  }
  .uip-car-soc-i{
    display:inline-flex !important; align-items:center; justify-content:center;
    width:26px; height:26px;
    -webkit-tap-highlight-color:transparent;
  }
  .uip-car-soc-i svg{
    width:22px !important; height:22px !important;
    fill:#10111A !important; color:#10111A !important;
    transition:fill .25s ease;
  }
  .uip-car-soc-i:hover svg{ fill:#00A8BB !important; }
  .uip-car-soc .elementor-widget-text-editor,
  .uip-car-soc .elementor-widget-text-editor *{ text-align:center !important; }
}

/* [VZ-94] Point 3, correction — the culture card needed the repeated-hook
   treatment, not a single class.

   The [VZ-93] rules for this card were written with one class each
   (.uip-cult2-card, .uip-cult2-inner, .uip-cult2-img img). Elementor writes
   its per-element geometry as
   `.elementor-1418 .elementor-element.elementor-element-<id>{...}` - 0,3,0 -
   and this stylesheet is linked BEFORE Elementor's, so at equal importance
   the single-class rules lost and the card kept its old box: a 51x44
   thumbnail instead of a 150px panel, and 27px of side padding on the
   container that was supposed to let the image run full width.

   Measured after: image 254x44 inside a 308px container. Wanted: the image
   the full width of the card, one fixed height on all four.

   Repeating each hook four times outranks Elementor and matches what [VZ-87]
   and [VZ-91] already do in this file.

   Revert: delete this block ([VZ-93]'s own rules stay, they are simply
   outranked today). */
@media (max-width:767px){

  /* the card: no padding of its own, the image runs to its edges */
  .uip-cult2-card.uip-cult2-card.uip-cult2-card.uip-cult2-card{
    --padding-top:0px; --padding-bottom:18px;
    --padding-left:0px; --padding-right:0px;
    padding:0 0 18px !important;
    overflow:hidden !important;
  }
  /* Elementor's own boxed inner sits between the card and the widgets */
  .uip-cult2-card.uip-cult2-card.uip-cult2-card.uip-cult2-card > .e-con-inner{
    --padding-top:0px; --padding-bottom:0px;
    --padding-left:0px; --padding-right:0px;
    padding:0 !important;
    width:100% !important; max-width:none !important;
    display:flex !important; flex-direction:column !important;
  }
  .uip-cult2-inner.uip-cult2-inner.uip-cult2-inner.uip-cult2-inner{
    --padding-top:0px; --padding-bottom:0px;
    --padding-left:0px; --padding-right:0px;
    padding:0 !important; margin:0 !important;
    width:100% !important; max-width:none !important;
    display:flex !important; flex-direction:column !important;
  }

  /* the image panel: same box on all four cards */
  .uip-cult2-img.uip-cult2-img.uip-cult2-img.uip-cult2-img{
    order:-1 !important;
    width:100% !important; max-width:none !important;
    margin:0 0 14px !important; padding:0 !important;
  }
  .uip-cult2-img.uip-cult2-img.uip-cult2-img .elementor-widget-container,
  .uip-cult2-img.uip-cult2-img.uip-cult2-img figure,
  .uip-cult2-img.uip-cult2-img.uip-cult2-img a{
    display:block !important; width:100% !important; max-width:none !important; margin:0 !important;
  }
  .uip-cult2-img.uip-cult2-img.uip-cult2-img img{
    display:block !important;
    width:100% !important; max-width:none !important;
    height:150px !important; min-height:150px !important;
    object-fit:cover !important;
    object-position:center !important;
    border-radius:0 !important;
  }

  /* text keeps its inset now that the image no longer shares it */
  .uip-cult2-title.uip-cult2-title.uip-cult2-title.uip-cult2-title{
    padding:0 18px !important; margin:0 0 6px !important; width:100% !important;
  }
  .uip-cult2-desc.uip-cult2-desc.uip-cult2-desc.uip-cult2-desc{
    padding:0 18px !important; margin:0 !important; width:100% !important;
  }
}

/* [VZ-93] desktop guard — .uip-car-blogbtn and the icon row are built by
   the JS at every width, but only painted (and only allowed to replace the
   originals) below 768px. Without this the desktop Stories block showed the
   paragraph AND the new button, which is the 24px it grew by. */
@media (min-width:768px){
  .uip-car-blogbtn,
  .uip-car-socrow{ display:none !important; }
}

/* [VZ-93] the rail rotates its own children to loop; scroll anchoring
   would try to hold the view still across that move and fight the
   correction the JS applies. */
@media (max-width:767px){
  .uip-crail{ overflow-anchor:none !important; }
  .uip-crail-card{ overflow-anchor:none !important; }
}

/* [VZ-95] Points 1, 2, 3 — the double card, equal card heights, the centred
   benefit tile, and the Stories block's spacing.

   1. THE DOUBLE OUTLINE. Two elements were drawing a card: the boxed
      container [VZ-92] styles as the card, and the container inside it, which
      [UIP-44e] had already tagged .uip-cult-card and given a border, radius
      and white fill of its own. [VZ-93] tried to clear the inner one with a
      single-class rule and lost the cascade to [UIP-44]'s two-class selector.
      Repeating the hook settles it - see the note in [VZ-94].

   2. EQUAL CARD HEIGHTS. Every card box already measured 361px; what differed
      was where the CONTENT stopped. "Never Stop Growing" is one line of title
      where the other three wrap to two, so its text ended 20px higher and the
      card read as short. Reserving two lines for every title lines all four
      up. 2.6em is exactly two lines at the 1.3 line-height set above.

   3. STORIES SPACING. That section holds only a heading and a button, so the
      standard 36px top and bottom sat around a very short block and read
      loose. 22px keeps it in the same family without going tight.

   Mobile only, like the rest of the Careers work.

   Revert: delete this block and the [VZ-95] JS block. */
@media (max-width:767px){

  /* 1 - only the outer container is a card */
  .uip-cult2-inner.uip-cult2-inner.uip-cult2-inner.uip-cult2-inner{
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
  }

  /* 2 - the title block is levelled by the [VZ-95] JS, which measures the
     tallest of the four at the current width. A fixed height here was
     wrong: it padded every title equally and left the 20px difference. */
  .uip-cult2-title.uip-cult2-title.uip-cult2-title .elementor-heading-title{
    display:block !important;
  }

  /* 3 - the odd tile sits in the middle column */
  .uip-msvc-mid.uip-msvc-mid{ grid-column:2 !important; }

  /* 4 - a shorter block needs less room around it. 36px (the site standard)
     measured 50px above and 98px below this two-line block, which read
     loose; 22px overcorrected to 36px above. 28px lands between - about 8px
     off the original on each side, which is the "reduce it a little, do not
     make it tight" the ticket asks for. */
  .uip-car-stories.uip-car-stories.uip-car-stories.uip-car-stories{
    --padding-top:28px; --padding-bottom:28px;
    padding-top:28px !important;
    padding-bottom:28px !important;
  }
}

/* [VZ-96] Point 4 — the footer e-mail button's text sits right of centre.

   MEASURED at 1280 on the footer's mailto button: the pill is 205px, its
   content wrapper is centred (23px each side), but the text inside sits 42px
   from the left and 23px from the right - 19px off centre.

   The 19px is an `.elementor-button-icon` span - 14px wide plus the
   wrapper's 5px flex gap - holding an envelope icon whose fill computes to
   #ffffff on a #ffffff pill. It has been invisible all along, but it still
   takes its place in the flex row and pushes the label right of centre.

   So the icon is hidden rather than recoloured: it was never visible, and
   dropping it is what centres the label. Scoped to a mailto button inside
   the footer, so no other button on the site loses an icon it actually
   shows. Applied at every width and wherever this footer appears (it is one
   shared template), which is what the ticket asks for.

   Revert: delete this block. */
footer a.elementor-button[href^="mailto:"] .elementor-button-icon,
.uip-footer a.elementor-button[href^="mailto:"] .elementor-button-icon,
[class*="elementor-location-footer"] a.elementor-button[href^="mailto:"] .elementor-button-icon{
  display:none !important;
}
/* with the slot gone the gap has nothing to separate, and would otherwise
   still offset a single child by half of itself in some flex settings */
footer a.elementor-button[href^="mailto:"] .elementor-button-content-wrapper,
.uip-footer a.elementor-button[href^="mailto:"] .elementor-button-content-wrapper,
[class*="elementor-location-footer"] a.elementor-button[href^="mailto:"] .elementor-button-content-wrapper{
  gap:0 !important;
  justify-content:center !important;
}

/* [VZ-97] Points 5 and 6 — the Careers design on desktop, and no old design
   in the first frame.

   POINT 6 FIRST, because it shapes the rest. The flash is real and was
   captured: throttled 6x, the page painted the OLD cyan "Application Form"
   banner with the black logo at 23.7s, well before DOMContentLoaded at 54.6s.
   The [VZ-84] boot gate does not save it - that gate carries a 2.6s keyframe
   failsafe so a page can never be left blank, and on a slow device the
   failsafe fires long before the JS has run. Raising the failsafe would just
   trade a flash for a blank screen, and the ticket rightly asks for a fix at
   the source rather than a longer overlay.

   The source fix is to stop the old design from being paintable at all. Every
   rule in the FIRST PAINT section below keys off `.elementor-page-1418`, the
   page class the SERVER already puts on <body>, so it applies in the very
   first style resolution - no JS, no class hook, no timing. What the visitor
   sees before the JS runs is the dark hero band, white sections and a white
   logo: the new design's shell, empty rather than wrong. The JS then fills in
   the hero text and the interactive pieces.

   Nothing is deleted: the original hero contents stay in the DOM (the page's
   own scripts still dereference them), they are simply never painted.

   POINT 5. The same page class carries the design to desktop, where the page
   was still entirely on the old theme: no hero at all, purple buttons, a flat
   cyan culture band with cyan-on-cyan cards, tinted benefit panels and the
   cyan timeline. The rules below give desktop the same tokens as mobile
   (#ffffff surface, #E7E7E7 hairline, 15px radius, #10111A ink, #5b6570 body,
   #00A8BB accent) while leaving desktop's LAYOUT alone - the multi-column
   grids stay multi-column. Only the phone-specific layouts (the 3-up tile
   grid with its reveal, the one-card rails) remain behind the 767px query,
   because they exist to solve a narrow viewport.

   Revert: delete this block. */

/* ============================ FIRST PAINT ============================== */

/* the hero band is dark from the first frame, and the old cyan artwork and
   its "Application Form" heading are never painted. :not() keeps the stack
   the JS appends visible. */
.elementor-page-1418 .elementor-element-8263fa6{
  background-color:#080a0f !important;
  background-image:none !important;
}
.elementor-page-1418 .elementor-element-8263fa6 > .e-con-inner > *:not(.uip-abhero-stack){
  display:none !important;
}

/* the careers/blog header template ships the BLACK logo on a dark pill. The
   JS swaps the asset for the white one; until it does, tint it white so the
   dark version is never seen. Once the src is swapped this stops matching. */
.elementor-page-1418 header img[src*="VORZA-black-logo"],
.elementor-page-1418 [class*="elementor-location-header"] img[src*="VORZA-black-logo"]{
  filter:brightness(0) invert(1) !important;
}

/* the three cyan fills the redesign replaces, killed before they can paint */
.elementor-page-1418 .elementor-element-185df4cf,
.elementor-page-1418 .elementor-element-70f571f6,
.elementor-page-1418 .elementor-element-7c35caf9{
  background-color:#ffffff !important;
  background-image:none !important;
}
.elementor-page-1418 .elementor-element-55f7d34d{
  background-image:none !important;
  background-color:#ffffff !important;
}

/* copy the hero took over, and the paragraph the blog button replaces, are
   hidden at every width - the hero and the button show them instead */
.uip-car-moved,
.uip-car-hide{ display:none !important; }

/* ============================== DESKTOP =============================== */
@media (min-width:768px){

  /* the hero is marked hidden-desktop by the theme; the redesign gives every
     other page a hero, so Careers gets one too */
  .elementor-page-1418 .elementor-element-8263fa6{
    display:flex !important;
  }
  .elementor-page-1418 .uip-abhero-stack{ padding:0 40px; }

  /* the blog button replaces its paragraph here as well */
  .uip-car-blogbtn{
    display:inline-flex !important; align-items:center; justify-content:center;
    margin:16px auto 0 !important;
    padding:14px 30px !important;
    font-family:"Montserrat", Sans-serif !important;
    font-size:14px !important; font-weight:600 !important; line-height:1 !important;
    color:#ffffff !important; background:#00A8BB !important;
    border:1px solid #00A8BB !important; border-radius:999px !important;
    text-decoration:none !important;
    transition:background .25s ease;
  }
  .uip-car-blogbtn:hover{ background:#008C9C !important; border-color:#008C9C !important; }
  .uip-car-stories .e-con-inner{ text-align:center !important; }

  /* ---- typography ---------------------------------------------------- */
  .uip-car-sec .elementor-heading-title{
    font-family:"Montserrat", Sans-serif !important;
    color:#10111A !important;
  }
  .uip-car-sec .elementor-widget-text-editor,
  .uip-car-sec .elementor-widget-text-editor *{
    color:#5b6570 !important;
    hyphens:none !important;
  }

  /* ---- buttons: the theme blue, both of them ------------------------- */
  .uip-car-sec .elementor-widget-button a.elementor-button{
    display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
    padding:14px 30px !important;
    font-family:"Montserrat", Sans-serif !important;
    font-size:14px !important; font-weight:600 !important; line-height:1 !important;
    background:#00A8BB !important; color:#ffffff !important;
    border:1px solid #00A8BB !important; border-radius:999px !important;
    box-shadow:none !important;
    transition:background .25s ease;
  }
  .uip-car-sec .elementor-widget-button a.elementor-button:hover{
    background:#008C9C !important; border-color:#008C9C !important;
  }

  /* ---- the culture cards (desktop uses its own section) --------------- */
  .elementor-page-1418 .uip-cult .uip-cult-card{
    background:#ffffff !important;
    border:1px solid #E7E7E7 !important;
    border-radius:15px !important;
    box-shadow:none !important;
    overflow:hidden !important;
    transition:border-color .25s ease, box-shadow .25s ease;
  }
  .elementor-page-1418 .uip-cult .uip-cult-card:hover{
    border-color:#00A8BB !important;
    box-shadow:0 8px 24px rgba(13,23,33,.07) !important;
  }
  .elementor-page-1418 .uip-cult .uip-cult-card .elementor-heading-title{ color:#10111A !important; }
  .elementor-page-1418 .uip-cult .uip-cult-card p,
  .elementor-page-1418 .uip-cult .uip-cult-card .elementor-widget-text-editor *{ color:#5b6570 !important; }
  .elementor-page-1418 .uip-cult .elementor-heading-title{ color:#10111A !important; }

  /* ---- benefits: hairline chips, outline icons ----------------------- */
  .elementor-page-1418 .uip-ben{
    background:#ffffff !important;
    background-image:none !important;
    border:1px solid #E7E7E7 !important;
    border-radius:15px !important;
    box-shadow:none !important;
  }
  .elementor-page-1418 .uip-ben:hover{
    border-color:#00A8BB !important;
    box-shadow:0 6px 18px rgba(13,23,33,.07) !important;
    transform:none !important;
  }
  .elementor-page-1418 .uip-ben .elementor-icon-box-title,
  .elementor-page-1418 .uip-ben .elementor-icon-box-title *{ color:#10111A !important; }
  .elementor-page-1418 .uip-ben .elementor-icon svg *{
    stroke:#00A8BB !important;
    fill:#ffffff !important;
  }
  .elementor-page-1418 .uip-car-ben .e-con.e-child{
    background-color:transparent !important; background-image:none !important;
  }

  /* ---- quote cards ---------------------------------------------------- */
  .elementor-page-1418 .uip-quote-card{
    background:#ffffff !important;
    border:1px solid #E7E7E7 !important;
    border-radius:15px !important;
    box-shadow:none !important;
  }

  /* ---- the joining timeline keeps its two-sided desktop layout and only
          changes colour ----------------------------------------------- */
  .uip-car-join .twae-content{
    background:#ffffff !important;
    border:1px solid #E7E7E7 !important;
    border-radius:15px !important;
    box-shadow:none !important;
  }
  .uip-car-join .twae-title{
    font-family:"Montserrat", Sans-serif !important;
    font-size:18px !important; font-weight:600 !important;
    color:#10111A !important;
  }
  .uip-car-join .twae-description,
  .uip-car-join .twae-description *{ color:#5b6570 !important; }
  .uip-car-join .twae-icon{ background:#00A8BB !important; }
  .uip-car-join .twae-icon svg *{ fill:#ffffff !important; }
  .uip-car-join .twae-timeline::before{ background:#E7E7E7 !important; }
  .uip-car-join .twae-arrow{ display:none !important; }
}

/* =====================================================================
   [VZ-98] .. [VZ-99] — desktop navbar: caret state + second-level menus.
   ===================================================================== */

/* [VZ-98] Point 1 — the Services / Technologies / IT Support carets now
   follow their own dropdown, and only their own.

   Cause, measured in the browser: [VZ-35]'s open() swaps the visible card
   when the pointer moves from one trigger to the next, but only ever removes
   .uip-mm-active from the trigger it is closing. Walking Services ->
   Technologies -> IT Support left all three carets at 180deg; after the menu
   closed, Services and Technologies stayed flipped until each was opened and
   closed again. Separately, [UIP-13] rotates the caret on plain li:hover, so
   a menu closed by scroll or Escape under a resting pointer still showed an
   "open" caret.

   The [VZ-98] JS block keeps .uip-mm-active equal to "this trigger's card is
   open". This rule lets that class be the only thing that flips a trigger's
   caret; the .3s transition from [UIP-13] still animates both directions.
   Desktop only - the mobile drawer carets are separate buttons ([VZ-35]).
   Revert: delete this rule and the [VZ-98] JS block. */
@media (min-width:1025px){
  .uip-nav-rail .elementskit-navbar-nav > li.uip-mm-trigger:not(.uip-mm-active) > a .elementskit-submenu-indicator,
  .uip-nav-rail .elementskit-navbar-nav > li.uip-mm-trigger:not(.uip-mm-active) > a i{
    transform:none;
  }
}

/* [VZ-99] Point 2 — second-level menus for the subcategories.

   Every category in the [VZ-35] card gets a chevron. Hovering the category
   (or clicking its chevron) opens a panel listing only that category's
   subcategories. Markup, built by the [VZ-99] JS block:
     .uip-mm > .uip-mmsub > .uip-mmsub-body > (.uip-mmsub-head + .uip-mmsub-grid > a.uip-mmsub-link)

   The panel is a CHILD of the .uip-mm card on purpose: the pointer moving
   into it never "leaves" the card, so [VZ-35]'s close timer is not started
   and the first level cannot flicker shut on the way across.

   Placement is chosen per category at open time, in viewport terms: beside
   the category with 3 columns when there is room, beside it with 2 columns
   when there is not, and directly below (or above) the category on narrow
   desktops. It is always clamped 16px inside the viewport.

   Theme is the [VZ-35] card's: dark glass, 1px hairline, #00A8BB / #4fd9e8
   accents, the same hover treatment as .uip-mm-item. The two-digit numbers
   echo the 01-12 numbering on the category pages themselves.

   Existing items are not restyled: the chevron sits at the far end of the
   row (margin-left:auto), so no label moves or truncates - verified at
   1025 / 1100 / 1440 / 1920. Revert: delete this block and the [VZ-99] JS. */
@media (min-width:1025px){

  /* ---- chevron on each first-level category ---- */
  .uip-mm a.uip-mm-item .uip-mm-chev{
    flex:0 0 24px; width:24px; height:24px; margin-left:auto;
    box-sizing:border-box;
    display:grid; place-items:center;
    border-radius:50%; border:1px solid transparent;
    color:rgba(255,255,255,.42);
    transition:color .22s ease, background .22s ease, border-color .22s ease,
               transform .3s cubic-bezier(.16,1,.3,1);
  }
  /* 14px box, not 13: the circle's inner box is 22px, and an odd icon in an
     even box sits on a half pixel (measured: glyph box at x+5.5 / y+5.5), which
     a 1x display snaps one pixel off-centre. The JS viewBox is widened by the
     same 14/13 ratio, so the drawn chevron keeps its exact size and stroke. */
  .uip-mm a.uip-mm-item .uip-mm-chev svg{ width:14px; height:14px; display:block; }
  .uip-mm a.uip-mm-item:hover .uip-mm-chev{ color:#4fd9e8; }
  .uip-mm a.uip-mm-item .uip-mm-chev:hover{
    background:rgba(0,168,187,.16); border-color:rgba(0,168,187,.45); }

  /* the category whose panel is open keeps its hover look */
  .uip-mm a.uip-mm-item.uip-mm-subopen{
    background:rgba(255,255,255,.07);
    border-color:rgba(0,168,187,.42);
    transform:translateX(3px);
  }
  .uip-mm a.uip-mm-item.uip-mm-subopen .uip-mm-label{ color:#4fd9e8; }
  .uip-mm a.uip-mm-item.uip-mm-subopen .uip-mm-ico{
    background:rgba(0,168,187,.20); border-color:rgba(0,168,187,.50); }
  .uip-mm a.uip-mm-item.uip-mm-subopen .uip-mm-chev{
    color:#4fd9e8; background:rgba(0,168,187,.16); border-color:rgba(0,168,187,.45); }

  /* open state: the chevron turns to point at its panel */
  .uip-mm a.uip-mm-item.uip-mm-sub-l .uip-mm-chev{ transform:rotate(180deg); }
  .uip-mm a.uip-mm-item.uip-mm-sub-d .uip-mm-chev{ transform:rotate(90deg); }
  .uip-mm a.uip-mm-item.uip-mm-sub-u .uip-mm-chev{ transform:rotate(-90deg); }

  /* ---- the second-level panel ---- */
  .uip-mmsub{
    position:absolute; top:0; left:0; z-index:5;
    box-sizing:border-box;
    background:#121821;
    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;
    box-shadow:0 28px 70px rgba(0,0,0,.6);
    padding:14px;
    overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
    visibility:hidden; opacity:0; pointer-events:none;
    transform:translate3d(var(--uip-sx,0),var(--uip-sy,0),0);
    transition:opacity .18s ease, transform .26s cubic-bezier(.16,1,.3,1), visibility 0s linear .26s;
  }
  .uip-mmsub[data-dir="r"]{ --uip-sx:-8px; }
  .uip-mmsub[data-dir="l"]{ --uip-sx:8px; }
  .uip-mmsub[data-dir="d"]{ --uip-sy:-8px; }
  .uip-mmsub[data-dir="u"]{ --uip-sy:8px; }
  .uip-mmsub.uip-mmsub-open{
    visibility:visible; opacity:1; pointer-events:auto; transform:none;
    transition:opacity .2s ease, transform .28s cubic-bezier(.16,1,.3,1), visibility 0s;
  }

  /* content fades in on every open and on every switch between categories */
  @keyframes uipMmSubIn{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } }
  .uip-mmsub-body{ animation:uipMmSubIn .22s ease both; }

  .uip-mmsub-head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:0 2px 12px 8px; margin-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.09);
  }
  .uip-mmsub-title{
    font-size:14.5px; line-height:1.35; font-weight:600; letter-spacing:.1px;
    color:#ffffff; min-width:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .uip-mmsub a.uip-mmsub-all{
    flex:0 0 auto;
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 13px; border-radius:999px;
    background:rgba(0,168,187,.14); border:1px solid rgba(0,168,187,.38);
    color:#4fd9e8; font-size:12.5px; font-weight:600; line-height:1.2; text-decoration:none;
    transition:background .22s ease, border-color .22s ease, color .22s ease;
  }
  .uip-mmsub a.uip-mmsub-all::after{
    content:"\2192"; font-size:14px; line-height:1;
    transition:transform .22s cubic-bezier(.16,1,.3,1); }
  .uip-mmsub a.uip-mmsub-all:hover{
    background:rgba(0,168,187,.26); border-color:#00A8BB; color:#ffffff; }
  .uip-mmsub a.uip-mmsub-all:hover::after{ transform:translateX(3px); }

  /* column-first order, like the first-level card */
  .uip-mmsub-grid{
    display:grid;
    grid-template-columns:repeat(var(--uip-sc,3), minmax(0,1fr));
    grid-template-rows:repeat(var(--uip-sr,4), auto);
    grid-auto-flow:column;
    gap:2px 8px;
  }
  .uip-mmsub a.uip-mmsub-link{
    display:flex; align-items:flex-start; gap:9px;
    padding:8px 10px; border-radius:12px;
    border:1px solid transparent;
    color:rgba(255,255,255,.8); text-decoration:none; min-width:0;
    transition:background .22s ease, border-color .22s ease, color .22s ease;
  }
  .uip-mmsub-n{
    flex:0 0 auto;
    font-size:11px; line-height:19px; font-weight:600; letter-spacing:.3px;
    font-variant-numeric:tabular-nums;
    color:rgba(79,217,232,.62);
    transition:color .22s ease;
  }
  .uip-mmsub-l{
    min-width:0;
    font-size:13.5px; line-height:1.4; font-weight:500;
    overflow-wrap:break-word;
  }
  .uip-mmsub a.uip-mmsub-link:hover,
  .uip-mmsub a.uip-mmsub-link:focus-visible{
    background:rgba(255,255,255,.07);
    border-color:rgba(0,168,187,.42);
    color:#4fd9e8;
  }
  .uip-mmsub a.uip-mmsub-link:hover .uip-mmsub-n,
  .uip-mmsub a.uip-mmsub-link:focus-visible .uip-mmsub-n{ color:#4fd9e8; }
  .uip-mmsub a.uip-mmsub-link:focus-visible,
  .uip-mmsub a.uip-mmsub-all:focus-visible{ outline:2px solid #4fd9e8; outline-offset:1px; }
}
@media (min-width:1025px) and (prefers-reduced-motion: reduce){
  .uip-mmsub, .uip-mmsub.uip-mmsub-open, .uip-mm a.uip-mm-item .uip-mm-chev{ transition:none; }
  .uip-mmsub-body{ animation:none; }
}
@media (max-width:1024px){
  .uip-mmsub{ display:none !important; }
}

/* [VZ-100] Phone + tablet drawer: the same second level as desktop.

   Markup comes from the [VZ-100] JS block:
     li (section) > [ul.uip-msub-cat > li.uip-msub-cat-item]   (tablet only)
                  > li.uip-msub-host > ul.uip-msub > li.uip-msub-item > a
   On phones the .uip-msub list hangs off the drawer's own category rows, so
   only the third level is new; on tablet the category list is new as well,
   because that drawer never had one.

   Every rule is scoped to a class this block adds, so nothing already in the
   drawer - rows, spacing, carets, colours - is restyled. Revert: delete this
   block and the [VZ-100] JS. */
@media (max-width:1024px){

  /* the section row keeps ONE caret in the drawer: the button's */
  .uip-nav-rail .elementskit-menu-offcanvas-elements li.uip-msub-sechost > a > .elementskit-submenu-indicator{
    display:none !important;
  }

  /* Keep every caret on its own row. The drawer caret is centred vertically
     (measured: top:50% + translateY(-50%)), which was invisible while a row
     was 48px tall - with a list open the row is ~580px and the caret floated
     to the middle of it. Pinned only on the rows this feature can expand. */
  .uip-nav-rail .elementskit-menu-offcanvas-elements li.uip-msub-sec,
  .uip-nav-rail .elementskit-menu-offcanvas-elements li.uip-msub-sechost,
  .uip-nav-rail .elementskit-menu-offcanvas-elements li.uip-msub-host,
  .uip-nav-rail .elementskit-menu-offcanvas-elements li.uip-msub-cat-item{
    position:relative !important;
  }
  .uip-nav-rail .elementskit-menu-offcanvas-elements li.uip-msub-sec > .uip-sub-toggle,
  .uip-nav-rail .elementskit-menu-offcanvas-elements li.uip-msub-sechost > .uip-sub-toggle,
  .uip-nav-rail .elementskit-menu-offcanvas-elements li.uip-msub-host > .uip-sub-toggle{
    top:0 !important; bottom:auto !important; transform:none !important;
  }

  /* the drawer's own subcategory list, left in place but unused */
  .uip-nav-rail .elementskit-menu-offcanvas-elements ul.uip-msub-old{
    display:none !important;
  }

  /* let the lists grow: the drawer scrolls, not a 600px box inside it */
  .uip-nav-rail .elementskit-menu-offcanvas-elements ul.uip-msub,
  .uip-nav-rail .elementskit-menu-offcanvas-elements ul.uip-msub-cat,
  .uip-nav-rail .elementskit-menu-offcanvas-elements ul.uip-msub-parent{
    max-height:none !important;
    overflow:visible !important;
  }

  /* ---- tablet: the category list under a section ---- */
  .uip-nav-rail .elementskit-menu-offcanvas-elements ul.uip-msub-cat{
    margin:0 !important; padding:2px 0 8px 6px !important;
    list-style:none !important; background:transparent !important;
  }
  .uip-nav-rail .elementskit-menu-offcanvas-elements li.uip-msub-cat-item{
    position:relative;
    border:0 !important; margin:0 !important; padding:0 !important;
    list-style:none !important;
  }
  .uip-nav-rail .elementskit-menu-offcanvas-elements li.uip-msub-cat-item > a{
    display:block !important;
    padding:10px 56px 10px 10px !important; margin:0 !important;
    border-radius:10px;
    font-size:15px !important; line-height:1.4 !important; font-weight:500 !important;
    color:rgba(255,255,255,.88) !important; background:transparent !important;
    transition:color .2s ease, background .2s ease;
  }
  .uip-nav-rail .elementskit-menu-offcanvas-elements li.uip-msub-cat-item > a:hover,
  .uip-nav-rail .elementskit-menu-offcanvas-elements li.uip-msub-cat-item > a:active{
    color:#4fd9e8 !important; background:rgba(255,255,255,.05) !important;
  }

  /* sections and categories only show their list while open, exactly like
     [VZ-35]'s rule for the drawer's own submenus */
  .uip-nav-rail .elementskit-menu-offcanvas-elements li.uip-msub-sechost:not(.uip-sub-open) > ul.uip-msub-cat,
  .uip-nav-rail .elementskit-menu-offcanvas-elements li.uip-msub-host:not(.uip-sub-open) > ul.uip-msub{
    display:none !important;
  }
  .uip-nav-rail .elementskit-menu-offcanvas-elements li.uip-msub-sechost.uip-sub-open > ul.uip-msub-cat,
  .uip-nav-rail .elementskit-menu-offcanvas-elements li.uip-msub-host.uip-sub-open > ul.uip-msub{
    display:block !important;
  }

  /* ---- the subcategory list itself ---- */
  .uip-nav-rail .elementskit-menu-offcanvas-elements ul.uip-msub{
    margin:2px 0 6px 16px !important;
    padding:2px 0 2px 12px !important;
    border-left:1px solid rgba(255,255,255,.14) !important;
    list-style:none !important;
    background:transparent !important;
  }
  .uip-nav-rail .elementskit-menu-offcanvas-elements ul.uip-msub > li.uip-msub-item{
    border:0 !important; margin:0 !important; padding:0 !important;
    list-style:none !important;
  }
  .uip-nav-rail .elementskit-menu-offcanvas-elements ul.uip-msub > li.uip-msub-item > a{
    display:flex !important; align-items:flex-start; gap:9px;
    padding:9px 10px !important; margin:0 !important;
    border-radius:10px;
    font-size:13.5px !important; line-height:1.4 !important; font-weight:500 !important;
    color:rgba(255,255,255,.72) !important;
    background:transparent !important;
    transition:color .2s ease, background .2s ease;
  }
  .uip-nav-rail .elementskit-menu-offcanvas-elements ul.uip-msub > li.uip-msub-item > a:hover,
  .uip-nav-rail .elementskit-menu-offcanvas-elements ul.uip-msub > li.uip-msub-item > a:active,
  .uip-nav-rail .elementskit-menu-offcanvas-elements ul.uip-msub > li.uip-msub-item > a:focus-visible{
    color:#4fd9e8 !important;
    background:rgba(255,255,255,.05) !important;
  }
  .uip-nav-rail .elementskit-menu-offcanvas-elements .uip-msub-n{
    flex:0 0 auto;
    font-size:11px; line-height:19px; font-weight:600; letter-spacing:.3px;
    font-variant-numeric:tabular-nums;
    color:rgba(79,217,232,.62) !important;
  }
  .uip-nav-rail .elementskit-menu-offcanvas-elements .uip-msub-t{ min-width:0; }

  /* the row that owns an open list */
  .uip-nav-rail .elementskit-menu-offcanvas-elements li.uip-msub-host.uip-sub-open > a,
  .uip-nav-rail .elementskit-menu-offcanvas-elements li.uip-msub-cat-item.uip-sub-open > a{
    color:#4fd9e8 !important;
  }
}

/* Desktop keeps the navbar it already had: the tablet drawer and the desktop
   bar are the same <li>s, so anything this block adds is hidden above 1024. */
@media (min-width:1025px){
  .uip-nav-rail ul.uip-msub-cat,
  .uip-nav-rail ul.uip-msub,
  .uip-nav-rail .elementskit-navbar-nav > li > .uip-sub-toggle{
    display:none !important;
  }
}