/* =========================================================================
 * MXDR Service — the frame of a service page.
 *
 * The same principle as the home page (assets/css/home/page.css):
 *   .lmx-ms               — the page scroll container,
 *   .lmx-ms > .lmx-msec   — one full-screen section,
 *   .lmx-msec-inner       — the section content (styles live in the block CSS).
 * The sections are read from the DOM, so a block switched off in ACF
 * disappears from the snap scrolling and from the dots by itself.
 *
 * Scale: every block shares one variable, --ms-scale (written by page.js on
 * .lmx-msec-inner), and sizes are expressed as max(floor, calc(base * scale)).
 *
 * The tokens were taken from the finished home page
 * (design-source/probe-mxdr-tokens.js): Outfit 300 for headings, Hanken
 * Grotesk for text, accent #52C7C6, 140px side padding and square buttons with
 * wide tracking.
 * ====================================================================== */

:root{--lmx-section-padding-x:140px}

.lmx-ms{position:relative;width:100%;--lmx-ms-accent:#52C7C6;--lmx-ms-accent-hi:#83DAD9;--lmx-ms-on-accent:#04211F;--lmx-ms-ink:#15181d;--lmx-ms-display:'Outfit','Poppins',sans-serif;--lmx-ms-font:'Hanken Grotesk',Helvetica,Arial,sans-serif}
.lmx-ms > .lmx-msec{position:relative;width:100%}
.lmx-ms img{border-radius:0;height:auto;max-width:100%}

/* As on the home page: below 1025px the frame is ordinary flow, and decorative
   layers running past the right edge would produce horizontal scrolling. */
@media (max-width:1024px){.lmx-ms{overflow-x:clip}}

/* The typographic base — as on the home page (the former Elementor kit). */
.lmx-ms{line-height:110%;letter-spacing:.02em;letter-spacing:2%}
.lmx-ms h1{letter-spacing:-2px}
.lmx-ms h2{letter-spacing:-.02em}
.lmx-ms h3{line-height:125%}

/* The section background is in place before the block CSS loads — no white flash. */
.lmx-msec--m1,
.lmx-msec--m4,
.lmx-msec--m5,
.lmx-msec--m6,
.lmx-msec--empty{background-color:#000}
.lmx-msec--m2,
.lmx-msec--m3{background-color:#eef0f3}

/* --- buttons --------------------------------------------------------------
   The metrics match .lmx-btn on the home page (53 height, tracking, Hanken
   700, square corners). The outline variant is like “BOOK A DEMO” in the
   reference and like Free Trial in the header. */
.lmx-ms-btn{display:inline-flex;align-items:center;gap:14px;height:max(42px,calc(53px * var(--ms-scale,1)));padding:0 max(20px,calc(30px * var(--ms-scale,1)));font-family:var(--lmx-ms-font);font-size:max(11px,calc(13px * var(--ms-scale,1))) !important;font-weight:700;letter-spacing:.18em;text-transform:uppercase;text-decoration:none !important;cursor:pointer;box-sizing:border-box;white-space:nowrap;position:relative;transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease}
/* A colour fallback (2026-10-01). A variant (--outline/--solid/--ghost) sets
   its own colour with !important and overrides this fallback. It is here for
   buttons that have no variant: a link with no colour fell back to the
   browser's blue (that is how LOAD MORE looked in the catalogues). */
.lmx-ms-btn{color:var(--lmx-ms-accent)}
.lmx-ms-btn--outline{border:1px solid var(--lmx-ms-accent);color:var(--lmx-ms-accent) !important;background:rgba(82,199,198,.04)}
/* The lift, the glow, the sheen and the focus ring come from the shared
   .lmx-btn-fx component (assets/css/shared/buttons.css); only the variant
   colours live here. */
.lmx-ms-btn--outline:hover{background:var(--lmx-ms-accent);color:var(--lmx-ms-on-accent) !important}
.lmx-ms-btn-bar{display:block;width:1px;height:1.4em;background:currentColor;opacity:.7}
.lmx-ms-btn--solid{background:var(--lmx-ms-accent) !important;color:var(--lmx-ms-on-accent) !important;border:none}
.lmx-ms-btn--solid:hover{background:var(--lmx-ms-accent-hi) !important}

/* Editor hints on the front end (only for signed-in users with the rights). */
.lmx-ms-admin-hint{margin:24px auto;max-width:720px;padding:14px 18px;border:1px dashed rgba(82,199,198,.6);color:#52C7C6;font-family:var(--lmx-ms-font);font-size:14px;line-height:1.5;text-align:center}

/* A page with its content switched off. */
.lmx-ms-empty{display:grid;place-content:center;min-height:60vh;padding:80px var(--lmx-section-padding-x);text-align:center;color:#fff;font-family:var(--lmx-ms-font)}
.lmx-ms-empty-title{font-family:var(--lmx-ms-display) !important;font-weight:300 !important;font-size:48px !important;color:#fff !important;margin:0 0 16px !important}
.lmx-ms-empty-note{color:rgba(255,255,255,.6);max-width:560px}

/* --- desktop: a fixed header plus full-screen sections -------------------- */
@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-ms{margin-top:var(--lmx-header-h,82px);height:calc(100vh - var(--lmx-header-h,82px));overflow:hidden;scrollbar-width:none}
.lmx-ms::-webkit-scrollbar{display:none}
.lmx-ms.lmx-multi-block{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}
.lmx-ms > .lmx-msec{height:100%}
.lmx-ms > .lmx-msec > .lmx-msec-inner{height:100%;min-height:100%}
/* A tall section (data-tall, Active Defense “First Principles”): the text is
   not squeezed to the window — the section grows with its content and scrolls
   inside the snap container, and page.js skips it while fitting the scale. */
.lmx-ms > .lmx-msec[data-tall]{height:auto;min-height:100%}
.lmx-ms > .lmx-msec[data-tall] > .lmx-msec-inner{height:auto;min-height:100%}
}

/* --- the dots on the right (the same classes and pixels as on the home page) */
/* As on the home page: the centre of the column is the middle of the area
   below the header. */
.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 light sections the dots read worse — page.js adds a class based on the active section. */
.lmx-block-dots.on-light .lmx-block-dot{border-color:rgba(21,24,29,.35)}
.lmx-block-dots.on-light .lmx-block-dot.is-active{border-color:#52C7C6}

@media (max-width:1024px){
:root{--lmx-section-padding-x:28px}
}

/* =========================================================================
 * Phone: a long button label wraps instead of spilling out (2026-09-30).
 *
 * .lmx-ms-btn used to carry white-space:nowrap and a fixed height, so “MEET
 * ARTEMIS & LISA IN ACTION” spilled past the frame at 390px and ran into the
 * vertical rule on the left (.lmx-ms-btn-bar, absolute, left:10px). Now the
 * label wraps centred, the height grows with the content (never below 44px —
 * that is also the tap target), room is left on the left for the rule and the
 * tracking is slightly tighter. Buttons in one group look the same: the rules
 * are shared.
 * ====================================================================== */
@media (max-width:600px){
.lmx-ms-btn{white-space:normal;text-align:center;height:auto;min-height:44px;line-height:1.25;letter-spacing:.12em;padding:11px 16px}
.lmx-wh-btn,.lmx-ts-btn,.lmx-in-btn{padding-left:24px}
.lmx-ms-btn .lmx-fx-label{display:block}
}