/* =========================================================================
 * Block 11 — testimonials as a book that opens.
 *
 * The geometry of the book was recovered from Figma node 37054:11514:
 *  - the open state is given there as two vector quads with the perspective
 *    baked in; from their corners the parameters of a live projection were
 *    recovered — perspective 1600px, a 517x451 page, open pages tilted ±26°;
 *  - the closed state is a render of the same pages folded towards the viewer
 *    by ±74° (the halves of the closed book are 143px wide = 517 * cos 74°,
 *    which agrees with the render), so opening is simply a rotation of the
 *    pages, with no swaps and no crossfades;
 *  - the page surface (page-flat.svg), the spine channel with its glow and the
 *    shadow (spine-channel.png, floor-shadow.png) are exports and crops of the
 *    node's layers.
 *
 * The stage is laid out in the design pixels of a 1240x660 canvas and scaled by
 * a single uniform scale (--b11-fit from JS), so the numbers below are stage
 * coordinates, not viewport ones. The stage inherits nothing from
 * --block11-scale — only the block header and the arrows do.
 * ====================================================================== */

.lmx-b11-inner{position:relative;width:100%;min-height:100vh;background:linear-gradient(160deg,#f7f8fa 0%,#eef0f3 55%,#e6e9ed 100%);font-family:'Outfit','Hanken Grotesk',Helvetica,Arial,sans-serif;padding:0 var(--lmx-section-padding-x);box-sizing:border-box;--block11-scale:1;--b11-accent:#52C7C6;--b11-ink:#20242a}
.lmx-b11-inner *{box-sizing:border-box}

/* --- block header -------------------------------------------------------- */
.lmx-b11-head{text-align:center;padding-top:max(14px,calc(34px * var(--block11-scale,1)))}
.lmx-b11-pill{display:inline-block;padding:max(7px,calc(12px * var(--block11-scale,1))) max(14px,calc(26px * var(--block11-scale,1)));background:#fff;border:1px solid #e2e5ea;border-radius:999px;box-shadow:0 2px 8px rgba(21,24,29,.05);color:#262b33;font-size:max(9px,calc(12px * var(--block11-scale,1)));font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.lmx-b11-title{margin:max(10px,calc(22px * var(--block11-scale,1))) 0 0 !important;font-family:'Outfit',sans-serif !important;font-weight:600 !important;font-size:max(26px,calc(46px * var(--block11-scale,1))) !important;line-height:1.14 !important;letter-spacing:-.01em;color:var(--b11-ink) !important}
.lmx-b11-sub{margin:max(4px,calc(10px * var(--block11-scale,1))) 0 0 !important;font-family:'Outfit',sans-serif;font-weight:300;font-size:max(14px,calc(23px * var(--block11-scale,1))) !important;color:#6a7078 !important}

/* --- stage --------------------------------------------------------------- */
.lmx-b11-stage{position:relative;display:flex;justify-content:center;margin-top:max(6px,calc(14px * var(--block11-scale,1)))}

/* overflow:hidden is not decorative: the stage inside is a fixed 1240x660
   design pixels, its SIZE IN THE FLOW does not depend on the scale, and
   without the clip it inflated the block's scrollHeight — the fitter in
   page.js decided the block never fits and squeezed it to the minimum. Nothing
   visible is cut: after the transform scale the stage matches this box pixel
   for pixel. */
.lmx-b11-book{position:relative;width:min(100%,max(700px,calc(1420px * var(--block11-scale,1))));aspect-ratio:1240/660;overflow:hidden}
/* The perspective is animated together with the opening: on a closed book it
   is weak (the silhouette is almost rectangular, as in the render), and while
   opening the camera “moves in” to 1600px — the flare of the open pages from
   the Figma quads. */
.lmx-b11-scene{position:absolute;left:50%;top:0;width:1240px;height:660px;margin-left:-620px;transform:scale(var(--b11-fit,1));transform-origin:50% 0;perspective:1600px;perspective-origin:620px 300px;transition:perspective 1.08s cubic-bezier(.32,.08,.18,1)}
.lmx-b11-scene.is-closed{perspective:3800px}

/* The backdrop: the shadow on the floor and the spine channel (crops of the
   Figma layer). */
/* The doubled selector on the images below is because of the `.lmx-home img`
   reset in page.css: its weight (0,1,1) would otherwise bring height:auto back
   and remove the rounding of the avatar. */
.lmx-b11-shadow-holder{position:absolute;left:140px;top:506px;width:960px;height:104px;transform-origin:50% 50%;transition:transform 1.08s cubic-bezier(.32,.08,.18,1),opacity 1.08s cubic-bezier(.32,.08,.18,1)}
.lmx-b11-inner .lmx-b11-floor-shadow{width:100%;height:100%;display:block;opacity:.95}
.lmx-b11-spine-holder{position:absolute;left:604px;top:74.5px;width:32px;height:451px;transform-origin:50% 50%;transition:transform 1.08s cubic-bezier(.32,.08,.18,1)}
.lmx-b11-inner .lmx-b11-spine{width:100%;height:100%;display:block}

/* The pages: live 3D. The pivot is the edge at the spine. The 32px gap between
   the edges comes from the reference (in the Figma vectors it is wider, 57, but
   there is no spine there at all; the look is guided by the render). */
/* The pair of box-shadows is the thickness of the slab (a hard bottom face) and
   a soft cast: in the reference the pages are “tablets” with volume, not
   sheets. The shadow is transformed together with the page, so in perspective
   it reads as the bottom face. */
.lmx-b11-page{position:absolute;top:74.5px;width:517px;height:451px;border-radius:24px;background:url(../../img/home/b11/page-flat.svg) 0 0/100% 100% no-repeat;box-shadow:0 11px 0 -3px #d9dce1,0 30px 44px rgba(21,24,29,.13);transition:transform 1.08s cubic-bezier(.32,.08,.18,1)}
.lmx-b11-page--left{left:87px;transform-origin:100% 50%;transform:rotateY(26deg)}
.lmx-b11-page--right{left:636px;transform-origin:0 50%;transform:rotateY(-26deg)}

/* The darkening of the halves in the closed state (as in the render) and the
   shadow of the sheet while it turns. */
.lmx-b11-page::before,
.lmx-b11-page::after{content:'';position:absolute;inset:0;border-radius:24px;opacity:0;transition:opacity 1.08s cubic-bezier(.32,.08,.18,1);pointer-events:none}
.lmx-b11-page--left::before{background:linear-gradient(105deg,rgba(21,24,29,.16),rgba(21,24,29,.07) 60%)}
.lmx-b11-page--right::before{background:linear-gradient(255deg,rgba(21,24,29,.10),rgba(21,24,29,.03) 60%)}
.lmx-b11-page--left::after{background:linear-gradient(to right,rgba(21,24,29,0) 55%,rgba(21,24,29,.20))}
.lmx-b11-page--right::after{background:linear-gradient(to left,rgba(21,24,29,0) 55%,rgba(21,24,29,.20))}
.lmx-b11-page::after{transition:opacity .5s ease}
.lmx-b11-book.is-flipping.is-flip-fwd .lmx-b11-page--left::after,
.lmx-b11-book.is-flipping.is-flip-back .lmx-b11-page--right::after{opacity:1}

/* --- closed book --------------------------------------------------------- */
.lmx-b11-scene.is-closed .lmx-b11-page--left{transform:translateX(8px) rotateY(-74deg)}
.lmx-b11-scene.is-closed .lmx-b11-page--right{transform:translateX(-8px) rotateY(74deg)}
.lmx-b11-scene.is-closed .lmx-b11-page::before{opacity:1}
.lmx-b11-scene.is-closed .lmx-b11-spine-holder{transform:scaleX(.5)}
.lmx-b11-scene.is-closed .lmx-b11-shadow-holder{transform:scaleX(.42)}

/* --- testimonial content ------------------------------------------------- */
.lmx-b11-page-content{position:absolute;inset:0;padding:44px 56px 40px;opacity:0;transition:opacity .42s ease .06s}
.lmx-b11-scene.is-settled .lmx-b11-page-content,
.lmx-b11-sheet .lmx-b11-page-content{opacity:1}

.lmx-b11-quote{font-family:'Outfit',sans-serif;color:#3d434b}
.lmx-b11-quote-head{display:flex;align-items:center;gap:20px}
/* In the testimonials this frame holds a company logo, not a portrait: a
   circle with object-fit:cover cut the sides off wide logos (the client
   pointed it out on a screenshot). The frame became a soft square, the logo
   fits in whole and gets inner padding so that it does not touch the edges.
   The size is unchanged — the neighbouring elements of the row did not move.
   Leadership portraits (leadership mode) stay in a circle: there the cropping
   is exactly right. */
.lmx-b11-inner .lmx-b11-avatar{width:78px;height:78px;border-radius:18px;object-fit:contain;padding:9px;box-sizing:border-box;flex:0 0 auto;background:#fff}
.lmx-b11-avatar--empty{display:block;background:radial-gradient(circle at 50% 38%,#fff 0 27%,#c3cad2 28% 45%,#fff 46%),#c3cad2}
.lmx-b11-name{margin:0 !important;font-family:'Outfit',sans-serif !important;font-weight:600 !important;font-size:22px !important;line-height:1.25 !important;color:var(--b11-ink) !important}
.lmx-b11-role{margin:4px 0 0 !important;font-weight:400;font-size:14.5px !important;line-height:1.35;color:#6a7078 !important}
.lmx-b11-quotemark{display:block;width:44px;margin:28px 0 14px;color:var(--b11-accent)}
.lmx-b11-quotemark svg{display:block;width:100%;height:auto}
.lmx-b11-text{margin:0 !important;font-weight:300;font-size:15.5px !important;line-height:1.62 !important;color:#3d434b !important;letter-spacing:.01em}

/* --- the turning sheet --------------------------------------------------- */
.lmx-b11-sheet{position:absolute;left:636px;top:74.5px;width:517px;height:451px;transform-origin:0 50%;transform:rotateY(-26deg);transform-style:preserve-3d;transition:transform .95s cubic-bezier(.4,.06,.16,1);display:none}
.lmx-b11-book.is-flipping .lmx-b11-sheet{display:block}
/* The final pose of the sheet is aligned with the plane of the left page: its
   axis is 32px further left than the right one, so a shift of the axis is added
   to the rotation. */
.lmx-b11-sheet.is-turned{transform:translateX(-32px) rotateY(-154deg)}

.lmx-b11-sheet-face{position:absolute;inset:0;border-radius:24px;background:url(../../img/home/b11/page-flat.svg) 0 0/100% 100% no-repeat;box-shadow:0 11px 0 -3px #d9dce1,0 24px 36px rgba(21,24,29,.12);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lmx-b11-sheet-face--back{transform:rotateY(180deg)}

/* The light across the sheet changes during the turn: the shadow at the spine
   flares up and fades within the animation — no timers are needed for it. */
.lmx-b11-sheet-face::after{content:'';position:absolute;inset:0;border-radius:24px;opacity:0;pointer-events:none;background:linear-gradient(to right,rgba(21,24,29,.20),rgba(21,24,29,0) 30%)}
.lmx-b11-sheet-face--back::after{background:linear-gradient(to left,rgba(21,24,29,.20),rgba(21,24,29,0) 30%)}
.lmx-b11-book.is-flipping .lmx-b11-sheet-face::after{animation:lmx-b11-sheet-shade .95s cubic-bezier(.4,.06,.16,1)}
@keyframes lmx-b11-sheet-shade{0%{opacity:0}45%{opacity:.9}100%{opacity:0}}

/* --- navigation under the book -------------------------------------------
   The composition of block 4: a back arrow, the numbering and the dots in the
   middle, a forward arrow. The dot and spacing values are taken from
   block4-carousel.css one to one. Alignment follows the book: the footer sits
   in the same flex column as it does. */
.lmx-b11-arrow{--lmx-arrow-scale:var(--block11-scale,1)}
.lmx-b11-footer{display:flex;justify-content:center;margin-top:max(4px,calc(10px * var(--block11-scale,1)))}
.lmx-b11-nav{display:flex;align-items:center;gap:max(14px,calc(22px * var(--block11-scale,1)))}
.lmx-b11-nav-center{display:flex;flex-direction:column;align-items:center;gap:max(4px,calc(7px * var(--block11-scale,1)))}
.lmx-b11-counter{display:flex;align-items:baseline;gap:7px;font-family:'Outfit',sans-serif}
.lmx-b11-counter-num{font-weight:300;font-size:max(24px,calc(38px * var(--block11-scale,1)));color:#15181d;line-height:1}
.lmx-b11-counter-sep,
.lmx-b11-counter-total{font-weight:400;font-size:max(11px,calc(14px * var(--block11-scale,1)));color:#8a8e96}
.lmx-b11-dots{display:flex;align-items:center;gap:8px}
.lmx-b11-dot{width:7px;height:7px;border-radius:4px;background:rgba(21,24,29,.22);border:none;padding:0;cursor:pointer;transition:background .2s ease,width .2s ease}
.lmx-b11-dot.is-active{width:22px;background:#15181d}
.lmx-b11-dot:focus-visible{outline:2px solid #15181d;outline-offset:3px}

@media (min-width:1025px){
.lmx-b11-inner{display:grid;grid-template-rows:auto 1fr;align-content:start}
.lmx-b11-stage{align-self:center;flex-direction:column;align-items:center}

/* --- a single testimonial: one sheet in the middle -------------------------
   Most Use Cases pages of the old site have exactly one testimonial. On a
   spread the second page is then empty and looks like lost text, so in this
   mode there is no spread: the spine and the right page are removed and the
   left one stands frontally in the middle of the stage
   (1240 − 517 = 723 / 2 = 361.5). The floor shadow shrinks to the width of one
   sheet. The markup and the order of the cards do not change — only the pose of
   the stage. */
.lmx-b11-book--single .lmx-b11-page--right,
.lmx-b11-book--single .lmx-b11-spine-holder{display:none}
.lmx-b11-book--single .lmx-b11-page--left{left:361px;transform-origin:50% 50%;transform:none}
.lmx-b11-book--single .lmx-b11-page--left::after{display:none}
.lmx-b11-book--single .lmx-b11-shadow-holder{left:50%;width:46%;margin-left:-23%;transform:none}
/* The closed pose is a light tilt with transparency, as on narrow screens: the
   old rotateY(-74deg) folded a single sheet into a strip. */
.lmx-b11-book--single .lmx-b11-scene.is-closed .lmx-b11-page--left{transform:translateY(14px) rotateY(-12deg);opacity:0}
.lmx-b11-book--single .lmx-b11-scene.is-closed .lmx-b11-shadow-holder{transform:scaleX(.6)}
}

/* Screen-reader text about the current spread. */
.lmx-b11-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Transitions reset instantly for one frame (see the JS). */
.lmx-b11-scene.no-anim,
.lmx-b11-scene.no-anim *,
.lmx-b11-sheet.no-anim{transition:none !important;animation:none !important}

/* --- narrow screens: one page per step ----------------------------------- */
@media (max-width:1024px){
/* 16px side padding: a page of the book takes about calc(100vw - 32px). */
.lmx-b11-inner{min-height:0;height:auto;padding:84px 16px 64px}
.lmx-b11-title{font-size:30px !important}
.lmx-b11-sub{font-size:16px !important}
.lmx-b11-stage{flex-direction:column;align-items:center;margin-top:24px}
/* On narrow screens the stage is in the flow and the shadow leaves the box —
   no clip is needed (and scrollHeight is honest here: the stage height is set
   by the content). */
.lmx-b11-book{width:min(100%,560px);aspect-ratio:auto;overflow:visible}
.lmx-b11-scene{position:relative;left:0;top:0;width:100%;height:auto;margin-left:0;transform:none;perspective:1400px;perspective-origin:50% 50%}

.lmx-b11-shadow-holder{left:6%;top:auto;bottom:-26px;width:88%;height:44px;transform:none}
.lmx-b11-spine-holder{left:-7px;top:8px;width:12px;height:calc(100% - 16px);transform:none;border-radius:6px;overflow:hidden}

.lmx-b11-page{position:relative;top:0;width:100%;height:auto;min-height:300px;transform:none;transition:transform .9s cubic-bezier(.32,.08,.18,1),opacity .7s ease}
.lmx-b11-page--left{display:none}
.lmx-b11-page--right{left:0;transform-origin:0 50%;transform:none}
/* The closed pose without the strong rotation: rotateY(-72deg) folded the page
   into a narrow strip at the left edge, and any time that state got stuck (a
   tall section that never reached the IntersectionObserver threshold) it looked
   like broken layout. “Closed” is now a light tilt with transparency, and the
   final stable state is always frontal (transform:none). */
.lmx-b11-scene.is-closed .lmx-b11-page--right{opacity:0;transform:translateY(16px) rotateY(-14deg)}
.lmx-b11-scene.is-closed .lmx-b11-shadow-holder{transform:scaleX(.5)}
.lmx-b11-scene.is-closed .lmx-b11-spine-holder{transform:none}

.lmx-b11-page-content{position:relative;inset:auto;padding:30px 26px 28px}
.lmx-b11-inner .lmx-b11-avatar,.lmx-b11-inner .lmx-b11-avatar--empty{width:58px;height:58px}
.lmx-b11-name{font-size:18.5px !important}
.lmx-b11-role{font-size:13.5px !important}
.lmx-b11-quotemark{width:36px;margin:20px 0 10px}
.lmx-b11-text{font-size:15px !important;line-height:1.6 !important}

/* On mobile the sheet turns around the left edge of the page; past the edge
   (90°) the face fades by itself through backface-visibility. The duration is
   shorter than the base one: the script's safety timer (900 ms) has to fire
   AFTER transitionend, not before it. */
.lmx-b11-sheet{left:0;top:0;width:100%;height:100%;transform:rotateY(0);transition-duration:.8s}
.lmx-b11-sheet.is-turned{transform:rotateY(0)}
.lmx-b11-sheet.is-half{transform:rotateY(-104deg)}
.lmx-b11-sheet .lmx-b11-page-content{position:absolute;inset:0;overflow:hidden}

.lmx-b11-footer{margin-top:30px}
}

/* --- less motion --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.lmx-b11-inner *,.lmx-b11-inner *::before,.lmx-b11-inner *::after{transition:none !important;animation:none !important}
}

/* =========================================================================
 * Leadership mode (the Company page, 2026-09-16): one person per spread —
 * portrait, name and role on the left page, the biography across both; a long
 * biography continues on the next spread marked “continued”. The book is wider
 * and the text larger (sizes are in the coordinates of the 1240×660 stage, and
 * the stage is scaled as a whole: on a 1366×768 laptop that is ≥14px on
 * screen). New selectors only — the home page and Use Cases do not change.
 * ====================================================================== */
.lmx-b11-inner--leadership .lmx-b11-head{max-width:none}
.lmx-b11-inner--leadership .lmx-b11-pill{font-size:max(10px,calc(11px * var(--block11-scale,1)))}
.lmx-b11-inner--leadership .lmx-b11-title{margin-top:max(6px,calc(12px * var(--block11-scale,1))) !important;font-size:max(22px,calc(34px * var(--block11-scale,1))) !important}
.lmx-b11-inner--leadership .lmx-b11-stage{margin-top:max(2px,calc(8px * var(--block11-scale,1)))}
/* The book is wider (on-screen size = stage size × width/1240): only the empty
   area under the floor shadow is trimmed from the stage (660 → 600), the pages
   themselves are intact. */
.lmx-b11-inner--leadership .lmx-b11-book{width:min(100%,max(820px,calc(1720px * var(--block11-scale,1))));aspect-ratio:1240/600}
.lmx-b11-inner--leadership .lmx-b11-footer{margin-top:max(4px,calc(8px * var(--block11-scale,1)))}
.lmx-b11-inner--leadership .lmx-b11-page-content{padding:34px 40px 30px}
.lmx-b11-inner--leadership .lmx-b11-quote-head{display:flex;align-items:center;gap:20px}
.lmx-b11-inner--leadership .lmx-b11-inner .lmx-b11-avatar,
.lmx-b11-inner--leadership .lmx-b11-avatar{width:96px;height:96px;flex:0 0 96px;border-radius:50%;object-fit:cover;padding:0;box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(82,199,198,.55)}
.lmx-b11-inner--leadership .lmx-b11-name{font-size:26px !important;line-height:1.2 !important}
.lmx-b11-inner--leadership .lmx-b11-role{margin:4px 0 0 !important;font-size:15px !important;color:#52C7C6 !important;font-weight:500 !important;letter-spacing:.02em}
.lmx-b11-inner--leadership .lmx-b11-quotemark{display:none}
.lmx-b11-inner--leadership .lmx-b11-text{margin-top:18px !important;font-size:18px !important;line-height:1.5 !important;font-weight:300;letter-spacing:0;color:#2f343b !important}
.lmx-b11-inner--leadership .lmx-b11-profile--cont .lmx-b11-text{margin-top:0 !important}
.lmx-b11-inner--leadership .lmx-b11-cont{margin:6px 0 14px !important;font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif !important;font-size:12px !important;letter-spacing:.22em;text-transform:uppercase;color:#7b828a !important;font-weight:600}
.lmx-b11-inner--leadership .lmx-b11-cont-mark{color:#52C7C6}
@media (max-width:1024px){
.lmx-b11-inner--leadership .lmx-b11-page-content{padding:28px 24px 26px}
.lmx-b11-inner--leadership .lmx-b11-avatar{width:80px;height:80px;flex-basis:80px}
.lmx-b11-inner--leadership .lmx-b11-name{font-size:22px !important}
.lmx-b11-inner--leadership .lmx-b11-text{font-size:16px !important;line-height:1.55 !important}
}

/* --- short laptops (2026-09-21), leadership mode (Company): the pages of the
   spread, the spine and the turning sheet move up to the top of the stage, the
   floor shadow goes under them and the book box is cut lower (1240/540 instead
   of 1240/600) — the book is about 40px shorter without shrinking the text; the
   block header and the footer are more compact. The home page and Use Cases
   (the ordinary book mode) do not change. */
@media (min-width:1025px) and (max-height:680px){
.lmx-b11-inner--leadership .lmx-b11-head{padding-top:8px}
.lmx-b11-inner--leadership .lmx-b11-pill{padding:5px 14px}
.lmx-b11-inner--leadership .lmx-b11-title{margin-top:6px !important;font-size:max(20px,calc(34px * var(--block11-scale,1))) !important}
.lmx-b11-inner--leadership .lmx-b11-stage{margin-top:2px}
.lmx-b11-inner--leadership .lmx-b11-book{aspect-ratio:1240/540}
.lmx-b11-inner--leadership .lmx-b11-scene{perspective-origin:620px 245px}
.lmx-b11-inner--leadership .lmx-b11-page,
.lmx-b11-inner--leadership .lmx-b11-spine-holder,
.lmx-b11-inner--leadership .lmx-b11-sheet{top:20px}
.lmx-b11-inner--leadership .lmx-b11-shadow-holder{top:452px}
.lmx-b11-inner--leadership .lmx-b11-footer{margin-top:2px}
.lmx-b11-inner--leadership .lmx-b11-counter-num{font-size:20px}
}