/* =========================================================================
 * Block 10 — “Every Second Counts”.
 *
 * Top to bottom: the eyebrow, the heading, the description, three counters in
 * a row with dividers and, below them, a path of five steps on a dark dome.
 *
 * The dome is an enormous circle of which only the very top enters the frame.
 * The 460%-of-block-width diameter was not guessed: in the reference the dome
 * drops by about 11% of that width across half of it, and for a circle the
 * sagitta is ≈ L² / 2R, which gives R ≈ 2.3 widths. That is why all the
 * gradient stops of its body are squeezed into the first percent — only that
 * strip is visible.
 *
 * The digits spin on drums: every place has its own 0–9 ribbon, a cell of
 * fixed width and overflow:hidden. The cell width in em and tabular-nums are
 * there so that scrolling does not move the neighbouring places and the
 * labels. The ribbon position comes from --p, written by
 * block10-counters.js.
 * ====================================================================== */

.lmx-b10-inner{position:relative;width:100%;min-height:100vh;background:#000 !important;
  font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;
  padding:0 var(--b10-pad-x);box-sizing:border-box;overflow:hidden;
  --b10-pad-x:var(--lmx-section-padding-x);
  --block10-scale:1;
  --lmx-h1-font-family:'Outfit','Poppins',sans-serif;
  --b10-accent:#52C7C6;
  --b10-accent-hi:#6fe9e4;
  --b10-ink:#c9ced2;
  --b10-dim:#8b9195;
  /* drum cell height; the same value in transform, otherwise the ribbon drifts */
  --b10-cell:1.16em}
.lmx-b10-inner *{box-sizing:border-box}

/* A soft teal glow behind the counters — in the reference it is barely
   noticeable and holds the upper half so that it does not read as flat
   black. */
.lmx-b10-inner::before{content:'';position:absolute;left:50%;top:18%;
  width:120%;height:52%;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(82,199,198,.10) 0%,rgba(82,199,198,.04) 42%,rgba(82,199,198,0) 72%)}

.lmx-b10-head,.lmx-b10-counters,.lmx-b10-flow{position:relative;z-index:1}

/* --- header --------------------------------------------------------------- */
.lmx-b10-head{text-align:center}
.lmx-b10-eyebrow{display:block;color:var(--b10-accent);
  font-size:max(9px,calc(14px * var(--block10-scale,1)));font-weight:700;
  letter-spacing:.34em;text-transform:uppercase}
.lmx-b10-title{margin:max(8px,calc(18px * var(--block10-scale,1))) 0 0 !important;
  font-family:var(--lmx-h1-font-family) !important;font-weight:300 !important;
  font-size:max(28px,calc(88px * var(--block10-scale,1))) !important;
  line-height:1.04 !important;letter-spacing:-.005em;color:#d5d9dc !important}
.lmx-b10-desc{margin:max(8px,calc(18px * var(--block10-scale,1))) auto 0 !important;
  max-width:calc(830px * var(--block10-scale,1));
  font-size:max(12px,calc(21px * var(--block10-scale,1))) !important;
  line-height:1.45 !important;font-weight:300;color:var(--b10-dim) !important}

/* --- counters ------------------------------------------------------------- */
.lmx-b10-counters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;max-width:calc(1010px * var(--block10-scale,1));
  margin:max(16px,calc(46px * var(--block10-scale,1))) auto 0}
.lmx-b10-counter{position:relative;text-align:center;
  padding:0 max(8px,calc(22px * var(--block10-scale,1)))}
/* The dividers are thin vertical strokes between the columns, as in the
   reference: they run the full height of the counter, label included. */
.lmx-b10-counter+.lmx-b10-counter::before{content:'';position:absolute;left:0;top:4%;bottom:2%;
  width:1px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.16) 22%,rgba(255,255,255,.16) 78%,rgba(255,255,255,0))}

/* The number and the unit sit on one line: the unit is aligned to the bottom of the digits. */
.lmx-b10-value{display:flex;align-items:flex-end;justify-content:center;
  gap:max(2px,calc(6px * var(--block10-scale,1)))}
.lmx-b10-num{display:inline-flex;align-items:flex-end;
  font-family:var(--lmx-h1-font-family);font-weight:300;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1,'lnum' 1;
  font-size:max(38px,calc(104px * var(--block10-scale,1)));
  line-height:1;letter-spacing:-.01em;color:var(--b10-ink)}
.lmx-b10-reel{display:block;width:.63em;height:var(--b10-cell);overflow:hidden}
.lmx-b10-reel-strip{display:block;
  transform:translate3d(0,calc(var(--p,0) * var(--b10-cell) * -1),0);
  will-change:transform}
.lmx-b10-reel-strip>span{display:grid;place-items:center;height:var(--b10-cell)}
.lmx-b10-sep{display:block;height:var(--b10-cell);line-height:var(--b10-cell)}
.lmx-b10-unit{color:var(--b10-accent);font-weight:500;
  font-size:max(11px,calc(26px * var(--block10-scale,1)));line-height:1;
  padding-bottom:max(6px,calc(16px * var(--block10-scale,1)))}
.lmx-b10-caption{margin:max(2px,calc(8px * var(--block10-scale,1))) 0 0 !important;
  font-size:max(11px,calc(21px * var(--block10-scale,1))) !important;
  line-height:1.3 !important;font-weight:300;color:#9aa0a4 !important}

/* --- dome ------------------------------------------------------------------
   Only the top of the circle enters the frame, so the gradient stops of its
   body are measured in fractions of a percent: the visible band is about 5% of
   its height. */
/* The wrapper is required, not decorative: the dome itself is several thousand
   pixels tall, and without its own overflow:hidden it would count towards the
   section's scrollHeight. The page engine measures the content exactly that
   way and squeezed the whole block in half while fitting it to the screen. */
/* Out past the side padding of the section: in the reference the dome runs off
   both edges of the screen, and when it was clipped to the content column it
   produced a visible horizontal cut in the light band under the rim. */
.lmx-b10-domewrap{position:absolute;top:0;bottom:-8%;
  left:calc(-1 * var(--b10-pad-x));right:calc(-1 * var(--b10-pad-x));
  overflow:hidden;pointer-events:none;z-index:0}
.lmx-b10-dome{position:absolute;left:50%;top:0;width:460%;aspect-ratio:1/1;
  transform:translateX(-50%);border-radius:50%;display:block;
  background:
    radial-gradient(30% 2.4% at 50% 0%,rgba(82,199,198,.20) 0%,rgba(82,199,198,0) 100%),
    linear-gradient(180deg,
      #33373b 0%,
      #202327 .14%,
      #131619 .38%,
      #090b0d .72%,
      #000 1.5%)}
/* The rim. A border-top on a circle fades towards the sides by itself and the
   mask finishes the job: in the reference it is brightest at the apex. */
.lmx-b10-dome::after{content:'';position:absolute;inset:0;border-radius:50%;
  border-top:2px solid rgba(255,255,255,.60);
  -webkit-mask-image:linear-gradient(90deg,transparent 34%,#000 44%,#000 56%,transparent 66%);
  mask-image:linear-gradient(90deg,transparent 34%,#000 44%,#000 56%,transparent 66%)}
.lmx-b10-dome::before{content:'';position:absolute;left:50%;top:0;
  width:30%;height:1.2%;transform:translate(-50%,-45%);border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(190,240,240,.20) 0%,rgba(82,199,198,0) 70%)}

/* --- the path of five steps ------------------------------------------------- */
/* The top of this block is the apex of the dome. The rings step down from it
   exactly as they do in the reference. */
.lmx-b10-flow{position:relative;
  margin-top:max(30px,calc(78px * var(--block10-scale,1)));
  padding-top:max(38px,calc(104px * var(--block10-scale,1)))}
.lmx-b10-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  position:relative;z-index:1;margin:0 !important;padding:0 !important;list-style:none}
/* The line runs from the centre of the first ring to the centre of the last:
   with five equal columns that is exactly 10% and 90% of the width. */
.lmx-b10-steps::before{content:'';position:absolute;left:10%;right:10%;
  top:calc(max(26px,calc(46px * var(--block10-scale,1))) / 2 - 1px);
  height:2px;background:var(--b10-accent);
  box-shadow:0 0 10px rgba(82,199,198,.55)}
.lmx-b10-step{display:grid;align-content:start;justify-items:center;
  text-align:center;margin:0 !important;
  padding:0 max(4px,calc(14px * var(--block10-scale,1)))}
.lmx-b10-ring{position:relative;z-index:1;
  display:grid;place-items:center;
  width:max(26px,calc(46px * var(--block10-scale,1)));
  height:max(26px,calc(46px * var(--block10-scale,1)));
  border:2px solid var(--b10-accent);border-radius:50%;
  /* The fill is opaque: the line passes behind the rings and must not
     show through them. The tone is taken from the dome at this height. */
  background:#080b0d;
  box-shadow:0 0 12px rgba(82,199,198,.35);
  font-family:var(--lmx-h1-font-family);font-weight:300;
  font-size:max(13px,calc(22px * var(--block10-scale,1)));
  line-height:1;color:#e6eaec}
.lmx-b10-step-title{margin:max(10px,calc(26px * var(--block10-scale,1))) 0 0 !important;
  font-family:var(--lmx-h1-font-family) !important;font-weight:300 !important;
  font-size:max(15px,calc(24px * var(--block10-scale,1))) !important;
  line-height:1.2 !important;color:#d5d9dc !important}
.lmx-b10-step-text{margin:max(4px,calc(12px * var(--block10-scale,1))) 0 0 !important;
  max-width:calc(230px * var(--block10-scale,1));
  font-size:max(11px,calc(15px * var(--block10-scale,1))) !important;
  line-height:1.5 !important;font-weight:300;color:#7e8488 !important}

/* --- desktop ----------------------------------------------------------------
   The section is exactly one screen tall: the header and the counters on top,
   the path takes the rest. */
@media (min-width:1025px){
.lmx-b10-inner{display:grid;grid-template-rows:auto auto 1fr;align-content:start;
  height:100%;min-height:100%;
  padding-top:max(18px,calc(42px * var(--block10-scale,1)));
  padding-bottom:max(14px,calc(28px * var(--block10-scale,1)))}
}

/* --- tablet and phone -------------------------------------------------------
   The path unfolds into a vertical list: five columns of text turn into
   unreadable strips on a narrow screen. The order of the steps is kept. */
@media (max-width:1024px){
.lmx-b10-inner{display:block !important;height:auto !important;min-height:0 !important;
  --b10-pad-x:42px;padding:90px var(--b10-pad-x) 70px}
.lmx-b10-title{font-size:38px !important}
.lmx-b10-desc{font-size:17px !important;max-width:620px}
.lmx-b10-num{font-size:64px}
.lmx-b10-unit{font-size:16px;padding-bottom:9px}
.lmx-b10-caption{font-size:14px !important}
.lmx-b10-counters{margin-top:34px;max-width:680px}
.lmx-b10-dome{width:620%}
.lmx-b10-flow{margin-top:44px;padding-top:64px}
}
@media (max-width:860px){
.lmx-b10-steps{grid-template-columns:1fr;gap:26px}
/* A vertical line to the left of the column of rings. */
.lmx-b10-steps::before{left:23px;right:auto;top:26px;bottom:26px;
  width:2px;height:auto}
.lmx-b10-step{grid-template-columns:auto 1fr;justify-items:start;text-align:left;
  column-gap:18px;padding:0}
.lmx-b10-ring{grid-row:span 2;width:48px;height:48px;font-size:20px}
.lmx-b10-step-title{margin-top:2px !important;font-size:20px !important}
.lmx-b10-step-text{margin-top:4px !important;max-width:none}
}
@media (max-width:680px){
.lmx-b10-inner{--b10-pad-x:24px;padding:70px var(--b10-pad-x) 50px}
.lmx-b10-title{font-size:29px !important}
.lmx-b10-desc{font-size:15px !important}
.lmx-b10-eyebrow{font-size:11px;letter-spacing:.26em}
.lmx-b10-num{font-size:44px}
.lmx-b10-unit{font-size:12px;padding-bottom:6px}
.lmx-b10-caption{font-size:11px !important}
.lmx-b10-counter{padding:0 6px}
.lmx-b10-counters{margin-top:26px}
.lmx-b10-flow{padding-top:52px}
.lmx-b10-steps::before{left:19px}
.lmx-b10-ring{width:40px;height:40px;font-size:17px}
.lmx-b10-step{column-gap:14px}
.lmx-b10-step-title{font-size:18px !important}
.lmx-b10-step-text{font-size:13px !important}
}

/* Less motion: the drums do not spin and the numbers are final at once — that
   is handled by JS; here we only calm the glows that could flicker. */
@media (prefers-reduced-motion:reduce){
.lmx-b10-reel-strip{transition:none !important}
}