.clients-section{background:radial-gradient(ellipse at 50% 0,#14294466,transparent 52%),#090f1c;color:#f6f8fc;padding:84px 0 65px;overflow:hidden;scroll-margin-top:85px}
.clients-heading{max-width:760px;text-align:center;margin:0 auto 36px}
.clients-heading h2{font-size:clamp(32px,3.6vw,47px);line-height:1.5}
.clients-heading h2 span{color:#87b5fb}
.clients-heading p{color:#a7b6cd;max-width:620px;font-size:15px;line-height:2;margin:16px auto 0}
.client-controls{display:flex;justify-content:flex-end;gap:9px;align-items:center;flex-shrink:0;margin:0 0 16px}
.client-controls button{display:grid;place-items:center;width:42px;height:42px;background:#111b2e;color:#d5e4fb;border:1px solid #233047;border-radius:50%;transition:background .2s}
.client-controls button:hover:not(:disabled){background:#1b3151}
.client-controls button:disabled{opacity:.3;cursor:default}
.client-controls svg{width:18px}
.client-previous svg{transform:rotate(180deg)}
.client-position{direction:ltr}
/* Teacher portraits use the same published profiles and crop settings as the cards. */
.teacher-partners-band{width:100%;min-width:0;contain:inline-size;background:#142137;color:#e7eefb;padding-block:24px;overflow:hidden}
.teacher-partners-band>.container{width:100%;max-width:none;margin-inline:0;padding-inline:0}
.teacher-partners-band .teacher-portraits{margin:0;padding-block:6px;border:0}
/* Anchor the oversized track on the left in both languages; its groups retain RTL order. */
.teacher-portraits{direction:ltr;width:100%;min-width:0;max-width:100%;contain:inline-size layout paint;margin-bottom:28px;padding-block:8px 30px;border-bottom:1px solid #ffffff12;overflow:hidden}
.teacher-portrait-track{display:flex;direction:ltr;width:max-content}
/* Reserve the final one-row layout before JavaScript and image decoding finish. */
.teacher-portraits:not([data-ready]){direction:inherit;overflow-x:auto}
.teacher-portrait-group{display:flex;flex:0 0 auto;flex-wrap:nowrap;justify-content:center;align-items:stretch;gap:18px;width:max-content;margin:0;padding:0;list-style:none}
html[dir="rtl"] .teacher-portrait-group{direction:rtl}
.teacher-portrait{flex:0 0 180px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:15px;padding:21px 12px 17px;border:1px solid #293950;border-radius:20px;background:linear-gradient(155deg,#17253b,#101a2b);text-align:center;transition:transform .3s,border-color .3s,background .3s}
.teacher-portrait-photo{position:relative;display:block;flex-shrink:0;width:112px;height:112px;border:3px solid #283e5c;border-radius:50%;background:#1d2d44;box-shadow:0 0 0 5px #ffffff04;overflow:hidden}
.teacher-portrait-photo img{display:block;position:absolute;max-width:none;width:calc(var(--portrait-zoom)*1%);height:auto;left:50%;top:50%;transform:translate(calc(var(--portrait-x)*-1%),calc(var(--portrait-y)*-1%))}
.teacher-portrait-name{display:flex;align-items:center;justify-content:center;flex:1;min-height:2.9em;max-width:100%;color:#e7eefb;font-size:14px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.teacher-portraits[data-ready="true"]{mask-image:linear-gradient(to right,transparent,#000 30px,#000 calc(100% - 30px),transparent)}
.teacher-portraits[data-ready="true"] .teacher-portrait-track{width:max-content;animation:teacher-portrait-drift var(--portrait-duration,45s) linear infinite;animation-play-state:paused}
.teacher-portraits[data-ready="true"] .teacher-portrait-group{width:max-content;flex:0 0 auto;flex-wrap:nowrap;justify-content:space-around;padding-inline:9px}
.teacher-portraits[data-running="true"] .teacher-portrait-track{animation-play-state:running}
html[dir="rtl"] .teacher-portraits .teacher-portrait-track{animation-direction:reverse}
.teacher-portraits:focus-within .teacher-portrait-track{animation-play-state:paused}
.teacher-portraits:focus-visible{outline:2px solid #a8c9fc;outline-offset:4px;border-radius:8px}
@media(hover:hover) and (pointer:fine){
  .teacher-portraits:hover .teacher-portrait-track{animation-play-state:paused}
  html:not(.motion-disabled) .teacher-portrait:hover{transform:translateY(-4px);border-color:#6898d9;background:#182b45}
}
@keyframes teacher-portrait-drift{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--portrait-distance)))}}
html.motion-disabled .teacher-portraits .teacher-portrait-track{animation:none!important;transform:none!important}
/* Reserve headroom for the card's hover lift inside the scroll viewport. */
/* Native dragging stays free; the arrow controls align cards explicitly. */
.clients-track{display:flex;align-items:stretch;gap:25px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:none;scrollbar-width:thin;scrollbar-color:#7aa7e8 #1b2b43;padding:8px 0 24px;direction:rtl}
/* A slim visible rail with a larger native drag area. */
@supports selector(::-webkit-scrollbar){
  .clients-track{scrollbar-width:auto;scrollbar-color:auto}
  .clients-track::-webkit-scrollbar{height:14px;background:transparent}
  .clients-track::-webkit-scrollbar-track{margin-inline:4px;border:4px solid transparent;border-radius:999px;background:#1b2b43;background-clip:padding-box}
  .clients-track::-webkit-scrollbar-thumb{min-width:48px;border:4px solid transparent;border-radius:999px;background:#7aa7e8;background-clip:padding-box}
  .clients-track::-webkit-scrollbar-thumb:hover{background-color:#a8caff}
  .clients-track::-webkit-scrollbar-thumb:active{background-color:#c2dcff}
  .clients-track::-webkit-scrollbar-button{display:none;width:0;height:0}
  .clients-track::-webkit-scrollbar-corner{background:transparent}
}
@media(forced-colors:active){
  .clients-track{scrollbar-width:auto;scrollbar-color:auto}
  .clients-track::-webkit-scrollbar-track{background-color:Canvas}
  .clients-track::-webkit-scrollbar-thumb{background-color:ButtonText}
}
.client-card{--client-surface:#f8faff;--client-text:#17253e;--client-muted:#56657d;--client-line:#dce4ef;--client-inset:#edf2f9;--client-hover:#e4edf9;flex:0 0 calc((100% - 50px)/3);min-width:325px;max-width:440px;overflow:hidden;background:var(--client-surface);color:var(--client-text);border:1px solid #ffffff26;border-radius:24px;display:flex;flex-direction:column;transition:border-color .3s,box-shadow .3s}
.client-card:hover{border-color:#85b6ff;box-shadow:0 12px 35px #0002}
.client-cover{width:100%;aspect-ratio:4.2;flex-shrink:0;position:relative;overflow:hidden;border-radius:13px;background:radial-gradient(ellipse at 15% 10%,#2871b7,#142741 65%)}
/* Trim the wide outer margins while keeping the central banner artwork legible. */
.client-cover img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.client-cover-monogram{font:700 42px/1.5 Plex;letter-spacing:8px;color:#ffffff55;position:absolute;inset:0;display:grid;place-items:center}
.client-card-body{padding:22px;display:flex;flex-direction:column;gap:18px;flex:1;min-width:0}
.client-identity{display:flex;align-items:center;gap:14px;min-width:0;text-align:start}
.client-avatar{position:relative;width:58px;height:58px;flex-shrink:0;border:1px solid var(--client-line);border-radius:50%;background:var(--client-inset);overflow:hidden;display:grid;place-items:center}
.client-avatar>img{position:absolute;max-width:none;width:calc(var(--portrait-zoom)*1%);height:auto;left:50%;top:50%;transform:translate(calc(var(--portrait-x)*-1%),calc(var(--portrait-y)*-1%))}
.client-avatar>span{font:700 22px Plex;color:var(--client-text)}
.client-identity>div{min-width:0;flex:1}
.client-identity h3{font-size:20px;line-height:1.5;color:var(--client-text);overflow-wrap:anywhere}
.client-identity p{font-size:12px;line-height:1.7;margin-top:4px;color:var(--client-muted);overflow-wrap:anywhere}
.client-identity p:empty{display:none}
/* A single quiet statistics row keeps the numbers ahead of the surrounding chrome. */
.client-stats{margin:0;padding-block:4px;display:grid;grid-template-columns:repeat(var(--stat-columns),minmax(0,1fr));gap:0}
.client-stats>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;min-width:0;margin:0;padding:0 8px;text-align:center}
.client-stats>div+div{border-inline-start:1px solid var(--client-line)}
.client-stats dt{font-size:12px;line-height:1.7;color:var(--client-muted);overflow-wrap:anywhere}
.client-stats dd{font:700 24px/1.3 Plex;margin:0 0 5px;color:var(--client-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;font-variant-numeric:tabular-nums}
.client-feature{display:block;text-align:start;padding:12px;border:1px solid transparent;border-radius:12px;background:var(--client-inset);width:100%;color:var(--client-text);transition:background .2s,border-color .2s}
.client-feature:hover{background:var(--client-hover);border-color:var(--client-line)}
.client-feature-label{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.client-feature-label>span{font-size:12px;font-weight:400;color:var(--client-muted)}
.client-feature-label>small{font:12px/1.7 Cairo,Arial,sans-serif;color:var(--client-muted)}
.client-feature-body{display:flex;align-items:center;gap:12px}
.client-feature-body>strong{font-size:13px;font-weight:400;line-height:1.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.client-video-thumb{width:96px;height:54px;flex-shrink:0;border-radius:8px;position:relative;overflow:hidden;background:#223149;display:grid;place-items:center}
.client-video-thumb>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.client-video-thumb>.client-youtube{position:relative;width:32px;height:32px;filter:drop-shadow(0 2px 5px #0008)}
.client-youtube{width:21px;height:21px;stroke:none!important;fill:#ff252a!important}
.client-youtube path{fill:white!important;stroke:none!important}
.client-note{font-size:12px;color:var(--client-muted);line-height:1.9;margin-top:auto}
.client-specialty{padding:12px 14px;border-radius:12px;border:1px solid var(--client-line);color:var(--client-muted);font-size:12px;background:var(--client-inset)}
.client-card-footer{padding:0 22px 22px;margin-top:auto}
.client-channel{width:100%;min-height:48px;padding:10px 14px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--brand-primary,#076cf0);color:#fff;border:0;border-radius:11px;font-size:14px;font-weight:700;line-height:1.7;transition:background .2s,transform .2s}
.client-channel:hover{background:var(--blue-dark,#005aca);transform:translateY(-2px)}
.client-channel .client-youtube{fill:#fff!important}
.client-channel .client-youtube path{fill:var(--brand-primary,#076cf0)!important}
.client-channel:focus-visible,.client-feature:focus-visible{outline:3px solid #075bc8;outline-offset:3px}
.client-member{display:flex;justify-content:center;gap:12px;color:var(--client-muted);font-size:12px;padding:12px}
html[data-theme="dark"] .client-card{--client-surface:#142035;--client-text:#e7eefb;--client-muted:#a7b6cd;--client-line:#30415a;--client-inset:#1d2d44;--client-hover:#253a55;border-color:#30415a}
html[data-theme="dark"] .client-channel:focus-visible,html[data-theme="dark"] .client-feature:focus-visible{outline-color:#a8c9fc}
.clients-empty{padding:45px;border:1px dashed #30405a;border-radius:20px;text-align:center;color:#9aabc4;font-size:13px}
.clients-legacy{margin-top:27px;border-top:1px solid #223047}
.clients-legacy>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:23px 0 0;color:#b1c4df;font-size:12px}
.clients-legacy>summary::-webkit-details-marker{display:none}
.clients-legacy>summary:after{content:'+';font:24px Arial;color:#83b4ff}
.clients-legacy[open]>summary:after{content:'−'}
.clients-legacy .results-section{margin-top:25px;background:var(--paper);color:var(--navy);width:100%;padding:35px;border-radius:20px;gap:35px}
.clients-legacy h2{font-size:33px}
.clients-legacy .results-board{padding:23px}
.clients-legacy .metrics strong{font-size:28px}
.clients-legacy .results-copy>small{font-size:10px}
/* Only the card track scrolls horizontally; the section follows the page width. */
.clients-section{width:100%;min-width:0;max-width:100%}
.clients-track{width:100%;min-width:0;max-width:100%;contain:inline-size paint}
.clients-heading>div:first-child{min-width:0;overflow-wrap:anywhere}
.client-feature-body>strong{min-width:0;overflow-wrap:anywhere}
@media(min-width:1000px){.clients-track:has(.client-card:nth-child(2):last-child) .client-card{flex-basis:calc((100% - 25px)/2);max-width:none}
.clients-track:has(.client-card:nth-child(2):last-child) .client-card-body{padding-inline:27px}
.clients-track:has(.client-card:nth-child(2):last-child) .client-card-footer{padding-inline:27px}
}
@media(max-width:850px){.clients-section{padding-block:65px 45px}
.client-card{flex-basis:calc((100% - 24px)/2);min-width:310px}
.clients-legacy .results-section{grid-template-columns:1fr}
.clients-heading p{max-width:560px}
.client-controls{gap:6px}
}
@media(max-width:650px){.clients-section{padding-block:54px 35px}
.clients-heading{margin-bottom:24px}
.clients-heading h2{font-size:32px}
.clients-heading p{font-size:15px;margin-top:12px}
.teacher-portraits{margin-bottom:20px;padding-bottom:24px}
.teacher-portrait-group{gap:12px}
.teacher-portrait{flex-basis:150px;padding:17px 10px 14px;gap:13px;border-radius:17px}
.teacher-portrait-photo{width:94px;height:94px}
.teacher-portrait-name{font-size:13px}
.teacher-portraits:not([data-ready]) .teacher-portrait{flex-basis:calc((100% - 12px)/2);max-width:180px}
.teacher-portraits[data-ready="true"] .teacher-portrait-group{padding-inline:6px}
.teacher-portraits[data-ready="true"]{mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
.client-controls{margin-top:0}
.client-controls button{width:37px;height:37px}
.clients-track{gap:16px;overflow: auto;padding-bottom:22px}
.client-card{flex-basis:89%;min-width:min(290px,100%);max-width:none;border-radius:19px}
.client-card-body{padding:18px;gap:18px}
.client-identity h3{font-size:18px}
.client-identity{gap:12px}
.client-avatar{width:54px;height:54px}
.client-stats dd{font-size:22px}
.client-stats>div{padding-inline:5px}
.client-feature{padding:11px}
.client-video-thumb{width:88px;height:auto;aspect-ratio:16/9}
.client-card-footer{padding:0 18px 18px}
.clients-legacy .results-section{padding:23px 19px}
.clients-legacy h2{font-size:29px}
.clients-legacy .metrics strong{font-size:25px}
.clients-legacy .results-board{padding:17px}
.clients-legacy>summary{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.client-card,.client-cover img,.client-channel,.client-feature{transition:none!important}
.clients-track{scroll-behavior:auto!important}
.teacher-portraits .teacher-portrait-track{animation:none!important;transform:none!important}
.teacher-portrait{transition:none!important;transform:none!important}
}
