/* =========================================================================
 * MXDR Service — block 1, Hero.
 *
 * A dark cover: a canvas grid of dots and a soft glowing “planet” at the
 * bottom, an Outfit 300 heading (like the home H1: 75px base, -2px tracking),
 * an outline button and the horizontal service navigation along the bottom
 * edge. The service navigation is a shared component (inc/service-chain.php)
 * and its styles live in assets/css/shared/service-chain.css.
 * ====================================================================== */

.lmx-mh-inner{position:relative;width:100%;min-height:100vh;background:#000 !important;font-family:var(--lmx-ms-font,'Hanken Grotesk',Helvetica,Arial,sans-serif);display:grid;grid-template-rows:1fr auto;grid-template-columns:minmax(0,1fr);padding:0 var(--lmx-section-padding-x);box-sizing:border-box;overflow:hidden;color:#fff;--ms-scale:1}
.lmx-mh-inner *{box-sizing:border-box}

/* --- background ----------------------------------------------------------- */
.lmx-mh-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.lmx-mh-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.lmx-mh-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Horizon: a huge circle of which only the upper arc with its glow is visible. */
.lmx-mh-horizon{position:absolute;left:50%;top:78%;width:170%;aspect-ratio:1/1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,#0a1517 0%,#050b0c 42%,#020404 60%);box-shadow:0 -1px 0 rgba(150,235,235,.45),0 -18px 60px rgba(82,199,198,.22),0 -60px 160px rgba(82,199,198,.10),inset 0 40px 120px rgba(82,199,198,.10)}
.lmx-mh-horizon::after{content:'';position:absolute;left:50%;top:0;width:60%;height:2%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(190,245,245,.28) 0%,rgba(82,199,198,0) 70%)}

/* --- content -------------------------------------------------------------- */
.lmx-mh-content{position:relative;z-index:1;align-self:center;text-align:center;max-width:1180px;width:100%;margin:0 auto;padding:max(24px,calc(60px * var(--ms-scale,1))) 0 max(16px,calc(40px * var(--ms-scale,1)))}
.lmx-mh-eyebrow{margin:0 0 max(12px,calc(22px * var(--ms-scale,1))) !important;font-family:var(--lmx-ms-font) !important;font-weight:600;font-size:max(11px,calc(14px * var(--ms-scale,1))) !important;letter-spacing:.34em;text-transform:uppercase;color:var(--lmx-ms-accent,#52C7C6) !important;line-height:1.4 !important}

.lmx-mh-titlewrap{position:relative;display:inline-block;max-width:100%}
.lmx-mh-title{position:relative;margin:0 !important;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:300 !important;font-size:max(34px,calc(84px * var(--ms-scale,1))) !important;line-height:1.08 !important;letter-spacing:-2px;color:#fff !important;text-wrap:balance;-webkit-mask-image:var(--mh-mask,none);mask-image:var(--mh-mask,none)}
/* The particle canvas lies over the heading with room at the edges: particles
   fly outside the text box. JS sets its size and position from the H1 box. */
.lmx-mh-particles{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;display:block;opacity:0;transition:opacity .2s ease}
.lmx-mh-particles.is-on{opacity:1}

.lmx-mh-desc{margin:max(14px,calc(28px * var(--ms-scale,1))) auto 0 !important;max-width:860px;font-family:var(--lmx-ms-font) !important;font-weight:300;font-size:max(15px,calc(20px * var(--ms-scale,1))) !important;line-height:1.55 !important;letter-spacing:0;color:rgba(255,255,255,.74) !important}
.lmx-mh-ctas{margin-top:max(18px,calc(40px * var(--ms-scale,1)))}

/* --- desktop: the section takes exactly the screen ------------------------- */
@media (min-width:1025px){
.lmx-mh-inner{min-height:100%;height:100%}
}

/*
 * Wide desktop: the line under the heading fits into two lines.
 *
 * At 860px the longest descriptions (SIEM, Intelligence, Endpoint Security)
 * pushed a single last word onto a third line — “SIEM.”, “XDR.”. Measured: the
 * longest line (Recon) needs 970px for two lines, the rest need 880–900px; we
 * take 1000 with room for the fallback font during the first paint. The font
 * size is untouched; the width is noticeably smaller than the column, so no
 * horizontal scrolling appears. Below 1440px wrapping is ordinary.
 */
@media (min-width:1440px){
.lmx-mh-desc{max-width:1000px}
}

/* --- narrow screens -------------------------------------------------------- */
@media (max-width:1024px){
.lmx-mh-inner{min-height:100svh;padding:110px var(--lmx-section-padding-x) 28px}
.lmx-mh-content{padding:0 0 28px}
.lmx-mh-title{font-size:44px !important;letter-spacing:-1px}
.lmx-mh-desc{font-size:16px !important}
.lmx-mh-horizon{top:82%;width:260%}
}
@media (max-width:480px){
.lmx-mh-title{font-size:36px !important}
.lmx-mh-inner{padding-top:96px}
}

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