/* ==========================================================================
   TXSC — Premium layer
   Visual polish only. No content, colors, fonts or logo changes.
   Brand palette and Black Ops One headings are preserved exactly.
   Remove this file to revert everything it does.
   ========================================================================== */

:root{
  --tx-bg:#F4F7FB;  --tx-surface:#FFFFFF; --tx-ink:#0B0E14;  --tx-muted:#5A6B85;
  --tx-accent:#0045D9; --tx-accent-h:#1E63F7;
  --tx-deep:#040407; --tx-deep-2:#0B0C12; --tx-signal:#C90000;
  --tx-ink-deep:#C7D4E6; --tx-muted-deep:#93A6C2; --tx-border:#DCE4EF;
  --tx-hair-deep:rgba(147,166,194,.16);

  --r-sm:10px; --r-md:24px; --r-lg:40px; --r-xl:56px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(11,14,20,.04), 0 10px 28px -10px rgba(0,69,217,.14);
  --sh-2:0 2px 6px rgba(11,14,20,.05), 0 26px 56px -18px rgba(0,69,217,.26);
  --sh-3:0 4px 10px rgba(11,14,20,.06), 0 44px 90px -28px rgba(0,69,217,.34);
  --sh-deep:0 30px 80px -24px rgba(0,0,0,.80);

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.42s;
}

/* ---------- Ground -------------------------------------------------------- */
body.home{ background:var(--tx-bg); }
.tx-sec{ position:relative; }

/* Elementor wraps boxed containers in .e-con-inner which carries its own padding.
   We set spacing explicitly, so zero that second layer out inside our sections. */
.tx-sec .e-con-inner{ padding:0 !important; }

/* Consistent vertical rhythm on every section's boxed inner container */
.tx-sec > .e-con{
  width:100%; max-width:1280px; margin-inline:auto;
  padding-block:clamp(72px,8.5vw,128px) !important;
  padding-inline:clamp(20px,5vw,56px) !important;
}

/* ---------- Typography ---------------------------------------------------- */
.tx-eyebrow .elementor-heading-title{
  font-family:"IBM Plex Mono",ui-monospace,monospace !important;
  font-size:clamp(11px,1.05vw,13px) !important;
  font-weight:500 !important;
  letter-spacing:.22em !important;
  text-transform:uppercase;
  color:var(--tx-accent) !important;
  display:inline-block;
}
/* The short rule that used to sit in front of every eyebrow is gone. The label
   now starts flush with the headline under it, which lines the whole left edge
   of a section up on one axis. */
.tx-hero .tx-eyebrow .elementor-heading-title,
.tx-services .tx-eyebrow .elementor-heading-title{ color:var(--tx-accent-h) !important; }
.tx-eyebrow{ margin-bottom:clamp(14px,1.6vw,22px) !important; }

.tx-title .elementor-heading-title{
  font-size:clamp(28px,3.5vw,50px) !important;
  line-height:1.18 !important;
  letter-spacing:.005em !important;
  text-wrap:balance;
}
.tx-title-hero .elementor-heading-title{
  font-size:clamp(34px,5vw,66px) !important;
  line-height:1.1 !important;
}
.tx-title{ margin-bottom:clamp(16px,2vw,26px) !important; }

.tx-lede, .tx-lede .elementor-widget-container{
  font-size:clamp(16px,1.25vw,18.5px) !important;
  line-height:1.68 !important;
  max-width:62ch;
}
.tx-hero .tx-lede, .tx-cta-mid .tx-lede, .tx-cta-final .tx-lede{ color:var(--tx-ink-deep) !important; }
.tx-cta-mid .tx-lede, .tx-cta-final .tx-lede, .tx-area .tx-lede{ margin-inline:auto; }

/* ---------- Buttons ------------------------------------------------------- */
.tx-btn .elementor-button{
  border-radius:var(--r-pill) !important;
  padding:clamp(15px,1.5vw,19px) clamp(26px,2.8vw,38px) !important;
  letter-spacing:.06em !important;
  font-size:clamp(12.5px,1vw,14px) !important;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background-color var(--dur) var(--ease), border-color var(--dur) var(--ease) !important;
}
.tx-btn-primary .elementor-button{
  box-shadow:0 10px 24px -8px rgba(0,69,217,.55), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.tx-btn-primary .elementor-button:hover{
  background-color:var(--tx-accent-h) !important;
  transform:translateY(-3px);
  box-shadow:0 18px 40px -10px rgba(0,69,217,.70), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.tx-btn-ghost .elementor-button{
  border:1px solid rgba(147,166,194,.36) !important;
}
.tx-btn-ghost .elementor-button:hover{
  transform:translateY(-3px);
  border-color:var(--tx-accent-h) !important;
  background-color:rgba(0,69,217,.14) !important;
}
.tx-btn .elementor-button:focus-visible{ outline:2px solid var(--tx-accent-h); outline-offset:3px; }
.tx-btn-row{ gap:clamp(12px,1.4vw,18px) !important; flex-wrap:wrap; }

/* ---------- HERO ---------------------------------------------------------- */
.tx-hero{
  background:var(--tx-deep) !important;
  isolation:isolate; overflow:hidden;
}
/* depth: a soft accent bloom behind the panel + a faint engineering grid */
.tx-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 70% at 76% 34%, rgba(0,69,217,.34) 0%, rgba(0,69,217,0) 68%),
    radial-gradient(40% 55% at 12% 88%, rgba(0,69,217,.14) 0%, rgba(0,69,217,0) 70%);
}
.tx-hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background-image:
    radial-gradient(76% 66% at 50% 40%, rgba(4,4,7,0) 0%, rgba(4,4,7,1) 80%),
    linear-gradient(to right, rgba(147,166,194,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(147,166,194,.07) 1px, transparent 1px);
  background-size:100% 100%, 64px 64px, 64px 64px;
}
.tx-hero > .e-con{
  position:relative; z-index:1;
  padding-top:clamp(60px,6.2vw,100px) !important;
  /* room for the pillars card to overlap up into the black */
  padding-bottom:clamp(140px,13vw,210px) !important;
}
.tx-hero-copy{ gap:0 !important; }

/* the elevation survey panel — give it real elevation */
.tx-hero-panel{
  border-radius:var(--r-lg) !important;
  box-shadow:var(--sh-deep);
  transition:transform .7s var(--ease);
}
.tx-hero-panel:hover{ transform:translateY(-4px); }

/* ---------- The survey panel turn, home page only -------------------------
   Same mechanic as the logo: a long rest facing forward, one quick full turn,
   then rest again. The panel carries a plain branded back so a reading is
   never seen mirrored, which would undo the one thing this panel is here to
   prove. It rests about nine seconds in every twelve, so the numbers stay
   readable almost all of the time and the turn is what catches a passing eye.
   -------------------------------------------------------------------------- */
body.home .tx-hero-panel > .elementor-widget-html{
  position:relative;
  transform-style:preserve-3d;
  animation:txscSurveyTurn 12s cubic-bezier(.62,0,.32,1) infinite;
  will-change:transform;
}
body.home .tx-hero-panel:hover > .elementor-widget-html{ animation-play-state:paused; }
body.home .tx-hero-panel > .elementor-widget-html > *{ backface-visibility:hidden; }
body.home .tx-hero-panel > .elementor-widget-html::after{
  content:''; position:absolute; inset:0; z-index:1;
  pointer-events:none;
  border-radius:22px;
  border:1px solid rgba(147,166,194,.18);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95);
  transform:rotateY(180deg);
  backface-visibility:hidden;
  background:
    url(https://txsc.pro/wp-content/uploads/2026/09/txsc-logo-clean.png) center center / 46% auto no-repeat,
    radial-gradient(78% 64% at 50% 0%, rgba(0,69,217,.30) 0%, rgba(0,69,217,0) 68%),
    linear-gradient(165deg,#0C1524 0%,#0A101C 100%);
}
@keyframes txscSurveyTurn{
  0%, 42%   { transform:perspective(1500px) rotateY(0deg); }
  62%, 100% { transform:perspective(1500px) rotateY(360deg); }
}
@media (prefers-reduced-motion:reduce){
  body.home .tx-hero-panel > .elementor-widget-html{ animation:none; transform:none; }
  body.home .tx-hero-panel > .elementor-widget-html::after{ display:none; }
}

/* ---------- PILLARS — the overlapping panel ------------------------------- */
.tx-pillars{
  background:transparent !important;
  margin-top:clamp(-176px,-11.5vw,-100px);
  padding-bottom:clamp(56px,6vw,92px);
  z-index:4;
}
.tx-pillars-inner{
  background:var(--tx-surface) !important;
  border:1px solid var(--tx-border);
  border-radius:var(--r-lg) !important;
  box-shadow:var(--sh-3);
  padding:clamp(28px,3.4vw,52px) !important;
  gap:clamp(20px,2.4vw,36px) !important;
  align-items:stretch !important;
}
.tx-pillar{
  flex:1 1 0; min-width:0;
  padding:clamp(10px,1.4vw,20px) !important;
  position:relative;
}
.tx-pillar + .tx-pillar::before{
  content:""; position:absolute; left:calc(-1 * clamp(10px,1.2vw,18px)); top:14%; bottom:14%;
  width:1px; background:var(--tx-border);
}
.tx-pillar .elementor-heading-title{
  font-size:clamp(16px,1.35vw,19px) !important;
  line-height:1.3 !important;
  margin-bottom:.55em !important;
}
.tx-pillar .elementor-widget-text-editor{
  font-size:clamp(14px,1.05vw,15.5px) !important; line-height:1.62 !important; color:var(--tx-muted) !important;
}

/* ---------- MID CTA — dark inset panel on light --------------------------- */
.tx-cta-mid{ background:var(--tx-bg) !important; }
.tx-cta-mid > .e-con{ padding-block:clamp(12px,2vw,32px) !important; }
.tx-cta-mid-inner{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(145deg,#0C0E15 0%, var(--tx-deep) 58%) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--sh-deep);
  padding:clamp(44px,5.5vw,88px) clamp(24px,4vw,72px) !important;
}
.tx-cta-mid-inner::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(70% 120% at 88% 6%, rgba(0,69,217,.38) 0%, rgba(0,69,217,0) 64%);
}
.tx-cta-mid-inner::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  border:1px solid var(--tx-hair-deep);
}

/* ---------- SERVICES — rounded black band + premium scan cards ------------ */
.tx-services{
  background:var(--tx-deep) !important;
  border-radius:var(--r-xl) !important;
  overflow:hidden; isolation:isolate;
}
.tx-services::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 45% at 50% -6%, rgba(0,69,217,.26) 0%, rgba(0,69,217,0) 70%);
}
.tx-services > .e-con{ position:relative; z-index:1; }
.tx-service-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2vw,30px) !important;
  align-items:stretch;
}
.tx-service-card{
  position:relative; isolation:isolate;
  background:linear-gradient(180deg,#0E1118 0%, #08090E 100%) !important;
  border:1px solid rgba(147,166,194,.13);
  border-radius:28px !important;
  padding:clamp(20px,2vw,30px) !important;
  overflow:hidden;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* hairline + top accent rule */
.tx-service-card::before{
  content:""; position:absolute; top:0; left:12%; right:12%; height:1px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,69,217,0), rgba(0,69,217,.85), rgba(0,69,217,0));
  opacity:.7; transition:opacity var(--dur) var(--ease), left var(--dur) var(--ease), right var(--dur) var(--ease);
}
.tx-service-card:hover::before{ opacity:1; left:4%; right:4%; }
/* accent wash that blooms on hover */
.tx-service-card::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0;
  background:radial-gradient(85% 60% at 50% 0%, rgba(0,69,217,.30) 0%, rgba(0,69,217,0) 70%);
  transition:opacity var(--dur) var(--ease);
}
.tx-service-card:hover{
  transform:translateY(-7px);
  box-shadow:0 30px 60px -22px rgba(0,69,217,.55), 0 10px 22px -12px rgba(0,0,0,.7);
}
.tx-service-card:hover::after{ opacity:1; }

/* keep the scans legible and framed */
.tx-scan{ border-radius:20px !important; overflow:hidden; margin-bottom:clamp(16px,1.6vw,22px) !important; }
.tx-scan .tsc-diagram, .tx-scan svg{ display:block; width:100%; height:auto; }

.tx-card-title .elementor-heading-title{
  font-size:clamp(17px,1.5vw,21px) !important; line-height:1.28 !important; margin-bottom:.5em !important;
}
.tx-card-list, .tx-card-list .elementor-widget-container{
  font-size:clamp(13.5px,1.02vw,15px) !important; line-height:1.72 !important;
}
.tx-services .tx-card-list{ color:var(--tx-muted-deep) !important; }

/* ---------- WHY — flipped to light for rhythm ----------------------------- */
.tx-why{ background:var(--tx-bg) !important; }
.tx-why .tx-title .elementor-heading-title{ color:var(--tx-ink) !important; }
.tx-why-inner{ gap:clamp(16px,1.8vw,26px) !important; }
.tx-why-item{
  background:var(--tx-surface) !important;
  border:1px solid var(--tx-border);
  border-radius:var(--r-md) !important;
  padding:clamp(22px,2.4vw,34px) !important;
  box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tx-why-item:hover{
  transform:translateY(-5px);
  border-color:rgba(0,69,217,.30);
  box-shadow:var(--sh-2);
}
.tx-why-item .tx-card-title .elementor-heading-title{ color:var(--tx-ink) !important; }
.tx-why-item .tx-card-body, .tx-why-item .tx-card-body .elementor-widget-container{
  color:var(--tx-muted) !important; font-size:clamp(14px,1.05vw,15.5px) !important; line-height:1.66 !important;
}

/* ---------- PROCESS — connected timeline ---------------------------------- */
.tx-process{ background:var(--tx-surface) !important; }
.tx-process-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.2vw,34px) !important;
  position:relative;
  counter-reset:txstep;
}
/* the connecting rule */
.tx-process-grid::before{
  content:""; position:absolute; top:19px; left:6%; right:6%; height:2px;
  background:linear-gradient(90deg, rgba(0,69,217,.10), rgba(0,69,217,.42) 22%, rgba(0,69,217,.42) 78%, rgba(0,69,217,.10));
}
.tx-step{ counter-increment:txstep; position:relative; padding-top:64px !important; background:transparent !important; }
.tx-step::before{
  content:counter(txstep,decimal-leading-zero);
  position:absolute; top:0; left:0;
  width:40px; height:40px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  background:var(--tx-accent); color:#fff;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; font-weight:600; letter-spacing:.04em;
  box-shadow:0 0 0 6px var(--tx-surface), 0 8px 20px -8px rgba(0,69,217,.7);
  transition:transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tx-step:hover::before{ transform:scale(1.08); background:var(--tx-accent-h); }
.tx-step-title .elementor-heading-title{
  font-size:clamp(16px,1.35vw,19.5px) !important; line-height:1.3 !important; margin-bottom:.5em !important;
}
.tx-step-body, .tx-step-body .elementor-widget-container{
  font-size:clamp(14px,1.02vw,15.5px) !important; line-height:1.66 !important; color:var(--tx-muted) !important;
}

/* ---------- WARNING SIGNS ------------------------------------------------- */
.tx-signs{ background:var(--tx-bg) !important; }
.tx-signs-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2vw,28px) !important;
  align-items:stretch;
}
.tx-sign-card{
  background:var(--tx-surface) !important;
  border:1px solid var(--tx-border);
  border-radius:var(--r-md) !important;
  padding:clamp(24px,2.6vw,36px) !important;
  box-shadow:var(--sh-1);
  position:relative; overflow:hidden;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tx-sign-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--tx-accent),var(--tx-accent-h));
  transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--ease);
}
.tx-sign-card:hover{ transform:translateY(-6px); border-color:rgba(0,69,217,.28); box-shadow:var(--sh-2); }
.tx-sign-card:hover::before{ transform:scaleX(1); }
.tx-sign-card .tx-card-list{ color:var(--tx-muted) !important; }

/* ---------- ABOUT --------------------------------------------------------- */
.tx-about{ background:var(--tx-surface) !important; }
.tx-about-inner{ max-width:900px; margin-inline:auto; text-align:center; }
.tx-about .tx-lede{ margin-inline:auto; font-size:clamp(17px,1.4vw,20px) !important; }

/* ---------- FAQ ----------------------------------------------------------- */
.tx-faq{ background:var(--tx-bg) !important; }
.tx-faq-inner{ max-width:900px; margin-inline:auto; }
.tx-faq .e-n-accordion-item{
  background:var(--tx-surface) !important;
  border:1px solid var(--tx-border) !important;
  border-radius:var(--r-md) !important;
  margin-bottom:12px !important;
  overflow:hidden;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tx-faq .e-n-accordion-item:hover,
.tx-faq .e-n-accordion-item[open]{ border-color:rgba(0,69,217,.30) !important; box-shadow:var(--sh-1); }
.tx-faq summary{ padding:clamp(18px,1.8vw,24px) !important; }

/* ---------- FINAL CTA ----------------------------------------------------- */
.tx-cta-final{
  background:var(--tx-deep) !important;
  border-radius:var(--r-xl) var(--r-xl) 0 0 !important;
  overflow:hidden; isolation:isolate;
}
.tx-cta-final::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(64% 90% at 50% 0%, rgba(0,69,217,.34) 0%, rgba(0,69,217,0) 68%);
}
.tx-cta-final > .e-con{ position:relative; z-index:1; text-align:center; }
.tx-cta-final .tx-title .elementor-heading-title{ max-width:22ch; margin-inline:auto; }

/* ---------- SERVICE AREA -------------------------------------------------- */
.tx-area{ background:var(--tx-surface) !important; text-align:center; }
.tx-city-grid{
  display:flex !important; flex-wrap:wrap; justify-content:center;
  gap:10px !important; max-width:1000px; margin-inline:auto !important;
}
.tx-city-chip{
  width:auto !important; flex:0 0 auto !important;
  background:rgba(0,69,217,.055) !important;
  border:1px solid rgba(0,69,217,.14);
  border-radius:var(--r-pill) !important;
  padding:10px 20px !important;
  transition:transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.tx-city-chip:hover{
  transform:translateY(-2px);
  background:rgba(0,69,217,.11) !important;
  border-color:rgba(0,69,217,.32);
}
.tx-city-chip .elementor-heading-title{
  font-size:14px !important; font-family:"Public Sans",sans-serif !important; font-weight:600 !important;
  color:var(--tx-accent) !important; margin:0 !important; white-space:nowrap;
}

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width:1024px){
  .tx-service-grid, .tx-signs-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tx-process-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:40px !important; }
  .tx-process-grid::before{ display:none; }
  .tx-pillars{ margin-top:clamp(-120px,-9vw,-72px); }
}
@media (max-width:880px){
  .tx-pillars-inner{ flex-direction:column !important; }
  .tx-pillar + .tx-pillar::before{
    left:0; right:0; top:calc(-1 * clamp(10px,2vw,18px)); bottom:auto; width:auto; height:1px;
  }
}
@media (max-width:767px){
  .tx-sec > .e-con{ padding-block:clamp(56px,11vw,76px) !important; padding-inline:20px !important; }
  .tx-hero > .e-con{ padding-bottom:clamp(108px,26vw,150px) !important; }
  .tx-pillars{ margin-top:-84px; }
  .tx-service-grid, .tx-signs-grid, .tx-process-grid{ grid-template-columns:minmax(0,1fr); }
  .tx-services, .tx-cta-final{ border-radius:28px !important; }
  .tx-cta-final{ border-radius:28px 28px 0 0 !important; }
  .tx-cta-mid-inner{ border-radius:28px !important; }
  .tx-hero-panel{ border-radius:24px !important; }
  .tx-btn .elementor-button{ width:100%; justify-content:center; }
  .tx-btn-row{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ---------- Elementor reconciliation -------------------------------------- */
/* Elementor writes an explicit width onto containers that used to be flex
   children. Inside our CSS grids the track defines the width, so release it. */
.tx-service-grid > .e-con,
.tx-signs-grid > .e-con,
.tx-process-grid > .e-con,
.tx-why-inner > .tx-why-item{
  width:auto !important; max-width:none !important; flex:1 1 auto !important;
}
.tx-pillars-inner > .e-con-inner > .tx-pillar,
.tx-pillars-inner > .tx-pillar{ width:auto !important; max-width:none !important; }

/* The pillars card is itself the section's boxed container, so its padding has
   to out-specify the generic section rhythm rule above. */
.tx-sec.tx-pillars > .e-con{ padding:clamp(30px,3.4vw,54px) !important; }

/* Same clash for the two sections whose boxed container carries a panel. */
.tx-sec.tx-cta-mid > .e-con{
  padding:clamp(44px,5.5vw,88px) clamp(24px,4vw,72px) !important;
  margin-block:clamp(16px,2.6vw,44px);
}
/* ---------- Why Choose: wrap the five points into a balanced 3 + 2 ---------- */
.tx-why-inner{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  justify-content:center;
  align-items:stretch;
  gap:clamp(16px,1.8vw,26px) !important;
}
.tx-why-inner > .elementor-widget{ flex:0 0 100% !important; }
.tx-why-inner > .tx-why-item{ flex:1 1 300px !important; max-width:380px !important; }
.tx-why-item > .e-con{ padding:0 !important; width:100% !important; justify-content:flex-start !important; }

/* trim the trailing dead air on the text-only sections */
.tx-about > .e-con{ padding-bottom:clamp(64px,7vw,104px) !important; }
.tx-faq  > .e-con{ padding-bottom:clamp(64px,7vw,104px) !important; }
.tx-area > .e-con{ padding-bottom:clamp(64px,7vw,104px) !important; }
/* Boxed containers put their children inside an .e-con-inner wrapper, so the
   real flex parent is that wrapper, not the container we tagged. */
.tx-why-inner,
.tx-why-inner > .e-con-inner{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:stretch !important;
  gap:clamp(16px,1.8vw,26px) !important;
}
/* only the section's own eyebrow and title span the full row — NOT the headings
   inside each card, where flex-basis:100% would mean 100% of the card height. */
.tx-why-inner > .elementor-widget-heading,
.tx-why-inner > .e-con-inner > .elementor-widget-heading{ flex:0 0 100% !important; width:100% !important; }
.tx-why-item{
  width:auto !important;
  flex:1 1 300px !important;
  max-width:380px !important;
}

/* align the timeline rule with the centre of the step markers */
.tx-process-grid{ padding-top:0 !important; }
/* the steps carried their own top border, which now doubles the timeline rule */
.tx-step{ border-top:0 !important; }

/* body background token is scoped so other pages keep the theme's own ground */