/* =========================================================================
 * Home page (page 13519) — the page frame.
 *
 * This role used to belong to the Elementor containers and the CSS it
 * generated (.elementor-13519 > .elementor-element-XXX). The frame is now
 * ours:
 *   .lmx-home            — the page scroll container,
 *   .lmx-home > .lmx-section — one full-screen section,
 *   .lmx-<block>-inner   — the section content (lives in the block's own CSS).
 * The ordinal number of a section is no longer hard-coded anywhere: JS walks
 * the actual .lmx-section elements, so a block switched off in ACF disappears
 * from the snap scrolling and from the column of dots by itself.
 * ====================================================================== */

/* Side padding of the sections. This variable used to be declared by four
   blocks separately, and switching off the first of them would have taken it
   away from the rest. */
:root{--lmx-section-padding-x:140px}

.lmx-home{position:relative;width:100%}
.lmx-home > .lmx-section{position:relative;width:100%}

/* Below 1025px the page scrolls normally (the snap container with
   overflow-x:hidden is only enabled on desktop), and the decorative layers
   that run past the right edge — the stars of block 2, the card of the b12
   wheel — gave the page 4–8px of horizontal scrolling. clip crops them without
   turning the container into a scroller; it has no fixed descendants — the
   script puts the navigation dots into body. */
@media (max-width:1024px){.lmx-home{overflow-x:clip}}

/* The image reset that Elementor used to provide before the migration with the
   rule `.elementor img{border-radius:0;height:auto;max-width:100%}`. It was not
   decorative: its weight (0,1,1) overrode the single-class rules of the blocks,
   and the page is in fact laid out that way.
   What it holds:
     .lmx-b2-logo   — client logos are shown at their natural size instead of
                      being forced to 20px (otherwise the row loses 30px of
                      height);
     .lmx-b3-shot-img — the corners of the platform screenshots stay square
                      rather than rounded.
   Block rules of the same specificity (.lmx-b5-art img and the like) still win:
   their CSS is loaded after this file — exactly as the <style> inside the
   widget used to win. Removing this line means accepting those three changes
   in appearance. */
.lmx-home img{border-radius:0;height:auto;max-width:100%}

/* The typographic base of the page.
   Before the migration it came from the global Elementor kit on <body>:
     .elementor-kit-6   { line-height:110%; letter-spacing:2% }
     .elementor-kit-6 h1{ letter-spacing:-2px }
     .elementor-kit-6 h2{ letter-spacing:-2% }
     .elementor-kit-6 h3{ line-height:125% }
   The blocks were written on top of it, so this is not cosmetics: about a
   hundred elements inherited those 2% of letter spacing, and the h1–h3 rules
   with weight (0,1,1) overrode the single-class rules of the blocks — the ones
   not marked !important. The same thing is here, with our own selectors. The
   percentages in line-height are deliberate: 110% is resolved once against the
   .lmx-home font size and then inherited as ready-made pixels, while 1.1 would
   be recomputed by every descendant against its own size — labels in small
   type would become tighter. For letter-spacing the percentage is declared as
   the second value: it is resolved by every descendant against its own size,
   whereas .02em freezes into pixels where it is declared, which made small
   text diverge from the original layout. The first line of each pair is a
   fallback for engines without percentage support. */
.lmx-home{line-height:110%;letter-spacing:.02em;letter-spacing:2%}
.lmx-home h1{letter-spacing:-2px}
.lmx-home h2{letter-spacing:-.02em}
.lmx-home h3{line-height:125%}

/* The section background. Elementor used to set it from the container's
   background_color; every block has its own and it must be visible before the
   block's own CSS loads, otherwise a white flash runs across the page at
   start-up. */
.lmx-section--b1,
.lmx-section--b2,
.lmx-section--b5,
.lmx-section--siem,
.lmx-section--b7,
.lmx-section--b9,
.lmx-section--b10{background-color:#000}
.lmx-section--b3,
.lmx-section--b4{background-color:#eceef1}
.lmx-section--b6,
.lmx-section--b11,
.lmx-section--b12{background-color:#eef0f3}

/* Page layout (desktop only — see JS gate at window.innerWidth>1024). Header
   becomes fixed; the page wrapper sits below it sized to exactly one screen
   (100vh minus header height) and holds the full-screen blocks that
   wheel-snap between each other, with a fixed dot-indicator column showing
   which one is active.

   The JS (lmxInitPageLayout in page.js) walks the rendered sections
   generically, so adding or removing a block is a template change, not a
   rewrite. Each block is sized to exactly wrapper.clientHeight, so block N's
   scroll-stop is simply N * wrapper.clientHeight — see scrollToBlock/onWheel.

   (Native CSS scroll-snap-type is deliberately NOT used for the snapping —
   with a tall block and Chrome's "mandatory" snap, the scroll position kept
   re-locking to a block's top on every wheel tick. Plain overflow:auto plus
   JS-driven scrollTo() at each block boundary is what gives free scroll
   inside a block while still snapping cleanly between blocks.) */
@media (min-width:1025px){
html,body{overflow:hidden !important;height:100%}
#lmx-site-header{position:fixed !important;top:0;left:0;right:0;z-index:9999}
/*
 * The starting value of the header height.
 *
 * The page script measures the header and writes --lmx-header-h on <html>, but
 * until then the container is drawn with the fallback value. It used to be 82px
 * against the real 108–110px on desktop, and when the variable appeared the
 * whole page slid down — 0.10 CLS on every page with this frame. 108px is the
 * actual height of the two-tier header; the rule sits inside the desktop block
 * because below 1025px the header is not fixed and the frame takes no offset.
 */
:root{--lmx-header-h:108px}
.lmx-home{margin-top:var(--lmx-header-h,82px);height:calc(100vh - var(--lmx-header-h,82px));overflow:hidden;scrollbar-width:none}
.lmx-home::-webkit-scrollbar{display:none}
.lmx-home.lmx-multi-block{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}

/* One shared pair of rules instead of eight named ones: the section takes
   exactly the screen, its content takes exactly the section. There used to be
   one more layer between them (.elementor-widget-html), which also had to be
   given height:100%; it is gone now. */
.lmx-home > .lmx-section{height:100%}
.lmx-home > .lmx-section > .lmx-hero-inner,
.lmx-home > .lmx-section > .lmx-b2-inner,
.lmx-home > .lmx-section > .lmx-b3-inner,
.lmx-home > .lmx-section > .lmx-b4-inner,
.lmx-home > .lmx-section > .lmx-b5-inner,
.lmx-home > .lmx-section > .lmx-siem-inner,
.lmx-home > .lmx-section > .lmx-b6-inner,
.lmx-home > .lmx-section > .lmx-b7-inner,
.lmx-home > .lmx-section > .lmx-b9-inner,
.lmx-home > .lmx-section > .lmx-b10-inner,
.lmx-home > .lmx-section > .lmx-b11-inner,
.lmx-home > .lmx-section > .lmx-mc-inner{height:100%;min-height:100%}
}

/* The dots are centred within the area BELOW the header rather than within the
   window: with 12 sections the column is tall, and on short laptops (≤660px)
   the top dots slid under the fixed header. In short windows the step is
   tightened further. */
.lmx-block-dots{position:fixed;right:24px;top:calc(var(--lmx-header-h,108px) + (100dvh - var(--lmx-header-h,108px)) / 2);transform:translateY(-50%);z-index:10000;display:none;flex-direction:column;align-items:center;gap:14px}
@media (min-width:1025px){.lmx-block-dots{display:flex}}
@media (max-height:760px){.lmx-block-dots{gap:10px}}
@media (max-height:660px){.lmx-block-dots{gap:7px}}
.lmx-block-dot{width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);background:transparent;padding:0;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.lmx-block-dot:hover{border-color:#52C7C6}
/* A hint next to a dot: a single circle gives no clue where it leads, so hover
   and focus show the section name to the left of the column. */
.lmx-block-dot{position:relative}
.lmx-block-dot__tip{position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%) translateX(6px);z-index:1;display:block;max-width:270px;padding:7px 11px;border-radius:9px;background:#0d1416;border:1px solid rgba(82,199,198,.34);box-shadow:0 12px 28px rgba(0,0,0,.45);color:#fff;font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s}
.lmx-block-dot__tip::after{content:'';position:absolute;left:100%;top:50%;width:0;height:0;margin-top:-5px;border:5px solid transparent;border-left-color:rgba(82,199,198,.34)}
.lmx-block-dot:hover .lmx-block-dot__tip,.lmx-block-dot:focus-visible .lmx-block-dot__tip{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
@media (prefers-reduced-motion:reduce){.lmx-block-dot__tip{transition:none}}

.lmx-block-dot.is-active{background:#52C7C6;border-color:#52C7C6;transform:scale(1.15)}

/* On the home page --lmx-section-padding-x stays 140px on narrow screens too
   (the home blocks set their own mobile padding) — the flat wheel gets the
   padding of block 12. */
@media (max-width:1024px){.lmx-home .lmx-mc-inner{padding-left:22px;padding-right:22px}}