/* =========================================================================
 * Home 2026-10-21, block 7 — "The Service": the seven-slab tower.
 *
 * Three columns: the text, the tower (the shared component, assets/css/
 * shared/layers-tower.css, scale bridged from --svc-scale to
 * --lmx-tower-scale), the card. The card is hidden until a slab is hovered,
 * focused or tapped (block7-service.js shows the matching one and writes its
 * vertical position, --svc-card-top, from the slab's box). Nothing is shown
 * on the right by default.
 * ====================================================================== */

.lmx-svc-inner{position:relative;width:100%;min-height:100vh;background:#000 !important;color:#fff;
  font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;padding:0 var(--lmx-section-padding-x);box-sizing:border-box;overflow:visible;
  --svc-scale:1;--lmx-tower-scale:var(--svc-scale,1);--svc-accent:#52C7C6}
.lmx-svc-inner *{box-sizing:border-box}
.lmx-svc-inner::before{content:'';position:absolute;left:50%;top:50%;width:70%;height:90%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(82,199,198,.09) 0%,rgba(82,199,198,.03) 45%,rgba(82,199,198,0) 72%)}

.lmx-svc-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr) minmax(0,.8fr);align-items:center;gap:max(16px,calc(36px * var(--svc-scale,1)))}

/* --- text ------------------------------------------------------------------- */
.lmx-svc-pill{display:inline-block;padding:max(6px,calc(9px * var(--svc-scale,1))) max(14px,calc(22px * var(--svc-scale,1)));border:1px solid rgba(82,199,198,.6);border-radius:999px;color:var(--svc-accent);font-size:max(10px,calc(12px * var(--svc-scale,1)));font-weight:700;letter-spacing:.24em;text-transform:uppercase;line-height:1.2}
.lmx-svc-title{margin:max(12px,calc(26px * var(--svc-scale,1))) 0 0 !important;font-family:'Outfit','Poppins',sans-serif !important;font-weight:300 !important;font-size:max(30px,min(calc(54px * var(--svc-scale,1)),3.4vw)) !important;line-height:1.08 !important;letter-spacing:-.015em;color:#fff !important}
.lmx-svc-desc{margin:max(12px,calc(26px * var(--svc-scale,1))) 0 0 !important;max-width:calc(470px * var(--svc-scale,1));font-size:max(13px,calc(17px * var(--svc-scale,1))) !important;line-height:1.6 !important;font-weight:300;color:rgba(255,255,255,.7) !important}
.lmx-svc-ctas{margin-top:max(14px,calc(30px * var(--svc-scale,1)))}
.lmx-svc-btn{--lmx-v2-scale:var(--svc-scale,1);font-size:max(13px,calc(16px * var(--svc-scale,1))) !important;font-weight:500;letter-spacing:.01em}

/* --- the tower ---------------------------------------------------------------- */
.lmx-svc-stage{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center}
.lmx-svc-tower.lmx-b7-stage{margin:0 auto;height:min(80vh,calc(760px * var(--lmx-tower-scale,1)))}
.lmx-svc-tower .lmx-b7-layer{outline:none}
.lmx-svc-tower .lmx-b7-layer:focus-visible img{filter:drop-shadow(0 0 0 2px #fff) drop-shadow(0 0 8px rgba(82,199,198,.9))}
.lmx-svc-tower .lmx-b7-face{font-weight:600;letter-spacing:.1em}
/* the list for narrow screens (printed after the stage): the role and the text instead of the tower callouts */
.lmx-svc-stage .lmx-b7-mlist{width:100%;margin-top:26px}
.lmx-svc-stage .lmx-b7-mlist-item{grid-template-columns:auto 1fr;padding:14px 0}
.lmx-svc-stage .lmx-b7-mlist-title{font-size:14px;letter-spacing:.14em;color:#fff}
.lmx-svc-stage .lmx-b7-mlist-desc{text-transform:none;letter-spacing:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.72);font-weight:300}

/* --- the card ------------------------------------------------------------------ */
.lmx-svc-cards{position:relative;min-height:max(160px,calc(240px * var(--svc-scale,1)))}
.lmx-svc-card{position:absolute;left:0;right:0;top:var(--svc-card-top,50%);transform:translateY(-50%);
  padding:max(16px,calc(26px * var(--svc-scale,1))) max(16px,calc(26px * var(--svc-scale,1)));
  border:1px solid rgba(82,199,198,.55);background:rgba(5,11,13,.92);box-shadow:0 18px 44px rgba(0,0,0,.5);
  animation:lmxSvcCard .25s ease}
.lmx-svc-card[hidden]{display:none}
@keyframes lmxSvcCard{from{opacity:0;transform:translateY(-50%) translateX(-8px)}to{opacity:1}}
.lmx-svc-card-num{display:block;color:var(--svc-accent);font-size:max(10px,calc(12px * var(--svc-scale,1)));font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.lmx-svc-card-dot{margin:0 .6em;opacity:.7}
.lmx-svc-card-role{margin:max(8px,calc(14px * var(--svc-scale,1))) 0 0 !important;font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif !important;font-weight:700 !important;font-size:max(13px,calc(16px * var(--svc-scale,1))) !important;letter-spacing:.14em;text-transform:uppercase;line-height:1.3 !important;color:#fff !important}
.lmx-svc-card-text{margin:max(6px,calc(10px * var(--svc-scale,1))) 0 0 !important;font-size:max(13px,calc(16px * var(--svc-scale,1))) !important;line-height:1.5 !important;font-weight:300;color:rgba(255,255,255,.78) !important}

/* --- desktop -------------------------------------------------------------------- */
@media (min-width:1025px){
.lmx-svc-inner{display:grid;align-content:center;height:100%;min-height:100%}
}
@media (max-width:1440px) and (min-width:1025px){
.lmx-svc-tower.lmx-b7-stage{height:min(70vh,calc(700px * var(--lmx-tower-scale,1)))}
}

/* --- narrow screens ------------------------------------------------------------------ */
@media (max-width:1024px){
.lmx-svc-inner{display:block !important;height:auto !important;min-height:0 !important;padding:90px 42px 70px}
.lmx-svc-grid{grid-template-columns:minmax(0,1fr);gap:30px}
/* the face labels follow the slab width (cqw); on a phone the slab is ~330px and the label fell under 9px */
.lmx-svc-tower .lmx-b7-face{font-size:max(10px,var(--fs,2.2cqw))}
.lmx-svc-title{font-size:42px !important}
.lmx-svc-desc{max-width:none;font-size:16px !important}
.lmx-svc-cards{display:none}
}
@media (max-width:680px){
.lmx-svc-inner{padding:70px 24px 50px}
.lmx-svc-title{font-size:32px !important}
}

@media (prefers-reduced-motion:reduce){
.lmx-svc-card{animation:none}
}

/* phones (2026-10-21, role names on the slabs): at the 10px floor the long labels (INCIDENT RESPONDERS,
   FORENSICS & MALWARE) are wider than the 34% face band — tighter tracking keeps them well inside the slab face */
@media (max-width:760px){
.lmx-svc-tower .lmx-b7-face{letter-spacing:.06em}
}