.lmx-b2-inner{position:relative;width:100%;min-height:100vh;background:#000 !important;font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;padding:0 var(--lmx-section-padding-x);box-sizing:border-box;overflow:visible;--block2-scale:1;--lmx-btn-height:max(42px,calc(53px * var(--block2-scale,1)));--lmx-btn-padding-x:max(20px,calc(30px * var(--block2-scale,1)));--lmx-btn-font-size:max(11px,calc(13px * var(--block2-scale,1)));--lmx-h1-font-family:'Outfit','Poppins',sans-serif;--lmx-h1-size:max(32px,calc(75px * var(--block2-scale,1)))}
.lmx-btn{display:inline-flex;align-items:center;height:var(--lmx-btn-height);padding:0 var(--lmx-btn-padding-x);font-size:var(--lmx-btn-font-size) !important;font-weight:700;text-transform:uppercase;text-decoration:none !important;cursor:pointer;box-sizing:border-box;white-space:nowrap;transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;position:relative;overflow:hidden}
.lmx-b2-inner *{box-sizing:border-box}
.lmx-b2-top{display:flex;align-items:center;justify-content:space-between;gap:max(14px,calc(26px * var(--block2-scale,1)));width:100%;margin:0 auto}
.lmx-b2-text{width:calc(52% - max(7px,calc(13px * var(--block2-scale,1))));flex:0 0 auto}
.lmx-b2-eyebrow{color:#52C7C6 !important;font-size:max(11px,calc(13.5px * var(--block2-scale,1))) !important;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:max(8px,calc(26px * var(--block2-scale,1)))}
.lmx-b2-title{margin:0 !important;font-family:var(--lmx-h1-font-family) !important;font-weight:300 !important;font-size:var(--lmx-h1-size) !important;line-height:1.17 !important;letter-spacing:-.01em;color:#fff !important}
.lmx-b2-desc{margin:max(10px,calc(34px * var(--block2-scale,1))) 0 0 !important;max-width:480px;font-size:max(14px,calc(21px * var(--block2-scale,1))) !important;line-height:2.05 !important;font-weight:300;color:rgba(255,255,255,.86) !important}
.lmx-b2-visual{flex:0 0 auto;width:calc(48% - max(7px,calc(13px * var(--block2-scale,1))));position:relative}
.lmx-b2-visual-inner{position:relative;width:100%;line-height:0;text-align:right}
.lmx-b2-visual-inner.lmx-breathing{animation:lmxGroupBreathe 6.5s ease-in-out infinite}
@keyframes lmxGroupBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.lmx-b2-wolf{width:auto;height:auto;max-width:100%;display:inline-block;user-select:none;pointer-events:none;opacity:0;transform:scale(.9);filter:blur(9px);transition:opacity 1.1s ease-out,transform 1.1s cubic-bezier(.22,.9,.32,1),filter 1.1s ease-out}
.lmx-b2-visual.is-in .lmx-b2-wolf{opacity:0;transform:scale(1);filter:blur(0)}
/* the constellation reveals the picture itself once the dots are in place */
.lmx-b2-visual.is-assembled .lmx-b2-wolf{opacity:1}
.lmx-b2-canvas{position:absolute;left:0;top:0;display:block;background:transparent;pointer-events:none}
.lmx-b2-star{position:absolute;width:4px;height:4px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,1) 0%,rgba(255,255,255,.5) 55%,rgba(255,255,255,0) 100%);opacity:0;transform:translate(var(--sx,0px),var(--sy,0px)) scale(.5);transition:transform 1s cubic-bezier(.22,.9,.32,1),opacity .9s ease-out;pointer-events:none}
.lmx-b2-visual.is-in .lmx-b2-star{opacity:1;transform:translate(0,0) scale(1)}
.lmx-b2-star.lmx-twinkling{animation-name:lmxTwinkle;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
@keyframes lmxTwinkle{0%,100%{opacity:1;transform:translate(0,0) scale(1)}50%{opacity:.35;transform:translate(0,0) scale(.7)}}
.lmx-b2-columns{display:flex;align-items:flex-start;justify-content:space-between;width:100%;margin:max(10px,calc(20px * var(--block2-scale,1))) auto 0;padding-top:max(6px,calc(12px * var(--block2-scale,1)));border-top:1px solid rgba(255,255,255,.14);gap:max(10px,calc(20px * var(--block2-scale,1)))}
.lmx-b2-col{flex:1 1 0;position:relative;padding:0 28px}
.lmx-b2-col:first-child{padding-left:0}
.lmx-b2-col:last-child{padding-right:0}
.lmx-b2-col + .lmx-b2-col{border-left:1px solid rgba(255,255,255,.14)}
.lmx-b2-num-row{display:flex;align-items:center;gap:12px;margin-bottom:max(3px,calc(7px * var(--block2-scale,1)))}
.lmx-b2-num{font-size:13px;color:rgba(255,255,255,.5);font-weight:500;letter-spacing:.05em}
.lmx-b2-num-line{flex:0 0 auto;width:28px;height:1px;background:rgba(255,255,255,.35)}
.lmx-b2-col-title{margin:0 0 max(3px,calc(5px * var(--block2-scale,1))) !important;font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif !important;font-weight:600 !important;font-size:max(14px,calc(17px * var(--block2-scale,1))) !important;color:#fff !important}
.lmx-b2-col-desc{margin:0 0 max(5px,calc(8px * var(--block2-scale,1))) !important;font-size:max(12px,calc(13px * var(--block2-scale,1))) !important;line-height:1.4 !important;font-weight:300;color:rgba(255,255,255,.66) !important}
.lmx-b2-explore{display:inline-flex;align-items:center;gap:8px;font-size:max(10px,calc(11px * var(--block2-scale,1))) !important;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#52C7C6 !important;text-decoration:none !important;transition:color .2s ease,gap .2s ease}
.lmx-b2-explore:hover{color:#83DAD9 !important;gap:12px}
/* A finger hits the link rather than a 19px-tall line: padding is added above
   and below — the line looks the same while the target becomes 27px. */
@media (max-width:1024px){.lmx-b2-explore{padding:5px 0}}
/* The “Trusted by customers around the world” strip (.lmx-b2-trusted*,
   .lmx-b2-logos, .lmx-b2-logo) is a shared component; its styles live in
   assets/css/shared/trusted-logos.css (handle lmx-trusted-logos, loaded before
   this file). */
.lmx-b2-arrow{display:inline-block;font-size:14px;line-height:1}
@media (min-width:1025px){
.lmx-b2-inner{display:grid;grid-template-rows:1fr auto auto;height:100%;min-height:100%}
/* Text (52%) and image (48%) columns are fixed, unscaled fractions of
   the row — same split at every --block2-scale, summing to exactly
   100% so there is never leftover space for space-between to dump into
   the gap between them (that mismatch was the root cause of the old
   ballooning-gap bug). Only the image's own max-height is tied to
   --block2-scale; width:auto + max-width:100% lets the browser derive
   the matching width from its natural aspect ratio, so it always
   shrinks as a whole (never cropped) and is never wider than its
   column. text-align:right on the inner wrapper keeps the (possibly
   narrower-than-column) image flush against the column's own right
   edge, which itself sits --lmx-section-padding-x from the viewport
   edge — same inset the text column uses on the left, so hero and
   block2 share one consistent margin instead of the image bleeding
   to the true edge. */
.lmx-b2-wolf{max-height:max(220px,calc(560px * var(--block2-scale,1))) !important}
}
@media (max-width:1024px){
.lmx-b2-inner{display:block !important;height:auto !important;min-height:0 !important;padding:90px 42px 70px}
.lmx-b2-top{flex-direction:column;gap:40px}
.lmx-b2-text{width:100%;max-width:640px}
.lmx-b2-visual{width:80%;max-width:480px;margin:0 auto}
.lmx-b2-title{font-size:44px !important}
.lmx-b2-columns{flex-direction:column;gap:0;margin-top:60px}
.lmx-b2-col{padding:28px 0;width:100%}
.lmx-b2-col:first-child,.lmx-b2-col:last-child{padding-left:0;padding-right:0}
.lmx-b2-col + .lmx-b2-col{border-left:none;border-top:1px solid rgba(255,255,255,.14)}
}
@media (max-width:600px){
.lmx-b2-inner{padding:70px 24px 50px}
.lmx-b2-title{font-size:34px !important}
.lmx-b2-desc{font-size:16px !important}
}