/* ===== homepage concept heroes ===== */
.hero-x{position:relative}
.hero-x img{display:block}
.cx-eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin:0 0 16px}
.cx-eyebrow::before{content:"";width:22px;height:1px;background:var(--teal)}
.cx-h1{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:clamp(36px,9.4vw,64px);line-height:1.06;letter-spacing:-.005em;margin:0 0 16px;text-wrap:balance}
.cx-h1 em{font-style:normal;color:var(--teal-d)}
.cx-lede{font-size:16.5px;line-height:1.55;color:var(--ink-2);margin:0 0 22px;max-width:34em}
.cx-cta{display:flex;flex-wrap:wrap;gap:10px}
.cx-cta .btn{flex:1 1 150px;min-height:50px}
.cx-call{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:14.5px;color:var(--ink-2)}
.cx-call a{display:inline-flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none;font-weight:500}
.cx-call svg{width:16px;height:16px;fill:var(--teal-d)}
.cx-dot{color:var(--muted)}
@media (min-width:700px){.cx-cta .btn{flex:0 0 auto}}

/* ---- C: endless product ribbon ---- */
.cxc{padding:34px 0 26px;background:radial-gradient(80% 60% at 100% 0%,rgba(91,191,176,.22),transparent 65%),linear-gradient(180deg,#F6F4EF 0%,#EAF5F2 100%);overflow:hidden}
.cxc-copy{text-align:left}
.cxc-ribbons{margin-top:30px;display:grid;gap:12px}
.cxc-row{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cxc-track{display:flex;gap:12px;width:max-content;animation:cxmq var(--dur,90s) linear infinite}
.cxc-row[data-dir=right] .cxc-track{animation-direction:reverse}
.cxc-row.is-paused .cxc-track,.cxc-row:hover .cxc-track{animation-play-state:paused}
@keyframes cxmq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.cxc-tile{flex:0 0 auto;width:150px;background:#fff;border-radius:10px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 1px 2px rgba(52,72,90,.06),0 10px 24px -16px rgba(52,72,90,.35);transition:transform .3s}
.cxc-tile:hover{transform:translateY(-3px)}
.cxc-ph{display:block;aspect-ratio:1/1;overflow:hidden;background:#fff}
.cxc-ph img{width:100%;height:100%;object-fit:contain;padding:6px}
.cxc-tile.k-mat .cxc-ph img{object-fit:cover;object-position:86% 55%;padding:0}
.cxc-n{display:block;font-size:13.5px;font-weight:500;padding:9px 11px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cxc-s{display:block;font-size:11.5px;color:var(--muted);padding:2px 11px 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cxc-row[data-dir=right] .cxc-tile{width:132px}
.cxc-cats{padding-top:14px}
@media (min-width:900px){.cxc{padding-top:70px}.cxc-copy{text-align:center}.cxc-copy .cx-lede{margin-left:auto;margin-right:auto}.cxc-copy .cx-cta,.cxc-copy .cx-call{justify-content:center}.cxc-copy .cx-eyebrow::before{display:none}.cxc-tile{width:200px}.cxc-row[data-dir=right] .cxc-tile{width:176px}.cxc-ribbons{margin-top:48px;gap:16px}}

@media (prefers-reduced-motion:reduce){
  .cxc-track{animation:none}.cxc-row{overflow-x:auto}
}