/* =========================================================================
 * Why LMNTRIX — block 3, Technology Stack: the text column and the block grid.
 *
 * The tower stage is the shared component assets/css/shared/layers-tower.css
 * (home b7, services m4). Here the block ties the stage scale to its own
 * variable (--lmx-tower-scale ← --ms-scale) and measures the stage by the
 * column width: with 3–6 levels the stage has a different aspect (inline
 * aspect-ratio from the component) and the height follows from the width.
 * ====================================================================== */

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

.lmx-ts-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.45fr);align-items:center;gap:max(16px,calc(40px * var(--ms-scale,1)))}

.lmx-ts-eyebrow{display:block;color:var(--ts-accent);font-size:max(10px,calc(13px * var(--ms-scale,1)));font-weight:600;letter-spacing:.3em;text-transform:uppercase}
.lmx-ts-title{margin:max(10px,calc(22px * var(--ms-scale,1))) 0 0 !important;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:300 !important;font-size:max(30px,calc(72px * var(--ms-scale,1))) !important;line-height:1.04 !important;letter-spacing:-.02em;color:#fff !important;max-width:11ch;text-wrap:balance}
.lmx-ts-desc{margin:max(10px,calc(24px * var(--ms-scale,1))) 0 0 !important;max-width:min(100%,460px);font-size:max(15px,calc(18px * var(--ms-scale,1))) !important;line-height:1.6 !important;font-weight:300;color:rgba(255,255,255,.7) !important}
.lmx-ts-rule{display:block;width:max(28px,calc(50px * var(--ms-scale,1)));height:2px;margin-top:max(18px,calc(48px * var(--ms-scale,1)));background:var(--ts-accent)}
.lmx-ts-note{margin:max(10px,calc(22px * var(--ms-scale,1))) 0 0 !important;max-width:min(100%,460px);font-size:max(16px,calc(20px * var(--ms-scale,1))) !important;line-height:1.5 !important;font-weight:300;color:rgba(255,255,255,.88) !important}

/* Stage: the width comes from the column (a band is left on the right for the callouts), the height from the aspect. */
.lmx-ts-stagewrap{min-width:0;position:relative}
.lmx-ts-stagewrap .lmx-b7-stage{height:auto;width:min(calc(100% - max(190px,calc(270px * var(--ms-scale,1)))),calc(640px * var(--ms-scale,1)));margin:0}
.lmx-ts-stagewrap .lmx-b7-stage--wrap .lmx-b7-lab-txt span{width:max(150px,calc(220px * var(--ms-scale,1)));font-size:max(9px,calc(13px * var(--ms-scale,1)));letter-spacing:.06em;text-transform:none;line-height:1.5;color:rgba(255,255,255,.72)}

/* The buttons under the text (the wrapper's ctas argument — the Active Defense
   page): outlined, with a teal tick at the left edge, as in the hero. Why
   LMNTRIX has no buttons. */
.lmx-ts-ctas{display:flex;flex-wrap:wrap;gap:max(12px,calc(20px * var(--ms-scale,1)));margin-top:max(22px,calc(40px * var(--ms-scale,1)))}
.lmx-ts-btn{min-width:max(200px,calc(236px * var(--ms-scale,1)));height:max(48px,calc(60px * var(--ms-scale,1)));justify-content:center;padding:0 max(22px,calc(30px * var(--ms-scale,1)));font-weight:500;letter-spacing:.22em;font-size:max(12px,calc(14px * var(--ms-scale,1))) !important;background:rgba(82,199,198,.03)}
.lmx-ts-btn .lmx-ms-btn-bar{position:absolute;left:10px;top:9px;bottom:9px;height:auto;width:2px;opacity:.95}

@media (min-width:1025px){
.lmx-ts-inner{display:grid;align-content:center;height:100%;min-height:100%}
}
@media (max-width:1024px){
.lmx-ts-inner{display:block !important;height:auto !important;min-height:0 !important;padding:90px var(--lmx-section-padding-x) 70px}
.lmx-ts-grid{grid-template-columns:minmax(0,1fr);gap:30px}
.lmx-ts-title{font-size:42px !important;max-width:none}
.lmx-ts-stagewrap .lmx-b7-stage{width:100%;max-width:560px;margin:0 auto}
.lmx-ts-ctas{flex-direction:column;align-items:stretch;gap:14px;margin-top:26px}
.lmx-ts-btn{width:100%;max-width:360px;min-width:0;height:56px}
}
@media (max-width:680px){
.lmx-ts-inner{padding:70px var(--lmx-section-padding-x) 50px}
.lmx-ts-title{font-size:32px !important}
}