/* ============================================================
   RETACH HEADER V3
   CLEAN CANONICAL BUILD
   2026-09-14

   No body compensation.
   No hero selectors.
   No spacer.
   No legacy .nav rules.
   ============================================================ */

:root{
  --rtx3-purple:#6758ff;
  --rtx3-violet:#905dff;
  --rtx3-pink:#e62cab;

  --rtx3-ink:#10131c;
  --rtx3-muted:#69728d;

  --rtx3-top-h:34px;
  --rtx3-main-h:106px;
  --rtx3-quick-h:52px;

  --rtx3-side:clamp(18px,2.7vw,52px);
}


/* ============================================================
   GLOBAL ISOLATION
   ============================================================ */

#retachHeaderV3,
#retachHeaderV3 *,
#retachHeaderV3 *::before,
#retachHeaderV3 *::after,
.rtx3-search,
.rtx3-search *,
.rtx3-mobile,
.rtx3-mobile *{
  box-sizing:border-box;
}


#retachHeaderV3{

  position:relative;

  top:auto;

  z-index:5000;

  width:100%;

  margin:0;
  padding:0;

  color:var(--rtx3-ink);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;

  background:#fff;

  box-shadow:
    0 8px 28px rgba(71,61,145,.055);
}


/*
  This is intentional.
  V3 is sticky and lives in normal document flow,
  so the body needs ZERO header compensation.
*/
body:has(#retachHeaderV3){
  padding-top:0 !important;
}


#retachHeaderV3 a,
.rtx3-search a,
.rtx3-mobile a{
  color:inherit;
  text-decoration:none;
}


#retachHeaderV3 button,
#retachHeaderV3 input,
.rtx3-search button,
.rtx3-search input,
.rtx3-mobile button{
  font:inherit;
}


#retachHeaderV3 button{
  -webkit-appearance:none;
  appearance:none;
}


#retachHeaderV3 svg,
.rtx3-search svg{
  display:block;

  fill:none;
  stroke:currentColor;

  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* ============================================================
   TOP BAR
   ============================================================ */

.rtx3-top{
  height:var(--rtx3-top-h);

  border-bottom:
    1px solid rgba(90,77,180,.045);

  background:
    linear-gradient(
      90deg,
      #f6f7ff,
      #fbfaff 50%,
      #f7f4ff
    );

  position:relative;

  z-index:1;
}


.rtx3-frame{
  width:
    calc(100% - (var(--rtx3-side) * 2));

  max-width:1816px;

  margin-inline:auto;
}


.rtx3-top__inner{
  position:relative;

  height:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;
}


.rtx3-top__left,
.rtx3-top__right{
  display:flex;
  align-items:center;

  gap:17px;
}


.rtx3-top__left{
  position:relative;
}


.rtx3-top__right > a,
.rtx3-top__country,
.rtx3-top__slogan,
#retachHeaderV3 .rtx3-top-link{
  color:#72788d !important;

  font-size:10px !important;
  font-weight:550 !important;
  line-height:1 !important;

  white-space:nowrap !important;
}


/* HARD RESET: no page button styling can leak here */

#retachHeaderV3 .rtx3-top-link{
  all:unset;

  box-sizing:border-box;

  display:inline-flex;
  align-items:center;

  gap:6px;

  color:#72788d !important;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-size:10px !important;
  font-weight:550 !important;
  line-height:1 !important;

  white-space:nowrap;

  cursor:pointer;
}


#retachHeaderV3 .rtx3-top-link:hover,
.rtx3-top__right > a:hover{
  color:#262a36 !important;
}


#retachHeaderV3 .rtx3-top-link::before,
#retachHeaderV3 .rtx3-top-link::after{
  content:none !important;
  display:none !important;
}


#retachHeaderV3 .rtx3-top-link svg{
  width:14px;
  height:14px;

  flex:0 0 14px;
}




.rtx3-top__separator{
  width:1px;
  height:13px;

  flex:0 0 1px;

  background:
    rgba(67,72,103,.12);
}


/* ============================================================
   MAIN BAR
   ============================================================ */

.rtx3-main-wrap{
height:var(--rtx3-main-h);

  padding:
    7px
    clamp(14px,1.45vw,22px)
    0;

  background:linear-gradient(180deg,#ffffff 0%,#fefeff 42%,#faf9ff 72%,#f5f3fb 100%);

  position:relative;

  z-index:5;

  overflow:visible;

  box-shadow:0 -10px 20px -15px rgba(67,57,137,.28), 0 12px 24px -14px rgba(67,57,137,.34);

  width:100%;

  margin:0;

  border-radius:0;
}




/* MAIN ROW VOLUME START */

/*
  Upper highlight:
  creates the illuminated lip of the raised surface.
*/
.rtx3-main-wrap::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.30),
      rgba(255,255,255,.95) 18%,
      rgba(255,255,255,.95) 82%,
      rgba(255,255,255,.30)
    );

  pointer-events:none;
}


/*
  Lower "thickness":
  not a border — a soft shaded lip.
*/
.rtx3-main-wrap::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:-5px;

  height:7px;

  background:
    linear-gradient(
      180deg,
      rgba(94,79,177,.09) 0%,
      rgba(94,79,177,.035) 45%,
      rgba(94,79,177,0) 100%
    );

  filter:blur(.7px);

  pointer-events:none;
}

/* MAIN ROW VOLUME END */


.rtx3-main{
width:100%;
  height:92px;

  margin:0 auto;

  padding:
    0
    clamp(9px,.8vw,14px);

  display:flex;
  align-items:center;

  gap:
    clamp(11px,1vw,20px);

  border:0;

  border-radius:26px;

  background:#fff;

  box-shadow:none;
}


/* ============================================================
   REAL RETACH LOGO
   ============================================================ */

.rtx3-brand{
  flex:0 0 auto;

  display:flex;
  align-items:center;
}


.rtx3-brand__logo{
display:block;

  width:auto;

  height:
    clamp(56px,3.8vw,70px);

  max-width:none;
  max-height:none;

  margin:0;

  border:0;
  border-radius:0;

  object-fit:contain;

  box-shadow:none;

  transform:none;
}






/* obsolete text-logo elements never render */

.rtx3-brand__word,
.rtx3-brand__spark{
  display:none !important;
}


/* ============================================================
   MAIN NAV
   ============================================================ */

.rtx3-nav{
flex:1 1 auto;

  min-width:0;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:
    clamp(2px,.42vw,8px);
}


#retachHeaderV3 .rtx3-nav-btn{
all:unset;

  box-sizing:border-box;

  min-height:54px;

  padding:
    0
    clamp(8px,.72vw,14px);

  border-radius:16px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:7px;

  color:#11141d;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;

  font-size:
    clamp(17px,1.16vw,20px);

  font-weight:680;
  line-height:1;

  white-space:nowrap;

  cursor:pointer;

  transition:
    background .17s ease,
    color .17s ease;
}


#retachHeaderV3 .rtx3-nav-btn:hover,
#retachHeaderV3 .rtx3-nav-btn.is-active{
  color:#5949ff;

  background:
    linear-gradient(
      135deg,
      #efefff,
      #f5f1ff
    );
}


#retachHeaderV3 .rtx3-nav-btn svg{
  width:12px;
  height:12px;

  transition:
    transform .18s ease;
}


#retachHeaderV3 .rtx3-nav-btn.is-active svg{
  transform:rotate(180deg);
}


/* ============================================================
   PHONE
   ============================================================ */

.rtx3-phone{
flex:0 0 auto;

  min-width:
    clamp(155px,10.2vw,195px);

  display:flex;
  align-items:center;

  gap:10px;
}


.rtx3-phone__icon{
width:44px;
  height:44px;

  flex:0 0 44px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#554cff;

  background:
    linear-gradient(
      145deg,
      #efedff,
      #f7f5ff
    );
}


.rtx3-phone__icon svg{
width:21px;
  height:21px;
}


.rtx3-phone > span:last-child{
  display:flex;
  flex-direction:column;
}


.rtx3-phone strong{
color:#10131d;

  font-size:
    clamp(12px,.84vw,16px);

  font-weight:800;
  line-height:1.05;

  white-space:nowrap;
}


.rtx3-phone small{
margin-top:5px;

  color:#747c98;

  font-size:
    clamp(8px,.56vw,10.5px);

  line-height:1;

  white-space:nowrap;
}


/* ============================================================
   PROJECT CTA
   CLASS CONTRACT REMAINS .btn.btn-primary + data-cb-open
   ============================================================ */

#retachHeaderV3 .rtx3-main > .btn.btn-primary{
  -webkit-appearance:none !important;
  appearance:none !important;

  box-sizing:border-box !important;

  flex:0 0 210px !important;

  width:210px !important;
  min-width:210px !important;

  height:48px !important;
  min-height:48px !important;

  margin:0 !important;
  padding:0 17px 0 20px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  gap:12px !important;

  overflow:hidden !important;

  border:0 !important;
  outline:0 !important;
  border-radius:999px !important;

  color:#fff !important;

  background:
    linear-gradient(
      105deg,
      #6c61e9 0%,
      #8060df 58%,
      #b957ba 100%
    ) !important;

  box-shadow:
    0 5px 14px rgba(86,70,176,.13) !important;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif !important;

  text-decoration:none !important;

  cursor:pointer !important;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease !important;
}


#retachHeaderV3 .rtx3-main-cta__text{
  display:block !important;

  margin:0 !important;
  padding:0 !important;

  color:#fff !important;

  font-size:13px !important;
  font-weight:600 !important;
  line-height:1 !important;

  letter-spacing:0 !important;

  text-decoration:none !important;

  white-space:nowrap !important;
  word-break:normal !important;
}


#retachHeaderV3 .rtx3-main-cta__arrow{
  width:17px !important;
  height:17px !important;

  flex:0 0 17px !important;

  margin:0 !important;

  fill:none !important;
  stroke:#fff !important;
  stroke-width:1.7 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;

  transition:
    transform .16s ease !important;
}


#retachHeaderV3 .rtx3-main > .btn.btn-primary:hover{
  transform:translateY(-1px) !important;

  filter:brightness(1.02) !important;

  box-shadow:
    0 7px 17px rgba(86,70,176,.16) !important;
}


#retachHeaderV3 .rtx3-main > .btn.btn-primary:hover
.rtx3-main-cta__arrow{
  transform:translateX(2px) !important;
}


/* Mega-menu CTA has its own independent geometry */

#retachHeaderV3 .rtx3-services-bottom > .btn.btn-primary{
  -webkit-appearance:none !important;
  appearance:none !important;

  box-sizing:border-box !important;

  width:190px !important;
  height:45px !important;

  padding:0 16px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  border:0 !important;
  border-radius:999px !important;

  color:#fff !important;

  background:
    linear-gradient(
      105deg,
      #6c61e9,
      #8060df 58%,
      #b957ba
    ) !important;

  box-shadow:
    0 5px 13px rgba(86,70,176,.12) !important;

  font-size:12px !important;
  font-weight:600 !important;
  line-height:1 !important;

  white-space:nowrap !important;

  cursor:pointer !important;
}


#retachHeaderV3 .rtx3-services-bottom > .btn.btn-primary b{
  margin:0 !important;

  color:#fff !important;

  font-size:17px !important;
  font-weight:400 !important;
  line-height:1 !important;
}


/* ============================================================
   QUICK DIRECTIONS
   ============================================================ */



/* SECOND ROW STICKY START */


/*
  Normally zero height.
  When the main row becomes fixed,
  this takes exactly its place in document flow.
*/

.rtx3-main-sticky-sentinel{
  display:block;

  width:100%;
  height:0;

  margin:0;
  padding:0;

  border:0;

  pointer-events:none;
}


/*
  Second row becomes fixed only after
  first row has scrolled out of viewport.
*/

#retachHeaderV3.is-main-fixed
.rtx3-main-sticky-sentinel{
  height:var(--rtx3-main-h);
}


#retachHeaderV3.is-main-fixed
.rtx3-main-wrap{
  position:fixed;

  top:0;
  left:0;
  right:0;

  width:100%;

  margin:0;

  z-index:70;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.72) 0%,
      rgba(247,249,255,.58) 50%,
      rgba(239,242,255,.50) 100%
    );

  -webkit-backdrop-filter:
    blur(23px)
    saturate(145%);

  backdrop-filter:
    blur(23px)
    saturate(145%);

  border-top:
    1px solid rgba(255,255,255,.94);

  border-bottom:
    1px solid rgba(103,89,192,.14);

  box-shadow:
    0 1px 0 rgba(255,255,255,.88) inset,
    0 14px 34px -18px rgba(54,46,120,.48),
    0 6px 20px rgba(73,64,150,.09);
}


/*
  At the top of the page dropdowns belong below
  top + main rows.

  After second row becomes fixed they must open
  directly beneath the fixed row.
*/



/* SCROLL ICE INNER START */


#retachHeaderV3.is-main-fixed
.rtx3-main{
  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.35) 0%,
      rgba(247,249,255,.24) 52%,
      rgba(235,239,255,.20) 100%
    );

  border:0;

  box-shadow:none;
}


/* Более заметный холодный блик по верхней грани */

#retachHeaderV3.is-main-fixed
.rtx3-main-wrap::before{
  content:"";

  position:absolute;

  left:1.5%;
  right:1.5%;
  top:0;

  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.98) 15%,
      rgba(222,229,255,.98) 50%,
      rgba(255,255,255,.98) 85%,
      transparent
    );

  filter:blur(.15px);

  pointer-events:none;
}


/* Чуть глубже холодная тень под стеклом */

#retachHeaderV3.is-main-fixed
.rtx3-main-wrap::after{
  content:"";

  position:absolute;

  left:2%;
  right:2%;
  bottom:-10px;

  height:16px;

  background:
    radial-gradient(
      ellipse at center top,
      rgba(101,84,213,.18) 0%,
      rgba(101,84,213,.075) 45%,
      transparent 76%
    );

  filter:blur(2.5px);

  pointer-events:none;
}


/* SCROLL ICE INNER END */


#retachHeaderV3.is-main-fixed



/* RETACH AI LAYERING START */

/*
  Layer model:

  page           < 700
  RETACH AI      = 700  (set by JS)
  fixed header   = 1100
  open header    = 2000
  mega menu      = 2100
  callback modal = 9999+
*/

#retachHeaderV3{
  z-index:1000;
}

#retachHeaderV3.is-main-fixed
.rtx3-main-wrap{
  z-index:1100;
}

#retachHeaderV3.is-main-fixed
.rtx3-mega-wrap{
  z-index:1200;
}


/* When mega is open, entire header stacking context
   must be above the AI widget. */

#retachHeaderV3.is-mega-open{
  z-index:2000;
}

#retachHeaderV3.is-mega-open
.rtx3-main-wrap{
  z-index:2050;
}

#retachHeaderV3.is-mega-open
.rtx3-mega-wrap{
  z-index:2100;
}


/* RETACH AI LAYERING END */


.rtx3-mega-wrap{
  position:fixed;

  top:var(--rtx3-main-h);

  left:0;
  right:0;

  z-index:65;
}


/*
  Mobile behaviour will be handled separately.
  Do not change it while we tune desktop.
*/

@media (max-width:980px){

  .rtx3-main-sticky-sentinel{
    display:none;
  }

  #retachHeaderV3.is-main-fixed
  .rtx3-main-wrap{
    position:relative;

    top:auto;
    left:auto;
    right:auto;
  }

}


/* SECOND ROW STICKY END */


.rtx3-quick-wrap{
  height:52px;

  overflow:hidden;

  background:
    linear-gradient(
      90deg,
      #f8f7ff 0%,
      #fbfaff 50%,
      #f8f6ff 100%
    );

  border-top:
    1px solid rgba(100,86,205,.04);

  border-bottom:
    1px solid rgba(100,86,205,.05);

  position:relative;

  z-index:1;
}


.rtx3-quick{
  width:
    calc(100% - (var(--rtx3-side) * 2));

  max-width:1816px;
  height:100%;

  margin-inline:auto;
  padding:0 3px;

  display:flex;
  align-items:stretch;
  justify-content:space-between;

  gap:
    clamp(4px,.45vw,10px);

  overflow:hidden;
}


/* Common quick-nav typography */

.rtx3-quick__item{
  position:relative;

  min-width:0;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:
    clamp(5px,.38vw,8px);

  color:#3b3f4c;

  font-size:
    clamp(10px,.62vw,12px);

  font-weight:500;
  line-height:1;

  white-space:nowrap !important;

  text-overflow:clip;

  transition:
    color .15s ease;
}


/* Individual directions */

.rtx3-quick__item{
  flex:1 1 auto;

  padding:
    0
    clamp(3px,.32vw,7px);

  overflow:hidden;
}


.rtx3-quick__item span{
  display:block;

  min-width:0;

  white-space:nowrap !important;

  word-break:normal !important;
  overflow-wrap:normal !important;
}


/* Icons */

.rtx3-quick__item svg{
  width:18px;
  height:18px;

  flex:0 0 18px;

  color:#343846;

  stroke-width:1.4;

  transition:
    color .15s ease,
    transform .15s ease;
}


/* Hover + active */

.rtx3-quick__item:hover,
.rtx3-quick__item.is-active{
  color:#6251f5;
}


.rtx3-quick__item.is-active{
  font-weight:560;
}


.rtx3-quick__item:hover svg,
.rtx3-quick__item.is-active svg{
  color:#6251f5;
}


.rtx3-quick__item:hover svg{
  transform:translateY(-1px);
}


/* Active underline */

.rtx3-quick__item.is-active::after{
  content:"";

  position:absolute;

  left:9%;
  right:9%;
  bottom:0;

  height:2px;

  border-radius:
    2px 2px 0 0;

  background:
    linear-gradient(
      90deg,
      #6654ff,
      #9852e7
    );
}


/* All directions */


/*
  When a dropdown opens the quick row keeps its physical space.
  Only its visibility changes, so content below does not jump.
*/

#retachHeaderV3.is-mega-open .rtx3-quick-wrap{
  visibility:visible;
}


/* ============================================================
   MEGA
   ============================================================ */

.rtx3-mega-wrap{
position:absolute;

  top:
    calc(
      var(--rtx3-top-h) +
      var(--rtx3-main-h)
    );

  left:0;
  right:0;

  z-index:40;

  height:1px;

  padding:4px 14px 0;

  overflow:visible;

  pointer-events:none;
}


.rtx3-mega-wrap[hidden]{
  display:none !important;
}


.rtx3-mega-grid{
position:relative;

  width:100%;
  height:1px;

  margin:0;
  padding:0;

  display:block;
}


/* ============================================================
   MEGA CARDS
   ============================================================ */

.rtx3-card{
position:absolute;

  top:0;
  left:50%;

  min-height:440px;

  padding:
    clamp(17px,1.3vw,25px);

  overflow:visible;

  border:
    1px solid rgba(87,83,160,.09);

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      #fff,
      #f8f9ff
    );

  box-shadow:
    0 16px 46px rgba(49,46,110,.13);

  transform:translateX(-50%);

  pointer-events:auto;
}


.rtx3-card::before{
  content:"";

  position:absolute;

  top:-9px;
  left:50%;

  width:18px;
  height:18px;

  border-radius:2px;

  background:#fff;

  border-left:
    1px solid rgba(87,83,160,.08);

  border-top:
    1px solid rgba(87,83,160,.08);

  transform:
    translateX(-50%)
    rotate(45deg);
}


.rtx3-card-head{
  min-height:61px;
}


.rtx3-card-head--inline{
  display:flex;
  align-items:flex-start;

  gap:18px;
}


.rtx3-card-head h2{
  margin:0;

  font-size:
    clamp(18px,1.25vw,24px);

  line-height:1;

  letter-spacing:-.035em;
}


.rtx3-card-head p{
  margin:8px 0 0;

  color:#66708c;

  font-size:
    clamp(9px,.66vw,12px);

  line-height:1.35;
}


.rtx3-card-head--inline p{
  margin:1px 0 0;
}


/* SERVICES */



/* INDIVIDUAL PANEL SIZES START */

.rtx3-card[hidden]{
  display:none !important;
}


/* УСЛУГИ — самая широкая карточка */

.rtx3-card[data-rtx3-panel="services"]{
  width:
    min(
      760px,
      calc(100vw - 28px)
    );
}


/* РЕШЕНИЯ */

.rtx3-card[data-rtx3-panel="solutions"]{
  width:
    min(
      340px,
      calc(100vw - 28px)
    );
}


/* ТЕХНОЛОГИИ */

.rtx3-card[data-rtx3-panel="tech"]{
  width:
    min(
      320px,
      calc(100vw - 28px)
    );
}


/* КЕЙСЫ */

.rtx3-card[data-rtx3-panel="cases"]{
  width:
    min(
      300px,
      calc(100vw - 28px)
    );
}


/* ЭКСПЕРТИЗА */

.rtx3-card[data-rtx3-panel="expertise"]{
  width:
    min(
      310px,
      calc(100vw - 28px)
    );
}


/* КОМПАНИЯ */

.rtx3-card[data-rtx3-panel="company"]{
  width:
    min(
      290px,
      calc(100vw - 28px)
    );
}


/* INDIVIDUAL PANEL SIZES END */

.rtx3-services-grid{
  display:grid;

  grid-template-columns:
    1.08fr
    .95fr
    1.05fr;

  min-height:245px;
}


.rtx3-service-col{
  min-width:0;

  padding:
    0
    clamp(10px,1.1vw,20px)
    0
    0;
}


.rtx3-service-col + .rtx3-service-col{
  padding-left:
    clamp(10px,1.1vw,20px);

  border-left:
    1px solid rgba(64,70,105,.11);
}


.rtx3-section-title{
  min-height:47px;

  display:flex;
  align-items:center;

  gap:10px;
}


.rtx3-section-title strong{
  font-size:
    clamp(10px,.77vw,14px);
}


.rtx3-menu-icon{
  width:39px;
  height:39px;

  flex:0 0 39px;

  display:grid;
  place-items:center;

  border-radius:12px;

  color:#624fff;

  background:
    linear-gradient(
      145deg,
      #f0edff,
      #f8f6ff
    );
}


.rtx3-menu-icon svg{
  width:22px;
  height:22px;
}


.rtx3-row-link{
  min-height:61px;

  padding:8px 2px;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:7px;

  border-radius:10px;
}


.rtx3-row-link:hover,
.rtx3-side-link:hover,
a.rtx3-simple-link:hover{
  background:
    rgba(104,84,255,.045);
}


.rtx3-row-link b,
.rtx3-side-link b,
.rtx3-simple-link b{
  display:block;

  font-size:
    clamp(9px,.68vw,13px);

  line-height:1.28;
}


.rtx3-row-link small,
.rtx3-side-link small{
  display:block;

  margin-top:4px;

  color:#68738f;

  font-size:
    clamp(8px,.59vw,11px);

  line-height:1.35;
}


.rtx3-row-link em,
.rtx3-side-link em,
.rtx3-simple-link em{
  color:#48506b;

  font-size:18px;
  font-style:normal;
}


/* SERVICE BOTTOM CTA */

.rtx3-services-bottom{
  min-height:70px;

  margin-top:14px;

  padding:10px 12px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  border-radius:13px;

  background:
    linear-gradient(
      105deg,
      #eef1ff,
      #f8f4ff
    );
}


.rtx3-services-bottom > div{
  display:flex;
  flex-direction:column;
}


.rtx3-services-bottom strong{
  font-size:
    clamp(11px,.83vw,15px);
}


.rtx3-services-bottom span{
  margin-top:3px;

  color:#67718c;

  font-size:
    clamp(8px,.59vw,11px);
}


#retachHeaderV3 .rtx3-services-bottom > .btn.btn-primary{
  flex:
    0 0
    clamp(160px,11vw,210px);

  min-height:47px;

  padding:0 17px;

  font-size:
    clamp(10px,.68vw,13px);
}


/* SIDE LINKS */

.rtx3-side-link{
  min-height:83px;

  padding:8px 0;

  display:grid;

  grid-template-columns:
    39px
    minmax(0,1fr)
    10px;

  gap:10px;

  align-items:center;

  border-radius:10px;
}


.rtx3-simple-link{
  min-height:58px;

  display:grid;

  grid-template-columns:
    39px
    minmax(0,1fr)
    auto;

  gap:10px;

  align-items:center;

  border-radius:10px;
}


.rtx3-coming{
  opacity:.75;
}


.rtx3-coming em{
  padding:4px 5px;

  border-radius:999px;

  background:#f0eff7;

  color:#8b8d9d;

  font-size:7px;
  font-weight:800;

  text-transform:uppercase;
}


/* ============================================================
   CALLBACK MODAL
   ============================================================ */

.cb-modal[hidden]{
  display:none !important;
}


.cb-modal{
  position:fixed;
  inset:0;

  z-index:9999;
}


.cb-backdrop{
  position:absolute;
  inset:0;

  background:
    rgba(0,0,0,.35);
}


.cb-dialog{
  position:relative;

  width:min(560px,92vw);

  margin:6vh auto;

  padding:20px 20px 16px;

  border-radius:16px;

  background:#fff;

  box-shadow:
    0 20px 60px rgba(0,0,0,.2);
}


.cb-x{
  position:absolute;

  top:8px;
  right:10px;

  border:0;

  background:transparent;

  font-size:24px;

  cursor:pointer;
}


.cb-row{
  margin:10px 0;
}


.cb-row input[type="tel"]{
  width:100%;

  padding:10px 12px;

  border:1px solid #e6e7eb;
  border-radius:10px;
}


.cb-consent{
  margin:10px 0 8px;

  display:inline-flex;
  align-items:center;

  gap:10px;

  font-size:.95rem;
  line-height:1.35;
}


.cb-actions{
  margin-top:8px;

  display:flex;

  gap:8px;
}


.cb-submit{
  padding:10px 14px;

  border:0;
  border-radius:12px;

  color:#fff;

  background:#6556ff;

  cursor:pointer;
}


.cb-cancel{
  padding:10px 14px;

  border:0;
  border-radius:12px;

  background:#f3f4f6;

  cursor:pointer;
}


.cb-msg{
  min-height:1.2em;

  margin:8px 2px 0;
}


.cb-hp{
  position:absolute;

  left:-9999px;

  width:1px;
  height:1px;

  opacity:0;
}


/* ============================================================
   INLINE SEARCH — TOP ROW
   ============================================================ */

.rtx3-inline-search{
  position:relative;

  width:48px;
  height:26px;

  flex:0 0 auto;

  transition:
    width .28s cubic-bezier(.22,.61,.36,1);
}


#retachHeaderV3.is-search-open .rtx3-inline-search{
  width:
    clamp(220px,18vw,330px);
}


/* Hide marketing phrase while search uses this space */

#retachHeaderV3.is-search-open .rtx3-top__slogan,
#retachHeaderV3.is-search-open .rtx3-top__slogan-separator{
  display:none;
}


/* CLOSED STATE */

#retachHeaderV3 .rtx3-inline-search__trigger{
  all:unset;

  box-sizing:border-box;

  position:absolute;
  inset:0;

  display:inline-flex;
  align-items:center;
  justify-content:flex-start;

  gap:6px;

  color:#72788d;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;

  font-size:10px;
  font-weight:550;
  line-height:1;

  white-space:nowrap;

  cursor:pointer;

  opacity:1;

  transition:
    opacity .12s ease,
    color .16s ease;
}


#retachHeaderV3 .rtx3-inline-search__trigger:hover{
  color:#252936;
}


#retachHeaderV3 .rtx3-inline-search__trigger svg{
  width:14px;
  height:14px;

  flex:0 0 14px;
}


#retachHeaderV3.is-search-open .rtx3-inline-search__trigger{
  opacity:0;
  pointer-events:none;
}


/* OPEN FIELD */

.rtx3-inline-search__field{
  position:absolute;

  top:50%;
  right:0;

  width:100%;
  height:28px;

  padding:
    0 7px
    0 10px;

  display:flex;
  align-items:center;

  gap:7px;

  border:
    1px solid rgba(104,86,255,.16);

  border-radius:999px;

  background:
    rgba(255,255,255,.96);

  box-shadow:
    0 5px 16px rgba(76,61,170,.07);

  opacity:0;

  transform:
    translateY(-50%)
    scaleX(.82);

  transform-origin:right center;

  pointer-events:none;

  transition:
    opacity .15s ease,
    transform .28s cubic-bezier(.22,.61,.36,1);
}


#retachHeaderV3.is-search-open .rtx3-inline-search__field{
  opacity:1;

  transform:
    translateY(-50%)
    scaleX(1);

  pointer-events:auto;
}


.rtx3-inline-search__field > svg{
  width:14px;
  height:14px;

  flex:0 0 14px;

  color:#7065d9;
}


.rtx3-inline-search__field input{
  all:unset;

  box-sizing:border-box;

  min-width:0;
  width:100%;

  color:#262a36;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;

  font-size:10px;
  font-weight:550;
  line-height:1;
}


.rtx3-inline-search__field input::placeholder{
  color:#969bad;
}


#retachHeaderV3 .rtx3-inline-search__close{
  all:unset;

  box-sizing:border-box;

  width:18px;
  height:18px;

  flex:0 0 18px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#8b90a0;

  font-family:Arial,sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1;

  cursor:pointer;
}


#retachHeaderV3 .rtx3-inline-search__close:hover{
  color:#252936;

  background:#f1efff;
}


/*
  Right side naturally grows to the left:
  links stay in the same flex row and are pushed left
  when .rtx3-inline-search expands.
*/

.rtx3-top__right{
  flex:0 1 auto;

  min-width:0;

  transition:
    gap .2s ease;
}


@media (max-width:1250px){

  #retachHeaderV3.is-search-open .rtx3-inline-search{
    width:230px;
  }

}




/* LIVE SEARCH RESULTS START */

.rtx3-inline-search{
  z-index:30;
}


.rtx3-search-results{
  position:absolute;

  top:calc(100% + 7px);
  right:0;

  width:
    min(
      420px,
      calc(100vw - 32px)
    );

  max-height:390px;

  padding:7px;

  overflow-y:auto;

  border:
    1px solid rgba(83,72,170,.10);

  border-radius:14px;

  background:
    rgba(255,255,255,.99);

  box-shadow:
    0 18px 50px rgba(45,39,103,.15);

  scrollbar-width:thin;
}


.rtx3-search-results[hidden]{
  display:none !important;
}


.rtx3-search-result{
  width:100%;

  min-height:54px;

  padding:8px 10px;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap:12px;

  align-items:center;

  border-radius:10px;

  color:#171a25;

  cursor:pointer;

  transition:
    background .14s ease;
}


.rtx3-search-result:hover,
.rtx3-search-result.is-selected{
  background:
    linear-gradient(
      100deg,
      #f2f1ff,
      #faf7ff
    );
}


.rtx3-search-result__main{
  min-width:0;
}


.rtx3-search-result__title{
  display:block;

  overflow:hidden;

  color:#171a25;

  font-size:11px;
  font-weight:700;
  line-height:1.25;

  white-space:nowrap;
  text-overflow:ellipsis;
}


.rtx3-search-result__url{
  display:block;

  margin-top:4px;

  overflow:hidden;

  color:#9297a8;

  font-size:8px;
  font-weight:500;
  line-height:1.1;

  white-space:nowrap;
  text-overflow:ellipsis;
}


.rtx3-search-result__category{
  padding:4px 6px;

  border-radius:999px;

  color:#6858df;

  background:#f0eeff;

  font-size:7px;
  font-weight:800;
  line-height:1;

  text-transform:uppercase;

  white-space:nowrap;
}


.rtx3-search-empty{
  padding:18px 12px;

  color:#858b9e;

  font-size:10px;
  line-height:1.4;

  text-align:center;
}


/* While results are visible, keep enough room for the search. */

#retachHeaderV3.is-search-open .rtx3-inline-search{
  width:
    clamp(250px,20vw,360px);
}


/* LIVE SEARCH RESULTS END */


/* ============================================================
   MOBILE
   ============================================================ *//* ============================================================
   MOBILE
   ============================================================ */

.rtx3-burger{
  display:none;
}


.rtx3-mobile{
  position:fixed;
  inset:0;

  z-index:9500;
}


.rtx3-mobile[hidden]{
  display:none !important;
}


.rtx3-mobile__backdrop{
  position:absolute;
  inset:0;

  background:
    rgba(20,20,30,.30);
}


.rtx3-mobile__panel{
  position:absolute;

  top:0;
  right:0;

  width:min(90vw,420px);
  height:100%;

  padding:18px;

  display:flex;
  flex-direction:column;

  overflow:auto;

  background:#fff;
}


.rtx3-mobile__head{
  min-height:54px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-bottom:
    1px solid rgba(30,33,48,.08);
}


.rtx3-mobile__nav{
  display:grid;

  margin-top:12px;
}


.rtx3-mobile__nav > a,
.rtx3-mobile__nav summary{
  min-height:52px;

  display:flex;
  align-items:center;

  border-bottom:
    1px solid rgba(30,33,48,.08);

  font-weight:700;
}


.rtx3-mobile__nav summary{
  list-style:none;

  justify-content:space-between;

  cursor:pointer;
}


.rtx3-mobile__nav details > div{
  padding:7px 0;

  display:grid;
}


.rtx3-mobile__nav details a{
  padding:10px;

  border-radius:9px;

  color:#656b7b;

  font-size:12px;
}


/* ============================================================
   RESPONSIVE
   ===============

@media (max-width:1250px){

  .rtx3-top__slogan{
    display:none;
  }

  .rtx3-brand{
    min-width:150px;
  }

  .rtx3-brand__divider,
  .rtx3-brand__copy{
    display:none;
  }

  .rtx3-phone{
    min-width:auto;
  }

  .rtx3-phone small{
    display:none;
  }
}


@media (max-width:980px){

  :root{
    --rtx3-top-h:0px;
    --rtx3-main-h:70px;
    --rtx3-quick-h:47px;
  }

  .rtx3-top{
    display:none;
  }

  .rtx3-main-wrap{
    padding:5px 12px;
  }

  .rtx3-main{
    height:60px;

    padding:0 13px;

    border-radius:17px;
  }

  .rtx3-brand{
    min-width:auto;
  }

  .rtx3-brand__logo{
    height:50px;
  }

  .rtx3-brand__divider,
  .rtx3-brand__copy{
    display:none;
  }

  .rtx3-nav,
  .rtx3-phone{
    display:none;
  }

  #retachHeaderV3 .rtx3-main > .btn.btn-primary{
all:unset;

  box-sizing:border-box;

  position:relative;

  flex:0 0 auto;

  width:
    clamp(185px,12.2vw,215px);

  height:50px;

  padding:
    0 17px
    0 20px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:13px;

  overflow:hidden;

  border-radius:999px;

  color:#fff;

  background:
    linear-gradient(
      105deg,
      #675cff 0%,
      #7658f3 58%,
      #b746d5 100%
    );

  box-shadow:
    0 7px 17px rgba(97,77,214,.14);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;

  cursor:pointer;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

#retachHeaderV3 .rtx3-main-cta__text{
display:block;

  margin:0;
  padding:0;

  color:#fff;

  font-size:
    clamp(12px,.78vw,14px);

  font-weight:650;
  line-height:1;

  letter-spacing:-.005em;

  text-decoration:none !important;

  white-space:nowrap !important;

  word-break:normal !important;
}


#retachHeaderV3 .rtx3-main-cta__arrow{
width:18px;
  height:18px;

  flex:0 0 18px;

  margin:0;

  color:#fff;

  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;

  transition:
    transform .16s ease;
}


#retachHeaderV3 .rtx3-main > .btn.btn-primary:hover
.rtx3-main-cta__arrow{
  transform:translateX(3px);
}


/* HIERARCHICAL MEGA START */

.rtx3-mega-wrap{
  position:absolute;

  top:100%;
  left:0;
  right:0;

  width:100%;
  height:auto;

  margin:0;

  padding:
    8px
    18px
    22px;

  overflow:visible;

  background:transparent;

  opacity:0;
  visibility:hidden;

  pointer-events:none;

  transform:translateY(-5px);

  transition:
    opacity .15s ease,
    transform .15s ease,
    visibility .15s ease;

  z-index:1200;
}

#retachHeaderV3.is-mega-open .rtx3-mega-wrap{
  opacity:1;
  visibility:visible;

  pointer-events:auto;

  transform:translateY(0);
}

.rtx3-mega-shell{
  width:min(
    1480px,
    calc(100vw - 36px)
  );

  margin:0 auto;
}

.rtx3-hier-panel{
  position:relative;

  display:grid;

  grid-template-columns:
    minmax(255px,.82fr)
    minmax(320px,1.02fr)
    minmax(390px,1.24fr);

  width:100%;

  min-height:420px;

  overflow:hidde

  border:
    1px solid
    rgba(99,82,194,.10);

  border-radius:24px;

  background:
    rgba(255,255,255,.985);

  box-shadow:
    0 24px 70px
    rgba(43,37,91,.16),
    0 5px 18px
    rgba(72,59,151,.055);

  height:420px;

  max-height:420px;
}

.rtx3-hier-panel[hidden]{
  display:none !important;
}


/* COLUMN 1 */

.rtx3-hier-banner{

  position:relative;

  min-width:0;

  padding:25px 28px 225px;

  overflow:hidden;

  border-right:
    1px solid
    rgba(99,82,194,.09);

  background:
    radial-gradient(
      circle at 25% 100%,
      rgba(125,105,255,.17),
      transparent 38%
    ),
    linear-gradient(
      155deg,
      #fcfbff,
      #f6f4ff 58%,
      #efecff
    );

  display:block;

  flex-direction:column;

  justify-content:flex-start;
}

.rtx3-hier-banner-copy{

  position:relative;

  z-index:2;

  width:100%;
}

.rtx3-hier-kicker{
  display:block;

  margin-bottom:16px;

  color:#7867d8;

  font-size:11px;
  line-height:1;

  font-weight:700;

  letter-spacing:.12em;
}

.rtx3-hier-banner-title{
  color:#12152b;

  font-size:
    clamp(
      27px,
      2.05vw,
      36px
    );

  line-height:1.08;

  font-weight:730;

  letter-spacing:-.035em;
}

.rtx3-hier-banner p{
  max-width:285px;

  margin:15px 0 0;

  color:#6d7287;

  font-size:13px;

  line-height:1.48;
}
















/* REAL MEGA BANNER IMAGE START */


/*
  Copy always owns the upper part.
*/

.rtx3-hier-banner-copy{

  position:relative;

  z-index:2;

  flex:
    0
    0
    auto;

  width:100%;
}


/*
  Image owns the remaining bottom area.
  No overlap with heading/copy.
*/

.rtx3-hier-banner-image{

  position:absolute;

  flex:
    1
    1
    auto;

  min-height:220px;

  margin-top:4px;

  overflow:hidden;

  pointer-events:none;

  height:220px;

  left:28px;

  right:28px;

  bottom:0;

  width:calc(100% - 56px);

  margin:0;

  z-index:1;
}


/*
  Portrait source is intentionally slightly enlarged.
  Bottom part is cropped a little so the statue and
  crystals read larger inside the narrow first column.
*/

.rtx3-hier-banner-image img{

  position:absolute;

  left:4px;

  bottom:auto;

  display:block;

  width:auto;

  height:215px;

  max-width:none;

  object-fit:contain;

  object-position:left bottom;

  filter:
    drop-shadow(
      0
      12px
      18px
      rgba(78,62,158,.09)
    );

  max-height:none;

  top:0;
}


/*
  Cases + Company now follow exactly the same geometry.
*/

[data-rtx3-panel="cases"]
.rtx3-hier-banner-image,

[data-rtx3-panel="company"]
.rtx3-hier-banner-image{

  margin-top:4px;

  min-height:220px;

  height:220px;

  overflow:hidden;

  position:absolute;

  left:28px;

  right:28px;

  bottom:0;

  width:calc(100% - 56px);

  margin:0;

  pointer-events:none;

  z-index:1;
}


/* REAL MEGA BANNER IMAGE END */


/* COLUMN LABEL */

.abel{
  margin-bottom:16px;

  color:#999eb0;

  font-size:10px;
  line-height:1;

  font-weight:700;

  letter-spacing:.11em;

  text-transform:uppercase;
}


/* COLUMN 2 */

.rtx3-hier-level1{
  min-width:0;

  padding:21px 20px;

  border-right:
    1px solid
    rgba(99,82,194,.09);

  background:#fff;

  overflow:hidden;
}

.rtx3-hier-groups{
  display:flex;
  flex-direction:column;

  gap:6px;
}

.rtx3-hier-group{
  appearance:none;

  display:grid;

  grid-template-columns:
    43px
    minmax(0,1fr)
    20px;

  align-items:center;

  width:100%;

  min-height:60px;

  padding:8px 11px;

  border:
    1px solid
    transparent;

  border-radius:16px;

  background:transparent;

  text-align:left;

  cursor:pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.rtx3-hier-group:hover,
.rtx3-hier-group.is-active{
  border-color:
    rgba(110,83,238,.13);

  background:
    linear-gradient(
      135deg,
      #fbfaff,
      #f4f1ff
    );

  box-shadow:
    0 8px 21px
    rgba(81,63,174,.055);
}

.rtx3-hier-group.is-active{
  transform:translateX(2px);
}

.rtx3-hier-group-icon{
  display:grid;

  place-items:center;

  width:36px;

  height:36px;

  border-radius:12px;

  background
    linear-gradient(
      145deg,
      #f5f1ff,
      #ece7ff
    );

  color:#6c4fff;

  font-size:19px;
  line-height:1;

  font-weight:700;
}

.rtx3-hier-group-copy{
  display:flex;
  flex-direction:column;

  min-width:0;

  gap:4px;
}

.rtx3-hier-group-copy strong{
  color:#191b2f;

  font-size:14px;
  line-height:1.2;

  font-weight:690;
}

.rtx3-hier-group-copy small{
  display:block;

  overflow:hidden;

  color:#878c9f;

  font-size:11px;
  line-height:1.25;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.rtx3-hier-group-arrow{
  justify-self:end;

  color:#aaa5c2;

  font-size:17px;

  transition:
    color .15s ease,
    transform .15s ease;
}

.rtx3-hier-group:hover .rtx3
.rtx3-hier-group.is-active .rtx3-hier-group-arrow{
  color:#684cff;

  transform:translateX(2px);
}


/* COLUMN 3 */

.rtx3-hier-level2{
  min-width:0;

  padding:21px 23px;

  background:
    linear-gradient(
      145deg,
      #fff,
      #fdfcff
    );

  overflow:hidden;

  overflow-y:auto;

  overflow-x:hidden;

  overscroll-behavior:contain;

  scrollbar-width:thin;

  scrollbar-color:rgba(105,76,255,.25) transparent;
}

.rtx3-hier-children{
  animation:
    rtx3HierChildIn
    .15s ease;
}

.rtx3-hier-children[hidden]{
  display:none !important;
}

@keyframes rtx3HierChildIn{
  from{
    opacity:0;
    transform:translateX(5px);
  }

  to{
    opacity:1;
    transform:translateX(0);
  }
}

.rtx3-hier-children-head{
  display:flex;
  flex-direction:column;

  margin-bottom:12px;

  padding:1px 3px 12px;

  border-bottom:
    1px solid
    rgba(99,82,194,.09);
}

.rtx3-hier-children-head > span{
  margin-bottom:9px;

  color:#999eb0;

  font-size:10px;
  line-height:1;

  font-weight:700;

  letter-spacing:.11em;
}

.rtx3-hier-children-head > strong{
  color:#15182d;

  font-size:20px;
  line-height:1.15;

  font-weight:720;

  letter-spacing:-.02em;
}

.rtx3-hier-children-head > small{
  margin-top:5px;

  color:#878c9f;

  font-size:12px;
  line-height:1.35;
}

.rtx3-hier-links{
  display:flex;
  flex-direction:column;

  gap:6px;
}



.rtx3-hier-link:hover{
  border-color:
    rgba(105,76,255,.22);

  background:#faf8ff;

  box-shadow:
    0 9px 24px
    rgba(76,59,170,.065);

  transform:translateY(-1px);
}









.rtx3-hier-link:hover .rtx3-hier-link-arrow{
  transform:translateX(3px);

  display:flex;

  align-items:center;

  justify-content:center;

  flex:0 0 22px;

  width:22px;

  height:22px;

  margin-left:auto;

  align-self:center;

  white-space:nowrap;
}




/* THIRD COLUMN CARD GEOMETRY START */


/*
  Every link has exactly two columns:
  text + fixed arrow.
*/

.rtx3-hier-level2
.rtx3-hier-link{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    22px;

  grid-template-rows:auto;

  column-gap:12px;

  align-items:center;

  width:100%;
  min-width:0;

  min-height:54px;

  padding:
    9px
    12px;

  box-sizing:border-box;
}


/*
  Text always occupies ONLY the left column.
*/

.rtx3-hier-level2
.rtx3-hier-link-copy{
  grid-column:1;
  grid-row:1;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:flex-start;

  gap:3px;

  width:100%;
  min-width:0;

  margin:0;
  padding:0;
}


/*
  Title.
*/

.rtx3-hier-level2
.rtx3-hier-link-copy strong{
  display:block;

  width:100%;
  min-width:0;

  margin:0;
  padding:0;

  color:#191b2f;

  font-size:14px;
  line-height:1.20;

  font-weight:660;

  white-space:normal;

  word-break:normal;
  overflow-wrap:normal;
}


/*
  Description ALWAYS stays small and on a separate line.
*/

.rtx3-hier-level2
.rtx3-hier-link-copy small{
  display:block;

  width:100%;
  min-width:0;

  margin:0;
  padding:0;

  color:#878c9f;

  font-size:11px;
  line-height:1.30;

  font-weight:400;

  white-space:normal;

  word-break:normal;
  overflow-wrap:normal;
}


/*
  Arrow owns its own fixed column and can never
  fall underneath the text.
*/

.rtx3-hier-level2
.rtx3-hier-link-arrow{
  grid-column:2;
  grid-row:1;

  align-self:center;
  justify-self:center;

  display:flex;

  align-items:center;
  justify-content:center;

  width:22px;
  height:22px;

  min-width:22px;

  margin:0;
  padding:0;

  color:#684cff;

  font-size:18px;
  line-height:1;

  font-weight:400;

  white-space:nowrap;
}


/* THIRD COLUMN CARD GEOMETRY END */


/* MANY LINKS */

.rtx3-hier-links--compact{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:6px;
}

.rtx3-hier-links--compact



/* NARROW DESKTOP */

@media (max-width:1180px){

  .rtx3-hier-panel{
    grid-template-columns:
      minmax(220px,.70fr)
      minmax(285px,.96fr)
      minmax(330px,1.08fr);
  }

  .rtx3-hier-banner{

  padding:25px 28px 225px;
  }

  .rtx3-hier-banner-title{
    font-size:
      clamp(
        24px,
        2.2vw,
        31px
      );
  }

  .rtx3-hier-group{
    min-height:65px;
  }


  position:relative;

  display:block;

  overflow:hidden;
}


@media (max-width:980px){

  .rtx3-mega-wrap{
    display:none !important;
  }

}







/* LEVEL2 LOCAL SCROLL START */


/*
  Scroll exists only when content exceeds
  available height of the fixed 420px mega panel.
*/

.rtx3-hier-level2::-webkit-scrollbar{
  width:6px;
}


.rtx3-hier-level2::-webkit-scrollbar-track{
  background:transparent;
}


.rtx3-hier-level2::-webkit-scrollbar-thumb{
  border-radius:999px;

  background:
    rgba(105,76,255,.20);
}


.rtx3-hier-level2::-webkit-scrollbar-thumb:hover{
  background:
    rgba(105,76,255,.34);
}


/* LEVEL2 LOCAL SCROLL END */




/* RETACH V3 ICON SYSTEM START */


/* ----------------------------------------------------------
   SHARED SVG LANGUAGE
   ---------------------------------------------------------- */

#retachHeaderV3
.rtx3-ui-icon{
  display:block;

  flex:none;

  fill:none;

  stroke:currentColor;
  stroke-width:1.8;

  stroke-linecap:round;
  stroke-linejoin:round;

  vector-effect:non-scaling-stroke;
}


/* ----------------------------------------------------------
   QUICK ROW
   ---------------------------------------------------------- */

#retachHeaderV3
.rtx3-quick__item
.rtx3-ui-icon{
  width:18px;
  height:18px;

  color:#35394a;

  transition:
    color .15s ease,
    transform .15s ease;
}


#retachHeaderV3
.rtx3-quick__item:hover
.rtx3-ui-icon{
  color:#684cff;

  transform:translateY(-1px);
}


#retachHeaderV3
.rtx3-quick__item.is-active
.rtx3-ui-icon,

#retachHeaderV3
.rtx3-quick__item[aria-current="page"]
.rtx3-ui-icon{
  color:#684cff;
}


/* ----------------------------------------------------------
   MEGA — LEVEL 1 ICON CONTAINER
   ---------------------------------------------------------- */

#retachHeaderV3
.rtx3-hier-group-icon{
  display:grid;

  place-items:center;

  width:38px;
  height:38px;

  min-width:38px;

  border:
    1px solid
    rgba(105,76,255,.08);

  border-radius:12px;

  background:
    linear-gradient(
      145deg,
      #f7f4ff 0%,
      #efebff 100%
    );

  color:#674cff;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.88);

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}


#retachHeaderV3
.rtx3-hier-group-icon
.rtx3-ui-icon{
  width:20px;
  height:20px;
}


/* Hover */

#retachHeaderV3
.rtx3-hier-group:hover
.rtx3-hier-group-icon{
  border-color:
    rgba(105,76,255,.14);

  background:
    linear-gradient(
      145deg,
      #f4f0ff,
      #eae4ff
    );
}


/* Active */

#retachHeaderV3
.rtx3-hier-group.is-active
.rtx3-hier-group-icon{
  border-color:
    rgba(105,76,255,.19);

  background:
    linear-gradient(
      145deg,
      #eee9ff 0%,
      #e5ddff 100%
    

  color:#5f43ff;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.92),
    0 5px 14px
    rgba(91,67,210,.10);

  transform:translateY(-1px);
}


/* ----------------------------------------------------------
   NO ICONS IN LEVEL 2
   ---------------------------------------------------------- */

#retachHeaderV3
.rtx3-hier-level2
.rtx3-hier-link-copy{
  padding-left:0;
}


/* RETACH V3 ICON SYSTEM END */


/* HIERARCHICAL MEGA END */