.vb { --sg-red: #c42c3b; --sg-red-dark: #a32230; --sg-ink: #1d1d22; --sg-ink2: #3f3f45; --sg-muted: #6b7079; --sg-link: #7a8b9a; --sg-g1: #f6f6f4; --sg-g2: #ebebe8; --sg-g3: #dcdcd8; --sg-g4: #cdcdc8; --sg-line: rgba(0,0,0,.12); --sg-ease: cubic-bezier(.2,.7,.2,1); font-family: Montserrat, var(--font-sans), sans-serif; color: var(--sg-ink); font-weight: 300; -webkit-font-smoothing: antialiased; }
.vb .sg-wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .vb .sg-wrap { padding: 0 24px; } }
.vb a { color: inherit; }
.vb img { max-width: 100%; display: block; }

/* header: subtle language switch (extra specificity beats the header block's own rule) */
.vb .sg-top .sg-top__r .sg-langs { border-color: var(--sg-g2) !important; }
.vb .sg-top .sg-top__r .sg-langs a.sg-lang { color: var(--sg-muted) !important; }
.vb .sg-top .sg-top__r .sg-langs a.sg-lang.is-on { background: var(--sg-g2) !important; color: var(--sg-ink) !important; font-weight: 600; }
.vb .sg-top .sg-top__r .sg-langs a.sg-lang:not(.is-on):hover { color: var(--sg-ink) !important; }

/* hero: calmer headline */
.vb .sgx__title { font-size: clamp(30px, 3.6vw, 52px) !important; font-weight: 500 !important; line-height: 1.12 !important; letter-spacing: -.015em !important; }
.vb .sgx__text { font-size: clamp(15px, 1.15vw, 18px) !important; }
.vb .sgx__eyebrow { font-size: 12px !important; }

/* headings: refined, lighter */
.vb .sg-h { border-left: 0 !important; padding-left: 0 !important; position: relative; padding-top: 16px !important; font-size: clamp(22px, 2vw, 30px) !important; line-height: 1.2 !important; font-weight: 500 !important; letter-spacing: -.01em; margin: 0 0 10px !important; color: var(--sg-ink); text-wrap: balance; }
.vb .sg-h::before { content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 2px; background: var(--sg-red); transform-origin: left; }
.vb .sg-sub { font-size: 15.5px !important; line-height: 1.65 !important; color: var(--sg-muted); font-weight: 300; margin: 0 0 6px !important; max-width: 620px; }
.vb .sgs-h-c { font-size: clamp(22px, 2vw, 28px) !important; font-weight: 500 !important; letter-spacing: -.01em; }
.vb .sg-btn { display: inline-flex !important; align-items: center; gap: 8px; font-size: 13.5px !important; line-height: 20px; padding: 10px 18px !important; border: 1px solid var(--sg-red); text-decoration: none; font-weight: 500 !important; transition: background .25s, color .25s, border-color .25s; }
.vb .sg-btn--fill { background: var(--sg-red); color: #fff; }
.vb .sg-btn--fill:hover { background: var(--sg-red-dark); border-color: var(--sg-red-dark); }
.vb .sg-btn--line { background: transparent; color: var(--sg-red); }
.vb .sg-btn--line::after { content: "→"; transition: transform .25s var(--sg-ease); }
.vb .sg-btn--line:hover { background: var(--sg-red); color: #fff; }
.vb .sg-btn--line:hover::after { transform: translateX(3px); }

/* rhythm */
.vb .sgs { padding: 88px 0 !important; }
.vb .sgs--counters, .vb .sgs--strip, .vb .sgs--page-title, .vb .sgs--quote { padding: 0 !important; }
.vb .sgs--tiles { padding: 88px 0 !important; }
.vb .sgs--tiles .sgs-head { padding-top: 0 !important; }
.vb .sgs-head { margin-bottom: 36px !important; }
.vb .sgs--bg-light { background: var(--sg-g1) !important; }

/* page title band */
.vb .sgs-pt { background: var(--sg-g1) !important; padding: 40px 0 34px !important; }
.vb .sgs-pt h1 { font-size: clamp(22px, 2.2vw, 30px) !important; font-weight: 500 !important; letter-spacing: -.01em; margin: 0 0 8px !important; }
.vb .sgs-bc { font-size: 12.5px !important; }

/* counters */
.vb .sgs-cnt__i { padding: 48px 40px !important; }
.vb .sgs-cnt__i h2 { font-size: clamp(20px, 1.7vw, 26px) !important; font-weight: 500 !important; line-height: 1.25 !important; letter-spacing: -.01em; margin: 0 0 12px !important; padding: 0 !important; }
.vb .sgs-cnt__i p { font-size: 13.5px !important; line-height: 1.7 !important; }

/* collection tiles */
.vb .sgs-tiles { max-width: 1320px; margin: 0 auto; padding: 0 24px; gap: 16px; }
.vb .sgs-tile { aspect-ratio: 4 / 5 !important; background: var(--sg-g2) !important; color: #fff !important; isolation: isolate; }
.vb .sgs-tile img { transition: transform .8s var(--sg-ease) !important; }
.vb .sgs-tile:hover img { transform: scale(1.05) !important; }
.vb .sgs-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(14,14,18,.66) 0%, rgba(14,14,18,.2) 36%, rgba(14,14,18,0) 60%); }
.vb .sgs-tile__cap { z-index: 2; background: none !important; text-align: left !important; padding: 0 24px 22px !important; }
.vb .sgs-tile__cap h3 { font-size: 16.5px !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: 0; margin: 0 0 5px !important; color: #fff; display: flex; align-items: center; gap: 8px; }
.vb .sgs-tile__cap h3::after { content: "→"; font-weight: 300; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s var(--sg-ease); }
.vb .sgs-tile:hover .sgs-tile__cap h3::after { opacity: 1; transform: none; }
.vb .sgs-tile__cap p { font-size: 13px !important; line-height: 1.5 !important; color: rgba(255,255,255,.82) !important; margin: 0 !important; max-width: 300px !important; }

/* text columns */
.vb .sgs-cols { gap: 24px !important; }
.vb .sgs-cols__i { background: #fff; padding: 30px 28px 26px; border-top: 2px solid var(--sg-red); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 40px -30px rgba(0,0,0,.25); }
.vb .sgs-cols__i h2 { font-size: 18px !important; font-weight: 500 !important; margin: 0 0 10px !important; padding: 0 !important; }
.vb .sgs-cols__i p { font-size: 14px !important; line-height: 1.7 !important; margin: 0 0 20px !important; }

/* cards (blog) */
.vb .sgs-cards { gap: 28px !important; }
.vb .sgs-card { box-shadow: none !important; background: transparent !important; }
.vb .sgs-card__img { aspect-ratio: 3 / 2 !important; }
.vb .sgs-card__img img { transition: transform .8s var(--sg-ease); }
.vb .sgs-card:hover .sgs-card__img img { transform: scale(1.05); }
.vb .sgs-card__body { padding: 16px 0 0 !important; }
.vb .sgs-card h4 { font-size: 16px !important; font-weight: 500 !important; line-height: 1.4 !important; padding: 0 !important; }
.vb .sgs-card small { color: var(--sg-red) !important; font-weight: 500; letter-spacing: .04em; }

/* icon cards / values / timeline / quote / cta */
.vb .sgs--icon-cards { padding-top: 88px !important; }
.vb .sgs-ic { margin-top: 0 !important; gap: 20px !important; }
.vb .sgs-ic__i { background: #fff !important; box-shadow: 0 18px 40px -30px rgba(0,0,0,.25); text-align: left !important; padding: 34px 30px 32px !important; }
.vb .sgs-ic__i img { width: 56px !important; height: 56px !important; margin: 0 0 18px !important; }
.vb .sgs-ic__i h3 { font-size: 18px !important; font-weight: 500 !important; }
.vb .sgs-val { gap: 28px 56px !important; }
.vb .sgs-val__i { padding-top: 22px; border-top: 1px solid var(--sg-g2); }
.vb .sgs-chk { background: transparent !important; width: auto !important; height: auto !important; }
.vb .sgs-val__h h3 { font-size: 17px !important; font-weight: 500 !important; }
.vb .sgs-tl__txt h3 { font-size: 20px !important; font-weight: 500 !important; }
.vb .sgs-quote p { font-size: clamp(20px, 2vw, 28px) !important; font-weight: 500 !important; }
.vb .sgs-strip { gap: 0; }
.vb .sgs-strip span { overflow: hidden; }
.vb .sgs-strip img { transition: transform .8s var(--sg-ease); }
.vb .sgs-strip span:hover img { transform: scale(1.06); }
.vb .sgs-cta { padding: 8px 0; }
.vb .sgs-cta h2 { font-size: clamp(20px, 2vw, 26px) !important; font-weight: 500 !important; letter-spacing: -.01em; }

/* product card block */
.vb .sgc__t { font-size: 16px !important; font-weight: 500 !important; }
.vb .sgc__more { font-size: 13px !important; }

/* product page blocks */
.vb .sgo__head h2 { font-size: clamp(20px, 2vw, 26px) !important; font-weight: 500 !important; }

/* ---------- scroll reveal (native scroll-driven animations; static where unsupported) ---------- */
@keyframes vb-sgRise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes vb-sgMask { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(18px); } to { opacity: 1; clip-path: inset(-10% 0 -20% 0); transform: none; } }
@keyframes vb-sgLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vb-sgZoomIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes vb-sgSlideL { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  .vb .sg-h, .vb .sgst__title, .vb .sgs-pt h1, .vb .sgo__head h2, .vb .sgs-cta h2, .vb .sgs-quote p { animation: vb-sgMask linear both; animation-timeline: view(); animation-range: entry 10% entry 75%; }
  .vb .sg-h::before { animation: vb-sgLine linear both; animation-timeline: view(); animation-range: entry 30% entry 100%; }
  .vb .sg-sub, .vb .sgst__eyebrow, .vb .sgst__lead, .vb .sgst__body, .vb .sgst__more, .vb .sgst__sign, .vb .sgs-txt > *, .vb .sgs-cta p, .vb .sgs-cta__b, .vb .sgo__head p { animation: vb-sgRise linear both; animation-timeline: view(); animation-range: entry 10% entry 80%; }
  .vb .sgs-cnt__i, .vb .sgs-tile, .vb .sgs-cols__i, .vb .sgs-card, .vb .sgs-ic__i, .vb .sgs-val__i, .vb .sgs-tl__row, .vb .sgo__form { animation: vb-sgRise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  .vb .sgs-tile:nth-child(3n+2), .vb .sgs-cols__i:nth-child(3n+2), .vb .sgs-card:nth-child(3n+2), .vb .sgs-ic__i:nth-child(3n+2), .vb .sgs-cnt__i:nth-child(2n), .vb .sgs-val__i:nth-child(2n) { animation-range: entry 6% entry 80%; }
  .vb .sgs-tile:nth-child(3n), .vb .sgs-cols__i:nth-child(3n), .vb .sgs-card:nth-child(3n), .vb .sgs-ic__i:nth-child(3n), .vb .sgs-cnt__i:nth-child(4n) { animation-range: entry 12% entry 90%; }
  .vb .sgs-strip span img, .vb .sgst__img1 img { animation: vb-sgZoomIn linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .vb .sgst__img2 { animation: vb-sgRise linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
  .vb .sgst__badge { animation: vb-sgSlideL linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
  .vb .sgc { animation: vb-sgRise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
}
@media (prefers-reduced-motion: reduce) { .vb * { animation: none !important; } }

@media (max-width: 991px) { .vb .sgs-tiles { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 767px) {
  .vb .sgx__title { font-size: 28px !important; }
  .vb .sgx__text { font-size: 14.5px !important; }
  .vb .sg-h { font-size: 21px !important; padding-top: 12px !important; }
  .vb .sg-h::before { width: 28px; }
  .vb .sg-sub { font-size: 14px !important; line-height: 1.6 !important; }
  .vb .sgs, .vb .sgs--tiles, .vb .sgs--icon-cards { padding: 52px 0 !important; }
  .vb .sgs-head { margin-bottom: 22px !important; }
  .vb .sgs-pt { padding: 26px 0 22px !important; }
  .vb .sgs-pt h1 { font-size: 20px !important; }
  .vb .sgs-cnt__i { padding: 26px 20px !important; }
  .vb .sgs-cnt__i h2 { font-size: 19px !important; margin-bottom: 6px !important; }
  .vb .sgs-cnt__i p { font-size: 13px !important; line-height: 1.6 !important; }
  .vb .sgs-tiles { grid-template-columns: 1fr !important; padding: 0 16px; gap: 12px; }
  .vb .sgs-tile { aspect-ratio: 4 / 3 !important; }
  .vb .sgs-tile__cap { padding: 0 18px 16px !important; }
  .vb .sgs-tile__cap h3 { font-size: 16px !important; }
  .vb .sgs-tile__cap h3::after { opacity: 1; transform: none; }
  .vb .sgs-tile__cap p { display: block !important; font-size: 12.5px !important; }
  .vb .sgs-cols__i { padding: 24px 20px 20px; }
  .vb .sgs-cols__i h2 { font-size: 17px !important; }
  .vb .sgs-cols__i p { font-size: 13.5px !important; }
  .vb .sgs-card h4 { font-size: 15px !important; }
  .vb .sgs-ic__i { padding: 24px 20px !important; }
  .vb .sgs-ic__i h3, .vb .sgs-tl__txt h3 { font-size: 17px !important; }
  .vb .sgs-tl__txt p, .vb .sgs-val__i p, .vb .sgs-ic__i p { font-size: 13px !important; }
  .vb .sgs-txt { font-size: 14px !important; line-height: 1.7 !important; }
  .vb .sgs-quote p { font-size: 19px !important; }
  .vb .sgs-strip { grid-template-columns: repeat(3, 1fr) !important; }
  .vb .sgs-cta h2 { font-size: 19px !important; }
  .vb .sgs-cta p { font-size: 14px !important; }
  .vb .sg-btn { padding: 10px 16px !important; font-size: 13px !important; }
  .vb .sgc__t { font-size: 15px !important; }
}