.clients { padding:74px 0 112px; }
.clients h2 { margin:0 auto 76px; max-width:980px; text-align:center; font-size:clamp(30px,3.55vw,48px); font-weight:750; line-height:1.12; letter-spacing:-.04em; text-wrap:balance; }
.client-handwritten { display:inline-block; font-family:'Orange Marker',Manrope,sans-serif; font-size:1.12em; font-weight:400; line-height:1; letter-spacing:0; color:var(--accent); transform:rotate(-2deg); }
.client-handwritten-sale { margin-inline:.07em .22em; color:#EAFF00; }
.client-stories { display:grid; gap:68px; }
.client-story { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(290px,1fr); align-items:center; gap:60px; }
.client-story-reverse { grid-template-columns:minmax(290px,1fr) minmax(0,1.45fr); }
.client-story-reverse .client-art { grid-column:2; grid-row:1; }
.client-story-reverse .client-copy { grid-column:1; grid-row:1; padding-left:22px; }
.client-art { min-width:0; margin:0; position:relative; }
.client-art::before { content:''; position:absolute; inset:12% 2%; background:radial-gradient(ellipse,#d4c27709,transparent 70%); pointer-events:none; }
.client-art figcaption { margin:6px 0 0; text-align:center; color:#b7bdb2; font-size:14px; line-height:1.5; }
.client-drawing { position:relative; display:block; width:100%; height:auto; overflow:visible; }
.client-copy h3 { margin:0 0 20px; font-size:30px; line-height:1.16; letter-spacing:-.035em; font-weight:700; }
.client-heading-paint { position:relative; display:inline-block; isolation:isolate; padding:.03em .18em; margin-inline:.02em; white-space:nowrap; color:#f1f1f1; }
.client-heading-sketch { position:absolute; z-index:-1; top:-.04em; left:-.06em; width:calc(100% + .12em); height:calc(100% + .12em); overflow:visible; transform:rotate(-2deg); pointer-events:none; }
.client-story-reverse .client-heading-sketch { transform:rotate(1.5deg); }
.client-story:last-child .client-heading-sketch { transform:rotate(-1deg); }
.client-heading-outline { fill:none; stroke:var(--accent); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.client-heading-outline-second { stroke-width:.8; stroke-opacity:.38; }
.client-heading-fill { fill:none; stroke:#c74d28; stroke-linecap:round; stroke-linejoin:round; }
.client-heading-paint[data-paint-motion='true'] .client-heading-outline { stroke-dasharray:1; stroke-dashoffset:1; }
.client-heading-paint[data-paint-motion='true'] .client-heading-fill { stroke-dasharray:1; stroke-dashoffset:1; opacity:0; }
.client-heading-paint[data-paint-motion='true'].is-painted .client-heading-outline { animation:button-outline .65s ease-out both; }
.client-heading-paint[data-paint-motion='true'].is-painted .client-heading-outline-second { animation-duration:.5s; animation-delay:.2s; }
.client-heading-paint[data-paint-motion='true'].is-painted .client-heading-fill { animation:button-paint var(--paint-duration) cubic-bezier(.3,.1,.35,1) var(--paint-delay) both; }
@media(prefers-reduced-motion:reduce) { .client-heading-paint .client-heading-outline,.client-heading-paint .client-heading-fill { animation:none!important; stroke-dashoffset:0!important; opacity:1!important; } }
.client-copy p { margin:0; max-width:380px; font-size:19px; line-height:1.6; font-weight:500; color:#b3b3b3; }
.client-copy ul { list-style:none; padding:0; margin:25px 0 0; display:grid; gap:11px; }
.client-copy li { padding-left:21px; position:relative; color:#d3d4cf; font-size:16px; line-height:1.5; }
.client-copy li::before { content:''; position:absolute; width:7px; height:7px; left:1px; top:.56em; background:#dc744d; border-radius:40% 65% 45% 70%; transform:rotate(-13deg); }
.client-replay { display:none; margin:25px 0 0; padding:7px 0; background:none; border:0; color:#8d908c; font:500 13px/1.5 Manrope,Arial,sans-serif; cursor:pointer; text-decoration:underline; text-decoration-color:#ffffff26; text-underline-offset:5px; }
.client-story[data-motion='true'] .client-replay { display:inline-block; }
.client-replay:hover { color:#eee; }
.client-replay:focus-visible { outline:2px solid #eaff00; outline-offset:6px; }
.client-drawing .s-paper { fill:#e0dfce; }
.client-drawing .s-orange { fill:#d97750; }
.client-drawing .s-green { fill:#c7d5a4; }
.client-drawing .s-skin { fill:#c0a282; }
.client-drawing .s-charcoal { fill:#272e29; }
.client-drawing .s-shadow { fill:#000; opacity:.5; }
.client-drawing .s-ink,.client-drawing .s-soft-line,.client-drawing .s-link,.client-drawing .s-orange-line,.client-drawing .s-check { fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.client-drawing .s-ink { stroke:#242b26; stroke-width:1.75; }
.client-drawing .s-fine { stroke-width:1.2; opacity:.65; }
.client-drawing .s-soft-line { stroke:#737d6a; stroke-width:1; }
.client-drawing .s-link { stroke:#cfbda0; stroke-width:2; }
.client-drawing .s-orange-line { stroke:#c65730; stroke-width:2.6; }
.client-drawing .s-check { stroke:#eaff00; stroke-width:2.3; }
.client-drawing .s-text { fill:#e6e7dc; font-family:Manrope,Arial,sans-serif; font-weight:600; letter-spacing:-.025em; }
.client-drawing .s-dark-text { fill:#263029; }
.client-drawing .s-lime-text { fill:#eaff00; }
.client-story[data-motion='true'] .s-reveal { opacity:0; }
.client-story[data-motion='true'] .s-trace { stroke-dasharray:1; stroke-dashoffset:1; }
.client-story[data-motion='true'].is-playing .s-reveal { animation:client-appear .65s ease-out var(--at,0s) both; }
.client-story[data-motion='true'].is-playing .s-trace { animation:client-draw var(--duration,1s) cubic-bezier(.25,.1,.3,1) var(--at,0s) both; }
.client-story.is-paused * { animation-play-state:paused!important; }
.client-program { max-width:490px; margin:110px auto 0; scroll-margin-top:36px; perspective:1100px; }
.client-program-surface { --rest-x:1.5deg; --rest-y:-3deg; --tilt-x:0deg; --tilt-y:0deg; --lift:0px; position:relative; isolation:isolate; border:0; border-radius:30px; transform:translateY(var(--lift)) rotateX(calc(var(--rest-x) + var(--tilt-x))) rotateY(calc(var(--rest-y) + var(--tilt-y))); }
.client-program-surface:has(.client-program-card[open]),.client-program-surface:has(.client-program-toggle:focus-visible) { transform:none!important; }
.client-program-surface:has(.client-program-card[open])>.author-glare { display:none; }
.client-program-card { position:relative; border:0; border-radius:inherit; }
.client-program-surface::before { content:''; position:absolute; z-index:-1; inset:0; border-radius:inherit; background:#0b0b0be6; filter:blur(2px); box-shadow:0 28px 65px -18px #000b,inset 0 -6px 20px #0003; pointer-events:none; }
.client-program-toggle { position:relative; display:block; padding:34px 44px; text-align:center; list-style:none; cursor:pointer; user-select:none; -webkit-user-select:none; border-radius:inherit; -webkit-tap-highlight-color:transparent; }
.client-program-toggle::-webkit-details-marker { display:none; }
.client-program-toggle::marker { content:''; }
.client-program-toggle:focus-visible { outline:2px solid #eaff00; outline-offset:6px; }
.client-program-label h3 { margin:0; color:#f1f1f1; font-size:32px; line-height:1.2; font-weight:650; letter-spacing:-.035em; }
.client-program-handwritten { display:block; margin-top:4px; color:#eaff00; font-family:'Orange Marker',Manrope,sans-serif; font-size:1.12em; line-height:1.1; letter-spacing:0; font-weight:400; transform:rotate(-2deg); white-space:nowrap; }
.client-program-label p { margin:10px 0 0; color:#c0c6b9; font-size:17px; line-height:1.5; font-weight:500; }
.client-program-symbol { position:absolute; display:block; right:18px; top:50%; width:22px; height:22px; transform:translateY(-50%); color:#b8b8b3; }
.client-program-symbol::before,.client-program-symbol::after { content:''; position:absolute; width:20px; height:2px; left:1px; top:10px; border-radius:2px; background:currentColor; transition:transform .25s,opacity .25s; }
.client-program-symbol::after { transform:rotate(90deg); }
.client-program-card[open] .client-program-symbol::after { transform:rotate(0); opacity:0; }
.client-program-toggle:hover .client-program-symbol { color:#fff; }
.client-program-content { padding:0 28px 32px; }
.client-lessons { list-style:none; margin:0; padding:0; }
.client-lessons li { display:grid; grid-template-columns:50px minmax(0,1fr); gap:18px; padding:23px 0; }
.client-lessons li:first-child { padding-top:8px; }
.client-lesson-number { color:var(--accent); font-family:'Orange Marker',Manrope,sans-serif; font-size:37px; line-height:1; font-weight:400; letter-spacing:0; transform:rotate(-4deg); transform-origin:28px 20px; }
.client-lessons li:nth-child(3n+2) .client-lesson-number { transform:rotate(3deg); }
.client-lessons li:nth-child(3n) .client-lesson-number { transform:rotate(-1deg); }
.client-lessons h4 { margin:0; color:#f1f1f1; font-size:20px; line-height:1.4; font-weight:700; letter-spacing:-.025em; }
.client-lessons p { margin:7px 0 0; max-width:710px; color:#aaa; font-size:16px; line-height:1.6; font-weight:500; }
.client-program-close { display:block; width:fit-content; min-height:44px; user-select:none; -webkit-user-select:none; margin:20px 0 0 68px; padding:8px 0; border:0; background:none; color:#aaa; cursor:pointer; font:500 14px/1.5 Manrope,Arial,sans-serif; text-decoration:underline; text-decoration-color:#ffffff35; text-underline-offset:5px; }
.client-program-close[hidden] { display:none; }
.client-program-close:hover { color:#fff; }
.client-program-close:focus-visible { outline:2px solid #eaff00; outline-offset:5px; }
/* Native details sizing keeps expand/collapse and scroll positioning atomic. */
@media(max-width:760px) { .client-program { margin-top:80px; scroll-margin-top:24px; } .client-program-surface { --rest-x:0deg; --rest-y:0deg; border-radius:24px; } .client-program-toggle { padding:28px 40px; } .client-program-label h3 { font-size:26px; } .client-program-handwritten { display:block; margin-top:4px; color:#eaff00; font-family:'Orange Marker',Manrope,sans-serif; font-size:1.12em; line-height:1.1; letter-spacing:0; font-weight:400; transform:rotate(-2deg); white-space:nowrap; }
.client-program-label p { margin-top:8px; font-size:15px; } .client-program-symbol { width:22px; height:22px; } .client-program-symbol::before,.client-program-symbol::after { width:20px; top:10px; } .client-program-content { padding:0 24px 28px; } .client-lessons li { grid-template-columns:45px minmax(0,1fr); gap:15px; padding:21px 0; } .client-lesson-number { font-size:34px; transform-origin:20px 15px; } .client-lessons h4 { font-size:18px; } .client-lessons p { font-size:15px; } .client-program-close { margin-left:60px; } }
@media(max-width:380px) { .client-program-toggle { padding:25px 32px; } .client-program-label h3 { font-size:22px; } .client-program-symbol { right:11px; } .client-program-content { padding:0 20px 24px; } .client-lessons li { grid-template-columns:36px minmax(0,1fr); gap:13px; } .client-lesson-number { font-size:29px; } .client-program-close { margin-left:49px; } }
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce) { .client-program-surface { transform:none!important; } }
@media(prefers-reduced-motion:reduce) { .client-program-card::details-content,.client-program-symbol::before,.client-program-symbol::after { transition:none; } }
@keyframes client-appear { from { opacity:0; } to { opacity:1; } }
@keyframes client-draw { to { stroke-dashoffset:0; } }
@media(min-width:1500px) { .client-story { gap:84px; } .client-copy h3 { font-size:34px; } .client-copy p { font-size:20px; } }
@media(max-width:1050px) { .client-story,.client-story-reverse { gap:30px; grid-template-columns:minmax(0,1.3fr) minmax(250px,1fr); } .client-story-reverse { grid-template-columns:minmax(250px,1fr) minmax(0,1.3fr); } .client-copy h3 { font-size:27px; } .client-copy p { font-size:18px; } .client-copy li { font-size:15px; } .client-story-reverse .client-copy { padding-left:0; } }
@media(max-width:760px) { .clients { padding:76px 0 72px; } .clients h2 { font-size:clamp(28px,5.5vw,40px); margin-bottom:40px; } .client-stories { gap:67px; } .client-story,.client-story-reverse { grid-template-columns:minmax(0,1fr); gap:27px; } .client-story .client-art { grid-column:1; grid-row:1; max-width:590px; width:100%; justify-self:center; } .client-story .client-copy { grid-column:1; grid-row:2; padding:0; width:100%; max-width:480px; justify-self:center; } .client-copy h3 { font-size:28px; margin-bottom:14px; } .client-copy h3 br { display:none; } .client-copy h3 br::after { content:' '; } .client-copy p { max-width:100%; } .client-copy ul { margin-top:20px; } .client-copy li { font-size:16px; } .client-replay { margin-top:16px; } }
@media(max-width:430px) { .clients h2 { font-size:29px; } .client-story .client-art { width:calc(100% + 22px); max-width:none; margin-left:-11px; margin-right:-11px; } .client-art figcaption { font-size:13px; margin-top:11px; } .client-copy h3 { font-size:26px; } }
@media(prefers-reduced-motion:reduce) { .client-story[data-motion='true'] .s-reveal { opacity:1; animation:none!important; } .client-story[data-motion='true'] .s-trace { stroke-dashoffset:0; animation:none!important; } .client-replay { display:none!important; } }