/* Customer story pages (/customers/<name>): an editorial long-read on top of site.css.
   Big headline and the photo carry the top, one navy band holds the numbers, then chapters with the story left
   and one small illustration right. Classes are prefixed cs- so they never meet the site's own .card, .quote, .band. */
.cs-page{--cs-chat:#EFE6DC;--cs-bubble:#DCF3C9;--cs-shadow:0 1px 1px rgba(15,19,47,.04),0 6px 12px -4px rgba(15,19,47,.07),0 24px 48px -16px rgba(15,19,47,.14)}
.cs-page main{font-size:17px;line-height:1.65}
:where(.cs-page main) p{margin:0}
.cs-page figure{margin:0}
.cs-page .hl{color:var(--deep-ink)}
/* the moving background mark (assets/site.js) is the customer's mark on this page, and there is one of them */
.cs-randstad .fx .mark{width:64px;height:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14 17 43 22' fill='none' stroke='%237DC2CA' stroke-width='.9' stroke-linejoin='round'%3E%3Cpath d='M30.6 37.2h4.2V26.7c0-.6-.2-1.1-.6-1.5L27.9 19c-.4-.4-.9-.6-1.5-.6H15.9v4.2h11.5c1.7 0 3.1 1.4 3.1 3.1v11.5z'/%3E%3Cpath d='M41 37.2h-4.2V26.7c0-.6.2-1.1.6-1.5l6.2-6.2c.4-.4.9-.6 1.5-.6h10.5v4.2H44.1c-1.7 0-3.1 1.4-3.1 3.1v11.5z'/%3E%3C/svg%3E")}
.cs-randstad .fx .m2,.cs-randstad .fx .m3,.cs-randstad .fx .ring{display:none}

/* hero: same soft glow as the hiredata.com homepage, */
.cs-hero{position:relative;overflow:hidden}
.cs-hero .wrap{position:relative}
.cs-hero{background-image:radial-gradient(520px 420px at 82% 38%,color-mix(in srgb,var(--teal) 30%,transparent),transparent 70%),radial-gradient(460px 360px at 4% 78%,color-mix(in srgb,var(--rose) 16%,transparent),transparent 70%)}
.cs-hero .wrap{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:56px;align-items:center;padding-block:72px 80px}
.cs-lock{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:28px;color:var(--ink)}
.cs-lock .cs-rs{height:38px;width:auto;margin:-6px -8px -6px -10px}
.cs-lock i{font-style:normal;color:#565F75;font-size:18px}
.cs-lock img{height:26px;width:auto;display:block}
.cs-lock .cs-cx{height:20px}
.cs-hero h1{font-size:clamp(46px,7.2vw,92px);line-height:.98;letter-spacing:-.035em}
.cs-stand{font:400 clamp(20px,2.1vw,25px)/1.4 var(--display);letter-spacing:-.01em;color:var(--ink);margin-top:24px;max-width:24ch;text-wrap:balance}
.cs-shot img{position:relative;display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:24px;box-shadow:var(--cs-shadow)}
.cs-shot figcaption{margin-top:16px;font-size:13.5px;line-height:1.5;color:#565F75}
@media (max-width:900px){.cs-hero .wrap{grid-template-columns:minmax(0,1fr);gap:40px;padding-block:44px 56px}.cs-stand{max-width:30ch}}

/* numbers */
.cs-band{background:#0F132F;color:#F9F9F3}
.cs-band .wrap{padding-block:56px 60px}
.cs-band .eyebrow{color:var(--teal)}
.cs-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:26px}
.cs-nums div{padding:4px 28px 4px 0;margin-right:28px;border-right:1px solid rgba(249,249,243,.16);min-width:0}
.cs-nums div:last-child{border-right:0;margin-right:0;padding-right:0}
.cs-nums b{display:block;font:500 clamp(34px,4.2vw,54px)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#FFFFFF}
.cs-nums b small{font-size:.5em;font-weight:500;color:var(--teal);letter-spacing:0;margin-left:2px}
.cs-nums span{display:block;margin-top:12px;font-size:15px;line-height:1.45;color:#B4BCD0;max-width:22ch}
@media (max-width:900px){.cs-nums{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}.cs-nums div:nth-child(2){border-right:0;margin-right:0;padding-right:0}}
@media (max-width:460px){.cs-nums div{padding-right:14px;margin-right:14px}.cs-nums span{font-size:14px}}

/* intro */
.cs-intro .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;padding-block:88px 24px;align-items:start}
.cs-intro p{font:400 clamp(20px,2vw,24px)/1.55 var(--display);letter-spacing:-.01em;max-width:32em}
.cs-facts{border-top:2px solid var(--ink);margin:0}
.cs-facts div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.cs-facts dt{font-size:15px;color:#565F75}
.cs-facts dd{margin:0;font:500 22px/1.1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-facts-h{display:block;margin-bottom:12px}
@media (max-width:900px){.cs-intro .wrap{grid-template-columns:minmax(0,1fr);gap:40px;padding-block:56px 8px}}

/* chapters */
.cs-chap .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;padding-block:72px 0;align-items:start}
.cs-chap .cs-copy{min-width:0;max-width:39em}
.cs-chap h2{font-size:clamp(28px,3.2vw,40px);line-height:1.12;margin:10px 0 22px}
.cs-chap .cs-copy p + p{margin-top:18px}
.cs-chap .cs-copy p{color:#2B3149}
.cs-chap .cs-lead{font-weight:600;color:var(--ink)}
.cs-aside{position:sticky;top:24px;min-width:0}
.cs-cap{margin-top:12px;font-size:12.5px;color:#565F75}
@media (max-width:900px){.cs-chap .wrap{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:56px 0}.cs-aside{position:static;max-width:420px}}

/* illustration: WhatsApp chat */
.cs-phone{background:var(--cs-chat);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--cs-shadow)}
.cs-phone .cs-top{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#0B5D5A;color:#FFFFFF;font:600 15px var(--body)}
.cs-phone .cs-top i{width:30px;height:30px;border-radius:50%;background:var(--teal);flex:none}
.cs-phone .cs-top small{display:block;font-weight:400;font-size:12px;opacity:.8}
.cs-msgs{display:flex;flex-direction:column;gap:10px;padding:16px 14px 18px}
.cs-bub{max-width:88%;align-self:flex-start;background:#FFFFFF;color:var(--ink);border-radius:4px 14px 14px 14px;padding:10px 12px;font-size:14.5px;line-height:1.4}
.cs-bub.cs-me{align-self:flex-end;background:var(--cs-bubble);border-radius:14px 4px 14px 14px}
.cs-bub .cs-opt{display:block;margin-top:8px;padding:6px 10px;border:1.5px solid var(--deep);border-radius:8px;text-align:center;font-weight:600;font-size:13.5px;color:var(--deep-ink)}
.cs-bub .cs-opt.cs-on{background:var(--deep-ink);border-color:var(--deep-ink);color:#FFFFFF}
.cs-sync{align-self:center;display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:6px 12px;border-radius:999px;background:var(--ink);color:#FFFFFF;font-size:12.5px;font-weight:600}
.cs-sync svg{width:14px;height:14px;fill:none;stroke:var(--teal);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* illustration: answers card */
.cs-card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:22px 22px 20px;box-shadow:var(--cs-shadow)}
.cs-card .cs-lab{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#565F75}
.cs-card h3{font-size:20px;margin:8px 0 14px}
.cs-qa{margin:0;border-top:1px solid var(--line)}
.cs-qa div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.cs-qa dt{color:#565F75}
.cs-qa dd{margin:0;font-weight:600;text-align:right}
.cs-card .cs-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cs-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--soft);color:var(--deep-ink)}
.cs-tag.cs-dark{background:var(--ink);color:#FFFFFF}

/* responsible AI callout */
.cs-pledge{margin-top:28px;padding:22px 24px;border-radius:16px;background:var(--soft);color:var(--ink)}
.cs-pledge b{display:block;font:500 20px/1.3 var(--display);letter-spacing:-.01em;margin-bottom:8px}
.cs-pledge p{font-size:16px;color:#2B3149}

/* where the time goes */
.cs-time{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.cs-time li{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);font:500 17px/1.35 var(--display);letter-spacing:-.01em}
.cs-time svg{flex:none;width:20px;height:20px;margin-top:2px;fill:none;stroke:var(--deep-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* quote */
.cs-quote .wrap{padding-block:96px 104px}
.cs-quote figure{max-width:940px;margin:0 auto;text-align:left;position:relative;padding-left:clamp(0px,6vw,72px)}
.cs-quote figure::before{content:"“";position:absolute;left:clamp(-6px,0vw,0px);top:-.32em;font:500 clamp(110px,13vw,180px)/1 var(--display);color:var(--teal)}
.cs-quote blockquote{margin:0;font:500 clamp(26px,3.6vw,44px)/1.22 var(--display);letter-spacing:-.025em;text-wrap:balance}
.cs-quote blockquote .cs-close{color:var(--teal);font-size:2.4em;line-height:0;vertical-align:-.36em;margin-left:.05em}
.cs-quote blockquote em{font-style:normal;color:var(--deep-ink)}
.cs-quote figcaption{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:32px;color:var(--ink)}
.cs-quote figcaption b{display:block;font:600 17px var(--body)}
.cs-quote figcaption span span{display:block;font-size:15px;color:#565F75}
.cs-quote .cs-rs{height:44px;width:auto;margin:-6px 0 -6px -12px;color:var(--ink)}
.cs-quote .cs-bar{width:1px;align-self:stretch;background:var(--line)}
@media (max-width:640px){.cs-quote .wrap{padding-block:72px}.cs-quote figure{padding-left:0;padding-top:56px}.cs-quote figure::before{top:-.12em;left:-4px}}
/* keep the moving mark in the page gutter, clear of the headline */
.cs-randstad .fx .m1{left:max(8px,calc(50% - 660px))}
@media (max-width:700px){.cs-randstad .fx .m1{left:auto;right:5%;top:31%}}