/* About us – Meluzína (podle návrhu ve Figmě, uzel 68:1605)
   Načítá se na všech stránkách, proto je vše uzavřené pod .mx-about / body.in-about-us.
   Obrázky a videa leží vedle tohoto souboru v /user/documents/upload/. Písmo Space Grotesk načítá about-us-2.js (Shoptet nepovoluje nahrát .woff2). */


/* ---------- stránka: obsah přes celou šířku, H1 jen pro čtečky a Google ---------- */
body.in-about-us{overflow-x:clip}
html body.in-about-us .content-inner .sectionDescription>h1{display:block!important;position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.mx-about{
  --mxa-pad:clamp(20px,8.6vw,128px);
  --mxa-grotesk:'Space Grotesk','Inter',sans-serif;
  --mxa-arial:Arial,'Helvetica Neue',Helvetica,sans-serif;
  position:relative;width:100vw;margin-left:calc(50% - 50vw);
  color:#0a0a0a;font-family:'Inter',sans-serif;text-align:left
}
.mx-about *,.mx-about *::before,.mx-about *::after{box-sizing:border-box}
.mx-about h2,.mx-about h3,.mx-about p{margin:0;padding:0;text-transform:none;letter-spacing:normal}
.mx-about img{display:block;max-width:100%;height:auto;border:0}
.mx-about .mxa-wrap{max-width:calc(1226px + 2 * var(--mxa-pad));margin:0 auto;padding-left:var(--mxa-pad);padding-right:var(--mxa-pad)}
.mx-about .mxa-hero__media,.mx-about .mxa-source__media,.mx-about .mxa-wall{font-size:0;line-height:0}
.mx-about .mxa-sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* nadpisy ve Space Grotesk (přebíjí globální Inter z hlavičky) */
.mx-about .mxa-h1,.mx-about .mxa-h2,.mx-about .mxa-hero__motto{font-family:var(--mxa-grotesk)!important;font-weight:400;letter-spacing:normal!important}
.mx-about .mxa-h1{font-size:clamp(38px,4.32vw,64px);line-height:.94}
.mx-about .mxa-h2{font-size:clamp(30px,3.24vw,48px);line-height:1.25}

/* ---------- 1) hero: video s mottem ---------- */
.mx-about .mxa-hero{position:relative;display:flex;align-items:center;justify-content:center;min-height:clamp(420px,49.1vw,728px);padding:48px var(--mxa-pad);overflow:hidden;background:#2f3d2c}
.mx-about .mxa-hero__media{position:absolute;inset:0;background:url(about-hero.jpg) center/cover no-repeat}
.mx-about .mxa-hero__media::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18)}
.mx-about .mxa-hero__media video,.mx-about .mxa-source__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.mx-about .is-playing video{opacity:1}
.mx-about .mxa-hero__motto{position:relative;z-index:1;font-size:clamp(38px,4.59vw,68px)!important;line-height:1.15;letter-spacing:-.051em!important;color:#ddd;text-align:center;text-shadow:0 1px 18px rgba(0,0,0,.3)}

/* ---------- 2) úvod přes fotku ---------- */
.mx-about .mxa-story{position:relative;display:flex;align-items:center;min-height:clamp(560px,54vw,800px);padding:clamp(64px,6.75vw,100px) 0;color:#fff;background:#7a7a7a url(about-story.jpg) center/cover no-repeat}
.mx-about .mxa-story::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(0,0,0,0) 55%)}
.mx-about .mxa-story .mxa-wrap{position:relative;width:100%}
.mx-about .mxa-story__text{max-width:556px}
.mx-about .mxa-story .mxa-h1{color:#fff;margin-bottom:40px}
.mx-about .mxa-story p{font-size:18px;font-weight:500;line-height:1.6;letter-spacing:-.011em}
.mx-about .mxa-story p+p{margin-top:1.6em}
.mx-about .mxa-story strong{font-weight:700}

/* ---------- 3) jak vzniká oblečení: koloběh ve 4 krocích ---------- */
.mx-about .mxa-process{position:relative;padding:clamp(150px,10vw,160px) 0 clamp(64px,6.75vw,100px);background:#21507f url(about-process.jpg) right bottom/cover no-repeat}
.mx-about .mxa-process__label{position:absolute;z-index:2;top:-91px;right:max(7.4vw,calc(50vw - 632px));width:clamp(240px,29.4vw,436px)}
.mx-about .mxa-process__label img{width:100%}
.mx-about .mxa-cycle{display:grid;grid-template-columns:minmax(0,469fr) minmax(48px,261fr) minmax(0,454fr);grid-template-rows:auto clamp(80px,12.75vw,189px) auto;align-items:end}
.mx-about .mxa-step{position:relative;container-type:inline-size;justify-self:center;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
.mx-about .mxa-step__img{width:100%}
.mx-about .mxa-step__note{position:absolute;display:flex;align-items:center;margin:0;background:no-repeat 0 0/100% 100%;font-family:var(--mxa-arial);line-height:1.15;letter-spacing:.06em;color:#000}
.mx-about .mxa-step--1{grid-area:1/1}
.mx-about .mxa-step--2{grid-area:1/3}
.mx-about .mxa-step--3{grid-area:3/3;align-self:center}
.mx-about .mxa-step--4{grid-area:3/1;align-self:center}
.mx-about .mxa-arrow{justify-self:center;align-self:center;width:15px;height:auto}
.mx-about .mxa-arrow--right{grid-area:1/2;transform:rotate(-90deg);align-self:end;margin-bottom:clamp(40px,7vw,106px)}
.mx-about .mxa-arrow--down{grid-area:2/3}
.mx-about .mxa-arrow--left{grid-area:3/2;transform:rotate(90deg)}
.mx-about .mxa-arrow--up{grid-area:2/1;transform:rotate(180deg)}
.mx-about .mxa-step--1{width:79.0%}
.mx-about .mxa-step--1 .mxa-step__note{left:14.3%;top:44.02%;width:73.55%;height:40.86%;padding:10.26% 2.28% 1.34% 12.38%;--fs:4.05cqw;font-size:var(--fs);background-image:url(about-note1.png)}
.mx-about .mxa-step--2{width:93.9%}
.mx-about .mxa-step--2 .mxa-step__note{left:6.21%;top:38.82%;width:79.95%;height:41.88%;padding:1.40% 2.48% 10.20% 9.99%;--fs:3.52cqw;font-size:var(--fs);background-image:url(about-note2.png)}
.mx-about .mxa-step--3{width:91.1%}
.mx-about .mxa-step--3 .mxa-step__note{left:22.85%;top:16.11%;width:75.57%;height:46.14%;padding:12.08% 8.92% 0.96% 2.64%;--fs:3.63cqw;font-size:var(--fs);background-image:url(about-note3.png)}
.mx-about .mxa-step--4{width:96.4%}
.mx-about .mxa-step--4 .mxa-step__note{left:28.98%;top:23.73%;width:51.99%;height:37.92%;padding:7.74% 1.77% 1.11% 2.40%;--fs:3.32cqw;font-size:var(--fs);background-image:url(about-note4.png)}

/* ---------- 4) The Source Code ---------- */
.mx-about .mxa-source{padding:clamp(64px,8vw,120px) 0 64px;background:#fff}
.mx-about .mxa-source .mxa-wrap{display:flex;align-items:center;justify-content:space-between;gap:48px}
.mx-about .mxa-source__text{flex:1 1 0;min-width:0}
.mx-about .mxa-source .mxa-h1{margin-bottom:60px}
.mx-about .mxa-source__item+.mxa-source__item{margin-top:55px}
.mx-about .mxa-source__item p{max-width:356px;margin-top:35px;font-size:16px;line-height:1.5;letter-spacing:-.011em;color:rgba(0,0,0,.8)}
.mx-about .mxa-source__media{position:relative;flex:0 0 auto;width:min(507px,42%);aspect-ratio:507/417;overflow:hidden;background:#e9e9e9 url(about-source.jpg) center/cover no-repeat}

/* ---------- 5) tým ---------- */
.mx-about .mxa-team{padding:clamp(48px,6vw,88px) 0 clamp(96px,13vw,192px);background:#fff}
.mx-about .mxa-team__head{padding:0 30px}
.mx-about .mxa-team .mxa-h2{padding:24px 0}
.mx-about .mxa-kicker{text-align:right;font-family:var(--mxa-arial);font-size:10px;line-height:1.5;letter-spacing:.3em!important;text-transform:uppercase!important;opacity:.4}
.mx-about .mxa-team__grid{display:flex;justify-content:center;align-items:flex-start;gap:clamp(32px,5.9vw,88px);padding:48px 30px 0}
.mx-about .mxa-person{width:165px;flex:0 0 165px}
.mx-about .mxa-person__photo{width:100%;aspect-ratio:165/214;object-fit:cover;border:2px solid rgba(0,0,0,.1)!important;box-shadow:0 4px 4px rgba(0,0,0,.25);transition:transform .3s ease,box-shadow .3s ease}
.mx-about .mxa-person:hover .mxa-person__photo{transform:translateY(-4px);box-shadow:0 12px 22px rgba(0,0,0,.22)}
.mx-about .mxa-person__name{margin-top:24px!important;text-align:center;font-family:'Inter',sans-serif!important;font-size:18px;font-weight:400;line-height:28px;letter-spacing:normal!important}
.mx-about .mxa-person__role{margin-top:8px!important;text-align:center;font-family:var(--mxa-arial);font-size:12px;line-height:16px;letter-spacing:.1em!important;text-transform:uppercase!important;opacity:.6}
.mx-about .mxa-person__bio{margin-top:24px!important;font-size:12px;font-weight:500;line-height:1.5;letter-spacing:-.011em!important;color:#6b6b6b}

/* ---------- 6) fotka stěny ---------- */
.mx-about .mxa-wall{aspect-ratio:1482/824;max-height:824px;background:#fff url(about-wall.jpg) center/cover no-repeat}

/* ---------- 7) poděkování ---------- */
.mx-about .mxa-thanks{display:flex;flex-direction:column;align-items:center;padding:clamp(72px,9vw,140px) 20px 48px;text-align:center;background:#fff}
.mx-about .mxa-thanks .mxa-h1{max-width:1011px}
.mx-about .mxa-thanks__text{font-family:var(--mxa-arial);font-size:18px;line-height:29.25px;opacity:.7}
.mx-about .mxa-thanks__text:first-of-type{margin-top:clamp(48px,6vw,76px)}
.mx-about .mxa-thanks__text+.mxa-thanks__text{margin-top:29.25px}
.mx-about .mxa-btn{position:relative;display:inline-block;margin-top:clamp(170px,17vw,252px);padding:10px 26px;border:1px solid #111;border-radius:12px;background:#111;color:#fff!important;font-family:var(--mxa-arial);font-size:16px;line-height:24px;letter-spacing:.3em;text-transform:uppercase;text-decoration:none!important;transition:background .2s ease,color .2s ease}
/* stejně černé jako ostatní tlačítka webu, po najetí žluté jako papírek „How are our garments made?“ */
.mx-about .mxa-btn:hover{background:#f8f854;color:#111!important}
.mx-about .mxa-btn:focus-visible{outline:2px solid #111;outline-offset:3px}
.mx-about .mxa-btn::before{content:"";position:absolute;left:50%;bottom:calc(100% + clamp(44px,5.1vw,76px));width:1px;height:64px;background:rgba(0,0,0,.2)}
.mx-about .mxa-btn::after{content:"";position:absolute;left:calc(50% - 3.5px);bottom:calc(100% + clamp(44px,5.1vw,76px) - 4px);width:8px;height:8px;border-radius:50%;background:#000}
.mx-about .mxa-thanks__copy{margin-top:clamp(96px,11.5vw,172px);font-family:var(--mxa-arial);font-size:12px;line-height:16px;letter-spacing:.1em!important;text-transform:uppercase!important;opacity:.6}
.mx-about .mxa-thanks__tags{margin-top:16px;font-family:var(--mxa-arial);font-size:10px;line-height:15px;letter-spacing:.05em!important;opacity:.6}

/* ---------- animace při scrollu (zapíná je about_us.js) ---------- */
.mx-about.mxa-anim .mxa-reveal{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.mx-about.mxa-anim .mxa-reveal.is-in{opacity:1;transform:none}

/* ---------- tablet ---------- */
@media (max-width:1199px) and (min-width:900px){
  .mx-about .mxa-cycle{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr)}
}
@media (max-width:1100px){
  .mx-about .mxa-team__grid{flex-wrap:wrap}
}

/* ---------- mobil a menší tablet ---------- */
@media (max-width:899px){
  .mx-about .mxa-cycle{display:flex;flex-direction:column;align-items:center;gap:18px}
  .mx-about .mxa-step{width:100%!important;max-width:460px}
  .mx-about .mxa-arrow,.mx-about .mxa-arrow--right,.mx-about .mxa-arrow--left{transform:none;margin:0;align-self:center}
  .mx-about .mxa-cycle .mxa-step .mxa-step__note{font-size:min(var(--fs),15.5px)}
  .mx-about .mxa-arrow--up{display:none}
  .mx-about .mxa-process{padding-top:clamp(120px,22vw,170px);background-position:15% center}
  .mx-about .mxa-process__label{top:-56px;right:auto;left:50%;transform:translateX(-50%);width:min(78vw,380px)}
  .mx-about .mxa-source .mxa-wrap{flex-direction:column;align-items:stretch}
  .mx-about .mxa-source__media{width:100%;max-width:560px;margin:0 auto}
}
@media (max-width:767px){
  .mx-about .mxa-hero{min-height:min(78svh,640px)}
  .mx-about .mxa-hero__media{background-image:url(about-hero-m.jpg)}
  .mx-about .mxa-story{min-height:0;background-image:url(about-story-m.jpg);background-position:68% center}
  .mx-about .mxa-story::before{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.25))}
  .mx-about .mxa-story p{font-size:16px}
  .mx-about .mxa-story .mxa-h1{margin-bottom:28px}
  .mx-about .mxa-source .mxa-h1{margin-bottom:40px}
  .mx-about .mxa-source__item+.mxa-source__item{margin-top:40px}
  .mx-about .mxa-source__item p{margin-top:16px}
  .mx-about .mxa-team__head{padding:0 20px}
  .mx-about .mxa-kicker{text-align:left}
  .mx-about .mxa-team__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 20px;padding:32px 20px 0}
  .mx-about .mxa-person{width:auto;flex:none}
  .mx-about .mxa-wall{aspect-ratio:4/3;background-image:url(about-wall-m.jpg)}
  .mx-about .mxa-thanks__text{font-size:16px;line-height:26px}
}

@media (prefers-reduced-motion:reduce){
  .mx-about.mxa-anim .mxa-reveal{opacity:1;transform:none;transition:none}
  .mx-about .mxa-person__photo{transition:none}
}