/* =========================================================================
 * Home 2026-10-21, block 10 — "The Customers".
 *
 * A large card on the left (the photo when there is one, otherwise a quote
 * mark; the quote, the name, the role) and a 2×2 grid of small cards on the
 * right (avatar or initials, name, role, quote). Static — no carousel, no
 * counter. Sizes follow --cus-scale.
 * ====================================================================== */

.lmx-cus-inner{position:relative;width:100%;min-height:100vh;background:#0b0f12 !important;color:#fff;
  font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;padding:0 var(--lmx-section-padding-x);box-sizing:border-box;overflow:hidden;
  --cus-scale:1;--cus-accent:#52C7C6;--cus-dim:#a7b1b6}
.lmx-cus-inner *{box-sizing:border-box}

.lmx-cus-eyebrow{display:block;color:var(--cus-accent);font-size:max(10px,calc(12.5px * var(--cus-scale,1)));font-weight:600;letter-spacing:.3em;text-transform:uppercase;line-height:1.3}
.lmx-cus-title{margin:max(8px,calc(14px * var(--cus-scale,1))) 0 0 !important;max-width:24ch;font-family:'Outfit','Poppins',sans-serif !important;font-weight:600 !important;font-size:max(28px,calc(54px * var(--cus-scale,1))) !important;line-height:1.08 !important;letter-spacing:-.02em;color:#fff !important}

.lmx-cus-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:max(12px,calc(22px * var(--cus-scale,1)));margin-top:max(14px,calc(30px * var(--cus-scale,1)))}

/* --- the main card ---------------------------------------------------------- */
.lmx-cus-main{margin:0 !important;display:flex;flex-direction:column;min-width:0;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));overflow:hidden}
.lmx-cus-main-photo{aspect-ratio:16 / 10.5;overflow:hidden;background:#0a0e12} /* ground = the edge colour of the portrait, so the side bars of a contained square do not show a seam */
.lmx-cus-main-photo img{width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block} /* the whole portrait, never cropped */
.lmx-cus-main-mark{display:block;width:max(34px,calc(54px * var(--cus-scale,1)));margin:max(22px,calc(40px * var(--cus-scale,1))) max(18px,calc(32px * var(--cus-scale,1))) 0;color:var(--cus-accent);opacity:.85}
.lmx-cus-main-mark svg{width:100%;height:auto;display:block}
.lmx-cus-main--nophoto{justify-content:center}
.lmx-cus-main-quote{margin:max(14px,calc(26px * var(--cus-scale,1))) max(18px,calc(32px * var(--cus-scale,1))) 0 !important;padding:0 !important;border:0 !important}
.lmx-cus-main-quote p{margin:0 !important;font-family:'Outfit','Poppins',sans-serif !important;font-weight:400 !important;font-size:max(20px,calc(30px * var(--cus-scale,1))) !important;line-height:1.3 !important;letter-spacing:-.01em;color:#fff !important}
.lmx-cus-main--nophoto .lmx-cus-main-quote p{font-size:max(22px,calc(36px * var(--cus-scale,1))) !important}
.lmx-cus-main-who{display:flex;flex-direction:column;gap:2px;margin:max(14px,calc(26px * var(--cus-scale,1))) max(18px,calc(32px * var(--cus-scale,1))) max(18px,calc(30px * var(--cus-scale,1)));padding-top:max(12px,calc(22px * var(--cus-scale,1)));border-top:1px solid rgba(255,255,255,.14)}
.lmx-cus-name{font-family:'Outfit','Poppins',sans-serif;font-weight:500;font-size:max(15px,calc(21px * var(--cus-scale,1)));line-height:1.3;color:#fff}
.lmx-cus-role{font-size:max(12px,calc(15px * var(--cus-scale,1)));line-height:1.35;font-weight:300;color:var(--cus-dim)}

/* --- the small cards ----------------------------------------------------------- */
.lmx-cus-cards{list-style:none;margin:0 !important;padding:0 !important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:max(12px,calc(22px * var(--cus-scale,1)))}
.lmx-cus-card{margin:0 !important;min-width:0}
.lmx-cus-card figure{margin:0 !important;display:flex;flex-direction:column;height:100%;padding:max(14px,calc(24px * var(--cus-scale,1))) max(14px,calc(26px * var(--cus-scale,1)));border:1px solid rgba(255,255,255,.14);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015))}
.lmx-cus-card-who{display:flex;align-items:center;gap:max(10px,calc(18px * var(--cus-scale,1)));padding-bottom:max(10px,calc(18px * var(--cus-scale,1)));border-bottom:1px solid rgba(255,255,255,.14)}
.lmx-cus-avatar{flex:0 0 auto;width:max(44px,calc(72px * var(--cus-scale,1)));height:max(44px,calc(72px * var(--cus-scale,1)));border-radius:50%;object-fit:cover;background:#1c2328;border:1px solid rgba(255,255,255,.12)}
/* the Elementor-era reset .lmx-home img{border-radius:0} (home/page.css, weight 0,1,1) outranked the single class: photo avatars were square (2026-10-26) */
.lmx-home img.lmx-cus-avatar,.lmx-cp img.lmx-cus-avatar{border-radius:50%} /* .lmx-ms img{border-radius:0} does the same on other pages (Company) */
.lmx-cp .lmx-cus-main-photo img{height:100%}
.lmx-cus-avatar--initials{display:grid;place-items:center;font-family:'Outfit','Poppins',sans-serif;font-weight:500;font-size:max(15px,calc(24px * var(--cus-scale,1)));letter-spacing:.04em;color:#dfe6e8;background:radial-gradient(circle at 35% 30%,#2b353b,#161c20)}
.lmx-cus-card-meta{display:flex;flex-direction:column;min-width:0}
.lmx-cus-card-meta .lmx-cus-name{font-size:max(14px,calc(19px * var(--cus-scale,1)))}
.lmx-cus-card-meta .lmx-cus-role{font-size:max(12px,calc(14px * var(--cus-scale,1)))}
.lmx-cus-card-quote{margin:max(10px,calc(18px * var(--cus-scale,1))) 0 0 !important;padding:0 !important;border:0 !important}
.lmx-cus-card-quote p{margin:0 !important;font-size:max(13px,calc(17px * var(--cus-scale,1))) !important;line-height:1.5 !important;font-weight:300;color:#e8eef0 !important}

.lmx-cus-ctas{margin-top:max(14px,calc(26px * var(--cus-scale,1)))}
.lmx-cus-btn{--lmx-v2-scale:var(--cus-scale,1);border-radius:3px;font-size:max(13px,calc(16px * var(--cus-scale,1))) !important;font-weight:500;letter-spacing:.01em}

/* --- desktop --------------------------------------------------------------------- */
@media (min-width:1025px){
.lmx-cus-inner{display:grid;align-content:center;height:100%;min-height:100%;padding-top:max(12px,calc(24px * var(--cus-scale,1)));padding-bottom:max(12px,calc(24px * var(--cus-scale,1)))}
/* The section is one screen and page.js fits it by --cus-scale, but the photo's height came from the column
   width (aspect-ratio) and did not follow the scale: with the Eduard Pieters photo (2026-10-26) the block grew
   past a laptop window and the «Read the case studies» button fell below the edge (the section is clipped,
   not scrolled). The photo is capped by the viewport height and the face band is kept when it is cropped. */
.lmx-cus-main-photo{flex:0 0 auto;max-height:min(36vh,calc(380px * var(--cus-scale,1)))}
}
/* Short laptop windows (2026-10-26, evening): at 1366×768 with the browser UI the section gets ≈550px, and the
   px floors of the small cards (padding 14, avatar 44, 13px/1.5 quotes of 3–4 lines, two rows) add up to more
   than that even at the minimum scale 0.4 — the «Read the case studies» button stayed 19px past the edge.
   Lower floors here only; wider windows are untouched. */
@media (min-width:1025px) and (max-height:700px){
.lmx-cus-inner{padding-top:8px;padding-bottom:8px}
.lmx-cus-title{font-size:max(22px,calc(54px * var(--cus-scale,1))) !important;margin-top:6px !important}
.lmx-cus-grid{margin-top:max(10px,calc(30px * var(--cus-scale,1)));gap:max(10px,calc(22px * var(--cus-scale,1)))}
.lmx-cus-cards{gap:max(10px,calc(22px * var(--cus-scale,1)))}
.lmx-cus-card figure{padding:max(10px,calc(24px * var(--cus-scale,1))) max(12px,calc(26px * var(--cus-scale,1)))}
.lmx-cus-card-who{gap:max(8px,calc(18px * var(--cus-scale,1)));padding-bottom:max(8px,calc(18px * var(--cus-scale,1)))}
.lmx-cus-avatar{width:max(38px,calc(72px * var(--cus-scale,1)));height:max(38px,calc(72px * var(--cus-scale,1)))}
.lmx-cus-card-quote{margin-top:max(8px,calc(18px * var(--cus-scale,1))) !important}
.lmx-cus-card-quote p{font-size:max(12px,calc(17px * var(--cus-scale,1))) !important;line-height:1.42 !important}
.lmx-cus-main-quote p{font-size:max(17px,calc(30px * var(--cus-scale,1))) !important}
.lmx-cus-main-who{margin-top:max(10px,calc(26px * var(--cus-scale,1)));margin-bottom:max(12px,calc(30px * var(--cus-scale,1)));padding-top:max(8px,calc(22px * var(--cus-scale,1)))}
.lmx-cus-ctas{margin-top:max(10px,calc(24px * var(--cus-scale,1)))}
}

/* --- narrow screens ----------------------------------------------------------------- */
@media (max-width:1024px){
.lmx-cus-inner{display:block !important;height:auto !important;min-height:0 !important;padding:90px 42px 70px}
.lmx-cus-title{font-size:38px !important;max-width:none}
.lmx-cus-grid{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:30px}
.lmx-cus-cards{gap:16px}
.lmx-cus-ctas{margin-top:28px}
}
@media (max-width:640px){
.lmx-cus-inner{padding:70px 24px 50px}
.lmx-cus-title{font-size:30px !important}
.lmx-cus-cards{grid-template-columns:minmax(0,1fr)}
.lmx-cus-main-quote p{font-size:22px !important}
.lmx-cus-main--nophoto .lmx-cus-main-quote p{font-size:24px !important}
}

/* ---- pages with their own number of testimonials (Use Case, 2026-10-28) -----------------------------------------
   The home has 1 + 4. Elsewhere the first testimonial is the main card and the rest fill the grid without empty
   cells: 1–2 small cards stand in ONE column, an odd last card takes the full width, no small cards — the main card
   alone, centred. A main card without a big photo shows the avatar (the company logo of the old «book» or the
   initials) beside the name; a logo that is not square is fitted whole on a light disc. */
.lmx-cus-cards[data-count="1"],.lmx-cus-cards[data-count="2"]{grid-template-columns:minmax(0,1fr)}
.lmx-cus-cards[data-count="1"] > .lmx-cus-card:last-child:nth-child(odd){grid-column:auto}
.lmx-cus-cards:not([data-count="1"]):not([data-count="2"]) > .lmx-cus-card:last-child:nth-child(odd){grid-column:1 / -1}
.lmx-cus-grid:not(:has(.lmx-cus-cards)){grid-template-columns:minmax(0,860px);justify-content:start}
.lmx-cus-main-who--avatar{flex-direction:row;align-items:center;gap:max(12px,calc(16px * var(--cus-scale,1)))}
.lmx-cus-main-who--avatar .lmx-cus-avatar{width:max(44px,calc(60px * var(--cus-scale,1)));height:max(44px,calc(60px * var(--cus-scale,1)))}
.lmx-cus-main-who-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.lmx-cus-avatar--logo{object-fit:contain !important;background:#f2f4f6 !important;padding:max(6px,calc(9px * var(--cus-scale,1)));border-color:rgba(255,255,255,.3) !important}
@media (max-width:1024px){
.lmx-cus-cards[data-count="2"],.lmx-cus-cards[data-count="1"]{grid-template-columns:minmax(0,1fr)}
}

/* long quotes on the Use Case pages: the main quote steps down (the home phrase is short and stays at 30/36px);
   a lone small card or two do not stretch to the height of the main card */
.lmx-cus-main--mid .lmx-cus-main-quote p,.lmx-cus-main--mid.lmx-cus-main--nophoto .lmx-cus-main-quote p{font-size:max(17px,calc(25px * var(--cus-scale,1))) !important;line-height:1.35 !important}
.lmx-cus-main--long .lmx-cus-main-quote p,.lmx-cus-main--long.lmx-cus-main--nophoto .lmx-cus-main-quote p{font-size:max(15px,calc(19px * var(--cus-scale,1))) !important;line-height:1.5 !important}
.lmx-cus-cards[data-count="1"],.lmx-cus-cards[data-count="2"]{grid-auto-rows:auto;align-content:start}
/* the service-page frame resets img{border-radius:0} (.lmx-ms img): avatars stay round on every page */
.lmx-ms img.lmx-cus-avatar{border-radius:50%}
.lmx-cus-avatar--logo{padding:max(4px,calc(6px * var(--cus-scale,1)))}