/* t111u homepage #clients: "Companies I've worked for and with" logo wall + testimonials (scripts/home_clients.py).
   Logos sit on light plates so every brand keeps its own colours and stays legible in dark and light mode. No JS. */
.cmp{position:relative;overflow:hidden;background:radial-gradient(760px 360px at 12% 0%,rgba(124,140,255,.13),transparent 65%),radial-gradient(620px 320px at 92% 100%,rgba(46,230,166,.09),transparent 65%)}
[data-theme="light"] .cmp{background:radial-gradient(760px 360px at 12% 0%,rgba(88,101,242,.09),transparent 65%),radial-gradient(620px 320px at 92% 100%,rgba(14,164,116,.07),transparent 65%)}
.cmp::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--hair),transparent)}

/* logo wall: 14 logos; centred flex rows (2, 3, 4 then 7 per row) */
.cmp-wall{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}
.cmp-item{position:relative;flex:0 1 calc(50% - .375rem);min-width:0;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.6rem .6rem .8rem;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);text-align:center;transition:transform .25s,border-color .25s,box-shadow .25s}
.cmp-item::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--b-soft),transparent 40%,transparent 60%,var(--g));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .25s;pointer-events:none}
.cmp-item:hover,.cmp-item:focus-within{transform:translateY(-3px);box-shadow:var(--sh-2)}
.cmp-item:hover::after,.cmp-item:focus-within::after{opacity:1}
.cmp-plate{display:grid;place-items:center;width:100%;height:96px;border-radius:calc(var(--r-lg) - 6px);background:linear-gradient(180deg,#fff,#f3f5fb);box-shadow:inset 0 0 0 1px rgba(22,26,38,.06),0 1px 0 rgba(255,255,255,.04)}
[data-theme="light"] .cmp-plate{background:linear-gradient(180deg,#fff,#f6f7fb);box-shadow:inset 0 0 0 1px rgba(22,26,38,.07)}
.cmp-logo{display:block;width:auto;max-width:78%;object-fit:contain}
.cmp-w{height:30px}
.cmp-m{height:46px}
.cmp-s{height:54px}
.cmp-name{margin-top:.35rem;font-family:var(--display);font-weight:650;font-size:.95rem;line-height:1.25;color:var(--ink)}
.cmp-tag{font-family:var(--mono);font-size:.72rem;line-height:1.3;color:var(--mut)}
a.cmp-jump{color:var(--g);text-decoration:none}
a.cmp-jump:hover,a.cmp-jump:focus-visible{text-decoration:underline;text-underline-offset:2px}
[data-theme="light"] a.cmp-jump{color:#0b8a62}
@media (min-width:600px){.cmp-item{flex-basis:calc(33.333% - .5rem)}}
@media (min-width:900px){.cmp-wall{gap:1rem}.cmp-item{flex-basis:calc(25% - .75rem)}}
@media (min-width:1180px){.cmp-item{flex-basis:calc(14.285% - .858rem)}.cmp-plate{height:100px}.cmp-w{height:34px}.cmp-m{height:50px}.cmp-s{height:58px}}

/* testimonials */
.tm-grid{display:grid;gap:1.1rem;margin-top:2.6rem}
@media (min-width:900px){.tm-grid{grid-template-columns:1fr 1fr;gap:1.4rem}}
.tm-card{position:relative;display:flex;flex-direction:column;margin:0;padding:1.6rem 1.35rem 1.3rem;border-radius:calc(var(--r-lg) + 4px);border:1px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,rgba(169,180,255,.55),rgba(124,140,255,.12) 45%,rgba(46,230,166,.45)) border-box;box-shadow:var(--sh-2);overflow:hidden;scroll-margin-top:90px}
.tm-card::before{content:"";position:absolute;inset:auto -30% -55% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(124,140,255,.16),transparent);pointer-events:none}
[data-theme="light"] .tm-card{background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,rgba(88,101,242,.45),rgba(88,101,242,.08) 45%,rgba(14,164,116,.4)) border-box}
.tm-card:target{outline:2px solid var(--ring);outline-offset:4px}
.tm-mark{display:block;width:52px;height:auto;margin-bottom:.9rem;filter:drop-shadow(0 6px 18px rgba(124,140,255,.35))}
.tm-q{position:relative;margin:0;flex:1}
.tm-q p{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.06rem,3.9vw,1.2rem);line-height:1.6;letter-spacing:-.005em;color:var(--ink);text-wrap:pretty}
.tm-by{position:relative;display:flex;align-items:center;gap:.8rem;margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.tm-ava{flex:none;display:block;width:56px;height:56px;border-radius:50%;padding:2px;background:linear-gradient(135deg,var(--b-soft),var(--g))}
.tm-ava img{display:block;width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--card)}
.tm-who{display:flex;flex-direction:column;min-width:0;flex:1}
.tm-name{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink)}
.tm-role{font-size:.86rem;line-height:1.4;color:var(--mut)}
.tm-role a{color:var(--b-soft);text-underline-offset:2px}
[data-theme="light"] .tm-role a{color:var(--b)}
.tm-logo{flex:none;display:grid;place-items:center;height:44px;padding:0 .7rem;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px rgba(22,26,38,.08)}
.tm-logo img{display:block;width:auto;height:22px;max-width:120px}
@media (max-width:420px){.tm-logo{display:none}}
@media (prefers-reduced-motion:reduce){.cmp-item,.cmp-item::after{transition:none}.cmp-item:hover,.cmp-item:focus-within{transform:none}}