/* 06 — The way we think: a quiet, centred statement (values above, what we do as a word cloud below) */
.st{position:relative;display:flex;flex-direction:column;min-height:100svh;padding:clamp(48px,6vw,80px) 6% clamp(56px,6vw,90px);background:#080808;color:var(--ivory);text-align:center;font-family:Inter,'IBM Plex Sans Thai',sans-serif}
.st-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,72px);margin:0;padding:0;list-style:none;text-align:left}
.st-values li>span{display:block;margin-bottom:12px;font:500 11px/1 Inter,'IBM Plex Sans Thai',sans-serif;letter-spacing:.16em;color:#6f6f6f}
.st-values p{margin:0;max-width:34ch;font-size:15px;line-height:1.65;color:#8f8f8f}
.st-values b{font-weight:500;color:var(--ivory)}
.st-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(80px,12vh,160px) 0}
.st-eyebrow{margin:0 0 28px;font:500 11px/1 Inter,'IBM Plex Sans Thai',sans-serif;letter-spacing:.18em;color:#6f6f6f}
.st h2{max-width:31ch;margin:0;font-family:Inter,'IBM Plex Sans Thai',sans-serif;font-size:clamp(30px,2.7vw,46px);font-weight:400;line-height:1.22;letter-spacing:-.035em;color:var(--ivory);text-wrap:balance}
.st-th{max-width:560px;margin:26px auto 0;font-family:'IBM Plex Sans Thai',sans-serif;font-size:15px;line-height:1.8;color:#8a8a8a;text-wrap:balance}
.st-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;max-width:1180px;margin:0 auto;padding:0;list-style:none}
.st-cloud li{font-size:clamp(17px,1.45vw,22px);font-weight:300;line-height:1.35;letter-spacing:-.01em;color:#7d7d7d;cursor:default;transition:color .5s ease}
.st-cloud li:hover,.st-cloud li.is-lit{color:var(--ivory);transition-duration:.25s}
/* reveal when it comes into view (only when scripts run) */
.st.js-reveal .st-r,.st.js-reveal .st-cloud li{opacity:0;transform:translateY(18px)}
.st.is-in .st-r{opacity:1;transform:none;transition:opacity .9s ease calc(var(--r) * 140ms),transform 1s cubic-bezier(.2,.75,.2,1) calc(var(--r) * 140ms)}
.st.is-in .st-cloud li{opacity:1;transform:none;transition:opacity .8s ease calc(.5s + var(--c) * 35ms),transform .9s cubic-bezier(.2,.75,.2,1) calc(.5s + var(--c) * 35ms),color .5s ease}
@media(max-width:820px){.st-values{grid-template-columns:1fr;gap:22px}.st-values p{max-width:none}}
@media(max-width:650px){
  .st{min-height:0;padding:56px 22px 64px}
  .st-center{padding:72px 0}
  .st h2{font-size:clamp(26px,7.4vw,32px)}
  .st-th{font-size:14px}
  .st-cloud{gap:4px 16px}
  .st-cloud li{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.st *{transition:none!important}.st.js-reveal .st-r,.st.js-reveal .st-cloud li{opacity:1;transform:none}}
/* tiles (Be yourself / Make it flow / Find the link) — between How we work and the brief */
.approach{border-top:1px solid #333}
.approach .approach-grid{margin-top:0}
.st-center{padding-top:clamp(40px,8vh,120px)}
/* work picture shown above the pointer while a word is pointed at */
.st-cloud{position:relative;z-index:1}
.st-peek{position:absolute;left:0;top:0;z-index:5;width:clamp(220px,19vw,300px);pointer-events:none;opacity:0;will-change:transform;transition:opacity .25s ease}
.st-peek.is-on{opacity:1}
.st-peek img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;background:#1a1a1a;box-shadow:0 30px 60px -20px #000c;transform:scale(.94);transition:transform .35s cubic-bezier(.2,.75,.2,1)}
.st-peek.is-on img{transform:none}
.st-peek p{width:max-content;max-width:100%;margin:8px auto 0;padding:6px 10px;border-radius:2px;background:#080808e6;font:500 11px/1.4 Inter,'IBM Plex Sans Thai',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory);text-align:center}
.st.is-peeking .st-cloud li{color:#4d4d4d}
.st.is-peeking .st-cloud li.is-peek{color:var(--ivory)}
.st-cloud li[data-peek]{cursor:pointer}
@media(prefers-reduced-motion:reduce){.st-peek img{transition:none;transform:none}}
/* split: the statement on its own, then "What we do" as its own full-screen section */
.st-statement{min-height:88svh;justify-content:center}
.st-statement .st-center{padding:clamp(40px,8vh,120px) 0}
.st-team{justify-content:center;min-height:100svh;padding-top:clamp(80px,10vh,120px);padding-bottom:clamp(110px,14vh,150px);border-top:1px solid #161616}
.st-team .st-cloud{max-width:1240px;gap:4px 20px}
.st-team .st-cloud li{font-size:clamp(18px,1.6vw,25px)}
.st-side{position:absolute;top:50%;z-index:2;margin:0;transform:translateY(-50%);font:500 12px/1 Inter,'IBM Plex Sans Thai',sans-serif;letter-spacing:.06em;color:#8a8a8a}
.st-side b{font-weight:700;letter-spacing:.08em;color:var(--ivory)}
.st-side-l{left:clamp(20px,2.4vw,36px)}
.st-side-r{right:clamp(20px,2.4vw,36px);transition:color .2s}
.st-side-r:hover{color:var(--yellow)}
.st-filter{position:absolute;left:50%;bottom:clamp(28px,4vh,44px);z-index:3;display:flex;gap:2px;padding:4px;border-radius:8px;background:#151515;transform:translateX(-50%);max-width:calc(100% - 32px);overflow-x:auto;scrollbar-width:none}
.st-filter::-webkit-scrollbar{display:none}
.st-filter button{flex:none;padding:10px 14px;border:0;border-radius:5px;background:none;color:#9a9a9a;font:600 12px/1 Inter,'IBM Plex Sans Thai',sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.st-filter button:hover{color:var(--ivory)}
.st-filter button[aria-pressed=true]{background:#2a2a2a;color:var(--ivory)}
.st-filter button:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.st-team.is-filtered .st-cloud li{color:#3b3b3b}
.st-team.is-filtered .st-cloud li.is-match{color:var(--ivory)}
.st-team.is-peeking .st-cloud li{color:#4d4d4d}
.st-team.is-peeking .st-cloud li.is-peek{color:var(--ivory)}
@media(max-width:900px){.st-side{position:static;transform:none;text-align:center;margin:0 0 18px}.st-side-r{display:none}}
@media(max-width:650px){.st-team{min-height:0;padding:64px 16px 110px}.st-team .st-cloud li{font-size:16px}.st-filter button{padding:9px 11px;font-size:11px}}
@media(min-width:901px){.st-team .st-cloud{max-width:min(1240px,calc(100% - 380px))}}

/* skills cloud on tablets and phones: bigger words, no full-screen empty room */
@media(max-width:1100px){.st-team .st-cloud li{font-size:clamp(20px,2.7vw,28px)}.st-team .st-cloud{gap:6px 18px}}
@media(max-width:1100px) and (orientation:portrait){.st-team{min-height:0;padding-top:96px;padding-bottom:130px}}
@media(max-width:650px){.st-team .st-cloud li{font-size:19px}.st-team .st-cloud{gap:4px 14px}}
@media(max-width:1100px) and (orientation:portrait){.st-statement{min-height:0;padding-top:110px;padding-bottom:110px}}