/* Klien kami: highlight numbers and a two-row client carousel. */

/* Highlight band: the two numbers that matter to procurement. */
.highlight-band{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 54px}
.highlight{padding:38px 40px 34px 0}
.highlight+.highlight{padding-left:40px;border-left:1px solid var(--line)}
.highlight-num{font-family:var(--serif);font-weight:500;font-size:clamp(64px,7.4vw,108px);line-height:.95;letter-spacing:-.02em;color:var(--navy);font-variant-numeric:lining-nums tabular-nums;margin:0}
.highlight-num sup{font-size:.42em;color:var(--gold-dark);vertical-align:.9em;margin-left:4px}
.highlight-unit{margin:14px 0 6px;font-size:12px;font-weight:750;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dark)}
.highlight-cap{margin:0;font-size:15px;line-height:1.7;color:var(--muted);max-width:380px}
.hero-proof{font-size:13px;letter-spacing:.02em;color:rgba(247,245,239,.82)}
.hero-proof b{color:#e0c47c;font-weight:700}

/* Carousel */
.marquee{position:relative;margin:0;display:grid;gap:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-row{overflow:hidden}
.marquee-track{list-style:none;margin:0;padding:0;display:flex;width:max-content;gap:14px;animation:marquee var(--dur,46s) linear infinite}
.marquee-row.is-reverse .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-50% - 7px))}}

.logo-item{flex:none;width:250px;height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#fff;border:1px solid var(--line);position:relative;transition:background .4s,border-color .4s}
.logo-item:before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.logo-box{height:64px;width:100%;display:flex;align-items:center;justify-content:center}
.logo-box img{max-height:54px;max-width:66%;width:auto;height:auto;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.75;transition:filter .45s,opacity .45s,transform .45s cubic-bezier(.22,1,.36,1)}
.logo-item.is-light-logo .logo-box img{filter:brightness(0);opacity:.62}
.logo-name{font-size:11px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;padding-inline:12px;line-height:1.4;transition:color .3s}
.logo-item:hover{border-color:rgba(140,108,38,.45)}
.logo-item:hover:before{transform:scaleX(1)}
.logo-item:hover .logo-box img{filter:none;opacity:1;transform:scale(1.05)}
.logo-item:hover .logo-name{color:var(--ink)}
.logo-item.is-light-logo:hover{background:var(--navy)}
.logo-item.is-light-logo:hover .logo-name{color:var(--cream,#f7f5ef)}

.marquee-names .marquee-track{gap:0}
.name-item{flex:none;display:flex;align-items:center;font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.4vw,34px);color:var(--ink);opacity:.72;padding:10px 34px;white-space:nowrap}
.name-item:after{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);margin-left:68px;opacity:.8}

.client-note{margin:30px auto 0;max-width:820px;text-align:center;font-size:12px;line-height:1.8;color:var(--muted)}

@media (hover:none){
  .logo-box img,.logo-item.is-light-logo .logo-box img{filter:none;opacity:1}
  .logo-item.is-light-logo{background:var(--navy)}
  .logo-item.is-light-logo .logo-name{color:var(--cream,#f7f5ef)}
}
@media (max-width:720px){
  .highlight-band{grid-template-columns:1fr;margin-bottom:36px}
  .highlight{padding:28px 0 26px}
  .highlight+.highlight{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .hero-proof{font-size:12px}
  .logo-item{width:190px;height:136px;gap:12px}
  .logo-box{height:48px}.logo-box img{max-height:42px}
  .logo-name{font-size:10px}
  .name-item{padding:8px 22px}
  .name-item:after{margin-left:44px}
}
@media (prefers-reduced-motion:reduce){
  .marquee{margin:0;-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .marquee-track [aria-hidden=true]{display:none}
}
@media print{
  .marquee{margin:0;-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none;flex-wrap:wrap;width:auto}
  .marquee-track [aria-hidden=true]{display:none}
  .logo-item{width:30%;height:90px;break-inside:avoid}
  .logo-box img{filter:none;opacity:1}
  .logo-item.is-light-logo .logo-box img{filter:brightness(0)}
}

.clients{overflow-x:clip}

/* Attribution tags, names-row label, pause control */
.logo-tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);opacity:.8;margin-top:-8px}
.logo-tag.is-direct{color:#7a5a1a;opacity:1}
.logo-item.is-light-logo:hover .logo-tag{color:#e0c47c}
.marquee-label{margin:10px 0 0;text-align:center;font-size:11px;font-weight:750;letter-spacing:.2em;text-transform:uppercase;color:#7a5a1a}
.marquee-wrap{position:relative}
.marquee-toggle{position:absolute;right:0;top:-46px;width:36px;height:36px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;z-index:2;transition:border-color .3s}
.marquee-toggle:hover{border-color:rgba(122,90,26,.5)}
.marquee-toggle span{width:10px;height:12px;border-inline:3px solid var(--navy)}
.marquee-toggle[aria-pressed=true] span{width:0;height:0;border:0;border-left:10px solid var(--navy);border-block:6px solid transparent;margin-left:3px}
.marquee-wrap.is-paused .marquee-track{animation-play-state:paused}
.hero-baseline>.hero-proof{display:block!important;font-size:12.5px!important;line-height:1.6;max-width:520px}
@media (max-width:720px){
  .logo-name{font-size:11px}
  .logo-tag{font-size:11px;margin-top:-6px}
  .marquee-toggle{top:-42px}
}
@media (prefers-reduced-motion:reduce){
  .marquee-toggle{display:none}
  .name-item{white-space:normal;text-align:center;padding-inline:12px}
  .name-item:after{display:none}
}