/* ==========================================================================
   TXSC - Mobile and tablet layer
   Every rule below is scoped to 1024px and under. The desktop site is not
   touched by this file. Tokens come from txsc-premium.css.
   Remove this file and wp-content/mu-plugins/txsc-mobile.php to revert.
   ========================================================================== */

/* Chrome elements that only ever exist on small screens stay out of the way
   until a breakpoint switches them on. */
.txm-bar,
.txm-prog,
.txm-drawer-foot{ display:none; }


/* ==========================================================================
   1. SHARED - phones and tablets (<= 1024px)
   ========================================================================== */
@media (max-width:1024px){

  :root{
    --txm-ease:cubic-bezier(.16,1,.3,1);
    --txm-dur:.8s;
    --txm-hair:rgba(147,166,194,.14);
  }

  html{ scroll-behavior:smooth; }
  body{ -webkit-tap-highlight-color:transparent; }
  [id]{ scroll-margin-top:100px; }

  /* ---------- 1.1 Scroll reveal ------------------------------------------
     The hidden state only exists while the script is alive (html.txm-motion),
     so a JS failure can never leave the page blank. */
  html.txm-motion .tx-rv{
    opacity:0;
    transform:translate3d(0,32px,0);
    transition:opacity var(--txm-dur) var(--txm-ease),
               transform var(--txm-dur) var(--txm-ease);
    transition-delay:var(--d,0ms);
    will-change:transform,opacity;
  }
  html.txm-motion .tx-rv-l{ transform:translate3d(-30px,10px,0); }
  html.txm-motion .tx-rv-r{ transform:translate3d(30px,10px,0); }
  html.txm-motion .tx-rv-z{ transform:translate3d(0,22px,0) scale(.955); }
  html.txm-motion .tx-rv.is-in{ opacity:1; transform:none; will-change:auto; }

  /* ---------- 1.2 Parallax on the dark bands ------------------------------
     Only the decorative bloom layer moves, and only by transform. */
  html.txm-motion .tx-hero::before,
  html.txm-motion .tx-services::before,
  html.txm-motion .tx-cta-final::before,
  html.txm-motion .tx-page-hero::before,
  html.txm-motion .tx-cta-mid-inner::before,
  html.txm-motion .tx-band-dark:not(.tx-page-hero):not(.tx-cta-final)::before{
    inset:-16% -8% !important;
    transform:translate3d(0,var(--txp,0px),0);
    will-change:transform;
  }

  /* ---------- 1.3 Scroll progress ----------------------------------------- */
  .txm-prog{
    display:block;
    position:fixed; top:0; left:0; right:0; height:2px; z-index:1002;
    pointer-events:none; background:rgba(147,166,194,.10);
    opacity:0; transition:opacity .3s linear;
  }
  .txm-prog.is-on{ opacity:1; }
  .txm-prog i{
    display:block; height:100%; width:100%;
    transform:scaleX(var(--p,0)); transform-origin:0 50%;
    background:linear-gradient(90deg,#0045D9,#1E63F7 62%,#7FA6FF);
    box-shadow:0 0 10px rgba(30,99,247,.65);
  }

  /* ---------- 1.4 Scans: run the sweep only while on screen ---------------
     Sixty looping scanlines on a phone is a battery bill. They idle until the
     card comes into view, which also makes the sweep read as an instrument
     switching on. */
  html.txm .txm-scanhost *,
  html.txm .txm-scanhost *::before,
  html.txm .txm-scanhost *::after,
  html.txm .txm-scanhost::before,
  html.txm .txm-scanhost::after{ animation-play-state:paused; }
  html.txm .txm-scanhost.txm-live *,
  html.txm .txm-scanhost.txm-live *::before,
  html.txm .txm-scanhost.txm-live *::after,
  html.txm .txm-scanhost.txm-live::before,
  html.txm .txm-scanhost.txm-live::after{ animation-play-state:running; }

  /* ---------- 1.5 Touch has no hover, so in-view stands in for it ---------- */
  html.txm .tx-service-card.is-in::before{ opacity:1; left:5%; right:5%; }
  html.txm .tx-sign-card.is-in::before{ transform:scaleX(1); }
  html.txm .tx-scan-card.is-in{ border-color:rgba(0,69,217,.26) !important; }

  /* a real press response, since nothing lights up under a finger */
  .tx-service-card:active,.tx-sign-card:active,.tx-why-item:active,
  .tx-scan-card:active,.txsc-warn-card:active,.tx-aside-card:active,
  .tx-pillar:active{
    transform:scale(.985) !important;
    transition-duration:.12s !important;
  }
  .tx-btn .elementor-button:active,.tx-aside-btn:active,.tx-city-chip:active,
  .txsc-actions a:active,.txm-bar a:active,.txnl-btn:active,
  #wpforms-247 button[type=submit]:active{
    transform:scale(.965) !important;
    transition-duration:.12s !important;
  }

  /* ---------- 1.6 Scan stat footers --------------------------------------
     Three mono columns inside a narrow card clip long readings and knock the
     values off a common baseline. In a narrow column they become a stacked
     readout: label left, measurement right, nothing wraps. */
  .tx-service-card [style*="repeat(3,1fr)"][style*="border-top"],
  .tx-scan-card    [style*="repeat(3,1fr)"][style*="border-top"],
  .tx-card-dark    [style*="repeat(3,1fr)"][style*="border-top"],
  .tx-scan         [style*="repeat(3,1fr)"][style*="border-top"],
  .tx-scan-media   [style*="repeat(3,1fr)"][style*="border-top"]{
    grid-template-columns:minmax(0,1fr) !important;
    gap:0 !important;
    margin-top:14px !important;
    padding-top:10px !important;
  }
  .tx-service-card [style*="repeat(3,1fr)"][style*="border-top"] > div,
  .tx-scan-card    [style*="repeat(3,1fr)"][style*="border-top"] > div,
  .tx-card-dark    [style*="repeat(3,1fr)"][style*="border-top"] > div,
  .tx-scan         [style*="repeat(3,1fr)"][style*="border-top"] > div,
  .tx-scan-media   [style*="repeat(3,1fr)"][style*="border-top"] > div{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:18px; padding:9px 0;
    border-top:1px solid rgba(147,166,194,.09);
  }
  .tx-service-card [style*="repeat(3,1fr)"][style*="border-top"] > div:first-child,
  .tx-scan-card    [style*="repeat(3,1fr)"][style*="border-top"] > div:first-child,
  .tx-card-dark    [style*="repeat(3,1fr)"][style*="border-top"] > div:first-child,
  .tx-scan         [style*="repeat(3,1fr)"][style*="border-top"] > div:first-child,
  .tx-scan-media   [style*="repeat(3,1fr)"][style*="border-top"] > div:first-child{
    border-top:0; padding-top:2px;
  }
  .tx-service-card [style*="repeat(3,1fr)"][style*="border-top"] > div > div:first-child,
  .tx-scan-card    [style*="repeat(3,1fr)"][style*="border-top"] > div > div:first-child,
  .tx-card-dark    [style*="repeat(3,1fr)"][style*="border-top"] > div > div:first-child,
  .tx-scan         [style*="repeat(3,1fr)"][style*="border-top"] > div > div:first-child,
  .tx-scan-media   [style*="repeat(3,1fr)"][style*="border-top"] > div > div:first-child{
    margin-bottom:0 !important; flex:0 1 auto;
  }
  .tx-service-card [style*="repeat(3,1fr)"][style*="border-top"] > div > div + div,
  .tx-scan-card    [style*="repeat(3,1fr)"][style*="border-top"] > div > div + div,
  .tx-card-dark    [style*="repeat(3,1fr)"][style*="border-top"] > div > div + div,
  .tx-scan         [style*="repeat(3,1fr)"][style*="border-top"] > div > div + div,
  .tx-scan-media   [style*="repeat(3,1fr)"][style*="border-top"] > div > div + div{
    font-size:15.5px !important; text-align:right; white-space:nowrap;
    flex:0 0 auto;
  }

  /* ---------- 1.6b The newsletter popup takes the floor -------------------
     The scrim is only 74% opaque, so the blue estimate button in the sticky
     bar still burned through it, leaving two competing calls to action on
     screen at once. The bar drops away while the popup is up and slides back
     when it closes. */
  html.txnl-open .txm-bar{
    transform:translate3d(0,140%,0) !important;
    opacity:0 !important;
  }
  html.txnl-open .txm-prog{ opacity:0 !important; }

  /* ---------- 1.7 Scan frames --------------------------------------------- */
  .tx-scan,.tx-scan-media{ position:relative; }
  .tx-scan svg,.tx-scan-media svg,.txsc-scanhost svg,.tsc-scan svg{
    max-width:100%; height:auto;
  }

  /* ---------- 1.8 Reclaim the gutters ------------------------------------
     Elementor gives every nested container a 32px default pad. Stacked two or
     three deep that was eating a fifth of a 390px screen, which is why the
     hero copy and the buttons were sitting in a 286px column. Zero the nested
     pads, then hand padding back only to the containers that are real
     surfaces. :where() keeps the reset at low specificity so the surfaces
     below, and the breakpoints after, win cleanly. */
  :where(.tx-sec,.tx-page-hero,.tx-inbody) .e-con-full{
    padding-inline:0 !important;
  }
  /* containers that only arrange other things do not need the vertical pad
     either, but anything that groups content keeps it so the rhythm holds */
  .tx-hero-copy,.tx-btn-row,.tx-head,.tx-service-grid,.tx-signs-grid,
  .tx-process-grid,.tx-why-inner,.tx-city-grid,.tx-scan-grid{
    padding-block:0 !important;
  }
  .tx-service-card{ padding:20px !important; }
  .tx-why-item,.tx-sign-card,.txsc-warn-card{ padding:24px !important; }
  .tx-scan-card{ padding:18px !important; }
  .tx-card:not(.tx-city-chip):not(.tx-scan-card){ padding:22px !important; }
  .tx-city-chip{ padding:10px 18px !important; }
  .tx-step{ padding:64px 0 0 !important; }   /* room for the number marker */

}


/* ==========================================================================
   2. TABLET (768px - 1024px)
   ========================================================================== */
@media (min-width:768px) and (max-width:1024px){

  /* ---------- 2.1 Header --------------------------------------------------
     The angled blocks were sized for a desktop bar. At tablet the red wedge
     was crowding its own two lines. */
  .elementor-636 .elementor-element-b4ac561{ min-height:92px; }
  .txsc-actions{ min-height:92px; }
  .txsc-cta{
    font-size:13.5px; line-height:1.16; letter-spacing:.2px;
    padding:0 20px 0 42px;
  }
  .txsc-phone{
    font-size:19px; gap:10px; padding:0 24px 0 40px;
  }
  .txsc-phone svg{ width:26px; height:26px; }

  /* ---------- 2.2 Rhythm --------------------------------------------------- */
  .tx-sec > .e-con{ padding-block:clamp(64px,8vw,96px) !important; }
  .tx-sec.tx-pillars > .e-con{ padding:clamp(26px,3.4vw,40px) !important; }

  /* ---------- 2.3 Hero ----------------------------------------------------- */
  .tx-hero > .e-con{ padding-bottom:clamp(120px,15vw,170px) !important; }
  .tx-hero-panel{ max-width:640px; margin-inline:auto; width:100%; }
  .tx-title-hero .elementor-heading-title{
    font-size:clamp(38px,5.6vw,48px) !important; line-height:1.08 !important;
  }
  .tx-page-hero .tx-title .elementor-heading-title{
    font-size:clamp(34px,5vw,44px) !important;
  }

  /* ---------- 2.4 Cards get a touch more room ------------------------------ */
  .tx-service-card{ padding:22px !important; }
  .tx-scan-card{ padding:18px !important; }

}


/* ==========================================================================
   3. STACKING - anything under 900px
   ========================================================================== */
@media (max-width:900px){

  /* ---------- 3.1 The page sidebar ---------------------------------------
     A two column aside left a hole whenever the card count was odd. One
     column reads as a deliberate block instead of a broken grid. */
  .tx-aside{
    display:flex !important;
    flex-direction:column;
    gap:16px;
  }
  .tx-aside-cta{ order:-1; }

  /* ---------- 3.2 Contact page -------------------------------------------
     The form and the details panel were sharing 834px, which left the fields
     too narrow to type in comfortably. */
  body.page-id-374 .tx-sec .e-con-inner > .e-con,
  body.page-id-374 .tx-sec > .e-con > .e-con{
    width:100% !important; max-width:none !important; flex:1 1 100% !important;
  }
  body.page-id-374 .tx-sec .e-con-inner{
    flex-wrap:wrap !important; gap:clamp(18px,3vw,28px) !important;
  }

}


/* ==========================================================================
   4. PHONE (<= 767px)
   ========================================================================== */
@media (max-width:767px){

  /* ---------- 4.1 Type scale ---------------------------------------------
     Black Ops One is wide and blocky. At the desktop clamp floor a section
     heading was running to six and seven lines. */
  .tx-title .elementor-heading-title{
    font-size:clamp(23px,6.4vw,31px) !important;
    line-height:1.13 !important;
    letter-spacing:.004em !important;
    text-wrap:balance;
  }
  .tx-title-hero .elementor-heading-title{
    font-size:clamp(29px,8.2vw,38px) !important;
    line-height:1.08 !important;
  }
  .tx-page-hero .tx-title .elementor-heading-title{
    font-size:clamp(27px,7.6vw,36px) !important;
    max-width:none;
  }
  .tx-cta-final .tx-title .elementor-heading-title,
  .tx-cta-mid .tx-title .elementor-heading-title{
    font-size:clamp(24px,6.8vw,33px) !important;
    max-width:none !important;
  }

  /* the mono eyebrow was breaking onto a second line with the rule stranded
     on the first */
  .tx-eyebrow .elementor-heading-title{
    font-size:10.5px !important;
    letter-spacing:.15em !important;
    line-height:1.5 !important;
    align-items:baseline;
  }
  .tx-eyebrow{ margin-bottom:12px !important; }

  .tx-lede,.tx-lede .elementor-widget-container{
    font-size:16px !important; line-height:1.66 !important;
  }

  /* ---------- 4.2 Hero ------------------------------------------------------
     The pillars card is meant to ride up into the black band, but at phone
     width the survey panel sits low enough that the card was cutting 32px off
     the bottom of it. More room under the panel, a shallower bite, and the
     overlap still reads without touching the readings. */
  .tx-sec.tx-hero > .e-con{
    padding-top:44px !important;
    padding-bottom:92px !important;
  }
  .tx-hero .tx-lede{ margin-bottom:26px !important; }
  .tx-hero-panel{ margin-top:4px; }
  .tx-pillars{ margin-top:-48px; }

  /* full bleed buttons, stacked, in a real tap size */
  .tx-btn-row{
    flex-direction:column !important;
    align-items:stretch !important;
    width:100%; gap:12px !important;
  }
  .tx-btn,
  .tx-btn .elementor-widget-container{ width:100% !important; }
  .tx-btn .elementor-button{
    width:100%; justify-content:center;
    padding:17px 24px !important;
    font-size:13px !important;
  }

  /* ---------- 4.3 Section rhythm ------------------------------------------- */
  .tx-sec > .e-con{
    padding-block:clamp(52px,12vw,72px) !important;
    padding-inline:20px !important;
  }
  .tx-services,.tx-cta-final,.tx-band-dark:not(.tx-page-hero){
    border-radius:30px !important;
  }
  .tx-cta-final{ border-radius:30px 30px 0 0 !important; }

  /* ---------- 4.4 Cards ----------------------------------------------------- */
  .tx-service-card{ padding:18px !important; border-radius:24px !important; }
  .tx-sign-card,.tx-why-item{ padding:22px !important; border-radius:22px !important; }
  .tx-card-title .elementor-heading-title{ font-size:17px !important; }

  /* centred body copy over four or five lines is hard to read on a phone */
  .tx-why-item,.tx-why-item .elementor-widget-container,
  .tx-why-item .tx-card-title .elementor-heading-title,
  .tx-why-item .tx-card-body,
  .tx-sign-card,.tx-sign-card .elementor-widget-container{
    text-align:left !important;
  }
  .tx-why-inner > .tx-why-item{ max-width:none !important; }

  /* ---------- 4.5 Process timeline ------------------------------------------
     Without the connecting rule the four steps read as four orphans. Give
     them a vertical spine instead. */
  .tx-process-grid{
    position:relative; row-gap:26px !important;
    padding-left:0 !important;
  }
  .tx-process-grid::before{
    display:block !important;
    content:""; position:absolute;
    left:19px; top:34px; bottom:34px; right:auto;
    width:2px; height:auto;
    background:linear-gradient(180deg,
      rgba(0,69,217,.08),rgba(0,69,217,.42) 12%,
      rgba(0,69,217,.42) 88%,rgba(0,69,217,.08));
  }
  .tx-step{ padding-top:0 !important; padding-left:60px !important; min-height:44px; }
  .tx-step::before{ top:0; left:0; }

  /* ---------- 4.6 FAQ -------------------------------------------------------- */
  .tx-faq summary{ padding:16px 18px !important; gap:12px; }
  .tx-faq .e-n-accordion-item{ border-radius:18px !important; margin-bottom:10px !important; }
  .tx-faq .e-n-accordion-item-title{ line-height:1.4; }

  /* ---------- 4.7 City chips -------------------------------------------------- */
  .tx-city-grid{ gap:8px !important; }
  .tx-city-chip{ padding:9px 16px !important; }
  .tx-city-chip .elementor-heading-title{ font-size:13px !important; }

  /* ---------- 4.8 Footer ------------------------------------------------------ */
  .site-primary-footer-wrap .site-footer-section{ margin-bottom:30px; }
  .txsc-foot .txsc-foot-logo{ height:60px; }
  .txsc-foot h4{ margin-bottom:12px; }
  .txsc-foot li{ margin-bottom:6px; }
  .txsc-foot a,.txsc-foot li a{
    display:inline-block; padding-block:4px;
  }
  .site-below-footer-wrap{ padding-bottom:78px; }

  /* ---------- 4.9 The sticky action bar --------------------------------------
     The red header wedge is tiny at this width, so the primary action also
     lives in a bar that arrives once the hero is behind you. */
  .txm-bar{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:998;
    gap:10px; align-items:stretch;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(5,6,11,.86);
    -webkit-backdrop-filter:saturate(160%) blur(16px);
    backdrop-filter:saturate(160%) blur(16px);
    border-top:1px solid rgba(147,166,194,.18);
    box-shadow:0 -20px 44px -26px rgba(0,0,0,.95);
    transform:translate3d(0,140%,0);
    opacity:0;
    transition:transform .52s var(--txm-ease), opacity .3s linear;
  }
  .txm-bar.is-on{ transform:none; opacity:1; }
  .txm-bar a{
    display:flex; align-items:center; justify-content:center; gap:9px;
    text-decoration:none; border-radius:999px;
    font-family:"Black Ops One",sans-serif; letter-spacing:.05em;
    transition:background-color .25s ease, border-color .25s ease, transform .18s ease;
  }
  .txm-bar-call{
    flex:0 0 auto; padding:14px 20px;
    color:#FFFFFF !important;
    border:1px solid rgba(147,166,194,.34);
    background:rgba(147,166,194,.06);
    font-size:13px;
  }
  .txm-bar-call svg{ width:19px; height:19px; flex:0 0 auto; }
  .txm-bar-call .txm-bar-call-t{ display:none; }
  .txm-bar-cta{
    flex:1 1 auto; padding:14px 18px;
    color:#FFFFFF !important;
    background:#0045D9;
    font-size:13px;
    box-shadow:0 10px 26px -10px rgba(0,69,217,.85), inset 0 1px 0 rgba(255,255,255,.18);
  }
  .txm-bar a:focus-visible{ outline:2px solid #7FA6FF; outline-offset:2px; }

  /* ---------- 4.10 Interior pages --------------------------------------------- */
  .tx-has-aside .elementor > .tx-inbody > .e-con{ padding-inline:20px !important; }
  .tx-has-aside .tx-aside{ padding-inline:20px; }
  .tx-aside-card{ padding:18px; border-radius:20px; }
  body.page-id-603 .elementor > .e-con:nth-child(n+2):nth-child(-n+7) > .e-con{
    padding:20px !important; border-radius:24px !important;
  }

  /* ---------- 4.11 Forms ------------------------------------------------------- */
  #wpforms-247 input[type=text],#wpforms-247 input[type=email],
  #wpforms-247 input[type=tel],#wpforms-247 select,#wpforms-247 textarea{
    font-size:16px !important;  /* stops iOS zooming the page on focus */
    padding:14px 15px !important;
    border-radius:10px !important;
  }
  #wpforms-247 button[type=submit]{ padding:18px 26px !important; border-radius:999px !important; }

}


/* ==========================================================================
   5. SMALL PHONE (<= 600px)
   ========================================================================== */
@media (max-width:600px){

  /* ---------- 5.1 Bring the estimate wedge back into the header -------------
     It was switched off entirely below 600px, which left the phone icon as the
     only action on the device most people arrive on. */
  .txsc-actions a.txsc-cta{ display:flex !important; }
  .elementor-636 .elementor-element-b4ac561{ min-height:78px; }
  .txsc-actions{ min-height:78px; }
  .txsc-cta{
    font-size:10.5px; line-height:1.14; letter-spacing:.2px;
    padding:0 11px 0 32px;
    clip-path:polygon(22px 0,100% 0,100% 100%,0 100%);
  }
  .txsc-phone{
    padding:0 16px 0 30px; gap:0;
    clip-path:polygon(22px 0,100% 0,100% 100%,0 100%);
    margin-left:-22px;
  }
  .txsc-phone svg{ width:25px; height:25px; }
  .elementor-636 .elementor-element-f598545 .xpro-site-logo img{ max-height:52px; }

  /* The hero survey readout is handled in 5b, which covers the whole range. */
}

/* ==========================================================================
   5b. THE HERO SURVEY READOUT (<= 1024px)
   At 1024 the hero is still two columns, so the panel is only ~350px wide and
   "Piers required" wrapped, knocking the three readings off a shared baseline.
   The stacked readout is correct at every small width, so it runs across the
   whole range rather than only on phones.
   ========================================================================== */
@media (max-width:1024px){
  .tx-hero-panel [style*="repeat(3,1fr)"][style*="border-top"],
  .tx-page-hero  [style*="repeat(3,1fr)"][style*="border-top"]{
    grid-template-columns:minmax(0,1fr) !important;
    gap:0 !important; margin-top:14px !important; padding-top:10px !important;
  }
  .tx-hero-panel [style*="repeat(3,1fr)"][style*="border-top"] > div,
  .tx-page-hero  [style*="repeat(3,1fr)"][style*="border-top"] > div{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:18px; padding:9px 0; border-top:1px solid rgba(147,166,194,.09);
  }
  .tx-hero-panel [style*="repeat(3,1fr)"][style*="border-top"] > div:first-child,
  .tx-page-hero  [style*="repeat(3,1fr)"][style*="border-top"] > div:first-child{
    border-top:0; padding-top:2px;
  }
  .tx-hero-panel [style*="repeat(3,1fr)"][style*="border-top"] > div > div:first-child,
  .tx-page-hero  [style*="repeat(3,1fr)"][style*="border-top"] > div > div:first-child{
    margin-bottom:0 !important;
  }
  .tx-hero-panel [style*="repeat(3,1fr)"][style*="border-top"] > div > div + div,
  .tx-page-hero  [style*="repeat(3,1fr)"][style*="border-top"] > div > div + div{
    font-size:16px !important; text-align:right; white-space:nowrap;
  }

  /* ---------- 5.3 Action bar shows the number once there is room ------------- */
  .txm-bar-call{ padding:14px 18px; }

}

@media (min-width:380px) and (max-width:767px){
  .txm-bar-call .txm-bar-call-t{ display:inline; }
}


/* ==========================================================================
   6. THE DRAWER  (<= 1024px, where the toggle exists)
   ========================================================================== */
@media (max-width:1024px){

  /* Items arrive in sequence. This is an animation, not a hidden default
     state: if the open class never lands, the menu simply appears, it can
     never be left blank. */
  @keyframes txmNavIn{
    from{ opacity:0; transform:translate3d(28px,0,0); }
    to  { opacity:1; transform:none; }
  }
  html.txm-motion.txm-nav-open .elementor-636
    .xpro-elementor-horizontal-navbar-nav > li{
    animation:txmNavIn .46s var(--txm-ease) both;
  }
  html.txm-motion.txm-nav-open .xpro-elementor-horizontal-navbar-nav > li:nth-child(1){ animation-delay:.06s; }
  html.txm-motion.txm-nav-open .xpro-elementor-horizontal-navbar-nav > li:nth-child(2){ animation-delay:.12s; }
  html.txm-motion.txm-nav-open .xpro-elementor-horizontal-navbar-nav > li:nth-child(3){ animation-delay:.18s; }
  html.txm-motion.txm-nav-open .xpro-elementor-horizontal-navbar-nav > li:nth-child(4){ animation-delay:.24s; }
  html.txm-motion.txm-nav-open .xpro-elementor-horizontal-navbar-nav > li:nth-child(5){ animation-delay:.30s; }
  html.txm-motion.txm-nav-open .xpro-elementor-horizontal-navbar-nav > li:nth-child(6){ animation-delay:.36s; }
  html.txm-motion.txm-nav-open .xpro-elementor-horizontal-navbar-nav > li:nth-child(n+7){ animation-delay:.42s; }
  html.txm-motion.txm-nav-open .txm-drawer-foot{
    animation:txmNavIn .5s var(--txm-ease) both; animation-delay:.46s;
  }

  /* the flat blue slabs pick up depth and a leading edge */
  .elementor-636 .elementor-element.elementor-element-3395b06
    .xpro-elementor-horizontal-navbar-nav > li > a{
    position:relative;
    background-image:linear-gradient(115deg,#0045D9 0%,#1E63F7 100%) !important;
    border:1px solid rgba(127,166,255,.28) !important;
    box-shadow:0 12px 26px -16px rgba(0,69,217,.95),
               inset 0 1px 0 rgba(255,255,255,.14) !important;
    overflow:hidden;
  }
  .elementor-636 .elementor-element.elementor-element-3395b06
    .xpro-elementor-horizontal-navbar-nav > li > a::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:#7FA6FF; opacity:.85;
  }
  .elementor-636 .elementor-element.elementor-element-3395b06
    .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a::before,
  .elementor-636 .elementor-element.elementor-element-3395b06
    .xpro-elementor-horizontal-navbar-nav > li.current-menu-ancestor > a::before{
    background:#FFFFFF;
  }

  /* the standing actions at the foot of the drawer */
  .txm-drawer-foot{
    display:block;
    margin:22px 16px 8px;
    padding-top:20px;
    border-top:1px solid rgba(147,166,194,.18);
  }
  .txm-drawer-cta{
    display:block; text-align:center; text-decoration:none;
    background:#C90000; color:#FFFFFF !important;
    font-family:"Black Ops One",sans-serif; font-size:13px; letter-spacing:.06em;
    padding:16px 18px; border-radius:999px;
    box-shadow:0 14px 30px -14px rgba(201,0,0,.85), inset 0 1px 0 rgba(255,255,255,.16);
    transition:transform .2s ease, background-color .2s ease;
  }
  .txm-drawer-cta:active{ transform:scale(.97); }
  .txm-drawer-tel{
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin-top:14px; text-decoration:none;
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:17px; font-weight:600; color:#FFFFFF !important;
  }
  .txm-drawer-tel svg{ width:18px; height:18px; }
  .txm-drawer-hours{
    margin:8px 0 0; text-align:center;
    font-family:"Public Sans",sans-serif; font-size:12px; color:#93A6C2;
  }

  /* the panel itself */
  .elementor-636 .xpro-elementor-horizontal-navbar-wrapper{
    background:linear-gradient(170deg,#0B0C12 0%,#040407 62%) !important;
  }

}


/* ==========================================================================
   7. REDUCED MOTION
   Everything above collapses to a still, finished page.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .tx-rv{ opacity:1 !important; transform:none !important; }
  .txm-prog{ display:none !important; }
  .txm-bar{ transition:none !important; }
  .txm-scanhost *,
  .txm-scanhost *::before,
  .txm-scanhost *::after{ animation:none !important; }
  .elementor-636 .xpro-elementor-horizontal-navbar-nav > li,
  .txm-drawer-foot{
    opacity:1 !important; transform:none !important;
    transition:none !important; animation:none !important;
  }
  html.txm-motion .tx-hero::before,
  html.txm-motion .tx-services::before,
  html.txm-motion .tx-cta-final::before,
  html.txm-motion .tx-page-hero::before,
  html.txm-motion .tx-cta-mid-inner::before{ transform:none !important; }
}

/* scan-label-legibility: instrument labels were 8 to 10px on phones */
@media (max-width:600px){
  [class*="scan-wrap"] [style*="font-size:8px"],
  [class*="scan-wrap"] [style*="font-size:8.5px"],
  [class*="scan-wrap"] [style*="font-size:9px"],
  [class*="scan-wrap"] [style*="font-size:9.5px"],
  [class*="scan-wrap"] [style*="font-size:10px"],
  .tsc-scan [style*="font-size:9px"],
  .tsc-diagram [style*="font-size:9px"]{
    font-size:10.5px !important;
    letter-spacing:.1em !important;
  }
}

/* touch targets: phone links were 18 to 26px tall */
@media (max-width:1024px){
  .txm-drawer-tel{ min-height:44px; display:flex; align-items:center; }
  .tx-copy a[href^="tel:"],
  .tx-sidebar a[href^="tel:"],
  .elementor-widget-text-editor a[href^="tel:"]{ display:inline-block; padding:5px 0; }
}