/* ------------------------------------------------------------------
   Techloyce 2026 - shared helpers for every Elementor-built page
   (home: elementor/home/, inner pages: elementor/<page>/).

   Colours, fonts, spacing and layout live in the Elementor widget and
   container settings. This file only covers what the free Elementor panel
   cannot do: gradient text, hover lifts, decorative glows, the tab/FAQ
   pill styling and the mockup wrappers. Hook in through the
   "CSS Classes" field (Advanced tab) using the tl-* names below.
   ------------------------------------------------------------------ */

/* Theme stylesheet colours bare p/h tags; let the Elementor settings win. */
.tl-sec .elementor-heading-title{text-transform:none;text-shadow:none}
.tl-sec .elementor-widget-text-editor p{color:inherit;font:inherit;margin:0 0 .8em}
.tl-sec .elementor-widget-text-editor p:last-child{margin-bottom:0}

/* Gradient text: wrap words in <span class="tl-grad"> inside a Heading. */
.tl-grad{background:var(--g-text);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}

/* ---------- Section backgrounds: grid mesh + glows ---------- */
.tl-mesh.tl-mesh{position:relative;overflow:hidden}
.tl-mesh.tl-mesh::before{
  content:"";display:block;position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:1;mix-blend-mode:normal;border-radius:0;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 35%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 35%,#000 30%,transparent 78%);
}
.tl-mesh.tl-mesh::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.tl-glow-hero.tl-mesh::after{background:
  radial-gradient(circle 420px at 90% 0%,rgba(240,35,76,.22),transparent 70%),
  radial-gradient(circle 360px at 4% 100%,rgba(255,184,28,.13),transparent 70%),
  radial-gradient(circle 320px at 48% 62%,rgba(120,80,255,.14),transparent 70%)}
.tl-glow-ai.tl-mesh::after{background:
  radial-gradient(circle 420px at 0% 18%,rgba(240,35,76,.22),transparent 70%),
  radial-gradient(circle 360px at 100% 100%,rgba(255,184,28,.13),transparent 70%)}
.tl-glow-int.tl-mesh::after{background:
  radial-gradient(circle 360px at 100% 30%,rgba(255,184,28,.13),transparent 70%)}
.tl-mesh > .e-con-inner,.tl-mesh > .e-con{position:relative;z-index:1}

/* ---------- Cards ---------- */
.tl-lift{transition:transform .3s,box-shadow .3s,border-color .3s,background-color .3s}
.tl-lift:hover{transform:translateY(-5px)}
.tl-sec .tl-glass:hover{background-color:rgba(255,255,255,.075)!important;border-color:rgba(240,35,76,.32)!important}
.tl-sec[class] .tl-lift:not(.tl-glass):not(.tl-bx-dark):hover{box-shadow:0 26px 56px -26px rgba(15,19,34,.28)}

/* Elementor's ".e-con{overflow:var(--overflow)}" (visible) loads later and would
   let the line run past the card's rounded corners, so set its variable too and
   double the class to outrank it. */
.tl-topline.tl-topline,.tl-bottomline.tl-bottomline{--overflow:hidden;position:relative;overflow:hidden}
.tl-topline::after,.tl-bottomline::after{
  content:"";position:absolute;left:0;right:0;background:var(--g-fire);
  transform:scaleX(0);transform-origin:left;transition:transform .4s;z-index:2}
.tl-topline::after{top:0;height:2px}
.tl-bottomline::after{bottom:0;height:3px}
.tl-topline:hover::after,.tl-bottomline:hover::after{transform:scaleX(1)}

.tl-bx-dark{position:relative}
.tl-bx-dark::after{
  content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-110px;top:-110px;
  background:radial-gradient(circle,rgba(240,35,76,.35),transparent 65%);filter:blur(42px);
  pointer-events:none;z-index:0}
.tl-bx-dark > .elementor-element{position:relative;z-index:1}

.tl-plat-visual{position:relative}
.tl-plat-visual::after{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;left:50%;top:50%;
  transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(240,35,76,.28),transparent 66%);
  filter:blur(48px);pointer-events:none;z-index:0}
.tl-plat-visual > .elementor-element{position:relative;z-index:1;width:100%}

.tl-cta{position:relative}
.tl-cta::before{
  content:"";display:block;position:absolute;width:640px;height:640px;border-radius:50%;inset:auto;
  top:-260px;left:50%;transform:translateX(-50%);opacity:1;mix-blend-mode:normal;
  background:radial-gradient(circle,rgba(240,35,76,.4),transparent 62%);filter:blur(70px);
  pointer-events:none;z-index:0}
.tl-cta::after{
  content:"";position:absolute;width:420px;height:420px;border-radius:50%;bottom:-220px;right:-90px;
  background:radial-gradient(circle,rgba(255,184,28,.24),transparent 64%);filter:blur(60px);
  pointer-events:none;z-index:0}
.tl-cta > .elementor-element{position:relative;z-index:1}
.tl-cta-alt a{color:var(--crimson-soft)!important;font-weight:600}

/* ---------- Buttons ---------- */
.tl-btn .elementor-button{transition:transform .25s,box-shadow .25s,background .25s,color .25s}
.tl-btn .elementor-button:hover{transform:translateY(-2px)}
.tl-btn .elementor-button-icon{transition:transform .25s}
.tl-btn .elementor-button:hover .elementor-button-icon{transform:translateX(3px)}
.tl-btn-primary .elementor-button{box-shadow:0 10px 30px -8px rgba(240,35,76,.55)}
.tl-btn-primary .elementor-button:hover{box-shadow:0 16px 40px -8px rgba(240,35,76,.7)}
.tl-btn-glass .elementor-button{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

.tl-wrap-row.e-con{--flex-wrap:wrap;flex-wrap:wrap}
/* Inner containers default to 100% width, which pushed each hero stat onto its own line. */
.tl-wrap-row.e-con > .e-con{--width:auto;width:auto!important;flex:0 0 auto}

/* Section side gutters. Enforced here because the Elementor side padding on
   the top-level sections was being overridden, leaving mobile content flush
   against the screen edge. Matches the old .wrap (28px, 20px on phones). */
.tl-sec.e-con-boxed{--padding-left:28px;--padding-right:28px;padding-left:28px!important;padding-right:28px!important}
@media (max-width:767px){
  .tl-sec.e-con-boxed{--padding-left:20px;--padding-right:20px;padding-left:20px!important;padding-right:20px!important}
}

/* ---------- AI flow arrows ---------- */
.tl-arrow .elementor-icon > *{animation:tlNudge 2.2s ease-in-out infinite}
@keyframes tlNudge{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(7px);opacity:1}}
@media (max-width:1024px){.tl-arrow .elementor-icon{transform:rotate(90deg)}}

/* ---------- Integration chips (Icon List with class tl-chips) ---------- */
.tl-chips .elementor-icon-list-items{display:grid!important;grid-template-columns:1fr 1fr;gap:10px}
.tl-chips .elementor-icon-list-items .elementor-icon-list-item{
  margin:0!important;padding:12px 15px!important;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);transition:.22s}
.tl-chips .elementor-icon-list-item:hover{background:rgba(255,255,255,.08);border-color:rgba(240,35,76,.32)}
.tl-chips .elementor-icon-list-item::after{display:none!important}
@media (max-width:520px){.tl-chips .elementor-icon-list-items{grid-template-columns:1fr}}

/* ---------- Process steps ---------- */
.tl-step{cursor:pointer}
.tl-steps .tl-step:last-child{border-bottom-width:0!important}
.tl-num{flex:none!important;transition:.25s}
.tl-step-text{flex:1 1 0!important;min-width:0}
.tl-step:hover .tl-num,.tl-step.tl-on .tl-num{
  background-image:var(--g-brand)!important;box-shadow:0 10px 24px -10px rgba(240,35,76,.7)}
.tl-step:hover .tl-num .elementor-heading-title,
.tl-step.tl-on .tl-num .elementor-heading-title{color:#fff!important}
.tl-steps:hover .tl-step.tl-on:not(:hover) .tl-num{background-image:none!important;box-shadow:none}
.tl-steps:hover .tl-step.tl-on:not(:hover) .tl-num .elementor-heading-title{color:var(--slate)!important}

/* ---------- Platform tabs (Nested Tabs with class tl-tabs) ---------- */
.tl-tabs .e-n-tabs-heading{flex-wrap:wrap;justify-content:center;gap:8px}
.tl-tabs .e-n-tab-title{
  flex:0 0 auto!important;padding:11px 22px!important;border-radius:999px!important;
  background:#fff!important;border:1px solid var(--line)!important;color:var(--slate)!important;
  font-family:var(--f-display);font-weight:600;font-size:14.5px;line-height:1.2;transition:.22s}
.tl-tabs .e-n-tab-title-text{color:inherit!important;font:inherit!important}
.tl-tabs .e-n-tab-title:hover{border-color:var(--crimson)!important;color:var(--crimson)!important}
.tl-tabs .e-n-tab-title[aria-selected="true"]{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}
.tl-tabs .e-n-tabs-content > .e-con{border:0!important;padding:0!important;background:none!important}

/* ---------- FAQ (Accordion with class tl-faq) ---------- */
.tl-faq .elementor-accordion{border-top:1px solid var(--line)}
.tl-faq .elementor-accordion .elementor-accordion-item{border:0!important;border-bottom:1px solid var(--line)!important}
.tl-faq .elementor-tab-title{display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:20px;border:0!important;cursor:pointer}
.tl-faq .elementor-tab-title:hover .elementor-accordion-title{color:var(--crimson)!important}
.tl-faq .elementor-accordion-icon{
  flex:none;float:none!important;width:30px!important;height:30px;border-radius:50%;border:1px solid var(--line);
  display:flex!important;align-items:center;justify-content:center;font-size:11px;transition:.3s}
.tl-faq .elementor-tab-title.elementor-active .elementor-accordion-icon{background:var(--crimson);border-color:var(--crimson)}
.tl-faq .elementor-tab-content{border:0!important}

/* ---------- Mockup wrappers (HTML widgets) ----------
   The mockups reuse the tl-home.css component styles; this stops the
   page-level .tl-home rules from painting a background or clipping. */
.tl-home.tl-mock{background:transparent;overflow:visible;color:#fff;font-family:var(--f-body)}

/* Theme images in the integration hub. Loaded from here (paths relative to
   this file) so the template keeps working whatever the theme folder is named. */
.tl-mock .tl-core-logo{display:block;position:relative;width:44%;aspect-ratio:54/46;
  background:url(../image/tl-logo-mark.png) center/contain no-repeat;filter:brightness(0) invert(1)}
.tl-mock .tl-esign-ico{display:block;width:16px;height:16px;
  background:url(../image/ic-esign.svg) center/contain no-repeat}

/* ==================================================================
   Light inner pages (first used by elementor/zoho-consultants/).
   Reusable on any page converted from WPBakery.
   ================================================================== */

/* Inner-page sections carry "tl-sec tl-inner". The legacy style.min.css forces
   h1-h6 to Source Sans Pro with !important, which beats Elementor's font
   setting, so restore the display font here. Headings that should use Inter
   (eyebrows, labels) use the "div" HTML tag and are unaffected. The home
   page does not use tl-inner, so it is not touched. */
.tl-inner h1,.tl-inner h2,.tl-inner h3,.tl-inner h4,.tl-inner h5,.tl-inner h6{font-family:var(--f-display)!important}

/* Crimson highlight: wrap words in <span class="tl-hl"> inside a Heading. */
.tl-hl{color:var(--crimson)}
.tl-sec .elementor-heading-title a{color:inherit}

/* Eyebrow label (Heading widget); tl-eyebrow-dot adds a leading dot. */
.tl-eyebrow .elementor-heading-title{letter-spacing:.14em}
.tl-eyebrow-dot .elementor-heading-title::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--crimson);margin-right:8px;vertical-align:middle;transform:translateY(-1px)}

/* Soft crimson/amber glow for a light hero section. */
.tl-hero-light{background-image:
  radial-gradient(circle 520px at 88% 8%,rgba(240,35,76,.08),transparent 70%),
  radial-gradient(circle 420px at 0% 100%,rgba(255,184,28,.07),transparent 70%)}

/* Elementor's ".e-con:before" (background overlay) sets content, size, position,
   opacity and blend mode on every container, so container ::before rules below
   double the class to outrank it and restate each of those properties. */

/* Short crimson bar above a heading block (on the container). */
.tl-bar.tl-bar::before{content:"";display:block;position:static;width:72px;height:3px;top:auto;left:auto;
  opacity:1;mix-blend-mode:normal;border:0;border-radius:2px;background:var(--crimson);margin-bottom:22px}

/* Right-aligned intro text that goes back to left on phones. */
@media (max-width:767px){.tl-aside .elementor-widget-container,.tl-aside{text-align:left!important}}

/* ---------- Light cards (container) ---------- */
.tl-card{border:1px solid var(--line);transition:transform .3s,box-shadow .3s,border-color .3s}
.tl-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(15,19,34,.28);border-color:#D9DCE6}
.tl-stat{border-top:3px solid var(--crimson)!important}

/* Number badge (Heading widget): 01, 02 ... on a pink tile. */
.tl-num-badge .elementor-heading-title{display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 8px;border-radius:8px;background:#FDE8EC}

/* Whole-card link: container with HTML Tag "a" + Link, class tl-card-link.
   Title turns crimson and its <span class="tl-card-arrow">→</span> nudges on hover. */
a.tl-card-link,a.tl-card-link:hover,a.tl-card-link:focus{color:inherit;text-decoration:none}
.tl-card-link:hover .elementor-heading-title{color:var(--crimson)!important;transition:color .25s}
.tl-card-link .tl-card-arrow{color:var(--crimson);display:inline-block;transition:transform .25s}
.tl-card-link:hover .tl-card-arrow{transform:translateX(3px)}

/* ---------- Vertical timeline ----------
   Container tl-timeline holds one row container per step; each row starts
   with an Icon widget (far fa-circle) carrying tl-dot. The dot's fill
   matches the section background so the line runs behind it. */
.tl-timeline{position:relative}
.tl-timeline.tl-timeline::before{content:"";display:block;position:absolute;left:11.5px;top:16px;bottom:16px;
  width:1px;height:auto;opacity:1;mix-blend-mode:normal;border:0;border-radius:0;background:#D5D9E3;z-index:0}
.tl-timeline > .e-con,.tl-timeline > .e-con-inner > .e-con{position:relative;z-index:1}
.tl-dot .elementor-icon{background:#F5F6F9;border-radius:50%;line-height:0}

/* Rounded, shadowed video (Video widget). */
.tl-video .elementor-wrapper{border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(15,19,34,.35)}

/* ---------- Contact Form 7 (tl-cf7) ----------
   Shortcode widget with class tl-cf7 wrapping [contact-form-7 id="5716"].
   CF7 renders one <p><label>Label<br><input></label></p> per field; lay them
   out two per row, with the select, textarea, reCAPTCHA and button full width. */
.tl-cf7 .wpcf7-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;margin:0}
.tl-cf7 .wpcf7-form > *{grid-column:1/-1;margin:0}
.tl-cf7 .wpcf7-form > p:nth-of-type(-n+6){grid-column:auto}
.tl-cf7 .wpcf7-form > .hidden-fields-container{display:none}
.tl-cf7 .wpcf7-form p{margin:0;padding:0}
.tl-cf7 .wpcf7-form label{display:block;margin:0;font:600 13.5px/1.4 var(--f-body);color:var(--ink);letter-spacing:0;text-transform:none}
.tl-cf7 .wpcf7-form label br{display:none}
.tl-cf7 .wpcf7-form-control-wrap{display:block;margin-top:7px}
.tl-cf7 .wpcf7-form input:not([type=submit]):not([type=hidden]),
.tl-cf7 .wpcf7-form select,
.tl-cf7 .wpcf7-form textarea{
  display:block;width:100%;max-width:100%;height:auto;margin:0;padding:12px 14px;
  font:400 15px/1.5 var(--f-body);color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:none;outline:0;
  transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.tl-cf7 .wpcf7-form textarea{min-height:140px;height:140px;resize:vertical}
.tl-cf7 .wpcf7-form select{padding-right:40px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B6478' stroke-width='1.6'/%3E%3C/svg%3E") right 15px center/12px 8px no-repeat}
.tl-cf7 .wpcf7-form input:not([type=submit]):hover,
.tl-cf7 .wpcf7-form select:hover,
.tl-cf7 .wpcf7-form textarea:hover{border-color:#CDD1DC}
.tl-cf7 .wpcf7-form input:not([type=submit]):focus,
.tl-cf7 .wpcf7-form select:focus,
.tl-cf7 .wpcf7-form textarea:focus{border-color:var(--crimson);box-shadow:0 0 0 4px rgba(240,35,76,.12)}
.tl-cf7 .wpcf7-form input.wpcf7-not-valid,
.tl-cf7 .wpcf7-form textarea.wpcf7-not-valid{border-color:var(--crimson)}
.tl-cf7 .wpcf7-not-valid-tip{font:500 12.5px/1.4 var(--f-body);color:var(--crimson);margin-top:6px}
.tl-cf7 .wpcf7-submit{
  display:inline-block;width:auto;margin:4px 0 0;padding:15px 34px;cursor:pointer;
  font:600 15px/1.2 var(--f-display);color:#fff;background:var(--crimson);
  border:1px solid var(--crimson);border-radius:8px;box-shadow:0 10px 30px -8px rgba(240,35,76,.55);
  transition:transform .25s,background .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.tl-cf7 .wpcf7-submit:hover{transform:translateY(-2px);background:#C21038;border-color:#C21038;box-shadow:0 16px 40px -8px rgba(240,35,76,.7)}
.tl-cf7 .wpcf7-spinner{vertical-align:middle;margin:0 0 0 12px}
.tl-cf7 .wpcf7-form .wpcf7-response-output{margin:0;padding:12px 16px;border-radius:10px;font:500 14px/1.5 var(--f-body)}
.tl-cf7 .wpcf7-form .wpcf7-response-output:empty{display:none}
@media (max-width:767px){
  .tl-cf7 .wpcf7-form{grid-template-columns:1fr}
  .tl-cf7 .wpcf7-form > p:nth-of-type(-n+6){grid-column:1/-1}
  .tl-cf7 .wpcf7-submit{width:100%}
  .tl-cf7 .recaptcha{transform:scale(.9);transform-origin:left top}
}

/* ---------- Office cards ----------
   Text Editor widgets with class tl-office inside a contact-page office card. */
.tl-office p{margin:0!important}
.tl-office{font-size:14.5px;line-height:1.65}
.tl-office + .tl-office:not(.tl-office-email){margin-top:10px;padding-top:12px;border-top:1px dashed var(--line)}
.tl-office-phone{margin-top:4px!important}
.tl-office a{color:var(--ink);font-weight:600;text-decoration:none;transition:color .2s}
.tl-office a:hover{color:var(--crimson)}
.tl-office-email{margin-top:auto;padding-top:14px}
.tl-office-email a{color:var(--crimson)}

/* Centered paragraph kept to a readable width (Text Editor with align center). */
.tl-center-560{max-width:560px;margin-left:auto!important;margin-right:auto!important}

/* ---------- Success badge (tl-check) ----------
   Icon widget (stacked, circle, fas fa-check) with class tl-check: pops in
   and sends out a soft crimson ring. Used on the Thank You page. */
.tl-check .elementor-icon{position:relative;box-shadow:0 18px 40px -12px rgba(240,35,76,.6);
  animation:tlCheckPop .6s cubic-bezier(.2,1.4,.4,1) both}
.tl-check .elementor-icon::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(240,35,76,.45);animation:tlCheckRing 2.4s ease-out .6s infinite;pointer-events:none}
@keyframes tlCheckPop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes tlCheckRing{0%{transform:scale(1);opacity:1}80%,100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.tl-check .elementor-icon,.tl-check .elementor-icon::after{animation:none}}

/* Centered paragraph at a wider reading width (About page CTA). */
.tl-center-720{max-width:720px;margin-left:auto!important;margin-right:auto!important}

/* "At a glance" facts card (About hero): hairline between the stacked facts. */
.tl-facts .tl-fact + .tl-fact{border-top:1px solid var(--line)}

/* ---------- Logos (Image widget with class tl-logo) ----------
   Partner and client logos come in all shapes; cap the height so they sit
   evenly. tl-logo-left aligns a logo to the card's left edge. */
.tl-logo img{display:block;width:auto!important;max-width:100%;max-height:44px;height:auto;object-fit:contain;margin:0 auto}
.tl-logo-left img{max-height:48px;max-width:180px;margin:0}
.tl-logo-lg img{max-height:72px;max-width:88%}
.tl-logo-tile{min-height:88px}

/* Client wall (Portfolio): logos rest in greyscale and colour up on hover. */
.tl-client .tl-logo img{filter:grayscale(1);opacity:.72;transition:filter .3s,opacity .3s}
.tl-client:hover .tl-logo img{filter:none;opacity:1}
.tl-client-you{justify-content:center;border-color:var(--ink)!important}
.tl-client-you-link a{color:#C9CEDB!important;text-decoration:none}
.tl-client-you:hover .tl-client-you-link a{color:#fff!important}
@media (max-width:767px){.tl-logo-lg img{max-height:56px}}

/* Inline hero figures (Portfolio): hairline between neighbouring stats. */
.tl-stat-inline + .tl-stat-inline{border-left:1px solid var(--line);padding-left:28px!important}

/* Group label above a card grid (Partners): label with a hairline running to the right. */
.tl-group-label .elementor-heading-title{display:flex;align-items:center;gap:14px}
.tl-group-label .elementor-heading-title::after{content:"";flex:1;height:1px;background:var(--line)}

/* ==================================================================
   Prominent CTA (all converted pages).
   tl-cta-bold  on the CTA section: dark background, crimson/amber glows,
                faint grid. Text colours come from the widget settings.
   tl-btn-attn  on the secondary button: pulsing ring, a light sweep and
                the arrow icon in crimson. Motion stops on hover and for
                visitors who prefer reduced motion.
   ================================================================== */
.tl-cta-bold.tl-cta-bold{--overflow:hidden;position:relative;overflow:hidden;background-color:#0B0E17;
  background-image:radial-gradient(circle 560px at 50% -12%,rgba(240,35,76,.38),transparent 66%),
                   radial-gradient(circle 400px at 100% 115%,rgba(255,184,28,.20),transparent 66%),
                   radial-gradient(circle 360px at 0% 100%,rgba(120,80,255,.16),transparent 66%)}
.tl-cta-bold.tl-cta-bold::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;
  opacity:1;mix-blend-mode:normal;border:0;border-radius:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 25%,transparent 78%)}
.tl-cta-bold > .e-con-inner,.tl-cta-bold > .e-con{position:relative;z-index:1}
.tl-cta-bold .tl-eyebrow-dot .elementor-heading-title::before{box-shadow:0 0 0 4px rgba(240,35,76,.2)}
/* Long titles and text wrap onto several centred lines instead of one wide line. */
.tl-cta-bold .elementor-widget-heading:not(.tl-eyebrow-dot){max-width:820px!important;margin-left:auto!important;margin-right:auto!important}
.tl-cta-bold .elementor-widget-text-editor{max-width:640px!important;margin-left:auto!important;margin-right:auto!important}

.tl-btn-attn .elementor-button-wrapper{position:relative;display:inline-block;border-radius:10px}
.tl-btn-attn .elementor-button-wrapper::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(240,35,76,.55);
  pointer-events:none;z-index:0;animation:tlAttnPulse 2.6s ease-out infinite}
.tl-btn-attn .elementor-button{position:relative;z-index:1;overflow:hidden}
.tl-btn-attn .elementor-button::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;will-change:transform;
  background:linear-gradient(100deg,transparent,rgba(240,35,76,.22),transparent);
  transform:translateX(-156%) skewX(-20deg);animation:tlAttnShine 3.4s ease-in-out infinite}
.tl-btn-attn .elementor-button-wrapper:hover::before{animation-play-state:paused}
.tl-btn-attn .elementor-button:hover::after{animation-play-state:paused}
.tl-btn-attn .elementor-button-icon{color:var(--crimson)}
@keyframes tlAttnPulse{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.14,1.6);opacity:0}}
@keyframes tlAttnShine{0%,55%{transform:translateX(-156%) skewX(-20deg)}100%{transform:translateX(290%) skewX(-20deg)}}
@media (prefers-reduced-motion:reduce){.tl-btn-attn .elementor-button-wrapper::before,.tl-btn-attn .elementor-button::after{animation:none}}

/* ------------------------------------------------------------------
   Rendering performance: sections below the first two are not laid out
   or painted until they come near the viewport (their animations cost
   nothing until then). contain-intrinsic-size keeps the scrollbar stable
   and remembers each section's real height once seen.
   ------------------------------------------------------------------ */
.elementor > .e-con.tl-sec ~ .e-con.tl-sec ~ .e-con.tl-sec{content-visibility:auto;contain-intrinsic-size:auto 900px}