/* =========================================================================
 * Our Story — block 5, “Active Defense Is Born.” (2026-09-24).
 *
 * A dark section in the service-page tokens: on the left the eyebrow, the H2
 * and the “shift” pairs (from → to) in pill frames, on the right the lead and
 * the paragraphs along a thin line with nodes. Text widths are in px (not in
 * the scale): --ms-scale fitting shrinks sizes and spacing rather than wrapping
 * the text tighter (see “the scale fitting trap” in CLAUDE.md). The section is
 * static: no animations, no rAF.
 * ====================================================================== */

.lmx-ab-inner{position:relative;width:100%;min-height:100vh;display:grid;align-content:center;
  background:#050708 !important;color:#fff;
  font-family:var(--lmx-ms-font,'Hanken Grotesk',Helvetica,Arial,sans-serif);
  padding:max(36px,calc(64px * var(--ms-scale,1))) var(--lmx-section-padding-x);box-sizing:border-box;overflow:hidden;
  --ab-accent:#52C7C6;--ab-accent-hi:#9ff1ef;--ab-text:rgba(255,255,255,.82);--ab-muted:rgba(255,255,255,.55);--ab-line:rgba(82,199,198,.28)}
.lmx-ab-inner *{box-sizing:border-box;min-width:0}

/* Background: the grid, a teal halo behind the left column, the “mirage” rings at the bottom left. */
.lmx-ab-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(46% 52% at 16% 42%,rgba(82,199,198,.16),rgba(82,199,198,0) 70%),radial-gradient(38% 40% at 92% 92%,rgba(82,199,198,.07),rgba(82,199,198,0) 70%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 64px)}
.lmx-ab-rings{position:absolute;left:-6%;bottom:-18%;width:min(46vw,640px);aspect-ratio:1;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(82,199,198,.16) 0 1px,transparent 1px 44px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 72%);mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 72%);opacity:.7}

.lmx-ab-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center;gap:max(28px,calc(72px * var(--ms-scale,1)))}

/* --- left column ------------------------------------------------------------- */
.lmx-ab-eyebrow{margin:0 !important;font-family:var(--lmx-ms-font) !important;font-weight:600;font-size:max(11px,calc(13px * var(--ms-scale,1))) !important;letter-spacing:.34em;text-transform:uppercase;color:var(--ab-accent) !important;line-height:1.4 !important}
.lmx-ab-title{margin:max(10px,calc(18px * var(--ms-scale,1))) 0 0 !important;max-width:11ch;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:300 !important;font-size:max(34px,min(calc(62px * var(--ms-scale,1)),4vw)) !important;line-height:1.02 !important;letter-spacing:-.025em;color:#fff !important;text-wrap:balance}

/* The shift pairs: “from → to” in a frame, with “to” in teal. */
.lmx-ab-shifts{list-style:none;margin:max(18px,calc(34px * var(--ms-scale,1))) 0 0;padding:0;display:flex;flex-direction:column;gap:max(8px,calc(12px * var(--ms-scale,1)))}
.lmx-ab-shift{display:inline-flex;align-items:center;gap:max(10px,calc(14px * var(--ms-scale,1)));width:fit-content;max-width:100%;margin:0;padding:max(8px,calc(11px * var(--ms-scale,1))) max(14px,calc(18px * var(--ms-scale,1)));border:1px solid rgba(255,255,255,.12);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));font-family:var(--lmx-ms-font);font-size:max(11px,calc(12.5px * var(--ms-scale,1)));font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.2}
.lmx-ab-shift-from{color:var(--ab-muted);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35);text-decoration-thickness:1px}
.lmx-ab-shift-arrow{display:inline-flex;width:18px;height:18px;color:var(--ab-accent);flex:0 0 auto}
.lmx-ab-shift-arrow svg{width:100%;height:100%}
.lmx-ab-shift-to{color:var(--ab-accent-hi);text-shadow:0 0 12px rgba(82,199,198,.45)}

/* --- right column ------------------------------------------------------------ */
.lmx-ab-body{position:relative;max-width:640px;padding-left:max(18px,calc(28px * var(--ms-scale,1)));border-left:1px solid var(--ab-line)}
.lmx-ab-body::before{content:'';position:absolute;left:-5px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--ab-accent);box-shadow:0 0 12px rgba(82,199,198,.9)}
.lmx-ab-lead{margin:0 0 max(12px,calc(20px * var(--ms-scale,1))) !important;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:400 !important;font-size:max(17px,calc(22px * var(--ms-scale,1))) !important;line-height:1.4 !important;letter-spacing:-.005em;color:#fff !important}
.lmx-ab-text p{position:relative;margin:0 0 max(10px,calc(16px * var(--ms-scale,1))) !important;font-family:var(--lmx-ms-font) !important;font-weight:300;font-size:max(14px,calc(16px * var(--ms-scale,1))) !important;line-height:1.6 !important;color:var(--ab-text) !important}
.lmx-ab-text p:last-child{margin-bottom:0 !important}
.lmx-ab-text p::before{content:'';position:absolute;left:calc(-1 * max(18px,calc(28px * var(--ms-scale,1))) - 3px);top:.62em;width:5px;height:5px;border-radius:50%;background:rgba(82,199,198,.6)}

@media (max-width:1024px){
.lmx-ab-inner{min-height:0;display:block;padding:72px var(--lmx-section-padding-x) 56px}
.lmx-ab-grid{grid-template-columns:minmax(0,1fr);gap:28px}
.lmx-ab-title{font-size:38px !important;max-width:none}
.lmx-ab-rings{width:60vw;left:-20%;bottom:-10%}
}
@media (max-width:600px){
.lmx-ab-inner{padding:60px var(--lmx-section-padding-x) 44px}
.lmx-ab-title{font-size:32px !important}
.lmx-ab-shift{font-size:11px;letter-spacing:.1em}
}