/* =========================================================================
 * LMNTRIX MDR — block 4, MDR Capabilities.
 *
 * Permanent text on the left, the panel of the selected capability behind a
 * thin vertical line on the right; the panels lie in one grid cell
 * (.lmx-cap-stage) and the invisible ones are visibility:hidden, so the height
 * of the stage is constant and switching moves nothing. The particle mask
 * (--cap-mask) is set by the engine on the active panel. The chain at the
 * bottom is a shared component (assets/css/shared/service-chain.css, button
 * mode); only its “comet” lives here: the line up to the active dot is teal,
 * the dots already passed are filled, and the glow is a tail to the left of
 * the dot.
 * ====================================================================== */

.lmx-cap-inner{position:relative;width:100%;min-height:100vh;background:#000;color:#fff;font-family:var(--lmx-ms-font,'Hanken Grotesk',Helvetica,Arial,sans-serif);padding:0 var(--lmx-section-padding-x);box-sizing:border-box;overflow:hidden;--ms-scale:1;--cap-accent:#52C7C6}
.lmx-cap-inner *{box-sizing:border-box}

/* --- two columns ----------------------------------------------------------- */
.lmx-cap-cols{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:max(24px,calc(64px * var(--ms-scale,1)));align-items:start;padding-top:max(16px,calc(28px * var(--ms-scale,1)))}

.lmx-cap-eyebrow{margin:0 0 max(14px,calc(30px * var(--ms-scale,1))) !important;font-family:var(--lmx-ms-font) !important;font-weight:500;font-size:max(11px,calc(14px * var(--ms-scale,1))) !important;letter-spacing:.42em;text-transform:uppercase;color:#e6ebee !important;line-height:1.3 !important}
.lmx-cap-title{margin:0 !important;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:300 !important;font-size:max(34px,calc(76px * var(--ms-scale,1))) !important;line-height:1.06 !important;letter-spacing:-.02em;color:#fff !important;text-wrap:balance}
.lmx-cap-desc{margin:max(14px,calc(28px * var(--ms-scale,1))) 0 0 !important;max-width:560px;font-family:var(--lmx-ms-font) !important;font-weight:300;font-size:max(15px,calc(21px * var(--ms-scale,1))) !important;line-height:1.5 !important;color:rgba(255,255,255,.72) !important}

.lmx-cap-right{position:relative;align-self:stretch;padding-left:max(24px,calc(60px * var(--ms-scale,1)));border-left:1px solid rgba(255,255,255,.22)}

/* --- panel stage ---------------------------------------------------------- */
/* minmax(0,1fr) and min-width:0 are mandatory: otherwise the grid track
   stretches to the min-content of the panel and on a phone the block runs off
   the screen. */
.lmx-cap-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.lmx-cap-panel{grid-area:1/1;width:100%;min-width:0;visibility:hidden;-webkit-mask-image:var(--cap-mask,none);mask-image:var(--cap-mask,none)}
.lmx-cap-panel.is-active{visibility:visible}
/* Two particle canvases (the text leaving and the text arriving overlap): the
   engine gives each of them a size and an offset from the stage box. */
.lmx-cap-particles{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;display:block;opacity:0;transition:opacity .2s ease;z-index:2}
.lmx-cap-particles.is-on{opacity:1}

.lmx-cap-accent{margin:0 !important;display:flex;align-items:baseline;gap:max(6px,calc(12px * var(--ms-scale,1)));font-family:var(--lmx-ms-display) !important;line-height:1 !important;color:var(--cap-accent) !important}
.lmx-cap-accent-val{font-weight:200;font-size:max(46px,calc(100px * var(--ms-scale,1)));letter-spacing:-.02em;line-height:1}
.lmx-cap-accent-unit{font-weight:300;font-size:max(20px,calc(38px * var(--ms-scale,1)));text-transform:uppercase;line-height:1}
.lmx-cap-accent-label{margin:max(6px,calc(10px * var(--ms-scale,1))) 0 0 !important;font-family:var(--lmx-ms-font) !important;font-weight:600;font-size:max(11px,calc(13.5px * var(--ms-scale,1))) !important;letter-spacing:.24em;text-transform:uppercase;color:var(--cap-accent) !important;line-height:1.3 !important}
.lmx-cap-panel-title{margin:max(14px,calc(30px * var(--ms-scale,1))) 0 0 !important;font-family:var(--lmx-ms-display) !important;font-weight:300 !important;font-size:max(24px,calc(40px * var(--ms-scale,1))) !important;line-height:1.15 !important;letter-spacing:-.01em;color:#fff !important}
.lmx-cap-panel-desc{margin:max(10px,calc(18px * var(--ms-scale,1))) 0 0 !important;max-width:560px;font-family:var(--lmx-ms-font) !important;font-weight:300;font-size:max(14px,calc(19px * var(--ms-scale,1))) !important;line-height:1.5 !important;color:rgba(255,255,255,.72) !important}
.lmx-cap-tags{margin:max(12px,calc(26px * var(--ms-scale,1))) 0 0 !important;display:flex;flex-wrap:wrap;align-items:baseline;font-family:var(--lmx-ms-font) !important;font-weight:600;font-size:max(10px,calc(12.5px * var(--ms-scale,1))) !important;letter-spacing:.2em;text-transform:uppercase;color:var(--cap-accent) !important;line-height:1.5 !important}
.lmx-cap-tag{display:inline-block;white-space:nowrap}
.lmx-cap-tag + .lmx-cap-tag::before{content:'·';display:inline-block;margin:0 max(8px,calc(16px * var(--ms-scale,1)));color:rgba(82,199,198,.7)}

/* --- chain ----------------------------------------------------------------- */
.lmx-cap-navwrap{position:relative;margin-top:max(22px,calc(54px * var(--ms-scale,1)))}
.lmx-cap-nav-label{margin:0 0 max(6px,calc(10px * var(--ms-scale,1))) !important;font-family:var(--lmx-ms-font) !important;font-weight:500;font-size:max(10px,calc(13px * var(--ms-scale,1))) !important;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.82) !important;line-height:1.3 !important}
.lmx-cap-nav.lmx-mh-nav{padding-bottom:0}
/* The line: teal up to the active dot (--cap-p is set by the script), grey after it. */
.lmx-cap-nav .lmx-mh-nav-list::before{background:linear-gradient(90deg,rgba(150,240,240,.95) 0,var(--cap-accent) var(--cap-p,0%),rgba(255,255,255,.22) var(--cap-p,0%),rgba(255,255,255,.22) 100%)}
.lmx-cap-nav .lmx-mh-nav-item.is-done .lmx-mh-nav-dot{background:var(--cap-accent);border-color:var(--cap-accent)}
.lmx-cap-nav .lmx-mh-nav-item.is-active .lmx-mh-nav-dot{background:#0b1a1a;border-color:#d8fbfb;box-shadow:0 0 0 4px rgba(82,199,198,.28),0 0 22px 4px rgba(82,199,198,.85)}
/* The active label changes colour only: changing size or weight would move the neighbours (CLS). */
.lmx-cap-nav .lmx-mh-nav-item.is-active .lmx-mh-nav-link{color:var(--cap-accent) !important;font-weight:500}
.lmx-cap-nav .lmx-mh-nav-item.is-active .lmx-mh-nav-link::after{display:none}
/* The comet: a glow tail to the left of the active dot (position in --glow-x, transform). */
.lmx-cap-nav .lmx-mh-nav-glow{width:max(220px,calc(440px * var(--ms-scale,1)));height:4px;transform:translate(calc(var(--glow-x,0px) - 100% + 8px),-50%);border-radius:2px;
  background:linear-gradient(90deg,rgba(82,199,198,0) 0%,rgba(82,199,198,.55) 55%,rgba(200,250,250,1) 100%);box-shadow:0 0 22px 3px rgba(82,199,198,.35)}
.lmx-cap-nav .lmx-mh-nav-label{white-space:normal;max-width:max(140px,calc(215px * var(--ms-scale,1)));line-height:1.35;letter-spacing:.12em;font-size:max(11px,calc(12.5px * var(--ms-scale,1)));font-weight:500}
.lmx-cap-nav .lmx-mh-nav-item{flex:1 1 0}

/* --- desktop --------------------------------------------------------------- */
@media (min-width:1025px){
.lmx-cap-inner{display:grid;align-content:center;height:100%;min-height:100%}
}

/* --- narrow screens -------------------------------------------------------- */
@media (max-width:1024px){
.lmx-cap-inner{min-height:0;height:auto;padding:84px var(--lmx-section-padding-x) 64px}
.lmx-cap-cols{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:0}
.lmx-cap-title{font-size:44px !important}
.lmx-cap-desc{font-size:16px !important;max-width:none}
.lmx-cap-right{padding-left:0;border-left:0;padding-top:26px;border-top:1px solid rgba(255,255,255,.22)}
/* A long accent word (“PREVENTION”) must not push the column apart on a phone. */
.lmx-cap-accent{flex-wrap:wrap}
.lmx-cap-accent-val{font-size:min(64px,13.5vw);min-width:0;max-width:100%;overflow-wrap:break-word}
.lmx-cap-accent-unit{font-size:26px}
.lmx-cap-panel-title{font-size:26px !important}
.lmx-cap-panel-desc{font-size:15px !important;max-width:none}
.lmx-cap-navwrap{margin-top:34px}
/* The chain scrolls horizontally (shared component rules); labels on one line. */
.lmx-cap-nav .lmx-mh-nav-label{white-space:nowrap;max-width:none}
.lmx-cap-nav .lmx-mh-nav-item{flex:0 0 auto}
.lmx-cap-nav .lmx-mh-nav-glow{width:220px}
}
@media (max-width:480px){
.lmx-cap-title{font-size:38px !important}
.lmx-cap-accent-val{font-size:56px}
}

/* --- component extras (the Active Defense page) ------------------------------
   The pulled quote in the left column and the key points (title plus text) in
   the panel. The MDR page has neither, so the rules change nothing there. */
.lmx-cap-quote{margin:max(14px,calc(26px * var(--ms-scale,1))) 0 0 !important;padding:max(4px,calc(6px * var(--ms-scale,1))) 0 max(4px,calc(6px * var(--ms-scale,1))) max(16px,calc(26px * var(--ms-scale,1)));border-left:2px solid var(--cap-accent);max-width:560px}
.lmx-cap-quote p{margin:0 !important;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:300 !important;font-size:max(20px,calc(30px * var(--ms-scale,1))) !important;line-height:1.3 !important;letter-spacing:-.01em;color:#fff !important}
.lmx-cap-points{list-style:none;margin:max(12px,calc(22px * var(--ms-scale,1))) 0 0;padding:0;display:flex;flex-direction:column;gap:max(10px,calc(16px * var(--ms-scale,1)));max-width:560px}
.lmx-cap-point{margin:0;padding-left:max(14px,calc(22px * var(--ms-scale,1)));border-left:2px solid rgba(82,199,198,.55);display:flex;flex-direction:column;gap:max(3px,calc(5px * var(--ms-scale,1)))}
.lmx-cap-point-title{font-family:var(--lmx-ms-font) !important;font-weight:600;font-size:max(14px,calc(17px * var(--ms-scale,1)));line-height:1.35;color:#fff}
.lmx-cap-point-text{font-family:var(--lmx-ms-font) !important;font-weight:300;font-size:max(14px,calc(17px * var(--ms-scale,1)));line-height:1.5;color:rgba(255,255,255,.72)}
@media (max-width:1024px){
.lmx-cap-quote{max-width:none}
.lmx-cap-quote p{font-size:22px !important}
.lmx-cap-points{max-width:none}
.lmx-cap-point-title,.lmx-cap-point-text{font-size:15px}
}

/* --- panel description from the WYSIWYG (the Our Story page) ------------------
   The paragraphs inherit the size and the colour of the description; on MDR and
   Active Defense the description is plain text and these elements are absent. */
.lmx-cap-panel-desc--rich p{margin:0 0 max(8px,calc(14px * var(--ms-scale,1))) !important;font:inherit !important;line-height:inherit !important;color:inherit !important}
.lmx-cap-panel-desc--rich p:last-child{margin-bottom:0 !important}
.lmx-cap-panel-desc--rich a{color:var(--cap-accent)}
.lmx-cap-panel-desc--rich ul,.lmx-cap-panel-desc--rich ol{margin:0 0 1em 1.2em;padding:0}

/* --- less motion ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
.lmx-cap-particles{display:none}
.lmx-cap-panel{-webkit-mask-image:none !important;mask-image:none !important}
.lmx-cap-inner *{transition:none !important;animation:none !important}
}

/* The item icon above the panel heading (Company “Our Core Values”, 2026-09-15). */
.lmx-cap-panel-icon{display:inline-flex;align-items:center;justify-content:center;width:max(48px,calc(64px * var(--ms-scale,1)));height:max(48px,calc(64px * var(--ms-scale,1)));margin-bottom:max(10px,calc(16px * var(--ms-scale,1)));border-radius:16px;background:rgba(82,199,198,.12);border:1px solid rgba(82,199,198,.35)}
.lmx-cap-panel-icon img{width:60% !important;height:60% !important;object-fit:contain}

/* =========================================================================
 * The panel visual and link (Partners Program “Partner Ecosystem”,
 * 2026-09-16): an image above the heading and a link to the partner page under
 * the text. They are printed only when passed (MDR, Active Defense, Our Story
 * and Company do not pass them) — new selectors only.
 * ====================================================================== */
.lmx-cap-panel-media{display:block;width:100%;max-width:560px;margin:0 0 max(12px,calc(20px * var(--ms-scale,1)));border-radius:16px;overflow:hidden;border:1px solid rgba(82,199,198,.28);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.lmx-cap-panel-media img{display:block;width:100%;height:max(120px,calc(190px * var(--ms-scale,1)));object-fit:cover}
.lmx-cap-panel-link{display:inline-flex;align-items:center;gap:10px;margin-top:max(14px,calc(24px * var(--ms-scale,1)));font-family:var(--lmx-ms-font) !important;font-weight:700;font-size:max(12px,calc(13px * var(--ms-scale,1))) !important;letter-spacing:.22em;text-transform:uppercase;color:var(--cap-accent,#52C7C6) !important;text-decoration:none !important;transition:color .2s ease,gap .2s ease}
.lmx-cap-panel-link svg{width:18px;height:18px;flex:0 0 auto;transition:transform .25s ease}
.lmx-cap-panel-link:hover,.lmx-cap-panel-link:focus-visible{color:#fff !important}
.lmx-cap-panel-link:hover svg,.lmx-cap-panel-link:focus-visible svg{transform:translateX(4px)}
.lmx-cap-panel-link:focus{outline:none}
.lmx-cap-panel-link:focus-visible{outline:2px solid var(--cap-accent,#52C7C6);outline-offset:4px}
@media (max-width:1024px){
.lmx-cap-panel-media{max-width:none}
.lmx-cap-panel-media img{height:200px}
}
@media (prefers-reduced-motion:reduce){
.lmx-cap-panel-link,.lmx-cap-panel-link svg{transition:none}
}