/* KARMA_ABOUT_BACKGROUND_WEBP_FIX_V1_0 */
/* KARMA_ABOUT_MOBILE_V5_3 */
:root {
  --karma-about-black: #050505;
  --karma-about-ink: #121212;
  --karma-about-paper: #f6f3ee;
  --karma-about-line: rgba(17, 17, 17, .12);
  --karma-about-light-line: rgba(255, 255, 255, .14);
  --karma-about-muted: #6c655d;
  --karma-about-accent: #b89b76;
}
.karma-about-page,
.karma-about-page * { box-sizing: border-box; }
.karma-about-page { overflow: hidden; background: #fff; color: var(--karma-about-ink); font-family: Ubuntu, Arial, sans-serif; }
.karma-about-page img { display:block; max-width:100%; }
.karma-about-shell { width: min(1320px, calc(100% - 40px)); margin: 0 auto; }
.karma-about-section { position: relative; padding: 112px 0; }
.karma-about-kicker { margin:0 0 18px; color: rgba(255,255,255,.74); font-size:12px; font-weight:700; letter-spacing:.2em; line-height:1.4; text-transform:uppercase; }
.karma-about-kicker--dark { color:#7b7063; }
.karma-about-button { display:inline-flex; min-height:56px; align-items:center; justify-content:center; gap:14px; padding:0 24px; border:1px solid currentColor; font-size:14px; font-weight:700; letter-spacing:.04em; text-decoration:none; transition:transform .2s ease, background .2s ease, color .2s ease; }
.karma-about-button span { font-size:18px; line-height:1; }
.karma-about-button:hover { transform:translateY(-2px); }
.karma-about-button--light { color:#fff; }
.karma-about-button--light:hover { background:#fff; color:#080808; }

.karma-about-hero { position:relative; min-height:760px; overflow:hidden; background: linear-gradient(90deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.78) 36%, rgba(0,0,0,.40) 62%, rgba(0,0,0,.12) 78%), linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.38)), url('/static/about-optimized-v1/about-hero-v3-desktop.webp') center center / cover no-repeat, #060606; color:#fff; }
.karma-about-hero::after { position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size:52px 52px; content:""; pointer-events:none; }
.karma-about-hero__inner { position:relative; z-index:2; display:flex; min-height:760px; align-items:center; }
.karma-about-hero__content { max-width:620px; padding:88px 0; }
.karma-about-hero__content h1 { margin:0; color:#fff; font-size:clamp(62px, 7vw, 112px); font-weight:700; letter-spacing:-.06em; line-height:.92; }
.karma-about-hero__lead { max-width:560px; margin:28px 0 0; color:#fff; font-size:clamp(22px, 2.25vw, 30px); font-weight:500; letter-spacing:-.025em; line-height:1.28; }
.karma-about-hero__text { max-width:540px; margin:24px 0 36px; color:rgba(255,255,255,.72); font-size:17px; line-height:1.75; }

.karma-about-editorial__grid { display:grid; grid-template-columns:230px minmax(0,1fr); gap:72px; }
.karma-about-section__label { display:flex; align-items:flex-start; gap:17px; padding-top:12px; }
.karma-about-section__label span { display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center; border:1px solid var(--karma-about-line); border-radius:50%; color:#615c55; font-size:11px; font-weight:700; }
.karma-about-section__label p { margin:10px 0 0; color:#77716a; font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.karma-about-editorial__copy h2,
.karma-about-heading h2,
.karma-about-ukraine__header h2,
.karma-about-final h2 { margin:0; font-size:clamp(40px, 5vw, 72px); font-weight:700; letter-spacing:-.055em; line-height:1.02; }
.karma-about-editorial__lead { max-width:960px; margin:36px 0 0; font-size:clamp(22px, 2.4vw, 32px); font-weight:500; letter-spacing:-.025em; line-height:1.42; }
.karma-about-editorial__columns { display:grid; max-width:960px; grid-template-columns:repeat(2, minmax(0,1fr)); gap:50px; margin-top:40px; }
.karma-about-editorial__columns p,
.karma-about-heading > p,
.karma-about-final > p { margin:0; color:#69635d; font-size:17px; line-height:1.8; }
.karma-about-editorial__ribbon { display:flex; flex-wrap:wrap; gap:10px; margin-top:42px; }
.karma-about-editorial__ribbon span { display:inline-flex; align-items:center; padding:12px 16px; border:1px solid var(--karma-about-line); border-radius:999px; background:#f7f4ee; color:#26221d; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }

.karma-about-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:58px; }
.karma-about-heading > p { max-width:470px; color:rgba(255,255,255,.62); }
.karma-about-heading--light h2 { color:#fff; }
.karma-about-heading--compact { margin-bottom:32px; }

.karma-about-process { background: radial-gradient(circle at 14% 20%, rgba(184,155,118,.12), transparent 30%), linear-gradient(180deg, #060606 0%, #0c0c0c 100%); color:#fff; }
.karma-about-process-cards { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.karma-about-process-card,
.karma-about-process-quote { border:1px solid rgba(255,255,255,.1); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); padding:28px; }
.karma-about-process-card span { display:inline-block; color:rgba(255,255,255,.5); font-size:10px; font-weight:700; letter-spacing:.18em; }
.karma-about-process-card h3 { margin:18px 0 14px; font-size:28px; line-height:1.1; letter-spacing:-.03em; }
.karma-about-process-card p { margin:0; color:rgba(255,255,255,.68); font-size:15px; line-height:1.78; }
.karma-about-process-quote { grid-column:1 / -1; display:flex; align-items:center; justify-content:center; min-height:170px; }
.karma-about-process-quote p { margin:0; max-width:940px; color:#fff; font-size:clamp(24px, 2.4vw, 40px); font-weight:500; line-height:1.2; letter-spacing:-.03em; text-align:center; }

.karma-about-difference { background:var(--karma-about-paper); }
.karma-about-difference .karma-about-heading > p { color:#6f6961; }
.karma-about-features { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.karma-about-feature { position:relative; min-height:300px; padding:30px 28px; border:1px solid var(--karma-about-line); background:rgba(255,255,255,.52); transition:transform .2s ease, background .2s ease; }
.karma-about-feature:hover { transform:translateY(-4px); background:#fff; }
.karma-about-feature > span { display:inline-block; color:#8f877e; font-size:10px; font-weight:700; letter-spacing:.18em; }
.karma-about-feature h3 { margin:24px 0 14px; font-size:26px; line-height:1.12; letter-spacing:-.03em; }
.karma-about-feature p { margin:0; color:#6f6961; font-size:15px; line-height:1.76; }

.karma-about-collections { background: radial-gradient(circle at 82% 12%, rgba(184,155,118,.11), transparent 26%), linear-gradient(180deg, #040404 0%, #090909 100%); color:#fff; }
.karma-about-collections-slider { position:relative; }
.karma-about-collections__viewport { overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; scroll-snap-type:x mandatory; }
.karma-about-collections__viewport::-webkit-scrollbar { display:none; }
.karma-about-collection-track { display:flex; gap:16px; padding:6px 0 2px; }
.karma-about-collection { position:relative; overflow:hidden; flex:0 0 170px; width:170px; height:292px; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:#121212; color:#fff; text-decoration:none; box-shadow:0 24px 54px rgba(0,0,0,.24); scroll-snap-align:start; }
.karma-about-collection::before { position:absolute; inset:0; z-index:2; background:linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.45) 38%, rgba(0,0,0,.10) 74%); content:""; }
.karma-about-collection img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.karma-about-collection:hover img { transform:scale(1.04); }
.karma-about-collection > span { position:absolute; z-index:3; right:14px; bottom:14px; left:14px; display:grid; gap:6px; }
.karma-about-collection small { color:rgba(255,255,255,.5); font-size:9px; font-weight:700; letter-spacing:.18em; }
.karma-about-collection strong { font-size:14px; line-height:1.18; letter-spacing:-.02em; }
.karma-about-collection em { display:none; }
.karma-about-collections__controls { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:22px; }
.karma-about-collections__arrow { width:46px; height:46px; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:transparent; color:#fff; font-size:22px; line-height:1; cursor:pointer; transition:background .2s ease, transform .2s ease; }
.karma-about-collections__arrow:hover { background:rgba(255,255,255,.08); transform:translateY(-2px); }
.karma-about-collections__all { display:inline-flex; min-height:46px; align-items:center; justify-content:center; padding:0 20px; border:1px solid rgba(255,255,255,.18); color:#fff; text-decoration:none; font-size:13px; font-weight:700; letter-spacing:.04em; }
.karma-about-collections__all:hover { background:#fff; color:#0a0a0a; }
.karma-about-collections__links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 28px; margin-top:34px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12); }
.karma-about-collections__links a { color:rgba(255,255,255,.78); text-decoration:none; line-height:1.75; }
.karma-about-collections__links a:hover { color:#fff; }
.karma-about-collections__links strong { color:#fff; }

.karma-about-ukraine { background: radial-gradient(circle at 84% 18%, rgba(184,155,118,.18), transparent 28%), linear-gradient(160deg, #0b0b0b 0%, #131313 100%); color:#fff; }
.karma-about-ukraine__header { display:flex; align-items:end; justify-content:space-between; gap:48px; margin-bottom:48px; }
.karma-about-ukraine__header > p { max-width:420px; margin:0; color:rgba(255,255,255,.6); font-size:16px; line-height:1.7; }
.karma-about-ukraine__grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:16px; }
.karma-about-ukraine__card { min-height:270px; padding:28px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); }
.karma-about-ukraine__card--large { min-height:320px; }
.karma-about-ukraine__card span { color:rgba(255,255,255,.48); font-size:10px; font-weight:700; letter-spacing:.18em; }
.karma-about-ukraine__card h3 { margin:24px 0 14px; color:#fff; font-size:28px; letter-spacing:-.03em; }
.karma-about-ukraine__card p { margin:0; color:rgba(255,255,255,.64); font-size:15px; line-height:1.78; }

.karma-about-final { position:relative; min-height:620px; overflow:hidden; background:url('/static/about-optimized-v1/about-story-v3-desktop.webp') center center / cover no-repeat, #070707; color:#fff; }
.karma-about-final__overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.44) 0%, rgba(0,0,0,.54) 35%, rgba(0,0,0,.66) 100%); }
.karma-about-final__inner { position:relative; z-index:2; display:flex; min-height:620px; max-width:860px; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.karma-about-final h2 { max-width:840px; color:#fff; }
.karma-about-final__inner > p { max-width:720px; margin-top:28px; color:rgba(255,255,255,.78); font-size:18px; line-height:1.8; }
.karma-about-final__signature { color:#fff !important; font-size:20px !important; font-weight:500; }
.karma-about-final .karma-about-button { margin-top:38px; }

@media (max-width: 1180px) {
  .karma-about-features { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .karma-about-ukraine__grid { grid-template-columns:1fr; }
  .karma-about-collection { flex-basis:160px; width:160px; height:280px; }
}
@media (max-width: 960px) {
  .karma-about-shell { width:min(100% - 32px, 780px); }
  .karma-about-section { padding:82px 0; }
  .karma-about-hero { min-height:680px; background-position:70% center; }
  .karma-about-hero__inner { min-height:680px; }
  .karma-about-editorial__grid { grid-template-columns:1fr; gap:48px; }
  .karma-about-editorial__columns { grid-template-columns:1fr; gap:20px; }
  .karma-about-heading, .karma-about-ukraine__header { display:grid; gap:24px; }
  .karma-about-process-cards { grid-template-columns:1fr; }
  .karma-about-features { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .karma-about-collections__links { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .karma-about-shell { width:calc(100% - 24px); }
  .karma-about-section { padding:46px 0; }
  .karma-about-kicker { margin-bottom:10px; font-size:10px; letter-spacing:.18em; }
  .karma-about-button { width:100%; min-height:50px; gap:12px; padding:0 18px; font-size:13px; }

  .karma-about-hero {
    min-height:520px;
    background:
      linear-gradient(180deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.52) 34%, rgba(0,0,0,.86) 100%),
      url('/static/about-optimized-v1/about-hero-v3-mobile.webp') 73% 34% / cover no-repeat,
      #060606;
  }
  .karma-about-hero__inner { min-height:520px; align-items:flex-end; }
  .karma-about-hero__content { max-width:none; width:100%; padding:44px 0 30px; }
  .karma-about-hero__content h1 { font-size:clamp(48px, 15vw, 74px); }
  .karma-about-hero__lead { max-width:95%; margin-top:16px; font-size:18px; line-height:1.24; }
  .karma-about-hero__text { max-width:none; margin:16px 0 22px; font-size:15px; line-height:1.56; }

  .karma-about-editorial__grid { gap:26px; }
  .karma-about-section__label { gap:12px; padding-top:0; }
  .karma-about-section__label span { width:34px; height:34px; flex-basis:34px; font-size:10px; }
  .karma-about-section__label p { margin:8px 0 0; font-size:11px; }
  .karma-about-editorial__copy h2,
  .karma-about-heading h2,
  .karma-about-ukraine__header h2,
  .karma-about-final h2 { font-size:34px; }
  .karma-about-editorial__lead { margin-top:18px; font-size:18px; line-height:1.45; }
  .karma-about-editorial__columns { margin-top:18px; gap:14px; }
  .karma-about-editorial__columns p,
  .karma-about-heading > p,
  .karma-about-final > p,
  .karma-about-ukraine__header > p { font-size:15px; line-height:1.68; }
  .karma-about-editorial__ribbon { margin-top:22px; gap:8px; }
  .karma-about-editorial__ribbon span { padding:8px 12px; border-radius:999px; font-size:11px; letter-spacing:.04em; }

  .karma-about-heading,
  .karma-about-ukraine__header { gap:18px; margin-bottom:22px; }

  .karma-about-process-cards { gap:12px; }
  .karma-about-process-card,
  .karma-about-process-quote { padding:18px 16px; border-radius:16px; }
  .karma-about-process-card h3 { margin:10px 0 8px; font-size:24px; }
  .karma-about-process-card p { font-size:14px; line-height:1.6; }
  .karma-about-process-quote { min-height:0; }
  .karma-about-process-quote p { font-size:22px; line-height:1.22; text-align:left; }

  .karma-about-features { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .karma-about-feature { min-height:0; padding:18px 16px; border-radius:16px; }
  .karma-about-feature h3 { margin:12px 0 10px; font-size:22px; }
  .karma-about-feature p { font-size:14px; line-height:1.58; }

  .karma-about-collections { padding-top:46px; padding-bottom:46px; }
  .karma-about-collection-track { gap:10px; padding:4px 0 0; }
  .karma-about-collection { flex:0 0 108px; width:108px; height:168px; border-radius:14px; }
  .karma-about-collection::before { background:linear-gradient(to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.38) 54%, rgba(0,0,0,.02) 100%); }
  .karma-about-collection img { object-fit:contain; background:#f2f2f2; }
  .karma-about-collection > span { right:8px; bottom:8px; left:8px; gap:4px; }
  .karma-about-collection strong { font-size:11px; line-height:1.14; }
  .karma-about-collection small { font-size:8px; }
  .karma-about-collections__controls { gap:8px; margin-top:14px; }
  .karma-about-collections__arrow { width:36px; height:36px; border-radius:10px; font-size:18px; }
  .karma-about-collections__all { flex:1 1 auto; min-height:36px; padding:0 14px; border-radius:10px; font-size:12px; }
  .karma-about-collections__links { grid-template-columns:1fr; gap:10px; margin-top:18px; padding-top:18px; }
  .karma-about-collections__links a { display:block; padding:12px 14px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(255,255,255,.03); font-size:14px; line-height:1.58; }
  .karma-about-collections__links strong { display:block; margin-bottom:4px; font-size:15px; }

  .karma-about-ukraine__grid { gap:12px; }
  .karma-about-ukraine__card,
  .karma-about-ukraine__card--large { min-height:0; padding:18px 16px; border-radius:16px; }
  .karma-about-ukraine__card h3 { margin:12px 0 10px; font-size:22px; }
  .karma-about-ukraine__card p { font-size:14px; line-height:1.6; }

  .karma-about-final {
    min-height:520px;
    background:
      linear-gradient(180deg, rgba(0,0,0,.56) 0%, rgba(0,0,0,.62) 36%, rgba(0,0,0,.80) 100%),
      url('/static/about/about-story-v4.png') 64% center / cover no-repeat,
      #070707;
  }
  .karma-about-final__overlay { display:none; }
  .karma-about-final__inner { min-height:520px; align-items:flex-start; justify-content:flex-end; text-align:left; padding:42px 0 30px; }
  .karma-about-final__inner > p { max-width:320px; margin-top:14px; font-size:15px; line-height:1.64; color:rgba(255,255,255,.84); }
  .karma-about-final__signature { max-width:300px; margin-top:16px !important; font-size:18px !important; line-height:1.35 !important; }
  .karma-about-final .karma-about-button { width:auto; min-width:220px; margin-top:22px; background:#fff; color:#0a0a0a; border-color:#fff; }
}

@media (max-width: 480px) {
  .karma-about-section { padding:40px 0; }
  .karma-about-hero { min-height:500px; }
  .karma-about-hero__inner { min-height:500px; }
  .karma-about-hero__content h1 { font-size:46px; }
  .karma-about-editorial__copy h2,
  .karma-about-heading h2,
  .karma-about-ukraine__header h2,
  .karma-about-final h2 { font-size:30px; }
  .karma-about-process-card h3,
  .karma-about-feature h3,
  .karma-about-ukraine__card h3 { font-size:20px; }
  .karma-about-features { grid-template-columns:1fr; }
  .karma-about-collection { flex:0 0 102px; width:102px; height:158px; }
  .karma-about-final { min-height:500px; background-position:66% center; }
  .karma-about-final__inner { min-height:500px; }
  .karma-about-final .karma-about-button { width:100%; min-width:0; }
}

@media (max-width: 640px) {
  .karma-about-page { padding-bottom:0 !important; }
  .karma-about-hero__content { position:relative; z-index:2; }
  .karma-about-editorial__ribbon { display:none; }
  .karma-about-collections__links { display:none !important; }
  .karma-about-process-card,
  .karma-about-process-quote,
  .karma-about-feature,
  .karma-about-ukraine__card,
  .karma-about-ukraine__card--large {
    box-shadow:0 14px 34px rgba(0,0,0,.06);
  }
  .karma-about-process-card span,
  .karma-about-feature > span,
  .karma-about-ukraine__card span { display:inline-flex; margin-bottom:2px; }
  .karma-about-collections__viewport { margin:0 -12px; padding:0 12px; }
  .karma-about-collections__controls { align-items:stretch; }
  .karma-about-collections__all { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .karma-about-final {
    min-height:540px;
    background:
      linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.52) 34%, rgba(0,0,0,.78) 100%),
      url('/static/about-optimized-v1/about-story-v5-mobile.webp') 66% center / cover no-repeat,
      #070707;
  }
}

@media (max-width: 480px) {
  .karma-about-page { padding-bottom:0 !important; }
  .karma-about-shell { width:calc(100% - 20px); }
  .karma-about-hero { min-height:470px; }
  .karma-about-hero__inner { min-height:470px; }
  .karma-about-hero__content { padding:38px 0 24px; }
  .karma-about-hero__content h1 { font-size:42px; }
  .karma-about-hero__lead { font-size:16px; max-width:86%; }
  .karma-about-hero__text { font-size:14px; margin:14px 0 18px; }
  .karma-about-button { min-height:46px; font-size:12px; }
  .karma-about-button span { font-size:16px; }
  .karma-about-section__label { gap:10px; }
  .karma-about-section__label span { width:32px; height:32px; flex-basis:32px; }
  .karma-about-editorial__copy h2,
  .karma-about-heading h2,
  .karma-about-ukraine__header h2,
  .karma-about-final h2 { font-size:28px; }
  .karma-about-editorial__lead { font-size:17px; }
  .karma-about-editorial__columns p,
  .karma-about-heading > p,
  .karma-about-final > p,
  .karma-about-ukraine__header > p { font-size:14px; line-height:1.6; }
  .karma-about-process-cards { gap:10px; }
  .karma-about-process-card,
  .karma-about-process-quote,
  .karma-about-feature,
  .karma-about-ukraine__card,
  .karma-about-ukraine__card--large { padding:16px 14px; border-radius:14px; }
  .karma-about-process-card h3,
  .karma-about-feature h3,
  .karma-about-ukraine__card h3 { font-size:18px; }
  .karma-about-process-card p,
  .karma-about-feature p,
  .karma-about-ukraine__card p { font-size:13px; line-height:1.55; }
  .karma-about-process-quote p { font-size:18px; }
  .karma-about-features { gap:8px; }
  .karma-about-collection { flex:0 0 96px; width:96px; height:148px; }
  .karma-about-collection strong { font-size:10px; }
  .karma-about-collections__links { gap:8px; margin-top:14px; padding-top:14px; }
  .karma-about-collections__links a { padding:10px 12px; font-size:13px; line-height:1.5; }
  .karma-about-collections__links strong { font-size:14px; }
  .karma-about-final { min-height:500px; background-position:70% center; }
  .karma-about-final__inner { min-height:500px; padding:34px 0 22px; }
  .karma-about-final__inner > p { font-size:14px; max-width:280px; }
  .karma-about-final__signature { font-size:16px !important; max-width:250px; }
}

@media (prefers-reduced-motion: reduce) {
  .karma-about-page *, .karma-about-page *::before, .karma-about-page *::after { scroll-behavior:auto !important; transition:none !important; }
}